EventManager/index.html at master · DavidTbilisi/EventManager · 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
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chronicle — A ledger of days</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
    <script>
        // Set theme before paint to avoid a flash of light mode.
        (function () {
            try {
                var t = localStorage.getItem("chronicle-theme");
                var dark = t === "dark" || (!t && window.matchMedia("(prefers-color-scheme: dark)").matches);
                document.documentElement.dataset.theme = dark ? "dark" : "light";
                document.documentElement.dataset.userTheme = t || "auto";
            } catch (e) { /* localStorage unavailable */ }
        })();
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script type='module' src="./js/main.js" defer></script>
</head>

<body>
    <div class="container">
        <header class="masthead">
            <div class="masthead-text">
                <h1 class="wordmark">Chronicle<span class="wordmark-mark">.</span></h1>
                <p class="kicker">An editorial ledger · Past &amp; to come</p>
            </div>
            <div class="masthead-controls">
                <button id="theme-toggle" class="theme-toggle" type="button" aria-label="Toggle theme">
                    <span class="theme-glyph" aria-hidden="true"></span>
                    <span class="theme-label">Auto</span>
                </button>
                <div id="storage-info" class="storage-info"></div>
            </div>
        </header>

        <section class="stats-section" aria-labelledby="stats-heading">
            <h2 class="section-label" id="stats-heading"><span>Statistics</span><span class="rule"></span><span class="section-num">01</span></h2>
            <div id="stats"></div>
        </section>

        <section class="compose" aria-labelledby="compose-heading">
            <h2 class="section-label" id="compose-heading"><span>Inscribe</span><span class="rule"></span><span class="section-num">02</span></h2>
            <form id="event-form" autocomplete="off">
                <div class="field field-title">
                    <label for="event-name">The matter</label>
                    <input type="text" id="event-name" name="event-name" required placeholder="What's coming, or what was?">
                </div>
                <div class="field">
                    <label for="event-start-time">Begins</label>
                    <input type="datetime-local" id="event-start-time" name="event-start-time" required>
                </div>
                <div class="field">
                    <label for="event-end-time">Ends <span class="optional">optional</span></label>
                    <input type="datetime-local" id="event-end-time" name="event-end-time">
                </div>
                <div class="field">
                    <label for="event-recurrence">Repeats</label>
                    <select id="event-recurrence" name="event-recurrence">
                        <option value="none">Once</option>
                        <option value="daily">Daily</option>
                        <option value="weekly">Weekly</option>
                        <option value="monthly">Monthly</option>
                        <option value="yearly">Yearly</option>
                    </select>
                </div>
                <div class="field" id="event-until-field" hidden>
                    <label for="event-until">Until <span class="optional">optional</span></label>
                    <input type="date" id="event-until" name="event-until">
                </div>
                <div class="form-actions">
                    <input type="submit" id="event-submit" value="Add event">
                    <button type="button" id="cancel-edit-btn" class="ghost-btn" style="display:none">Discard</button>
                </div>
            </form>
        </section>

        <section class="events-section" aria-labelledby="events-heading">
            <h2 class="section-label" id="events-heading"><span>The chronicle</span><span class="rule"></span><span class="section-num">03</span></h2>
            <ul id="events"></ul>
        </section>

        <section class="archive-section" aria-labelledby="archive-heading">
            <h2 class="section-label" id="archive-heading"><span>Archive</span><span class="rule"></span><span class="section-num">04</span></h2>
            <div class="archive-bar">
                <button type="button" id="export-ics-btn" class="archive-btn">Export <span class="archive-btn-ext">.ics</span></button>
                <button type="button" id="export-csv-btn" class="archive-btn">Export <span class="archive-btn-ext">.csv</span></button>
                <button type="button" id="import-btn" class="archive-btn">Import file…</button>
                <button type="button" id="gcal-pull-btn" class="archive-btn">Pull from Google Calendar</button>
                <input type="file" id="import-file" accept=".ics,.csv,text/calendar,text/csv" hidden>
            </div>
            <p id="archive-status" class="archive-status" hidden></p>
        </section>

        <footer class="colophon">
            <p>Set in <em>Instrument Serif</em> &amp; JetBrains Mono. <span class="dot">·</span> Composed by hand.</p>
        </footer>
    </div>
</body>

</html>