-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
49 lines (40 loc) · 1.73 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
<!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">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="config.js" defer></script>
<script type="text/javascript" src="camera_api.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ColorMe</title>
</head>
<body>
<div id="information-page">
<div class="gradient-blob pink"></div>
<div class="gradient-blob green"></div>
<div class="gradient-blob pink"></div>
<div class="box">
<div class="container">
<h1>ColorMe</h1>
<p id="description">
Colour Me is an application designed to identify and describe the most dominant colour in the image you
capture! All you have to do is click the "Try Me" button or scroll to the bottom of the screen to get started. After
this, you can click the "Colour Me" button at the bottom of the screen to capture your image and the colour
detected will be read aloud to you. If you are using an android cellular device, you can click the button in
the top righthand corner of the screen to flip your camera view.</p>
<button class="gradient-btn try-me"><a href="#camera-application">TRY ME</a></button>
</div>
</div>
</div>
<div id="camera-application">
<div>
<button class="gradient-btn flip" id="flipButton"> ⟳</button>
<video id="image">Video stream not available.</video>
<button class="gradient-btn big" id="clickButton">Color Me</button>
</div>
<canvas id="canvas"> </canvas>
</div>
</body>
</html>