GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Seattle Trails UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;13 color: #222;14 }15 #render-target {16 position: relative;17 overflow: hidden;18 width: 1080px;19 height: 2400px;20 background: #ffffff;21 }22 23 /* Status bar */24 .status-bar {25 height: 96px;26 padding: 0 36px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #555;31 font-weight: 600;32 font-size: 36px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 28px;38 }39 .icon-sq {40 width: 44px;41 height: 30px;42 border-radius: 6px;43 background: #adb5bd;44 }45 .wifi-battery {46 display: flex;47 align-items: center;48 gap: 22px;49 }50 .battery {51 width: 50px;52 height: 26px;53 border: 3px solid #777;54 border-radius: 6px;55 position: relative;56 }57 .battery::after {58 content: "";59 position: absolute;60 right: -10px;61 top: 6px;62 width: 6px;63 height: 14px;64 background: #777;65 border-radius: 2px;66 }67 .battery .level {68 position: absolute;69 left: 3px;70 top: 3px;71 right: 8px;72 bottom: 3px;73 background: #777;74 border-radius: 3px;75 }76 77 /* Search bar */78 .search-wrap {79 padding: 12px 36px 0 36px;80 }81 .search-pill {82 height: 116px;83 border-radius: 58px;84 background: #F7F7F7;85 border: 1px solid #E5E5E5;86 display: flex;87 align-items: center;88 padding: 0 24px;89 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;90 }91 .back-btn {92 width: 72px;93 height: 72px;94 border-radius: 36px;95 display: flex;96 align-items: center;97 justify-content: center;98 margin-right: 16px;99 }100 .search-title {101 font-size: 42px;102 font-weight: 600;103 color: #2c2c2c;104 }105 .filter-circle {106 margin-left: auto;107 width: 88px;108 height: 88px;109 border-radius: 44px;110 background: #ffffff;111 border: 1px solid #E0E0E0;112 display: flex;113 align-items: center;114 justify-content: center;115 box-shadow: 0 2px 8px rgba(0,0,0,0.08);116 }117 118 /* Chips */119 .chip-row {120 display: flex;121 align-items: center;122 gap: 24px;123 padding: 18px 36px;124 }125 .chip {126 height: 84px;127 padding: 0 28px;128 border-radius: 42px;129 background: #EFEFEF;130 border: 1px solid #DDDDDD;131 display: flex;132 align-items: center;133 gap: 16px;134 color: #333;135 font-size: 32px;136 font-weight: 600;137 }138 .chip .caret {139 margin-left: 8px;140 }141 .chip-icon {142 width: 48px;143 height: 48px;144 border-radius: 24px;145 background: #E8F0FF;146 display: flex;147 align-items: center;148 justify-content: center;149 }150 .chip.green {151 background: #244A14;152 color: #fff;153 border-color: #244A14;154 padding: 0 36px;155 }156 157 /* Map placeholder */158 .map-area {159 position: relative;160 margin-top: 6px;161 width: 1080px;162 height: 1020px;163 background: #E0E0E0;164 border-top: 1px solid #BDBDBD;165 border-bottom: 1px solid #BDBDBD;166 display: flex;167 align-items: center;168 justify-content: center;169 color: #757575;170 font-size: 38px;171 font-weight: 600;172 }173 174 /* Floating control on map */175 .map-control {176 position: absolute;177 right: 36px;178 top: 220px;179 width: 150px;180 height: 320px;181 background: #ffffff;182 border: 1px solid #E2E2E2;183 border-radius: 75px;184 box-shadow: 0 6px 18px rgba(0,0,0,0.14);185 display: flex;186 flex-direction: column;187 overflow: hidden;188 }189 .control-top, .control-bottom {190 flex: 1;191 display: flex;192 align-items: center;193 justify-content: center;194 }195 .control-top {196 border-bottom: 1px solid #E6E6E6;197 }198 .control-bottom span {199 color: #2D6CF3;200 font-size: 44px;201 font-weight: 700;202 }203 204 /* Bottom sheet */205 .sheet {206 position: relative;207 margin-top: -40px;208 background: #ffffff;209 border-top-left-radius: 40px;210 border-top-right-radius: 40px;211 box-shadow: 0 -10px 24px rgba(0,0,0,0.08);212 padding-bottom: 260px; /* space before bottom nav */213 }214 .sheet-handle {215 width: 160px;216 height: 14px;217 border-radius: 7px;218 background: #E0E0E0;219 margin: 16px auto 24px auto;220 }221 .sheet-title {222 text-align: center;223 font-size: 40px;224 font-weight: 700;225 color: #274B1A;226 margin-bottom: 24px;227 }228 229 /* Trail card */230 .card {231 margin: 0 36px;232 background: #ffffff;233 border-radius: 28px;234 border: 1px solid #E7E7E7;235 overflow: hidden;236 position: relative;237 box-shadow: 0 4px 16px rgba(0,0,0,0.06);238 }239 .card-img {240 width: 100%;241 height: 560px;242 background: #E0E0E0;243 border-bottom: 1px solid #BDBDBD;244 display: flex;245 align-items: center;246 justify-content: center;247 color: #757575;248 font-size: 34px;249 font-weight: 600;250 }251 .bookmark {252 position: absolute;253 right: 24px;254 top: 24px;255 width: 56px;256 height: 80px;257 display: flex;258 align-items: center;259 justify-content: center;260 background: rgba(255,255,255,0.9);261 border-radius: 14px;262 border: 1px solid #E6E6E6;263 }264 265 /* Bottom navigation */266 .bottom-nav {267 position: absolute;268 left: 0;269 right: 0;270 bottom: 0;271 height: 210px;272 background: #ffffff;273 border-top: 1px solid #EAEAEA;274 box-shadow: 0 -6px 20px rgba(0,0,0,0.08);275 display: flex;276 align-items: center;277 justify-content: space-around;278 padding-bottom: 22px;279 }280 .nav-item {281 width: 200px;282 display: flex;283 flex-direction: column;284 align-items: center;285 gap: 14px;286 color: #7A7A7A;287 font-size: 28px;288 font-weight: 600;289 }290 .nav-item.active {291 color: #244A14;292 }293 .gesture {294 position: absolute;295 left: 50%;296 transform: translateX(-50%);297 bottom: 16px;298 width: 380px;299 height: 16px;300 background: #D0D0D0;301 border-radius: 8px;302 }303 304 /* Helper SVG sizing */305 svg {306 display: block;307 }308</style>309</head>310<body>311<div id="render-target">312 313 <!-- Status bar -->314 <div class="status-bar">315 <div>8:28</div>316 <div class="status-right">317 <div class="icon-sq"></div>318 <div class="icon-sq" style="width: 52px;"></div>319 <div class="wifi-battery">320 <svg width="42" height="28">321 <path d="M2 22 Q21 6 40 22" fill="none" stroke="#777" stroke-width="3"/>322 <circle cx="21" cy="20" r="4" fill="#777"/>323 </svg>324 <div class="battery"><div class="level"></div></div>325 </div>326 </div>327 </div>328 329 <!-- Search -->330 <div class="search-wrap">331 <div class="search-pill">332 <div class="back-btn">333 <svg width="38" height="38" viewBox="0 0 24 24">334 <path d="M15 5 L7 12 L15 19" stroke="#2c2c2c" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>335 </svg>336 </div>337 <div class="search-title">Seattle</div>338 <div class="filter-circle">339 <!-- sliders icon -->340 <svg width="36" height="36" viewBox="0 0 24 24">341 <circle cx="7" cy="6" r="2" fill="#244A14"/>342 <circle cx="12" cy="12" r="2" fill="#244A14"/>343 <circle cx="17" cy="18" r="2" fill="#244A14"/>344 <path d="M2 6 H24 M2 12 H24 M2 18 H24" stroke="#244A14" stroke-width="1.6" />345 </svg>346 </div>347 </div>348 </div>349 350 <!-- Filter chips -->351 <div class="chip-row">352 <div class="chip">353 <div class="chip-icon">354 <!-- shield + -->355 <svg width="28" height="28" viewBox="0 0 24 24">356 <path d="M12 3 L19 6 V12 C19 16 16 19 12 21 C8 19 5 16 5 12 V6 Z" fill="none" stroke="#3A63F0" stroke-width="2"/>357 <path d="M12 8 V12 M10 10 H14" stroke="#3A63F0" stroke-width="2" stroke-linecap="round"/>358 </svg>359 </div>360 <span>Distance away</span>361 <div class="caret">362 <svg width="24" height="24" viewBox="0 0 24 24">363 <path d="M6 9 L12 15 L18 9" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>364 </svg>365 </div>366 </div>367 368 <div class="chip">369 <span>Activity</span>370 <div class="caret">371 <svg width="24" height="24" viewBox="0 0 24 24">372 <path d="M6 9 L12 15 L18 9" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>373 </svg>374 </div>375 </div>376 377 <div class="chip green">378 <span>Hard</span>379 </div>380 </div>381 382 <!-- Map area -->383 <div class="map-area">384 [IMG: Seattle Map]385 <div class="map-control">386 <div class="control-top">387 <!-- layers icon -->388 <svg width="60" height="60" viewBox="0 0 24 24">389 <path d="M12 3 L3 8 L12 13 L21 8 Z" fill="none" stroke="#666" stroke-width="2" stroke-linejoin="round"/>390 <path d="M3 12 L12 17 L21 12" fill="none" stroke="#666" stroke-width="2" stroke-linejoin="round"/>391 <path d="M3 16 L12 21 L21 16" fill="none" stroke="#666" stroke-width="2" stroke-linejoin="round"/>392 </svg>393 </div>394 <div class="control-bottom">395 <span>3D</span>396 </div>397 </div>398 </div>399 400 <!-- Bottom sheet -->401 <div class="sheet">402 <div class="sheet-handle"></div>403 <div class="sheet-title">2 trails</div>404 405 <!-- Trail card -->406 <div class="card">407 <div class="card-img">[IMG: Trail photo]</div>408 <div class="bookmark">409 <!-- bookmark outline -->410 <svg width="28" height="40" viewBox="0 0 24 24">411 <path d="M6 3 H18 V21 L12 17 L6 21 Z" fill="none" stroke="#244A14" stroke-width="2" stroke-linejoin="round"/>412 </svg>413 </div>414 </div>415 </div>416 417 <!-- Bottom navigation -->418 <div class="bottom-nav">419 <div class="nav-item active">420 <svg width="54" height="54" viewBox="0 0 24 24">421 <circle cx="11" cy="11" r="6" stroke="#244A14" stroke-width="2.2" fill="none"/>422 <line x1="17" y1="17" x2="22" y2="22" stroke="#244A14" stroke-width="2.2" stroke-linecap="round"/>423 </svg>424 <div>Explore</div>425 </div>426 <div class="nav-item">427 <svg width="54" height="54" viewBox="0 0 24 24">428 <circle cx="8" cy="9" r="3.5" stroke="#7A7A7A" stroke-width="2" fill="none"/>429 <circle cx="16" cy="11" r="3" stroke="#7A7A7A" stroke-width="2" fill="none"/>430 <path d="M2 21 C2 17 6 16 8 16 C10 16 14 17 14 21" stroke="#7A7A7A" stroke-width="2" fill="none"/>431 <path d="M12 21 C12 18 15 17 18 17 C20 17 22 18 22 21" stroke="#7A7A7A" stroke-width="2" fill="none"/>432 </svg>433 <div>Community</div>434 </div>435 <div class="nav-item">436 <svg width="54" height="54" viewBox="0 0 24 24">437 <path d="M3 11 L21 3 L14 21 L12 14 L3 11 Z" fill="none" stroke="#7A7A7A" stroke-width="2" stroke-linejoin="round"/>438 </svg>439 <div>Navigate</div>440 </div>441 <div class="nav-item">442 <svg width="54" height="54" viewBox="0 0 24 24">443 <path d="M6 3 H18 V21 L12 17 L6 21 Z" fill="none" stroke="#7A7A7A" stroke-width="2" stroke-linejoin="round"/>444 </svg>445 <div>Saved</div>446 </div>447 <div class="nav-item">448 <svg width="54" height="54" viewBox="0 0 24 24">449 <circle cx="12" cy="8" r="4" stroke="#7A7A7A" stroke-width="2" fill="none"/>450 <path d="M4 21 C4 16 8 14 12 14 C16 14 20 16 20 21" stroke="#7A7A7A" stroke-width="2" fill="none"/>451 </svg>452 <div>Profile</div>453 </div>454 <div class="gesture"></div>455 </div>456 457</div>458</body>459</html>