-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
356 lines (352 loc) · 36 KB
/
index.html
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
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="Sanay Nair">
<meta property="og:title" content="Sanay Nair">
<title>iPadOS in HTML</title>
</head>
<body>
<table id="table">
<tr>
<td>
<div id="" class="center"><img data-ccursor src="./36709/ios-icons/svg/app-store-2365235.svg"
height="48" width="48"></div>
<div class="center text">App Store</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/apple-music-2365226.svg" height="48"
width="48"></div>
<div class="center text">Music</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/apple-store-1575941.svg" height="48"
width="48"></div>
<div class="center text">Apple Store</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/apple-tv-1575940.svg" height="48"
width="48"></div>
<div class="center text">Apple TV</div>
</td>
</tr>
<tr>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/books-2365234.svg" height="48"
width="48"></div>
<div class="center text">Books</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/news-2365224.svg" height="48"
width="48"></div>
<div class="center text">News</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/calendar-2365233.svg" height="48"
width="48"></div>
<div class="center text">Calendar</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/camera-2365232.svg" height="48"
width="48"></div>
<div class="center text">Camera</div>
</td>
</tr>
<tr>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/clips-1575951.svg" height="48"
width="48"></div>
<div class="center text">Clips</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/clock-2365231.svg" height="48"
width="48"></div>
<div class="center text">Clock</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/contacts-2365230.svg" height="48"
width="48"></div>
<div class="center text">Contacts</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/facetime-1575950.svg" height="48"
width="48"></div>
<div class="center text">Facetime</div>
</td>
</tr>
<tr>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/files-2365229.svg" height="48"
width="48"></div>
<div class="center text">Files</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/find-my-1575949.svg" height="48"
width="48"></div>
<div class="center text">Find My</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/health-2365228.svg" height="48"
width="48"></div>
<div class="center text">Health</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/home-2365227.svg" height="48"
width="48"></div>
<div class="center text">Home</div>
</td>
</tr>
<tr>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/ios-message-1575946.svg" height="48"
width="48"></div>
<div class="center text">Messages</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/mail-2365225.svg" height="48"
width="48"></div>
<div class="center text">Mail</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/measure-1575947.svg" height="48"
width="48"></div>
<div class="center text">Measure</div>
</td>
<td>
<div class="center"><img data-ccursor src="./36709/ios-icons/svg/my-shortcuts-1575945.svg" height="48"
width="48"></div>
<div class="center text">Shortcuts</div>
</td>
</tr>
</table>
<div id="app"></div>
<div class="center">
<div id="dock">
<img data-ccursor="lift" src="./36709/ios-icons/svg/news-2365224.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/notes-2365245.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/photos-2365244.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/podcasts-2365243.svg" height="48" width="48">
<span class="separator"></span>
<img data-ccursor="lift" src="./36709/ios-icons/svg/reminders-2365242.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/safari-2365241.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/settings-2365240.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/stocks-2365239.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/translate-2365238.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/voice-memos-1575942.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/wallet-2365237.svg" height="48" width="48">
<img data-ccursor="lift" src="./36709/ios-icons/svg/weather-2365236.svg" height="48" width="48">
</div>
<div data-ccursor id="home-bar"></div>
</div>
<div id="CC">
<div onclick="closeCC()" id="controlCenter">
<table>
<tr>
<td rowspan="2" colspan="2">
<div id="top" onclick="" class="controls-2-2">
<table style="display: flex; align-items: center; justify-content: center;height: 100%;">
<tr>
<td>
<div data-ccursor class="toggle-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="17.5"
viewBox="365.0 503.0 20.18851089477539 18.052770614624023"
preserveAspectRatio="none">
<g>
<defs>
<path id="s-Path_1-d1224"
d="M385.18851041793823 512.0263695716858 C385.17970991134644 510.98926973342896 383.7646098136902 510.17186975479126 382.0332102775574 510.17186975479126 L378.42090940475464 510.17186975479126 C377.92871046066284 510.17186975479126 377.7441096305847 510.0839695930481 377.4453101158142 509.7587695121765 L371.48630952835083 503.31641006469727 C371.29301023483276 503.1054697036743 371.0644097328186 503.0 370.80960988998413 503.0 L369.6757798194885 503.0 C369.44725942611694 503.0 369.31543016433716 503.2109398841858 369.420889377594 503.4482398033142 L372.5058093070984 510.1630702018738 L367.99706983566284 510.6640696525574 L366.38866996765137 507.7988295555115 C366.26561975479126 507.5791001319885 366.0810499191284 507.4824194908142 365.7910099029541 507.4824194908142 L365.3954997062683 507.4824194908142 C365.1581997871399 507.4824194908142 365.0 507.64061975479126 365.0 507.87793016433716 L365.0 516.1747698783875 C365.0 516.4120707511902 365.1581997871399 516.5702700614929 365.3954997062683 516.5702700614929 L365.7910099029541 516.5702700614929 C366.0810499191284 516.5702700614929 366.26561975479126 516.4736704826355 366.38866996765137 516.2538695335388 L367.99706983566284 513.3798699378967 L372.5058093070984 513.8896698951721 L369.420889377594 520.6044707298279 C369.31543016433716 520.841769695282 369.44725942611694 521.0527701377869 369.6757798194885 521.0527701377869 L370.80960988998413 521.0527701377869 C371.0644097328186 521.0527701377869 371.29301023483276 520.938470363617 371.48630952835083 520.7363696098328 L377.4453101158142 514.2939696311951 C377.7441096305847 513.9687695503235 377.92871046066284 513.8808693885803 378.42090940475464 513.8808693885803 L382.0332102775574 513.8808693885803 C383.7646098136902 513.8808693885803 385.17970991134644 513.0546698570251 385.18851041793823 512.0263695716858 Z ">
</path>
</defs>
<g style="mix-blend-mode:normal">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#s-Path_1-d1224" fill="#fff" fill-opacity="1.0">
</use>
</g>
</g>
</svg>
</div>
</td>
<td>
<div data-ccursor class="toggle-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="17.5"
viewBox="269.1610554456142 40.053391138837284 23.45800018310547 15.955460548400879"
preserveAspectRatio="none">
<g>
<defs>
<path id="s-Path_305-d1224"
d="M269.1610554456142 48.03167788200135 C269.1610554456142 50.9935776393866 270.2684756516841 53.70937697105164 272.2020756005672 55.7396771114325 C272.5448457002071 56.10877768211121 273.03703558439287 56.08247725181336 273.3270756005672 55.75727812461609 C273.6171156167415 55.44967810325379 273.5555855035213 54.99257818870301 273.23039543623 54.64107672385926 C271.56925547117265 52.90077749900574 270.66398560995134 50.571677843854374 270.66398560995134 48.03167788200135 C270.66398560995134 45.4915777843451 271.56925547117265 43.16252772025818 273.23039543623 41.422287623212284 C273.5555855035213 41.070727507398075 273.6171156167415 40.61369768790955 273.3270756005672 40.297287623212284 C273.03703558439287 39.98087755851502 272.5448457002071 39.95451752357239 272.2020756005672 40.32365767173523 C270.2684756516841 42.34513775520081 269.1610554456142 45.06977717094178 269.1610554456142 48.03167788200135 Z M292.61905539030107 48.03167788200135 C292.61905539030107 45.06977717094178 291.51165640348466 42.34513775520081 289.57805502409013 40.32365767173523 C289.2264562844661 39.95451752357239 288.7342554330257 39.98087755851502 288.44425642484697 40.297287623212284 C288.1630560159114 40.61369768790955 288.21575605863603 41.070727507398075 288.5497556924251 41.422287623212284 C290.21085607999834 43.16252772025818 291.1161562203792 45.4915777843451 291.1161562203792 48.03167788200135 C291.1161562203792 50.571677843854374 290.21085607999834 52.90077749900574 288.5497556924251 54.64107672385926 C288.21575605863603 54.99257818870301 288.1630560159114 55.44967810325379 288.44425642484697 55.75727812461609 C288.7342554330257 56.08247725181336 289.2264562844661 56.10877768211121 289.57805502409013 55.7396771114325 C291.51165640348466 53.70937697105164 292.61905539030107 50.9935776393866 292.61905539030107 48.03167788200135 Z M272.3602753877071 48.03167788200135 C272.3602753877071 50.14107767753357 273.1161357163814 52.10097853355164 274.4696556329158 53.568776766583866 C274.82121574873 53.95547835044617 275.33097517484697 53.95547835044617 275.6298052071956 53.61267821006531 C275.92863523954423 53.278777758405155 275.84953558439287 52.85687796287293 275.51554548734697 52.48767821006531 C274.44328558439287 51.283578554913944 273.86320555204423 49.72797743491883 273.86320555204423 48.03167788200135 C273.86320555204423 46.32657782249207 274.44328558439287 44.77967802695984 275.51554548734697 43.575607935712284 C275.84953558439287 43.206467310712284 275.92863523954423 42.775808016583866 275.6298052071956 42.450607935712284 C275.33097517484697 42.099047819898075 274.82121574873 42.10783783607239 274.4696556329158 42.48576800040955 C273.1161357163814 43.9623276393866 272.3602753877071 45.92227808646912 272.3602753877071 48.03167788200135 Z M289.4110552071956 48.03167788200135 C289.4110552071956 45.92227808646912 288.6551557778743 43.9623276393866 287.3104559182552 42.48576800040955 C286.95895636076006 42.10783783607239 286.44035589689287 42.099047819898075 286.14155638212236 42.450607935712284 C285.8514562844661 42.775808016583866 285.9217554330257 43.206467310712284 286.25575506681474 43.575607935712284 C287.32805502409013 44.77967802695984 287.9081560372737 46.32657782249207 287.9081560372737 48.03167788200135 C287.9081560372737 49.72797743491883 287.32805502409013 51.283578554913944 286.25575506681474 52.48767821006531 C285.9217554330257 52.85687796287293 285.8514562844661 53.278777758405155 286.14155638212236 53.61267821006531 C286.44035589689287 53.95547835044617 286.95895636076006 53.95547835044617 287.3104559182552 53.568776766583866 C288.6551557778743 52.10097853355164 289.4110552071956 50.14107767753357 289.4110552071956 48.03167788200135 Z M275.56828558439287 48.03167788200135 C275.56828558439287 49.22697798423523 275.97257578367265 50.35197798423523 276.67570555204423 51.2396771114325 C277.00085508817705 51.65277830772156 277.5546556710628 51.661576906964726 277.8622556924251 51.3099781673407 C278.1522556542781 50.984777132794804 278.0467554330257 50.589276949689335 277.75675547117265 50.184977213666386 C277.3085552453426 49.59607760123963 277.0624557732967 48.84907786063904 277.0624557732967 48.03167788200135 C277.0624557732967 47.21427790336365 277.3085552453426 46.46717802695984 277.75675547117265 45.87837759666199 C278.0467554330257 45.465277354047245 278.1522556542781 45.06977717094178 277.8622556924251 44.74457804374451 C277.5546556710628 44.40177790336365 277.00085508817705 44.41057745628113 276.67570555204423 44.81487719230408 C275.97257578367265 45.71137777976746 275.56828558439287 46.83637777976746 275.56828558439287 48.03167788200135 Z M286.21185553068193 48.03167788200135 C286.21185553068193 46.83637777976746 285.80755484098466 45.71137777976746 285.0956560372737 44.81487719230408 C284.7792555093196 44.41057745628113 284.2255560159114 44.40177790336365 283.9178549050716 44.74457804374451 C283.61905539030107 45.06977717094178 283.7245546578792 45.465277354047245 284.02335607999834 45.87837759666199 C284.4715563058284 46.46717802695984 284.70895636076006 47.21427790336365 284.70895636076006 48.03167788200135 C284.70895636076006 48.84907786063904 284.4715563058284 49.59607760123963 284.02335607999834 50.184977213666386 C283.7245546578792 50.589276949689335 283.61905539030107 50.984777132794804 283.9178549050716 51.3099781673407 C284.2255560159114 51.661576906964726 284.7792555093196 51.65277830772156 285.0956560372737 51.2396771114325 C285.80755484098466 50.35197798423523 286.21185553068193 49.22697798423523 286.21185553068193 48.03167788200135 Z M280.88565599912675 50.176177660748905 C282.045855164471 50.176177660748905 283.0301557778743 49.20057741813416 283.0301557778743 48.02287737540955 C283.0301557778743 46.84517733268494 282.045855164471 45.87837759666199 280.88565599912675 45.87837759666199 C279.7342554330257 45.87837759666199 278.7411552667049 46.84517733268494 278.7411552667049 48.02287737540955 C278.7411552667049 49.20057741813416 279.7342554330257 50.176177660748905 280.88565599912675 50.176177660748905 Z ">
</path>
</defs>
<g style="mix-blend-mode:normal">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#s-Path_305-d1224" fill="#fff"
fill-opacity="1.0"></use>
</g>
</g>
</svg>
</div>
</td>
</tr>
<tr>
<td>
<div data-ccursor class="toggle-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="17.5"
viewBox="212.2653056008957 40.61313056148383 20.51532745361328 14.835980415344238"
preserveAspectRatio="none">
<g>
<defs>
<path id="s-Path_30-d1224"
d="M213.63331707550506 46.9237108150849 C213.8178869111679 47.125810615194766 214.10792692734222 47.11701010860297 214.30128677917938 46.906110755575625 C216.47218664719085 44.612110129965274 219.32861717773895 43.39926051296088 222.51901730133514 43.39926051296088 C225.7358170373581 43.39926051296088 228.6011162622116 44.612110129965274 230.76321610046844 46.9237108150849 C230.94781693054657 47.10821055568549 231.2290173394821 47.09941004909369 231.4136162622116 46.906110755575625 L232.64401634766082 45.6668109814057 C232.81981667114715 45.491010657919375 232.81981667114715 45.26251029170844 232.67921646667938 45.095510474813906 C230.56101616455535 42.48520087398383 226.6147175653122 40.61313056148383 222.51901730133514 40.61313056148383 C218.4321471078537 40.61313056148383 214.47706707550506 42.47641085780951 212.36768683029632 45.095510474813906 C212.22706683708648 45.26251029170844 212.22706683708648 45.491010657919375 212.39405687881927 45.6668109814057 L213.63331707550506 46.9237108150849 Z M217.3071471078537 50.57991122402045 C217.51807697845916 50.782111159933535 217.79932697845916 50.76451014674994 218.0014773233078 50.5448102871308 C219.07371719910125 49.375810615194766 220.787616811528 48.549610129965274 222.52781685425262 48.55841063655707 C224.27691658569793 48.549610129965274 225.99071701599578 49.39341067470404 227.08941658569793 50.57111071742865 C227.27391632629852 50.782111159933535 227.537616811528 50.77331065334174 227.7397175653122 50.57111071742865 L229.1196175439499 49.217610351217715 C229.28661736084442 49.059410087240664 229.30421646667938 48.839710227621524 229.15481766296844 48.66391085780951 C227.7837162835739 47.00281047023627 225.2788163049362 45.80751036800238 222.52781685425262 45.80751036800238 C219.76811703278045 45.80751036800238 217.2631970269821 47.00281047023627 215.89210709167938 48.66391085780951 C215.74268683029632 48.839710227621524 215.76026686264495 49.050610534323184 215.92725666595916 49.217610351217715 L217.3071471078537 50.57991122402045 Z M222.52781685425262 55.44911097682807 C222.7388172967575 55.44911097682807 222.9233170373581 55.352410308493106 223.28371723724823 55.009610168112246 L225.43701752258758 52.935410491598574 C225.59521683289032 52.786009780539004 225.63041695190887 52.539910308493106 225.4897175653122 52.36410998500678 C224.87451752258758 51.58191012538764 223.75831707550506 50.94911097682807 222.52781685425262 50.94911097682807 C221.26221664978485 50.94911097682807 220.12841709686737 51.60821055568549 219.52201660706024 52.43441104091498 C219.4165163858078 52.592610351217715 219.4692164285324 52.786009780539004 219.61861713959198 52.935410491598574 L221.77201660706024 55.009610168112246 C222.12351711822967 55.34360980190131 222.31691654755096 55.44911097682807 222.52781685425262 55.44911097682807 Z ">
</path>
</defs>
<g style="mix-blend-mode:normal">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#s-Path_30-d1224" fill="#fff"
fill-opacity="1.0"></use>
</g>
</g>
</svg>
</div>
</td>
<td>
<div data-ccursor class="toggle-circle">
<svg xmlns="http://www.w3.org/2000/svg" height="17.5"
viewBox="782.9077098361884 67.50795726351991 11.999999046325684 17.44109535217285"
preserveAspectRatio="none">
<g>
<defs>
<path id="s-Path_114-d1224"
d="M790.6140020274609 76.23450668390927 L794.4468472008692 73.44692110106456 C794.8823975601829 73.09851168159834 794.9695388868472 72.48867866895593 794.5339823384639 72.05312792282535 L789.5687053024794 67.69762199669901 C789.0461381715276 67.2621958418587 788.1750370660833 67.6106083316837 788.1750370660833 68.39456520933724 L788.1750370660833 74.84071427930377 L784.3421917959706 72.05325247785153 C783.9066411465443 71.79185054641904 783.384073822184 71.87898220266209 783.122681222708 72.22740090573275 C782.7742718515939 72.66295165186332 782.8614006399526 73.1856433378414 783.2969512319609 73.44691181746013 L787.1297964295453 76.23449740030483 L783.2969512319609 79.02208375678325 C782.9485418699128 79.28336384090753 782.8614006399526 79.80604392238004 783.122681222708 80.24159428169378 C783.3839617903534 80.59000408797685 783.9066411465443 80.67714464100749 784.3421917959706 80.41586455688321 L788.1750370660833 77.6282782004048 L788.1751585265746 84.07442707696289 C788.1751585265746 84.42283610961226 788.3494284149472 84.77124514226165 788.6978502125527 84.85838724255969 C789.0462596320189 85.03265751774913 789.3946690514852 84.94552160652071 789.6560926446613 84.68411696737024 L794.6213696806458 80.32861105333194 C795.0569200399596 79.98020202068255 794.9697787132951 79.28322768137582 794.5342345430511 78.93481787509273 L790.6140020274609 76.23450668390927 Z M789.9171831885284 70.31101893479797 L792.6176282183425 72.66305415832896 L789.9171831885284 74.5795394093631 L789.9171831885284 70.31101893479797 Z M789.9171831885284 82.15799559347113 L789.9171831885284 77.88959928711533 L792.6176282183425 79.8060841513326 L789.9171831885284 82.15799559347113 Z ">
</path>
</defs>
<g style="mix-blend-mode:normal">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#s-Path_114-d1224" fill="#fff"
fill-opacity="1.0"></use>
</g>
</g>
</svg>
</div>
</td>
</tr>
</table>
</div>
</td>
<td rowspan="2" colspan="2">
<div onclick="" class="controls-2-2">
<table style="display: flex; justify-content: center;height: 100%;align-items: center;">
<tr style="height: 50%;">
<td colspan="3">
<div class="h3 center">Music</div>
</td>
</tr>
<tr style="height: 50%;">
<td data-ccursor class="centerIn">
<svg xmlns="http://www.w3.org/2000/svg" width="18.75" height="10.5"
viewBox="403.4931612610817 68.71331915717758 25.0136775970459 14.1591796875"
preserveAspectRatio="none">
<g>
<defs>
<path id="s-Path_94-d1224"
d="M414.5937394499779 82.87249836784042 C415.3671388030052 82.87249836784042 416.0175389647484 82.28359875541366 416.0175389647484 81.21139988761581 L416.0175389647484 76.1488989339415 C416.1318396925926 76.5706985936705 416.4482392668724 76.93109879356064 416.97553914785385 77.23869881492294 L425.98433965444565 82.52969822745956 C426.36233991384506 82.7581985936705 426.6962384581566 82.87249836784042 427.0830392241478 82.87249836784042 C427.85643857717514 82.87249836784042 428.5068387389183 82.28359875541366 428.5068387389183 81.21139988761581 L428.5068387389183 70.37445912223495 C428.5068387389183 69.30218920570053 427.85643857717514 68.71331915717758 427.0830392241478 68.71331915717758 C426.6962384581566 68.71331915717758 426.36233991384506 68.82757887702621 425.98433965444565 69.0560992703978 L416.97553914785385 74.34709915977157 C416.4482392668724 74.65469918113388 416.1318396925926 75.00629887443222 416.0175389647484 75.42819866996444 L416.0175389647484 70.37445912223495 C416.0175389647484 69.30218920570053 415.375939309597 68.71331915717758 414.60253900289536 68.71331915717758 C414.2070388197899 68.71331915717758 413.8818396925926 68.82757887702621 413.49513906240463 69.0560992703978 L404.48632925748825 74.34709915977157 C403.8183562755585 74.74259934287704 403.4931612610817 75.19089875083603 403.4931612610817 75.78849873405136 C403.4931612610817 76.37739930015243 403.8271452784538 76.85199913840927 404.48632925748825 77.23869881492294 L413.49513906240463 82.52969822745956 C413.8730391860008 82.7581985936705 414.2070388197899 82.87249836784042 414.5937394499779 82.87249836784042 Z ">
</path>
</defs>
<g style="mix-blend-mode:normal">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#s-Path_94-d1224" fill="#fff8" fill-opacity="1.0">
</use>
</g>
</g>
</svg>
</td>
<td style="margin: 0 10px;" data-ccursor class="centerIn">
<svg xmlns="http://www.w3.org/2000/svg" width="13.781269073486328"
height="15.416019439697266"
viewBox="329.9795002937317 67.68938956123026 13.781269073486328 15.416019439697266"
preserveAspectRatio="none">
<g>
<defs>
<path id="s-Path_89-d1224"
d="M331.209969997406 83.10540900092752 C331.579110622406 83.10540900092752 331.9042706489563 82.97360930305155 332.30857038497925 82.73631033759744 L342.6884694099426 76.73330912452371 C343.44437074661255 76.29390940528543 343.760769367218 75.95110926490457 343.760769367218 75.39740977149637 C343.760769367218 74.84370932441385 343.44437074661255 74.50970969062479 342.6884694099426 74.06140932899149 L332.30857038497925 68.0585297093931 C331.9042706489563 67.8212192998472 331.579110622406 67.68938956123026 331.209969997406 67.68938956123026 C330.4892601966858 67.68938956123026 329.9795002937317 68.24309954505594 329.9795002937317 69.11321959357889 L329.9795002937317 81.68160948615701 C329.9795002937317 82.56051001411112 330.4892601966858 83.10540900092752 331.209969997406 83.10540900092752 Z ">
</path>
</defs>
<g style="mix-blend-mode:normal">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#s-Path_89-d1224" fill="#fff" fill-opacity="1.0">
</use>
</g>
</g>
</svg>
</td>
<td data-ccursor class="centerIn">
<svg xmlns="http://www.w3.org/2000/svg" width="18.75" height="10.5"
viewBox="473.58544993400574 68.71331915717758 25.01367950439453 14.1591796875"
preserveAspectRatio="none">
<g>
<defs>
<path id="s-Path_96-d1224"
d="M475.00927996635437 82.87249836784042 C475.39598965644836 82.87249836784042 475.72997975349426 82.7581985936705 476.1079099178314 82.52969822745956 L485.11672949790955 77.23869881492294 C485.6352298259735 76.93109879356064 485.9604299068451 76.5706985936705 486.074729681015 76.14009938102402 L486.074729681015 81.21139988761581 C486.074729681015 82.28359875541366 486.7251298427582 82.87249836784042 487.4985291957855 82.87249836784042 C487.8852307796478 82.87249836784042 488.2104299068451 82.7581985936705 488.59712958335876 82.52969822745956 L497.60593008995056 77.23869881492294 C498.2651307582855 76.85199913840927 498.5991303920746 76.37739930015243 498.5991303920746 75.78849873405136 C498.5991303920746 75.19089875083603 498.2739293575287 74.74259934287704 497.60593008995056 74.34709915977157 L488.59712958335876 69.0560992703978 C488.2104299068451 68.82757887702621 487.87643027305603 68.71331915717758 487.48973059654236 68.71331915717758 C486.7163302898407 68.71331915717758 486.074729681015 69.30218920570053 486.074729681015 70.37445912223495 L486.074729681015 75.42819866996444 C485.9604299068451 75.00629887443222 485.6440303325653 74.65469918113388 485.11672949790955 74.34709915977157 L476.1079099178314 69.0560992703978 C475.72997975349426 68.82757887702621 475.39598965644836 68.71331915717758 475.00927996635437 68.71331915717758 C474.23583984375 68.71331915717758 473.58544993400574 69.30218920570053 473.58544993400574 70.37445912223495 L473.58544993400574 81.21139988761581 C473.58544993400574 82.28359875541366 474.23583984375 82.87249836784042 475.00927996635437 82.87249836784042 Z ">
</path>
</defs>
<g style="mix-blend-mode:normal">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#s-Path_96-d1224" fill="#fff8" fill-opacity="1.0">
</use>
</g>
</g>
</svg>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr></tr>
<tr>
<td>
<div onclick="" data-ccursor="lift" class="controls-1-1"></div>
</td>
<td>
<div onclick="" data-ccursor="lift" class="controls-1-1"></div>
</td>
<td rowspan="2">
<div id="slider-brightness" class="controls-2-1">
<div id="sliderBr"></div>
</div>
</td>
<td rowspan="2">
<div id="slider-volume" onclick="" class="controls-2-1">
<div id="sliderVo"></div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div onclick="" data-ccursor="lift" class="controls-1-2"></div>
</td>
</tr>
</table>
</div>
</div>
<div onclick="openCC()" draggable="true" data-ccursor="noPadding" id="control-center-trig">
<img id="icon1" style="padding: 0 0px;height: 20px;transition: 0.5s;" src="wifi 2.svg" alt=""><span
id="bD">100%</span>
<div id="icon2" class="centerIn" style="margin: 2px; transition: 0.5s;">
<div
style="display: inline-block;height: 11px; width: 20.5px; border-radius: 4px; border: 1px solid #fff8; padding: 1px;">
<div id="battery" style="height: 100%; width: 100%; background-color: #fff; border-radius: 2px;">
</div>
</div>
<div
style="display: inline-block;height: 4px; width: 1px; background-color: #fff8; border-top-left-radius: 0;border-top-right-radius: 100px;border-bottom-left-radius: 0;border-bottom-right-radius: 100px;position: fixed;margin: 3.5px 20px;margin-right: -3px;">
</div>
</div>
</div>
</body>
<link href="lib/style.css?0705114f45538bdfddf2" rel="stylesheet">
<script src="lib/main.1b3cb8da41fa378dcfd7.js?0705114f45538bdfddf2"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</html>