forked from isqua/flagwall
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (106 loc) · 5.19 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flagwall</title>
</head>
<body>
<main class="landing">
<header class="hero">
<h1 class="hero-title">Showcase your journey</h1>
<p>Pick the countries you’ve visited and seamlessly create your personalized wallpaper.</p>
<p>Download your customized wallpapers and share them with friends and family to showcase your unique travel achievements.</p>
</header>
<div class="demo">
<svg class="demo-pic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1419 2796" width="320">
<image xlink:href="./background.png" x="100" y="100" width="1219" height="2596" clip-path="url(#clip)" />
<image xlink:href="./phone.png" x="0" y="0" width="1419" height="2796"/>
<text x="709" y="800" text-anchor="middle" fill="#fff" font-size="360" font-family="inherit" font-weight="bold">
09:41
</text>
<defs>
<rect id="rect" x="100" y="100" width="1219" height="2596" rx="120" ry="120" />
<clipPath id="clip">
<use xlink:href="#rect"/>
</clipPath>
</defs>
</svg>
</div>
<button type="button" class="start to-app">Start crafting</button>
</main>
<div class="app">
<button type="button" aria-controls="sidebar" aria-expanded="false" aria-label="Open settings" aria-haspopup="true" class="sidebar-control">
<div class="burger">
<span class="burger-line"></span>
<span class="burger-line"></span>
<span class="burger-line"></span>
</div>
</button>
<aside id="sidebar" class="sidebar hidden">
<div role="tablist" class="sidebar-tablist">
<button class="sidebar-tab" id="countries-tab" type="button" role="tab" aria-selected="true" aria-controls="countries">
<svg class="sidebar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
</svg>
</button>
<button class="sidebar-tab" id="theme-tab" type="button" role="tab" aria-selected="false" aria-controls="theme" tabindex="-1">
<svg class="sidebar-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
</svg>
</button>
</div>
<form action="#" class="sidebar-content form">
<div id="countries" role="tabpanel" tabindex="0" aria-labelledby="countries-tab" class="sidebar-tabpanel">
<ul class="countries-list">
</ul>
</div>
<div id="theme" role="tabpanel" tabindex="0" aria-labelledby="theme-tab" class="sidebar-tabpanel sidebar-tabpanel-hidden">
<ul class="colors-list">
</ul>
</div>
</form>
</aside>
<div class="workbench">
<canvas class="canvas"></canvas>
<div class="device">
<img alt="flag wall" class="device-screen" />
</div>
</div>
<footer class="footer">
<div class="footer-inner">
<p>Get $3 off your first travel eSIM</p>
<p>Use code <b>ALEXEY2076</b> when you sign up or apply it at checkout. <a href="https://ref.airalo.com/Qjg3">https://ref.airalo.com/Qjg3</a></p>
</div>
</footer>
</div>
<template id="country">
<li class="country-item">
<input
type="checkbox"
name="country"
class="country-checkbox"
/>
<label class="country-label">
<img class="country-flag" src="" width="24px" height="18px" />
<span class="country-name"></span>
</label>
</li>
</template>
<template id="color">
<li class="color-item">
<input
type="radio"
name="background"
class="color-radio"
/>
<label class="color-label">
<span class="color-flag"></span>
<span class="color-name"></span>
</label>
</li>
</template>
<script type="module" src="/src/main.ts"></script>
</body>
</html>