-
Notifications
You must be signed in to change notification settings - Fork 49
/
Copy pathindex.html
232 lines (205 loc) · 12.2 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=0.75" />
<title>Twizzle ᴬᴸᴾᴴᴬ</title>
<link rel="icon" href="./favicon.ico" />
<meta property="og:image" content="https://alpha.twizzle.net/twizzle-social-media-image.png" />
<style>
html {
min-height: 100%;
}
html,
body {
box-sizing: border-box;
display: grid;
place-content: center;
margin: 0;
}
body {
padding: 2em;
height: 100%;
}
code {
font-size: 1.25em;
}
h2 {
margin-top: 0;
}
section {
font-family: Helvetica, sans-serif;
font-size: 1.5rem;
background: rgba(0, 128, 255, 0.1);
box-sizing: border-box;
width: 100%;
max-width: 50em;
background: white;
padding: 1.5em;
box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.4);
border-radius: 1em;
padding-top: 0.5em;
}
.header {
width: 100%;
display: grid;
align-items: center;
}
#twizzle-logo {
display: grid;
place-content: center;
height: 10em;
}
#twizzle-logo svg {
height: 8em;
}
</style>
<link rel="stylesheet" href="./twizzle-logo.css" />
</head>
<body>
<section>
<div class="header">
<div id="twizzle-logo">
<svg viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Twizzle</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path class="primary-color"
d="M109.915968,80.6051719 C113.921855,80.6051719 117.087173,81.830168 119.412018,84.2801969 C121.736863,86.7302258 122.899268,90.3336814 122.899268,95.0906719 C122.899268,95.4393986 122.889209,95.8132696 122.86909,96.2122913 L122.845618,96.6196969 C122.809851,97.174083 122.774085,97.6658697 122.738318,98.0950719 L104.604618,98.0950719 C104.783452,99.7403468 105.552428,101.045817 106.911568,102.011522 C108.270708,102.977227 110.09479,103.460072 112.383868,103.460072 C113.850309,103.460072 115.289903,103.325948 116.702693,103.057697 C118.115483,102.789446 119.268947,102.458607 120.163118,102.065172 L121.236118,108.556822 C120.806916,108.771423 120.234655,108.986021 119.519318,109.200622 C118.803981,109.415223 118.008181,109.602996 117.131893,109.763947 C116.255605,109.924898 115.31674,110.059021 114.315268,110.166322 C113.313796,110.273622 112.31234,110.327272 111.310868,110.327272 C108.771422,110.327272 106.562852,109.951726 104.685093,109.200622 C102.807334,108.449518 101.251499,107.421237 100.017543,106.115747 C98.7835867,104.810257 97.8715459,103.263364 97.2813929,101.475022 C96.69124,99.6866796 96.3961679,97.7552989 96.3961679,95.6808219 C96.3961679,93.1771427 96.7806557,90.9864563 97.5496429,89.1086969 C98.3186301,87.2309375 99.3290283,85.6661615 100.580868,84.4143219 C101.832708,83.1624823 103.272301,82.2146751 104.899693,81.5708719 C106.527084,80.9270687 108.199159,80.6051719 109.915968,80.6051719 Z M45.9557679,81.3562719 L45.9557679,86.7212719 L43.3537429,89.6183719 L43.3537429,89.6183719 L42.3989906,90.6913733 C41.5869424,91.6110863 40.7338391,92.5946643 39.8396679,93.6421219 C38.5878283,95.1085625 37.3270659,96.6465138 36.0573429,98.2560219 C34.7876199,99.8655299 33.6341564,101.421364 32.5969179,102.923572 L46.2240179,102.923572 L46.2240179,109.576172 L22.8862679,109.576172 L22.8862679,104.854972 C23.6373717,103.567365 24.540471,102.181421 25.5955929,100.697097 C26.6507149,99.2127728 27.7594704,97.7195294 28.9218929,96.2173219 C30.0843154,94.7151144 31.2377789,93.2576373 32.3823179,91.8448469 L33.223954,90.8104056 C34.0488225,89.8011154 34.8233893,88.8672762 35.5476679,88.0088719 L23.5300679,88.0088719 L23.5300679,81.3562719 L45.9557679,81.3562719 Z M73.5707679,81.3562719 L73.5707679,86.7212719 L70.9687429,89.6183719 L70.9687429,89.6183719 L70.0139906,90.6913733 C69.2019424,91.6110863 68.3488391,92.5946643 67.4546679,93.6421219 C66.2028283,95.1085625 64.9420659,96.6465138 63.6723429,98.2560219 C62.4026199,99.8655299 61.2491564,101.421364 60.2119179,102.923572 L73.8390179,102.923572 L73.8390179,109.576172 L50.5012679,109.576172 L50.5012679,104.854972 C51.2523717,103.567365 52.155471,102.181421 53.2105929,100.697097 C54.2657149,99.2127728 55.3744704,97.7195294 56.5368929,96.2173219 C57.6993154,94.7151144 58.8527789,93.2576373 59.9973179,91.8448469 L60.838954,90.8104056 C61.6638225,89.8011154 62.4383893,88.8672762 63.1626679,88.0088719 L51.1450679,88.0088719 L51.1450679,81.3562719 L73.5707679,81.3562719 Z M110.023268,87.2041219 C109.129097,87.2041219 108.360121,87.3561287 107.716318,87.6601469 C107.072515,87.9641651 106.53602,88.366536 106.106818,88.8672719 C105.677616,89.3680077 105.346777,89.9492102 105.114293,90.6108969 C104.881808,91.2725835 104.711918,91.9432018 104.604618,92.6227719 L115.173668,92.6227719 C115.137901,91.9432018 115.021661,91.2815251 114.824943,90.6377219 C114.628225,89.9939187 114.324212,89.4216577 113.912893,88.9209219 C113.501574,88.420186 112.982963,88.0088735 112.357043,87.6869719 C111.731123,87.3650703 110.953206,87.2041219 110.023268,87.2041219 Z"
id="Shape" fill="#4285F4"></path>
<path class="secondary-color"
d="M87.9872679,75.0005219 L87.9878679,98.6852219 C87.9878679,99.4005588 88.0415174,100.044352 88.1488179,100.616622 C88.2561185,101.188891 88.4617747,101.671737 88.7657929,102.065172 C89.0698111,102.458607 89.5079484,102.780504 90.0802179,103.030872 C90.6524874,103.28124 91.4214631,103.442188 92.3871679,103.513722 L91.2605179,110.112672 C88.935673,110.076905 87.0490002,109.826541 85.6004429,109.361572 C84.1518857,108.896603 83.0073638,108.243868 82.1668429,107.403347 C81.326322,106.562826 80.7540611,105.543486 80.4500429,104.345297 C80.1460247,103.147108 79.9940179,101.796929 79.9940179,100.294722 L79.9932679,75.0005219 L87.9872679,75.0005219 Z"
id="Path" fill="#0A703E"></path>
<g id="Twi" transform="translate(4.777544, 16.981126)" fill-rule="nonzero">
<path class="primary-color"
d="M30.7951,3.91645 L30.7951,11.0519 L19.58225,11.0519 L19.58225,41.0959 L11.21285,41.0959 L11.21285,11.0519 L0,11.0519 L0,3.91645 L30.7951,3.91645 Z M49.54785,24.8936 C48.8325131,27.6118803 48.072479,30.3122366 47.267725,32.99475 C46.462971,35.6772634 45.6135211,38.3776197 44.71935,41.0959 L38.49595,41.0959 C37.9106743,39.7302568 37.2810683,38.1281608 36.6071161,36.2895716 L36.4036,35.7309 C35.7463842,33.9157326 35.0686394,31.9568252 34.3703498,29.8541324 L34.069825,28.944175 C33.265071,26.4941461 32.4424459,23.9010887 31.601925,21.164925 C30.7614041,18.4287613 29.9477206,15.6658139 29.16085,12.876 L37.5839,12.876 L38.522775,17.087525 C38.86256,18.6076159 39.2202231,20.172392 39.595775,21.7819 C39.9713269,23.391408 40.3647563,25.0098335 40.776075,26.637225 C41.1873937,28.2646165 41.6076479,29.8293925 42.03685,31.3316 C42.501819,29.7578588 42.9578394,28.1483749 43.404925,26.5031 C43.8520106,24.8578251 44.2812063,23.2393996 44.692525,21.647775 L45.4135808,18.8408079 C45.5695231,18.2299146 45.7226042,17.6276046 45.872825,17.033875 C46.2483769,15.5495509 46.5792152,14.1636064 46.86535,12.876 L52.65955,12.876 L52.9576058,14.1963873 C53.1125944,14.8729722 53.2765243,15.574145 53.4493967,16.2999111 L54.2883637,19.7635857 C54.440014,20.383063 54.5945259,21.0111252 54.7519,21.647775 C55.1453353,23.2393996 55.5566479,24.8578251 55.98585,26.5031 C56.4150521,28.1483749 56.862131,29.7578588 57.3271,31.3316 C57.7563021,29.8293925 58.1854979,28.2646165 58.6147,26.637225 C59.0439021,25.0098335 59.4462731,23.391408 59.821825,21.7819 L60.3717376,19.4011811 C60.461154,19.0099841 60.5494527,18.6215815 60.6366339,18.2359724 L61.8337,12.876 L61.8337,12.876 L70.14945,12.876 C69.3625794,15.6658139 68.5488959,18.4287613 67.708375,21.164925 L66.9923106,23.4751635 C66.3992415,25.37116 65.8152993,27.1941543 65.240475,28.944175 C64.435721,31.3942039 63.6488622,33.656423 62.879875,35.7309 L62.4666358,36.8340536 C61.8560895,38.4462155 61.2874481,39.8668211 60.7607,41.0959 L54.5373,41.0959 C53.6431289,38.3776197 52.7668543,35.6772634 51.90845,32.99475 C51.0500457,30.3122366 50.2631869,27.6118803 49.54785,24.8936 Z"
id="Tw" fill="#4285F4"></path>
<path class="secondary-color"
d="M83.9664,4.7212 C83.9664,6.18764067 83.4924964,7.34110413 82.544675,8.181625 C81.5968536,9.02214587 80.4791564,9.4424 79.19155,9.4424 C77.9039436,9.4424 76.7862464,9.02214587 75.838425,8.181625 C74.8906036,7.34110413 74.4167,6.18764067 74.4167,4.7212 C74.4167,3.25475933 74.8906036,2.10129587 75.838425,1.260775 C76.7862464,0.420254131 77.9039436,1.42108547e-14 79.19155,1.42108547e-14 C80.4791564,1.42108547e-14 81.5968536,0.420254131 82.544675,1.260775 C83.4924964,2.10129587 83.9664,3.25475933 83.9664,4.7212 Z"
id="i" fill="#0A703E"></path>
</g>
<polygon class="secondary-color" fill="#0A703E" fill-rule="nonzero"
points="87.9928441 60.7757324 79.9989941 60.7757324 79.9989941 29.8571264 87.9928441 29.8571264">
</polygon>
<rect class="secondary-color" fill="#0A703E"
transform="translate(63.838184, 68.000000) rotate(90.000000) translate(-63.838184, -68.000000) "
x="59.8381838" y="8.93891585" width="8" height="118.122168"></rect>
</g>
</svg>
</div>
</div>
<style>
.center {
text-align: center;
}
</style>
<div class="center">Welcome to the alpha version of Twizzle!</div>
<br />
<hr />
<br />
<style>
.cards {
display: grid;
grid-template-columns: repeat(2, calc(min(40%, 20em)));
place-content: center;
gap: 5%;
}
.card {
display: grid;
width: 100%;
overflow: hidden;
/* border: 1px solid rgba(0, 0, 0, 0.5); */
}
.card>img,
.card>.card-label {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.card img {
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
.card-label {
padding: 0.25em;
display: grid;
place-content: center;
font-size: calc(min(2em, 5vw));
}
.card-label span {
padding: 0.5em;
}
a.card:focus img,
a.card:hover img {
opacity: 0.3;
filter: blur(0.1em);
}
.card-label span {
display: none;
}
a.card:focus,
a.card:hover {
text-decoration: underline;
}
a.card:focus .card-label span,
a.card:hover .card-label span {
display: grid;
}
.card .explanation {
padding: 0.5em;
}
a.card {
text-decoration: none;
color: black;
}
@media (max-width: 600px) {
.cards {
grid-template-columns: 80%;
gap: 2em;
}
}
</style>
<div class="cards">
<a href="./edit/" class="card">
<img src="./edit.png" />
<div class="card-label"><span>✍️ Edit</span></div>
<div class="explanation">
<b>Edit</b> algs or solves for WCA puzzles and other speedsolving
puzzles.
</div>
</a>
<a href="./explore/" class="card">
<img src="./explore.png" />
<div class="card-label"><span>🔭 Explore</span></div>
<div class="explanation">
<b>Explore</b> and play with a wide variety of puzzles, or create
your own.
</div>
</a>
</div>
<br />
<hr />
<br />
<div class="center">What is Twizzle?</div>
<br />
<center>
<iframe style="width: calc(min(80%, 20em)); aspect-ratio: 16 / 9"
src="https://www.youtube.com/embed/videoseries?list=PLFh3NgpDbzN4VkcfjEZSQ_TYQv_OEjbjF"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</center>
<br />
<hr />
<br />
<div class="center">
🧪 Everything here is experimental. Expect things to change!
</div>
<br />
<div class="center">
💬 If you have feedback or run into issues, please let us know
<a href="https://github.com/cubing/cubing.js/issues/">on GitHub</a>!
</div>
</section>
</body>
</html>