-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
112 lines (109 loc) · 5.49 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/images/icon-512.png" />
<title>Props Color Finder</title>
<meta
name="description"
content="Props Color Finder: A PWA to match colors with Open Props, CSS named colors, and convert to OKLCH. Includes LAB perceptual matching for accurate results."
/>
<script src="/theme.js"></script>
</head>
<body>
<div id="app" class="app">
<header class="header">
<form id="form-color-palette" name="color-palette" action="" class="form-color-palette">
<h1 class="headline">
<label for="color-palette">
Find the closest
<select class="select" name="palette" id="color-palette">
<option class="option" value="openProps" selected>Open Props</option>
<option class="option named-css" value="namedCSS">Named CSS</option>
<option class="option hdr" value="hdr">HDR(oklch)</option>
</select>
color
</label>
</h1>
</form>
<form id="form-color-picker" name="color-picker" class="form-color-picker">
<fieldset class="fieldset">
<legend class="legend">Color picker</legend>
<label for="color-picker" class="sr-only" for="color-picker">Pick Color</label>
<input autofocus value="#000001" id="color-picker" class="input-color" type="color" />
</fieldset>
</form>
</header>
<main class="main">
<section id="result" class="section"></section>
</main>
<footer class="footer">
<div class="distance-mode">
<input type="checkbox" id="distance-mode" />
<label for="distance-mode">
<span class="span-show-lg">Enable LAB Color Matching</span>
<span class="span-show-md">LAB Mode</span>
</label>
</div>
<div class="controls-wrapper">
<div class="button-container"></div>
<div class="footer-controls-group">
<a
class="common-btn"
href="https://github.com/mobalti/props-color-finder"
title="Source on Github"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill="currentColor"
aria-hidden="true"
>
<path
d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z"
></path>
</svg>
</a>
<button
class="common-btn theme-toggle"
id="theme-toggle"
title="Toggles light & dark"
aria-label="light"
aria-live="polite"
>
<svg
class="sun"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill="currentColor"
aria-hidden="true"
>
<path
d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"
></path>
</svg>
<svg
class="moon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
fill="currentColor"
aria-hidden="true"
>
<path
d="M11.3807 2.01886C9.91573 3.38768 9 5.3369 9 7.49999C9 11.6421 12.3579 15 16.5 15C18.6631 15 20.6123 14.0843 21.9811 12.6193C21.6613 17.8537 17.3149 22 12 22C6.47715 22 2 17.5228 2 12C2 6.68514 6.14629 2.33869 11.3807 2.01886Z"
></path>
</svg>
</button>
</div>
</div>
</footer>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>