-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
61 lines (60 loc) · 2.99 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>QuikDraw</title>
<link rel="stylesheet" href="../style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../script.js" defer></script>
</head>
<body>
<div class="timer" id="yay">8</div>
<button class="topic" id="topic">Test</button>
<div class="container">
<section class="tools-board">
<div class="row">
<label class="title"></label>
<ul class="options">
<button data-modal-target="#modal"class="directions">How To Play</button>
<div class="modal" id="modal">
<div class="modal-header">
<div class="title">How This Works:</div>
<button data-close-button class="close-button">×</button>
</div>
<div class="modal-body">
1. Once the 'Start' button, at the bottom left of the page, is clicked, you will be shown a prompt draw.<br>
2. A timer will appear and you will have 8 seconds to draw the prompt to the best of your abilities. <br>
3. A timer will appear in the top right corner of the canvas. The 'Start' button will also change to a 'Submit' button.<br>
4. Once you finish drawing the prompt, click the 'Submit' button. You can also adjust brush thickness with the slidy-bar. <br>
<strong> 5. You have no way to erase the board. Don't mess it up.</strong><br>
6. Your goal is to have the computer correctly guess your drawing. Good luck and don't be a terrible artist. <br><br><br>
Code for this game, if you want to recreate it, can be found on my GitHub at: https://github.com/chickenwang6/quikdraw
</div>
</div>
<div id="overlay"></div>
<li class="option" id="brush">
<span>Brush Size</span>
</li>
<li class="option2">
<input type="range" id="size-slider" min="1" max="30" value="5">
</li>
</ul>
</div>
<div class="row buttons">
<button class="clear-canvas">Clear Canvas</button>
<button class="save-img" id="save-img" >Start</button>
</div>
</section>
<section class="drawing-board">
<canvas id="canvas"></canvas>
</section>
</div>
<div id="predictionPopup" class="modal2">
<div class="modal-content">
<span class="close">×</span>
<h3>I think you drew a/an:</h3>
<p id="predictionText"></p>
</div>
</div>
</body>
</html>