clone

an offline map explorer where each world, from a game map to a city's open data, ships as one .atlas file

archive/golden-reference
atlas / assets / index.html
index.html 8.7K
1<!doctype html>2<html lang="en">3<head>4 <meta charset="utf-8">5 <meta name="viewport" content="width=device-width, initial-scale=1">6 <meta name="color-scheme" content="dark">7 <link rel="icon" href="data:,">8 <title>Atlas — World Explorer</title>9 <link rel="stylesheet" href="/static/app.css">10 <script src="/static/app.js" defer></script>11</head>12<body>13 <div class="app-shell">14 <header class="topbar">15 <div class="brand" aria-label="Atlas — World explorer" title="World explorer">16 <svg viewBox="0 0 10 10" aria-hidden="true"><path d="M5 .8 9.2 5 5 9.2.8 5Z"/></svg>17 <strong>ATLAS</strong>18 </div>1920 <div class="map-pickers">21 <label>22 <span>Volume</span>23 <select id="volume-select" aria-label="Volume"></select>24 </label>25 <label>26 <span>World</span>27 <select id="world-select" aria-label="World"></select>28 </label>29 <label id="lens-field">30 <span>Lens</span>31 <select id="lens-select" aria-label="World lens"></select>32 </label>33 <button class="globe-toggle" id="globe-toggle" type="button" hidden34 aria-pressed="false" aria-label="View as globe" title="View as globe">35 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.8 2.6 4 5.6 4 9s-1.2 6.4-4 9c-2.8-2.6-4-5.6-4-9s1.2-6.4 4-9Z"/></svg>36 </button>37 <button class="icon-button add-bundles" id="add-bundles" type="button"38 aria-label="Add volumes" title="Add .atlas volumes">39 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>40 </button>41 </div>4243 <button class="icon-button mobile-legend" id="mobile-legend" type="button" aria-label="Toggle legend" aria-expanded="false">44 <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></svg>45 </button>46 </header>4748 <aside class="sidebar" id="sidebar">49 <div class="search-wrap">50 <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6"/><path d="m16 16 4 4"/></svg>51 <input id="pin-search" type="search" placeholder="Search locations" autocomplete="off" aria-label="Search locations">52 <kbd>⌘K</kbd>53 </div>5455 <div class="legend-toolbar">56 <span>Layers</span>57 <button id="solo-chip" class="solo-chip" type="button" hidden></button>58 <div class="legend-actions">59 <button id="expand-all" class="legend-action" type="button" data-label="Unfold every group" aria-label="Unfold every group">60 <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 6.5 8 3.5l3 3M5 9.5l3 3 3-3"/></svg>61 </button>62 <button id="collapse-all" class="legend-action" type="button" data-label="Fold every group" aria-label="Fold every group">63 <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.5 8 6.5l3-3M5 12.5l3-3 3 3"/></svg>64 </button>65 <span class="legend-actions-break" aria-hidden="true"></span>66 <button id="show-all" class="legend-action" type="button" data-label="Show every category" aria-label="Show every category">67 <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M1.5 8S4 4 8 4s6.5 4 6.5 4-2.5 4-6.5 4-6.5-4-6.5-4Z"/><circle cx="8" cy="8" r="1.9"/></svg>68 </button>69 <button id="hide-all" class="legend-action" type="button" data-label="Hide every category" aria-label="Hide every category">70 <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M1.5 8S4 4 8 4s6.5 4 6.5 4-2.5 4-6.5 4-6.5-4-6.5-4Z"/><path d="m3 13 10-10"/></svg>71 </button>72 </div>73 </div>7475 <div id="layers" class="layers">76 <div id="legend" class="legend"></div>77 </div>7879 <footer class="sidebar-footer">80 <span class="live-dot"></span>81 <span id="visible-count">0 features enabled</span>82 </footer>83 </aside>8485 <main class="map-panel">86 <div id="globe" class="globe" hidden aria-label="Interactive globe"></div>87 <div id="map" class="map" tabindex="0" autofocus aria-label="Interactive world map">88 <div class="map-loading" id="map-loading">89 <span class="spinner"></span>90 <strong>Unfolding map</strong>91 <small>Loading visible embedded tiles…</small>92 </div>9394 </div>9596 <!-- The controls float over whichever pane is showing -- the chart or97 the globe -- so zooming, the geohash navigator, and the overview98 stay companions to both. -->99 <div class="zoom-controls" aria-label="Map controls">100 <button id="zoom-in" type="button" aria-label="Zoom in">+</button>101 <button id="zoom-out" type="button" aria-label="Zoom out">−</button>102 </div>103104 <div id="grid-navigator" class="grid-navigator" hidden>105 <button id="grid-system" class="grid-system" type="button" aria-label="Cell system" hidden></button>106 <button id="grid-back" type="button" aria-label="Back one geohash level">←</button>107 <label>108 <span id="grid-system-name">Geohash</span>109 <input id="grid-input" type="text" inputmode="text" autocomplete="off"110 autocapitalize="none" spellcheck="false" aria-label="Grid cell">111 </label>112 <button id="subgrid-toggle" class="subgrid-toggle" type="button" aria-pressed="true"113 aria-label="Hide the subgrid" title="Space · show or hide the subgrid">114 <svg viewBox="0 0 16 16" aria-hidden="true">115 <path d="M2.5 2.5h11v11h-11z"/>116 <path d="M6.2 2.5v11M9.8 2.5v11M2.5 6.2h11M2.5 9.8h11"/>117 <path class="subgrid-toggle-slash" d="m2.6 13.4 10.8-10.8"/>118 </svg>119 </button>120 </div>121122 <div class="map-corner">123 <div id="overview-shelf" class="overview-shelf" hidden>124 <button id="overview-dock" class="overview-dock" type="button" aria-expanded="true"125 aria-label="Put the overview away" title="Put the overview away">126 <svg viewBox="0 0 16 16" aria-hidden="true"><path d="m6 3 5 5-5 5"/></svg>127 </button>128 <div id="overview" class="overview" aria-label="Map overview">129 <canvas id="overview-canvas"></canvas>130 <div id="overview-viewport" class="overview-viewport"></div>131 </div>132 </div>133134 <div class="map-hint" id="map-hint">135 <span>Drag to pan</span><i></i><span>Scroll to zoom</span><i></i>136 <span id="labels-hint">Z · hold for labels</span><i></i>137 <span id="grid-hint">G · grid off</span>138 </div>139 </div>140 </main>141142 <aside id="dock" class="dock" hidden>143 <button id="dock-fold" class="dock-readout" type="button" aria-expanded="true"144 aria-label="Put the panel away" title="Put the panel away">145 <span id="dock-count"></span>146 <span id="dock-flag" class="dock-flag" hidden></span>147 <span class="dock-fold" aria-hidden="true">148 <svg viewBox="0 0 16 16"><path d="m6 3 5 5-5 5"/></svg>149 </span>150 </button>151 <span class="dock-rail-label" aria-hidden="true">Locations<span id="dock-rail-name"152 class="dock-rail-name" hidden></span></span>153 <div class="dock-body">154 <div id="dock-results" class="dock-results"></div>155 <article id="pin-detail" class="pin-detail" hidden>156 <button id="close-detail" class="detail-back" type="button" aria-label="Back to results">157 <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10 3 5 8l5 5"/></svg>158 Back to results159 </button>160 <div class="detail-category">161 <span id="detail-dot"></span>162 <span id="detail-category"></span>163 </div>164 <h2 id="detail-title"></h2>165 <p id="detail-description"></p>166 <nav id="detail-links" class="detail-links" hidden></nav>167 <dl>168 <div><dt>ID</dt><dd id="detail-id"></dd></div>169 <div id="detail-coordinates-field"><dt>Coordinates</dt><dd id="detail-coordinates"></dd></div>170 <div id="detail-cell-field"><dt>Grid cell</dt><dd id="detail-cell"></dd></div>171 <div id="detail-source-field" hidden><dt>Source</dt><dd id="detail-source"></dd></div>172 </dl>173 </article>174 </div>175 </aside>176 </div>177178 <div id="empty-state" class="empty-state" hidden>179 <strong>No volumes installed yet</strong>180 <p>Each volume is a single <code>.atlas</code> file. Drop one into</p>181 <p><code id="empty-path"></code></p>182 <p>and it appears here on its own — or pick files to copy in:</p>183 <button id="empty-open" type="button">Open .atlas files…</button>184 </div>185186 <div id="fatal-error" class="fatal-error" hidden>187 <strong>Atlas could not start.</strong>188 <p id="fatal-message"></p>189 </div>190</body>191</html>