-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
282 lines (256 loc) · 31.7 KB
/
Copy pathindex.html
File metadata and controls
282 lines (256 loc) · 31.7 KB
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Control Panel">
<link rel="apple-touch-icon" href="icon.png">
<title>Trung tâm điều khiển - Sentechtipvn</title>
<link rel="stylesheet" href="CSS/style.css?v=10.4">
</head>
<body>
<div id="intro-screen">
<div class="intro-half intro-left"></div>
<div class="intro-half intro-right"></div>
<div class="intro-content">
<div class="apple-logo-wrapper">
<svg class="apple-svg" viewBox="0 0 52 64" width="85" height="85">
<path fill="currentColor" d="M41.937 29.513c.07 7.552 6.625 10.065 6.698 10.097c-.056.178-1.047 3.582-3.454 7.098c-2.08 3.04-4.238 6.07-7.64 6.132c-3.34.061-4.415-1.982-8.235-1.982s-5.013 1.92-8.177 2.043c-3.282.125-5.782-3.287-7.88-6.316c-4.285-6.196-7.56-17.508-3.162-25.144c2.184-3.792 6.089-6.193 10.326-6.254c3.223-.062 6.266 2.168 8.236 2.168s5.667-2.682 9.554-2.288c1.627.068 6.194.657 9.127 4.95c-.236.147-5.45 3.182-5.393 9.496m-6.28-18.545C37.4 8.858 38.573 5.922 38.253 3c-2.512.101-5.55 1.674-7.352 3.782c-1.614 1.867-3.029 4.856-2.647 7.72c2.8.216 5.66-1.423 7.403-3.534"/>
</svg>
</div>
<div class="intro-title-wrapper">
<div class="intro-title-container" id="intro-text-wrapper">
<span>Q</span><span>u</span><span>i</span><span>c</span><span>k</span>
<span> </span>
<span>C</span><span>o</span><span>n</span><span>t</span><span>r</span><span>o</span><span>l</span>
</div>
</div>
</div>
</div>
<div class="app-container grid-mode" id="main-container">
<div class="app-header" data-i18n="app_title">Quick Control</div>
<div class="grid-layout" id="control-panel"></div>
<div class="media-player-widget">
<div class="media-controls">
<button class="media-btn" id="btn-media-prev" onclick="location.href='shortcuts://run-shortcut?name=QuickControl&input=text&text=media_prev'">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
</button>
<button class="media-btn play-main" id="btn-media-play" onclick="location.href='shortcuts://run-shortcut?name=QuickControl&input=text&text=media_playpause'">
<svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</button>
<button class="media-btn" id="btn-media-next" onclick="location.href='shortcuts://run-shortcut?name=QuickControl&input=text&text=media_next'">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6z"/></svg>
</button>
</div>
<div class="system-sliders">
<div class="sys-slider-container">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
<input type="range" class="sys-slider" id="sys-volume" min="0" max="100" value="50" onchange="location.href='shortcuts://run-shortcut?name=QuickControl&input=text&text=vol_' + this.value">
</div>
<div class="sys-slider-container">
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z"/></svg>
<input type="range" class="sys-slider" id="sys-brightness" min="0" max="100" value="50" onchange="location.href='shortcuts://run-shortcut?name=QuickControl&input=text&text=bri_' + this.value">
</div>
</div>
</div>
<button class="settings-fab" id="open-settings">
<img src="Theme/icon_setting.png" alt="Settings">
</button>
</div>
<div class="settings-overlay" id="settings-overlay"></div>
<div class="settings-drawer" id="settings-drawer">
<div class="settings-header">
<h2 data-i18n="settings_title">⚙️ Cài đặt</h2>
<button id="close-settings">✕</button>
</div>
<div class="settings-body">
<div class="config-actions">
<button id="btn-export" class="action-btn">📤 <span data-i18n="btn_export">Xuất</span></button>
<button id="btn-import" class="action-btn">📥 <span data-i18n="btn_import">Nhập</span></button>
<button id="btn-edit-layout" class="action-btn">🔄 <span data-i18n="btn_edit_layout">Sắp xếp</span></button>
</div>
<div class="setting-group highlight-box" style="position: relative;">
<label data-i18n="lbl_theme_presets">🪄 Giao diện <span class="badge-dot" id="badge-preset"></span></label>
<select id="val-theme-preset">
<option value="none" data-i18n="opt_preset_none">Tự do tùy chỉnh</option>
<option value="WyIjY2MwMDAwIiwiI2ZmZmZmZiIsImdyaWQiLCIjY2MwMDAwIiwiI2ZmZmZmZiIsIiNmZmZmMDAiLCJUaGVtZS9SZWQtQ29sb3VyLnBuZyIsIjYwIiwiMjgiLCIxMDAiLCI1MCIsIiNjYzAwMDAiLCIjZmZmZjAwIixbImdsb3ciLCIwIiwiMCIsIjE1IiwiMCIsIiNmZmZmMDAiLCIxMDAiXSxmYWxzZSwiMjIiLCIwLjUiLHRydWUsIjEwIiwiMCIsIjEwIiwiMTAwIiwiOTAiLCIzIiwiNTAiLCIjZmZmZmZmIiwiI2I1MWEwMCIsIiNmZmZmMDAiXQ==" data-i18n="opt_preset_vn">🇻🇳 VietOS</option>
<option value="eyJiZ01haW4iOiIjZmZmZmZmIiwidGV4dENvbG9yIjoiIzAwMDAwMCIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiI2NjMDAwMCIsImxpc3RUZXh0IjoiI2ZmZmZmZiIsImxpc3RTdmciOiIjZmZmZjAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL05lb25fcmFpbmJvdy5wbmciLCJmcmFtZVNpemUiOiI1NCIsInN2Z1NpemUiOiIyNSIsInN2Z09wYWNpdHkiOiIxMDAiLCJmcmFtZVJhZGl1cyI6IjUwIiwiZnJhbWVDb2xvciI6IiNjYzAwMDAiLCJzdmdDb2xvciI6IiNmZWZiNDEiLCJoaWRlTGFiZWxzIjpmYWxzZSwidGl0bGVTaXplIjoiMzYiLCJ0aXRsZVNwYWNpbmciOiIwLjUiLCJsaXN0RnJhbWUiOnRydWUsImljb25TaXplIjoiMTEiLCJpY29uU3BhY2luZyI6IjAiLCJsaXN0QmdPcGFjaXR5IjoiMTAiLCJmcmFtZUJnT3BhY2l0eSI6IjEwMCIsIm1lZGlhV2lkdGgiOiI5OCIsIm1lZGlhQmdPcGFjaXR5IjoiNDciLCJtZWRpYUJ0blNpemUiOiI1MCIsIm1lZGlhQmdDb2xvciI6IiNmZmZmZmYiLCJtZWRpYUJ0bkNvbG9yIjoiI2Q2ZDZkNiIsIm1lZGlhU3ZnQ29sb3IiOiIjZmVmYjQxIiwiZ2xhc3NNb2RlIjpmYWxzZSwicG9wdXBBbmltIjoiYW5pbS16b29tIiwic2hhZG93Q29uZmlnIjp7Imluc2V0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjUiLCJiIjoiMCIsInMiOiItNCIsImMiOiIjZmZmZmZmIiwibyI6IjEwMCJ9LCJvdXRlciI6eyJhY3RpdmUiOnRydWUsIngiOiIwIiwieSI6IjYiLCJiIjoiNSIsInMiOiItMyIsImMiOiIjMDAwMDAwIiwibyI6IjEwMCJ9LCJzb2Z0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjAiLCJiIjoiNyIsInMiOiIyIiwiYyI6IiNmZjQwMTUiLCJvIjoiMTAwIn0sImhhcmQiOnsiYWN0aXZlIjp0cnVlLCJ4IjoiMCIsInkiOiI0IiwiYiI6IjEwIiwicyI6IjAiLCJjIjoiIzQ3NDc0NyIsIm8iOiIxMDAifSwiZ2xvdyI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjEyIiwicyI6IjAiLCJjIjoiI2UyMjQwMCIsIm8iOiI0OCJ9fX0=" data-i18n="opt_preset_Neon_light">Neon sáng</option>
<option value="eyJiZ01haW4iOiIjMzMzMzMzIiwidGV4dENvbG9yIjoiI2ZmZmZmZiIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiI2NjMDAwMCIsImxpc3RUZXh0IjoiI2ZmZmZmZiIsImxpc3RTdmciOiIjZmZmZjAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL05lb25fcmFpbmJvdy5wbmciLCJmcmFtZVNpemUiOiI1NCIsInN2Z1NpemUiOiIyNSIsInN2Z09wYWNpdHkiOiIxMDAiLCJmcmFtZVJhZGl1cyI6IjUwIiwiZnJhbWVDb2xvciI6IiNjYzAwMDAiLCJzdmdDb2xvciI6IiNmZWZiNDEiLCJoaWRlTGFiZWxzIjpmYWxzZSwidGl0bGVTaXplIjoiMzYiLCJ0aXRsZVNwYWNpbmciOiIwLjUiLCJsaXN0RnJhbWUiOnRydWUsImljb25TaXplIjoiMTEiLCJpY29uU3BhY2luZyI6IjAiLCJsaXN0QmdPcGFjaXR5IjoiMTAiLCJmcmFtZUJnT3BhY2l0eSI6IjEwMCIsIm1lZGlhV2lkdGgiOiI5OCIsIm1lZGlhQmdPcGFjaXR5IjoiMTAwIiwibWVkaWFCdG5TaXplIjoiNTAiLCJtZWRpYUJnQ29sb3IiOiIjMzMzMzMzIiwibWVkaWFCdG5Db2xvciI6IiMzMzMzMzMiLCJtZWRpYVN2Z0NvbG9yIjoiI2ZlZmI0MSIsImdsYXNzTW9kZSI6ZmFsc2UsInBvcHVwQW5pbSI6ImFuaW0tem9vbSIsInNoYWRvd0NvbmZpZyI6eyJpbnNldCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiI1IiwiYiI6IjAiLCJzIjoiLTQiLCJjIjoiI2ZmZmZmZiIsIm8iOiIxMDAifSwib3V0ZXIiOnsiYWN0aXZlIjp0cnVlLCJ4IjoiMCIsInkiOiI2IiwiYiI6IjkiLCJzIjoiLTIiLCJjIjoiIzAwMDAwMCIsIm8iOiIxMDAifSwic29mdCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjciLCJzIjoiMiIsImMiOiIjZmY0MDE1IiwibyI6IjEwMCJ9LCJoYXJkIjp7ImFjdGl2ZSI6dHJ1ZSwieCI6IjAiLCJ5IjoiLTgiLCJiIjoiMTIiLCJzIjoiLTIiLCJjIjoiIzk5OTk5OSIsIm8iOiI0NSJ9LCJnbG93Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjAiLCJiIjoiMTIiLCJzIjoiMCIsImMiOiIjZTIyNDAwIiwibyI6IjQ4In19fQ==" data-i18n="opt_preset_Dark_neon">Neon tối</option>
<option value="eyJiZ01haW4iOiIjZDZkNmQ2IiwidGV4dENvbG9yIjoiIzAwMDAwMCIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiIzFhMWExYSIsImxpc3RUZXh0IjoiI2ZmZDcwMCIsImxpc3RTdmciOiIjZmZkNzAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL2ljb24tR2xhc3MucG5nIiwiZnJhbWVTaXplIjoiNjAiLCJzdmdTaXplIjoiMjkiLCJzdmdPcGFjaXR5IjoiMTAwIiwiZnJhbWVSYWRpdXMiOiI1MCIsImZyYW1lQ29sb3IiOiIjMjIyMjIyIiwic3ZnQ29sb3IiOiIjMDAwMDAwIiwiaGlkZUxhYmVscyI6ZmFsc2UsInRpdGxlU2l6ZSI6IjM3IiwidGl0bGVTcGFjaW5nIjoiMSIsImxpc3RGcmFtZSI6dHJ1ZSwiaWNvblNpemUiOiIxMSIsImljb25TcGFjaW5nIjoiMCIsImxpc3RCZ09wYWNpdHkiOiIxMCIsImZyYW1lQmdPcGFjaXR5IjoiMTAwIiwibWVkaWFXaWR0aCI6IjkwIiwibWVkaWFCZ09wYWNpdHkiOiIzIiwibWVkaWFCdG5TaXplIjoiNTAiLCJtZWRpYUJnQ29sb3IiOiIjZmZmZmZmIiwibWVkaWFCdG5Db2xvciI6IiNhZGFkYWQiLCJtZWRpYVN2Z0NvbG9yIjoiIzAwMDAwMCIsImdsYXNzTW9kZSI6ZmFsc2UsInBvcHVwQW5pbSI6ImFuaW0tem9vbSIsInNoYWRvd0NvbmZpZyI6eyJpbnNldCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiLTEyIiwieSI6Ii03IiwiYiI6IjQiLCJzIjoiLTEwIiwiYyI6IiMwMDAwMDAiLCJvIjoiMjEifSwib3V0ZXIiOnsiYWN0aXZlIjp0cnVlLCJ4IjoiMyIsInkiOiIzIiwiYiI6IjMiLCJzIjoiLTIiLCJjIjoiIzAwMDAwMCIsIm8iOiI2MCJ9LCJzb2Z0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjAiLCJiIjoiNCIsInMiOiIxIiwiYyI6IiMwMDhjYjQiLCJvIjoiNDcifSwiaGFyZCI6eyJhY3RpdmUiOnRydWUsIngiOiItMyIsInkiOiItMyIsImIiOiI3IiwicyI6Ii0xIiwiYyI6IiNmZmZmZmYiLCJvIjoiNzQifSwiZ2xvdyI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjciLCJzIjoiNSIsImMiOiIjNDc0NzQ3IiwibyI6IjQzIn19fQ==" data-i18n="opt_preset_Glass_button">Nút thuỷ tinh</option>
<option value="eyJiZ01haW4iOiIjMzMzMzMzIiwidGV4dENvbG9yIjoiIzMyYzc1OSIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiIzFhMWExYSIsImxpc3RUZXh0IjoiI2ZmZDcwMCIsImxpc3RTdmciOiIjZmZkNzAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL0JsYWNrX2JsdWVfYm9yZGVyLnBuZyIsImZyYW1lU2l6ZSI6IjYwIiwic3ZnU2l6ZSI6IjI5Iiwic3ZnT3BhY2l0eSI6IjEwMCIsImZyYW1lUmFkaXVzIjoiNTAiLCJmcmFtZUNvbG9yIjoiIzIyMjIyMiIsInN2Z0NvbG9yIjoiIzJiZmY0NyIsImhpZGVMYWJlbHMiOmZhbHNlLCJ0aXRsZVNpemUiOiIzNyIsInRpdGxlU3BhY2luZyI6IjEiLCJsaXN0RnJhbWUiOnRydWUsImljb25TaXplIjoiMTEiLCJpY29uU3BhY2luZyI6IjAiLCJsaXN0QmdPcGFjaXR5IjoiMTAiLCJmcmFtZUJnT3BhY2l0eSI6IjEwMCIsIm1lZGlhV2lkdGgiOiI5MSIsIm1lZGlhQmdPcGFjaXR5IjoiMTAwIiwibWVkaWFCdG5TaXplIjoiNTAiLCJtZWRpYUJnQ29sb3IiOiIjMDBlYmY3IiwibWVkaWFCdG5Db2xvciI6IiMzMzMzMzMiLCJtZWRpYVN2Z0NvbG9yIjoiIzMyYzc1OSIsImdsYXNzTW9kZSI6ZmFsc2UsInBvcHVwQW5pbSI6ImFuaW0tem9vbSIsInNoYWRvd0NvbmZpZyI6eyJpbnNldCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiLTEyIiwieSI6Ii03IiwiYiI6IjQiLCJzIjoiLTEwIiwiYyI6IiMwMDAwMDAiLCJvIjoiMjEifSwib3V0ZXIiOnsiYWN0aXZlIjp0cnVlLCJ4IjoiLTIiLCJ5IjoiNCIsImIiOiI4IiwicyI6Ii0xIiwiYyI6IiMwMDBiMDgiLCJvIjoiMTAwIn0sInNvZnQiOnsiYWN0aXZlIjpmYWxzZSwieCI6IjAiLCJ5IjoiMCIsImIiOiI0IiwicyI6IjEiLCJjIjoiIzAwOGNiNCIsIm8iOiI0NyJ9LCJoYXJkIjp7ImFjdGl2ZSI6ZmFsc2UsIngiOiItMyIsInkiOiItMyIsImIiOiI3IiwicyI6Ii0xIiwiYyI6IiNmZmZmZmYiLCJvIjoiNzQifSwiZ2xvdyI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjciLCJzIjoiNSIsImMiOiIjNDc0NzQ3IiwibyI6IjQzIn19fQ==" data-i18n="opt_preset_Dark_blue">Xanh tối</option>
<option value="eyJiZ01haW4iOiIjMDAwMDAwIiwidGV4dENvbG9yIjoiI2ZmZmZmZiIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiIzFhMWExYSIsImxpc3RUZXh0IjoiI2ZmZDcwMCIsImxpc3RTdmciOiIjZmZkNzAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL25lb25fYmxhY2sucG5nIiwiZnJhbWVTaXplIjoiNjAiLCJzdmdTaXplIjoiMjkiLCJzdmdPcGFjaXR5IjoiMTAwIiwiZnJhbWVSYWRpdXMiOiI1MCIsImZyYW1lQ29sb3IiOiIjMjIyMjIyIiwic3ZnQ29sb3IiOiIjZmZmZmZmIiwiaGlkZUxhYmVscyI6ZmFsc2UsInRpdGxlU2l6ZSI6IjM3IiwidGl0bGVTcGFjaW5nIjoiMSIsImxpc3RGcmFtZSI6dHJ1ZSwiaWNvblNpemUiOiIxMSIsImljb25TcGFjaW5nIjoiMCIsImxpc3RCZ09wYWNpdHkiOiIxMCIsImZyYW1lQmdPcGFjaXR5IjoiMTAwIiwibWVkaWFXaWR0aCI6IjkxIiwibWVkaWFCZ09wYWNpdHkiOiIxMDAiLCJtZWRpYUJ0blNpemUiOiI1MCIsIm1lZGlhQmdDb2xvciI6IiMwMDAwMDAiLCJtZWRpYUJ0bkNvbG9yIjoiIzAwNDJhOSIsIm1lZGlhU3ZnQ29sb3IiOiIjMzJjNzU5IiwiZ2xhc3NNb2RlIjpmYWxzZSwicG9wdXBBbmltIjoiYW5pbS16b29tIiwic2hhZG93Q29uZmlnIjp7Imluc2V0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiItMTIiLCJ5IjoiLTciLCJiIjoiNCIsInMiOiItMTAiLCJjIjoiIzAwMDAwMCIsIm8iOiIyMSJ9LCJvdXRlciI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiLTIiLCJ5IjoiNCIsImIiOiI4IiwicyI6Ii0xIiwiYyI6IiMwMDBiMDgiLCJvIjoiMTAwIn0sInNvZnQiOnsiYWN0aXZlIjpmYWxzZSwieCI6IjAiLCJ5IjoiMCIsImIiOiI0IiwicyI6IjEiLCJjIjoiIzAwOGNiNCIsIm8iOiI0NyJ9LCJoYXJkIjp7ImFjdGl2ZSI6ZmFsc2UsIngiOiItMyIsInkiOiItMyIsImIiOiI3IiwicyI6Ii0xIiwiYyI6IiNmZmZmZmYiLCJvIjoiNzQifSwiZ2xvdyI6eyJhY3RpdmUiOnRydWUsIngiOiIwIiwieSI6IjAiLCJiIjoiMTQiLCJzIjoiMCIsImMiOiIjY2JmMGZmIiwibyI6IjEwMCJ9fX0=" data-i18n="opt_preset_Neon_glow">Phát sáng neon</option>
<option value="eyJiZ01haW4iOiIjZWJlYmViIiwidGV4dENvbG9yIjoiIzAwMDAwMCIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiI2NjMDAwMCIsImxpc3RUZXh0IjoiI2ZmZmZmZiIsImxpc3RTdmciOiIjZmZmZjAwIiwidGhlbWVGcmFtZSI6IlRoZW1lL0NvbnZleF9nbGFzcy5wbmciLCJmcmFtZVNpemUiOiI1NiIsInN2Z1NpemUiOiIzMCIsInN2Z09wYWNpdHkiOiIxMDAiLCJmcmFtZVJhZGl1cyI6IjUwIiwiZnJhbWVDb2xvciI6IiNjYzAwMDAiLCJzdmdDb2xvciI6IiMwMDAwMDAiLCJoaWRlTGFiZWxzIjpmYWxzZSwidGl0bGVTaXplIjoiMzQiLCJ0aXRsZVNwYWNpbmciOiIwIiwibGlzdEZyYW1lIjp0cnVlLCJpY29uU2l6ZSI6IjEwIiwiaWNvblNwYWNpbmciOiIwIiwibGlzdEJnT3BhY2l0eSI6IjEwIiwiZnJhbWVCZ09wYWNpdHkiOiIxMDAiLCJtZWRpYVdpZHRoIjoiOTgiLCJtZWRpYUJnT3BhY2l0eSI6IjI2IiwibWVkaWFCdG5TaXplIjoiNTciLCJtZWRpYUJnQ29sb3IiOiIjZWJlYmViIiwibWVkaWFCdG5Db2xvciI6IiNlYmViZWIiLCJtZWRpYVN2Z0NvbG9yIjoiIzAwMDAwMCIsImdsYXNzTW9kZSI6ZmFsc2UsInBvcHVwQW5pbSI6ImFuaW0tem9vbSIsInNoYWRvd0NvbmZpZyI6eyJpbnNldCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjkiLCJzIjoiLTEiLCJjIjoiI2JlMzhmMyIsIm8iOiIxMDAifSwib3V0ZXIiOnsiYWN0aXZlIjp0cnVlLCJ4IjoiMCIsInkiOiIwIiwiYiI6IjUiLCJzIjoiMCIsImMiOiIjMDAxMDM2IiwibyI6IjEwMCJ9LCJzb2Z0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjAiLCJiIjoiNCIsInMiOiIxIiwiYyI6IiMwMDhjYjQiLCJvIjoiNDcifSwiaGFyZCI6eyJhY3RpdmUiOmZhbHNlLCJ4IjoiNCIsInkiOiI1IiwiYiI6IjYiLCJzIjoiLTEiLCJjIjoiIzllNTlmZiIsIm8iOiI3NyJ9LCJnbG93Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjAiLCJiIjoiMjIiLCJzIjoiLTUiLCJjIjoiI2QzNTdmZSIsIm8iOiIxMDAifX19" data-i18n="opt_preset_Convex_glass">Kính cầu lồi</option>
<option value="eyJiZ01haW4iOiIjZmZmZmZmIiwidGV4dENvbG9yIjoiIzAwMDAwMCIsImxheW91dE1vZGUiOiJncmlkIiwibGlzdEJnIjoiIzFhMWExYSIsImxpc3RUZXh0IjoiI2ZmZmZmZiIsImxpc3RTdmciOiIjZmZmZmZmIiwidGhlbWVGcmFtZSI6IlRoZW1lL0NvbnZleF9nbGFzcy5wbmciLCJmcmFtZVNpemUiOiI2MCIsInN2Z1NpemUiOiIyOCIsInN2Z09wYWNpdHkiOiIxMDAiLCJmcmFtZVJhZGl1cyI6IjUwIiwiZnJhbWVDb2xvciI6IiMwMDAwMDAiLCJzdmdDb2xvciI6IiMwMDAwMDAiLCJoaWRlTGFiZWxzIjpmYWxzZSwidGl0bGVTaXplIjoiMjIiLCJ0aXRsZVNwYWNpbmciOiIwLjUiLCJsaXN0RnJhbWUiOmZhbHNlLCJpY29uU2l6ZSI6IjEyIiwiaWNvblNwYWNpbmciOiIwIiwibGlzdEJnT3BhY2l0eSI6IjEwIiwiZnJhbWVCZ09wYWNpdHkiOiIxMDAiLCJtZWRpYVdpZHRoIjoiOTAiLCJtZWRpYUJnT3BhY2l0eSI6IjEwMCIsIm1lZGlhQnRuU2l6ZSI6IjQ2IiwibWVkaWFCZ0NvbG9yIjoiI2ZmZmZmZiIsIm1lZGlhQnRuQ29sb3IiOiIjZmZmZmZmIiwibWVkaWFTdmdDb2xvciI6IiMwMDAwMDAiLCJnbGFzc01vZGUiOmZhbHNlLCJwb3B1cEFuaW0iOiJhbmltLWZhZGUiLCJzaGFkb3dDb25maWciOnsiaW5zZXQiOnsiYWN0aXZlIjpmYWxzZSwieCI6IjAiLCJ5IjoiNCIsImIiOiIxMCIsInMiOiIwIiwiYyI6IiMwMDAwMDAiLCJvIjoiMTAwIn0sIm91dGVyIjp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjQiLCJiIjoiMTAiLCJzIjoiMCIsImMiOiIjMDAwMDAwIiwibyI6IjEwMCJ9LCJzb2Z0Ijp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjQiLCJiIjoiMTAiLCJzIjoiMCIsImMiOiIjMDAwMDAwIiwibyI6IjEwMCJ9LCJoYXJkIjp7ImFjdGl2ZSI6ZmFsc2UsIngiOiIwIiwieSI6IjQiLCJiIjoiMTAiLCJzIjoiMCIsImMiOiIjMDAwMDAwIiwibyI6IjEwMCJ9LCJnbG93Ijp7ImFjdGl2ZSI6dHJ1ZSwieCI6IjAiLCJ5IjoiLTEiLCJiIjoiNSIsInMiOiIxIiwiYyI6IiNiZTM4ZjMiLCJvIjoiMTAwIn19fQ==" data-i18n="opt_preset_Purple_glass">Thuỷ tinh tím</option>
</select>
<label style="margin-top: 10px;" data-i18n="lbl_popup_anim">✨ Hiệu ứng Popup Cài đặt</label>
<select id="val-popup-anim">
<option value="default" data-i18n="opt_popup_default">Trượt từ phải sang (Mặc định)</option>
<option value="anim-zoom" data-i18n="opt_popup_zoom">Thu phóng (macOS)</option>
<option value="anim-slide-top" data-i18n="opt_popup_slide_top">Trượt từ trên xuống</option>
<option value="anim-fade" data-i18n="opt_popup_fade">Làm mờ (Fade)</option>
</select>
<div class="feature-toggles">
<label><span data-i18n="lbl_audio_feedback">🎚️ Âm thanh</span><input type="checkbox" id="toggle-audio"></label>
<label><span data-i18n="lbl_parallax">🧭 Gia tốc kế 3D</span><input type="checkbox" id="toggle-parallax"></label>
</div>
</div>
<div class="setting-group highlight-box">
<label data-i18n="lbl_title_adjust">Sửa tiêu đề</label>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_title_size">💫 Cỡ chữ chính</span><input type="range" id="val-title-size" min="14" max="40" value="22"></div>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_title_spacing">📐 Dãn chữ chính</span><input type="range" id="val-title-spacing" min="0" max="10" step="0.5" value="0.5"></div>
<hr style="border: 0; border-top: 1px solid rgba(150,150,150,0.2); margin: 10px 0;">
<div class="slider-item"><span class="slider-label" data-i18n="lbl_icon_size">💫 Cỡ chữ Icon</span><input type="range" id="val-icon-size" min="10" max="25" value="14"></div>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_icon_spacing">📐 Dãn chữ Icon</span><input type="range" id="val-icon-spacing" min="0" max="5" step="0.1" value="0"></div>
<label style="margin-top: 10px;"><input type="checkbox" id="toggle-hide-labels"> <span data-i18n="lbl_hide_labels">Ẩn tên</span></label>
</div>
<div class="setting-group">
<label data-i18n="lbl_bg_image">📱 Hình nền tự chọn</label>
<input type="file" id="upload-bg" accept="image/*" style="font-size: 12px;">
<button type="button" id="clear-bg" data-i18n="btn_clear_bg" style="margin-top:5px; padding:5px; background:rgba(150,150,150,0.2); border:none; color:inherit; border-radius:5px;">Xóa ảnh nền</button>
</div>
<div class="setting-group">
<label><input type="checkbox" id="toggle-glass"> <span data-i18n="lbl_glassmorphism">Bật Kính mờ</span></label>
</div>
<div class="setting-group dev-only">
<label data-i18n="lbl_bg_main">🏳️🌈 Màu Nền Chính</label><input type="color" id="val-bg-main" value="#121b22">
</div>
<div class="setting-group">
<label data-i18n="lbl_text_color">🏳️🌈 Màu Chữ Hệ Thống</label><input type="color" id="val-text-color" value="#ffffff">
</div>
<div class="setting-group">
<label data-i18n="lbl_layout_mode">Danh sách/Lưới</label>
<div class="layout-buttons">
<button id="btn-layout-list" class="layout-btn" data-i18n="btn_list">Danh sách</button>
<button id="btn-layout-grid" class="layout-btn active" data-i18n="btn_grid">Lưới</button>
</div>
</div>
<div class="setting-group highlight-box dev-only">
<label data-i18n="lbl_list_bg">Màu nền Danh sách</label><input type="color" id="val-list-bg" value="#1a1a1a">
<label data-i18n="lbl_list_text">Màu chữ Danh sách</label><input type="color" id="val-list-text" value="#ffffff">
<label data-i18n="lbl_list_svg">Màu SVG Danh sách</label><input type="color" id="val-list-svg" value="#ffffff">
<div class="slider-item" style="margin-top: 10px;">
<span class="slider-label" data-i18n="lbl_list_bg_opacity" style="width: 120px;">Đậm nhạt màu nút</span>
<input type="range" id="val-list-bg-opacity" min="0" max="100" value="10">
</div>
<label style="margin-top: 10px;"><input type="checkbox" id="toggle-list-frame"> <span data-i18n="lbl_list_frame">Theme cho Danh sách</span></label>
</div>
<div class="setting-group" style="position: relative;">
<label data-i18n="lbl_theme_frame">💠 Theme SVG <span class="badge-dot" id="badge-theme"></span></label>
<div class="theme-grid-picker">
<div class="theme-chip active" data-value="none"><span style="font-size: 18px;">❌</span></div>
<div class="theme-chip" data-value="Theme/Black-Colour.png"><img src="Theme/Black-Colour.png" alt="Black"></div>
<div class="theme-chip" data-value="Theme/Red-Colour.png"><img src="Theme/Red-Colour.png" alt="Red"></div>
<div class="theme-chip" data-value="Theme/Green-colour.png"><img src="Theme/Green-colour.png" alt="Green"></div>
<div class="theme-chip" data-value="Theme/Orange-colour.png"><img src="Theme/Orange-colour.png" alt="Orange"></div>
<div class="theme-chip" data-value="Theme/Purple-colour.png"><img src="Theme/Purple-colour.png" alt="Purple"></div>
<div class="theme-chip" data-value="Theme/Moss-green.png"><img src="Theme/Moss-green.png" alt="Moss"></div>
<div class="theme-chip" data-value="Theme/icon-Glass.png"><img src="Theme/icon-Glass.png" alt="Glass"></div>
<div class="theme-chip" data-value="Theme/Convex_glass.png"><img src="Theme/Convex_glass.png" alt="Convex glass"></div>
<div class="theme-chip-more" id="btn-more-themes"><span>+</span></div>
</div>
<input type="hidden" id="val-theme-frame" value="none">
</div>
<div class="setting-group dev-only">
<label data-i18n="lbl_frame_svg_size">🖼️ Khung Icon & SVG</label>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_frame_size">Khung</span><input type="range" id="val-frame-size" min="40" max="100" value="60"></div>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_frame_radius">Bo góc</span><input type="range" id="val-frame-radius" min="0" max="50" value="22"></div>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_svg_size">SVG</span><input type="range" id="val-svg-size" min="16" max="60" value="28"></div>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_svg_opacity">Độ đậm SVG</span><input type="range" id="val-svg-opacity" min="0" max="100" value="100"></div>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_frame_color">Nền khung</span><input type="color" id="val-frame-color" value="#000000"></div>
<div class="slider-item" style="margin-top: 5px;">
<span class="slider-label" data-i18n="lbl_frame_bg_opacity">Độ đậm nền</span><input type="range" id="val-frame-bg-opacity" min="0" max="100" value="100">
</div>
</div>
<div class="setting-group">
<label data-i18n="lbl_svg_color">Màu SVG</label><input type="color" id="val-svg-color" value="#ffffff">
</div>
<div class="setting-group highlight-box dev-only">
<label data-i18n="lbl_media_widget">🎵 Trình Phát Nhạc</label>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_media_width">Kích thước khung</span><input type="range" id="val-media-width" min="50" max="100" value="90"></div>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_media_bg_opacity">Độ mờ khung</span><input type="range" id="val-media-bg-opacity" min="0" max="100" value="3"></div>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_media_btn_size">Cỡ nút bấm</span><input type="range" id="val-media-btn-size" min="30" max="70" value="50"></div>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_media_bg_color">Màu khung</span><input type="color" id="val-media-bg-color" value="#ffffff"></div>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_media_btn_color">Màu nút</span><input type="color" id="val-media-btn-color" value="#ffffff"></div>
<div class="slider-item"><span class="slider-label" data-i18n="lbl_media_svg_color">Màu SVG</span><input type="color" id="val-media-svg-color" value="#ffffff"></div>
</div>
<h3 class="section-title dev-only" data-i18n="lbl_shadow_section">🔘 Đổ Bóng</h3>
<div id="shadow-controls" class="dev-only"></div>
</div>
<button id="btn-info" class="info-btn">i</button>
</div>
<div class="info-overlay" id="theme-overlay"></div>
<div id="theme-modal" class="macos-window" style="max-width: 320px;">
<div class="macos-header">
<div class="mac-dot close-dot" id="close-theme-modal"></div>
<div class="mac-dot min-dot"></div>
<div class="mac-dot max-dot"></div>
<div style="font-size: 14px; font-weight: bold; margin-left: 10px; color: #333;" data-i18n="modal_theme_title">Kho Giao Diện</div>
</div>
<div class="macos-body">
<div class="theme-grid-picker full-grid">
<div class="theme-chip active" data-value="none"><span style="font-size: 18px;">❌</span></div>
<div class="theme-chip" data-value="Theme/Black-Colour.png"><img src="Theme/Black-Colour.png" alt="Black"></div>
<div class="theme-chip" data-value="Theme/Red-Colour.png"><img src="Theme/Red-Colour.png" alt="Red"></div>
<div class="theme-chip" data-value="Theme/Green-colour.png"><img src="Theme/Green-colour.png" alt="Green"></div>
<div class="theme-chip" data-value="Theme/Orange-colour.png"><img src="Theme/Orange-colour.png" alt="Orange"></div>
<div class="theme-chip" data-value="Theme/Purple-colour.png"><img src="Theme/Purple-colour.png" alt="Purple"></div>
<div class="theme-chip" data-value="Theme/Moss-green.png"><img src="Theme/Moss-green.png" alt="Moss"></div>
<div class="theme-chip" data-value="Theme/icon-Glass.png"><img src="Theme/icon-Glass.png" alt="Glass"></div>
<div class="theme-chip" data-value="Theme/icon-Glass2.png"><img src="Theme/icon-Glass2.png" alt="Glass 2"></div>
<div class="theme-chip" data-value="Theme/icon-Glass3.png"><img src="Theme/icon-Glass3.png" alt="Glass 3"></div>
<div class="theme-chip" data-value="Theme/Convex_glass.png"><img src="Theme/Convex_glass.png" alt="Convex glass"></div>
<div class="theme-chip" data-value="Theme/Black_button.png"><img src="Theme/Black_button.png" alt="Black button"></div>
<div class="theme-chip" data-value="Theme/icon-rainbow.png"><img src="Theme/icon-rainbow.png" alt="Rainbow"></div>
<div class="theme-chip" data-value="Theme/White_button.png"><img src="Theme/White_button.png" alt="White"></div>
<div class="theme-chip" data-value="Theme/Black_blue_border.png"><img src="Theme/Black_blue_border.png" alt="Black blue"></div>
<div class="theme-chip" data-value="Theme/Bubble_neon.png"><img src="Theme/Bubble_neon.png" alt="Bubble neon"></div>
<div class="theme-chip" data-value="Theme/Neon_rainbow.png"><img src="Theme/Neon_rainbow.png" alt="Neon rainbow"></div>
<div class="theme-chip" data-value="Theme/neon_black.png"><img src="Theme/neon_black.png" alt="neon black"></div>
</div>
</div>
</div>
<div class="info-overlay" id="info-overlay"></div>
<div id="info-modal" class="macos-window">
<div class="macos-header">
<div class="mac-dot close-dot" id="close-info"></div>
<div class="mac-dot min-dot"></div>
<div class="mac-dot max-dot"></div>
<div style="font-size: 14px; font-weight: bold; margin-left: 10px; color: #333;" data-i18n="modal_info_title">Thông tin ứng dụng</div>
</div>
<div class="macos-body">
<div class="info-desc">
<h3 style="font-size: 18px; margin-bottom: 8px;" data-i18n="info_title">Quick Control</h3>
<p style="font-size: 13px; color: #666;">
<span data-i18n="info_dev_prefix">Phát triển bởi</span>
<a href="https://www.youtube.com/@Sentechtipvn" target="_blank" rel="noopener" style="color: #007aff; font-weight: 600; text-decoration: none;">Sentechtipvn</a>
</p>
<p style="margin-top: 14px; text-align: left; line-height: 1.6;" data-i18n="info_desc">
Webclip điều khiển đa năng, tích hợp giao diện kính mờ và hệ thống Live Knobs tuỳ biến sống động chuyên nghiệp dành riêng cho iOS.
</p>
</div>
</div>
</div>
<div class="info-overlay" id="config-overlay"></div>
<div id="config-modal" class="macos-window">
<div class="macos-header">
<div class="mac-dot close-dot" id="close-config"></div>
<div class="mac-dot min-dot"></div>
<div class="mac-dot max-dot"></div>
<div id="config-modal-title" style="font-size: 14px; font-weight: bold; margin-left: 10px; color: #333;" data-i18n="modal_config_title">Cấu hình</div>
</div>
<div class="macos-body">
<textarea id="config-textarea"
style="width: 100%; height: 140px; padding: 10px; border-radius: 8px; border: 1px solid #ccc; font-family: ui-monospace, monospace; font-size: 11px; resize: none; box-sizing: border-box; word-break: break-all;"
data-i18n-placeholder="config_placeholder" placeholder="Mã cấu hình..."></textarea>
<div style="display: flex; gap: 8px; margin-top: 12px;">
<button id="btn-config-copy" data-i18n="btn_config_copy" style="flex: 1; padding: 10px; background: #007aff; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;">📋 Sao chép</button>
<button id="btn-config-apply" data-i18n="btn_config_apply" style="flex: 1; padding: 10px; background: #34c759; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;">✅ Áp dụng</button>
</div>
</div>
</div>
<script src="js/theme.js?v=10.5"></script>
<script src="js/main.js?v=10.5"></script>
</body>
</html>