GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Trails UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 color: #202124;16 }17 18 .content { padding: 24px 48px 0 48px; }19 20 /* Status bar */21 .statusbar {22 height: 80px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 48px;27 font-size: 34px;28 color: #4a4a4a;29 }30 .status-icons { display: flex; gap: 24px; align-items: center; }31 .status-dot {32 width: 26px; height: 26px; background: #bdbdbd; border-radius: 6px;33 }34 .status-signal {35 width: 30px; height: 26px; border: 2px solid #757575; border-radius: 3px;36 }37 .status-battery {38 width: 38px; height: 20px; border: 2px solid #757575; border-radius: 3px; position: relative;39 }40 .status-battery::after {41 content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 8px; background: #757575; border-radius: 2px;42 }43 44 /* Search bar */45 .search-wrap { margin-top: 12px; }46 .search-bar {47 height: 116px;48 background: #ffffff;49 border-radius: 58px;50 box-shadow: 0 8px 22px rgba(0,0,0,0.1);51 display: flex;52 align-items: center;53 padding: 0 24px 0 32px;54 }55 .search-icon {56 width: 54px; height: 54px; border: 2px solid #9e9e9e; border-radius: 50%;57 display: flex; align-items: center; justify-content: center; margin-right: 22px;58 }59 .search-input {60 font-size: 42px; color: #777; flex: 1;61 }62 .filter-btn {63 width: 86px; height: 86px; border-radius: 43px; background: #f1f3f4;64 box-shadow: 0 6px 18px rgba(0,0,0,0.12);65 display: flex; align-items: center; justify-content: center;66 }67 68 /* Chips */69 .chips { display: flex; gap: 24px; margin-top: 28px; }70 .chip {71 padding: 22px 34px;72 background: #eeeff1;73 border-radius: 34px;74 font-size: 34px;75 color: #333;76 display: inline-flex; align-items: center; gap: 16px;77 }78 .chip svg { width: 36px; height: 36px; }79 .chip .down { width: 22px; height: 22px; border: 2px solid #777; border-left: 0; border-top: 0; transform: rotate(45deg); margin-left: 8px; }80 81 /* Headings */82 .section-title {83 margin: 40px 0 24px;84 font-size: 74px;85 font-weight: 800;86 color: #274b2a;87 letter-spacing: -0.5px;88 }89 90 /* Cards */91 .card { margin-bottom: 48px; }92 .card .image {93 width: 984px; height: 560px;94 background: #E0E0E0;95 border: 1px solid #BDBDBD;96 border-radius: 36px;97 position: relative;98 display: flex; justify-content: center; align-items: center;99 color: #757575; font-size: 40px;100 }101 .bookmark {102 position: absolute; right: 24px; top: 24px;103 width: 54px; height: 54px; border-radius: 14px;104 background: rgba(255,255,255,0.8);105 display: flex; align-items: center; justify-content: center;106 border: 1px solid #d0d0d0;107 }108 .trail-meta { margin-top: 26px; display: flex; align-items: flex-start; justify-content: space-between; }109 .trail-left { max-width: 820px; }110 .rating-line { font-size: 34px; color: #666; display: flex; align-items: center; gap: 10px; }111 .rating-line .dot { color: #9e9e9e; margin: 0 8px; }112 .star { width: 28px; height: 28px; }113 .trail-title { font-size: 52px; font-weight: 800; margin: 10px 0 6px; }114 .trail-sub { font-size: 38px; color: #6f6f6f; margin-bottom: 6px; }115 .trail-details { font-size: 36px; color: #8b8b8b; }116 .circle-action {117 width: 92px; height: 92px; border-radius: 46px; background: #ffffff;118 box-shadow: 0 8px 20px rgba(0,0,0,0.14); display: flex; align-items: center; justify-content: center;119 border: 1px solid #e5e5e5; margin-top: 20px;120 }121 122 /* Second section extras */123 .map-pill {124 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);125 padding: 22px 44px; border-radius: 38px;126 background: #2e6a2c; color: #fff; font-size: 40px; font-weight: 700;127 display: inline-flex; align-items: center; gap: 18px;128 box-shadow: 0 10px 26px rgba(46,106,44,0.35);129 }130 .floating-next {131 position: absolute; right: 48px; bottom: 604px;132 width: 100px; height: 100px; border-radius: 50%;133 background: #ffffff; border: 1px solid #e4e4e4;134 box-shadow: 0 10px 24px rgba(0,0,0,0.15);135 display: flex; align-items: center; justify-content: center;136 }137 138 /* Bottom Nav */139 .bottom-nav {140 position: absolute; bottom: 0; left: 0; width: 100%;141 height: 180px; border-top: 1px solid #e5e5e5; background: #ffffff;142 display: flex; align-items: center; justify-content: space-around;143 padding-bottom: 22px;144 }145 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }146 .nav-item svg { width: 48px; height: 48px; }147 .nav-label { font-size: 32px; color: #5b5f58; }148 .nav-item.active .nav-label { color: #2e5a2e; }149 .nav-item.active svg path, .nav-item.active svg circle, .nav-item.active svg rect { stroke: #2e5a2e; fill: none; }150 151 /* Gesture bar */152 .gesture {153 position: absolute; bottom: 184px; left: 50%; transform: translateX(-50%);154 width: 280px; height: 12px; background: #c9c9c9; border-radius: 8px;155 }156</style>157</head>158<body>159<div id="render-target">160 <div class="statusbar">161 <div>8:21</div>162 <div class="status-icons">163 <div class="status-dot"></div>164 <div class="status-dot"></div>165 <div class="status-signal"></div>166 <div class="status-battery"></div>167 </div>168 </div>169 170 <div class="content">171 <!-- Search -->172 <div class="search-wrap">173 <div class="search-bar">174 <div class="search-icon">175 <svg viewBox="0 0 24 24">176 <circle cx="10" cy="10" r="6" stroke="#777" stroke-width="2" fill="none"></circle>177 <line x1="14.5" y1="14.5" x2="21" y2="21" stroke="#777" stroke-width="2" />178 </svg>179 </div>180 <div class="search-input">Find parks</div>181 <div class="filter-btn">182 <svg viewBox="0 0 24 24">183 <line x1="4" y1="6" x2="20" y2="6" stroke="#4a4a4a" stroke-width="2"></line>184 <circle cx="9" cy="6" r="2.5" fill="#4a4a4a"></circle>185 <line x1="4" y1="12" x2="20" y2="12" stroke="#4a4a4a" stroke-width="2"></line>186 <circle cx="15" cy="12" r="2.5" fill="#4a4a4a"></circle>187 <line x1="4" y1="18" x2="20" y2="18" stroke="#4a4a4a" stroke-width="2"></line>188 <circle cx="7" cy="18" r="2.5" fill="#4a4a4a"></circle>189 </svg>190 </div>191 </div>192 </div>193 194 <!-- Chips -->195 <div class="chips">196 <div class="chip">197 <svg viewBox="0 0 24 24">198 <path d="M12 2l6 3v6c0 4-6 9-6 9s-6-5-6-9V5l6-3z" fill="#5383ec"></path>199 </svg>200 <span>Distance away</span>201 <div class="down"></div>202 </div>203 <div class="chip">204 <span>Activity</span>205 <div class="down"></div>206 </div>207 <div class="chip">208 <span>Difficulty</span>209 <div class="down"></div>210 </div>211 </div>212 213 <!-- Section: Top trails nearby -->214 <div class="section-title">Top trails nearby</div>215 216 <div class="card">217 <div class="image">218 [IMG: River trail photo]219 <div class="bookmark">220 <svg viewBox="0 0 24 24">221 <path d="M6 3h12a2 2 0 0 1 2 2v15l-8-5-8 5V5a2 2 0 0 1 2-2z" fill="#3e4e3e" opacity="0.7"></path>222 </svg>223 </div>224 </div>225 226 <div class="trail-meta">227 <div class="trail-left">228 <div class="rating-line">229 <span>Easy</span>230 <span class="dot">•</span>231 <svg class="star" viewBox="0 0 24 24">232 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,20.5 12,16.5 5.5,20.5 7.5,13.5 2,9 9,9" fill="#3CB371"></polygon>233 </svg>234 <span>4.0 (20)</span>235 </div>236 <div class="trail-title">Lodi Garden Trail</div>237 <div class="trail-sub">Lodi Garden</div>238 <div class="trail-details">Length: 1.50 mi · Est. 40m</div>239 </div>240 <div class="circle-action">241 <svg viewBox="0 0 24 24">242 <circle cx="12" cy="12" r="9" stroke="#567" stroke-width="1.8" fill="none"></circle>243 <path d="M12 7v8M8.5 12.5L12 15.8 15.5 12.5" stroke="#567" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>244 </svg>245 </div>246 </div>247 </div>248 249 <!-- Section: Best views nearby -->250 <div class="section-title">Best views nearby</div>251 252 <div class="card" style="position: relative;">253 <div class="image">254 [IMG: Mountain view with clouds]255 <div class="bookmark">256 <svg viewBox="0 0 24 24">257 <path d="M6 3h12a2 2 0 0 1 2 2v15l-8-5-8 5V5a2 2 0 0 1 2-2z" fill="#3e4e3e" opacity="0.7"></path>258 </svg>259 </div>260 <div class="map-pill">261 <svg viewBox="0 0 24 24" width="36" height="36">262 <path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z" fill="none" stroke="#ffffff" stroke-width="2"></path>263 <line x1="9" y1="4" x2="9" y2="20" stroke="#ffffff" stroke-width="2"></line>264 <line x1="15" y1="6" x2="15" y2="22" stroke="#ffffff" stroke-width="2"></line>265 </svg>266 <span>Map</span>267 </div>268 </div>269 </div>270 271 <div class="floating-next">272 <svg viewBox="0 0 24 24">273 <path d="M8 4l8 8-8 8" stroke="#55635a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>274 </svg>275 </div>276 277 </div>278 279 <!-- Gesture bar -->280 <div class="gesture"></div>281 282 <!-- Bottom navigation -->283 <div class="bottom-nav">284 <div class="nav-item active">285 <svg viewBox="0 0 24 24">286 <circle cx="11" cy="11" r="7" stroke="#8a8f86" stroke-width="2" fill="none"></circle>287 <line x1="17" y1="17" x2="22" y2="22" stroke="#8a8f86" stroke-width="2"></line>288 </svg>289 <div class="nav-label">Explore</div>290 </div>291 <div class="nav-item">292 <svg viewBox="0 0 24 24">293 <circle cx="8" cy="10" r="3" stroke="#8a8f86" stroke-width="2" fill="none"></circle>294 <circle cx="16" cy="10" r="3" stroke="#8a8f86" stroke-width="2" fill="none"></circle>295 <path d="M3 20c2-4 7-4 10 0M11 20c2-4 7-4 10 0" stroke="#8a8f86" stroke-width="2" fill="none"></path>296 </svg>297 <div class="nav-label">Community</div>298 </div>299 <div class="nav-item">300 <svg viewBox="0 0 24 24">301 <path d="M12 2l6 10-6 10-6-10 6-10z" stroke="#8a8f86" stroke-width="2" fill="none"></path>302 </svg>303 <div class="nav-label">Navigate</div>304 </div>305 <div class="nav-item">306 <svg viewBox="0 0 24 24">307 <path d="M6 3h12a2 2 0 0 1 2 2v15l-8-5-8 5V5a2 2 0 0 1 2-2z" stroke="#8a8f86" stroke-width="2" fill="none"></path>308 </svg>309 <div class="nav-label">Saved</div>310 </div>311 <div class="nav-item">312 <svg viewBox="0 0 24 24">313 <circle cx="12" cy="8" r="4" stroke="#8a8f86" stroke-width="2" fill="none"></circle>314 <path d="M4 22c0-5 4-8 8-8s8 3 8 8" stroke="#8a8f86" stroke-width="2" fill="none"></path>315 </svg>316 <div class="nav-label">Profile</div>317 </div>318 </div>319</div>320</body>321</html>