-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
258 lines (242 loc) · 29.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./icons/appbar.os.windows.8.png" type="image/x-icon">
<link href="https://cdn.metroui.org.ua/current/icons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.4.47/css/materialdesignicons.min.css">
<link rel="stylesheet" href="style.css">
<title>Windows Phone</title>
</head>
<body>
<canvas id="blur-canvas"></canvas>
<div class="status-bar">
<div><span class="mdi mdi-battery"></span></div>
<div id="clock"></div>
</div>
<div class="container">
<div class="main-grid" id="start-screen">
<div class="tile">
<a href="https://outlook.com" target="_blank">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 57,28.0001L 57.0002,44.9999L 55.0002,44.9999L 55.0002,30L 42.0002,29.9999L 42.0002,28L 57,28.0001 Z M 54,49.0002L 42.0001,49L 42,38.0001L 45.5032,40.7501L 53.9998,33.5004L 54,49.0002 Z M 54,31.0001L 53.9998,31.7503L 45.4998,38.7503L 42.0001,36L 42.0002,31L 54,31.0001 Z M 18.9998,23.5002L 40.9999,20.0001L 40.9999,56.0001L 18.9998,52.5002L 18.9998,23.5002 Z M 29.7823,44.5427C 31.1047,44.6242 32.6081,44.0316 33.4484,43.0072C 35.2038,40.8676 35.3479,37.1917 34.085,34.729C 33.491,33.5706 32.2772,32.5478 30.9911,32.3455C 29.9414,32.1803 28.7908,32.3617 27.8419,32.8397C 25.3245,34.1079 24.2313,38.1775 25.1295,40.8493C 25.7605,42.7263 27.8059,44.421 29.7823,44.5427 Z M 29.87,34.5962C 32.1888,34.5309 33.0384,39.4058 31.7104,41.3077C 31.5008,41.6079 31.216,41.8734 30.8877,42.0353C 30.5612,42.1963 30.1792,42.2576 29.8155,42.2423C 29.4521,42.2269 29.0805,42.1272 28.7653,41.9457C 28.4352,41.7557 28.1522,41.4733 27.9357,41.16C 26.6387,39.2837 27.5899,34.6605 29.87,34.5962 Z "/>
</svg>
</span>
</a>
<p class="icon-name">Outlook</p>
</div>
<div class="tile">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 50.9225,54.2329C 51.037,54.5029 51.0943,54.7769 51.0943,55.0551C 51.0943,55.4396 50.992,55.7986 50.7875,56.132C 50.583,56.4654 50.2966,56.72 49.9285,56.8959L 48.1981,57.7059C 47.5231,58.0127 46.8471,58.2356 46.1701,58.3747C 45.4931,58.5138 44.809,58.5833 44.1176,58.5833C 43.005,58.5833 41.9056,58.3982 40.8195,58.028C 39.7334,57.6578 38.6944,57.1281 37.7024,56.4388C 36.7104,55.7495 35.7798,54.916 34.9105,53.9384C 34.0412,52.9607 33.263,51.8705 32.5757,50.6678C 32.138,50.0011 31.6778,49.2402 31.1951,48.3852C 30.7861,47.6571 30.3187,46.7848 29.7931,45.7682C 29.2674,44.7517 28.7366,43.6237 28.2008,42.3842C 27.6526,41.1447 27.218,40.0617 26.8968,39.1352C 26.5757,38.2086 26.3272,37.4386 26.1513,36.825C 25.9468,36.1091 25.8057,35.4955 25.7279,34.9841C 25.4457,34.0351 25.2381,33.0912 25.1051,32.1524C 24.9722,31.2136 24.9057,30.2839 24.9057,29.3635C 24.9057,28.1609 25.0264,27.0032 25.2677,25.8905C 25.5091,24.7779 25.8793,23.7429 26.3783,22.7857C 26.8774,21.8285 27.5104,20.9725 28.2775,20.2178C 29.0445,19.463 29.9516,18.8484 30.9988,18.3739L 32.7046,17.5885C 32.9746,17.4739 33.2446,17.4167 33.5146,17.4167C 33.895,17.4167 34.2488,17.522 34.5761,17.7327C 34.9033,17.9433 35.1488,18.2348 35.3124,18.6071L 38.5952,26.0623C 38.7097,26.3323 38.767,26.6023 38.767,26.8723C 38.767,27.2691 38.6647,27.6362 38.4602,27.9737C 38.2557,28.3112 37.9673,28.5638 37.595,28.7319L 34.2202,30.2839C 33.7743,30.4885 33.4327,30.7891 33.1955,31.1859C 32.9582,31.5827 32.8396,32.0102 32.8396,32.4684C 32.8396,32.8161 32.905,33.1433 33.0359,33.4501L 38.5768,46.1026C 38.7936,46.5894 39.0932,46.9474 39.4757,47.1764C 39.8582,47.4055 40.2744,47.5201 40.7244,47.5201C 41.0312,47.5201 41.3441,47.4505 41.6632,47.3114L 45.038,45.759C 45.3039,45.6445 45.5719,45.5872 45.8419,45.5872C 46.2141,45.5872 46.5659,45.6925 46.8973,45.9032C 47.2286,46.1139 47.4781,46.4033 47.6458,46.7715L 50.9225,54.2329 Z "/>
</svg>
</span>
<p class="icon-name">Phone</p>
</div>
<div class="tile">
<span class="icon" id="calendar">
</span>
<p class="icon-name">Calendar</p>
</div>
<div class="tile">
<a href="https://www.skype.com/en/" target="_blank">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 46.3697,46.018C 45.6241,47.0947 44.5284,47.9307 43.0967,48.5344C 41.662,49.1382 39.9671,49.4422 38.0089,49.4422C 35.6622,49.4422 33.7191,49.0327 32.186,48.2009C 31.0988,47.6056 30.2147,46.8118 29.5349,45.8196C 28.8534,44.8231 28.5085,43.852 28.5085,42.902C 28.5085,42.3405 28.7221,41.8549 29.1376,41.458C 29.5577,41.0569 30.099,40.8584 30.737,40.8584C 31.2605,40.8584 31.7093,41.0147 32.0754,41.3271C 32.4385,41.6395 32.7425,42.0913 32.992,42.6909C 33.2901,43.3833 33.6148,43.966 33.9598,44.4262C 34.3026,44.8822 34.7852,45.2664 35.4101,45.5662C 36.0282,45.8618 36.8507,46.0138 37.8801,46.0138C 39.2886,46.0138 40.4274,45.7098 41.2984,45.106C 42.1741,44.5022 42.5951,43.7633 42.5951,42.8725C 42.5951,42.1589 42.3679,41.5931 41.9035,41.154C 41.4344,40.7065 40.8281,40.3687 40.0761,40.1322C 39.3211,39.8915 38.3074,39.6382 37.0369,39.3722C 35.3311,38.9964 33.904,38.5658 32.7493,38.0676C 31.5924,37.5693 30.6711,36.8853 29.9883,36.024C 29.3039,35.15 28.9628,34.0691 28.9628,32.7856C 28.9628,31.5611 29.3225,30.4717 30.0441,29.5176C 30.7648,28.5633 31.8073,27.8329 33.1673,27.3262C 34.5222,26.8153 36.1173,26.562 37.9447,26.562C 39.406,26.562 40.6697,26.7309 41.7401,27.0687C 42.8074,27.4065 43.6966,27.854 44.4077,28.4155C 45.1149,28.9729 45.6346,29.564 45.964,30.1847C 46.2929,30.8053 46.4588,31.4133 46.4588,32.0044C 46.4588,32.5575 46.2452,33.0558 45.8293,33.4949C 45.4134,33.934 44.881,34.1578 44.2599,34.1536C 43.6996,34.1536 43.2601,34.0269 42.9552,33.7524C 42.6584,33.4864 42.3464,33.0642 42.0094,32.4773C 41.5834,31.6582 41.0729,31.0206 40.4793,30.5647C 39.9009,30.1171 38.9475,29.8807 37.6204,29.8849C 36.3926,29.8849 35.4101,30.134 34.6687,30.628C 33.9226,31.1262 33.5658,31.7047 33.5641,32.3802C 33.5658,32.8066 33.6874,33.1655 33.9332,33.4696C 34.1823,33.7778 34.5298,34.048 34.9756,34.2717C 35.4219,34.504 35.8762,34.6813 36.3327,34.808C 36.7941,34.9389 37.5601,35.1289 38.6245,35.378C 39.9595,35.6651 41.1709,35.986 42.259,36.3364C 43.3449,36.6911 44.2717,37.1133 45.0376,37.62C 45.8094,38.1225 46.4128,38.7684 46.8435,39.5453C 47.2767,40.3222 47.4928,41.2722 47.4928,42.3911C 47.4928,43.738 47.1171,44.9455 46.3697,46.018 Z M 55.4133,40.7529C 55.5552,39.8578 55.6299,38.9373 55.6299,38C 55.6299,28.2635 47.7369,20.3722 37.9996,20.3722C 37.0652,20.3722 36.1448,20.4482 35.248,20.5876C 33.6241,19.5827 31.7081,19 29.6544,19C 23.7703,19 19,23.7711 19,29.6569C 19,31.7089 19.5818,33.6258 20.5863,35.2513C 20.4474,36.1507 20.371,37.0627 20.371,38C 20.371,47.7406 28.264,55.6278 37.9996,55.6278C 38.9344,55.6278 39.8548,55.556 40.7516,55.4167C 42.3768,56.4173 44.2915,57 46.3452,57C 52.231,57 57,52.2331 57,46.3473C 57,44.2953 56.419,42.3784 55.4133,40.7529 Z "/>
</svg>
</span>
</a>
<p class="icon-name">Skype</p>
</div>
<div class="tile">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 30,27C 30,24.3766 32.3767,22 35,22L 41,22C 43.6234,22 46,24.3766 46,27L 50.9999,27.0001C 53.7613,27.0001 55.9999,29.2387 55.9999,32.0001L 55.9999,46.0001C 55.9999,48.7615 53.7613,51.0001 50.9999,51.0001L 25,51.0001C 22.2385,51.0001 20,48.7615 20,46.0001L 20,32.0001C 20,29.2387 22.2385,27.0001 25,27.0001L 30,27 Z M 25.5,30C 24.6716,30 24,30.8954 24,32C 24,33.1046 24.6716,34 25.5,34C 26.3284,34 27,33.1046 27,32C 27,30.8954 26.3284,30 25.5,30 Z M 38,32C 34.134,32 31,35.134 31,39C 31,42.866 34.134,46 38,46C 41.866,46 45,42.866 45,39C 45,35.134 41.866,32 38,32 Z M 38,34.5C 40.4853,34.5 42.5,36.5147 42.5,39C 42.5,41.4853 40.4853,43.5 38,43.5C 35.5147,43.5 33.5,41.4853 33.5,39C 33.5,36.5147 35.5147,34.5 38,34.5 Z "/>
</svg>
</span>
<p class="icon-name">Camera</p>
</div>
<div class="tile">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 38,17C 40.9455,17 43.3333,19.3878 43.3333,22.3333C 43.3333,25.2788 40.9455,27.6667 38,27.6667C 35.0545,27.6667 32.6667,25.2788 32.6667,22.3333C 32.6667,19.3878 35.0545,17 38,17 Z M 32.6666,34.3834C 31.9555,34.7389 30.7833,37.8333 31.4262,38.2501L 27.964,37.6132C 30.3193,36.76 30.7911,35.3344 30.9823,32.7335L 30.8009,31.1163C 31.5744,30.4725 32.7185,29.0501 33.7333,29.0502L 42.2666,29.0502C 43.3037,29.0501 44.2149,29.4913 44.9999,30.1593L 45.4999,32.0001C 45.4999,34.1736 47.1556,34.8271 48.886,35.8798L 46.4666,35.8292C 45.8376,35.8068 45.2551,35.9483 44.7188,36.2059C 44.2645,35.4252 43.7029,34.5682 43.3333,34.3834L 43.4534,37.0835C 41.1956,39.1569 40.0666,43.0679 40.0666,43.0679L 39.6764,45.0053L 38.5333,45.05C 37.7661,45.05 37.0129,44.99 36.2782,44.8745C 35.6933,43.3208 34.4183,40.5162 32.4533,39.2079L 32.6666,34.3834 Z M 24.7333,26.95C 27.6789,26.95 30.0667,29.3378 30.0667,32.2833C 30.0667,35.2288 27.6789,37.6167 24.7333,37.6167C 21.7878,37.6167 19.4,35.2288 19.4,32.2833C 19.4,29.3378 21.7878,26.95 24.7333,26.95 Z M 19.4,44.3333C 18.6889,44.6889 17.2667,47.5333 17.2667,47.5333C 17.2667,47.5333 16.5556,48.6 16.2,52.8666L 13,51.8L 14.0667,46.4667C 14.0667,46.4667 16.2,39 20.4666,39.0001L 28.9999,39.0001C 33.2667,39 35.4,46.4667 35.4,46.4667L 36.4666,51.8L 33.2667,52.8667C 32.9111,48.6 32.2001,47.5333 32.2001,47.5333C 32.2001,47.5333 30.7778,44.6889 30.0667,44.3333L 30.4976,54.0204C 28.8762,54.6529 27.112,55 25.2667,55C 23.0173,55 20.8884,54.4843 18.9918,53.5646L 19.4,44.3333 Z M 51.7333,24.931C 54.6788,25.0359 57.0667,27.5087 57.0667,30.4542C 57.0667,33.3997 54.6788,35.7025 51.7333,35.5977C 48.7878,35.4928 46.4,33.02 46.4,30.0745C 46.4,27.129 48.7878,24.8262 51.7333,24.931 Z M 46.4,42.1245C 45.6889,42.4547 44.2667,45.2485 44.2667,45.2485C 44.2667,45.2485 43.5556,46.2898 43.2,50.5438L 40,49.3632L 41.0667,44.0679C 41.0667,44.0679 43.2,36.6772 47.4666,36.8292L 55.9999,37.133C 60.2667,37.2848 62.4,44.8274 62.4,44.8274L 63.4666,50.1988L 60.2667,51.1515C 59.9111,46.8722 59.2001,45.7802 59.2001,45.7802C 59.2001,45.7802 57.7778,42.8851 57.0667,42.5042L 57.4976,52.2067C 55.8762,52.7814 54.112,53.0657 52.2667,53C 50.0173,52.9199 47.8884,52.3284 45.9918,51.3412L 46.4,42.1245 Z "/>
</svg>
</span>
<p class="icon-name">People</p>
</div>
<div class="tile wide" id="quote-tile">
<div class="tile-inner">
<div class="tile-front">
<span id="live-tile" class="quote"></span>
</div>
<div class="tile-back">
</div>
</div>
<p class="icon-name">Quotes</p>
</div>
<div class="tile">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 17,20L 59,20L 59,56L 17,56L 17,20 Z M 20,23L 20,53L 56,53L 56,23L 20,23 Z M 24,51L 30.0833,44.3333L 33.25,47.5L 45.9167,34.8333L 50.6667,39.5833L 54,36L 54,51L 24,51 Z M 30.0833,26.9167C 30.0833,30.4145 27.2478,33.25 23.75,33.25C 23.2033,33.25 22.5061,33.1302 22,33L 22,25L 29.6666,25C 29.7968,25.5061 30.0833,26.3699 30.0833,26.9167 Z "/>
</svg>
</span>
<p class="icon-name">Photos</p>
</div>
<div class="tile">
<a href="https://github.com/4rnv/metro" target="_blank">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 49.4162,18.9999C 50.0612,20.4651 50.4791,22.8974 49.8556,24.6785C 52.4052,26.8554 53.2817,32.1482 52.0513,36.4723C 55.6852,36.7501 60.0132,36.3394 62.8071,37.4547C 60.1951,37.1189 56.6285,36.4602 53.2591,36.6895C 52.6207,36.7325 51.6753,36.6652 51.7216,37.5633C 55.6213,37.8692 59.4967,38.2027 62.6985,39.2016C 59.5232,38.6829 55.6676,37.8934 51.7216,37.7827C 50.0915,40.9998 46.8109,42.5804 42.2823,42.9133C 42.769,43.9729 43.7012,44.3758 43.9294,46.0804C 44.269,48.6255 43.398,52.3543 44.2569,54.0511C 44.6693,54.8637 45.3412,54.8857 45.7944,55.5803C 44.6852,56.8935 41.9355,55.4337 41.6224,54.0511C 41.086,51.6835 42.4394,48.0126 40.9642,46.4078C 41.0689,48.9899 40.3539,52.6172 41.0744,54.9243C 41.3583,55.8317 42.1781,56.1818 41.9526,56.9999C 36.7977,57.5236 38.9509,50.3273 38.1092,46.0804C 37.3319,46.1355 37.6731,47.2452 37.6711,47.7181C 37.6483,51.8664 38.5193,57.555 34.0491,56.9999C 33.9173,56.1289 34.6483,55.8317 34.9261,55.0357C 35.7426,52.7016 34.7734,49.2242 35.1483,46.4078C 33.4416,47.6939 35.3269,52.1851 34.2696,54.4877C 33.6599,55.8125 31.6974,56.3896 30.2084,55.7975C 30.4019,54.8107 31.4217,54.9701 31.8534,54.0511C 32.4576,52.7689 31.8578,50.9232 32.0739,49.0285C 28.9151,49.6586 26.4658,48.937 25.2676,46.9536C 24.731,46.0627 24.5976,45.0131 23.9493,44.2243C 23.3043,43.4348 22.274,43.3285 21.9746,42.2595C 25.8864,41.3179 26.0358,46.2849 29.5491,46.4078C 30.6262,46.447 31.1858,46.0964 32.183,45.8626C 32.462,44.6101 33.0595,43.6762 33.9388,43.0219C 29.5689,42.4238 25.9587,41.0627 24.2801,37.7827C 20.3061,37.9784 16.6698,38.5092 13.3021,39.3102C 16.3589,38.2 20.1296,37.8019 24.1703,37.6718C 23.9322,36.2402 21.8446,36.6338 20.548,36.6895C 18.1395,36.7959 15.1075,37.0952 13.193,37.4547C 15.9691,36.4651 19.8622,36.5886 23.6218,36.5809C 22.4724,32.9756 22.8705,27.2485 25.3782,25.1156C 24.6676,23.3245 24.8881,20.3951 25.8175,18.9999C 28.6169,19.1261 30.3148,20.3466 32.0739,21.5125C 34.2558,20.8918 36.5491,20.5837 39.538,20.7473C 40.7955,20.8174 42.1025,21.3819 43.0491,21.2926C 43.978,21.2055 45.0022,20.163 45.903,19.765C 47.0788,19.2463 48.0728,19.0484 49.4162,18.9999 Z "/>
</svg>
</span>
</a>
<p class="icon-name">Github</p>
</div>
<div class="tile large">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M6.43,3.72C6.5,3.66 6.57,3.6 6.62,3.56C8.18,2.55 10,2 12,2C13.88,2 15.64,2.5 17.14,3.42C17.25,3.5 17.54,3.69 17.7,3.88C16.25,2.28 12,5.7 12,5.7C10.5,4.57 9.17,3.8 8.16,3.5C7.31,3.29 6.73,3.5 6.46,3.7M19.34,5.21C19.29,5.16 19.24,5.11 19.2,5.06C18.84,4.66 18.38,4.56 18,4.59C17.61,4.71 15.9,5.32 13.8,7.31C13.8,7.31 16.17,9.61 17.62,11.96C19.07,14.31 19.93,16.16 19.4,18.73C21,16.95 22,14.59 22,12C22,9.38 21,7 19.34,5.21M15.73,12.96C15.08,12.24 14.13,11.21 12.86,9.95C12.59,9.68 12.3,9.4 12,9.1C12,9.1 11.53,9.56 10.93,10.17C10.16,10.94 9.17,11.95 8.61,12.54C7.63,13.59 4.81,16.89 4.65,18.74C4.65,18.74 4,17.28 5.4,13.89C6.3,11.68 9,8.36 10.15,7.28C10.15,7.28 9.12,6.14 7.82,5.35L7.77,5.32C7.14,4.95 6.46,4.66 5.8,4.62C5.13,4.67 4.71,5.16 4.71,5.16C3.03,6.95 2,9.35 2,12A10,10 0 0,0 12,22C14.93,22 17.57,20.74 19.4,18.73C19.4,18.73 19.19,17.4 17.84,15.5C17.53,15.07 16.37,13.69 15.73,12.96Z" />
</svg>
</span>
<p class="icon-name">Xbox</p>
</div>
<div class="tile">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-linejoin="round" d="M 23,19L 53,19L 56.9999,25.0001L 57,27L 19,27L 19,25.0001L 23,19 Z M 19,42L 19,29.0001L 56.9999,29.0001L 57,42L 54.038,42L 52.7168,35.7843L 23.4742,42L 19,42 Z M 34,33L 34,35L 42,35L 42,33L 34,33 Z M 19,57L 19,44L 56.9999,44L 57,57L 19,57 Z M 34,48L 34,50L 42,50L 42,48L 34,48 Z "/>
</svg>
</span>
<p class="icon-name">File Explorer</p>
</div>
<div class="tile">
<a href="https://bing.com" target="_blank">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-linejoin="round" d="M 23,51L 43.75,39.75L 38,37L 34.5,29L 53,35L 53,44L 31.5,57L 23,51L 23,19L 32,22L 32,43L 23,51 Z "/>
</svg>
</span>
</a>
<p class="icon-name">Bing</p>
</div>
<div class="tile">
<a href="https://www.msn.com/en-us/weather" target="_blank">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 61.9265,41.022L 53.0007,43.0713C 53.6708,41.0949 53.9557,38.9728 53.7924,36.8188L 61.9265,41.022 Z M 52.7817,57.0555L 45.0225,52.1939C 46.9628,51.2366 48.6434,49.9111 50.0017,48.3301L 52.7817,57.0555 Z M 34.978,61.9265L 32.9287,53.0007C 34.9051,53.6708 37.0272,53.9557 39.1812,53.7924L 34.978,61.9265 Z M 18.9445,52.7817L 23.8061,45.0225C 24.7634,46.9629 26.0889,48.6435 27.6699,50.0017L 18.9445,52.7817 Z M 14.0735,34.978L 22.9993,32.9288C 22.3292,34.9052 22.0443,37.0272 22.2076,39.1812L 14.0735,34.978 Z M 23.2183,18.9445L 30.9775,23.8062C 29.0371,24.7634 27.3565,26.0889 25.9983,27.6699L 23.2183,18.9445 Z M 41.022,14.0735L 43.0712,22.9993C 41.0948,22.3292 38.9728,22.0443 36.8188,22.2076L 41.022,14.0735 Z M 57.0555,23.2183L 52.1938,30.9775C 51.2366,29.0371 49.9111,27.3566 48.3301,25.9983L 57.0555,23.2183 Z M 38,25.3333C 44.9956,25.3333 50.6667,31.0044 50.6667,38C 50.6667,44.9956 44.9956,50.6667 38,50.6667C 31.0044,50.6667 25.3333,44.9956 25.3333,38C 25.3333,31.0044 31.0044,25.3333 38,25.3333 Z "/>
</svg>
</span>
</a>
<p class="icon-name">Weather</p>
</div>
<div class="tile">
<a href="https://office.com" target="_blank">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 42,24L 57,24L 57,52L 42,52L 42,49L 53.9999,49L 54,47L 42,47L 42,45L 54,45L 54,43L 42,43L 42,41L 54,41L 54,39L 42,39L 42,37L 54,37L 54,35L 42,35L 42,33L 54,33L 53.9999,31L 41.9999,31L 41.9999,29L 53.9999,29L 54,27L 42,27L 42,24 Z M 18.9999,23.5001L 41,20L 41,56L 18.9999,52.5L 18.9999,23.5001 Z M 36.88,32.1262L 34.5424,32.2511L 32.9646,41.8358L 32.9349,41.8347C 32.5315,38.6677 31.741,35.5618 31.0946,32.4353L 28.6148,32.5678L 26.538,41.6211L 26.4945,41.6195C 26.1811,38.638 25.4794,35.7097 24.9146,32.7655L 22.3844,32.9007L 25.0893,44.0476L 27.7649,44.2124L 29.6873,35.4199L 29.7148,35.4192C 30.0891,38.4712 30.9304,41.4481 31.6015,44.4488L 34.1692,44.607L 36.88,32.1262 Z "/>
</svg>
</span>
</a>
<p class="icon-name">Word</p>
</div>
<div class="tile">
<a href="https://office.com" target="_blank">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 42,24L 57,24L 57,52L 42,52L 42,50L 47,50L 47,46L 42,46L 42,45L 47,45L 47,41L 42,41L 42,40L 47,40L 47,36L 42,36L 42,35L 47,35L 47,31L 42,31L 42,30L 47,30L 47,26L 42,26L 42,24 Z M 54.9995,50.0005L 54.9997,46.0003L 47.9995,46.0003L 47.9995,50.0005L 54.9995,50.0005 Z M 54.9996,41.0004L 47.9995,41.0004L 47.9995,45.0003L 54.9997,45.0003L 54.9996,41.0004 Z M 54.9996,36.0004L 47.9995,36.0004L 47.9995,40.0004L 54.9996,40.0004L 54.9996,36.0004 Z M 54.9996,31.0004L 47.9995,31.0004L 47.9995,35.0004L 54.9996,35.0004L 54.9996,31.0004 Z M 54.9995,26.0005L 47.9995,26.0005L 47.9995,30.0004L 54.9996,30.0004L 54.9995,26.0005 Z M 18.9997,23.7503L 40.9994,19.7506L 40.9994,56.2506L 18.9997,52.2503L 18.9997,23.7503 Z M 34.6404,44.5147L 31.3367,37.4084L 34.5522,30.4699L 31.9399,30.5805L 30.2234,34.6963L 30.0162,35.3903L 29.8872,35.8892L 29.8596,35.8895C 29.4574,34.1248 28.7481,32.4436 28.1318,30.7417L 25.2803,30.8624L 28.2549,37.4637L 24.997,44.0621L 27.7904,44.1932L 29.5296,39.8757L 29.7578,38.9297L 29.7876,38.93C 30.2317,40.8236 31.1236,42.5844 31.861,44.3843L 34.6404,44.5147 Z "/>
</svg>
</span>
</a>
<p class="icon-name">Excel</p>
</div>
<div class="tile">
<a href="https://office.com" target="_blank">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 55.0001,29L 55.0001,50L 42.0001,50L 42.0001,48L 52.0001,48L 52.0001,46L 42.0001,46L 42.0001,44L 52.0001,44L 52.0001,42L 42.0001,42L 42.0001,40.5839C 42.6126,40.8515 43.289,41 44.0001,41C 46.7616,41 49.0001,38.7614 49.0001,36L 44.0002,35.9999L 44.0001,31C 43.289,31 42.6126,31.1484 42.0001,31.416L 42.0001,29L 55.0001,29 Z M 44.9998,35.0003L 49.9997,35.0003C 49.9997,32.239 47.7611,30.0004 44.9998,30.0004L 44.9998,35.0003 Z M 42,27L 57,27L 57.0001,45L 56.0001,45L 56.0001,28L 42,28L 42,27 Z M 19,23.5001L 41.0001,20L 41.0001,56L 19,52.5001L 19,23.5001 Z M 29.2404,40.2485L 30.3429,40.2728C 31.6241,40.1999 33.1175,39.6722 33.8046,38.5883C 34.7531,37.0922 34.7468,34.515 33.4726,33.2844C 31.8982,31.764 29.122,32.5407 26.9364,32.6575L 26.9396,44.1616L 28.0972,44.2329L 29.2549,44.3042L 29.2404,40.2485 Z M 29.2434,34.5695L 30.1536,34.539C 30.615,34.6779 31.1931,34.6191 31.5379,34.9558C 32.3064,35.7062 31.9726,37.7791 30.9558,38.1251C 30.6982,38.2128 30.4193,38.2232 30.1477,38.2413L 29.238,38.2391L 29.2434,34.5695 Z "/>
</svg>
</span>
</a>
<p class="icon-name">PowerPoint</p>
</div>
<div class="tile">
<a href="https://office.com" target="_blank">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
<path fill="currentColor" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 57.0002,33.9998L 57.0001,41.9998L 55,41.9999L 55.0002,33.9999L 57.0002,33.9998 Z M 57.0002,42.9999L 57,50.9999L 55,51L 55.0001,43L 57.0002,42.9999 Z M 19.0001,23.5L 41.0002,19.9999L 41.0002,55.9999L 19.0001,52.5L 19.0001,23.5 Z M 34.1867,44.608L 34.1814,32.2704L 33.0883,32.3288L 31.9952,32.3872L 31.9801,39.0708L 32.0408,40.7311L 32.011,40.7303C 30.5767,37.9799 29.0044,35.3028 27.428,32.6312L 26.1812,32.6978L 24.9344,32.7644L 24.9371,44.0382L 26.0304,44.1056L 27.1238,44.173L 27.1097,37.838L 27.096,36.7457L 27.0541,35.9744L 27.0816,35.9739C 28.6258,38.8286 30.2874,41.6185 31.8485,44.464L 33.0176,44.536L 34.1867,44.608 Z M 42.0002,23.9999L 54.0001,24L 54.0002,24.9999L 57.0002,24.9999L 57.0002,32.9999L 54.0002,32.9999L 54.0001,52L 42.0001,52L 42.0001,49L 52.0002,48.9999L 52.0001,47L 42.0001,47L 42.0001,45L 52.0001,45L 52,43L 42,43L 42,41L 52,41L 52,39.0001L 42,39.0001L 42,37.0001L 52,37.0001L 52,35.0001L 42,35.0001L 42,33.0001L 52,33.0001L 51.9999,31.0002L 41.9999,31.0002L 41.9999,29.0002L 51.9999,29.0002L 52.0002,26.9999L 42.0002,26.9999L 42.0002,23.9999 Z "/>
</svg>
</span>
</a>
<p class="icon-name">OneNote</p>
</div>
</div>
<div class="all-apps" id="app-center">
<div class="header">
<h1>Info</h1>
</div>
<div class="content">
<div id="settings">
<input type="url" id="background-image-url" name="background-image-url" placeholder="Enter background image URL">
<div id="color-picker">
<label>
<input type="radio" name="tile-color" value="#1BA1E2">
<span class="color-box" style="background-color: #1BA1E2;"></span>
</label>
<label>
<input type="radio" name="tile-color" value="#F09609">
<span class="color-box" style="background-color: #F09609;"></span>
</label>
<label>
<input type="radio" name="tile-color" value="#4CAF50">
<span class="color-box" style="background-color: #4CAF50;"></span>
</label>
<label>
<input type="radio" name="tile-color" value="#00ABA9">
<span class="color-box" style="background-color: #00ABA9;"></span>
</label>
<label>
<input type="radio" name="tile-color" value="#E51400">
<span class="color-box" style="background-color: #E51400;"></span>
</label>
<label>
<input type="radio" name="tile-color" value="#E671B8">
<span class="color-box" style="background-color: #E671B8;"></span>
</label>
<label>
<input type="radio" name="tile-color" value="#A200FF">
<span class="color-box" style="background-color: #A200FF;"></span>
</label>
<label>
<input type="radio" name="tile-color" value="rgba(0, 0, 0, 0.1)">
<span class="color-box" style="background-color: rgba(0, 0, 0, 0.1);"></span>
</label>
</div>
<div><button id="apply-settings-button">Save</button> <button onclick="clearStorage()">Clear</button></div>
</div>
<div class="app">
<img src="./icons/appbar.settings.png" alt="App Icon" class="app-icon">
<div class="app-name">Settings</div>
</div>
<div class="app">
<img src="./icons/appbar.social.github.octocat.solid.png" alt="App Icon" class="app-icon">
<div class="app-name"><a href="https://github.com/4rnv/metro" target="_blank">Github</a></div>
</div>
</div>
</div>
</div>
<div class="nav-bar">
<button onclick="toggleAllApps()"><span class="mif-backspace mif-2x"></span></button>
<button onclick="toggleAllApps()"><span class="mif-windows mif-2x"></span></button>
<button><span class="mif-search mif-2x"></span></button>
</div>
<div class="context-menu" id="custom-menu">
<ul>
<li>Unpin tile</li>
<li>Resize</li>
<li>Uninstall</li>
</ul>
</div>
<script src="./script.js"></script>
</body>
</html>