-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
121 lines (107 loc) · 5.74 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simon Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<audio id="clip1">
<source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></source>
</audio>
<audio id="clip2">
<source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></source>
</audio>
<audio id="clip3">
<source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></source>
</audio>
<audio id="clip4">
<source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></source>
</audio>
</head>
<body>
<main>
<h1 class="title--game">
<span>follow</span>
<span>the</span> <br>
<span>leader </span>
</h1>
<div class="controls--game">
<button class=controls--game__btn id="on">
reset/stop
</button>
<button class="controls--game__btn" id="start">
start
</button>
<input class="strictMode" type="checkbox" class="toggle" id="strict">
</div>
<section id="game--pads">
<div id="turn">--</div>
<svg id="topleft" class="pad" width="214" height="276" viewBox="0 0 214 276" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path id="pad--one" d="M210 133.641C122 197.641 266.71 267.141 174.203 267.141C81.6951 267.141 4 223.17 4 143.641C4 64.1121 37.1621 69 105 0C200.162 50 210 54.1121 210 133.641Z" fill="#c6af0b"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="214" height="275.141" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
<svg class="pad" width="221" height="280" viewBox="0 0 221 280" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path id="pad--two" d="M211.868 26.1958C213.279 99.9777 162.462 211.325 102.077 239.208C-78.9207 357.844 99.5039 104.642 5.92864 72.4133C4.51787 -1.36862 54.4587 61.2799 98.6588 60.4347C142.859 59.5896 210.457 -47.5861 211.868 26.1958Z" fill="#FD856F"/>
</g>
<defs>
<filter id="filter0_d" x="0.620697" y="0.0559387" width="219.854" height="279.044" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
<svg class="pad" width="215" height="275" viewBox="0 0 215 275" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path id="pad--three" d="M158.545 267C120.137 267 134.59 189.264 86.3762 160.242C38.1625 131.22 -40.588 138.821 36.0191 54.8662C112.626 -29.0889 194.59 -6.63181 207.447 54.8662C220.304 116.364 196.954 267 158.545 267Z" fill="#004E64"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="215" height="275" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
<svg class="pad" width="215" height="275" viewBox="0 0 215 275" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path id="pad--four" d="M134.727 137.344C134.727 215.178 215.437 267 134.727 267C54.0172 267 4 193.654 4 115.82C4 37.9856 103.97 0 184.679 0C265.389 0 134.727 59.5096 134.727 137.344Z" fill="#1EB07F"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="215" height="275" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
</section>
</main>
<script src="js/script.js"></script>
</body>
</html>