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", Arial, sans-serif; color:#333; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff;12 }13 14 /* Top system status bar */15 .status-bar {16 height:140px; background:#5ea239; color:#fff; position:relative;17 padding:0 40px; display:flex; align-items:center; justify-content:space-between;18 }19 .status-left { font-weight:600; font-size:44px; letter-spacing:1px; }20 .status-right { display:flex; align-items:center; gap:30px; }21 .dot { width:14px; height:14px; background:#fff; border-radius:50%; opacity:.9; }22 23 /* App header (title row) */24 .app-header {25 background:#fff; position:relative; padding:44px 40px 30px 40px;26 box-shadow:0 2px 6px rgba(0,0,0,0.06);27 }28 .title {29 font-size:66px; font-weight:700; color:#1f1f1f; margin-right:180px;30 }31 .top-icons { position:absolute; right:30px; top:36px; display:flex; gap:38px; }32 .icon-btn { width:84px; height:84px; display:flex; align-items:center; justify-content:center; }33 .icon-btn svg { width:56px; height:56px; stroke:#1f1f1f; }34 35 /* Content area */36 .content { padding:32px 40px 240px 40px; overflow:hidden; }37 .section { margin-top:34px; }38 .label {39 font-size:52px; font-weight:700; color:#3b3b3b; margin-bottom:18px;40 }41 .label span.muted { font-weight:500; color:#8c8c8c; margin-left:14px; font-size:44px; }42 43 .input {44 background:#e7f0e0; border:2px solid #bfcbb7; border-radius:24px;45 padding:28px 120px 28px 28px; font-size:44px; color:#2f2f2f;46 height:118px; display:flex; align-items:center; position:relative;47 }48 .placeholder { color:#8e8e8e; }49 .pill-group { display:flex; flex-wrap:wrap; gap:22px; }50 51 .chip {52 border:2px solid #cfcfcf; color:#6b6b6b; font-size:40px; padding:22px 30px;53 border-radius:16px; background:#fff; display:inline-flex; align-items:center;54 }55 .chip.active { background:#5ea239; color:#fff; border-color:#5ea239; }56 57 /* Icons inside inputs */58 .input .suffix {59 position:absolute; right:132px; top:50%; transform:translateY(-50%);60 width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;61 color:#6f6f6f;62 }63 .input .geo {64 position:absolute; right:28px; top:50%; transform:translateY(-50%);65 width:76px; height:76px; border-radius:50%; border:2px solid #bfcbb7; display:flex; align-items:center; justify-content:center;66 }67 .input svg { stroke:#6f6f6f; }68 69 /* Slider */70 .slider-wrap { margin-top:20px; padding:10px 10px 0 10px; }71 .slider-track {72 height:18px; background:#bfbfbf; border-radius:10px; position:relative;73 }74 .slider-fill {75 position:absolute; left:0; top:0; bottom:0; width:66%;76 background:#5ea239; border-radius:10px;77 }78 .thumb {79 position:absolute; top:50%; transform:translate(-50%, -50%);80 width:66px; height:66px; background:#4fa0d4; border:6px solid #e9f3fa; border-radius:50%;81 box-shadow:0 2px 4px rgba(0,0,0,0.2);82 }83 .thumb.left { left:0%; }84 .thumb.right { left:62%; }85 .scale {86 display:flex; justify-content:space-between; margin-top:18px;87 padding:0 6px; color:#4b4b4b; font-size:38px;88 }89 90 /* Bottom navigation */91 .bottom-nav {92 position:absolute; left:0; right:0; bottom:46px; height:170px; background:#5ea239;93 display:flex; align-items:center; justify-content:space-around; color:#fff;94 padding:0 40px;95 }96 .nav-item svg { width:80px; height:80px; stroke:#ffffff; }97 98 /* Home indicator */99 .home-indicator {100 position:absolute; left:50%; transform:translateX(-50%);101 bottom:16px; width:300px; height:16px; border-radius:12px; background:#111;102 }103</style>104</head>105<body>106<div id="render-target">107 108 <!-- Green status bar -->109 <div class="status-bar">110 <div class="status-left">1:10</div>111 <div class="status-right">112 <div class="dot"></div>113 <div style="width:64px;height:40px;border:4px solid #fff;border-radius:8px;position:relative;"></div>114 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">115 <path d="M2 12h4l3 7 4-14 3 7h6"></path>116 </svg>117 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">118 <path d="M2 12c4-6 16-6 20 0"></path>119 <path d="M6 12c2-3 10-3 12 0"></path>120 <circle cx="18" cy="5" r="2" fill="#fff"></circle>121 </svg>122 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">123 <path d="M3 7h18"></path>124 <path d="M3 12h18"></path>125 <path d="M3 17h18"></path>126 </svg>127 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">128 <rect x="3" y="6" width="14" height="12" rx="2"></rect>129 <path d="M21 10v4"></path>130 </svg>131 </div>132 </div>133 134 <!-- App header with title and action icons -->135 <div class="app-header">136 <div class="title">Search Trails</div>137 <div class="top-icons">138 <div class="icon-btn" title="Delete">139 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">140 <path d="M3 6h18"></path>141 <path d="M8 6v-2h8v2"></path>142 <rect x="6" y="6" width="12" height="14" rx="2"></rect>143 </svg>144 </div>145 <div class="icon-btn" title="Search">146 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">147 <circle cx="11" cy="11" r="7"></circle>148 <path d="M20 20l-4.5-4.5"></path>149 </svg>150 </div>151 </div>152 </div>153 154 <div class="content">155 156 <!-- Location -->157 <div class="section">158 <div class="label">Location <span class="muted">City, State, Zip</span></div>159 <div class="input">160 Seattle, WA 98102, USA161 <div class="suffix">162 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">163 <path d="M6 6l12 12M18 6L6 18"></path>164 </svg>165 </div>166 <div class="geo">167 <svg viewBox="0 0 24 24" fill="none" stroke="#6f6f6f" stroke-width="2">168 <circle cx="12" cy="12" r="3"></circle>169 <path d="M12 2v4M12 18v4M2 12h4M18 12h4"></path>170 </svg>171 </div>172 </div>173 </div>174 175 <!-- Trail Name -->176 <div class="section">177 <div class="label">Trail Name, Keyword</div>178 <div class="input"><span class="placeholder">Search</span></div>179 </div>180 181 <!-- Sort By -->182 <div class="section">183 <div class="label">Sort By</div>184 <div class="pill-group">185 <div class="chip active">Name</div>186 <div class="chip">Distance</div>187 <div class="chip">Most Popular</div>188 <div class="chip">Length</div>189 </div>190 </div>191 192 <!-- Activities -->193 <div class="section">194 <div class="label">Activities</div>195 <div class="pill-group">196 <div class="chip active">Any</div>197 <div class="chip">ATV</div>198 <div class="chip">Bike</div>199 <div class="chip">Cross Country Skiing</div>200 <div class="chip">Fishing</div>201 <div class="chip">Horseback Riding</div>202 <div class="chip">Inline Skating</div>203 <div class="chip">Mountain Biking</div>204 <div class="chip">Snowmobiling</div>205 <div class="chip">Walking</div>206 <div class="chip">Wheelchair Accessible</div>207 </div>208 </div>209 210 <!-- Surface -->211 <div class="section">212 <div class="label">Surface</div>213 <div class="pill-group">214 <div class="chip active">Any</div>215 <div class="chip">Asphalt</div>216 <div class="chip">Ballast</div>217 <div class="chip">Cinder</div>218 <div class="chip">Concrete</div>219 <div class="chip">Crushed Stone</div>220 <div class="chip">Dirt</div>221 <div class="chip">Grass</div>222 <div class="chip">Gravel</div>223 <div class="chip">Sand</div>224 <div class="chip">Woodchips</div>225 </div>226 </div>227 228 <!-- Length -->229 <div class="section">230 <div class="label">Length <span class="muted">Miles</span></div>231 <div class="slider-wrap">232 <div class="slider-track">233 <div class="slider-fill"></div>234 <div class="thumb left"></div>235 <div class="thumb right"></div>236 </div>237 <div class="scale">238 <div>0</div><div>5</div><div>10</div><div>15</div><div>20</div><div>20+</div>239 </div>240 </div>241 </div>242 243 <!-- Filler to hint next section title -->244 <div class="section">245 <div class="label">Type</div>246 </div>247 248 </div>249 250 <!-- Bottom navigation bar -->251 <div class="bottom-nav">252 <div class="nav-item" title="Explore">253 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">254 <circle cx="12" cy="12" r="10"></circle>255 <path d="M8 8l8-2-2 8-8 2 2-8z"></path>256 </svg>257 </div>258 <div class="nav-item" title="Search">259 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">260 <circle cx="11" cy="11" r="7"></circle>261 <path d="M20 20l-4.5-4.5"></path>262 </svg>263 </div>264 <div class="nav-item" title="Favorites">265 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">266 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 0 1 8-3 4.5 4.5 0 0 1 8 3c0 5.5-7 10-7 10z"></path>267 </svg>268 </div>269 <div class="nav-item" title="Account">270 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">271 <circle cx="12" cy="8" r="4"></circle>272 <path d="M4 20c2-4 14-4 16 0"></path>273 </svg>274 </div>275 <div class="nav-item" title="Settings">276 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">277 <circle cx="12" cy="12" r="3"></circle>278 <path d="M19 12l2-1-2-1-.6-2 1.2-1.7-1.7-1.2L15 4l-1-2-1 2-2 .6-1.7-1.2-1.2 1.7.6 2-2 1-2 1 2 1 .6 2-1.2 1.7 1.7 1.2L9 20l1 2 1-2 2-.6 1.7 1.2 1.2-1.7-.6-2z"></path>279 </svg>280 </div>281 </div>282 283 <div class="home-indicator"></div>284 285</div>286</body>287</html>