-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (138 loc) · 13.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Website</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="description">
<h2 class="ui-level">Level 01</h2>
<p class="ui-message">Reach to the finish to proceed</p>
<button class="next-retry-button">Retry</button>
</div>
<div class="game">
<svg
class="level-one"
width="1092"
height="496"
viewBox="0 0 1092 496"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="path-1-outside-1_15:8"
maskUnits="userSpaceOnUse"
x="21.75"
y="14"
width="1070"
height="482"
fill="black"
>
<!-- border we target -->
<rect
class="maze-border"
fill="white"
x="21.75"
y="14"
width="1070"
height="482"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1080.25 25H977.75V157.793L585.321 157.5L585.308 175H585.25V252.594V392.5L125.25 392.5V42.5H32.75V485H77.75H125.25H585.25L660.25 485L677.75 485V252.663L1002.71 252.906L1002.71 252.5H1080.25V25Z"
/>
</mask>
<!-- maze fill -->
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1080.25 25H977.75V157.793L585.321 157.5L585.308 175H585.25V252.594V392.5L125.25 392.5V42.5H32.75V485H77.75H125.25H585.25L660.25 485L677.75 485V252.663L1002.71 252.906L1002.71 252.5H1080.25V25Z"
fill="black"
/>
<!-- targeted maze border -->
<path
class="maze-border"
d="M977.75 25V14H966.75V25H977.75ZM1080.25 25H1091.25V14H1080.25V25ZM977.75 157.793L977.742 168.793L988.75 168.802V157.793H977.75ZM585.321 157.5L585.329 146.5L574.329 146.492L574.321 157.492L585.321 157.5ZM585.308 175V186H596.3L596.308 175.008L585.308 175ZM585.25 175V164H574.25V175H585.25ZM585.25 392.5L585.25 403.5L596.25 403.5V392.5H585.25ZM125.25 392.5H114.25V403.5L125.25 403.5L125.25 392.5ZM125.25 42.5H136.25V31.5H125.25V42.5ZM32.75 42.5V31.5H21.75V42.5H32.75ZM32.75 485H21.75V496H32.75V485ZM585.25 485L585.25 474H585.25V485ZM660.25 485L660.25 496L660.25 496L660.25 485ZM677.75 485L677.75 496L688.75 496V485H677.75ZM677.75 252.663L677.758 241.663L666.75 241.655V252.663H677.75ZM1002.71 252.906L1002.71 263.906L1013.71 263.915L1013.71 252.915L1002.71 252.906ZM1002.71 252.5V241.5H991.722L991.714 252.492L1002.71 252.5ZM1080.25 252.5V263.5H1091.25V252.5H1080.25ZM977.75 36H1080.25V14H977.75V36ZM988.75 157.793V25H966.75V157.793H988.75ZM977.758 146.793L585.329 146.5L585.313 168.5L977.742 168.793L977.758 146.793ZM574.321 157.492L574.308 174.992L596.308 175.008L596.321 157.508L574.321 157.492ZM585.308 164H585.25V186H585.308V164ZM574.25 175V252.594H596.25V175H574.25ZM574.25 252.594V392.5H596.25V252.594H574.25ZM585.25 381.5L125.25 381.5L125.25 403.5L585.25 403.5L585.25 381.5ZM136.25 392.5V42.5H114.25V392.5H136.25ZM125.25 31.5H32.75V53.5H125.25V31.5ZM21.75 42.5V485H43.75V42.5H21.75ZM32.75 496H77.75V474H32.75V496ZM77.75 496H125.25V474H77.75V496ZM125.25 496H585.25V474H125.25V496ZM585.25 496L660.25 496L660.25 474L585.25 474L585.25 496ZM660.25 496L677.75 496L677.75 474L660.25 474L660.25 496ZM688.75 485V252.663H666.75V485H688.75ZM677.742 263.663L1002.71 263.906L1002.72 241.906L677.758 241.663L677.742 263.663ZM1013.71 252.915L1013.71 252.508L991.714 252.492L991.713 252.898L1013.71 252.915ZM1080.25 241.5H1002.71V263.5H1080.25V241.5ZM1069.25 25V252.5H1091.25V25H1069.25Z"
fill="#59739A"
mask="url(#path-1-outside-1_15:8)"
/>
<rect width="155" height="150" fill="black" />
<rect
class="finish"
x="977"
y="25"
width="103"
height="73"
fill="#CB576C"
/>
<path
d="M995.8 70H998.536V62.704H1004.06V60.472H998.536V55.552H1005.62V53.32H995.8V70ZM1008.15 70H1010.89V56.776H1008.15V70ZM1009.54 55.024C1010.5 55.024 1011.27 54.256 1011.27 53.272C1011.27 52.288 1010.5 51.52 1009.54 51.52C1008.56 51.52 1007.79 52.288 1007.79 53.272C1007.79 54.256 1008.56 55.024 1009.54 55.024ZM1023.86 70H1026.58V62.2C1026.58 58.504 1024.25 56.56 1021.15 56.56C1019.57 56.56 1018.1 57.208 1017.22 58.288V56.776H1014.48V70H1017.22V62.608C1017.22 60.184 1018.54 58.936 1020.55 58.936C1022.54 58.936 1023.86 60.184 1023.86 62.608V70ZM1030.07 70H1032.8V56.776H1030.07V70ZM1031.46 55.024C1032.42 55.024 1033.19 54.256 1033.19 53.272C1033.19 52.288 1032.42 51.52 1031.46 51.52C1030.47 51.52 1029.71 52.288 1029.71 53.272C1029.71 54.256 1030.47 55.024 1031.46 55.024ZM1046.26 66.304C1046.11 61.528 1038.65 63.016 1038.65 60.352C1038.65 59.464 1039.42 58.864 1040.88 58.864C1042.37 58.864 1043.26 59.656 1043.35 60.808H1046.09C1045.95 58.168 1043.98 56.56 1040.98 56.56C1037.86 56.56 1035.89 58.264 1035.89 60.376C1035.89 65.224 1043.57 63.736 1043.57 66.328C1043.57 67.24 1042.73 67.912 1041.15 67.912C1039.63 67.912 1038.6 67.024 1038.51 65.944H1035.67C1035.79 68.344 1038.03 70.216 1041.19 70.216C1044.31 70.216 1046.26 68.536 1046.26 66.304ZM1049.21 70H1051.95V62.608C1051.95 60.184 1053.27 58.936 1055.29 58.936C1057.28 58.936 1058.6 60.184 1058.6 62.608V70H1061.31V62.2C1061.31 58.504 1059.01 56.56 1056.05 56.56C1054.35 56.56 1052.86 57.208 1051.95 58.312V52.24H1049.21V70Z"
fill="white"
/>
<path
d="M52.584 78.908C52.584 69.764 39.336 73.292 39.336 67.64C39.336 65.228 41.172 64.076 43.548 64.148C46.14 64.22 47.616 65.768 47.76 67.46H52.296C51.936 63.176 48.552 60.656 43.764 60.656C38.652 60.656 35.16 63.392 35.16 67.784C35.16 77 48.444 73.076 48.444 79.124C48.444 81.248 46.824 82.796 43.944 82.796C41.1 82.796 39.66 81.14 39.48 79.088H35.088C35.088 83.516 38.94 86.252 43.944 86.252C49.524 86.252 52.584 82.652 52.584 78.908ZM58.0746 80.492C58.0746 84.524 60.2706 86 63.7986 86H67.0386V82.58H64.5186C62.7906 82.58 62.2146 81.968 62.2146 80.492V69.512H67.0386V66.164H62.2146V61.232H58.0746V66.164H55.7346V69.512H58.0746V80.492ZM69.4531 75.992C69.4531 82.112 73.5931 86.324 78.7411 86.324C82.0531 86.324 84.4291 84.74 85.6891 83.048V86H89.8291V66.164H85.6891V69.044C84.4651 67.424 82.1611 65.84 78.8131 65.84C73.5931 65.84 69.4531 69.872 69.4531 75.992ZM85.6891 76.064C85.6891 80.348 82.7731 82.76 79.6771 82.76C76.6171 82.76 73.6651 80.276 73.6651 75.992C73.6651 71.708 76.6171 69.404 79.6771 69.404C82.7731 69.404 85.6891 71.816 85.6891 76.064ZM99.3235 75.56C99.3235 71.348 101.196 70.088 104.22 70.088H105.264V65.84C102.456 65.84 100.476 67.064 99.3235 69.044V66.164H95.2195V86H99.3235V75.56ZM109.684 80.492C109.684 84.524 111.88 86 115.408 86H118.648V82.58H116.128C114.4 82.58 113.824 81.968 113.824 80.492V69.512H118.648V66.164H113.824V61.232H109.684V66.164H107.344V69.512H109.684V80.492Z"
fill="white"
/>
</svg>
<svg
class="level-two"
width="1091"
height="528"
viewBox="0 0 1091 528"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<mask
id="path-1-outside-1_18:35"
maskUnits="userSpaceOnUse"
x="41"
y="0"
width="1050"
height="528"
fill="black"
>
<rect fill="white" x="41" width="1050" height="528" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1080 11H977V232H857L806 232V283V361H660V69V32V18H331L280 18V69V216V267H331L419 267V465.07L103 465.07V136H52V516H90.1406V516.07L470.141 516.07V465.07H470V267V216H331V69L609 69V361V412L660 412L854 412V410H857V283H977H1054H1080V11Z"
/>
</mask>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1080 11H977V232H857L806 232V283V361H660V69V32V18H331L280 18V69V216V267H331L419 267V465.07L103 465.07V136H52V516H90.1406V516.07L470.141 516.07V465.07H470V267V216H331V69L609 69V361V412L660 412L854 412V410H857V283H977H1054H1080V11Z"
fill="black"
/>
<path
class="maze-border"
d="M977 11V0H966V11H977ZM1080 11H1091V0H1080V11ZM977 232V243H988V232H977ZM857 232V243V232ZM806 232V221H795V232H806ZM806 361V372H817V361H806ZM660 361H649V372H660V361ZM660 18H671V7.00003H660V18ZM331 18V29V18ZM280 18V7.00001L269 7.00001V18H280ZM280 267H269V278H280V267ZM331 267V278V267ZM419 267H430V256H419V267ZM419 465.07V476.07H430V465.07H419ZM103 465.07H92V476.07H103V465.07ZM103 136H114V125H103V136ZM52 136V125H41V136H52ZM52 516H41V527H52V516ZM90.1406 516H101.141V505H90.1406V516ZM90.1406 516.07H79.1406V527.07L90.1406 527.07V516.07ZM470.141 516.07V527.07H481.141V516.07H470.141ZM470.141 465.07H481.141V454.07H470.141V465.07ZM470 465.07H459V476.07H470V465.07ZM470 216H481V205H470V216ZM331 216H320V227H331V216ZM331 69V58H320V69H331ZM609 69H620V58H609V69ZM609 412H598V423H609V412ZM660 412V423V412ZM854 412V423H865V412H854ZM854 410V399H843V410H854ZM857 410V421H868V410H857ZM857 283V272H846V283H857ZM1080 283V294H1091V283H1080ZM977 22H1080V0H977V22ZM988 232V11H966V232H988ZM857 243H977V221H857V243ZM806 243L857 243V221L806 221V243ZM817 283V232H795V283H817ZM817 361V283H795V361H817ZM660 372H806V350H660V372ZM649 69V361H671V69H649ZM649 32V69H671V32H649ZM649 18V32H671V18H649ZM331 29H660V7.00003H331V29ZM280 29L331 29V7.00003L280 7.00001V29ZM291 69V18H269V69H291ZM291 216V69H269V216H291ZM291 267V216H269V267H291ZM331 256H280V278H331V256ZM419 256L331 256V278L419 278V256ZM430 465.07V267H408V465.07H430ZM103 476.07L419 476.07V454.07L103 454.07V476.07ZM114 465.07V136H92V465.07H114ZM103 125H52V147H103V125ZM41 136V516H63V136H41ZM52 527H90.1406V505H52V527ZM101.141 516.07V516H79.1406V516.07H101.141ZM470.141 505.07L90.1406 505.07V527.07H470.141V505.07ZM459.141 465.07V516.07H481.141V465.07H459.141ZM470 476.07H470.141V454.07H470V476.07ZM459 267V465.07H481V267H459ZM459 216V267H481V216H459ZM331 227H470V205H331V227ZM320 69V216H342V69H320ZM609 58L331 58V80L609 80V58ZM620 361V69H598V361H620ZM620 412V361H598V412H620ZM660 401L609 401V423L660 423V401ZM854 401L660 401V423L854 423V401ZM843 410V412H865V410H843ZM857 399H854V421H857V399ZM846 283V410H868V283H846ZM977 272H857V294H977V272ZM1054 272H977V294H1054V272ZM1080 272H1054V294H1080V272ZM1069 11V283H1091V11H1069Z"
fill="#59739A"
mask="url(#path-1-outside-1_18:35)"
/>
<rect y="11" width="155" height="150" fill="black" />
<rect
class="finish"
x="977"
y="11"
width="103"
height="73"
fill="#CB576C"
/>
<path
d="M995.8 56H998.536V48.704H1004.06V46.472H998.536V41.552H1005.62V39.32H995.8V56ZM1008.15 56H1010.89V42.776H1008.15V56ZM1009.54 41.024C1010.5 41.024 1011.27 40.256 1011.27 39.272C1011.27 38.288 1010.5 37.52 1009.54 37.52C1008.56 37.52 1007.79 38.288 1007.79 39.272C1007.79 40.256 1008.56 41.024 1009.54 41.024ZM1023.86 56H1026.58V48.2C1026.58 44.504 1024.25 42.56 1021.15 42.56C1019.57 42.56 1018.1 43.208 1017.22 44.288V42.776H1014.48V56H1017.22V48.608C1017.22 46.184 1018.54 44.936 1020.55 44.936C1022.54 44.936 1023.86 46.184 1023.86 48.608V56ZM1030.07 56H1032.8V42.776H1030.07V56ZM1031.46 41.024C1032.42 41.024 1033.19 40.256 1033.19 39.272C1033.19 38.288 1032.42 37.52 1031.46 37.52C1030.47 37.52 1029.71 38.288 1029.71 39.272C1029.71 40.256 1030.47 41.024 1031.46 41.024ZM1046.26 52.304C1046.11 47.528 1038.65 49.016 1038.65 46.352C1038.65 45.464 1039.42 44.864 1040.88 44.864C1042.37 44.864 1043.26 45.656 1043.35 46.808H1046.09C1045.95 44.168 1043.98 42.56 1040.98 42.56C1037.86 42.56 1035.89 44.264 1035.89 46.376C1035.89 51.224 1043.57 49.736 1043.57 52.328C1043.57 53.24 1042.73 53.912 1041.15 53.912C1039.63 53.912 1038.6 53.024 1038.51 51.944H1035.67C1035.79 54.344 1038.03 56.216 1041.19 56.216C1044.31 56.216 1046.26 54.536 1046.26 52.304ZM1049.21 56H1051.95V48.608C1051.95 46.184 1053.27 44.936 1055.29 44.936C1057.28 44.936 1058.6 46.184 1058.6 48.608V56H1061.31V48.2C1061.31 44.504 1059.01 42.56 1056.05 42.56C1054.35 42.56 1052.86 43.208 1051.95 44.312V38.24H1049.21V56Z"
fill="white"
/>
<path
d="M52.584 89.908C52.584 80.764 39.336 84.292 39.336 78.64C39.336 76.228 41.172 75.076 43.548 75.148C46.14 75.22 47.616 76.768 47.76 78.46H52.296C51.936 74.176 48.552 71.656 43.764 71.656C38.652 71.656 35.16 74.392 35.16 78.784C35.16 88 48.444 84.076 48.444 90.124C48.444 92.248 46.824 93.796 43.944 93.796C41.1 93.796 39.66 92.14 39.48 90.088H35.088C35.088 94.516 38.94 97.252 43.944 97.252C49.524 97.252 52.584 93.652 52.584 89.908ZM58.0746 91.492C58.0746 95.524 60.2706 97 63.7986 97H67.0386V93.58H64.5186C62.7906 93.58 62.2146 92.968 62.2146 91.492V80.512H67.0386V77.164H62.2146V72.232H58.0746V77.164H55.7346V80.512H58.0746V91.492ZM69.4531 86.992C69.4531 93.112 73.5931 97.324 78.7411 97.324C82.0531 97.324 84.4291 95.74 85.6891 94.048V97H89.8291V77.164H85.6891V80.044C84.4651 78.424 82.1611 76.84 78.8131 76.84C73.5931 76.84 69.4531 80.872 69.4531 86.992ZM85.6891 87.064C85.6891 91.348 82.7731 93.76 79.6771 93.76C76.6171 93.76 73.6651 91.276 73.6651 86.992C73.6651 82.708 76.6171 80.404 79.6771 80.404C82.7731 80.404 85.6891 82.816 85.6891 87.064ZM99.3235 86.56C99.3235 82.348 101.196 81.088 104.22 81.088H105.264V76.84C102.456 76.84 100.476 78.064 99.3235 80.044V77.164H95.2195V97H99.3235V86.56ZM109.684 91.492C109.684 95.524 111.88 97 115.408 97H118.648V93.58H116.128C114.4 93.58 113.824 92.968 113.824 91.492V80.512H118.648V77.164H113.824V72.232H109.684V77.164H107.344V80.512H109.684V91.492Z"
fill="white"
/>
</svg>
</div>
<script src="app.js"></script>
</body>
</html>