-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
56 lines (51 loc) · 2.72 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://www.gstatic.com/firebasejs/6.2.2/firebase.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script type="text/javascript" src="jokes.txt"></script>
<script src="app.js"></script>
<title>data collection</title>
</head>
<body>
<div class="left">
<h4 class="heading">[ instructions ]</h4>
<p class="instructions">push the button that best describes the color of the rectangle <br><br> the next color will automatically show (refresh page if it doesn't) <br><br> go through as many colors as you can!<br><br>every <strong>3rd button</strong> push displays a wholesome meme at the very bottom (to make things not-boring)</p><br>
<p id="noSpam">please avoid spamming buttons or pushing the wrong buttons intentionally! thanks very much!</p><br>
<h4 class="heading">[ instructions for dummies ]</h4>
<p class="instructions">see color <br><br> push button <br><br> 3 pushes = 1 meme <br><br> no wrong pushes plis</p><br>
</div>
<div class="middle">
<div class="colorBox" id="colorBox">0</div>
<div class="layerOne">
<button class="button" id="redButton">red-ish</button>
<button class="button" id="greenButton">green-ish</button>
<button class="button" id="blueButton">blue-ish</button>
<button class="button" id="yellowButton">yellow-ish</button>
</div>
<div class="layerTwo">
<button class="button" id="purpleButton">purple-ish</button>
<button class="button" id="pinkButton">pink-ish</button>
<button class="button" id="orangeButton">orange-ish</button>
</div>
<div class="layerThree">
<button class="button" id="brownButton">brown-ish</button>
<button class="button" id="greyButton">grey-ish</button>
</div>
</div>
<div class="right">
<h4 class="heading">[ what this ]</h4>
<p class="instructions">i'm crowdsourcing data for an academic project <br><br><strong>what data -</strong> what rgb value corresponds to what color<br><br> i need 5000-ish data points<br><br> plis halp ಥ_ಥ</p><br><br>
<h4 class="heading">[ about the project ]</h4>
<p class="instructions"><strong>name -</strong> color classifier <br><br> <strong>what it does -</strong> takes an rgb value and predicts the color <br><br><strong>how -</strong> machine learning </p>
</div>
<div class="bottom">
<h4 class="heading">[ v wholesome meme ]</h4>
<img class="meme" src="memes/0.jpg" alt="Couldn't load image!">
</div>
</body>
</html>