this repo has no description
moritz.vongoewels.de
1<!doctype html>
2<html lang="en" style="--line-length: 100vw">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <meta name="color-scheme" content="light dark" />
7 <script
8 src="/static/htmx-2.0.3.min.js"
9 type="application/javascript"
10 ></script>
11 <script
12 src="/static/hyperscript-0.9.14.js"
13 type="application/javascript"
14 ></script>
15
16 <link rel="stylesheet" href="https://unpkg.com/missing.css@1.2.0" />
17 <!-- <script type="module" src="https://unpkg.com/missing.css@1.2.0/dist/js/menu.js"></script> -->
18 <script type="module" src="https://unpkg.com/missing.css@1.2.0/dist/js/overflow-nav.js"></script>
19
20 <script type="module">
21 import {
22 menu,
23 menuButton,
24 } from "https://unpkg.com/missing.css@1.2.0/dist/js/menu.js";
25
26 htmx.onLoad((target) => {
27 console.log("htmx:load", target);
28 _hyperscript.processNode(target);
29 menu(target);
30 menuButton(target);
31 });
32 </script>
33
34 <link rel="stylesheet" href="/static/leaflet-1.9.4.css" />
35 <link rel="stylesheet" href="/static/leaflet-geoman-2.18.1.css" />
36
37 <script src="/static/leaflet-1.9.4.js"></script>
38 <script src="/static/leaflet-geoman-2.18.1.js"></script>
39 <script src="/static/leaflet-gesture-handling-a53f371.min.js"></script>
40
41 <style>
42 #htmx-progress {
43 display: none;
44 }
45
46 .htmx-request#htmx-progress {
47 display: fixed;
48 }
49
50 .htmx-request #htmx-progress {
51 display: fixed;
52 }
53
54 :target {
55 background-color: #ffa;
56 }
57
58 #checkpoints-map .leaflet-tile {
59 filter: grayscale(1) contrast(0.3) brightness(1.4);
60 }
61
62 @media (prefers-color-scheme: dark) {
63 .leaflet-layer {
64 filter: invert(100%) hue-rotate(180deg) brightness(95%)
65 contrast(90%);
66 }
67
68 .leaflet-control,
69 .leaflet-bar a {
70 color: var(--pico-color);
71 background: var(--pico-background-color);
72 }
73
74 .leaflet-bar .control-icon {
75 filter: brightness(0%) invert(100%);
76 }
77
78
79 .leaflet-control *[role="button"] {
80 --pico-background-color: initial;
81 --pico-border-color: initial;
82 --pico-primary-background: initial;
83 --pico-primary-border: var(--pico-primary-background);
84 }
85
86 .leaflet-container,
87 .leaflet-popup,
88 leaflet-popup-content,
89 .leaflet-popup-content-wrapper,
90 .leaflet-popup-tip {
91 background: var(--pico-background-color);
92 color: var(--pico-color);
93 }
94 }
95
96 svg.avatar {
97 width: 20px;
98 height: 20px;
99 border-radius: 10px;
100 }
101 </style>
102
103
104 <title>{% block title %}{{ title }}{% endblock %}</title>
105
106 {% block head %}{% endblock %}
107 </head>
108
109 <body hx-indicator="#htmx-progress">
110 <header class="navbar" data-overflow-nav>
111 <button class="iconbutton" data-nav-expander aria-hidden>
112 ☰ <!-- trigram for heaven -->
113 </button>
114 <nav>
115 <ul role="list">
116 <li>
117 <a href="/"><strong>Checkpoints</strong></a>
118 </li>
119 </ul>
120 </nav>
121 <nav>
122 <ul role="list">
123 {% if session is defined and session.athlete is defined %}
124 <li><dt>Athlete <dd><a href="{{session.athlete.strava_profile_url}}" target="_blank">{{session.athlete.full_name}} ({{session.athlete.id}})</a></li>
125 {% else %}
126 <li><a href="{{links.login|safe}}"><img style="width: 200px;" src="/static/images/connect_with_strava.png" /></a></li>
127 {% endif %}
128 {% if contest %}
129 <li>
130 <dt>Contest Started
131 <dd><time datetime="{{contest.period.start}}">{{contest.period.start|format_iso3339}}
132 </li>
133 <li>
134 <dt>Contest Ends
135 <dd><time datetime="{{contest.period.end}}">{{contest.period.end|format_iso3339}}
136 <//li>
137 {% endif %}
138 </ul>
139 </nav>
140 </header>
141 <main id="content">{% block content %}{% endblock %}</main>
142 <footer>
143 {% if debugger_enabled %}
144 <details>
145 <summary>Debug</summary>
146 <pre>
147 {{debug()}}
148 </pre>
149 </details>
150 {% endif %}
151
152 <progress
153 id="htmx-progress"
154 class="fixed bottom width:100%"
155 ></progress>
156
157 <img style="width: 200px" src="/static/images/powered_by_strava.png" />
158
159 </footer>
160
161 <!-- <script>
162 window.addEventListener('load', (e) => {
163 htmx.logAll()
164 })
165 </script> -->
166 </body>
167</html>