-
Notifications
You must be signed in to change notification settings - Fork 1
/
game.html
167 lines (125 loc) · 9.16 KB
/
game.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EYEBalliN'</title>
<link rel="icon" href="https://bit.ly/3z2b6db">
<link href="main.css" rel="stylesheet">
<link href="darkmode.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/nicolaspanel/[email protected]/dist/numjs.min.js"></script>
<script src="opencv.js" type="text/javascript"></script>
<script src="realtimechart-1.6.0.js" ></script>
<script src="https://spotify-player.herokuapp.com/spotify-player.js"></script>
<script defer src="face-api.min.js"></script>
<script defer src="blinkDetect.js"></script>
<script defer src="player.js"></script>
<script defer src="store.js"></script>
<link href="sahelfont.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="night">
<div id="container-page">
<!-- <div class="overlay">
<h2>GGWP</h2>
</div> -->
<!-- Dark Mode -->
<main class="content topcorner">
<div class="theme-toggle theme-toggle-js topcorner">
<span class="moon"></span>
<span class="sun"></span>
<small class="sun__ray"></small>
<small class="sun__ray"></small>
<small class="sun__ray"></small>
<small class="sun__ray"></small>
<small class="sun__ray"></small>
<small class="sun__ray"></small>
</div>
</main>
<!-- <p id="fps"></p> -->
<div class="khelahobe">
<canvas id="neel" width="700" height="400"></canvas>
<div class="fps"></div>
</div>
<div id="container-score">
<h1 id="score">Score</h1>
<div id="container-player1">
<div class="txt-point">🏀</div>
<div id="bestz">0</div>
<h3 class="txt-player">Streak</h3>
</div>
<div id="container-player2">
<div class="txt-point">🏀</div>
<div id="currentz">0</div>
<h3 class="txt-player">Current</h3>
</div>
<div id="clear-points">Clear Points</div>
<div id="container-start">
<input type="checkbox" name="" id="input" hidden class="input-toggle">
<label for="input"><span></span></label>
<p id="start-player-txt">Auto-Save Score</p>
</div>
</div>
<canvas id="topaz" height="300"></canvas>
</div>
<script src="main.js" charset="utf-8"></script>
<!-- <script src="net.js" charset="utf-8"></script> -->
<script src="trigger.js" charset="utf-8"></script>
<script src="toggle.js" charset="utf-8"></script>
<div class="musixz">
<div class="player" id="player">
<div class="provider">
<a href="https://bit.ly/3y3cquZ" target="_blank">
<svg width="20px" height="20px" viewBox="266 263 33 33" >
<g id="Spotify-Icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(266.000000, 263.000000)">
<ellipse id="Mask-Copy-3" fill="#0D1B30" cx="16.4137931" cy="16.5251124" rx="15.9091079" ry="15.9091079"></ellipse>
<path d="M16.4137931,32.8182159 C25.4122257,32.8182159 32.7068966,25.523545 32.7068966,16.5251124 C32.7068966,7.52667988 25.4122257,0.232008996 16.4137931,0.232008996 C7.41536054,0.232008996 0.120689655,7.52667988 0.120689655,16.5251124 C0.120689655,25.523545 7.41536054,32.8182159 16.4137931,32.8182159 Z M23.6717711,23.2489782 C23.3571412,23.7211564 22.8063054,23.8784714 22.3343606,23.5636081 C18.6365258,21.2820746 13.9945678,20.8101297 8.48737769,22.0688827 C7.93654197,22.2261976 7.46459713,21.8329103 7.30704878,21.360732 C7.14973384,20.8101297 7.54325461,20.3379515 8.01519944,20.1806365 C13.9945678,18.8432261 19.1871281,19.3938284 23.2782503,21.9115677 C23.829086,22.1475402 23.9077435,22.7770334 23.6717711,23.2489782 Z M25.5600172,18.9218836 C25.1664964,19.4724859 24.4585792,19.7086917 23.9077435,19.3151709 C19.6593063,16.7190075 13.2077597,15.9321994 8.25117186,17.5055822 C7.62191208,17.6631306 6.91376142,17.3482673 6.75644647,16.7190075 C6.59913152,16.0895143 6.91376142,15.3813637 7.54325461,15.2240487 C13.2864172,13.4931175 20.367457,14.3585831 25.2451539,17.3482673 C25.7173322,17.5844731 25.9533046,18.3710478 25.5600172,18.9218836 Z M25.7173322,14.515898 C20.6820869,11.5262139 12.2636366,11.211584 7.46459713,12.7065428 C6.677789,12.9425152 5.89098086,12.4703369 5.65500844,11.7624197 C5.41903602,10.9756115 5.89098086,10.1888034 6.59913152,9.95283099 C12.1849791,8.30055724 21.3900041,8.61542054 27.2120576,12.0770496 C27.9202082,12.4703369 28.1561806,13.41446 27.7628933,14.1226107 C27.3696059,14.6734464 26.4254828,14.9094188 25.7173322,14.515898 Z" id="Mask-Copy-2" fill="#24CF5F"></path>
</g>
</svg>
</a>
</div>
<audio id="audio" type="audio/mp3" controls
src="https://bit.ly/2UzqNtg"
onloadedmetadata="timeLoad(this.duration)"
ontimeupdate="timeUpdate(this.currentTime, this.duration)"></audio>
<div class="cover">
<img src="https://e.snmc.io/i/600/s/03e1bad804327ccbb431d1739a6bc489/7901485/martin-garrix-and-matisse-and-sadko-hold-on-Cover-Art.jpg" alt="Martin-Garrix-Hold-On">
<svg height="180" width="180">
<circle cx="50%" cy="50%" r="80" stroke-width="10" />
<circle cx="50%" cy="50%" r="80" stroke-width="10" />
</svg>
</div>
<div class="bottom">
<div class="info">
<div class="title">Hold On</div>
<div class="artist">Martin Garrix<span class="time"></span></div>
</div>
<button class="material-icons">play_arrow</button>
</div>
</div>
</div>
<div class="info-card">
<img class="info-card__image" src="images/sharkhoopsx.png"/>
<div class="card-label"><p><b>Wink to<br/>throw<br/> the ball</b></p></div>
<input class="info-card__toggle" type="checkbox" />
<article class="info-card__article">
<div class="article__container">
<h1 class="article__heading">EYEBalliN'</h1>
<p class="article__text">Now you can play Basketball with your <b>Eyes</b>! 👁🏀 with a <b>Wink</b>! 😉
<br/><br/>
Crafted with ❤️ by <a href="https://neilblaze.live" target="_blank"><b>Neilblaze</b></a> & <a href="https://sandipan.dev" target="_blank"><b>Sandipndev</b></a> for <a href="https://slamdunkhacks.devpost.com" target="_blank"</a><b>Slam Dunk Hacks'21</b></a>.
</p>
</div>
</article>
</div>
<div class="gittyhub">
<a href="https://github.com/Neilblaze/EyeballiN" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="40px" height="40px"><path fill="#e6d4fc" d="M24,4C12.954,4,4,12.954,4,24c0,8.887,5.801,16.411,13.82,19.016h12.36 C38.199,40.411,44,32.887,44,24C44,12.954,35.046,4,24,4z"/><path fill="#141414" d="M37,23.5c0-2.897-0.875-4.966-2.355-6.424C35.591,15.394,34.339,12,34.339,12 c-2.5,0.5-4.367,1.5-5.609,2.376C27.262,14.115,25.671,14,24,14c-1.71,0-3.339,0.118-4.834,0.393 c-1.242-0.879-3.115-1.889-5.632-2.393c0,0-1.284,3.492-0.255,5.146C11.843,18.6,11,20.651,11,23.5 c0,6.122,3.879,8.578,9.209,9.274C19.466,33.647,19,34.764,19,36l0,0.305c-0.163,0.045-0.332,0.084-0.514,0.108 c-1.107,0.143-2.271,0-2.833-0.333c-0.562-0.333-1.229-1.083-1.729-1.813c-0.422-0.616-1.263-2.032-3.416-1.979 c-0.376-0.01-0.548,0.343-0.5,0.563c0.043,0.194,0.213,0.5,0.896,0.75c0.685,0.251,1.063,0.854,1.438,1.458 c0.418,0.674,0.417,2.468,2.562,3.416c1.53,0.677,2.988,0.594,4.097,0.327l0.001,3.199c0,0.639-0.585,1.125-1.191,1.013 C19.755,43.668,21.833,44,24,44c2.166,0,4.243-0.332,6.19-0.984C29.584,43.127,29,42.641,29,42.002L29,36 c0-1.236-0.466-2.353-1.209-3.226C33.121,32.078,37,29.622,37,23.5z"/><path fill="#171616" d="M15,18l3.838-1.279c1.01-0.337,1.231-1.684,0.365-2.302l-0.037-0.026 c-2.399,0.44-4.445,1.291-5.888,2.753C13.596,17.658,14.129,18,15,18z"/><path fill="#171616" d="M28.693,14.402c-0.878,0.623-0.655,1.987,0.366,2.327L32.872,18c0.913,0,1.461-0.37,1.773-0.924 c-1.46-1.438-3.513-2.274-5.915-2.701C28.717,14.384,28.705,14.393,28.693,14.402z"/><path fill="#171616" d="M24,31c-1.525,0-2.874,0.697-3.791,1.774C21.409,32.931,22.681,33,24,33s2.591-0.069,3.791-0.226 C26.874,31.697,25.525,31,24,31z"/></svg>
</a>
</div>
</body>
</html>