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 { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(#5fa833 0 220px, #f1f5ef 220px);15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 right: 0;23 height: 110px;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #ffffff;29 font-size: 42px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .icon {37 width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;38 }39 40 /* Header */41 .header {42 position: absolute;43 top: 110px;44 left: 0;45 right: 0;46 height: 210px;47 background: #121212;48 color: #fff;49 display: flex;50 align-items: center;51 padding: 0 36px;52 box-sizing: border-box;53 }54 .header h1 {55 margin: 0;56 font-size: 64px;57 font-weight: 700;58 letter-spacing: 0.5px;59 }60 .header .filter {61 margin-left: auto;62 width: 96px;63 height: 96px;64 border-radius: 16px;65 background: #1e1e1e;66 display: flex; align-items: center; justify-content: center;67 }68 69 /* Cards */70 .content {71 position: absolute;72 top: 320px;73 left: 0;74 right: 0;75 bottom: 180px;76 padding: 20px 24px 0 24px;77 box-sizing: border-box;78 overflow: hidden;79 }80 .card {81 background: #ffffff;82 border-radius: 22px;83 box-shadow: 0 6px 16px rgba(0,0,0,0.18);84 margin: 22px 6px;85 overflow: hidden;86 position: relative;87 }88 .card .img {89 height: 380px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 color: #757575;93 display: flex; align-items: center; justify-content: center;94 font-size: 36px;95 }96 .heart {97 position: absolute;98 top: 24px;99 right: 24px;100 width: 72px;101 height: 72px;102 border-radius: 36px;103 background: rgba(255,255,255,0.25);104 display: flex; align-items: center; justify-content: center;105 }106 .overlay-chip {107 position: absolute;108 right: 20px;109 top: 150px;110 width: 86px; height: 86px;111 border-radius: 43px;112 background: rgba(0,0,0,0.75);113 color: #fff;114 display: flex; align-items: center; justify-content: center;115 }116 .overlay-chip.second {117 top: 250px;118 width: 86px; height: 120px; border-radius: 48px;119 }120 .info {121 background: #1b1b1b;122 color: #fff;123 padding: 26px 28px;124 }125 .title-row {126 display: flex;127 align-items: baseline;128 gap: 12px;129 margin-bottom: 12px;130 }131 .title-row .title {132 font-size: 56px; font-weight: 700;133 }134 .title-row .meta {135 font-size: 34px; color: #b7b7b7; font-weight: 600;136 }137 .meta-row {138 display: flex;139 align-items: center;140 justify-content: space-between;141 font-size: 36px;142 }143 .stars {144 display: inline-flex;145 gap: 6px;146 margin-right: 16px;147 }148 .length {149 color: #d9d9d9;150 font-weight: 700;151 }152 153 /* Bottom navigation */154 .bottom-nav {155 position: absolute;156 left: 0; right: 0; bottom: 60px;157 height: 150px;158 background: #5fa833;159 border-top-left-radius: 24px;160 border-top-right-radius: 24px;161 display: flex; align-items: center; justify-content: space-around;162 color: #fff;163 }164 .nav-btn {165 width: 120px; height: 120px;166 display: flex; align-items: center; justify-content: center;167 border-radius: 24px;168 }169 .home-indicator {170 position: absolute;171 bottom: 18px; left: 50%; transform: translateX(-50%);172 width: 320px; height: 12px; border-radius: 6px; background: #d0d0d0;173 opacity: 0.9;174 }175 176 /* Utility */177 .muted { color: #bdbdbd; }178</style>179</head>180<body>181<div id="render-target">182 183 <!-- Status bar -->184 <div class="status-bar">185 <div class="time">3:22</div>186 <div class="status-icons">187 <!-- location -->188 <span class="icon">189 <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>190 </span>191 <!-- wifi -->192 <span class="icon">193 <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff"><path d="M2 8.82C6.97 4.76 17.03 4.76 22 8.82l-1.8 2.16C15.65 7.8 8.35 7.8 3.8 11l-1.8-2.18zm4 4.7c4.02-2.88 9.98-2.88 14 0l-1.74 2.08c-3.44-2.1-7.08-2.1-10.52 0L6 13.52zm4.1 4.94c1.88-1.26 3.92-1.26 5.8 0L12 22l-1.9-2.84z"/></svg>194 </span>195 <!-- battery -->196 <span class="icon">197 <svg width="44" height="44" viewBox="0 0 28 28" fill="#fff"><rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/><rect x="4" y="8" width="14" height="8" fill="#fff"/><rect x="22" y="10" width="3" height="4" fill="#fff"/></svg>198 </span>199 </div>200 </div>201 202 <!-- Header -->203 <div class="header">204 <h1>Trail Search</h1>205 <div class="filter">206 <!-- Funnel icon -->207 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">208 <path d="M3 4h18l-6 7v6l-6 3V11L3 4z"/>209 </svg>210 </div>211 </div>212 213 <!-- Cards list -->214 <div class="content">215 216 <!-- Card 1 -->217 <div class="card">218 <div class="img">[IMG: Buffalo Creek Trail Photo]</div>219 <div class="heart">220 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">221 <path d="M12 21s-7-4.35-9-8.5C1.2 8.2 3.4 5 6.5 5c1.9 0 3.6 1.1 4.5 2.7C11.9 6.1 13.6 5 15.5 5 18.6 5 20.8 8.2 21 12.5 19 16.65 12 21 12 21z"/>222 </svg>223 </div>224 <div class="overlay-chip" title="Expand">225 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">226 <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/>227 </svg>228 </div>229 <div class="overlay-chip second" title="Route">230 <svg width="50" height="90" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">231 <path d="M6 19c2 0 4-2 4-4s2-4 4-4 4-2 4-4"/>232 <circle cx="6" cy="19" r="2" fill="#fff"/>233 <circle cx="18" cy="7" r="2" fill="#fff"/>234 </svg>235 </div>236 <div class="info">237 <div class="title-row">238 <div class="title">Buffalo Creek Trail</div>239 <div class="meta">IL</div>240 </div>241 <div class="meta-row">242 <div>243 <span class="stars">244 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>245 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>246 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>247 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>248 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>249 </span>250 <span class="muted">5 Reviews</span>251 </div>252 <div class="length">Length 3.2 mi</div>253 </div>254 </div>255 </div>256 257 <!-- Card 2 -->258 <div class="card">259 <div class="img" style="background:#C9E6C2; border-color:#b6d7ae; color:#2e7d32;">[IMG: Green Hills Illustration]</div>260 <div class="heart">261 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">262 <path d="M12 21s-7-4.35-9-8.5C1.2 8.2 3.4 5 6.5 5c1.9 0 3.6 1.1 4.5 2.7C11.9 6.1 13.6 5 15.5 5 18.6 5 20.8 8.2 21 12.5 19 16.65 12 21 12 21z"/>263 </svg>264 </div>265 <div class="info">266 <div class="title-row">267 <div class="title" style="font-size:52px;">Bull Valley Road Shared-Use Path</div>268 <div class="meta">IL</div>269 </div>270 <div class="meta-row">271 <div>272 <span class="stars">273 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>274 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>275 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>276 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>277 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>278 </span>279 <span class="muted">No Reviews</span>280 </div>281 <div class="length">Length 1.1 mi</div>282 </div>283 </div>284 </div>285 286 <!-- Card 3 -->287 <div class="card">288 <div class="img">[IMG: Tree-lined Path Photo]</div>289 <div class="heart">290 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">291 <path d="M12 21s-7-4.35-9-8.5C1.2 8.2 3.4 5 6.5 5c1.9 0 3.6 1.1 4.5 2.7C11.9 6.1 13.6 5 15.5 5 18.6 5 20.8 8.2 21 12.5 19 16.65 12 21 12 21z"/>292 </svg>293 </div>294 <div class="info">295 <div class="title-row">296 <div class="title">Burnham Greenway</div>297 <div class="meta">IL</div>298 </div>299 <div class="meta-row">300 <div>301 <span class="stars">302 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>303 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>304 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>305 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>306 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>307 </span>308 <span class="muted">2 Reviews</span>309 </div>310 <div class="length">Length 5.3 mi</div>311 </div>312 </div>313 </div>314 315 <!-- Preview of next card (partial) -->316 <div class="card" style="height: 420px;">317 <div class="img" style="height: 260px;">[IMG: Bridge Over River Photo]</div>318 <div class="heart">319 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">320 <path d="M12 21s-7-4.35-9-8.5C1.2 8.2 3.4 5 6.5 5c1.9 0 3.6 1.1 4.5 2.7C11.9 6.1 13.6 5 15.5 5 18.6 5 20.8 8.2 21 12.5 19 16.65 12 21 12 21z"/>321 </svg>322 </div>323 <div class="info">324 <div class="title-row">325 <div class="title" style="font-size:56px;">Another Trail</div>326 <div class="meta">IL</div>327 </div>328 <div class="meta-row">329 <div><span class="stars">330 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>331 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>332 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFD54F"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>333 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>334 <svg width="36" height="36" viewBox="0 0 24 24" fill="#9E9E9E"><path d="M12 .587l3.668 7.431L24 9.75l-6 5.85L19.335 24 12 19.897 4.665 24 6 15.6 0 9.75l8.332-1.732z"/></svg>335 </span>336 <span class="muted">No Reviews</span></div>337 <div class="length">Length 2.8 mi</div>338 </div>339 </div>340 </div>341 342 </div>343 344 <!-- Bottom navigation -->345 <div class="bottom-nav">346 <div class="nav-btn" title="Map">347 <svg width="72" height="72" viewBox="0 0 24 24" fill="#fff">348 <path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6zm12 0v12m-6-12v12"/>349 </svg>350 </div>351 <div class="nav-btn" title="Search">352 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">353 <circle cx="10" cy="10" r="7"/><path d="M15 15l6 6"/>354 </svg>355 </div>356 <div class="nav-btn" title="Favorites">357 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">358 <path d="M12 21s-7-4.35-9-8.5C1.2 8.2 3.4 5 6.5 5c1.9 0 3.6 1.1 4.5 2.7C11.9 6.1 13.6 5 15.5 5 18.6 5 20.8 8.2 21 12.5 19 16.65 12 21 12 21z"/>359 </svg>360 </div>361 <div class="nav-btn" title="Profile">362 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">363 <circle cx="12" cy="8" r="4"/><path d="M4 22c0-4 4-6 8-6s8 2 8 6"/>364 </svg>365 </div>366 <div class="nav-btn" title="Settings" style="font-size:64px; line-height:1;">⚙</div>367 </div>368 369 <!-- Home indicator -->370 <div class="home-indicator"></div>371</div>372</body>373</html>