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>Seattle Trails UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #2E3A2F;17 }18 19 .safe-area { padding: 0 36px; }20 21 /* Status bar */22 .status-bar {23 height: 90px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 color: #4A4A4A;29 font-weight: 500;30 font-size: 36px;31 }32 .status-left { display: flex; align-items: center; gap: 22px; }33 .sb-icon {34 width: 36px; height: 36px; background: #BDBDBD; border-radius: 8px;35 }36 .status-right { display: flex; align-items: center; gap: 22px; }37 .wifi {38 width: 40px; height: 28px; border-radius: 6px; border: 2px solid #656565;39 }40 .battery {41 width: 50px; height: 26px; border: 2px solid #656565; border-radius: 6px; position: relative;42 }43 .battery::after {44 content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 10px; background: #656565; border-radius: 2px;45 }46 47 /* Search pill */48 .search-pill {49 margin: 8px 36px 0 36px;50 height: 110px;51 border: 1px solid #E5E5E5;52 border-radius: 55px;53 display: flex;54 align-items: center;55 justify-content: space-between;56 padding: 0 24px;57 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;58 }59 .search-left { display: flex; align-items: center; gap: 24px; }60 .search-text { font-size: 42px; color: #2F3F2E; }61 .circle-btn {62 width: 76px; height: 76px; border-radius: 50%; border: 1px solid #E5E5E5; display: flex; align-items: center; justify-content: center;63 }64 65 /* Filter chips */66 .chips {67 display: flex;68 gap: 22px;69 padding: 26px 36px 16px 36px;70 align-items: center;71 }72 .chip {73 height: 96px;74 padding: 0 32px;75 border-radius: 48px;76 background: #F0F1EE;77 color: #2F3F2E;78 display: flex;79 align-items: center;80 gap: 16px;81 font-size: 34px;82 border: 1px solid #D5D7D2;83 }84 .chip.dark {85 background: #234D17; color: #FFFFFF; border-color: transparent;86 padding: 0 36px;87 }88 .chip .caret {89 width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid #6C6C6C; margin-left: 8px;90 }91 .hex {92 width: 44px; height: 44px;93 }94 .hex svg { display: block; }95 96 /* Cards */97 .card {98 margin: 16px 36px 24px 36px;99 border-radius: 36px;100 }101 .card-image {102 width: 100%;103 height: 480px;104 border-radius: 36px;105 background: #E0E0E0;106 border: 1px solid #BDBDBD;107 display: flex; align-items: center; justify-content: center;108 color: #757575; font-size: 34px;109 position: relative;110 overflow: hidden;111 }112 .bookmark {113 position: absolute; right: 24px; top: 24px; width: 52px; height: 52px; background: rgba(255,255,255,0.8); border-radius: 12px; display: flex; align-items: center; justify-content: center;114 }115 .dots {116 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);117 display: flex; gap: 16px;118 }119 .dot {120 width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.85); border: 1px solid rgba(0,0,0,0.08);121 }122 .info {123 display: flex; justify-content: space-between; align-items: flex-start; padding-top: 18px;124 }125 .text {126 color: #4A5A45;127 }128 .meta {129 font-size: 32px; color: #6E756E;130 display: flex; align-items: center; gap: 12px;131 }132 .star { width: 30px; height: 30px; }133 .title {134 font-size: 48px; font-weight: 800; color: #2E5E2A; margin: 8px 0 6px 0;135 }136 .sub {137 font-size: 34px; color: #6E756E;138 }139 .download {140 width: 70px; height: 70px; border-radius: 50%;141 border: 2px solid #2E5E2A; display: flex; align-items: center; justify-content: center; margin-top: 8px;142 }143 144 /* Floating Action Button */145 .fab {146 position: absolute; left: 50%; transform: translateX(-50%);147 bottom: 430px;148 width: 128px; height: 128px; border-radius: 50%;149 background: #2E5E2A; box-shadow: 0 8px 24px rgba(0,0,0,0.25);150 display: flex; align-items: center; justify-content: center;151 }152 .fab-inner {153 width: 92px; height: 92px; border-radius: 50%; background: #FFFFFF22; display: flex; align-items: center; justify-content: center;154 }155 156 /* Bottom nav */157 .bottom-nav {158 position: absolute; bottom: 0; left: 0; right: 0;159 height: 220px; border-top: 1px solid #E6E6E6; background: #FFFFFF;160 display: flex; align-items: center; justify-content: space-around; padding-bottom: 24px;161 }162 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #7B7F78; font-size: 30px; }163 .nav-item.active { color: #2E5E2A; font-weight: 700; }164 .nav-icon { width: 56px; height: 56px; }165 166 .home-indicator {167 position: absolute; bottom: 226px; left: 50%; transform: translateX(-50%);168 width: 300px; height: 12px; border-radius: 8px; background: #CFCFCF;169 }170</style>171</head>172<body>173<div id="render-target">174 175 <!-- Status Bar -->176 <div class="status-bar">177 <div class="status-left">178 <div>8:29</div>179 <div class="sb-icon"></div>180 <div class="sb-icon"></div>181 <div class="sb-icon" style="border-radius: 50%;"></div>182 </div>183 <div class="status-right">184 <div class="wifi"></div>185 <div class="battery"></div>186 </div>187 </div>188 189 <!-- Search pill -->190 <div class="search-pill">191 <div class="search-left">192 <svg width="42" height="42" viewBox="0 0 24 24">193 <path d="M15 18l-6-6 6-6" stroke="#2E5E2A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>194 </svg>195 <div class="search-text">Seattle</div>196 </div>197 <div class="circle-btn">198 <svg width="36" height="36" viewBox="0 0 24 24">199 <path d="M6 6h2v12H6M12 3h2v18h-2M18 8h2v8h-2" fill="#2E5E2A"/>200 </svg>201 </div>202 </div>203 204 <!-- Filter chips -->205 <div class="chips">206 <div class="chip">207 <div class="hex">208 <svg viewBox="0 0 24 24">209 <path d="M6 4l6-3 6 3v8l-6 3-6-3z" fill="#5B80FF"/>210 <path d="M11 6h2v3h3v2h-3v3h-2v-3H8V9h3z" fill="#FFFFFF"/>211 </svg>212 </div>213 <div>Distance away</div>214 <div class="caret"></div>215 </div>216 <div class="chip">217 <div>Activity</div>218 <div class="caret"></div>219 </div>220 <div class="chip dark">Hard</div>221 </div>222 223 <!-- Card 1 -->224 <div class="card">225 <div class="card-image">226 [IMG: Trail photo - paved path with gate]227 <div class="dots">228 <div class="dot" style="opacity:0.9;"></div>229 <div class="dot" style="opacity:0.6;"></div>230 <div class="dot" style="opacity:0.6;"></div>231 <div class="dot" style="opacity:0.6;"></div>232 </div>233 </div>234 <div class="info">235 <div class="text">236 <div class="meta">237 <span>Hard ·</span>238 <svg class="star" viewBox="0 0 24 24">239 <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#2CC44E"/>240 </svg>241 <span>4.2 (125)</span>242 </div>243 <div class="title">Lake Washington Road Bike Loop</div>244 <div class="sub">Colman Park</div>245 <div class="sub">Length: 63.20 mi</div>246 </div>247 <div class="download">248 <svg width="34" height="34" viewBox="0 0 24 24">249 <path d="M12 4v8m0 0l-4-4m4 4l4-4M5 20h14" stroke="#2E5E2A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>250 </svg>251 </div>252 </div>253 </div>254 255 <!-- Card 2 -->256 <div class="card">257 <div class="card-image">258 [IMG: Trail photo - forest path with ferns]259 <div class="bookmark">260 <svg width="34" height="34" viewBox="0 0 24 24">261 <path d="M6 3h12v18l-6-4-6 4z" fill="#FFFFFF" stroke="#2E5E2A" stroke-width="2"/>262 </svg>263 </div>264 <div class="dots">265 <div class="dot" style="opacity:0.9;"></div>266 <div class="dot" style="opacity:0.6;"></div>267 <div class="dot" style="opacity:0.6;"></div>268 <div class="dot" style="opacity:0.6;"></div>269 </div>270 </div>271 <div class="info">272 <div class="text">273 <div class="meta">274 <span>Hard ·</span>275 <svg class="star" viewBox="0 0 24 24">276 <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#2CC44E"/>277 </svg>278 <span>4.3 (51)</span>279 </div>280 <div class="title">Cougar Mountain Loop</div>281 <div class="sub">Cougar Mountain Regional Wildland Park</div>282 <div class="sub">Length: 23.20 mi · Est. 12h 23m</div>283 </div>284 <div class="download">285 <svg width="34" height="34" viewBox="0 0 24 24">286 <path d="M12 4v8m0 0l-4-4m4 4l4-4M5 20h14" stroke="#2E5E2A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>287 </svg>288 </div>289 </div>290 </div>291 292 <!-- Floating Action Button -->293 <div class="fab">294 <svg width="64" height="64" viewBox="0 0 24 24">295 <path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6zM9 6v12M15 8v12" fill="#FFFFFF" opacity="0.9"/>296 </svg>297 </div>298 299 <!-- Bottom navigation -->300 <div class="home-indicator"></div>301 <div class="bottom-nav">302 <div class="nav-item active">303 <svg class="nav-icon" viewBox="0 0 24 24">304 <circle cx="11" cy="11" r="8" stroke="#2E5E2A" stroke-width="2" fill="none"/>305 <path d="M21 21l-4-4" stroke="#2E5E2A" stroke-width="2" fill="none" stroke-linecap="round"/>306 </svg>307 <div>Explore</div>308 </div>309 <div class="nav-item">310 <svg class="nav-icon" viewBox="0 0 24 24">311 <circle cx="8" cy="10" r="4" fill="#7B7F78"/>312 <circle cx="16" cy="10" r="4" fill="#7B7F78"/>313 <path d="M4 20c1-3 4-5 8-5s7 2 8 5" stroke="#7B7F78" stroke-width="2" fill="none"/>314 </svg>315 <div>Community</div>316 </div>317 <div class="nav-item">318 <svg class="nav-icon" viewBox="0 0 24 24">319 <path d="M4 12l8-8 8 8-8 8-8-8z" fill="#7B7F78"/>320 </svg>321 <div>Navigate</div>322 </div>323 <div class="nav-item">324 <svg class="nav-icon" viewBox="0 0 24 24">325 <path d="M6 3h12v18l-6-4-6 4z" fill="#7B7F78"/>326 </svg>327 <div>Saved</div>328 </div>329 <div class="nav-item">330 <svg class="nav-icon" viewBox="0 0 24 24">331 <circle cx="12" cy="8" r="4" fill="#7B7F78"/>332 <path d="M4 22c2-5 6-7 8-7s6 2 8 7" fill="#7B7F78"/>333 </svg>334 <div>Profile</div>335 </div>336 </div>337 338</div>339</body>340</html>