-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
473 lines (461 loc) · 32.9 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
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./style.css" />
<meta name="theme-color" content="#f8f9fa" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NuSense Admin Dashboard</title>
</head>
<body>
<div class="container">
<div class="header">
<div tabindex="0" class="menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M7.5 36Q6.85 36 6.425 35.575Q6 35.15 6 34.5Q6 33.85 6.425 33.425Q6.85 33 7.5 33H40.5Q41.15 33 41.575 33.425Q42 33.85 42 34.5Q42 35.15 41.575 35.575Q41.15 36 40.5 36ZM7.5 25.5Q6.85 25.5 6.425 25.075Q6 24.65 6 24Q6 23.35 6.425 22.925Q6.85 22.5 7.5 22.5H40.5Q41.15 22.5 41.575 22.925Q42 23.35 42 24Q42 24.65 41.575 25.075Q41.15 25.5 40.5 25.5ZM7.5 15Q6.85 15 6.425 14.575Q6 14.15 6 13.5Q6 12.85 6.425 12.425Q6.85 12 7.5 12H40.5Q41.15 12 41.575 12.425Q42 12.85 42 13.5Q42 14.15 41.575 14.575Q41.15 15 40.5 15Z"
/>
</svg>
</div>
<h1 class="logo"><span>Su</span>Zen</h1>
<div tabindex="0" class="bell">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M7.7 19.65Q7.05 19.65 6.625 19.2Q6.2 18.75 6.25 18.15Q6.5 14.9 7.875 11.975Q9.25 9.05 11.6 6.8Q12.05 6.4 12.7 6.425Q13.35 6.45 13.8 6.95Q14.2 7.4 14.175 8Q14.15 8.6 13.7 9.05Q11.8 10.9 10.675 13.225Q9.55 15.55 9.3 18.15Q9.2 18.8 8.75 19.225Q8.3 19.65 7.7 19.65ZM40.35 19.65Q39.75 19.65 39.325 19.225Q38.9 18.8 38.8 18.15Q38.55 15.55 37.45 13.225Q36.35 10.9 34.5 9.05Q34.05 8.6 34.025 8Q34 7.4 34.4 6.95Q34.85 6.45 35.475 6.425Q36.1 6.4 36.55 6.85Q38.85 9.15 40.2 12.025Q41.55 14.9 41.8 18.15Q41.85 18.75 41.425 19.2Q41 19.65 40.35 19.65ZM9.5 38Q8.85 38 8.425 37.575Q8 37.15 8 36.5Q8 35.85 8.425 35.425Q8.85 35 9.5 35H12.2V19.7Q12.2 15.6 14.675 12.275Q17.15 8.95 21.2 8.1V6.65Q21.2 5.5 22.025 4.75Q22.85 4 24 4Q25.15 4 25.975 4.75Q26.8 5.5 26.8 6.65V8.1Q30.85 8.95 33.35 12.275Q35.85 15.6 35.85 19.7V35H38.5Q39.15 35 39.575 35.425Q40 35.85 40 36.5Q40 37.15 39.575 37.575Q39.15 38 38.5 38ZM24 44Q22.4 44 21.2 42.825Q20 41.65 20 40H28Q28 41.65 26.825 42.825Q25.65 44 24 44Z"
/>
</svg>
</div>
<img src="./img/dominik.png" class="profile-picture" alt="" />
<p>Dominik Durr</p>
</div>
<div class="sidebar">
<div class="spacer"></div>
<div tabindex="0" class="sidebar-select">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M11 42Q9.75 42 8.875 41.125Q8 40.25 8 39V19.5Q8 18.8 8.325 18.15Q8.65 17.5 9.2 17.1L22.2 7.35Q22.6 7.05 23.05 6.9Q23.5 6.75 24 6.75Q24.5 6.75 24.95 6.9Q25.4 7.05 25.8 7.35L38.8 17.1Q39.35 17.5 39.675 18.15Q40 18.8 40 19.5V39Q40 40.25 39.125 41.125Q38.25 42 37 42H28V28H20V42Z"
/>
</svg>
<p>Home</p>
</div>
<div tabindex="0" class="sidebar-select">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M13.35 32H34.7Q35.15 32 35.35 31.6Q35.55 31.2 35.3 30.8L29.45 22.85Q29.2 22.55 28.85 22.55Q28.5 22.55 28.25 22.85L22.3 30.75L18.3 25.15Q18.05 24.85 17.7 24.825Q17.35 24.8 17.1 25.1L12.75 30.8Q12.45 31.2 12.675 31.6Q12.9 32 13.35 32ZM7 40Q5.8 40 4.9 39.1Q4 38.2 4 37V11Q4 9.8 4.9 8.9Q5.8 8 7 8H41Q42.25 8 43.125 8.9Q44 9.8 44 11V37Q44 38.2 43.125 39.1Q42.25 40 41 40Z"
/>
</svg>
<p>Posts</p>
</div>
<div tabindex="0" class="sidebar-select">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M11 36Q9.8 36 8.9 35.1Q8 34.2 8 33V7Q8 5.8 8.9 4.9Q9.8 4 11 4H22Q22.6 4 23.15 4.225Q23.7 4.45 24.15 4.9L26.25 7H43Q44.2 7 45.1 7.9Q46 8.8 46 10V33Q46 34.2 45.1 35.1Q44.2 36 43 36ZM5 42Q3.8 42 2.9 41.1Q2 40.2 2 39V11.5Q2 10.85 2.425 10.425Q2.85 10 3.5 10Q4.15 10 4.575 10.425Q5 10.85 5 11.5V39Q5 39 5 39Q5 39 5 39H39Q39.65 39 40.075 39.425Q40.5 39.85 40.5 40.5Q40.5 41.15 40.075 41.575Q39.65 42 39 42ZM18.3 27.45H35.8Q36.3 27.45 36.5 27.05Q36.7 26.65 36.4 26.25L31.3 19.45Q31.05 19.15 30.7 19.15Q30.35 19.15 30.1 19.45L25.2 25.95L22.1 22.3Q21.85 22.05 21.525 22.075Q21.2 22.1 20.95 22.35L17.7 26.2Q17.4 26.6 17.6 27.025Q17.8 27.45 18.3 27.45Z"
/>
</svg>
<p>Media</p>
</div>
<div tabindex="0" class="sidebar-select">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M7 40Q5.8 40 4.9 39.1Q4 38.2 4 37V11Q4 9.8 4.9 8.9Q5.8 8 7 8H41Q42.2 8 43.1 8.9Q44 9.8 44 11V37Q44 38.2 43.1 39.1Q42.2 40 41 40ZM7 25.85H30.05V17.7H7ZM30.05 37V28.85H7V37Q7 37 7 37Q7 37 7 37ZM33.05 37H41Q41 37 41 37Q41 37 41 37V17.7H33.05Z"
/>
</svg>
<p>Pages</p>
</div>
<div tabindex="0" class="sidebar-select">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M13.9 27.5H34.9Q35.55 27.5 35.975 27.075Q36.4 26.65 36.4 26Q36.4 25.35 35.975 24.925Q35.55 24.5 34.9 24.5H13.9Q13.25 24.5 12.825 24.925Q12.4 25.35 12.4 26Q12.4 26.65 12.825 27.075Q13.25 27.5 13.9 27.5ZM13.9 21H34.9Q35.55 21 35.975 20.575Q36.4 20.15 36.4 19.5Q36.4 18.85 35.975 18.425Q35.55 18 34.9 18H13.9Q13.25 18 12.825 18.425Q12.4 18.85 12.4 19.5Q12.4 20.15 12.825 20.575Q13.25 21 13.9 21ZM13.9 14.5H34.9Q35.55 14.5 35.975 14.075Q36.4 13.65 36.4 13Q36.4 12.35 35.975 11.925Q35.55 11.5 34.9 11.5H13.9Q13.25 11.5 12.825 11.925Q12.4 12.35 12.4 13Q12.4 13.65 12.825 14.075Q13.25 14.5 13.9 14.5ZM41.45 41.45 36 36H7Q5.85 36 4.925 35.075Q4 34.15 4 33V7Q4 5.85 4.925 4.925Q5.85 4 7 4H41Q42.2 4 43.1 4.925Q44 5.85 44 7V40.4Q44 41.4 43.075 41.775Q42.15 42.15 41.45 41.45Z"
/>
</svg>
<p>Comments</p>
</div>
<div class="spacer"></div>
<div tabindex="0" class="sidebar-select">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M6 42V34.2L15.7 24.5L6.75 15.5Q6.3 15.05 6.075 14.5Q5.85 13.95 5.85 13.4Q5.85 12.85 6.075 12.3Q6.3 11.75 6.75 11.3L11.25 6.75Q11.7 6.3 12.25 6.075Q12.8 5.85 13.35 5.85Q13.9 5.85 14.475 6.075Q15.05 6.3 15.5 6.75L24.5 15.75L34.35 5.9Q34.6 5.65 34.85 5.575Q35.1 5.5 35.4 5.5Q35.7 5.5 35.95 5.575Q36.2 5.65 36.45 5.9L42.1 11.55Q42.35 11.8 42.425 12.05Q42.5 12.3 42.5 12.6Q42.5 12.9 42.425 13.15Q42.35 13.4 42.1 13.65L32.25 23.5L41.25 32.5Q41.7 32.95 41.925 33.525Q42.15 34.1 42.15 34.65Q42.15 35.2 41.925 35.75Q41.7 36.3 41.25 36.75L36.75 41.2Q36.3 41.65 35.75 41.875Q35.2 42.1 34.65 42.1Q34.1 42.1 33.55 41.875Q33 41.65 32.55 41.2L23.55 32.25L13.8 42ZM17.85 22.35 22.35 17.85 18.7 14.2 16.3 16.6 14.2 14.5 16.6 12.1 13.4 8.9 8.9 13.4ZM34.55 39.1 39.05 34.6 35.85 31.4 33.45 33.8 31.35 31.7 33.75 29.3 30.1 25.65 25.6 30.15ZM9 39H12.5L33.25 18.25L29.75 14.75L9 35.5ZM35.35 16.15 38.85 12.65 35.35 9.15 31.85 12.65Z"
/>
</svg>
<p>Appearance</p>
</div>
<div tabindex="0" class="sidebar-select">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M9 42Q7.75 42 6.875 41.125Q6 40.25 6 39V30.2Q8.2 29.95 9.775 28.475Q11.35 27 11.35 24.85Q11.35 22.7 9.775 21.225Q8.2 19.75 6 19.5V10.7Q6 9.45 6.875 8.575Q7.75 7.7 9 7.7H17.85Q18.4 5.75 19.825 4.375Q21.25 3 23.25 3Q25.25 3 26.675 4.375Q28.1 5.75 28.65 7.7H37.3Q38.55 7.7 39.425 8.575Q40.3 9.45 40.3 10.7V19.35Q42.25 19.9 43.55 21.425Q44.85 22.95 44.85 24.95Q44.85 26.85 43.525 28.275Q42.2 29.7 40.3 30.2V39Q40.3 40.25 39.425 41.125Q38.55 42 37.3 42H28.5Q28.25 39.8 26.775 38.225Q25.3 36.65 23.15 36.65Q21 36.65 19.525 38.225Q18.05 39.8 17.8 42Z"
/>
</svg>
<p>Plugins</p>
</div>
<div tabindex="0" class="sidebar-select">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M24 23.95Q20.7 23.95 18.6 21.85Q16.5 19.75 16.5 16.45Q16.5 13.15 18.6 11.05Q20.7 8.95 24 8.95Q27.3 8.95 29.4 11.05Q31.5 13.15 31.5 16.45Q31.5 19.75 29.4 21.85Q27.3 23.95 24 23.95ZM8 40V35.3Q8 33.4 8.95 32.05Q9.9 30.7 11.4 30Q14.75 28.5 17.825 27.75Q20.9 27 24 27Q27.1 27 30.15 27.775Q33.2 28.55 36.55 30Q38.1 30.7 39.05 32.05Q40 33.4 40 35.3V40Z"
/>
</svg>
<p>User</p>
</div>
<div tabindex="0" class="sidebar-select">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M36.55 41.15Q35.7 41.15 34.925 40.825Q34.15 40.5 33.5 39.85L22.35 28.6Q21.2 29 20.05 29.25Q18.9 29.5 17.7 29.5Q12.85 29.5 9.45 26.125Q6.05 22.75 6.05 17.9Q6.05 16.35 6.45 14.875Q6.85 13.4 7.6 12.1L14.85 19.35L19.45 15.05L12 7.6Q13.3 6.85 14.75 6.425Q16.2 6 17.7 6Q22.65 6 26.125 9.475Q29.6 12.95 29.6 17.9Q29.6 19.1 29.35 20.25Q29.1 21.4 28.7 22.55L39.75 33.6Q40.4 34.25 40.725 35.075Q41.05 35.9 41.05 36.8Q41.05 37.7 40.7 38.525Q40.35 39.35 39.65 39.95Q38.95 40.55 38.175 40.85Q37.4 41.15 36.55 41.15Z"
/>
</svg>
<p>Tools</p>
</div>
<div tabindex="0" class="sidebar-select">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M27.3 44H20.7Q20.15 44 19.725 43.65Q19.3 43.3 19.2 42.75L18.4 37.7Q17.45 37.35 16.4 36.75Q15.35 36.15 14.55 35.5L9.9 37.65Q9.35 37.9 8.8 37.725Q8.25 37.55 7.95 37L4.65 31.15Q4.35 30.65 4.5 30.1Q4.65 29.55 5.1 29.2L9.4 26.05Q9.3 25.6 9.275 25.025Q9.25 24.45 9.25 24Q9.25 23.55 9.275 22.975Q9.3 22.4 9.4 21.95L5.1 18.8Q4.65 18.45 4.5 17.9Q4.35 17.35 4.65 16.85L7.95 11Q8.25 10.45 8.8 10.275Q9.35 10.1 9.9 10.35L14.55 12.5Q15.35 11.85 16.4 11.25Q17.45 10.65 18.4 10.35L19.2 5.25Q19.3 4.7 19.725 4.35Q20.15 4 20.7 4H27.3Q27.85 4 28.275 4.35Q28.7 4.7 28.8 5.25L29.6 10.3Q30.55 10.65 31.625 11.225Q32.7 11.8 33.45 12.5L38.1 10.35Q38.65 10.1 39.2 10.275Q39.75 10.45 40.05 11L43.35 16.8Q43.65 17.3 43.525 17.875Q43.4 18.45 42.9 18.8L38.6 21.85Q38.7 22.35 38.725 22.925Q38.75 23.5 38.75 24Q38.75 24.5 38.725 25.05Q38.7 25.6 38.6 26.1L42.9 29.2Q43.35 29.55 43.5 30.1Q43.65 30.65 43.35 31.15L40.05 37Q39.75 37.55 39.2 37.725Q38.65 37.9 38.1 37.65L33.45 35.5Q32.65 36.15 31.625 36.775Q30.6 37.4 29.6 37.7L28.8 42.75Q28.7 43.3 28.275 43.65Q27.85 44 27.3 44ZM24 30.5Q26.7 30.5 28.6 28.6Q30.5 26.7 30.5 24Q30.5 21.3 28.6 19.4Q26.7 17.5 24 17.5Q21.3 17.5 19.4 19.4Q17.5 21.3 17.5 24Q17.5 26.7 19.4 28.6Q21.3 30.5 24 30.5Z"
/>
</svg>
<p>Settings</p>
</div>
<div class="spacer"></div>
</div>
<div class="content">
<div class="navbar">
<input
type="text"
placeholder="Search..."
name="search"
id="search"
/>
<div tabindex="0" class="action">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M21.5 36Q20.85 36 20.425 35.575Q20 35.15 20 34.5Q20 33.85 20.425 33.425Q20.85 33 21.5 33H26.5Q27.15 33 27.575 33.425Q28 33.85 28 34.5Q28 35.15 27.575 35.575Q27.15 36 26.5 36ZM7.5 15Q6.85 15 6.425 14.575Q6 14.15 6 13.5Q6 12.85 6.425 12.425Q6.85 12 7.5 12H40.5Q41.15 12 41.575 12.425Q42 12.85 42 13.5Q42 14.15 41.575 14.575Q41.15 15 40.5 15ZM13.5 25.5Q12.85 25.5 12.425 25.075Q12 24.65 12 24Q12 23.35 12.425 22.925Q12.85 22.5 13.5 22.5H34.5Q35.15 22.5 35.575 22.925Q36 23.35 36 24Q36 24.65 35.575 25.075Q35.15 25.5 34.5 25.5Z"
/>
</svg>
</div>
<div tabindex="0" class="action">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M27 29.1Q27.65 29.1 28.075 28.675Q28.5 28.25 28.5 27.6V22.5H33.6Q34.25 22.5 34.675 22.075Q35.1 21.65 35.1 21Q35.1 20.35 34.675 19.925Q34.25 19.5 33.6 19.5H28.5V14.4Q28.5 13.75 28.075 13.325Q27.65 12.9 27 12.9Q26.35 12.9 25.925 13.325Q25.5 13.75 25.5 14.4V19.5H20.4Q19.75 19.5 19.325 19.925Q18.9 20.35 18.9 21Q18.9 21.65 19.325 22.075Q19.75 22.5 20.4 22.5H25.5V27.6Q25.5 28.25 25.925 28.675Q26.35 29.1 27 29.1ZM13 38Q11.8 38 10.9 37.1Q10 36.2 10 35V7Q10 5.8 10.9 4.9Q11.8 4 13 4H41Q42.2 4 43.1 4.9Q44 5.8 44 7V35Q44 36.2 43.1 37.1Q42.2 38 41 38ZM7 44Q5.8 44 4.9 43.1Q4 42.2 4 41V11.5Q4 10.85 4.425 10.425Q4.85 10 5.5 10Q6.15 10 6.575 10.425Q7 10.85 7 11.5V41Q7 41 7 41Q7 41 7 41H36.5Q37.15 41 37.575 41.425Q38 41.85 38 42.5Q38 43.15 37.575 43.575Q37.15 44 36.5 44Z"
/>
</svg>
</div>
</div>
<div class="important">
<div class="announcement">
<h2>Announcement</h2>
<h4>Site Maintenance</h4>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae
doloribus quia quo corporis a molestiae.
</p>
<hr />
<h4>Community Share Day</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perspiciatis eos ex autem unde quos blanditiis.
</p>
<hr />
<h4>Updated Privacy Policy</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim,
unde corporis. Nulla accusamus tempora nemo provident tempore.
</p>
</div>
<div class="trending">
<h2>Trending</h2>
<div>
<img src="./img/tegan.png" alt="Profile Picture" />
<h4>@tegan</h4>
<p>World Peace Builder</p>
</div>
<div>
<img src="./img/morgan.png" alt="Profile Picture" />
<h4>@morgan</h4>
<p>Super Cool Project</p>
</div>
<div>
<img src="./img/kendall.png" alt="Profile Picture" />
<h4>@kendall</h4>
<p>Life Changing App</p>
</div>
<div>
<img src="./img/alex.png" alt="Profile Picture" />
<h4>@alex</h4>
<p>No Traffic Maker</p>
</div>
</div>
</div>
<div class="card">
<div>
<h2>Super Cool Project</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem
quis nemo voluptate fugiat nisi, ad perferendis. Earum consequatur
exercitationem nostrum eveniet recusandae expedita fuga,
voluptates delectus natus. Doloremque, quasi optio?
</p>
</div>
<div class="action-box">
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M36.35 44Q34 44 32.325 42.325Q30.65 40.65 30.65 38.3Q30.65 37.95 30.725 37.475Q30.8 37 30.95 36.6L15.8 27.8Q15.05 28.65 13.95 29.175Q12.85 29.7 11.7 29.7Q9.35 29.7 7.675 28.025Q6 26.35 6 24Q6 21.6 7.675 19.95Q9.35 18.3 11.7 18.3Q12.85 18.3 13.9 18.75Q14.95 19.2 15.8 20.05L30.95 11.35Q30.8 11 30.725 10.55Q30.65 10.1 30.65 9.7Q30.65 7.3 32.325 5.65Q34 4 36.35 4Q38.75 4 40.4 5.65Q42.05 7.3 42.05 9.7Q42.05 12.05 40.4 13.725Q38.75 15.4 36.35 15.4Q35.2 15.4 34.125 15.025Q33.05 14.65 32.3 13.8L17.15 22.2Q17.25 22.6 17.325 23.125Q17.4 23.65 17.4 24Q17.4 24.35 17.325 24.75Q17.25 25.15 17.15 25.55L32.3 34.15Q33.05 33.45 34.05 33.025Q35.05 32.6 36.35 32.6Q38.75 32.6 40.4 34.25Q42.05 35.9 42.05 38.3Q42.05 40.65 40.4 42.325Q38.75 44 36.35 44Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M15.35 41.2Q14.5 41.9 13.575 41.25Q12.65 40.6 13 39.55L16.3 28.8L7.8 22.7Q6.9 22.05 7.225 21.025Q7.55 20 8.65 20H19.2L22.55 8.8Q22.7 8.25 23.125 7.975Q23.55 7.7 24 7.7Q24.45 7.7 24.875 7.975Q25.3 8.25 25.45 8.8L28.8 20H39.35Q40.45 20 40.775 21.025Q41.1 22.05 40.2 22.7L31.7 28.8L35 39.55Q35.35 40.6 34.425 41.25Q33.5 41.9 32.65 41.2L24 34.6Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M24 31.5Q27.55 31.5 30.025 29.025Q32.5 26.55 32.5 23Q32.5 19.45 30.025 16.975Q27.55 14.5 24 14.5Q20.45 14.5 17.975 16.975Q15.5 19.45 15.5 23Q15.5 26.55 17.975 29.025Q20.45 31.5 24 31.5ZM24 28.6Q21.65 28.6 20.025 26.975Q18.4 25.35 18.4 23Q18.4 20.65 20.025 19.025Q21.65 17.4 24 17.4Q26.35 17.4 27.975 19.025Q29.6 20.65 29.6 23Q29.6 25.35 27.975 26.975Q26.35 28.6 24 28.6ZM24 38Q17.1 38 11.425 34.25Q5.75 30.5 2.65 24.35Q2.5 24.1 2.425 23.75Q2.35 23.4 2.35 23Q2.35 22.6 2.425 22.25Q2.5 21.9 2.65 21.65Q5.75 15.5 11.425 11.75Q17.1 8 24 8Q30.9 8 36.575 11.75Q42.25 15.5 45.35 21.65Q45.5 21.9 45.575 22.25Q45.65 22.6 45.65 23Q45.65 23.4 45.575 23.75Q45.5 24.1 45.35 24.35Q42.25 30.5 36.575 34.25Q30.9 38 24 38Z"
/>
</svg>
</div>
</div>
</div>
<div class="card">
<div>
<h2>Ad Blocker</h2>
<p>
Quisque eget rutrum nisl. Nam auque justo, cursus vitae metus vel,
pharetra hendrerit felis. Aliquam sed malesuada eros.
</p>
</div>
<div class="action-box">
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M36.35 44Q34 44 32.325 42.325Q30.65 40.65 30.65 38.3Q30.65 37.95 30.725 37.475Q30.8 37 30.95 36.6L15.8 27.8Q15.05 28.65 13.95 29.175Q12.85 29.7 11.7 29.7Q9.35 29.7 7.675 28.025Q6 26.35 6 24Q6 21.6 7.675 19.95Q9.35 18.3 11.7 18.3Q12.85 18.3 13.9 18.75Q14.95 19.2 15.8 20.05L30.95 11.35Q30.8 11 30.725 10.55Q30.65 10.1 30.65 9.7Q30.65 7.3 32.325 5.65Q34 4 36.35 4Q38.75 4 40.4 5.65Q42.05 7.3 42.05 9.7Q42.05 12.05 40.4 13.725Q38.75 15.4 36.35 15.4Q35.2 15.4 34.125 15.025Q33.05 14.65 32.3 13.8L17.15 22.2Q17.25 22.6 17.325 23.125Q17.4 23.65 17.4 24Q17.4 24.35 17.325 24.75Q17.25 25.15 17.15 25.55L32.3 34.15Q33.05 33.45 34.05 33.025Q35.05 32.6 36.35 32.6Q38.75 32.6 40.4 34.25Q42.05 35.9 42.05 38.3Q42.05 40.65 40.4 42.325Q38.75 44 36.35 44Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M15.35 41.2Q14.5 41.9 13.575 41.25Q12.65 40.6 13 39.55L16.3 28.8L7.8 22.7Q6.9 22.05 7.225 21.025Q7.55 20 8.65 20H19.2L22.55 8.8Q22.7 8.25 23.125 7.975Q23.55 7.7 24 7.7Q24.45 7.7 24.875 7.975Q25.3 8.25 25.45 8.8L28.8 20H39.35Q40.45 20 40.775 21.025Q41.1 22.05 40.2 22.7L31.7 28.8L35 39.55Q35.35 40.6 34.425 41.25Q33.5 41.9 32.65 41.2L24 34.6Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M24 31.5Q27.55 31.5 30.025 29.025Q32.5 26.55 32.5 23Q32.5 19.45 30.025 16.975Q27.55 14.5 24 14.5Q20.45 14.5 17.975 16.975Q15.5 19.45 15.5 23Q15.5 26.55 17.975 29.025Q20.45 31.5 24 31.5ZM24 28.6Q21.65 28.6 20.025 26.975Q18.4 25.35 18.4 23Q18.4 20.65 20.025 19.025Q21.65 17.4 24 17.4Q26.35 17.4 27.975 19.025Q29.6 20.65 29.6 23Q29.6 25.35 27.975 26.975Q26.35 28.6 24 28.6ZM24 38Q17.1 38 11.425 34.25Q5.75 30.5 2.65 24.35Q2.5 24.1 2.425 23.75Q2.35 23.4 2.35 23Q2.35 22.6 2.425 22.25Q2.5 21.9 2.65 21.65Q5.75 15.5 11.425 11.75Q17.1 8 24 8Q30.9 8 36.575 11.75Q42.25 15.5 45.35 21.65Q45.5 21.9 45.575 22.25Q45.65 22.6 45.65 23Q45.65 23.4 45.575 23.75Q45.5 24.1 45.35 24.35Q42.25 30.5 36.575 34.25Q30.9 38 24 38Z"
/>
</svg>
</div>
</div>
</div>
<div class="card">
<div>
<h2>Money Maker</h2>
<p>
Praesent convallis, libero quis congue elementum, nunc ante
faucibus sapien, ac scelerisque tortor purus sit amet ex.
Pellentesque mollis nec sem vel aliquam.
</p>
</div>
<div class="action-box">
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M36.35 44Q34 44 32.325 42.325Q30.65 40.65 30.65 38.3Q30.65 37.95 30.725 37.475Q30.8 37 30.95 36.6L15.8 27.8Q15.05 28.65 13.95 29.175Q12.85 29.7 11.7 29.7Q9.35 29.7 7.675 28.025Q6 26.35 6 24Q6 21.6 7.675 19.95Q9.35 18.3 11.7 18.3Q12.85 18.3 13.9 18.75Q14.95 19.2 15.8 20.05L30.95 11.35Q30.8 11 30.725 10.55Q30.65 10.1 30.65 9.7Q30.65 7.3 32.325 5.65Q34 4 36.35 4Q38.75 4 40.4 5.65Q42.05 7.3 42.05 9.7Q42.05 12.05 40.4 13.725Q38.75 15.4 36.35 15.4Q35.2 15.4 34.125 15.025Q33.05 14.65 32.3 13.8L17.15 22.2Q17.25 22.6 17.325 23.125Q17.4 23.65 17.4 24Q17.4 24.35 17.325 24.75Q17.25 25.15 17.15 25.55L32.3 34.15Q33.05 33.45 34.05 33.025Q35.05 32.6 36.35 32.6Q38.75 32.6 40.4 34.25Q42.05 35.9 42.05 38.3Q42.05 40.65 40.4 42.325Q38.75 44 36.35 44Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M15.35 41.2Q14.5 41.9 13.575 41.25Q12.65 40.6 13 39.55L16.3 28.8L7.8 22.7Q6.9 22.05 7.225 21.025Q7.55 20 8.65 20H19.2L22.55 8.8Q22.7 8.25 23.125 7.975Q23.55 7.7 24 7.7Q24.45 7.7 24.875 7.975Q25.3 8.25 25.45 8.8L28.8 20H39.35Q40.45 20 40.775 21.025Q41.1 22.05 40.2 22.7L31.7 28.8L35 39.55Q35.35 40.6 34.425 41.25Q33.5 41.9 32.65 41.2L24 34.6Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M24 31.5Q27.55 31.5 30.025 29.025Q32.5 26.55 32.5 23Q32.5 19.45 30.025 16.975Q27.55 14.5 24 14.5Q20.45 14.5 17.975 16.975Q15.5 19.45 15.5 23Q15.5 26.55 17.975 29.025Q20.45 31.5 24 31.5ZM24 28.6Q21.65 28.6 20.025 26.975Q18.4 25.35 18.4 23Q18.4 20.65 20.025 19.025Q21.65 17.4 24 17.4Q26.35 17.4 27.975 19.025Q29.6 20.65 29.6 23Q29.6 25.35 27.975 26.975Q26.35 28.6 24 28.6ZM24 38Q17.1 38 11.425 34.25Q5.75 30.5 2.65 24.35Q2.5 24.1 2.425 23.75Q2.35 23.4 2.35 23Q2.35 22.6 2.425 22.25Q2.5 21.9 2.65 21.65Q5.75 15.5 11.425 11.75Q17.1 8 24 8Q30.9 8 36.575 11.75Q42.25 15.5 45.35 21.65Q45.5 21.9 45.575 22.25Q45.65 22.6 45.65 23Q45.65 23.4 45.575 23.75Q45.5 24.1 45.35 24.35Q42.25 30.5 36.575 34.25Q30.9 38 24 38Z"
/>
</svg>
</div>
</div>
</div>
<div class="card">
<div>
<h2>Less Cool Project</h2>
<p>
Nullam condimentum ipsum ut lectus vehicula consectetur. Quisque
sed dolor tincidunt, consectetur sapien et, facilisis dolor. Duis
sem purus, dignissim ut sapien in, varius pellentesque lacus.
</p>
</div>
<div class="action-box">
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M36.35 44Q34 44 32.325 42.325Q30.65 40.65 30.65 38.3Q30.65 37.95 30.725 37.475Q30.8 37 30.95 36.6L15.8 27.8Q15.05 28.65 13.95 29.175Q12.85 29.7 11.7 29.7Q9.35 29.7 7.675 28.025Q6 26.35 6 24Q6 21.6 7.675 19.95Q9.35 18.3 11.7 18.3Q12.85 18.3 13.9 18.75Q14.95 19.2 15.8 20.05L30.95 11.35Q30.8 11 30.725 10.55Q30.65 10.1 30.65 9.7Q30.65 7.3 32.325 5.65Q34 4 36.35 4Q38.75 4 40.4 5.65Q42.05 7.3 42.05 9.7Q42.05 12.05 40.4 13.725Q38.75 15.4 36.35 15.4Q35.2 15.4 34.125 15.025Q33.05 14.65 32.3 13.8L17.15 22.2Q17.25 22.6 17.325 23.125Q17.4 23.65 17.4 24Q17.4 24.35 17.325 24.75Q17.25 25.15 17.15 25.55L32.3 34.15Q33.05 33.45 34.05 33.025Q35.05 32.6 36.35 32.6Q38.75 32.6 40.4 34.25Q42.05 35.9 42.05 38.3Q42.05 40.65 40.4 42.325Q38.75 44 36.35 44Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M15.35 41.2Q14.5 41.9 13.575 41.25Q12.65 40.6 13 39.55L16.3 28.8L7.8 22.7Q6.9 22.05 7.225 21.025Q7.55 20 8.65 20H19.2L22.55 8.8Q22.7 8.25 23.125 7.975Q23.55 7.7 24 7.7Q24.45 7.7 24.875 7.975Q25.3 8.25 25.45 8.8L28.8 20H39.35Q40.45 20 40.775 21.025Q41.1 22.05 40.2 22.7L31.7 28.8L35 39.55Q35.35 40.6 34.425 41.25Q33.5 41.9 32.65 41.2L24 34.6Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M24 31.5Q27.55 31.5 30.025 29.025Q32.5 26.55 32.5 23Q32.5 19.45 30.025 16.975Q27.55 14.5 24 14.5Q20.45 14.5 17.975 16.975Q15.5 19.45 15.5 23Q15.5 26.55 17.975 29.025Q20.45 31.5 24 31.5ZM24 28.6Q21.65 28.6 20.025 26.975Q18.4 25.35 18.4 23Q18.4 20.65 20.025 19.025Q21.65 17.4 24 17.4Q26.35 17.4 27.975 19.025Q29.6 20.65 29.6 23Q29.6 25.35 27.975 26.975Q26.35 28.6 24 28.6ZM24 38Q17.1 38 11.425 34.25Q5.75 30.5 2.65 24.35Q2.5 24.1 2.425 23.75Q2.35 23.4 2.35 23Q2.35 22.6 2.425 22.25Q2.5 21.9 2.65 21.65Q5.75 15.5 11.425 11.75Q17.1 8 24 8Q30.9 8 36.575 11.75Q42.25 15.5 45.35 21.65Q45.5 21.9 45.575 22.25Q45.65 22.6 45.65 23Q45.65 23.4 45.575 23.75Q45.5 24.1 45.35 24.35Q42.25 30.5 36.575 34.25Q30.9 38 24 38Z"
/>
</svg>
</div>
</div>
</div>
<div class="card">
<div>
<h2>Impossible App</h2>
<p>
In hac habitasse platea dictumst. Vivamus dictum rutrum arcu, a
placerat velit sagittis id.
</p>
</div>
<div class="action-box">
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M36.35 44Q34 44 32.325 42.325Q30.65 40.65 30.65 38.3Q30.65 37.95 30.725 37.475Q30.8 37 30.95 36.6L15.8 27.8Q15.05 28.65 13.95 29.175Q12.85 29.7 11.7 29.7Q9.35 29.7 7.675 28.025Q6 26.35 6 24Q6 21.6 7.675 19.95Q9.35 18.3 11.7 18.3Q12.85 18.3 13.9 18.75Q14.95 19.2 15.8 20.05L30.95 11.35Q30.8 11 30.725 10.55Q30.65 10.1 30.65 9.7Q30.65 7.3 32.325 5.65Q34 4 36.35 4Q38.75 4 40.4 5.65Q42.05 7.3 42.05 9.7Q42.05 12.05 40.4 13.725Q38.75 15.4 36.35 15.4Q35.2 15.4 34.125 15.025Q33.05 14.65 32.3 13.8L17.15 22.2Q17.25 22.6 17.325 23.125Q17.4 23.65 17.4 24Q17.4 24.35 17.325 24.75Q17.25 25.15 17.15 25.55L32.3 34.15Q33.05 33.45 34.05 33.025Q35.05 32.6 36.35 32.6Q38.75 32.6 40.4 34.25Q42.05 35.9 42.05 38.3Q42.05 40.65 40.4 42.325Q38.75 44 36.35 44Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M15.35 41.2Q14.5 41.9 13.575 41.25Q12.65 40.6 13 39.55L16.3 28.8L7.8 22.7Q6.9 22.05 7.225 21.025Q7.55 20 8.65 20H19.2L22.55 8.8Q22.7 8.25 23.125 7.975Q23.55 7.7 24 7.7Q24.45 7.7 24.875 7.975Q25.3 8.25 25.45 8.8L28.8 20H39.35Q40.45 20 40.775 21.025Q41.1 22.05 40.2 22.7L31.7 28.8L35 39.55Q35.35 40.6 34.425 41.25Q33.5 41.9 32.65 41.2L24 34.6Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M24 31.5Q27.55 31.5 30.025 29.025Q32.5 26.55 32.5 23Q32.5 19.45 30.025 16.975Q27.55 14.5 24 14.5Q20.45 14.5 17.975 16.975Q15.5 19.45 15.5 23Q15.5 26.55 17.975 29.025Q20.45 31.5 24 31.5ZM24 28.6Q21.65 28.6 20.025 26.975Q18.4 25.35 18.4 23Q18.4 20.65 20.025 19.025Q21.65 17.4 24 17.4Q26.35 17.4 27.975 19.025Q29.6 20.65 29.6 23Q29.6 25.35 27.975 26.975Q26.35 28.6 24 28.6ZM24 38Q17.1 38 11.425 34.25Q5.75 30.5 2.65 24.35Q2.5 24.1 2.425 23.75Q2.35 23.4 2.35 23Q2.35 22.6 2.425 22.25Q2.5 21.9 2.65 21.65Q5.75 15.5 11.425 11.75Q17.1 8 24 8Q30.9 8 36.575 11.75Q42.25 15.5 45.35 21.65Q45.5 21.9 45.575 22.25Q45.65 22.6 45.65 23Q45.65 23.4 45.575 23.75Q45.5 24.1 45.35 24.35Q42.25 30.5 36.575 34.25Q30.9 38 24 38Z"
/>
</svg>
</div>
</div>
</div>
<div class="card">
<div>
<h2>Easy Peasy App</h2>
<p>
Etiam cursus eros ac efficitur fringilla. Vestibulum dignissim
urna eget accumsan aliquam. Curabitur dignissim nisi in tortor
commodo, ac bibendum magna tincidunt.
</p>
</div>
<div class="action-box">
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M36.35 44Q34 44 32.325 42.325Q30.65 40.65 30.65 38.3Q30.65 37.95 30.725 37.475Q30.8 37 30.95 36.6L15.8 27.8Q15.05 28.65 13.95 29.175Q12.85 29.7 11.7 29.7Q9.35 29.7 7.675 28.025Q6 26.35 6 24Q6 21.6 7.675 19.95Q9.35 18.3 11.7 18.3Q12.85 18.3 13.9 18.75Q14.95 19.2 15.8 20.05L30.95 11.35Q30.8 11 30.725 10.55Q30.65 10.1 30.65 9.7Q30.65 7.3 32.325 5.65Q34 4 36.35 4Q38.75 4 40.4 5.65Q42.05 7.3 42.05 9.7Q42.05 12.05 40.4 13.725Q38.75 15.4 36.35 15.4Q35.2 15.4 34.125 15.025Q33.05 14.65 32.3 13.8L17.15 22.2Q17.25 22.6 17.325 23.125Q17.4 23.65 17.4 24Q17.4 24.35 17.325 24.75Q17.25 25.15 17.15 25.55L32.3 34.15Q33.05 33.45 34.05 33.025Q35.05 32.6 36.35 32.6Q38.75 32.6 40.4 34.25Q42.05 35.9 42.05 38.3Q42.05 40.65 40.4 42.325Q38.75 44 36.35 44Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M15.35 41.2Q14.5 41.9 13.575 41.25Q12.65 40.6 13 39.55L16.3 28.8L7.8 22.7Q6.9 22.05 7.225 21.025Q7.55 20 8.65 20H19.2L22.55 8.8Q22.7 8.25 23.125 7.975Q23.55 7.7 24 7.7Q24.45 7.7 24.875 7.975Q25.3 8.25 25.45 8.8L28.8 20H39.35Q40.45 20 40.775 21.025Q41.1 22.05 40.2 22.7L31.7 28.8L35 39.55Q35.35 40.6 34.425 41.25Q33.5 41.9 32.65 41.2L24 34.6Z"
/>
</svg>
</div>
<div class="action" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="currentColor"
d="M24 31.5Q27.55 31.5 30.025 29.025Q32.5 26.55 32.5 23Q32.5 19.45 30.025 16.975Q27.55 14.5 24 14.5Q20.45 14.5 17.975 16.975Q15.5 19.45 15.5 23Q15.5 26.55 17.975 29.025Q20.45 31.5 24 31.5ZM24 28.6Q21.65 28.6 20.025 26.975Q18.4 25.35 18.4 23Q18.4 20.65 20.025 19.025Q21.65 17.4 24 17.4Q26.35 17.4 27.975 19.025Q29.6 20.65 29.6 23Q29.6 25.35 27.975 26.975Q26.35 28.6 24 28.6ZM24 38Q17.1 38 11.425 34.25Q5.75 30.5 2.65 24.35Q2.5 24.1 2.425 23.75Q2.35 23.4 2.35 23Q2.35 22.6 2.425 22.25Q2.5 21.9 2.65 21.65Q5.75 15.5 11.425 11.75Q17.1 8 24 8Q30.9 8 36.575 11.75Q42.25 15.5 45.35 21.65Q45.5 21.9 45.575 22.25Q45.65 22.6 45.65 23Q45.65 23.4 45.575 23.75Q45.5 24.1 45.35 24.35Q42.25 30.5 36.575 34.25Q30.9 38 24 38Z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<script>
// add functionality to the menu button
function toggleMenu() {
document.querySelector(".sidebar").classList.toggle("toggle");
}
document.querySelector(".menu").addEventListener("click", toggleMenu);
document.querySelector(".menu").addEventListener("keyup", (e) => {
if (e.keyCode === 13) toggleMenu();
});
</script>
<a
style="
position: fixed;
bottom: 0;
right: 0;
color: black;
background-color: white;
text-decoration: none;
font-size: 16px;
font-family: sans-serif;
padding: 2px;
border: thin solid black;
text-decoration: underline;
"
href="https://tomsoerr.github.io/#/impressum"
>
Imprint
</a>
<span
style="
z-index: 1000;
position: fixed;
bottom: 0;
left: 0;
color: black;
background-color: white;
text-decoration: none;
font-size: 16px;
font-family: sans-serif;
padding: 2px;
border: thin solid black;
"
>
Not a commercial site, only for educational purposes.
</span>
</body>
</html>