-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
29 lines (29 loc) · 1.97 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/index.css" rel="stylesheet">
<link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
<title>Select color</title>
</head>
<body>
<div id="root">
<div id="color-selection" class="blocks">
<canvas id="color-panel" width="295" height="260"></canvas>
<div id="color-panel-configuration">
<input id="darkening-factor-selector" type="range" min="0" max="255" value="0">
<span id="darkening-factor-view"><input id="darkening-factor" type="number" min="0" max="255" value="0"><img id="darkening-factor-copy-button" class="copy-buttons" src="images/copy.png" width="15" height="15"></span>
</div>
</div>
<div id="selection-result">
<div id="attributes" class="blocks">
<p id="hex-field">HEX = <span id="hex-sign">#</span></span> <input type="text" id="hex-attribute" value="FFFFFF" maxlength="6"><img id="hex-copy-button" class="copy-buttons" src="images/copy.png" width="15" height="15"></p>
<p id="rgb-field">RGB = <input type="number" id="red-attribute" class="rgb-attributes" value="255" min="0", max="255"><span class="rgb-attribute-delimiters">,</span> <input type="number" id="green-attribute" class="rgb-attributes" value="255" min="0", max="255"><span class="rgb-attribute-delimiters">,</span> <input type="number" id="blue-attribute" class="rgb-attributes" value="255" min="0", max="255"><img id="rgb-copy-button" class="copy-buttons" src="images/copy.png" width="15" height="15"></p>
</div>
<div id="selected-color" class="blocks"></div>
</div>
<script type="module" type="text/javascript" src="scripts/build/index.js"></script>
</div>
</body>
</html>