-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (79 loc) · 3.13 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>🎁G5 Wheel-Spins</title>
<link href="./favicon.ico" rel="favicon" />
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&family=Wendy+One&display=swap" rel="stylesheet" />
<link href="./style.css" rel="stylesheet" />
</head>
<body class="background-img">
<audio id="corndog">
<source src="./mp3/corndog-trim.m4a" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<audio id="cheer">
<source src="./mp3/cheer.m4a" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<audio id="clap">
<source src="./mp3/clap.m4a" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<div class="wrapper">
<div class="wheel-wrapper">
<header class="wheel-header">
<div class="wheel-cluster">
<button id="confetti" class="cluster-btn btn">🎉</button>
<button id="modal-dismiss" class="active cluster-btn btn">🏆</button>
<button id="cheer-btn" class="cluster-btn btn">🥳</button>
</div>
<div class="btn-group">
<button id="start" class="header-btn btn">
Start
</button>
<button id="reset" class="header-btn btn">
Reset
</button>
</div>
</header>
<div class="wheel-container">
<div class="wheel-marker"></div>
<canvas id="canvas" width="700" height="700">
Your browser does not support the canvas element.
</canvas>
</div>
</div>
<div id="clap-controls" class="aside-wrapper">
<div class="input-group">
<span class="triplet">
<button id="subtract" class="aside-btn triplet-btn btn">-</button>
<p class="triplet-output" id="clap-count">0</p>
<button id="add" class="aside-btn triplet-btn btn">+</button>
<button id="clap-btn" class="aside-btn btn clap">
👏
</button>
</span>
</div>
<div id="modal" class="modal-container">
<svg width="100%" height="100%">
<pattern id="pattern-circles" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<circle id="pattern-circle" cx="10" cy="10" r="5" fill= "#e6ecf0" />
</pattern>
<rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)" />
</svg>
<h1 id="full-text" class="modal-full-text">
Click Start to get a prize!
</h1>
<!-- <button id="dismiss" class="modal-btn btn">
X
</button> -->
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="./js/winwheel.js"></script>
<script src="./js/confetti.js"></script>
<script src="./main.js"></script>
</body>
</html>