-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
38 lines (38 loc) · 1.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Palette Visualiser</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" />
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 sm:px-2 lg:px-40 py-8 mt-10">
<h1 class="text-3xl font-bold mb-5">Palette Visualiser</h1>
<p>Visualise hexadecimal colour palettes</p>
<pre
class="whitespace-pre-wrap break-words"><code>i.e. gsettings get io.elementary.terminal.settings palette | xclip -selection clip</code></pre>
<br />
<textarea
id="hex-codes"
class="w-full h-40 p-3 bg-gray-200 rounded-md focus:outline-none"
placeholder="Enter newline delimited or colon delimited hex codes..."></textarea>
<div class="flex justify-center mb-4">
<button
id="visualise-btn"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mt-5">
Visualise
</button>
</div>
<div
id="color-grid"
class="mt-5 flex flex-wrap justify-center gap-3"></div>
</div>
<div class="container mx-auto mt-10"></div>
<script src="app.js"></script>
</body>
</html>