-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
41 lines (39 loc) · 1.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RGB Bands of an Image</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="image-container">
<img src="imgs/red_leaves.png" class="image-layer redLayer">
<img src="imgs/green_leaves.png" class="image-layer greenLayer">
<img src="imgs/blue_leaves.png" class="image-layer blueLayer">
<div id="bar-container">
<p>Visible Colours:</p>
<div id="bar-wrapper">
<img src="imgs/red_bars.png" class="bars redLayer">
<img src="imgs/green_bars.png" class="bars greenLayer">
<img src="imgs/blue_bars.png" class="bars blueLayer">
</div>
</div>
</div>
<div id="toggle">
<div data-layer="redLayer" class="active" title="Toggle red visibility off">Red</div>
<div data-layer="greenLayer" class="active" title="Toggle green visibility off">Green</div>
<div data-layer="blueLayer" class="active" title="Toggle blue visibility off">Blue</div>
</div>
<button id="fullscreen-button" title="Fullscreen">
<svg id="expand-icon" viewBox="0 0 24 24">
<path fill="white" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12
7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path>
</svg>
<svg id="collapse-icon" viewBox="0 0 24 24" style="display: none;">
<path fill="white" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6
11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"></path>
</svg>
</button>
<script src="script.js"></script>
</body>
</html>