tintly/index.html at main · jeremiahray/tintly · GitHub

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
<!DOCTYPE html>
<html lang="en" data-theme="">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Free tint and shade generator">
    <meta name="keywords" content="HTML, CSS, JavaScript, Colors, Tints, Shades">
    <meta name="author" content="Jeremiah Ray">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <script src="./static/js/index.js" defer></script>
    <title>Tintly - Tints and shades, made simple</title>
</head>
<body>
    <header>
        <div class="wrapper-y">
            <span class="title">Tintly</span>
            <span class="description">Tints and shades, made simple.</span>
        </div>
        <div class="wrapper-x">
            <button class="btn" id="tools-toggle"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="UNDEFINED"><path d="M160-240q-17 0-28.5-11.5T120-280q0-17 11.5-28.5T160-320h440q17 0 28.5 11.5T640-280q0 17-11.5 28.5T600-240H160Zm596-68L612-452q-12-12-12-28t12-28l144-144q11-11 28-11t28 11q11 11 11 28t-11 28L696-480l116 116q11 11 11 28t-11 28q-11 11-28 11t-28-11ZM160-440q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520h320q17 0 28.5 11.5T520-480q0 17-11.5 28.5T480-440H160Zm0-200q-17 0-28.5-11.5T120-680q0-17 11.5-28.5T160-720h440q17 0 28.5 11.5T640-680q0 17-11.5 28.5T600-640H160Z"/></svg></button>
            <button class="btn" id="theme-toggle"><svg id="theme-toggle-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="UNDEFINED"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm40-83q119-15 199.5-104.5T800-480q0-123-80.5-212.5T520-797v634Z"/></svg></button>
        </div>
    </header>
    <main>
        <div class="color-picker-container">
            <div class="color-wheel">
                <input type="color" name="color-wheel" id="color-wheel" value="#00adef">
            </div>
            <div class="color-input">Color Input (text)</div>
            <!-- <div class="color-space">Color Space</div>  -->
        </div>
        <div class="shades-container">
            <div class="shade">10</div>
            <div class="shade">20</div>
            <div class="shade">30</div>
            <div class="shade">40</div>
            <div class="shade">50</div>
            <div class="shade">60</div>
            <div class="shade">70</div>
            <div class="shade">80</div>
            <div class="shade">90</div>
            <!-- <div class="shade">100</div>
            <div class="shade">110</div>
            <div class="shade">120</div>
            <div class="shade">130</div>
            <div class="shade">140</div> -->
        </div>
    </main>
    <footer>
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="UNDEFINED"><path d="M400-320h160q17 0 28.5-11.5T600-360v-80h-80v40h-80v-160h80v40h80v-80q0-17-11.5-28.5T560-640H400q-17 0-28.5 11.5T360-600v240q0 17 11.5 28.5T400-320Zm80 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
        2024 Jeremiah Ray. All rights reserved.
    </footer>
</body>
</html>