index.html (3.0 KB)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>events</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="theme-color" content="antiquewhite"> 8 <meta name="apple-mobile-web-app-capable" content="yes"> 9 <meta name="apple-mobile-web-app-status-bar-style" content="default"> 10 <meta name="apple-mobile-web-app-title" content="events"> 11 <link rel="manifest" href="manifest.json"> 12 <link rel="apple-touch-icon" href="resources/icon.png"> 13 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐞</text></svg>"> 14 <script> 15 // events.json is the real (gitignored) data; demo.json is the committed 16 // fallback used when no events.json is present. 17 function fetchJson(url) { 18 return fetch(url).then(function (res) { 19 if (!res.ok) { throw new Error("HTTP " + res.status); } 20 return res.json(); 21 }); 22 } 23 window.eventsData = fetchJson("resources/events.json") 24 .catch(function () { return fetchJson("resources/demo.json"); }); 25 </script> 26 <script> 27 if (/iPad|iPhone|iPod/.test(navigator.userAgent) || 28 (/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1)) { 29 document.documentElement.classList.add("is-ios"); 30 } 31 </script> 32 <link rel="stylesheet" href="resources/maplibre/maplibre-gl.css"> 33 <link rel="stylesheet" href="resources/styles.css"> 34 </head> 35 <body> 36 <!-- counteract colored drop shadow on iOS 27 beta status bar --> 37 <div id="status-bar-tint" aria-hidden="true"></div> 38 39 <div id="boxes"> 40 <div id="left-box"> 41 <div id="map-container"></div> 42 <div id="compass" aria-hidden="true"> 43 <svg viewBox="0 0 40 40" width="40" height="40"> 44 <polygon class="needle-n" points="20,5 13,20 27,20"></polygon> 45 <polygon class="needle-s" points="20,35 13,20 27,20"></polygon> 46 <circle class="needle-hub" cx="20" cy="20" r="2.5"></circle> 47 </svg> 48 <svg class="compass-ring" viewBox="0 0 48 48" width="48" height="48"> 49 <circle class="ring-arc" cx="24" cy="24" r="22.75" pathLength="100"></circle> 50 </svg> 51 </div> 52 </div> 53 <div id="right-box"> 54 <h1 id="text-title"></h1> 55 <div id="text-content"></div> 56 <div id="action-wrap"></div> 57 </div> 58 </div> 59 60 <!-- print-only flyer; populated from the selected event on print, hidden on screen --> 61 <div id="flyer" aria-hidden="true"></div> 62 63 <script> 64 // cache the app shell + map tiles for fast revisits and offline use 65 if ("serviceWorker" in navigator) { 66 navigator.serviceWorker.register("sw.js").catch(function () {}); // ignore on file:// 67 } 68 </script> 69 <script src="resources/nav.js"></script> 70 <script src="resources/format.js"></script> 71 <script src="resources/qr.js"></script> 72 <script src="resources/pdf.js"></script> 73 <script src="resources/flyer.js"></script> 74 <script src="resources/panel.js"></script> 75 <script src="resources/map.js"></script> 76 <script src="resources/app.js"></script> 77 </body> 78 </html>