forked from jweisbeck/Crossword
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
159 lines (157 loc) · 10.8 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
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8" />
<title>Квиз — День рождения Доки</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta property="og:title" content="🎂Доке 2 года!" />
<meta
property="og:description"
content="Разгадывайте кроссворд по фронтенду и забирайте подарки."
/>
<meta
property="og:image"
content="https://birthday.doka.guide/2023/images/share-img.png"
/>
<meta property="og:url" content="https://birthday.doka.guide/2023/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:image"
content="https://birthday.doka.guide/2023/images/share-img.png"
/>
<meta name="theme-color" content="#C56FFF" />
<link rel="icon" href="https://doka.guide/favicon.ico" />
<link
rel="icon"
href="https://doka.guide/images/icons/icon.svg"
type="image/svg+xml"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.crossword.js"></script>
<script src="js/script.js"></script>
<link
rel="preload"
href="./fonts/spot-mono-light.woff2"
as="font"
type="font/woff2"
crossorigin=""
/>
<link rel="stylesheet" href="./styles/pallete.css" />
<link rel="stylesheet" href="./styles/style.css" />
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(95307792, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/95307792" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</head>
<body>
<header class="header">
<a href="https://doka.guide/" class="logo">
<span class="logo__icon">
<svg
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 112 40"
>
<rect
x=".5"
y=".5"
width="111"
height="39"
rx="19.5"
stroke="currentColor"
/>
<path
d="M23.674 30.5c-4.605 0-6.854-2.963-6.854-7.819V10.33c0-.785.428-1.213 1.07-1.213.643 0 1.108.428 1.108 1.213v12.352c0 4.106 1.785 5.784 4.676 5.784 2.963 0 4.748-1.678 4.748-5.784V10.33c0-.785.429-1.213 1.071-1.213.643 0 1.107.428 1.107 1.213v12.352c0 4.856-2.249 7.819-6.926 7.819Zm15.73-.107c-4.605 0-8.14-3.356-8.14-7.997s3.535-7.997 8.14-7.997 8.14 3.356 8.14 7.997c0 4.64-3.535 7.997-8.14 7.997Zm0-1.928c2.927 0 5.534-2.07 5.998-5.105-.536.642-1.321 1.107-2.606 1.107-2.035 0-5.391-2.178-7.105-2.178-1.32 0-2.213 1.142-2.035 2.035.536 2.57 3.106 4.14 5.748 4.14Zm3.677-5.962c1.321 0 2.25-1.107 2.07-2.035-.499-2.535-3.14-4.141-5.747-4.141-2.963 0-5.57 2.106-5.998 5.14.5-.642 1.286-1.142 2.57-1.142 2.036 0 5.392 2.178 7.105 2.178Zm6.983 8.425c-.892 0-1.678-.25-1.678-1.07 0-.5.393-.965.964-.965.215 0 .607.072.857.072 1.143 0 2.5-1.5 3.249-2.57-1.535-1.643-3.213-3.75-3.213-6.07 0-2.677 2.035-4.57 4.855-4.57 2.82 0 4.855 1.893 4.855 4.57 0 2.32-1.678 4.427-3.213 6.07.75 1.07 2.107 2.57 3.249 2.57.25 0 .643-.072.857-.072a.96.96 0 0 1 .964.964c0 .821-.786 1.071-1.678 1.071-2.428 0-3.856-1.5-5.034-3.106-1.178 1.607-2.606 3.106-5.034 3.106Zm20.728-.535c-4.605 0-8.14-3.356-8.14-7.997s3.535-7.997 8.14-7.997 8.14 3.356 8.14 7.997c0 4.64-3.535 7.997-8.14 7.997Zm0-1.928c2.928 0 5.534-2.07 5.998-5.105-.536.642-1.321 1.107-2.606 1.107-2.035 0-5.391-2.178-7.105-2.178-1.32 0-2.213 1.142-2.034 2.035.535 2.57 3.105 4.14 5.747 4.14Zm3.677-5.962c1.321 0 2.25-1.107 2.07-2.035-.499-2.535-3.14-4.141-5.747-4.141-2.963 0-5.569 2.106-5.997 5.14.5-.642 1.285-1.142 2.57-1.142 2.035 0 5.39 2.178 7.104 2.178ZM86.451 30.5c-4.606 0-6.855-2.963-6.855-7.819V10.33c0-.785.428-1.213 1.071-1.213s1.107.428 1.107 1.213v12.352c0 4.106 1.785 5.784 4.677 5.784 2.963 0 4.748-1.678 4.748-5.784V10.33c0-.785.428-1.213 1.07-1.213.643 0 1.107.428 1.107 1.213v12.352c0 4.856-2.249 7.819-6.925 7.819Z"
fill="currentColor"
/>
</svg>
</span>
Дока
</a>
<nav>
<a href="./gifts.html" class="nav__item">Подарки</a
><a href="./about.html" class="nav__item">Где я?</a>
</nav>
<div class="colorpicker">
<button
style="--bg-color: #c56fff"
class="color__button"
value="#C56FFF"
>
<span class="visually-hidden">Сменить цвет</span>
</button>
<div class="visually-hidden">
<label for="currentColor">Выбранный цвет:</label>
<output id="currentColor"> </output>
</div>
</div>
</header>
<div class="main-wrapper">
<svg class="icon years" viewBox="0 0 222 190">
<use href="./images/2-years.svg#2-years"></use>
</svg>
<main>
<div id="puzzle-wrapper"></div>
</main>
</div>
</div>
<footer class="footer">
<ul class="socials">
<li>
<a href="https://www.youtube.com/@doka-guide">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 14" width="19" height="14" style="mix-blend-mode:difference">
<path fill="currentColor" fill-rule="evenodd" d="M18.6031 2.43813c-.2185-.81747-.8623-1.461255-1.6797-1.679702C15.4415.361328 9.5.361328 9.5.361328s-5.94146 0-7.42335.3971C1.25933.976875.615442 1.62066.396942 2.43813 3.1e-7 3.91987 0 7.01143 0 7.01143s3.1e-7 3.09147.396942 4.57307c.2185.8175.862388 1.4614 1.679708 1.6799 1.48189.3969 7.42335.3969 7.42335.3969s5.9415 0 7.4234-.3969c.8174-.2185 1.4612-.8624 1.6797-1.6799C19 10.1029 19 7.01143 19 7.01143s0-3.09156-.3969-4.5733ZM7.59989 9.86149V4.16138l4.93631 2.85005-4.93631 2.85006Z" clip-rule="evenodd"/>
</svg>
<span class="visually-hidden">YouTube</span>
</a>
</li>
<li>
<a href="https://t.me/doka_guide">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 17" width="18" height="17" style="mix-blend-mode:difference">
<path fill="currentColor" d="M14.2812 15.5523c.2041.0182.4076-.0416.5695-.1673s.2702-.308.3031-.5103l2.8438-13.60292c.0081-.08767-.0043-.17604-.0364-.25804-.0321-.081997-.0829-.155355-.1484-.214212-.114-.108125-.2639-.170288-.4209-.174528-.0548 0-5.7115 2.09091-16.970301 6.27274-.127057.04053-.237183.12187-.31329.23139-.0761071.10952-.11394078.2411-.10763026.37432.00716485.12439.05384586.24324.13324626.33926.0794.09602.187376.16419.308207.19459L4.54867 9.31033 6.20155 14.269c.04319.1351.13029.2519.24747.3319.11718.08.25772.1185.39931.1095.07663-.0002.15243-.0158.22295-.0458.07052-.0299.13434-.0737.1877-.1287l2.33046-2.2175 4.19896 3.0799c.1463.0971.3172.1505.4928.154Zm-7.50473-2.505L5.53424 8.94074C11.5024 5.14219 14.507 3.24292 14.5481 3.24292c.154 0 .2361 0 .2361.16426.0035.02039.0035.04121 0 .0616 0 0-2.5768 2.36126-7.72028 6.98112l-.28745 2.5974Z"/>
</svg>
<span class="visually-hidden">Telegram</span>
</a>
</li>
<li>
<a href="https://twitter.com/doka_guide">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 16" width="19" height="16" style="mix-blend-mode:difference">
<path fill="currentColor" fill-rule="evenodd" d="M6.1475 15.4241c6.7969 0 10.5134-5.63216 10.5134-10.51341 0-.1609 0-.32185-.0077-.4751.7203-.52105 1.3487-1.1724 1.8468-1.9157-.659.2912-1.3717.49045-2.1226.5824.7663-.4598 1.3486-1.1801 1.6245-2.046-.7126.42145-1.5019.728-2.3448.89655-.6744-.7203-1.6322-1.164754-2.6973-1.164754-2.0384 0-3.6935 1.655204-3.6935 3.693504 0 .2912.03065.5747.0996.8429-3.0728-.15325-5.7931-1.6245-7.61685-3.86205-.3142.54405-.4981 1.18005-.4981 1.8544 0 1.2797.65135 2.4138 1.6475 3.0728-.60535-.01535-1.1724-.1839-1.6705-.4598v.046c0 1.7931 1.27205 3.2797 2.96555 3.6245-.3065.0843-.636.1303-.9732.1303-.23755 0-.4674-.023-.6973-.069.46745 1.47126 1.8314 2.53636 3.44825 2.56706-1.26435.9885-2.8582 1.5785-4.59 1.5785-.29885 0-.59005-.0153-.88125-.0536 1.61685 1.0575 3.5632 1.6705 5.6475 1.6705Z" clip-rule="evenodd"/>
</svg>
<span class="visually-hidden">Twitter</span>
</a>
</li>
<li>
<a href="https://discord.gg/NjaevcW8k8">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16" width="20" height="16" style="mix-blend-mode:difference">
<path fill="currentColor" d="M6.85916 7.48759c.9489 0 1.7175.71082 1.70011 1.57961 0 .86878-.74963 1.5796-1.70011 1.5796-.93307 0-1.70168-.71082-1.70168-1.5796 0-.86879.75121-1.57961 1.70168-1.57961Zm6.08554 0c.9505 0 1.7017.71082 1.7017 1.57961 0 .86878-.7512 1.5796-1.7017 1.5796-.933 0-1.7001-.71082-1.7001-1.5796 0-.86879.7497-1.57961 1.7001-1.57961Zm1.5768 7.44471c3.5947-.1153 4.9785-2.5211 4.9785-2.5211 0-5.34063-2.3438-9.67034-2.3438-9.67034-2.3406-1.789696-4.5705-1.74073-4.5705-1.74073l-.2277.26538c2.766.86246 4.0502 2.1072 4.0502 2.1072-1.5102-.84985-3.1746-1.39111-4.8963-1.59225-1.0921-.1232-2.19521-.11259-3.28475.03159-.09805 0-.18029.01738-.27676.03317-.56933.05055-1.95314.26538-3.69277 1.0457-.60097.28118-.95997.48179-.95997.48179s1.3506-1.31108 4.27793-2.17355l-.1629-.19903S5.18437.951164 2.84218 2.74244c0 0-2.34218 4.32813-2.34218 9.66876 0 0 1.36641 2.4042 4.96113 2.5211 0 0 .60096-.7456 1.09123-1.3758-2.06701-.6319-2.84668-1.9588-2.84668-1.9588s.16131.1169.45388.2828c.01582.0158.03163.0332.06484.049.04903.0347.09806.0505.14708.0837.40645.2322.81289.4138 1.18612.5639.66739.2654 1.46446.5307 2.39279.714 1.39063.2722 2.82041.2776 4.21311.0158.8111-.1446 1.6025-.3837 2.358-.7124.5693-.2164 1.2035-.5324 1.8709-.9794 0 0-.8129 1.3601-2.9448 1.9745.4887.6303 1.0755 1.3427 1.0755 1.3427h-.0016Z"/>
</svg>
<span class="visually-hidden">Discord</span>
</a>
</li>
</ul>
</footer>
<svg class="icon hmm" viewBox="0 0 428 353">
<use href="./images/hmm.svg#hmm"></use>
</svg>
<svg class="icon blob" viewBox="0 0 256 171">
<use href="./images/blob.svg#blob"></use>
</svg>
<svg class="icon ufo" viewBox="0 0 420 233">
<use href="./images/ufo.svg#ufo"></use>
</svg>
<script src="./js/color-picking.js"></script>
</body>
</html>