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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!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?v=1">
    <!--
      Cache-busting for a build-less ES module app. GitHub Pages serves every
      asset with `cache-control: max-age=600` and caches each module separately,
      so without this a deploy can pair a fresh main.js with a stale helpers.js
      and break the import graph outright. The map covers every module main.js
      reaches; main.js and style.css carry the version in their own URLs.

      Bump on every deploy that changes a JS or CSS file:
          sed -i 's/?v=1/?v=2/g' index.html seed.html

      tests/assetVersioning.test.js fails if a module is unlisted or out of step.
    -->
    <script type="importmap">
    {
        "imports": {
            "./js/AuthService.js": "./js/AuthService.js?v=1",
            "./js/calendar.js": "./js/calendar.js?v=1",
            "./js/dataIO.js": "./js/dataIO.js?v=1",
            "./js/EventFocus.js": "./js/EventFocus.js?v=1",
            "./js/Events.js": "./js/Events.js?v=1",
            "./js/EventsCountdown.js": "./js/EventsCountdown.js?v=1",
            "./js/EventsHtml.js": "./js/EventsHtml.js?v=1",
            "./js/firebase-config.js": "./js/firebase-config.js?v=1",
            "./js/helpers.js": "./js/helpers.js?v=1",
            "./js/HybridStorage.js": "./js/HybridStorage.js?v=1",
            "./js/recurrence.js": "./js/recurrence.js?v=1",
            "./js/theme.js": "./js/theme.js?v=1"
        }
    }
    </script>
    <script type='module' src="./js/main.js?v=1" 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>