-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdrawingboard2.html
110 lines (98 loc) · 7.77 KB
/
drawingboard2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>Musicnary</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script type="text/javascript" src="./js/drawingboard.js"></script>
</head>
<body>
<audio autoplay loop id="Without Me"><source src="./music/Without Me.mp3" type="audio/mpeg"></audio>
<main>
<div class="clues scroll-left">
<h1>Listen to the music and draw clues about the song ... Halsey - Without Me</h1> <img src="images/playing.png">
</div>
<div id="countdown">
<div id="countdown-number"></div>
<svg>
<circle id="circle" r="18" cx="20" cy="20"></circle>
</svg>
</div>
<div class="board">
<div class="color-board">
<div id="c1" style="background-color: black" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c2" style="background-color: #8C8C8C" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c3" style="background-color: #C4C4C4" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c4" style="background-color: white" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c5" style="background-color: #FFD700" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c6" style="background-color: #FFFF00" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c7" style="background-color: #FFA500" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c8" style="background-color: #FFC0CB" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c9" style="background-color: red" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c10" style="background-color: #D729D7" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c11" style="background-color: #FF00FF" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c12" style="background-color: blue" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c13" style="background-color: #66E5E5" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c14" style="background-color: #79E567" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c15" style="background-color: green" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c16" style="background-color: #864531" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c17" style="background-color: #BB5E4A" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="c18" style="background-color: #EAA179" onclick="select_color(this.id)" onkeypress="select_color(this.id)" tabindex="0"></div>
<div id="picked-color" style="background-color: black" class="picked-color"></div>
</div>
<canvas id="canvas" class="drawer"></canvas>
<div class="tool-board">
<div class="tooltip"><img id="pen" onclick="select_tool(this.id)" onkeypress="select_tool(this.id)" tabindex="0" src="images/pen.png"><span class="tooltiptext">Pen Tool<br>Draws like a pen</span></div>
<div class="tooltip"><img id="eraser" onclick="select_tool(this.id)" onkeypress="select_tool(this.id)" tabindex="0" src="images/eraser.png"><span class="tooltiptext">Eraser Tool<br>Erase the drawings</span></div>
<div class="tooltip"><img id="square" onclick="select_tool(this.id)" onkeypress="select_tool(this.id)" tabindex="0" src="images/square.png"><span class="tooltiptext">Square Tool<br>Draw a square</span></div>
<div class="tooltip"><img id="circle" onclick="select_tool(this.id)" onkeypress="select_tool(this.id)" tabindex="0" src="images/circle.png"><span class="tooltiptext">Circle Tool<br>Draw a circle</span></div>
<div class="tooltip"><img id="filled-square" onclick="select_tool(this.id)" onkeypress="select_tool(this.id)" tabindex="0" src="images/filled-square.png"><span class="tooltiptext">Filled Square Tool<br>Draw a filled square</span></div>
<div class="tooltip"><img id="filled-circle" onclick="select_tool(this.id)" onkeypress="select_tool(this.id)" tabindex="0" src="images/filled-circle.png"><span class="tooltiptext">Filled Circle Tool<br>Draw a filled circle</span></div>
<div class="tooltip"><img id="line" onclick="select_tool(this.id)" onkeypress="select_tool(this.id)" tabindex="0" src="images/line.png"><span class="tooltiptext">Line Tool<br>Draw a line</span></div>
<div class="tooltip"><img id="bucket" onclick="select_tool(this.id)" onkeypress="select_tool(this.id)" tabindex="0" src="images/bucket.png"><span class="tooltiptext">Bucket Tool<br>Fill the whole canvas with a colour!</span></div>
</div>
</div>
<div class="size-tool">
<div class="size-input">
<div class="size-circle">
<div class="circle1" onclick="select_size(this.className)" onkeypress="select_size(this.className)" tabindex="0">
<div class="circle1-size"></div>
</div>
<div class="circle2" onclick="select_size(this.className)" onkeypress="select_size(this.className)" tabindex="0">
<div class="circle2-size"></div>
</div>
<div class="circle3" onclick="select_size(this.className)" onkeypress="select_size(this.className)" tabindex="0">
<div class="circle3-size"></div>
</div>
<div class="circle4" onclick="select_size(this.className)" onkeypress="select_size(this.className)" tabindex="0">
<div class="circle4-size"></div>
</div>
<div class="circle5" onclick="select_size(this.className)" onkeypress="select_size(this.className)" tabindex="0">
<div class="circle5-size"></div>
</div>
</div>
<div class="size-line">
<div class="size-circle">
<div class="circle"></div>
<input id="slider" oninput="get_slider_size()" type="range" min="1" max="20" value="1" step="any">
<div class="circleF"></div>
</div>
</div>
</div>
<a id="save" href="transition2guess2.html" accesskey="s" onclick="save_image2()"><button id="done"><img src="images/done.png">DONE!</button></a>
</div>
<div class="volume">
<input id="volume-slider" class="vertical" orient="vertical" oninput="get_volume()" type="range" min="0" max="1" value="1" step="any">
<img src="./images/volume.png">
</div>
</main>
</body>
<script>
setTimeout(function() {
save_image2()
window.location.href = 'timeout2.html';
}, (countdown * 1000));
</script>
</html>