-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (77 loc) · 3.09 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
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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Color Names</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="sortable/sortable-theme-minimal.css">
</head>
<body class="bg-slate-200">
<div class="container mx-auto my-8 mb-[calc(25vh+5rem)] w-fit">
<div class="bg-neutral-50 rounded shadow p-4">
<table id="colors-table" data-sortable>
<thead class="bg-neutral-200 sticky top-12 shadow">
<tr class="*:font-semibold *:text-left *:border-b *:px-3 *:py-1">
<th data-sortable="false">#</th>
<th data-sortable="false">Color</th>
<th>Name</th>
<th data-sortable="false">RGB</th>
<th data-sortable="false" class="!px-8">Hex</th>
<th class="!px-5">Hue °</th>
<th class="!px-5" title="Saturation">Sat. %</th>
<th class="!px-5" title="Lightness">Lig. %</th>
<th class="!px-5 !pr-8">Luma %</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<template id="color-row-template">
<tr class="hover:bg-slate-100 *:border-b *:px-3 *:py-1">
<td></td>
<td>
<div class="w-[200px] rounded h-8"></div>
</td>
<td></td>
<td></td>
<td class="font-mono uppercase !px-8"></td>
<td class="!px-5"></td>
<td class="!px-5"></td>
<td class="!px-5"></td>
<td class="!px-5 !pr-8"></td>
</tr>
</template>
<script src="colors.js"></script>
<script src="utils.js"></script>
<script src="sortable/sortable.min.js"></script>
<script>
let table = document.querySelector("#colors-table tbody");
let i = 1;
for (const color of colors) {
let row = buildColorRow(i++, color.name, color.rgb);
table.append(row);
}
function buildColorRow(index, name, rgb) {
let template = document.querySelector("#color-row-template");
let row = template.content.children[0].cloneNode(true);
let hsl = convertRgbToHsl(buildRgbFrom(...rgb));
let luma = calcLuma(rgb);
row.children[0].textContent = index;
row.children[1].children[0].style.backgroundColor = name;
row.children[2].textContent = name;
row.children[3].textContent = rgb.join(", ");
row.children[4].textContent = convertHexToString(
convertRgbToHex(buildRgbFrom(...rgb)),
false,
);
row.children[5].textContent = hsl.hue;
row.children[6].textContent = hsl.saturation;
row.children[7].textContent = hsl.lightness;
row.children[8].textContent = luma;
return row;
}
</script>
</body>
</html>