Discord-Timestamp-Generator/index.html at main · ProximoBinks/Discord-Timestamp-Generator · 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Elliot Koh">
    <meta name="description" content="A Discord Timestamp Generator by Elliot Koh">
    <meta name="keywords" content="Discord, Timestamp, Generator, HyperTools">
    <title>Discord Timestamp Generator — HyperTools</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div class="theme-switcher-wrapper">
        <label for="theme-switcher">Select theme:</label>
        <select id="theme-switcher">
            <option value="hypertools" selected>HyperTools</option>
            <option value="dark">Dark</option>
            <option value="light">Light</option>
            <option value="radical">Radical</option>
            <option value="merko">Merko</option>
            <option value="gruvbox">Gruvbox</option>
            <option value="tokyonight">Tokyo Night</option>
            <option value="onedark">One Dark</option>
            <option value="cobalt">Cobalt</option>
            <option value="synthwave">Synthwave</option>
            <option value="highcontrast">High Contrast</option>
            <option value="dracula">Dracula</option>
            <option value="bluelight">Blue Light</option>
            <option value="bluedark">Blue Dark</option>
        </select>
    </div>
    <div class="branding">
        <img src="logo.png" alt="HyperTools Logo">
        <h2>HyperTools</h2>
    </div>
    <div class="container theme-container">
        <h1 class="theme-title">Discord Timestamp Generator</h1><endl></endl>
        <p class="theme-body">Get a dynamic date-time display in your Discord messages. Choose your local time and copy the code below.</p>
    </div>
    <div class="container theme-container">
        <span class="theme-body"><b>Date</b></span><input class="theme-accent" type="date" id="d">
        <span class="theme-body"><b>Time</b></span><input class="theme-accent" type="time" id="hm">
        <span class="theme-body"><b>Type</b></span>
        <select class="theme-accent" id="t">
            <option value="t">short time</option>
            <option value="T">long time</option>
            <option value="d">short date</option>
            <option value="D">long date</option>
            <option value="f">long date with short time</option>
            <option value="F">long date with day of week and short time</option>
            <option value="R" selected="">relative</option>
        </select>
        <span class="theme-body"><b>Output</b></span><span class="theme-body" id="preview">1 minute ago</span>
        <input class="theme-accent" type="text" readonly="" id="code" title="Press Ctrl/Cmd+C to copy">
        <button class="theme-accent" id="copy">Copy to clipboard</button>
        <button class="theme-accent" id="current">Reset to current time</button>
    </div>
    <footer class="footer theme-footer">
        <p class="theme-footer-text">© <span id="currentYear"></span> HyperTools — html/css/js</p>
    </footer>

    <script src="script.js"></script>
</body>

</html>