GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Map Ride UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #f6f7f9;14 font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;15 color: #333;16 }17 18 /* Top map area */19 .map {20 position: relative;21 width: 100%;22 height: 1100px;23 background: #E0E0E0;24 border-bottom: 1px solid #d1d1d1;25 display: flex;26 align-items: center;27 justify-content: center;28 color: #757575;29 }30 .map .label {31 font-size: 28px;32 padding: 12px 20px;33 border: 1px solid #BDBDBD;34 border-radius: 8px;35 background: rgba(255,255,255,0.7);36 }37 38 /* Status bar overlay */39 .status-bar {40 position: absolute;41 top: 22px;42 left: 24px;43 right: 24px;44 height: 60px;45 display: flex;46 align-items: center;47 justify-content: space-between;48 pointer-events: none;49 }50 .status-left { display: flex; align-items: center; gap: 18px; }51 .status-time { font-weight: 600; font-size: 32px; color: #2c2c2c; }52 .status-icons { display: flex; gap: 16px; }53 .status-icons svg { width: 28px; height: 28px; stroke: #444; fill: none; }54 55 /* Floating controls */56 .fab {57 position: absolute;58 width: 96px;59 height: 96px;60 border-radius: 50%;61 background: #fff;62 box-shadow: 0 8px 18px rgba(0,0,0,0.15);63 display: flex;64 align-items: center;65 justify-content: center;66 }67 .fab.back { left: 32px; top: 210px; }68 .fab-stack { position: absolute; right: 32px; top: 280px; display: flex; flex-direction: column; gap: 26px; }69 .fab svg { width: 48px; height: 48px; stroke: #4a4a4a; fill: none; }70 71 /* Map markers */72 .marker {73 position: absolute;74 padding: 12px 20px;75 background: #2bab4f;76 color: #fff;77 font-weight: 700;78 border-radius: 12px;79 box-shadow: 0 6px 14px rgba(0,0,0,0.2);80 font-size: 30px;81 }82 .marker.start { right: 150px; top: 80px; }83 .marker.end { left: 260px; top: 730px; }84 85 /* Segmented control */86 .segment {87 position: relative;88 margin: -40px auto 24px auto;89 width: 980px;90 height: 120px;91 background: #fff;92 border: 2px solid #cfd8dc;93 border-radius: 60px;94 display: flex;95 overflow: hidden;96 }97 .segment .tab {98 flex: 1;99 display: flex;100 align-items: center;101 justify-content: center;102 font-size: 34px;103 font-weight: 700;104 color: #5c7180;105 }106 .segment .tab.active {107 background: #3d6e8b;108 color: #fff;109 }110 111 /* Info sections */112 .content { padding: 0 40px; }113 .card-row {114 background: #fff;115 border-radius: 26px;116 box-shadow: 0 2px 0 rgba(0,0,0,0.04);117 padding: 36px;118 display: flex;119 align-items: center;120 justify-content: space-between;121 margin-bottom: 20px;122 }123 .left-icon {124 width: 84px;125 height: 84px;126 border-radius: 18px;127 background: #f0f2f4;128 border: 1px solid #d7dce0;129 display: flex;130 align-items: center;131 justify-content: center;132 margin-right: 26px;133 }134 .row-main {135 display: flex;136 align-items: center;137 gap: 20px;138 }139 .title { font-size: 44px; font-weight: 700; color: #444; }140 .metric { font-size: 36px; font-weight: 700; color: #2d86c7; }141 .metric.gray { color: #333; opacity: 0.75; }142 143 .pill {144 margin: 16px 0 22px 0;145 height: 84px;146 border-radius: 42px;147 background: #fff;148 border: 2px solid #e1e6ea;149 display: flex;150 align-items: center;151 padding: 0 30px;152 color: #2d86c7;153 font-size: 32px;154 box-shadow: inset 0 0 0 rgba(0,0,0,0);155 }156 157 .section-header {158 display: flex;159 align-items: center;160 gap: 18px;161 margin: 28px 0 18px 4px;162 color: #2d86c7;163 font-weight: 800;164 font-size: 40px;165 }166 .tiny-blue {167 width: 58px;168 height: 58px;169 border-radius: 14px;170 background: #2d86c7;171 display: flex;172 align-items: center;173 justify-content: center;174 }175 .tiny-blue svg { width: 36px; height: 36px; stroke: #fff; }176 177 .card {178 background: #fff;179 border-radius: 28px;180 box-shadow: 0 6px 18px rgba(0,0,0,0.06);181 padding: 40px;182 margin-bottom: 34px;183 }184 .card .headline { font-size: 48px; font-weight: 800; color: #3c3c3c; }185 .card .sub { font-size: 30px; color: #7e8b97; margin-top: 6px; }186 .card .actions { margin-top: 26px; display: flex; gap: 22px; }187 .round-btn {188 width: 96px; height: 96px;189 border-radius: 50%;190 border: 2px solid #d9dee3;191 background: #f8f9fb;192 display: flex; align-items: center; justify-content: center;193 }194 .round-btn svg { width: 44px; height: 44px; stroke: #4c5a66; fill: none; }195 196 /* Report Issue */197 .report {198 display: flex;199 justify-content: flex-end;200 align-items: center;201 gap: 16px;202 padding: 20px 40px 0 40px;203 color: #2d86c7;204 font-weight: 700;205 font-size: 36px;206 }207 .report .bubble {208 width: 50px; height: 50px; border-radius: 10px;209 background: #2d86c7; color: #fff; display: flex; align-items: center; justify-content: center;210 font-weight: 900;211 }212 213 /* Bottom nav */214 .bottom-bar {215 position: absolute;216 bottom: 0;217 left: 0;218 width: 100%;219 height: 240px;220 background: #3d6e8b;221 border-top-left-radius: 24px;222 border-top-right-radius: 24px;223 box-shadow: 0 -8px 20px rgba(0,0,0,0.15);224 padding: 30px 40px 70px 40px;225 }226 .nav-buttons {227 display: flex;228 gap: 36px;229 height: 120px;230 }231 .nav-btn {232 flex: 1;233 background: rgba(255,255,255,0.1);234 border-radius: 30px;235 display: flex;236 align-items: center;237 justify-content: center;238 gap: 16px;239 color: #fff;240 font-size: 34px;241 font-weight: 700;242 }243 .nav-btn.active {244 background: rgba(0,0,0,0.2);245 }246 .nav-btn .iconbox {247 width: 70px; height: 70px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center;248 }249 .nav-btn .iconbox svg { width: 40px; height: 40px; stroke: #2d86c7; }250 .home-indicator {251 position: absolute;252 bottom: 18px; left: 50%;253 transform: translateX(-50%);254 width: 340px; height: 12px; border-radius: 6px; background: #fff; opacity: 0.85;255 }256</style>257</head>258<body>259<div id="render-target">260 261 <!-- Map area -->262 <div class="map">263 <div class="label">[IMG: Google Map with cycling route]</div>264 265 <!-- Status bar -->266 <div class="status-bar">267 <div class="status-left">268 <div class="status-time">3:40</div>269 <div class="status-icons">270 <!-- simple signal icon -->271 <svg viewBox="0 0 24 24"><path d="M3 20h2M7 16h2M11 12h2M15 8h2M19 4h2" stroke-width="2"/></svg>272 <!-- wifi -->273 <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0M5 11c4-4 10-4 14 0M8 14c3-3 7-3 10 0M12 18h0" stroke-width="2"/></svg>274 <!-- battery -->275 <svg viewBox="0 0 26 24"><rect x="1" y="6" width="20" height="12" rx="2" stroke-width="2"/><rect x="22" y="10" width="3" height="4" rx="1" stroke-width="2"/></svg>276 </div>277 </div>278 <div style="opacity:.6;"></div>279 </div>280 281 <!-- Back button -->282 <div class="fab back">283 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>284 </div>285 286 <!-- Floating action stack -->287 <div class="fab-stack">288 <div class="fab">289 <!-- star -->290 <svg viewBox="0 0 24 24"><path d="M12 3l3.09 6.26L22 10.27l-5 4.87L18.18 22 12 18.9 5.82 22 7 15.14l-5-4.87 6.91-1.01L12 3z" stroke-width="2"/></svg>291 </div>292 <div class="fab">293 <!-- share -->294 <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3" stroke-width="2"/><circle cx="6" cy="12" r="3" stroke-width="2"/><circle cx="18" cy="19" r="3" stroke-width="2"/><path d="M8.7 10.7l6.6-3.8M8.7 13.3l6.6 3.8" stroke-width="2"/></svg>295 </div>296 <div class="fab">297 <!-- settings (gear simplified) -->298 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" stroke-width="2"/><path d="M4 12h3M17 12h3M12 4v3M12 17v3M6.5 6.5l2.1 2.1M15.4 15.4l2.1 2.1M6.5 17.5l2.1-2.1M15.4 8.6l2.1-2.1" stroke-width="2" stroke-linecap="round"/></svg>299 </div>300 <div class="fab">301 <!-- car -->302 <svg viewBox="0 0 24 24"><path d="M3 14l2-5h14l2 5v4H3v-4z" stroke-width="2"/><circle cx="7" cy="18" r="2" stroke-width="2"/><circle cx="17" cy="18" r="2" stroke-width="2"/></svg>303 </div>304 </div>305 306 <!-- Map markers -->307 <div class="marker start">Start</div>308 <div class="marker end">End</div>309 </div>310 311 <!-- Segmented control -->312 <div class="segment">313 <div class="tab">Quiet</div>314 <div class="tab active">Regular</div>315 <div class="tab">Fast</div>316 </div>317 318 <div class="content">319 <!-- My Cycle row -->320 <div class="card-row">321 <div class="row-main">322 <div class="left-icon">323 <!-- bicycle icon -->324 <svg viewBox="0 0 24 24">325 <circle cx="6" cy="17" r="4" stroke="#677b8a" stroke-width="2" fill="none"/>326 <circle cx="18" cy="17" r="4" stroke="#677b8a" stroke-width="2" fill="none"/>327 <path d="M6 17l5-8h3l-2 4h4" stroke="#677b8a" stroke-width="2" fill="none" stroke-linecap="round"/>328 </svg>329 </div>330 <div class="title">My Cycle</div>331 </div>332 <div style="display:flex; align-items:center; gap:40px;">333 <div class="metric">35 cal</div>334 <div class="metric gray" style="font-size:46px;">9 min</div>335 </div>336 </div>337 338 <!-- Nutrition pill -->339 <div class="pill">1% of daily intake or 0.07 cronuts</div>340 341 <!-- Ride header -->342 <div class="section-header">343 <div class="tiny-blue">344 <svg viewBox="0 0 24 24">345 <circle cx="6" cy="17" r="4" stroke-width="2" fill="none"/>346 <circle cx="18" cy="17" r="4" stroke-width="2" fill="none"/>347 <path d="M6 17l5-8h3l-2 4h4" stroke-width="2" fill="none" stroke-linecap="round"/>348 </svg>349 </div>350 <div>Ride for 0.9 mi</div>351 </div>352 353 <!-- Station card -->354 <div class="card">355 <div class="headline">World Trade Center</div>356 <div class="sub">Station</div>357 <div class="actions">358 <div class="round-btn">359 <svg viewBox="0 0 24 24"><path d="M12 3l3.09 6.26L22 10.27l-5 4.87L18.18 22 12 18.9 5.82 22 7 15.14l-5-4.87 6.91-1.01L12 3z" stroke-width="2"/></svg>360 </div>361 <div class="round-btn">362 <svg viewBox="0 0 24 24"><circle cx="18" cy="5" r="3" stroke-width="2"/><circle cx="6" cy="12" r="3" stroke-width="2"/><circle cx="18" cy="19" r="3" stroke-width="2"/><path d="M8.7 10.7l6.6-3.8M8.7 13.3l6.6 3.8" stroke-width="2"/></svg>363 </div>364 </div>365 </div>366 </div>367 368 <!-- Report issue -->369 <div class="report">370 <div class="bubble">!</div>371 <div>Report Issue</div>372 </div>373 374 <!-- Bottom navigation -->375 <div class="bottom-bar">376 <div class="nav-buttons">377 <div class="nav-btn active">378 <div class="iconbox">379 <svg viewBox="0 0 24 24">380 <circle cx="6" cy="17" r="4" stroke-width="2" fill="none"/>381 <circle cx="18" cy="17" r="4" stroke-width="2" fill="none"/>382 <path d="M6 17l5-8h3l-2 4h4" stroke-width="2" fill="none" stroke-linecap="round"/>383 </svg>384 </div>385 <span>My Cycle</span>386 </div>387 <div class="nav-btn">388 <div class="iconbox">389 <!-- simple bike badge -->390 <svg viewBox="0 0 24 24">391 <rect x="3" y="3" width="18" height="18" rx="4" stroke-width="2" fill="none"/>392 <path d="M7 16l4-6h3l-2 3h3" stroke-width="2" fill="none" stroke-linecap="round"/>393 </svg>394 </div>395 <span>Citi Bike</span>396 </div>397 </div>398 <div class="home-indicator"></div>399 </div>400 401</div>402</body>403</html>