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>Search Trails - Mock</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: #0c0d0d;15 color: #eaeaea;16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 background: #2f4f22;22 display: flex;23 align-items: center;24 padding: 0 34px;25 box-sizing: border-box;26 color: #fff;27 font-size: 36px;28 letter-spacing: 0.5px;29 }30 .status-bar .right {31 margin-left: auto;32 display: flex;33 gap: 28px;34 align-items: center;35 opacity: 0.95;36 }37 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; }38 39 /* Content area */40 .content {41 position: absolute;42 left: 0;43 right: 0;44 top: 120px;45 bottom: 150px; /* leave space for bottom nav */46 overflow-y: auto;47 padding: 36px 36px 180px;48 box-sizing: border-box;49 }50 51 .header-row {52 display: flex;53 align-items: center;54 margin-top: 8px;55 margin-bottom: 24px;56 }57 .title {58 font-size: 64px;59 font-weight: 700;60 color: #dfe6d9;61 flex: 1;62 }63 .icon-btn {64 width: 84px;65 height: 84px;66 border-radius: 16px;67 display: grid;68 place-items: center;69 color: #d9dfd4;70 }71 72 .label {73 font-size: 44px;74 font-weight: 700;75 color: #cfd5c9;76 margin-top: 24px;77 }78 .sublabel {79 color: #8b9586;80 font-weight: 600;81 margin-left: 12px;82 font-size: 36px;83 }84 85 .input {86 margin-top: 18px;87 background: #0f140f;88 border: 2px solid #314a2c;89 border-radius: 20px;90 padding: 28px 28px;91 font-size: 40px;92 color: #d7e1d3;93 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);94 display: flex;95 align-items: center;96 }97 .input .placeholder { color: #95a390; opacity: 0.9; }98 .input .grow { flex: 1; }99 .input .pill-icon {100 width: 72px; height: 72px; border-radius: 50%;101 display: grid; place-items: center;102 border: 2px solid #3b5d33; color: #a9b7a3; margin-left: 18px;103 }104 105 .chip-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }106 .chip {107 padding: 20px 30px;108 border-radius: 16px;109 border: 2px solid #39423a;110 background: rgba(255,255,255,0.02);111 color: #d9dad9;112 font-size: 36px;113 font-weight: 600;114 }115 .chip.active {116 background: #2f5d25;117 border-color: #2f5d25;118 color: #e9f2e6;119 }120 121 /* Slider mock */122 .slider-block { margin-top: 28px; }123 .slider-track {124 position: relative;125 height: 18px;126 background: #324632;127 border-radius: 9px;128 margin: 38px 12px 18px;129 }130 .slider-fill {131 position: absolute;132 left: 0; right: 0; top: 0; bottom: 0;133 background: #3f742f;134 border-radius: 9px;135 }136 .handle {137 position: absolute;138 top: 50%;139 width: 72px; height: 72px;140 transform: translateY(-50%);141 background: #2b5f6f;142 border: 6px solid #a0c6d0;143 border-radius: 50%;144 }145 .handle.left { left: -6px; }146 .handle.right { right: -6px; }147 .ticks { display: flex; justify-content: space-between; padding: 0 8px; color: #b6beb4; font-size: 34px; }148 149 /* Bottom navigation */150 .bottom-nav {151 position: absolute;152 left: 0; right: 0; bottom: 0;153 height: 150px;154 background: #2f4f22;155 display: flex;156 align-items: center;157 justify-content: space-around;158 padding: 0 24px;159 box-sizing: border-box;160 }161 .nav-btn { width: 120px; height: 120px; display: grid; place-items: center; color: #dfe6d9; opacity: 0.95; }162 163 /* Modal overlay */164 .overlay {165 position: absolute;166 inset: 0;167 background: rgba(0,0,0,0.55);168 }169 .dialog {170 position: absolute;171 left: 70px;172 right: 70px;173 top: 860px;174 background: #3f3f40;175 color: #ffffff;176 border-radius: 18px;177 box-shadow: 0 18px 40px rgba(0,0,0,0.45);178 padding: 46px 40px 54px;179 }180 .dialog h3 {181 margin: 0 0 18px 0;182 font-size: 56px;183 }184 .dialog-row {185 display: flex;186 align-items: center;187 gap: 30px;188 margin-top: 18px;189 }190 .spinner {191 width: 96px; height: 96px;192 border-radius: 50%;193 border: 10px solid #2f5d25;194 border-top-color: transparent;195 animation: spin 1s linear infinite;196 }197 @keyframes spin { to { transform: rotate(360deg); } }198 199 /* Helper SVG colors */200 svg { width: 56px; height: 56px; fill: currentColor; }201 .small svg { width: 40px; height: 40px; }202</style>203</head>204<body>205<div id="render-target">206 207 <!-- Status Bar -->208 <div class="status-bar">209 <div style="font-weight:600;">3:22</div>210 <div class="right">211 <!-- simple status glyphs -->212 <span class="dot"></span>213 <span class="dot"></span>214 <span class="dot"></span>215 <svg viewBox="0 0 24 24" class="small"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 3a7 7 0 0 1 0 14V5z"/></svg>216 <svg viewBox="0 0 24 24" class="small"><path d="M12 3 2 9v12h20V9L12 3zM5 19v-8l7-4 7 4v8H5z"/></svg>217 <svg viewBox="0 0 24 24" class="small"><path d="M12 4a8 8 0 0 0-8 8h3l-4 4-4-4h3a10 10 0 1 1 10 10v-3a8 8 0 0 0 0-16z"/></svg>218 </div>219 </div>220 221 <!-- Content -->222 <div class="content">223 <div class="header-row">224 <div class="title">Search Trails</div>225 <div class="icon-btn" title="Delete">226 <svg viewBox="0 0 24 24"><path d="M6 7h12l-1 14H7L6 7zm3-3h6l1 2H8l1-2z"/></svg>227 </div>228 <div class="icon-btn" title="Search">229 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"/></svg>230 </div>231 </div>232 233 <div class="label">Location <span class="sublabel">City, State, Zip</span></div>234 <div class="input">235 <div class="grow placeholder">Chicago,IL,USA</div>236 <div class="pill-icon" title="Clear">237 <svg viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z"/></svg>238 </div>239 <div class="pill-icon" title="Use my location">240 <svg viewBox="0 0 24 24"><path d="M12 2 9 9 2 12l7 3 3 7 3-7 7-3-7-3-3-7zm0 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10z"/></svg>241 </div>242 </div>243 244 <div class="label" style="margin-top:36px;">Trail Name, Keyword</div>245 <div class="input">246 <div class="grow placeholder">Search</div>247 </div>248 249 <div class="label" style="margin-top:36px;">Sort By</div>250 <div class="chip-row">251 <div class="chip active">Name</div>252 <div class="chip">Distance</div>253 <div class="chip">Most Popular</div>254 <div class="chip">Length</div>255 </div>256 257 <div class="label" style="margin-top:36px;">Activities</div>258 <div class="chip-row">259 <div class="chip">Any</div>260 <div class="chip">ATV</div>261 <div class="chip active">Bike</div>262 <div class="chip">Cross Country Skiing</div>263 <div class="chip">Hiking</div>264 <div class="chip">Running</div>265 </div>266 267 <div class="label" style="margin-top:36px;">Surface</div>268 <div class="chip-row">269 <div class="chip active">Any</div>270 <div class="chip">Asphalt</div>271 <div class="chip">Ballast</div>272 <div class="chip">Cinder</div>273 <div class="chip">Concrete</div>274 <div class="chip">Crushed Stone</div>275 <div class="chip">Dirt</div>276 <div class="chip">Grass</div>277 <div class="chip">Gravel</div>278 <div class="chip">Sand</div>279 <div class="chip">Woodchips</div>280 </div>281 282 <div class="label" style="margin-top:36px;">Length <span class="sublabel">Miles</span></div>283 <div class="slider-block">284 <div class="slider-track">285 <div class="slider-fill"></div>286 <div class="handle left"></div>287 <div class="handle right"></div>288 </div>289 <div class="ticks">290 <span>0</span><span>5</span><span>10</span><span>15</span><span>20+</span>291 </div>292 </div>293 294 <div class="label" style="margin-top:36px;">Type</div>295 <div class="chip-row">296 <div class="chip">Paved</div>297 <div class="chip">Unpaved</div>298 <div class="chip">Loop</div>299 <div class="chip">Out & Back</div>300 </div>301 </div>302 303 <!-- Modal Overlay: Searching -->304 <div class="overlay"></div>305 <div class="dialog">306 <h3>Searching</h3>307 <div class="dialog-row">308 <div class="spinner"></div>309 <div style="font-size:42px; color:#d7d7d7;">Please wait...</div>310 </div>311 </div>312 313 <!-- Bottom Navigation -->314 <div class="bottom-nav">315 <div class="nav-btn" title="Trails">316 <svg viewBox="0 0 24 24"><path d="M2 20h20l-8-8-3 3-9-9z"/></svg>317 </div>318 <div class="nav-btn" title="Search">319 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"/></svg>320 </div>321 <div class="nav-btn" title="Favorites">322 <svg viewBox="0 0 24 24"><path d="M12 21.35 10.55 20C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4 8 4 9.5 4.8 10.3 6c.8-1.2 2.3-2 3.7-2C16 4 18 6 18 8.5c0 3.78-3.4 6.86-8.55 11.5L12 21.35z"/></svg>323 </div>324 <div class="nav-btn" title="Profile">325 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>326 </div>327 <div class="nav-btn" title="Settings">328 <svg viewBox="0 0 24 24"><path d="M19.4 12.9a7.6 7.6 0 0 0 .1-1l2.1-1.6-2-3.5-2.5.6a7.4 7.4 0 0 0-1.7-1L13 2h-4l-.4 2.4c-.6.2-1.2.6-1.7 1l-2.5-.6-2 3.5 2.1 1.6v1l-2.1 1.6 2 3.5 2.5-.6c.5.4 1.1.8 1.7 1L9 22h4l.4-2.4c.6-.2 1.2-.6 1.7-1l2.5.6 2-3.5-2.2-1.8zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>329 </div>330 </div>331 332</div>333</body>334</html>