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>Trail Search UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Segoe UI", Arial, Helvetica, sans-serif;13 }14 /* Root render target */15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #eef3ea;21 }22 23 /* Subtle map-like background */24 #render-target::before {25 content: "";26 position: absolute;27 inset: 0;28 background:29 radial-gradient(circle at 15% 20%, rgba(200,230,200,0.35) 0 200px, transparent 220px),30 radial-gradient(circle at 85% 35%, rgba(180,210,220,0.35) 0 220px, transparent 240px),31 radial-gradient(circle at 40% 75%, rgba(210,220,180,0.35) 0 200px, transparent 220px);32 pointer-events: none;33 }34 35 /* Status bar */36 .status-bar {37 height: 110px;38 background: #5AA332;39 color: #fff;40 display: flex;41 align-items: center;42 padding: 0 36px;43 font-weight: 600;44 letter-spacing: 0.5px;45 position: relative;46 z-index: 5;47 }48 .status-time {49 font-size: 40px;50 }51 .status-icons {52 margin-left: auto;53 display: flex;54 align-items: center;55 gap: 28px;56 }57 .status-dot {58 width: 10px;59 height: 10px;60 background: #fff;61 border-radius: 50%;62 display: inline-block;63 }64 .status-icon {65 width: 36px;66 height: 36px;67 fill: #fff;68 }69 70 /* App bar */71 .app-bar {72 height: 190px;73 background: #121212;74 color: #fff;75 display: flex;76 align-items: flex-end;77 padding: 0 40px 28px 40px;78 position: relative;79 z-index: 6;80 box-shadow: 0 2px 8px rgba(0,0,0,0.25);81 }82 .app-title {83 font-size: 68px;84 font-weight: 700;85 }86 .filter-btn {87 margin-left: auto;88 width: 76px;89 height: 76px;90 background: rgba(255,255,255,0.08);91 border-radius: 16px;92 display: flex;93 align-items: center;94 justify-content: center;95 }96 .filter-btn svg {97 width: 42px;98 height: 42px;99 fill: #fff;100 }101 102 /* Scroll area for cards */103 .content {104 position: absolute;105 top: 300px;106 bottom: 200px; /* space for bottom nav */107 left: 0;108 right: 0;109 overflow: hidden;110 padding: 20px 0 0 0;111 }112 .list {113 position: absolute;114 inset: 0;115 overflow-y: auto;116 padding-bottom: 40px;117 }118 119 /* Cards */120 .card {121 width: 1000px;122 margin: 22px auto;123 border-radius: 28px;124 background: #fff;125 box-shadow: 0 10px 18px rgba(0,0,0,0.22);126 position: relative;127 overflow: visible;128 }129 .card .img {130 height: 560px;131 background: #E0E0E0;132 border: 1px solid #BDBDBD;133 border-radius: 26px;134 display: flex;135 align-items: center;136 justify-content: center;137 color: #666;138 font-size: 42px;139 letter-spacing: 0.3px;140 }141 142 .chip-like {143 position: absolute;144 right: 24px;145 top: 140px;146 display: flex;147 flex-direction: column;148 gap: 18px;149 }150 .circle-icon {151 width: 96px;152 height: 96px;153 background: #121212;154 color: #fff;155 border-radius: 50%;156 display: grid;157 place-items: center;158 box-shadow: 0 6px 14px rgba(0,0,0,0.35);159 }160 .circle-icon svg {161 width: 44px;162 height: 44px;163 fill: #fff;164 }165 166 .fav-outline {167 position: absolute;168 right: 26px;169 top: 26px;170 width: 72px;171 height: 72px;172 border-radius: 50%;173 display: grid;174 place-items: center;175 background: rgba(255,255,255,0.35);176 backdrop-filter: blur(2px);177 }178 .fav-outline svg {179 width: 40px;180 height: 40px;181 stroke: #fff;182 stroke-width: 3;183 fill: none;184 }185 186 .details {187 position: absolute;188 left: 24px;189 right: 24px;190 bottom: -10px;191 background: #1d1d1d;192 color: #fff;193 border-radius: 22px;194 padding: 26px 28px;195 display: grid;196 grid-template-columns: 1fr auto;197 gap: 8px 12px;198 align-items: center;199 box-shadow: 0 8px 18px rgba(0,0,0,0.3);200 }201 .trail-title {202 font-size: 54px;203 font-weight: 700;204 line-height: 1.1;205 }206 .state {207 font-size: 36px;208 opacity: 0.85;209 margin-left: 12px;210 font-weight: 600;211 }212 .length-label {213 font-size: 42px;214 font-weight: 700;215 opacity: 0.95;216 }217 .length-value {218 font-size: 42px;219 font-weight: 600;220 margin-left: 12px;221 }222 .subline {223 display: flex;224 align-items: center;225 gap: 14px;226 }227 .reviews {228 font-size: 36px;229 opacity: 0.9;230 }231 .stars {232 display: inline-flex;233 gap: 6px;234 }235 .stars svg {236 width: 32px;237 height: 32px;238 fill: #FFC107;239 }240 .stars.gray svg {241 fill: #B0B0B0;242 }243 .stars.mixed svg:nth-child(4) {244 fill: #FFC107;245 }246 .stars.mixed svg:nth-child(5) {247 fill: #B0B0B0;248 }249 250 /* Bottom navigation */251 .bottom-bar {252 position: absolute;253 left: 0;254 right: 0;255 bottom: 70px;256 height: 140px;257 background: #5AA332;258 border-top-left-radius: 18px;259 border-top-right-radius: 18px;260 display: flex;261 align-items: center;262 justify-content: space-around;263 padding: 0 40px;264 z-index: 5;265 box-shadow: 0 -4px 10px rgba(0,0,0,0.2);266 }267 .nav-icon {268 width: 82px;269 height: 82px;270 border-radius: 50%;271 display: grid;272 place-items: center;273 color: #fff;274 }275 .nav-icon svg { width: 54px; height: 54px; fill: #fff; }276 277 /* Home indicator */278 .home-indicator {279 position: absolute;280 bottom: 18px;281 left: 50%;282 transform: translateX(-50%);283 width: 320px;284 height: 12px;285 background: #eaeaea;286 border-radius: 8px;287 }288</style>289</head>290<body>291<div id="render-target">292 293 <!-- Status Bar -->294 <div class="status-bar">295 <div class="status-time">3:17</div>296 <div class="status-icons">297 <span class="status-dot"></span>298 <svg class="status-icon" viewBox="0 0 24 24"><path d="M12 2C7 2 3 6 3 11c0 3 2 5 4 6v5l5-3c5 0 9-4 9-8 0-5-4-9-9-9z"/></svg>299 <span class="status-dot"></span>300 <span class="status-dot"></span>301 <svg class="status-icon" viewBox="0 0 24 24"><path d="M12 2a1 1 0 0 1 1 1v2a7 7 0 0 1 7 7h2a1 1 0 1 1 0 2h-2a7 7 0 0 1-7 7v2a1 1 0 1 1-2 0v-2a7 7 0 0 1-7-7H2a1 1 0 1 1 0-2h2a7 7 0 0 1 7-7V3a1 1 0 0 1 1-1z"/></svg>302 <svg class="status-icon" viewBox="0 0 24 24"><path d="M12 4l-6 6h4v6h4v-6h4z"/></svg>303 <svg class="status-icon" viewBox="0 0 24 24"><path d="M12 22c1.7 0 3-1.3 3-3H9c0 1.7 1.3 3 3 3zm6-7v-5c0-3-2-5.4-5-6V3a1 1 0 0 0-2 0v1c-3 0.6-5 3-5 6v5l-2 2v1h16v-1l-2-2z"/></svg>304 </div>305 </div>306 307 <!-- App Bar -->308 <div class="app-bar">309 <div class="app-title">Trail Search</div>310 <div class="filter-btn" title="Filter">311 <svg viewBox="0 0 24 24">312 <path d="M4 7h16v2H4V7zm3 4h10v2H7v-2zm-2 4h14v2H5v-2z"></path>313 </svg>314 </div>315 </div>316 317 <!-- Content -->318 <div class="content">319 <div class="list">320 321 <!-- Card 1 -->322 <div class="card">323 <div class="img">[IMG: Green Trail Banner]</div>324 325 <div class="chip-like">326 <div class="circle-icon" title="Expand">327 <svg viewBox="0 0 24 24"><path d="M15 3h6v6h-2V6.4l-4.6 4.6-1.4-1.4L17.6 5H15V3zM9 21H3v-6h2v2.6l4.6-4.6 1.4 1.4L6.4 19H9v2z"/></svg>328 </div>329 <div class="circle-icon" title="Route">330 <svg viewBox="0 0 24 24"><path d="M7 20a3 3 0 1 1 0-6h7a2 2 0 0 0 2-2V9h-2l3-4 3 4h-2v3a4 4 0 0 1-4 4H7a1 1 0 1 0 0 2h10v2H7z"/></svg>331 </div>332 </div>333 334 <div class="details">335 <div>336 <div class="trail-title">Bartlett Trail <span class="state">IL</span></div>337 <div class="subline">338 <span class="stars">339 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>340 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>341 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>342 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>343 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>344 </span>345 <span class="reviews">4 Reviews</span>346 </div>347 </div>348 <div style="display:flex; align-items:center;">349 <div class="length-label">Length</div>350 <div class="length-value">1.2 mi</div>351 </div>352 </div>353 </div>354 355 <!-- Card 2 -->356 <div class="card">357 <div class="img" style="position:relative;">[IMG: Trail Photo with Yellow Flowers]358 <div class="fav-outline">359 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.2-7-9.5A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 5.5C19 16.8 12 21 12 21z"/></svg>360 </div>361 </div>362 <div class="details">363 <div>364 <div class="trail-title">Blackberry Trail <span class="state">IL</span></div>365 <div class="subline">366 <span class="stars mixed">367 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>368 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>369 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>370 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>371 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>372 </span>373 <span class="reviews">1 Review</span>374 </div>375 </div>376 <div style="display:flex; align-items:center;">377 <div class="length-label">Length</div>378 <div class="length-value">1.5 mi</div>379 </div>380 </div>381 </div>382 383 <!-- Card 3 -->384 <div class="card">385 <div class="img" style="position:relative;">[IMG: City Trail Photo in Autumn]386 <div class="fav-outline">387 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.2-7-9.5A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 5.5C19 16.8 12 21 12 21z"/></svg>388 </div>389 </div>390 <div class="details">391 <div>392 <div class="trail-title">Bloomingdale Trail (The 606) <span class="state">IL</span></div>393 <div class="subline">394 <span class="stars">395 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>396 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>397 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>398 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>399 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>400 </span>401 <span class="reviews">15 Reviews</span>402 </div>403 </div>404 <div style="display:flex; align-items:center;">405 <div class="length-label">Length</div>406 <div class="length-value">2.7 mi</div>407 </div>408 </div>409 </div>410 411 <!-- Additional partial card to hint list continuation -->412 <div class="card" style="opacity:0.96;">413 <div class="img" style="position:relative;">[IMG: Trail Photo - Bridge Over Wetland]414 <div class="fav-outline">415 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.2-7-9.5A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 5.5C19 16.8 12 21 12 21z"/></svg>416 </div>417 </div>418 <div class="details">419 <div>420 <div class="trail-title">Prairie Crossing Trail <span class="state">IL</span></div>421 <div class="subline">422 <span class="stars">423 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>424 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>425 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>426 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>427 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1L2 9.6l7.3-.6L12 2l2.7 7 7.3.6-5.5 4.3 1.7 7.1z"/></svg>428 </span>429 <span class="reviews">8 Reviews</span>430 </div>431 </div>432 <div style="display:flex; align-items:center;">433 <div class="length-label">Length</div>434 <div class="length-value">2.2 mi</div>435 </div>436 </div>437 </div>438 439 </div>440 </div>441 442 <!-- Bottom Navigation -->443 <div class="bottom-bar">444 <div class="nav-icon" title="Trails">445 <svg viewBox="0 0 24 24"><path d="M3 21s4-3 9-3 9 3 9 3V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v17zM6 6h12v11.2c-1.9-.8-4.5-1.2-6-1.2s-4.1.4-6 1.2V6z"/></svg>446 </div>447 <div class="nav-icon" title="Search">448 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 18-5.2-5.2-1.4 1.4L19.6 21 21 20z"/></svg>449 </div>450 <div class="nav-icon" title="Favorites">451 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.2-7-9.5A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 5.5C19 16.8 12 21 12 21z"/></svg>452 </div>453 <div class="nav-icon" title="Profile">454 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-9 2-9 5v3h18v-3c0-3-4-5-9-5z"/></svg>455 </div>456 <div class="nav-icon" title="Settings">457 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm9 3h-2.1a7.9 7.9 0 0 0-.7-1.7l1.5-1.5-1.4-1.4-1.6 1.4c-.5-.3-1.1-.6-1.7-.7V2h-2v2.1c-.6.1-1.2.4-1.7.7L7.7 3.3 6.3 4.7l1.5 1.5c-.3.5-.6 1.1-.7 1.7H5v2h2.1c.1.6.4 1.2.7 1.7l-1.5 1.5 1.4 1.4 1.6-1.4c.5.3 1.1.6 1.7.7V22h2v-2.1c.6-.1 1.2-.4 1.7-.7l1.6 1.4 1.4-1.4-1.5-1.5c.3-.5.6-1.1.7-1.7H21v-2z"/></svg>458 </div>459 </div>460 461 <!-- Home Indicator -->462 <div class="home-indicator"></div>463 464</div>465</body>466</html>