-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
40 lines (40 loc) · 1.85 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<title>Hue — Eduardo Fernandes</title>
<link rel="stylesheet" href="assets/styles.css" />
<link rel="icon" href="https://frontedu.me/assets/favicon.ico" type="image/ico" />
</head>
<body>
<main>
<div class="container">
<div class="material-color-picker">
<div class="material-color-picker__left-panel">
<ol class="color-selector" data-bind="foreach: materialColors">
<li>
<input name="material-color" type="radio" data-bind="attr: { id: 'materialColor' + $index() }, checked: selectedColor, value: color" />
<label data-bind="attr: { for: 'materialColor' + $index(), title: color }, style: { 'color': $data.variations[4].hex }"></label>
</li>
</ol>
</div>
<div class="material-color-picker__right-panel" data-bind="foreach: materialColors">
<div class="color-palette-wrapper" data-bind="css: { 'js-active': selectedColor() === color }">
<h2 class="color-palette-header" data-bind="text: color"></h2>
<ol class="color-palette" data-bind="foreach: variations">
<li id="clipboardItem" class="color-palette__item" data-bind="attr: { 'data-clipboard-text': hex }, style: { 'background-color': hex }">
<span data-bind="text: weight"></span>
<span data-bind="text: hex"></span>
<span class="copied-indicator" data-bind="css: { 'js-copied': copiedHex() === hex }">Copiado!</span>
</li>
</ol>
</div>
</div>
</div>
</div>
</main>
<script src="assets/js/knockout.js"></script>
<script src="assets/js/clipboard.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>