-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
440 lines (384 loc) · 32.7 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
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="512x512" href="https://iosxpc.github.io/wallpaper_app/blog/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://iosxpc.github.io/wallpaper_app/blog/android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://iosxpc.github.io/wallpaper_app/blog/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://iosxpc.github.io/wallpaper_app/blog/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://iosxpc.github.io/wallpaper_app/blog/favicon-16x16.png">
<link rel="icon" type="image/x-icon" sizes="any" href="https://iosxpc.github.io/wallpaper_app/blog/favicon.ico">
<link rel="manifest" href="https://iosxpc.github.io/wallpaper_app/blog/site.webmanifest">
<title>iOSXPC Wallpapers</title>
<link rel="stylesheet" href="./assets/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.umd.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
</head>
<body>
<div id="loading-screen">
<div class="loading-tab">
<span>Syncing Wallpapers...</span>
<div class="loading-bar-wrapper">
<div id="loading-bar"></div>
</div>
</div>
</div>
<div class="top-navbar">
<div class="nav-logo-title">
<img src="https://iosxpc.github.io/wallpaper_app/blog/app.png"> <span>iOSXPC</span>
</div>
<div class="top-nav-buttons">
<button id="search-button" class="search-button nav-button">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
<path
d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14">
</path>
</svg>
</button>
<div id="search-bar-container" class="search-bar-container">
<button id="close-search" class="close-button nav-button" onclick="closeSearch()">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
<path
d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.9959.9959 0 0 0-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1">
</path>
</svg>
</button>
<input type="text" id="search-bar" class="search-bar" placeholder="Search...">
<button id="clear-search" class="clear-button nav-button" onclick="clearSearch()">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
<path
d="M18.3 5.71a.9959.9959 0 0 0-1.41 0L12 10.59 7.11 5.7a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4">
</path>
</svg>
</button>
</div>
<button id="resync-button" class="nav-button">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">
<path
d="M12 4V2.21c0-.45-.54-.67-.85-.35l-2.8 2.79c-.2.2-.2.51 0 .71l2.79 2.79c.32.31.86.09.86-.36V6c3.31 0 6 2.69 6 6 0 .79-.15 1.56-.44 2.25-.15.36-.04.77.23 1.04.51.51 1.37.33 1.64-.34.37-.91.57-1.91.57-2.95 0-4.42-3.58-8-8-8m0 14c-3.31 0-6-2.69-6-6 0-.79.15-1.56.44-2.25.15-.36.04-.77-.23-1.04-.51-.51-1.37-.33-1.64.34C4.2 9.96 4 10.96 4 12c0 4.42 3.58 8 8 8v1.79c0 .45.54.67.85.35l2.79-2.79c.2-.2.2-.51 0-.71l-2.79-2.79c-.31-.31-.85-.09-.85.36z">
</path>
</svg>
</button>
</div>
</div>
<!-- Bottom Navigation Bar-->
<div class="navbar">
<div id="menu-collections" class="active bottom-menu" onclick="showDiv('collections')">
<div class="menu-icon">
<svg class="icon-outlined" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
<path
d="M20 4v12H8V4zm0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6z">
</path>
</svg>
<svg class="icon-filled" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
<path
d="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2m-10.6-3.47 1.63 2.18 2.58-3.22c.2-.25.58-.25.78 0l2.96 3.7c.26.33.03.81-.39.81H9c-.41 0-.65-.47-.4-.8l2-2.67c.2-.26.6-.26.8 0M2 7v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1s-1 .45-1 1">
</path>
</svg>
</div>
<div class="menu-name">
Collections
</div>
</div>
<div id="menu-favs" class="bottom-menu" onclick="showDiv('favs')">
<div class="menu-icon">
<svg class="icon-outlined" focusable="false" aria-hidden="true" viewBox="0 0 24 24"
data-testid="FavoriteBorderRoundedIcon">
<path
d="M19.66 3.99c-2.64-1.8-5.9-.96-7.66 1.1-1.76-2.06-5.02-2.91-7.66-1.1-1.4.96-2.28 2.58-2.34 4.29-.14 3.88 3.3 6.99 8.55 11.76l.1.09c.76.69 1.93.69 2.69-.01l.11-.1c5.25-4.76 8.68-7.87 8.55-11.75-.06-1.7-.94-3.32-2.34-4.28M12.1 18.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05">
</path>
</svg>
<svg class="icon-filled" focusable="false" aria-hidden="true" viewBox="0 0 24 24"
data-testid="FavoriteRoundedIcon">
<path
d="M13.35 20.13c-.76.69-1.93.69-2.69-.01l-.11-.1C5.3 15.27 1.87 12.16 2 8.28c.06-1.7.93-3.33 2.34-4.29 2.64-1.8 5.9-.96 7.66 1.1 1.76-2.06 5.02-2.91 7.66-1.1 1.41.96 2.28 2.59 2.34 4.29.14 3.88-3.3 6.99-8.55 11.76z">
</path>
</svg>
</div>
<div class="menu-name">
Favorites
</div>
</div>
<div id="menu-settings" class="bottom-menu" onclick="showDiv('settings')">
<div class="menu-icon">
<svg class="icon-outlined" focusable="false" aria-hidden="true" viewBox="0 0 24 24"
data-testid="SettingsOutlinedIcon">
<path
d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2">
</path>
</svg>
<svg class="icon-filled" focusable="false" aria-hidden="true" viewBox="0 0 24 24"
data-testid="SettingsRoundedIcon">
<path
d="M19.5 12c0-.23-.01-.45-.03-.68l1.86-1.41c.4-.3.51-.86.26-1.3l-1.87-3.23c-.25-.44-.79-.62-1.25-.42l-2.15.91c-.37-.26-.76-.49-1.17-.68l-.29-2.31c-.06-.5-.49-.88-.99-.88h-3.73c-.51 0-.94.38-1 .88l-.29 2.31c-.41.19-.8.42-1.17.68l-2.15-.91c-.46-.2-1-.02-1.25.42L2.41 8.62c-.25.44-.14.99.26 1.3l1.86 1.41c-.02.22-.03.44-.03.67s.01.45.03.68l-1.86 1.41c-.4.3-.51.86-.26 1.3l1.87 3.23c.25.44.79.62 1.25.42l2.15-.91c.37.26.76.49 1.17.68l.29 2.31c.06.5.49.88.99.88h3.73c.5 0 .93-.38.99-.88l.29-2.31c.41-.19.8-.42 1.17-.68l2.15.91c.46.2 1 .02 1.25-.42l1.87-3.23c.25-.44.14-.99-.26-1.3l-1.86-1.41c.03-.23.04-.45.04-.68m-7.46 3.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5">
</path>
</svg>
</div>
<div class="menu-name">
Settings
</div>
</div>
</div>
<!-- Collections list section -->
<div id="collections" class="content slideRight">
<div class="hero-header">
<div class="hero-img-wrap">
<img id="hero-header-img" src="./assets/images/header.png" alt="Hero Image">
</div>
<div class="hero-text">
<h1>iOSXPC</h1>
<p>
Are you bored with the default wallpaper on your phone? Whether you're looking for something fun and
colorful or something more serious, we've got you covered.
</p>
<div class="info-cards">
<div class="info-card">
<h2 id="total-collections">100+</h2>
<div>
Collections
</div>
</div>
<div class="info-card">
<h2 id="total-wallpapers">3000+</h2>
<div>
Wallpapers
</div>
</div>
</div>
</div>
</div>
<div id="collection-header">
<h2>Collections</h2>
<button id="sort-button">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="SortOutlinedIcon">
<path d="M3 18h6v-2H3zM3 6v2h18V6zm0 7h12v-2H3z"></path>
</svg>
Sort
</button>
</div>
<!-- Sort Options Popup -->
<div id="sort-options-popup" class="popup">
<p>Sort collections</p>
<ul>
<li data-sort="asc">A - Z</li>
<li data-sort="desc">Z - A</li>
<li data-sort="num-asc">1 - 9</li>
<li data-sort="num-desc">9 - 1</li>
<li data-sort="none">Reset</li>
<li data-sort="random">Random</li>
</ul>
</div>
<div class="no-results-found">No results found :(</div>
<div id="collections-list"></div>
</div>
<!-- Show a collection -->
<div id="collections-2" class="slideRight"></div>
<!-- Favorites -->
<div class="content" id="favs">
<div class="fav-no-results-found">No results found :(</div>
<div id="fav-wrapper" class="fav-wrapper">
</div>
</div>
<!-- Settings -->
<div class="content" id="settings">
<div class="settings-wrapper slideLeft">
<div class="setting-child">
<h3>Appearance</h3>
<div class="setting-menu">
<div class="setting-option" id="appearance-setting">
<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-dhaba5" focusable="false"
aria-hidden="true" viewBox="0 0 24 24" data-testid="Brightness4OutlinedIcon">
<path
d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12zM12.29 7c-.74 0-1.45.17-2.08.46 1.72.79 2.92 2.53 2.92 4.54s-1.2 3.75-2.92 4.54c.63.29 1.34.46 2.08.46 2.76 0 5-2.24 5-5s-2.24-5-5-5">
</path>
</svg>
<div class="set-option">
Appearance
<span id="chosen-appearance" class="set-preview">Follow system</span>
</div>
</div>
<div class="setting-option" id="color-scheme-setting" style="padding: 12px 25px;">
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5 0 .12.05.23.13.33.41.47.64 1.06.64 1.67 0 1.38-1.12 2.5-2.5 2.5m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8c.28 0 .5-.22.5-.5 0-.16-.08-.28-.14-.35-.41-.46-.63-1.05-.63-1.65 0-1.38 1.12-2.5 2.5-2.5H16c2.21 0 4-1.79 4-4 0-3.86-3.59-7-8-7"></path><circle cx="6.5" cy="11.5" r="1.5"></circle><circle cx="9.5" cy="7.5" r="1.5"></circle><circle cx="14.5" cy="7.5" r="1.5"></circle><circle cx="17.5" cy="11.5" r="1.5"></circle></svg>
<div class="set-option">
Color scheme
<span id="chosen-color-scheme">
<div class="color-box" style="background-color: blue;"></div>
</span>
</div>
</div>
<div class="setting-option-choose" id="color-scheme-options" style="display: none;">
<div class="color-box" data-color="red" style="background-color: red;"></div>
<div class="color-box" data-color="green" style="background-color: green;"></div>
<div class="color-box" data-color="blue" style="background-color: blue;"></div>
<div class="color-box" data-color="orange" style="background-color: orange;"></div>
<div class="color-box" data-color="yellow" style="background-color: yellow;"></div>
</div>
<div class="setting-option" id="fullscreen-option">
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M6 14c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1H7v-2c0-.55-.45-1-1-1m0-4c.55 0 1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1m11 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1s-1 .45-1 1zM14 6c0 .55.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1V6c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1"></path></svg>
<span class="set-option">Full-screen</span>
</div>
</div>
</div>
<div class="setting-child design-team">
<h3>Pashapuma Design Team</h3>
<div class="setting-menu">
<div class="setting-option" onclick="window.open('https://t.me/devPashapuma', '_blank')">
<img src="https://github.com/pashapuma/Wallpapers_app/blob/master/dev_icon_512.png?raw=true"
alt="">
<span class="set-option">Pashapuma Design</span>
</div>
<div class="setting-option" onclick="window.open('https://t.me/iOSXPC_wallpapers', '_blank')">
<img src="https://github.com/iOSXPC/wallpaper_app/blob/main/blog/logo.png?raw=true" alt="">
<span class="set-option">iOSXPC</span>
</div>
<div class="setting-option" onclick="window.open('https://t.me/nekosekkei', '_blank')">
<img src="https://cdn1.cdn-telegram.org/file/U_a9y21r0pm8bbbySywUzKriSd5A2d4iuLcyOcjoywJ0ATpIwvnalKp2lifHQp1fJHTlLyvL4Vf-yScVkIv8xOSFVECLYVhK39z38fcjEAvTUvMIESc6aFhA9VZteSEyzmId-DwWK9lU-iURUoBqKT-kNHbKCPizOxJh9sIClWQAFe9Ol9EMCP5JNaU0ulNZyBC6fju1GqA4AI5rUhY072oWvk3wo5JOQlAFHrhGIt3ClA4VcWaG2S4-9ksSQGre6U0Bc1y-V3VKycpSxmQF-6p7Uig48L2krI52io28qZLoRH6DUgSIAkwpcABDwIVTdrfFzdo3-0W-uL9Ze6Ku8g.jpg"
alt="">
<span class="set-option">NekoSekkē</span>
</div>
</div>
</div>
<div class="setting-child">
<h3>Explore & Support</h3>
<div class="setting-menu">
<div class="setting-option" onclick="window.open('https://t.me/devPashapuma/94188', '_blank')">
<svg width="800px" height="800px" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg" fill="none" style="fill: none;"><path class="path" stroke-width="12" d="M23.073 88.132s65.458-26.782 88.16-36.212c8.702-3.772 38.215-15.843 38.215-15.843s13.621-5.28 12.486 7.544c-.379 5.281-3.406 23.764-6.433 43.756-4.54 28.291-9.459 59.221-9.459 59.221s-.756 8.676-7.188 10.185c-6.433 1.509-17.027-5.281-18.919-6.79-1.513-1.132-28.377-18.106-38.214-26.404-2.649-2.263-5.676-6.79.378-12.071 13.621-12.447 29.891-27.913 39.728-37.72 4.54-4.527 9.081-15.089-9.837-2.264-26.864 18.483-53.35 35.835-53.35 35.835s-6.053 3.772-17.404.377c-11.351-3.395-24.594-7.921-24.594-7.921s-9.08-5.659 6.433-11.693Z" /></svg>
<span class="set-option">Telegram Support Group</span>
</div>
<div class="setting-option" onclick="window.open('https://play.google.com/store/apps/details?id=com.iosxpc.wallpapers', '_blank')">
<svg width="800px" height="800px" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg"><path class="path" d="M156.84 109.93 54.96 167.87c-10.68 6.07-23.94-1.64-23.94-13.93V38.06c0-12.29 13.26-20 23.94-13.93l101.88 57.94c10.8 6.14 10.8 21.71 0 27.85Z" style="stroke-miterlimit:10;stroke-width:12px;fill:none" /><path class="path" d="m35 33 88 90m-88 34.61L124 67" style="fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:12px" /></svg>
<span class="set-option">Get it on Google Play</span>
</div>
<div class="setting-option" onclick="window.open('https://iosxpc.github.io/wallpaper_app/legal/donations', '_blank')">
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" style="fill: none;" xmlns="http://www.w3.org/2000/svg"><path class="path" d="M14.7249 8.15612C16.2754 7.23788 17.0507 6.77876 17.6201 7.10452C18.1895 7.43027 18.1759 8.32517 18.1487 10.115L18.1416 10.578C18.1339 11.0866 18.13 11.3409 18.2248 11.5644C18.3196 11.7878 18.5023 11.9552 18.8677 12.2899L19.2003 12.5946C20.4862 13.7725 21.1291 14.3614 20.9784 15.0228C20.8277 15.6841 19.9831 15.9799 18.2941 16.5714L17.8571 16.7245C17.3771 16.8926 17.1371 16.9766 16.953 17.1451C16.7689 17.3137 16.6615 17.5475 16.4467 18.0153L16.2512 18.4412C15.4953 20.0874 15.1174 20.9105 14.4549 20.9935C13.7924 21.0765 13.284 20.3644 12.2673 18.9402L12.0043 18.5717C11.7154 18.167 11.5709 17.9647 11.3623 17.8453C11.1538 17.726 10.9047 17.7032 10.4065 17.6576L9.95303 17.6161C8.20005 17.4557 7.32356 17.3754 7.06482 16.7654C6.80608 16.1553 7.33644 15.4194 8.39716 13.9477L8.67158 13.5669C8.973 13.1487 9.12372 12.9396 9.17893 12.6973C9.23414 12.4551 9.18759 12.2071 9.09451 11.7111L9.00976 11.2596C8.68219 9.51421 8.51841 8.64154 9.02101 8.18152C9.52362 7.7215 10.3598 7.9788 12.032 8.49339L12.4647 8.62652C12.9399 8.77276 13.1775 8.84587 13.4202 8.81547C13.6629 8.78508 13.8832 8.65461 14.3238 8.39368L14.7249 8.15612Z" stroke-width="1.5" /><path class="path" opacity="0.5" d="M13.5 6.5L13 6M9.5 2.5L11.5 4.5" stroke-width="1.5" stroke-linecap="round" /><path class="path" opacity="0.5" d="M6.5 6.5L4 4" stroke-width="1.5" stroke-linecap="round" /><path class="path" opacity="0.5" d="M6 12L4.5 10.5M2 8L2.5 8.5" stroke-width="1.5" stroke-linecap="round" /></svg>
<span class="set-option">Donate</span>
</div>
</div>
</div>
<div class="setting-child">
<h3>Favorites</h3>
<div class="setting-menu">
<div class="setting-option" id="export-favorites">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5z"></path></svg>
<span class="set-option">Export favorites</span>
</div>
<div class="setting-option" id="import-favorites">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3zm-1-4-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59 7 11l5 5z"></path></svg>
<span class="set-option">Import favorites</span>
<input type="file" id="import-file" style="display: none;">
</div>
</div>
</div>
<div class="setting-child">
<h3>Contact</h3>
<div class="setting-menu">
<div class="setting-option" onclick="window.open('mailto:[email protected]')">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0-8 5-8-5zm0 12H4V8l8 5 8-5z"></path></svg>
<span class="set-option">Email</span>
</div>
<div class="setting-option" onclick="window.open('https://t.me/iosxpc', '_blank')">
<svg width="800px" height="800px" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg" fill="none" style="fill: none;"><path class="path" stroke-width="12" d="M23.073 88.132s65.458-26.782 88.16-36.212c8.702-3.772 38.215-15.843 38.215-15.843s13.621-5.28 12.486 7.544c-.379 5.281-3.406 23.764-6.433 43.756-4.54 28.291-9.459 59.221-9.459 59.221s-.756 8.676-7.188 10.185c-6.433 1.509-17.027-5.281-18.919-6.79-1.513-1.132-28.377-18.106-38.214-26.404-2.649-2.263-5.676-6.79.378-12.071 13.621-12.447 29.891-27.913 39.728-37.72 4.54-4.527 9.081-15.089-9.837-2.264-26.864 18.483-53.35 35.835-53.35 35.835s-6.053 3.772-17.404.377c-11.351-3.395-24.594-7.921-24.594-7.921s-9.08-5.659 6.433-11.693Z" /></svg>
<span class="set-option">Telegram</span>
</div>
</div>
</div>
<div class="setting-child">
<h3>Legal</h3>
<div class="setting-menu">
<div class="setting-option" onclick="window.open('https://github.com/iOSXPC/wallpaper_app/blob/main/privacy_policy.md', '_blank')">
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2 4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5zm6 9.09c0 4-2.55 7.7-6 8.83-3.45-1.13-6-4.82-6-8.83v-4.7l6-2.25 6 2.25z"></path></svg>
<span class="set-option">Privacy Policy</span>
</div>
<div class="setting-option" onclick="window.open('https://github.com/iOSXPC/wallpaper_app/blob/main/terms_of_use.md', '_blank')">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M1 21h12v2H1zM5.24 8.07l2.83-2.83 14.14 14.14-2.83 2.83zM12.32 1l5.66 5.66-2.83 2.83-5.66-5.66zM3.83 9.48l5.66 5.66-2.83 2.83L1 12.31z"></path></svg>
<span class="set-option">Terms of use</span>
</div>
</div>
</div>
<div class="setting-child">
<div class="setting-social">
<div class="social-icon" onclick="window.open('https://play.google.com/store/apps/dev?id=8241325694316298254', '_blank')">
<svg width="800px" height="800px" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg"><path class="path" d="M156.84 109.93 54.96 167.87c-10.68 6.07-23.94-1.64-23.94-13.93V38.06c0-12.29 13.26-20 23.94-13.93l101.88 57.94c10.8 6.14 10.8 21.71 0 27.85Z" style="stroke-miterlimit:10;stroke-width:12px;fill:none" /><path class="path" d="m35 33 88 90m-88 34.61L124 67" style="fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:12px" /></svg>
</div>
<div class="social-icon" onclick="window.open('https://youtube.com/@iosxpc', '_blank')">
<svg width="800px" height="800px" viewBox="0 -4 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M30.722,20.579 C30.137,21.894 28.628,23.085 27.211,23.348 C27.066,23.375 23.603,24.000 16.010,24.000 L15.990,24.000 C8.398,24.000 4.932,23.375 4.788,23.349 C3.371,23.085 1.861,21.894 1.275,20.578 C1.223,20.461 0.001,17.647 0.001,12.000 C0.001,6.353 1.223,3.538 1.275,3.421 C1.861,2.105 3.371,0.915 4.788,0.652 C4.932,0.625 8.398,-0.000 15.990,-0.000 C23.603,-0.000 27.066,0.625 27.210,0.651 C28.628,0.915 30.137,2.105 30.723,3.420 C30.775,3.538 32.000,6.353 32.000,12.000 C32.000,17.647 30.775,20.461 30.722,20.579 ZM28.893,4.230 C28.581,3.529 27.603,2.759 26.845,2.618 C26.813,2.612 23.386,2.000 16.010,2.000 C8.615,2.000 5.185,2.612 5.152,2.618 C4.394,2.759 3.417,3.529 3.104,4.234 C3.094,4.255 2.002,6.829 2.002,12.000 C2.002,17.170 3.094,19.744 3.106,19.770 C3.417,20.471 4.394,21.241 5.153,21.382 C5.185,21.388 8.615,22.000 15.990,22.000 L16.010,22.000 C23.386,22.000 26.813,21.388 26.846,21.382 C27.604,21.241 28.581,20.471 28.894,19.766 C28.904,19.744 29.998,17.170 29.998,12.000 C29.998,6.830 28.904,4.255 28.893,4.230 ZM13.541,17.846 C13.379,17.949 13.193,18.000 13.008,18.000 C12.842,18.000 12.676,17.959 12.525,17.875 C12.206,17.699 12.008,17.364 12.008,17.000 L12.008,7.000 C12.008,6.637 12.204,6.303 12.521,6.127 C12.838,5.950 13.227,5.958 13.534,6.149 L21.553,11.105 C21.846,11.286 22.026,11.606 22.027,11.951 C22.028,12.296 21.852,12.618 21.560,12.801 L13.541,17.846 ZM14.009,8.794 L14.009,15.189 L19.137,11.963 L14.009,8.794 Z" /></svg>
</div>
<div class="social-icon" onclick="window.open('https://github.com/iosxpc', '_blank')">
<svg width="800px" height="800px" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg" fill="none" style="fill: none;"><path class="path" stroke-linecap="round" stroke-linejoin="round" stroke-width="12" d="M120.755 170c.03-4.669.059-20.874.059-27.29 0-9.272-3.167-15.339-6.719-18.41 22.051-2.464 45.201-10.863 45.201-49.067 0-10.855-3.824-19.735-10.175-26.683 1.017-2.516 4.413-12.63-.987-26.32 0 0-8.296-2.672-27.202 10.204-7.912-2.213-16.371-3.308-24.784-3.352-8.414.044-16.872 1.14-24.785 3.352C52.457 19.558 44.162 22.23 44.162 22.23c-5.4 13.69-2.004 23.804-.987 26.32C36.824 55.498 33 64.378 33 75.233c0 38.204 23.149 46.603 45.2 49.067-3.551 3.071-6.719 9.138-6.719 18.41 0 6.416.03 22.621.059 27.29M27 130c9.939.703 15.67 9.735 15.67 9.735 8.834 15.199 23.178 10.803 28.815 8.265" /></svg>
</div>
<div class="social-icon" onclick="window.open('https://www.deviantart.com/iosxpc', '_blank')">
<svg width="800px" height="800px" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg" fill="none"><path class="path" stroke-linejoin="round" stroke-width="12" d="M99 54H54v28h33m6 56h45v-28h-33" /><path fill-rule="evenodd" d="M110.616 19.351A6.002 6.002 0 0 1 116 16h22a6 6 0 0 1 6 6v22c0 .918-.211 1.825-.616 2.649L109.258 116H95.884L132 42.604V28h-12.265l-15.746 32H90.615l20.001-40.649ZM88.011 132l-15.746 32H60v-14.604L96.116 76H82.742l-34.126 69.351A6 6 0 0 0 48 148v22a6 6 0 0 0 6 6h22a6 6 0 0 0 5.383-3.351L101.385 132H88.011Z" clip-rule="evenodd" /></svg>
</div>
</div>
</div>
<div class="setting-child">
<div class="setting-option" id="exit-website">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="m17 8-1.41 1.41L17.17 11H9v2h8.17l-1.58 1.58L17 16l4-4zM5 5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h7v-2H5z"></path></svg>
<span>Exit Website</span>
</div>
</div>
<div class="setting-child" id="last-sync-time">
Last Sync: Just now :)
</div>
</div>
</div>
<!-- Settings section end -->
<!-- Choose theme popup -->
<div id="appearance-popup" class="popup" style="display: none;">
<p>Choose theme</p>
<ul>
<li class="theme-option" data-theme="light">Light</li>
<li class="theme-option" data-theme="dark">Dark</li>
<li class="theme-option" data-theme="system">Follow system</li>
</ul>
</div>
<div id="popup-overlay"></div>
<!-- Wallpaper popup -->
<div id="popup">
<div id="popup-content">
<div id="popup-wallpaper"></div>
<div class="popup-actions" id="popup-actions">
<button id="collapse-button">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"></path></svg>
</button>
<div id="popup-info"></div>
<div id="popup-buttons">
<button id="favorites-button" class="popup-button add-fav-button nav-button">Add to Favorites</button>
<button id="share-button" class="popup-button nav-button">
<svg aria-hidden="true"
viewBox="0 0 24 24"><path d=" M18 16.08c-.76 0-1.44.3-1.96.77L8.91
12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34
3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3
3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92
2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92M18 4c.55 0 1 .45 1 1s-.45 1-1
1-1-.45-1-1 .45-1 1-1M6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1m12 7.02c-.55
0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1"></path></svg>
</button>
<button id="copy-wallpaper-link-button" class="popup-button copy-link-button nav-button">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5"></path></svg>
</button>
<button id="download-button" class="popup-button nav-button" disabled>
<div class="loading-wall" id="loading-wall">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"><g><path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="400ms" repeatCount="indefinite"/></g></svg>
<span class="loading-text">Loading</span>
</div>
</button>
</div>
</div>
<button id="popup-close">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M18.3 5.71a.9959.9959 0 0 0-1.41 0L12 10.59 7.11 5.7a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4"></path></svg>
</button>
</div>
</div>
<div id="download-progress-popup" style="display: none">
Download in progress...
</div>
<!-- Script -->
<script src="./assets/script.js"></script>
</body>
</html>