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 UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f6f6f6;15 color: #1f1f1f;16 }17 18 /* Top status bar and app bar */19 .status-bar {20 height: 110px;21 background: #2d5f1b;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 36px;26 box-sizing: border-box;27 font-weight: 600;28 }29 .status-time { font-size: 40px; letter-spacing: 1px; }30 .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }31 .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: .9; }32 33 .toolbar {34 height: 120px;35 background: #ffffff;36 box-shadow: 0 2px 8px rgba(0,0,0,0.08);37 display: flex;38 align-items: center;39 padding: 0 36px;40 box-sizing: border-box;41 }42 .toolbar-actions { margin-left: auto; display: flex; gap: 40px; }43 .icon {44 width: 56px; height: 56px; fill: #2d2d2d;45 }46 47 .content {48 padding: 34px 40px 180px 40px;49 }50 51 .title {52 font-size: 72px;53 font-weight: 700;54 margin: 26px 0 28px 0;55 }56 57 .label {58 font-size: 44px;59 font-weight: 700;60 margin: 28px 0 18px 0;61 }62 .label .muted { color: #757575; font-weight: 500; margin-left: 12px; }63 64 .field {65 position: relative;66 background: #dde6d6;67 border: 2px solid #b9c7ae;68 border-radius: 24px;69 height: 116px;70 display: flex;71 align-items: center;72 padding: 0 150px 0 36px;73 box-sizing: border-box;74 font-size: 44px;75 color: #2b2b2b;76 }77 .field.placeholder { color: #7d8a73; }78 .field .suffix {79 position: absolute;80 right: 24px;81 top: 50%;82 transform: translateY(-50%);83 display: flex;84 align-items: center;85 gap: 18px;86 }87 .chip-row { display: flex; gap: 18px; flex-wrap: wrap; }88 .chip {89 padding: 22px 30px;90 border-radius: 16px;91 border: 2px solid #c8c8c8;92 font-size: 40px;93 color: #313131;94 background: #fff;95 }96 .chip.active {97 background: #3f7f20;98 color: #fff;99 border-color: #3f7f20;100 }101 102 /* Length slider mock */103 .slider {104 margin-top: 28px;105 height: 24px;106 position: relative;107 }108 .slider .track {109 height: 16px;110 background: #8b8b8b;111 border-radius: 10px;112 position: relative;113 }114 .slider .filled {115 position: absolute;116 height: 16px;117 background: #3f7f20;118 border-radius: 10px 0 0 10px;119 left: 0;120 width: 640px;121 }122 .slider .thumb {123 position: absolute;124 top: -22px;125 width: 70px; height: 70px;126 background: #2e6a8e;127 border: 6px solid rgba(0,0,0,0.15);128 border-radius: 50%;129 box-shadow: 0 6px 10px rgba(0,0,0,0.15);130 }131 .slider .thumb.start { left: -10px; }132 .slider .thumb.end { left: 620px; }133 .ticks {134 display: flex;135 justify-content: space-between;136 margin-top: 18px;137 color: #2d2d2d;138 font-size: 38px;139 padding: 0 6px;140 }141 142 /* Overlay modal */143 .overlay {144 position: absolute;145 inset: 0;146 background: rgba(0,0,0,0.45);147 display: flex;148 align-items: center;149 justify-content: center;150 }151 .dialog {152 width: 920px;153 background: #ffffff;154 border-radius: 16px;155 box-shadow: 0 24px 60px rgba(0,0,0,0.35);156 padding: 48px 56px;157 box-sizing: border-box;158 }159 .dialog-title {160 font-size: 58px;161 font-weight: 700;162 margin-bottom: 26px;163 }164 .dialog-row {165 display: flex;166 align-items: center;167 gap: 36px;168 }169 .spinner {170 width: 120px;171 height: 120px;172 border: 14px solid #3f7f20;173 border-top-color: transparent;174 border-radius: 50%;175 animation: spin 1.2s linear infinite;176 }177 .dialog-msg { font-size: 42px; color: #7b7b7b; }178 @keyframes spin { to { transform: rotate(360deg); } }179 180 /* Bottom nav */181 .bottom-nav {182 position: absolute;183 left: 0; right: 0; bottom: 56px;184 height: 130px;185 background: #3f7f20;186 display: flex;187 justify-content: space-around;188 align-items: center;189 }190 .bottom-nav svg { width: 72px; height: 72px; fill: none; stroke: #ffffff; stroke-width: 6; }191 192 /* iOS home indicator mock */193 .home-indicator {194 position: absolute;195 bottom: 12px;196 left: 50%;197 transform: translateX(-50%);198 width: 360px;199 height: 12px;200 background: #ffffff;201 border-radius: 8px;202 opacity: .95;203 }204 205 /* small circular icon buttons in field */206 .round {207 width: 68px; height: 68px; border-radius: 50%;208 border: 2px solid #bdbdbd;209 background: #eaeaea;210 display: flex; align-items: center; justify-content: center;211 }212 .round svg { width: 34px; height: 34px; fill: #5f5f5f; }213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Status bar -->219 <div class="status-bar">220 <div class="status-time">1:11</div>221 <div class="status-icons">222 <div class="status-dot"></div>223 <div class="status-dot" style="opacity:.7;"></div>224 <div class="status-dot" style="opacity:.5;"></div>225 <!-- wifi -->226 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 11c3-3 11-3 14 0M8 14c2-2 6-2 8 0M12 18l-2 2 2 2 2-2z" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>227 <!-- battery -->228 <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/><rect x="4" y="9" width="14" height="6" fill="#fff"/><rect x="20" y="10" width="2" height="4" fill="#fff"/></svg>229 </div>230 </div>231 232 <!-- Toolbar -->233 <div class="toolbar">234 <div></div>235 <div class="toolbar-actions">236 <!-- delete -->237 <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h18M9 6V4h6v2M8 6l1 14h6l1-14" fill="none" stroke="#2d2d2d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>238 <!-- search -->239 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="none" stroke="#2d2d2d" stroke-width="2"/><path d="M20 20l-4-4" stroke="#2d2d2d" stroke-width="2" stroke-linecap="round"/></svg>240 </div>241 </div>242 243 <!-- Main content -->244 <div class="content">245 <div class="title">Search Trails</div>246 247 <div class="label">Location <span class="muted">City, State, Zip</span></div>248 <div class="field">249 Seattle, WA 98102, USA250 <div class="suffix">251 <div class="round">252 <!-- close X -->253 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#5f5f5f" stroke-width="2" stroke-linecap="round"/></svg>254 </div>255 <div class="round">256 <!-- crosshair -->257 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="none" stroke="#5f5f5f" stroke-width="2"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="#5f5f5f" stroke-width="2" stroke-linecap="round"/></svg>258 </div>259 </div>260 </div>261 262 <div class="label">Trail Name, Keyword</div>263 <div class="field placeholder">Search</div>264 265 <div class="label">Sort By</div>266 <div class="chip-row">267 <div class="chip active">Name</div>268 <div class="chip">Distance</div>269 <div class="chip">Most Popular</div>270 <div class="chip">Length</div>271 </div>272 273 <div class="label" style="margin-top:34px;">Activities</div>274 <div class="chip-row">275 <div class="chip active">Any</div>276 <div class="chip">Walking</div>277 <div class="chip">Running</div>278 <div class="chip">Biking</div>279 <div class="chip">Wheelchair Accessible</div>280 </div>281 282 <div class="label" style="margin-top:34px;">Surface</div>283 <div class="chip-row">284 <div class="chip active">Any</div>285 <div class="chip">Asphalt</div>286 <div class="chip">Ballast</div>287 <div class="chip">Cinder</div>288 <div class="chip">Concrete</div>289 <div class="chip">Crushed Stone</div>290 <div class="chip">Dirt</div>291 <div class="chip">Grass</div>292 <div class="chip">Gravel</div>293 <div class="chip">Sand</div>294 <div class="chip">Woodchips</div>295 </div>296 297 <div class="label" style="margin-top:42px;">Length <span class="muted">Miles</span></div>298 <div class="slider">299 <div class="track">300 <div class="filled"></div>301 <div class="thumb start"></div>302 <div class="thumb end"></div>303 </div>304 <div class="ticks">305 <span>0</span><span>5</span><span>10</span><span>15</span><span>20</span><span>20+</span>306 </div>307 </div>308 </div>309 310 <!-- Searching modal overlay -->311 <div class="overlay">312 <div class="dialog">313 <div class="dialog-title">Searching</div>314 <div class="dialog-row">315 <div class="spinner"></div>316 <div class="dialog-msg">Please wait...</div>317 </div>318 </div>319 </div>320 321 <!-- Bottom navigation -->322 <div class="bottom-nav">323 <!-- nav icon 1 -->324 <svg viewBox="0 0 24 24"><path d="M3 12l9-8 9 8v8H3z" stroke-linejoin="round"/></svg>325 <!-- nav icon 2 (search) -->326 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/></svg>327 <!-- nav icon 3 (heart) -->328 <svg viewBox="0 0 24 24"><path d="M12 20s-8-5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-8 10-8 10z"/></svg>329 <!-- nav icon 4 (user) -->330 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 22c2-4 14-4 16 0"/></svg>331 <!-- nav icon 5 (settings) -->332 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"/><path d="M3 12h3M18 12h3M12 3v3M12 18v3"/></svg>333 </div>334 335 <div class="home-indicator"></div>336</div>337</body>338</html>