GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Map Activity UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #efe7d7; /* light map beige */13 }14 15 /* Status bar */16 .statusbar {17 position: absolute;18 top: 18px;19 left: 24px;20 right: 24px;21 height: 60px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #2b2b2b;26 font-weight: 600;27 }28 .status-left {29 display: flex;30 align-items: center;31 gap: 18px;32 }33 .status-left .time {34 font-size: 34px;35 letter-spacing: 0.5px;36 }37 .status-right {38 display: flex;39 align-items: center;40 gap: 16px;41 color: #2b2b2b;42 font-size: 22px;43 }44 .dot {45 width: 10px; height: 10px; background:#2b2b2b; border-radius:50%;46 }47 48 /* Map area */49 #map {50 position: absolute;51 top: 0;52 left: 0;53 width: 1080px;54 height: 1780px;55 background: #ede6d5;56 }57 /* Map placeholder label */58 .map-label {59 position: absolute;60 left: 24px;61 bottom: 120px;62 color: #757575;63 font-size: 22px;64 background: rgba(224,224,224,0.5);65 border: 1px solid #bdbdbd;66 padding: 8px 12px;67 border-radius: 8px;68 }69 70 /* Decorative simple roads to hint map */71 .road {72 position: absolute;73 height: 0;74 border-top: 10px solid #ffffff;75 opacity: 0.9;76 border-radius: 24px;77 }78 .road.r1 { width: 820px; top: 220px; left: 120px; transform: rotate(4deg); }79 .road.r2 { width: 600px; top: 540px; left: 220px; transform: rotate(-8deg); }80 .road.r3 { width: 780px; top: 980px; left: 160px; transform: rotate(16deg); }81 .road.r4 { width: 520px; top: 1260px; left: 280px; transform: rotate(-14deg); }82 .road.r5 { width: 690px; top: 1500px; left: 110px; transform: rotate(10deg); }83 84 /* Dashed trail */85 .trail {86 position: absolute;87 left: 140px;88 top: 620px;89 width: 910px;90 height: 0;91 border-top: 8px dashed #3a3a3a;92 transform: rotate(30deg);93 opacity: 0.9;94 }95 96 /* Floating controls on map */97 .circle-btn {98 position: absolute;99 width: 110px; height: 110px; border-radius: 55px;100 background: #0f0f0f; box-shadow: 0 10px 18px rgba(0,0,0,0.35);101 display: flex; align-items: center; justify-content: center;102 }103 .circle-btn.left {104 top: 150px; left: 28px;105 }106 .circle-btn.right {107 top: 360px; right: 28px; width: 120px; height: 120px; border-radius: 60px;108 }109 .pill-stack {110 position: absolute;111 top: 150px; right: 28px;112 width: 128px; height: 240px; border-radius: 64px;113 background: #0f0f0f; box-shadow: 0 12px 22px rgba(0,0,0,0.35);114 display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 24px 0;115 }116 117 /* Nav marker */118 .nav-marker {119 position: absolute;120 left: 515px; top: 930px;121 width: 150px; height: 150px; border-radius: 75px;122 background: rgba(99, 154, 176, 0.35);123 display: flex; align-items: center; justify-content: center;124 box-shadow: 0 8px 16px rgba(0,0,0,0.1);125 }126 127 /* Bottom sheet */128 .sheet {129 position: absolute;130 left: 0; right: 0; bottom: 0;131 height: 620px;132 background: #0b0d0b;133 border-top-left-radius: 36px;134 border-top-right-radius: 36px;135 color: #ffffff;136 box-shadow: 0 -10px 30px rgba(0,0,0,0.4);137 }138 .sheet .handle {139 position: absolute;140 top: 18px; left: 50%;141 transform: translateX(-50%);142 width: 120px; height: 16px; border-radius: 8px; background: #1f231f;143 }144 .metrics {145 position: absolute;146 top: 88px; left: 64px; right: 64px;147 display: grid;148 grid-template-columns: 1fr 1fr 1fr;149 column-gap: 40px;150 text-align: center;151 }152 .metric-title {153 font-size: 30px; color: #a8aba6; margin-bottom: 10px;154 }155 .metric-value {156 font-size: 58px; font-weight: 700; letter-spacing: 0.5px;157 }158 159 /* Central controls */160 .controls {161 position: absolute;162 top: 240px;163 left: 0; right: 0;164 display: flex; align-items: center; justify-content: center; gap: 150px;165 }166 .control-circle {167 width: 150px; height: 150px; border-radius: 75px;168 background: #243022; color: #d9e5cf;169 display: flex; align-items: center; justify-content: center;170 }171 .pause-btn {172 width: 240px; height: 240px; border-radius: 120px;173 background: #f2f2f2; color: #1a1a1a;174 display: flex; align-items: center; justify-content: center;175 font-size: 50px; font-weight: 700;176 box-shadow: 0 12px 24px rgba(0,0,0,0.4);177 }178 .control-labels {179 position: absolute;180 top: 420px;181 left: 0; right: 0;182 display: flex; justify-content: space-around;183 color: #d1d5ce; font-size: 34px;184 padding: 0 120px;185 }186 187 .sheet .progress {188 position: absolute;189 bottom: 36px; left: 50%;190 transform: translateX(-50%);191 width: 480px; height: 8px; border-radius: 6px; background: #2a2d2a;192 }193 194 /* Mapbox watermark */195 .watermark {196 position: absolute;197 bottom: 640px; right: 30px;198 display: flex; align-items: center; gap: 14px;199 color: #3a3a3a; font-weight: 700; font-size: 34px;200 opacity: 0.85;201 }202 .wm-icon {203 width: 42px; height: 42px; border-radius: 50%;204 background: #d9d9d9; border: 1px solid #bdbdbd;205 }206 207 /* Simple SVG defaults */208 svg { display: block; }209</style>210</head>211<body>212<div id="render-target">213 214 <!-- Status bar -->215 <div class="statusbar">216 <div class="status-left">217 <div class="time">12:07</div>218 <div class="dot"></div>219 <div class="dot"></div>220 <div class="dot"></div>221 </div>222 <div class="status-right">223 <span style="font-size:22px;">📍</span>224 <span style="font-size:22px;">📶</span>225 <span style="font-size:22px;">🔋</span>226 </div>227 </div>228 229 <!-- Map area -->230 <div id="map">231 <!-- roads (simple hints) -->232 <div class="road r1"></div>233 <div class="road r2"></div>234 <div class="road r3"></div>235 <div class="road r4"></div>236 <div class="road r5"></div>237 238 <div class="trail"></div>239 240 <!-- Left floating back/chevron button -->241 <div class="circle-btn left">242 <svg width="44" height="44" viewBox="0 0 24 24">243 <path d="M5 9l7 7 7-7" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>244 </svg>245 </div>246 247 <!-- Right vertical pill with layer icon and dots -->248 <div class="pill-stack">249 <svg width="54" height="54" viewBox="0 0 24 24">250 <path d="M12 3l8 5-8 5-8-5z" fill="#ffffff"/>251 <path d="M4 13l8 5 8-5" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 <svg width="12" height="64" viewBox="0 0 6 32">254 <circle cx="3" cy="6" r="2" fill="#ffffff"/>255 <circle cx="3" cy="16" r="2" fill="#ffffff"/>256 <circle cx="3" cy="26" r="2" fill="#ffffff"/>257 </svg>258 </div>259 260 <!-- Compass/heading button -->261 <div class="circle-btn right">262 <svg width="72" height="72" viewBox="0 0 72 72">263 <circle cx="36" cy="36" r="34" fill="#121212"/>264 <text x="36" y="44" font-size="36" text-anchor="middle" fill="#ffffff" font-weight="800">Z</text>265 <path d="M10 36 l16 -8 v16 z" fill="#ff5630"/>266 <path d="M62 36 l-16 -8 v16 z" fill="#ff9f2f"/>267 </svg>268 </div>269 270 <!-- Navigation marker -->271 <div class="nav-marker">272 <svg width="88" height="88" viewBox="0 0 24 24">273 <circle cx="12" cy="12" r="10" fill="#ffffff" opacity="0.9"/>274 <path d="M12 5l5 9-5-3-5 3z" fill="#2e6f86"/>275 <circle cx="12" cy="12" r="10" fill="none" stroke="#cfd8dc" stroke-width="1"/>276 </svg>277 </div>278 279 <!-- Map placeholder label -->280 <div class="map-label">[IMG: Map / Mapbox]</div>281 </div>282 283 <!-- Mapbox watermark -->284 <div class="watermark">285 <div class="wm-icon"></div>286 <div>mapbox</div>287 </div>288 289 <!-- Bottom sheet -->290 <div class="sheet">291 <div class="handle"></div>292 293 <div class="metrics">294 <div>295 <div class="metric-title">Time</div>296 <div class="metric-value">00:45</div>297 </div>298 <div>299 <div class="metric-title">Distance</div>300 <div class="metric-value">0.00 km</div>301 </div>302 <div>303 <div class="metric-title">Elev. gain</div>304 <div class="metric-value">0 m</div>305 </div>306 </div>307 308 <div class="controls">309 <!-- Elevation circle -->310 <div class="control-circle">311 <svg width="86" height="86" viewBox="0 0 24 24">312 <path d="M4 18l5-6 4 4 7-10" fill="none" stroke="#d9e5cf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>313 <circle cx="4" cy="18" r="1.5" fill="#d9e5cf"/>314 <circle cx="9" cy="12" r="1.5" fill="#d9e5cf"/>315 <circle cx="13" cy="16" r="1.5" fill="#d9e5cf"/>316 <circle cx="20" cy="6" r="1.5" fill="#d9e5cf"/>317 </svg>318 </div>319 320 <!-- Pause main button -->321 <div class="pause-btn">Pause</div>322 323 <!-- Activity circle -->324 <div class="control-circle">325 <svg width="86" height="86" viewBox="0 0 24 24">326 <path d="M8 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0" fill="#d9e5cf"/>327 <path d="M6 20l4-6 4 3 4-1" fill="none" stroke="#d9e5cf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>328 <path d="M8 8l-2 4 4 2 2-4" fill="none" stroke="#d9e5cf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>329 </svg>330 </div>331 </div>332 333 <div class="control-labels">334 <div>Elevation</div>335 <div>Activity</div>336 </div>337 338 <div class="progress"></div>339 </div>340 341</div>342</body>343</html>