index.html (2.7 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 <link rel="stylesheet" href="resources/leaflet/leaflet.css"> 27 <link rel="stylesheet" href="resources/styles.css"> 28 </head> 29 <body> 30 <div id="boxes"> 31 <div id="left-box"> 32 <div id="map-stage"> 33 <div id="map-container"></div> 34 </div> 35 <div id="compass" aria-hidden="true"> 36 <svg viewBox="0 0 40 40" width="40" height="40"> 37 <polygon class="needle-n" points="20,5 13,20 27,20"></polygon> 38 <polygon class="needle-s" points="20,35 13,20 27,20"></polygon> 39 <circle class="needle-hub" cx="20" cy="20" r="2.5"></circle> 40 </svg> 41 <svg class="compass-ring" viewBox="0 0 48 48" width="48" height="48"> 42 <circle class="ring-arc" cx="24" cy="24" r="22.75" pathLength="100"></circle> 43 </svg> 44 </div> 45 </div> 46 <div id="right-box"> 47 <h1 id="text-title"></h1> 48 <div id="text-content"></div> 49 <div id="action-wrap"></div> 50 </div> 51 </div> 52 53 <!-- print-only flyer; populated from the selected event on print, hidden on screen --> 54 <div id="flyer" aria-hidden="true"></div> 55 56 <script> 57 // cache the app shell + map tiles for fast revisits and offline use 58 if ("serviceWorker" in navigator) { 59 navigator.serviceWorker.register("sw.js").catch(function () {}); // ignore on file:// 60 } 61 </script> 62 <script src="resources/nav.js"></script> 63 <script src="resources/format.js"></script> 64 <script src="resources/qr.js"></script> 65 <script src="resources/pdf.js"></script> 66 <script src="resources/flyer.js"></script> 67 <script src="resources/panel.js"></script> 68 <script src="resources/map.js"></script> 69 <script src="resources/app.js"></script> 70 </body> 71 </html>