-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (113 loc) · 14.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>🤩15 Puzzle🤩</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #555;
margin: 0;
}
#container {
width: 100%;
height: 700px;
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 225px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 225px;
perspective: 800px;
perspective-origin: 50% 225px;
}
#info {
color: white;
position: absolute;
top: 2.5%;
width: 100%;
text-align: center;
}
#logosvg {
/* filter: drop-shadow(2px 2px 2px red); */
}
.button {
width: 75px;
-webkit-appearance: none;
border-radius: .25rem;
color: #212529;
background-color: #f8f9fa;
border-color: #f8f9fa;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
}
#sound-off {
display: none;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {}
@media (min-aspect-ratio: 16/9) and (max-width: 812px) {
#info {
top: 15%;
text-align: center;
width: 100px;
right: 10%;
}
#logosvg {
width: 100px;
padding-bottom: 5px;
}
}
</style>
<script src="./index.js" defer></script>
</head>
<body>
<div id="info">
<div id="name">
<svg id="logosvg" fill="yellow" width="155.542" height="37.012" viewBox="0 0 155.542 37.012" xmlns="http://www.w3.org/2000/svg">
<g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none">
<path fill="yellow" d="M 78.589 2.686 L 90.015 3.125 A 162.552 162.552 0 0 0 88.879 10.828 Q 88.403 14.697 88.403 18.604 Q 88.403 18.921 88.425 19.475 A 60.334 60.334 0 0 0 88.44 19.836 A 30.546 30.546 0 0 0 88.491 20.696 Q 88.525 21.157 88.574 21.667 A 27.917 27.917 0 0 0 88.832 23.61 A 30.453 30.453 0 0 0 88.855 23.743 Q 89.038 24.805 89.355 25.684 A 6.284 6.284 0 0 0 89.647 26.369 Q 89.819 26.712 90.02 26.988 A 3.563 3.563 0 0 0 90.125 27.124 A 1.741 1.741 0 0 0 90.454 27.444 A 1.217 1.217 0 0 0 91.187 27.686 A 1.464 1.464 0 0 0 92.09 27.369 A 2.272 2.272 0 0 0 92.456 27.014 Q 92.918 26.462 93.288 25.606 A 9.281 9.281 0 0 0 93.445 25.22 A 15.285 15.285 0 0 0 93.842 24.021 Q 94.03 23.37 94.189 22.632 A 40.41 40.41 0 0 0 94.67 19.975 A 44.668 44.668 0 0 0 94.727 19.58 A 60.056 60.056 0 0 0 95.081 16.406 A 151.248 151.248 0 0 0 95.203 14.874 A 120.691 120.691 0 0 0 95.3 13.452 Q 95.374 12.277 95.402 11.337 A 43.808 43.808 0 0 0 95.41 11.035 Q 95.434 9.995 95.435 9.482 A 21.23 21.23 0 0 0 95.435 9.473 A 117.742 117.742 0 0 0 95.374 5.676 A 115.849 115.849 0 0 0 95.19 1.904 L 106.616 1.904 A 78.88 78.88 0 0 1 106.909 8.74 A 44.317 44.317 0 0 1 106.866 10.638 A 58.709 58.709 0 0 1 106.738 12.72 A 50.191 50.191 0 0 1 106.316 16.347 A 56.289 56.289 0 0 1 106.177 17.212 Q 105.786 19.531 105.164 21.912 Q 104.541 24.292 103.613 26.489 A 26.987 26.987 0 0 1 101.453 30.603 A 16.349 16.349 0 0 1 98.929 33.664 A 15.177 15.177 0 0 1 98.621 33.948 Q 97.021 35.376 95.044 36.194 A 10.81 10.81 0 0 1 91.974 36.947 A 13.271 13.271 0 0 1 90.649 37.012 A 14.804 14.804 0 0 1 88.314 36.836 Q 86.904 36.611 85.73 36.096 A 11.168 11.168 0 0 1 82.559 34.031 A 10.581 10.581 0 0 1 82.153 33.63 A 13.037 13.037 0 0 1 79.772 30.146 A 14.626 14.626 0 0 1 79.712 30.017 Q 78.76 27.954 78.223 25.647 A 33.43 33.43 0 0 1 77.478 20.935 A 55.563 55.563 0 0 1 77.283 17.431 A 49.066 49.066 0 0 1 77.271 16.309 A 68.293 68.293 0 0 1 77.612 9.485 A 80.906 80.906 0 0 1 78.589 2.686 Z M 20.776 33.447 L 21.704 23.73 A 17.983 17.983 0 0 0 23.274 24.502 A 20.152 20.152 0 0 0 23.584 24.634 Q 24.585 25.049 25.647 25.342 A 19.421 19.421 0 0 0 27.795 25.806 A 13.786 13.786 0 0 0 29.618 25.973 A 12.463 12.463 0 0 0 29.907 25.977 Q 30.327 25.977 30.873 25.925 A 17.798 17.798 0 0 0 31.396 25.867 A 7.29 7.29 0 0 0 33.081 25.452 A 4.512 4.512 0 0 0 33.998 24.984 A 3.897 3.897 0 0 0 34.46 24.622 A 1.739 1.739 0 0 0 35.027 23.428 A 2.391 2.391 0 0 0 35.034 23.242 A 2.408 2.408 0 0 0 34.914 22.47 A 2.109 2.109 0 0 0 34.583 21.851 A 3.419 3.419 0 0 0 33.671 21.035 A 4.093 4.093 0 0 0 33.411 20.886 A 6.561 6.561 0 0 0 32.439 20.475 A 8.053 8.053 0 0 0 31.787 20.288 A 17.446 17.446 0 0 0 29.968 19.946 A 18.178 18.178 0 0 0 28.862 19.832 A 15.15 15.15 0 0 0 28.235 19.8 A 73.219 73.219 0 0 0 27.843 19.789 Q 27.32 19.776 26.934 19.775 A 24.633 24.633 0 0 0 26.88 19.775 Q 25.781 19.775 24.646 19.873 Q 23.511 19.971 22.437 20.264 L 23.413 0.537 L 43.188 0 L 43.726 10.205 L 31.47 9.521 L 31.226 13.867 Q 32.324 13.599 33.423 13.464 Q 34.521 13.33 35.62 13.33 A 12.086 12.086 0 0 1 38.656 13.702 A 10.853 10.853 0 0 1 39.758 14.05 A 9.918 9.918 0 0 1 43.103 16.113 A 9.619 9.619 0 0 1 45.349 19.348 A 9.97 9.97 0 0 1 46.095 22.232 A 12.372 12.372 0 0 1 46.167 23.584 A 14.959 14.959 0 0 1 45.934 26.29 A 10.968 10.968 0 0 1 45.032 29.102 A 10.918 10.918 0 0 1 41.943 32.983 A 12.783 12.783 0 0 1 38.474 34.91 A 15.226 15.226 0 0 1 37.354 35.278 A 19.785 19.785 0 0 1 32.919 36.004 A 22.982 22.982 0 0 1 31.714 36.035 A 19.176 19.176 0 0 1 28.882 35.828 A 26.068 26.068 0 0 1 26.135 35.266 A 35.131 35.131 0 0 1 23.45 34.448 A 63.359 63.359 0 0 1 20.776 33.447 Z M 130.762 0.293 L 131.201 9.082 L 120.02 24.17 L 130.811 24.17 L 130.664 34.521 L 108.887 35.4 L 107.91 25.83 L 120.654 9.229 L 108.984 10.107 L 108.887 0.293 L 130.762 0.293 Z M 155.103 0.293 L 155.542 9.082 L 144.36 24.17 L 155.151 24.17 L 155.005 34.521 L 133.228 35.4 L 132.251 25.83 L 144.995 9.229 L 133.325 10.107 L 133.228 0.293 L 155.103 0.293 Z M 59.375 24.854 L 59.375 36.23 L 47.998 36.23 A 2527.213 2527.213 0 0 1 48.022 25.098 A 2629.62 2629.62 0 0 1 48.096 13.916 A 242.282 242.282 0 0 0 48.128 9.945 A 242.26 242.26 0 0 0 48.12 7.959 A 103.951 103.951 0 0 1 48.117 7.107 A 106.627 106.627 0 0 1 48.242 1.953 A 45.329 45.329 0 0 1 54.492 0.562 Q 57.617 0.098 60.938 0.098 Q 62.817 0.098 64.697 0.403 A 18.19 18.19 0 0 1 68.298 1.367 Q 70.02 2.026 71.497 3.015 A 11.006 11.006 0 0 1 74.048 5.371 A 10.866 10.866 0 0 1 75.655 8.24 A 12.29 12.29 0 0 1 75.745 8.484 A 10.594 10.594 0 0 1 76.276 10.801 A 13.592 13.592 0 0 1 76.367 12.402 Q 76.367 14.771 75.659 16.602 A 10.397 10.397 0 0 1 74.127 19.316 A 9.686 9.686 0 0 1 73.718 19.8 A 11.704 11.704 0 0 1 70.825 22.119 A 18.053 18.053 0 0 1 67.273 23.669 Q 65.381 24.268 63.354 24.548 Q 61.328 24.829 59.375 24.854 Z M 7.959 0.293 L 19.043 0.781 L 17.627 35.498 L 6.982 35.01 L 7.568 11.914 L 3.662 14.6 L 0 6.25 L 7.959 0.293 Z M 59.961 10.156 L 59.668 17.285 A 4.793 4.793 0 0 0 60.187 17.332 A 4.233 4.233 0 0 0 60.327 17.334 L 60.986 17.334 A 4.994 4.994 0 0 0 62.683 17.041 A 4.534 4.534 0 0 0 64.136 16.199 Q 64.771 15.649 65.149 14.905 A 3.506 3.506 0 0 0 65.509 13.63 A 4.276 4.276 0 0 0 65.527 13.232 A 4.2 4.2 0 0 0 65.408 12.203 A 2.886 2.886 0 0 0 64.563 10.754 A 3.3 3.3 0 0 0 62.837 9.926 A 4.61 4.61 0 0 0 62.061 9.863 A 6.752 6.752 0 0 0 61.203 9.92 A 7.651 7.651 0 0 0 60.999 9.949 A 12.192 12.192 0 0 0 60.24 10.09 A 10.5 10.5 0 0 0 59.961 10.156 Z" vector-effect="non-scaling-stroke" /> </g>
</svg>
</div>
<div id="buttons">
<button id="original" class="button">
<svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M12.7929 2.29289C13.1834 1.90237 13.8166 1.90237 14.2071 2.29289L17.2071 5.29289C17.5976 5.68342 17.5976 6.31658 17.2071 6.70711L14.2071 9.70711C13.8166 10.0976 13.1834 10.0976 12.7929 9.70711C12.4024 9.31658 12.4024 8.68342 12.7929 8.29289L14.0858 7H12.5C8.95228 7 6 9.95228 6 13.5C6 17.0477 8.95228 20 12.5 20C16.0477 20 19 17.0477 19 13.5C19 12.9477 19.4477 12.5 20 12.5C20.5523 12.5 21 12.9477 21 13.5C21 18.1523 17.1523 22 12.5 22C7.84772 22 4 18.1523 4 13.5C4 8.84772 7.84772 5 12.5 5H14.0858L12.7929 3.70711C12.4024 3.31658 12.4024 2.68342 12.7929 2.29289Z" fill="#282828">
</path>
</svg>
<br> FLIP </button>
<button id="change" class="button">
<svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M14.2929 2.29289C14.6834 1.90237 15.3166 1.90237 15.7071 2.29289L19.7071 6.29289C20.0976 6.68342 20.0976 7.31658 19.7071 7.70711L15.7071 11.7071C15.3166 12.0976 14.6834 12.0976 14.2929 11.7071C13.9024 11.3166 13.9024 10.6834 14.2929 10.2929L16.5858 8L5 8C4.44772 8 4 7.55228 4 7C4 6.44771 4.44772 6 5 6L16.5858 6L14.2929 3.70711C13.9024 3.31658 13.9024 2.68342 14.2929 2.29289ZM9.70711 12.2929C10.0976 12.6834 10.0976 13.3166 9.70711 13.7071L7.41421 16H19C19.5523 16 20 16.4477 20 17C20 17.5523 19.5523 18 19 18H7.41421L9.70711 20.2929C10.0976 20.6834 10.0976 21.3166 9.70711 21.7071C9.31658 22.0976 8.68342 22.0976 8.29289 21.7071L4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17C4 16.7348 4.10536 16.4804 4.29289 16.2929L8.29289 12.2929C8.68342 11.9024 9.31658 11.9024 9.70711 12.2929Z" fill="#282828">
</path>
</svg>
<br> CHANGE </button>
<button id="random" class="button">
<svg fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M3 5C3 3.89543 3.89543 3 5 3H9C10.1046 3 11 3.89543 11 5V9C11 10.1046 10.1046 11 9 11H5C3.89543 11 3 10.1046 3 9V5ZM9 5H5V9H9V5ZM13 5C13 3.89543 13.8954 3 15 3H19C20.1046 3 21 3.89543 21 5V9C21 10.1046 20.1046 11 19 11H15C13.8954 11 13 10.1046 13 9V5ZM19 5H15V9H19V5ZM3 15C3 13.8954 3.89543 13 5 13H9C10.1046 13 11 13.8954 11 15V19C11 20.1046 10.1046 21 9 21H5C3.89543 21 3 20.1046 3 19V15ZM9 15H5V19H9V15ZM13 15C13 13.8954 13.8954 13 15 13H19C20.1046 13 21 13.8954 21 15V19C21 20.1046 20.1046 21 19 21H15C13.8954 21 13 20.1046 13 19V15ZM19 15H15V19H19V15Z" fill="#282828">
</path>
</svg>
<br> SHUFFLE </button>
<button id="sound" class="button">
<svg id="sound-on" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path fill="red" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M13.4179 2.0915C13.7727 2.25469 14 2.60948 14 3.00001V21C14 21.3905 13.7727 21.7453 13.4179 21.9085C13.0631 22.0717 12.6457 22.0134 12.3492 21.7593L5.63008 16H3C2.44772 16 2 15.5523 2 15V9.00001C2 8.44773 2.44772 8.00001 3 8.00001H5.63008L12.3492 2.24076C12.6457 1.9866 13.0631 1.92832 13.4179 2.0915ZM12 5.17423L6.65079 9.75927C6.46955 9.91462 6.23871 10 6 10H4V14H6C6.23871 14 6.46955 14.0854 6.65079 14.2408L12 18.8258V5.17423ZM17.2929 5.29291C17.6834 4.90238 18.3166 4.90238 18.7071 5.29291L18.7078 5.29362L18.7086 5.29438L18.7102 5.29605L18.7141 5.29996L18.724 5.31008C18.7315 5.31784 18.7409 5.32765 18.752 5.33951C18.7742 5.36322 18.8034 5.39513 18.8385 5.43526C18.9087 5.51549 19.0028 5.62871 19.1125 5.77501C19.3318 6.06748 19.6147 6.49329 19.8944 7.0528C20.4556 8.17509 21 9.82725 21 12C21 14.1728 20.4556 15.8249 19.8944 16.9472C19.6147 17.5067 19.3318 17.9326 19.1125 18.225C19.0028 18.3713 18.9087 18.4845 18.8385 18.5648C18.8034 18.6049 18.7742 18.6368 18.752 18.6605C18.7409 18.6724 18.7315 18.6822 18.724 18.69L18.7141 18.7001L18.7102 18.704L18.7086 18.7056L18.7078 18.7064L18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071C16.904 18.3183 16.9024 17.6889 17.2879 17.2979L17.2929 17.2926C17.3 17.2851 17.3138 17.2701 17.3334 17.2478C17.3725 17.203 17.4347 17.1287 17.5125 17.025C17.6682 16.8175 17.8853 16.4933 18.1056 16.0528C18.5444 15.1751 19 13.8272 19 12C19 10.1728 18.5444 8.82494 18.1056 7.94723C17.8853 7.50674 17.6682 7.18255 17.5125 6.97501C17.4347 6.87131 17.3725 6.79704 17.3334 6.75227C17.3138 6.72989 17.3 6.71493 17.2929 6.70739L17.2879 6.70208C16.9024 6.31117 16.904 5.68176 17.2929 5.29291ZM15.2929 8.29291C15.6834 7.90238 16.3166 7.90238 16.7071 8.29291L16.7085 8.29434L16.7101 8.29587L16.7134 8.29923L16.7211 8.30715L16.7408 8.32779C16.7557 8.34369 16.7741 8.36388 16.7955 8.38838C16.8384 8.43736 16.8934 8.50371 16.9563 8.58751C17.0818 8.75498 17.2397 8.99329 17.3944 9.3028C17.7056 9.92509 18 10.8272 18 12C18 13.1728 17.7056 14.0749 17.3944 14.6972C17.2397 15.0067 17.0818 15.2451 16.9563 15.4125C16.8934 15.4963 16.8384 15.5627 16.7955 15.6116C16.7741 15.6361 16.7557 15.6563 16.7408 15.6722L16.7211 15.6929L16.7134 15.7008L16.7101 15.7042L16.7085 15.7057L16.7078 15.7064C16.3173 16.0969 15.6834 16.0976 15.2929 15.7071C14.9057 15.32 14.9024 14.6943 15.2829 14.303C15.2843 14.3015 15.2868 14.2987 15.2904 14.2946C15.3022 14.2811 15.3253 14.2537 15.3562 14.2125C15.4182 14.13 15.5103 13.9933 15.6056 13.8028C15.7944 13.4251 16 12.8272 16 12C16 11.1728 15.7944 10.5749 15.6056 10.1972C15.5103 10.0067 15.4182 9.87005 15.3562 9.78751C15.3253 9.74631 15.3022 9.71892 15.2904 9.70539C15.2868 9.70132 15.2843 9.69852 15.2829 9.69701C14.9024 9.30574 14.9057 8.68008 15.2929 8.29291Z" fill="#282828">
</path>
</svg>
<svg id="sound-off" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path fill="pink" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M13.4179 2.0915C13.7727 2.25469 14 2.60948 14 3.00001V21C14 21.3905 13.7727 21.7453 13.4179 21.9085C13.0631 22.0717 12.6457 22.0134 12.3492 21.7593L5.63008 16H3C2.44772 16 2 15.5523 2 15V9.00001C2 8.44773 2.44772 8.00001 3 8.00001H5.63008L12.3492 2.24076C12.6457 1.9866 13.0631 1.92832 13.4179 2.0915ZM12 5.17423L6.65079 9.75927C6.46955 9.91462 6.23871 10 6 10H4V14H6C6.23871 14 6.46955 14.0854 6.65079 14.2408L12 18.8258V5.17423ZM16.2929 9.29291C16.6834 8.90238 17.3166 8.90238 17.7071 9.29291L19 10.5858L20.2929 9.29291C20.6834 8.90238 21.3166 8.90238 21.7071 9.29291C22.0976 9.68343 22.0976 10.3166 21.7071 10.7071L20.4142 12L21.7071 13.2929C22.0976 13.6834 22.0976 14.3166 21.7071 14.7071C21.3166 15.0976 20.6834 15.0976 20.2929 14.7071L19 13.4142L17.7071 14.7071C17.3166 15.0976 16.6834 15.0976 16.2929 14.7071C15.9024 14.3166 15.9024 13.6834 16.2929 13.2929L17.5858 12L16.2929 10.7071C15.9024 10.3166 15.9024 9.68343 16.2929 9.29291Z" fill="#282828">
</path>
</svg>
<br> SOUND </button>
<!-- <button id="solve">SOLVE</button> -->
</div>
</div>
</body>
</html>