blob: bd934e80b8dd7466a0a62a227f770f81a453ce86 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZenInternet - Advanced Settings</title>
<link rel="stylesheet" href="../theme.css">
<link rel="stylesheet" href="../popup/popup.css">
<link rel="stylesheet" href="data-viewer.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="container">
<header class="app-header">
<div id="header-container">
<div class="logo-container">
<img src="../assets/images/logo.png" alt="ZenInternet Logo" class="logo-img">
<h1 class="app-title">Zen Internet Settings</h1>
</div>
<div class="miniheader">
<div id="addon-version" class="addon-version"></div>
<div class="author">by <a href="https://www.sameerasw.com/" target="_blank">@sameerasw</a></div>
</div>
</div>
</header>
<main class="app-content">
<div class="toggle-setting-container">
<div class="toggle-container">
<label class="toggle-switch">
<input type="checkbox" id="disable-transparency">
<span class="slider round"></span>
</label>
<span class="toggle-label">Disable Transparency Globally</span>
</div>
<div class="setting-description">
This will disable all transparency features while keeping other styling effects active
</div>
</div>
<!-- New section for custom repository URL -->
<div class="data-section">
<h2 class="section-title">Custom Styles Repository ✨</h2>
<div class="repository-url-container">
<p class="setting-description">
Change the URL where styles are fetched from. Use this if you want to use a different styles
repository.
<br><strong>Note:</strong> After changing the URL, you should clear existing styles data for
best results.
</p>
<div class="repository-url-controls">
<input type="text" id="repository-url" class="repository-url-input"
placeholder="Enter repository URL...">
<div class="repository-url-buttons">
<button id="set-repository-url" class="action-button primary">
<i class="fas fa-save"></i> Set URL
</button>
<button id="reset-repository-url" class="action-button secondary">
<i class="fas fa-undo"></i> Reset to Default
</button>
</div>
</div>
<div id="repository-url-status" class="repository-url-status"></div>
</div>
</div>
<!-- New section for backup/restore -->
<div class="data-section">
<h2 class="section-title">Backup & Restore ✨</h2>
<div class="backup-restore-container">
<p class="backup-description">
Export your settings to a JSON file or import settings from a previously exported file.
<br><strong>Note:</strong> This includes global settings, website lists, and website-specific
feature toggles, but not the actual style data which will be re-fetched.
</p>
<div class="backup-actions">
<button id="export-settings" class="action-button primary">
<i class="fas fa-upload"></i> Export Settings
</button>
<div class="import-container">
<label for="import-file" class="action-button secondary import-label">
<i class="fas fa-download"></i> Import Settings
</label>
<input type="file" id="import-file" accept=".json" hidden>
</div>
</div>
<div id="import-status" class="import-status"></div>
</div>
</div>
<div class="data-section">
<h2 class="section-title">Global Settings</h2>
<div id="global-settings-data" class="data-container"></div>
</div>
<div class="data-section">
<h2 class="section-title">Skip/Enable List</h2>
<div id="skip-list-data" class="data-container"></div>
</div>
<div class="danger-zone">
<h3 class="danger-title">Danger Zone</h3>
<div class="danger-actions">
<button id="delete-all-data" class="action-button danger">
<i class="fas fa-trash"></i> Delete All Data
</button>
</div>
</div>
<div class="data-section">
<h2 class="section-title">Websites and CSS</h2>
<div id="combined-websites-data" class="data-container"></div>
</div>
</main>
<footer class="app-footer">
<a href="https://sameerasw.github.io/my-internet/" class="footer-link" target="_blank">
<i class="fas fa-book"></i> Styles Repository
</a>
<div class="footer-divider"></div>
<a href="https://github.com/sameerasw/zeninternet" class="footer-link" target="_blank">
<i class="fa-brands fa-github"></i> Project Repository
</a>
</footer>
</div>
<script src="data-viewer.js"></script>
</body>
</html>
|
