north-star / files / src / index.html
index.html
| 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | |
| 4 | <head> |
| 5 | <meta charset="UTF-8" /> |
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 7 | <title>Friend Compass</title> |
| 8 | |
| 9 | <!-- Share card (Open Graph + Twitter/X) --> |
| 10 | <meta property="og:type" content="website" /> |
| 11 | <meta property="og:title" content="Someone wants you to know where they are 📍" /> |
| 12 | <meta property="og:description" |
| 13 | content="Friend Compass shows live arrows pointing toward your friends. No account needed, end-to-end encrypted, works on any phone." /> |
| 14 | <meta property="og:url" content="https://apps.fuzzyworld.net/north-star/" /> |
| 15 | <meta name="twitter:card" content="summary" /> |
| 16 | <meta name="twitter:title" content="Someone wants you to know where they are 📍" /> |
| 17 | <meta name="twitter:description" |
| 18 | content="Friend Compass shows live arrows pointing toward your friends. No account needed, end-to-end encrypted, works on any phone." /> |
| 19 | <meta name="description" |
| 20 | content="Friend Compass shows live arrows pointing toward your friends. No account needed, end-to-end encrypted, works on any phone." /> |
| 21 | |
| 22 | <link rel="icon" href="./assets/favicon.png" type="image/png" sizes="32x32" /> |
| 23 | <link rel="stylesheet" href="style.css" /> |
| 24 | |
| 25 | </head> |
| 26 | |
| 27 | <body> |
| 28 | <p class="app-title"> |
| 29 | <a href="https://code.fuzzyworld.net/north-star/blob/readme.md.html" target="_blank" |
| 30 | rel="noopener noreferrer" aria-label="Open project README"> |
| 31 | <img src="assets/compass.png" alt="Compass icon" class="app-icon" /> |
| 32 | </a> |
| 33 | <a id="app-title-link" href="https://apps.fuzzyworld.net/north-star/">Friend Compass</a> |
| 34 | </p> |
| 35 | <div class="room-header"> |
| 36 | <p id="room-current" class="room-current"></p> |
| 37 | <a id="create-room-link" href="https://apps.fuzzyworld.net/north-star/">Create New Room</a> |
| 38 | </div> |
| 39 | <form id="name-form" class="name-form" autocomplete="off"> |
| 40 | <div class="controls-row controls-row-main"> |
| 41 | <input id="self-name-input" name="selfName" type="text" maxlength="32" enterkeyhint="done" /> |
| 42 | <input id="self-color-input" name="selfColor" type="color" /> |
| 43 | <button id="dark-mode-toggle" class="dark-mode-toggle" type="button" aria-label="Toggle dark mode"></button> |
| 44 | <button id="wake-lock-toggle" class="wake-lock-toggle" type="button" aria-pressed="false" |
| 45 | aria-label="Keep screen awake"></button> |
| 46 | <button id="clean-mode-toggle" class="clean-mode-toggle" type="button" |
| 47 | aria-pressed="false">Fullscreen</button> |
| 48 | </div> |
| 49 | <div class="controls-row controls-row-secondary"> |
| 50 | <button id="calibrate-heading-link" class="friends-toggle" type="button">Compass</button> |
| 51 | <button id="friends-toggle" class="friends-toggle" type="button" aria-expanded="true">Hide Friends</button> |
| 52 | </div> |
| 53 | </form> |
| 54 | <div id="default-arrow" style="display: none;" class="arrow"> |
| 55 | <div class="arrow-img"></div> |
| 56 | </div> |
| 57 | <div id="content"> |
| 58 | <div id="lobby-buttons"> |
| 59 | <button id="resume-room-button" class="resume-room-button is-hidden" type="button">Resume</button> |
| 60 | <button id="start-room-button" class="start-room-button" type="button">Start</button> |
| 61 | </div> |
| 62 | <aside id="friends-panel" class="friends-panel" aria-label="Friends"></aside> |
| 63 | </div> |
| 64 | <div id="room-links" class="room-links is-hidden"> |
| 65 | <div id="invite-room-qr-list" class="room-qr-list" aria-label="Room invite QR codes"></div> |
| 66 | </div> |
| 67 | <div id="debug-info"> |
| 68 | <p id="debug"> |
| 69 | <a id="debug-commit" href="https://code.fuzzyworld.net/north-star/log/" |
| 70 | target="_blank">Current Commit</a> |
| 71 | <a href="https://code.fuzzyworld.net/north-star/" target="_blank">Repo</a> |
| 72 | </p> |
| 73 | <p id="attributions"> |
| 74 | <a href="https://www.flaticon.com/free-icons/tools-and-utensils" title="Tools and utensils icons">Tools and |
| 75 | utensils |
| 76 | icons created by Icongeek26 - Flaticon</a> |
| 77 | <a href="https://www.flaticon.com/free-icons/arrow" title="arrow icons">Arrow icons created by Freepik - |
| 78 | Flaticon</a> |
| 79 | <a href="https://www.flaticon.com/free-icons/multimedia-option" title="multimedia option icons">Multimedia |
| 80 | option icons |
| 81 | created by Icongeek26 - Flaticon</a> |
| 82 | </p> |
| 83 | </div> |
| 84 | <script src="app.ts" type="module"></script> |
| 85 | </body> |
| 86 | |
| 87 | </html> |