-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
276 lines (245 loc) · 28.1 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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Chromalia</title>
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
<nav>
<div class="logo">
<a href="https://abhinab.me" target="_blank"><h2 class="sitename">Chromalia</h2></a>
</div>
<div class="menu">
<a href="https://abhinab.me" target="_blank" class="primary-button">Contact</a>
</div>
</nav>
<div class="hero">
<div class="hero-text">
<h1>Test Your <span class="color-effect">Colors</span><br>On a Real Website</h1>
<p class="subtitle">Choosing a color palette for your website?<br>Use the Toolbar below to realize your choices.</p>
<div class="hero-cta">
<a href="#toolbar" onclick="highlightToolbar()" class="primary-button">Get Started</a>
<a href="#how" class="secondary-button">How does it work?</a>
</div>
<div class="hero-scroll">
<svg width="23" height="33" viewBox="0 0 23 33" fill="none">
<rect x="0.767442" y="0.767442" width="20.7209" height="31.4651" rx="10.3605" stroke="var(--primary)" stroke-width="1.53488"/>
<rect x="9" y="8" width="4" height="8" rx="2" fill="var(--primary)"/>
</svg>
<p class="sub">Scroll to see more sections</p>
</div>
</div>
<div class="hero-img">
<svg xmlns="http://www.w3.org/2000/svg" width="652" height="644" viewBox="0 0 652 644" fill="none" class="mondrian">
<rect x="4.69366" y="4" width="643.306" height="636" rx="10" stroke="var(--secondary)" stroke-width="8"/>
<rect x="5" y="4" width="154.827" height="70.282" rx="10" fill="var(--secbuttn)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="411" y="4" width="202" height="67" rx="10" fill="var(--accent)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="411" y="72" width="202" height="167" rx="10" fill="var(--accent)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="411" y="405" width="202" height="84" rx="10" fill="var(--secondary)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="241" y="615" width="372" height="25" rx="10" fill="var(--secondary)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="76" y="569" width="166" height="71" rx="10" fill="var(--secondary)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="242" y="570" width="169" height="45" rx="10" fill="var(--primary)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="242" y="489" width="169" height="81" rx="10" fill="var(--secbuttn)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="242" y="404" width="169" height="85" rx="10" fill="var(--secbuttn)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="75" y="72" width="336" height="333" rx="10" fill="var(--primbuttn)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="76" y="405" width="166" height="165" rx="10" fill="var(--primary)" stroke="var(--secondary)" stroke-width="8"/>
<rect opacity="0.5" x="411" y="489" width="202" rx="10" height="126" fill="var(--accent)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="613" y="489" width="35" height="151" rx="10" fill="var(--primbuttn)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="411" y="238" width="103" height="167" rx="10" fill="var(--secondary)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="514" y="238" width="99" height="167" rx="10" fill="var(--secondary)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="613.206" y="4" width="34.7942" height="484.655" rx="10" fill="var(--secondary)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="159.827" y="4" width="250.853" height="67.1507" rx="10" fill="var(--secondary)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="5" y="72" width="71" height="167" rx="10" fill="var(--secondary)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="5" y="238" width="71" height="251" rx="10" fill="var(--secbuttn)" stroke="var(--secondary)" stroke-width="8"/>
<rect x="4.69366" y="487.261" width="71.3258" rx="10" height="152.739" fill="var(--accent)" stroke="var(--secondary)" stroke-width="8"/>
</svg>
</div>
</div>
<main>
<div class="part1" id="why">
<h2>Why Chromalia?</h2>
<div class="part1-cards">
<div class="part1-card">
<svg width="117" height="117" viewBox="0 0 117 117" fill="none" style="z-index: 5;" class="part1-card-img">
<circle cx="58.5" cy="58.5" r="58.5" fill="var(--secondary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M89.4669 8.85912L58.0465 63.9419L2.44746 41.7023C9.66585 17.5806 32.0298 0 58.5 0C69.872 0 80.4861 3.24483 89.4669 8.85912Z" fill="var(--primbuttn)" fill-opacity="0.6"/>
<path d="M81.5 22.5L57.1395 64.8489L32 53.5" stroke="var(--primary)" stroke-width="7.25581"/>
</svg>
<p class="subtitle highlight">Saves time</p>
<p>No need to spend hours implementing different variations of colors. Decide right away!</p>
<div class="part1-card-bg"></div>
</div>
<div class="part1-card">
<svg width="112" height="114" viewBox="0 0 112 114" fill="none" style="z-index: 5;" class="part1-card-img">
<rect width="58" height="58" fill="var(--secondary)"/>
<rect x="69" y="25" width="33" height="33" fill="var(--primbuttn)" fill-opacity="0.6"/>
<rect x="69" y="71" width="43" height="43" fill="var(--primary)" fill-opacity="0.2"/>
<rect x="20" y="70" width="38" height="39" fill="var(--primary)"/>
</svg>
<p class="subtitle highlight">It’s Realistic</p>
<p>Color Palettes make it hard to pick. This tool distributes the colors on a real website.</p>
<div class="part1-card-bg"></div>
</div>
<div class="part1-card">
<svg width="179" height="89" viewBox="0 0 179 89" fill="none" style="z-index: 5;" class="part1-card-img">
<rect y="26" width="154" height="63" fill="var(--primbuttn)" fill-opacity="0.6"/>
<path d="M142 15.5V0" stroke="var(--primary)" stroke-width="8"/>
<path d="M163 34L178.5 34" stroke="var(--primary)" stroke-width="8"/>
<path d="M158 19.5L170.5 7" stroke="var(--primary)" stroke-width="8"/>
<path d="M63 54L74.5 65L95.5 44" stroke="var(--primary)" stroke-width="8"/>
</svg>
<p class="subtitle highlight">It’s simple</p>
<p>Push a few buttons, and there you have it! Your very own branding colors, ready to export.</p>
<div class="part1-card-bg"></div>
</div>
</div>
</div>
<div class="part2" id="how">
<div class="part2-left">
<h2>How Does it Work?</h2>
<p>You’ll get your finalized color palette in 4 simple steps.</p>
</div>
<div class="part2-right">
<p class="one step">Start with two neutral colors for the text and the background.</p>
<p class="two step">Choose your buttons. Primary is for main CTAs, and Secondary is for less important buttons and info cards.</p>
<p class="three step">Accent color is an additional color. It appears in images, highlights, hyperlinks, boxes, cards, etc. It can be the same as your third color (primary button) or another color.</p>
<p class="four step">Happy with the results? Press on “Export” and receive a .zip file with your color palette in .png and your color codes in .txt files.</p>
</div>
</div>
<div class="part4" id="faq">
<div class="part4-heading">
<h2>FAQ</h2>
<p>Answers to some questions you might have.</p>
</div>
<div class="faq-list">
<div class="faq">
<div class="faq-q">
<h3>How many colors should I choose?</h3>
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" class="faq-icon">
<path d="M11.5 0L11.5 23" stroke="var(--accent)" stroke-width="6"/>
<path d="M23 11.5L-2.38419e-07 11.5" stroke="var(--accent)" stroke-width="6"/>
</svg>
</div>
<div class="faq-a">
<p>Normally, 3 colors are absolutely fine (meaning background, text, and one accent color).<br>However, if you want, you can have more. Usually, we don’t add more than 6 colors across a platform. It would just make things too... complicated. Plus, it makes it hard to keep the colors consistent throughout the design.</p>
</div>
</div>
<div class="faq">
<div class="faq-q">
<h3>Why does the text color change sometimes?</h3>
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" class="faq-icon">
<path d="M11.5 0L11.5 23" stroke="var(--accent)" stroke-width="6"/>
<path d="M23 11.5L-2.38419e-07 11.5" stroke="var(--accent)" stroke-width="6"/>
</svg>
</div>
<div class="faq-a">
<p>The tool is supposed to show you a realistic image of your colors of choice. However, sometimes, there might be too little contrast between the background color and the text color of some elements. In that case, the text color swaps accordingly to prevent the text from being unreadable. This is activated when the AA and AAA color contrast check doesn’t pass. Keep in mind: The text color will only swap between the background and text colors you’ve chosen to try and pass the contrast check. It won’t select any color outside of your choices.</p>
</div>
</div>
<div class="faq">
<div class="faq-q">
<h3>What will I receive after exporting my colors?</h3>
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" class="faq-icon">
<path d="M11.5 0L11.5 23" stroke="var(--accent)" stroke-width="6"/>
<path d="M23 11.5L-2.38419e-07 11.5" stroke="var(--accent)" stroke-width="6"/>
</svg>
</div>
<div class="faq-a">
<p>After exporting, you will receive a .zip file. This file is compressed, so you will have to extract it.<br>After extracting it, you will see a .png file and a .txt file. The .png image shows your color palette in squares next to each other. The .txt file includes the color codes in HEX and RGB. You can send these files to designers or developers, or just use them in your project.</p>
</div>
</div>
<div class="faq">
<div class="faq-q">
<h3>Why do some colors have some transparency?</h3>
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" class="faq-icon">
<path d="M11.5 0L11.5 23" stroke="var(--accent)" stroke-width="6"/>
<path d="M23 11.5L-2.38419e-07 11.5" stroke="var(--accent)" stroke-width="6"/>
</svg>
</div>
<div class="faq-a">
<p>This website allows you to choose only opaque colors. However, to make the design more appealing, I’ve make some parts more transparent by adding a bit of opacity to them. Of course, you can use these colors however you want in your own projects.</p>
</div>
</div>
</div>
</div>
<div class="part5" id="end">
<h1>Your <span class="color-effect">Journey</span> Shouldn't End Here.</h1>
<p class="subtitle">Follow me on social media to stay tuned on more projects.</p>
<a href="https://abhinab.me" target="_blank" class="primary-button">Stay Tuned</a>
</div>
<div class="footer" id="footer">
<div class="logo">
<a href="https://abhinab.me" target="_blank"><h2 class="sitename reversed">Chromalia</h2></a>
</div>
<div class="footer-cols">
<div class="footer-col">
<p style="margin: 0;">Test your color choices live on a website.</p>
</div>
<div class="footer-col">
<a href="https://twitter.com/TheCrazyChauhan" class="menu-item reversed" target="_blank">Twitter</a>
<a href="https://codepen.io/godzillian" target="_blank" class="menu-item reversed">CodePen</a>
<a href="https://www.youtube.com/@heisenbergs_being" target="_blank" class="menu-item reversed">YouTube</a>
<a href="https://github.com/GeneralChauhan" target="_blank" class="menu-item reversed">GitHub</a>
</div>
</div>
<p class="sub">Made with <3 by @godzillian </p>
</div>
<div class="toolbar" id="toolbar">
<div class="option prim rollout">
<input type="color" id="prim" name="prim" class="colorpicker" value="#000000" data-coloris>
<label for="prim">Text</label>
</div>
<div class="option sec rollout">
<input type="color" id="sec" name="sec" class="colorpicker" value="#ffffff" data-coloris>
<label for="sec">Background</label>
</div>
<div class="option primbuttn rollout">
<input type="color" id="primbuttn" name="primbuttn" class="colorpicker" value="#4685FF" data-coloris>
<label for="primbuttn">Primary Button</label>
</div>
<div class="option secbuttn rollout">
<input type="color" id="secbuttn" name="secbuttn" class="colorpicker" value="#F2F2F2" data-coloris>
<label for="secbuttn">Secondary Button</label>
</div>
<div class="option accent rollout">
<input type="color" id="accent" name="accent" class="colorpicker" value="#FFB084" data-coloris>
<label for="accent">Accent</label>
</div>
<div class="option export rollout" id="export">
<div>Export</div>
<svg width="29" height="27" viewBox="0 0 29 27" fill="none">
<path d="M14.7564 16.0728V9.59255C14.7564 9.39812 14.6786 9.22199 14.5505 9.09619C14.4224 8.96809 14.2463 8.89032 14.0541 8.89032C13.8597 8.89032 13.6836 8.96809 13.5578 9.09619C13.4297 9.22428 13.3519 9.39812 13.3519 9.59255V16.0728L10.854 13.8929C10.7099 13.7671 10.5269 13.7099 10.3485 13.719C10.1678 13.7305 9.99398 13.8083 9.8636 13.9524C9.7355 14.0965 9.67832 14.2795 9.68747 14.4579C9.69891 14.6363 9.77668 14.8101 9.92078 14.9382L13.5898 18.1406C13.7247 18.2596 13.894 18.3167 14.061 18.3167C14.228 18.3167 14.395 18.2527 14.5231 18.1337L18.1898 14.9314C18.3293 14.8033 18.4071 14.6317 18.4185 14.4556C18.4299 14.2772 18.3705 14.0965 18.2424 13.9524L18.2378 13.9478C18.1097 13.806 17.9359 13.7305 17.7597 13.719H17.7575C17.579 13.7099 17.396 13.7671 17.2519 13.8952L14.7564 16.0728Z" fill="var(--static2)"/>
<rect x="3.17556" y="3.17513" width="21.591" height="20.3209" rx="3.17514" stroke="var(--static2)" stroke-width="1.27006"/>
</svg>
</div>
<div class="option randomize rollout" id="randomize">
<div>Randomize</div>
<svg width="27" height="29" viewBox="0 0 27 29" fill="none">
<mask id="path-1-outside-1_100_1631" maskUnits="userSpaceOnUse" x="0" y="0" width="27" height="29" fill="var(--static2)">
<rect fill="white" width="27" height="29"/>
<path d="M13.4821 2C13.1083 2 12.7346 2.08375 12.4451 2.25124L3.20198 7.59792C2.62289 7.93291 2.62289 8.46261 3.20198 8.7976L12.4451 14.1443C13.0242 14.4793 13.9399 14.4793 14.5189 14.1443L23.762 8.7976C24.3411 8.46267 24.3411 7.93291 23.762 7.59798L14.5189 2.2513C14.2294 2.08369 13.8557 2 13.4821 2ZM6.38342 6.99875C6.38346 6.99875 6.3835 6.99875 6.38354 6.99875C6.8666 7.01133 7.32418 7.13085 7.66606 7.33373C8.02865 7.5489 8.23234 7.84072 8.23233 8.145C8.23232 8.44928 8.02859 8.74109 7.66598 8.95624C7.30337 9.17139 6.81157 9.29226 6.29878 9.29225C5.78598 9.29224 5.29419 9.17136 4.9316 8.9562C4.65612 8.79272 4.4703 8.58368 4.39849 8.35646C4.32668 8.12924 4.37222 7.89445 4.52916 7.68285C4.68609 7.47126 4.9471 7.29273 5.27797 7.17067C5.60884 7.04861 5.99413 6.9887 6.38336 6.99881L6.38342 6.99875ZM13.5382 7.01358C13.918 7.01692 14.2879 7.0866 14.6014 7.21391C14.915 7.34123 15.1583 7.52054 15.3012 7.72944C15.444 7.93835 15.4799 8.16759 15.4045 8.38855C15.329 8.6095 15.1455 8.81236 14.8769 8.97181C14.698 9.07996 14.4848 9.16601 14.2495 9.22498C14.0142 9.28395 13.7615 9.31468 13.5061 9.31538C13.2507 9.31608 12.9976 9.28675 12.7614 9.22908C12.5252 9.17141 12.3106 9.08654 12.13 8.97938C11.9494 8.87221 11.8063 8.74487 11.7091 8.60472C11.6119 8.46457 11.5625 8.31438 11.5637 8.16282C11.5649 8.01127 11.6166 7.86135 11.716 7.72174C11.8154 7.58212 11.9604 7.45558 12.1427 7.34941C12.3256 7.2409 12.5433 7.15526 12.783 7.09758C13.0227 7.03989 13.2794 7.01133 13.538 7.01358H13.5382ZM20.779 7.01448C20.779 7.01448 20.7791 7.01448 20.7791 7.01448C21.2622 7.02704 21.7197 7.14654 22.0616 7.34941C22.4216 7.5649 22.623 7.85621 22.6219 8.15961C22.6207 8.46301 22.4171 8.75379 22.0555 8.96832C21.6939 9.18285 21.2039 9.30365 20.6925 9.30431C20.1812 9.30496 19.6903 9.18541 19.3272 8.97181C19.0517 8.80833 18.8659 8.59928 18.7941 8.37207C18.7223 8.14486 18.7679 7.91008 18.9248 7.6985C19.0818 7.48692 19.3428 7.3084 19.6736 7.18634C20.0045 7.06429 20.3898 7.00438 20.779 7.01448ZM2.58477 9.81042C2.23666 9.80104 2 10.0728 2 10.5535V20.0957C2 20.7645 2.45806 21.5578 3.03715 21.8923L11.9279 27.0264C12.507 27.3608 12.9651 27.0964 12.9651 26.4277V16.8853C12.9651 16.2165 12.507 15.4233 11.9279 15.0888L3.03715 9.95474C2.87437 9.86064 2.72098 9.81393 2.58477 9.8103V9.81042ZM24.4152 9.81054C24.2791 9.81417 24.1258 9.86076 23.963 9.95486L15.0719 15.089C14.4928 15.4234 14.0348 16.2168 14.0348 16.8855V26.428C14.0348 27.0966 14.4928 27.3609 15.0719 27.0264L23.963 21.8925C24.5421 21.5581 25 20.7648 25 20.0961V10.5536C25 10.073 24.7634 9.80134 24.4152 9.81066V9.81054ZM10.1865 15.0502C10.3936 15.0359 10.6289 15.1009 10.8685 15.2387C11.1081 15.3764 11.3437 15.5821 11.5513 15.835C11.7589 16.0878 11.9312 16.3788 12.0509 16.6786C12.1706 16.9783 12.2333 17.2763 12.2328 17.5422C12.233 17.7412 12.198 17.9178 12.1296 18.0621C12.0613 18.2064 11.9611 18.3155 11.8346 18.3832C11.7082 18.4508 11.558 18.4757 11.3927 18.4564C11.2274 18.4371 11.0503 18.374 10.8713 18.2707C10.6924 18.1674 10.5152 18.026 10.3499 17.8544C10.1846 17.6828 10.0345 17.4846 9.90805 17.2709C9.7816 17.0572 9.68135 16.8324 9.61303 16.6092C9.54471 16.386 9.50965 16.1689 9.50986 15.9702C9.50937 15.7047 9.57162 15.48 9.69038 15.3185C9.80913 15.1571 9.98022 15.0645 10.1865 15.0502ZM20.2023 16.7848C20.2024 16.7848 20.2024 16.7848 20.2024 16.7848C20.4087 16.7992 20.5797 16.8917 20.6985 17.0532C20.8172 17.2146 20.8794 17.4393 20.879 17.7048C20.8785 18.1059 20.7349 18.5731 20.4796 19.0038C20.2243 19.4345 19.8783 19.7934 19.5175 20.0017C19.1567 20.21 18.8106 20.2507 18.5553 20.1148C18.3001 19.9789 18.1564 19.6775 18.156 19.2768C18.1555 19.0108 18.2182 18.7129 18.3379 18.4132C18.4576 18.1134 18.6299 17.8224 18.8375 17.5696C19.0452 17.3167 19.2807 17.111 19.5203 16.9732C19.76 16.8355 19.9952 16.7705 20.2023 16.7848ZM3.40934 18.5626C3.61646 18.5483 3.85172 18.6132 4.09136 18.751C4.331 18.8888 4.56653 19.0945 4.77414 19.3474C4.98176 19.6002 5.15411 19.8912 5.27378 20.191C5.39345 20.4908 5.45619 20.7887 5.45568 21.0547C5.45589 21.2536 5.42083 21.4303 5.3525 21.5746C5.28417 21.7189 5.18392 21.8279 5.05747 21.8956C4.93102 21.9633 4.78086 21.9882 4.61557 21.9689C4.45028 21.9496 4.27311 21.8865 4.09418 21.7832C3.91525 21.6799 3.73808 21.5384 3.57279 21.3668C3.4075 21.1953 3.25734 20.997 3.1309 20.7833C3.00446 20.5697 2.90421 20.3448 2.83588 20.1216C2.76756 19.8984 2.7325 19.6813 2.73272 19.4826C2.73221 19.2171 2.79446 18.9924 2.91322 18.8309C3.03197 18.6695 3.20307 18.5769 3.40934 18.5626Z"/>
</mask>
<path d="M13.4821 2C13.1083 2 12.7346 2.08375 12.4451 2.25124L3.20198 7.59792C2.62289 7.93291 2.62289 8.46261 3.20198 8.7976L12.4451 14.1443C13.0242 14.4793 13.9399 14.4793 14.5189 14.1443L23.762 8.7976C24.3411 8.46267 24.3411 7.93291 23.762 7.59798L14.5189 2.2513C14.2294 2.08369 13.8557 2 13.4821 2ZM6.38342 6.99875C6.38346 6.99875 6.3835 6.99875 6.38354 6.99875C6.8666 7.01133 7.32418 7.13085 7.66606 7.33373C8.02865 7.5489 8.23234 7.84072 8.23233 8.145C8.23232 8.44928 8.02859 8.74109 7.66598 8.95624C7.30337 9.17139 6.81157 9.29226 6.29878 9.29225C5.78598 9.29224 5.29419 9.17136 4.9316 8.9562C4.65612 8.79272 4.4703 8.58368 4.39849 8.35646C4.32668 8.12924 4.37222 7.89445 4.52916 7.68285C4.68609 7.47126 4.9471 7.29273 5.27797 7.17067C5.60884 7.04861 5.99413 6.9887 6.38336 6.99881L6.38342 6.99875ZM13.5382 7.01358C13.918 7.01692 14.2879 7.0866 14.6014 7.21391C14.915 7.34123 15.1583 7.52054 15.3012 7.72944C15.444 7.93835 15.4799 8.16759 15.4045 8.38855C15.329 8.6095 15.1455 8.81236 14.8769 8.97181C14.698 9.07996 14.4848 9.16601 14.2495 9.22498C14.0142 9.28395 13.7615 9.31468 13.5061 9.31538C13.2507 9.31608 12.9976 9.28675 12.7614 9.22908C12.5252 9.17141 12.3106 9.08654 12.13 8.97938C11.9494 8.87221 11.8063 8.74487 11.7091 8.60472C11.6119 8.46457 11.5625 8.31438 11.5637 8.16282C11.5649 8.01127 11.6166 7.86135 11.716 7.72174C11.8154 7.58212 11.9604 7.45558 12.1427 7.34941C12.3256 7.2409 12.5433 7.15526 12.783 7.09758C13.0227 7.03989 13.2794 7.01133 13.538 7.01358H13.5382ZM20.779 7.01448C20.779 7.01448 20.7791 7.01448 20.7791 7.01448C21.2622 7.02704 21.7197 7.14654 22.0616 7.34941C22.4216 7.5649 22.623 7.85621 22.6219 8.15961C22.6207 8.46301 22.4171 8.75379 22.0555 8.96832C21.6939 9.18285 21.2039 9.30365 20.6925 9.30431C20.1812 9.30496 19.6903 9.18541 19.3272 8.97181C19.0517 8.80833 18.8659 8.59928 18.7941 8.37207C18.7223 8.14486 18.7679 7.91008 18.9248 7.6985C19.0818 7.48692 19.3428 7.3084 19.6736 7.18634C20.0045 7.06429 20.3898 7.00438 20.779 7.01448ZM2.58477 9.81042C2.23666 9.80104 2 10.0728 2 10.5535V20.0957C2 20.7645 2.45806 21.5578 3.03715 21.8923L11.9279 27.0264C12.507 27.3608 12.9651 27.0964 12.9651 26.4277V16.8853C12.9651 16.2165 12.507 15.4233 11.9279 15.0888L3.03715 9.95474C2.87437 9.86064 2.72098 9.81393 2.58477 9.8103V9.81042ZM24.4152 9.81054C24.2791 9.81417 24.1258 9.86076 23.963 9.95486L15.0719 15.089C14.4928 15.4234 14.0348 16.2168 14.0348 16.8855V26.428C14.0348 27.0966 14.4928 27.3609 15.0719 27.0264L23.963 21.8925C24.5421 21.5581 25 20.7648 25 20.0961V10.5536C25 10.073 24.7634 9.80134 24.4152 9.81066V9.81054ZM10.1865 15.0502C10.3936 15.0359 10.6289 15.1009 10.8685 15.2387C11.1081 15.3764 11.3437 15.5821 11.5513 15.835C11.7589 16.0878 11.9312 16.3788 12.0509 16.6786C12.1706 16.9783 12.2333 17.2763 12.2328 17.5422C12.233 17.7412 12.198 17.9178 12.1296 18.0621C12.0613 18.2064 11.9611 18.3155 11.8346 18.3832C11.7082 18.4508 11.558 18.4757 11.3927 18.4564C11.2274 18.4371 11.0503 18.374 10.8713 18.2707C10.6924 18.1674 10.5152 18.026 10.3499 17.8544C10.1846 17.6828 10.0345 17.4846 9.90805 17.2709C9.7816 17.0572 9.68135 16.8324 9.61303 16.6092C9.54471 16.386 9.50965 16.1689 9.50986 15.9702C9.50937 15.7047 9.57162 15.48 9.69038 15.3185C9.80913 15.1571 9.98022 15.0645 10.1865 15.0502ZM20.2023 16.7848C20.2024 16.7848 20.2024 16.7848 20.2024 16.7848C20.4087 16.7992 20.5797 16.8917 20.6985 17.0532C20.8172 17.2146 20.8794 17.4393 20.879 17.7048C20.8785 18.1059 20.7349 18.5731 20.4796 19.0038C20.2243 19.4345 19.8783 19.7934 19.5175 20.0017C19.1567 20.21 18.8106 20.2507 18.5553 20.1148C18.3001 19.9789 18.1564 19.6775 18.156 19.2768C18.1555 19.0108 18.2182 18.7129 18.3379 18.4132C18.4576 18.1134 18.6299 17.8224 18.8375 17.5696C19.0452 17.3167 19.2807 17.111 19.5203 16.9732C19.76 16.8355 19.9952 16.7705 20.2023 16.7848ZM3.40934 18.5626C3.61646 18.5483 3.85172 18.6132 4.09136 18.751C4.331 18.8888 4.56653 19.0945 4.77414 19.3474C4.98176 19.6002 5.15411 19.8912 5.27378 20.191C5.39345 20.4908 5.45619 20.7887 5.45568 21.0547C5.45589 21.2536 5.42083 21.4303 5.3525 21.5746C5.28417 21.7189 5.18392 21.8279 5.05747 21.8956C4.93102 21.9633 4.78086 21.9882 4.61557 21.9689C4.45028 21.9496 4.27311 21.8865 4.09418 21.7832C3.91525 21.6799 3.73808 21.5384 3.57279 21.3668C3.4075 21.1953 3.25734 20.997 3.1309 20.7833C3.00446 20.5697 2.90421 20.3448 2.83588 20.1216C2.76756 19.8984 2.7325 19.6813 2.73272 19.4826C2.73221 19.2171 2.79446 18.9924 2.91322 18.8309C3.03197 18.6695 3.20307 18.5769 3.40934 18.5626Z" stroke="var(--static2)" stroke-width="2.42105" mask="url(#path-1-outside-1_100_1631)"/>
</svg>
</div>
<div class="option rolloutbutton" id="rolloutbutton">
<svg width="34" height="34" viewBox="0 0 34 34" fill="none">
<path d="M11.5032 20.8392L16.9999 15.3425L22.4965 20.8392C23.049 21.3917 23.9415 21.3917 24.494 20.8392C25.0465 20.2867 25.0465 19.3942 24.494 18.8417L17.9915 12.3392C17.439 11.7867 16.5465 11.7867 15.994 12.3392L9.49152 18.8417C8.93902 19.3942 8.93902 20.2867 9.49152 20.8392C10.044 21.3775 10.9507 21.3917 11.5032 20.8392Z" fill="var(--static2)"/>
</svg>
</div>
</div>
<div id="tip-bar">
<button id="close-btn">×</button>
<p><b>Tip:</b> Press the Spacebar to randomize faster!</p>
</div>
</main>
<a href="https://www.youtube.com/watch?v=HAlIWRcldoc" target="_blank" class="youtube">Watch on YouTube</a>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>