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>Map Cycling 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; height:2400px; position:relative; overflow:hidden;11 background:#f5f7fb;12 border-radius:32px;13 box-shadow: 0 20px 60px rgba(0,0,0,0.15);14 }15 /* Map area */16 .map-wrap {17 position:absolute; left:0; top:0; width:100%; height:1180px;18 }19 .map-img {20 position:absolute; inset:0;21 background:#E0E0E0;22 border:1px solid #BDBDBD;23 display:flex; align-items:center; justify-content:center;24 color:#757575; font-weight:600; font-size:34px;25 }26 .google-badge {27 position:absolute; left:28px; bottom:22px; font-size:28px; color:#757575;28 background:rgba(255,255,255,0.85); padding:8px 14px; border-radius:12px; border:1px solid #d0d4db;29 }30 /* Floating buttons */31 .fab, .fab-circle {32 width:92px; height:92px; background:#fff; border-radius:50%;33 box-shadow:0 8px 20px rgba(0,0,0,0.18);34 display:flex; align-items:center; justify-content:center;35 }36 .fab.back {37 position:absolute; left:26px; top:160px;38 }39 .fab-stack {40 position:absolute; right:26px; top:300px; display:flex; flex-direction:column; gap:26px;41 }42 .go-btn {43 position:absolute; right:70px; bottom:120px;44 width:360px; height:150px; border-radius:80px;45 background:linear-gradient(0deg,#2db44d,#34c759);46 box-shadow:0 12px 26px rgba(52,199,89,0.45);47 display:flex; align-items:center; justify-content:center; gap:26px;48 color:#fff; font-size:60px; font-weight:800; letter-spacing:1px;49 }50 .go-icon {51 width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,0.22);52 border:2px solid rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center;53 }54 /* Start / End chips */55 .chip {56 position:absolute; padding:12px 22px; border-radius:14px; color:#fff; font-weight:700; font-size:36px;57 box-shadow:0 6px 14px rgba(0,0,0,0.2);58 }59 .chip.start { right:140px; top:220px; background:#2db44d; }60 .chip.end { left:180px; top:600px; background:#21a453; }61 /* Content area below */62 .content {63 position:absolute; left:0; top:1180px; width:100%; height:1220px; background:#ffffff;64 border-top-left-radius:32px; border-top-right-radius:32px;65 box-shadow:0 -6px 18px rgba(0,0,0,0.08);66 }67 /* Segmented control */68 .segment-wrap {69 width:980px; margin:36px auto 20px auto; background:#f1f3f6; border-radius:28px; padding:10px;70 display:flex; gap:10px; border:1px solid #d7dbe2;71 }72 .seg-item {73 flex:1; height:120px; border-radius:22px; background:#fff; color:#4b596b; font-size:44px; font-weight:700;74 display:flex; align-items:center; justify-content:center; border:1px solid #e3e6ea;75 }76 .seg-item.active { background:#355d83; color:#fff; border-color:#355d83; }77 /* Section heading and stats */78 .row {79 width:980px; margin:12px auto; display:flex; align-items:center; justify-content:space-between;80 }81 .title {82 display:flex; align-items:center; gap:20px; font-size:54px; font-weight:800; color:#3a4a5c;83 }84 .stats { display:flex; align-items:baseline; gap:26px; }85 .cal { color:#2379d8; font-weight:800; font-size:42px; }86 .min { color:#2b2b2b; font-weight:900; font-size:74px; }87 /* Info pill */88 .pill {89 width:980px; margin:26px auto; border:1px solid #cfd6de; border-radius:50px; height:110px;90 display:flex; align-items:center; justify-content:center; color:#3f5872; font-size:40px; background:#fff;91 box-shadow:0 4px 10px rgba(0,0,0,0.04);92 }93 /* Walk to heading */94 .subhead {95 width:980px; margin:20px auto; display:flex; align-items:center; gap:20px; color:#3f5872;96 font-size:50px; font-weight:800;97 }98 .subhead .small-icons { display:flex; align-items:center; gap:16px; }99 /* Card list */100 .card {101 width:980px; margin:20px auto; background:#fff; border-radius:28px; border:1px solid #e2e6eb;102 box-shadow:0 12px 30px rgba(0,0,0,0.08);103 }104 .card-inner { padding:22px 24px 26px 24px; }105 .list-row {106 display:flex; align-items:center; gap:22px; padding:26px 10px; border-bottom:1px solid #edf0f4; font-size:42px; color:#2f3d4c;107 }108 .list-row:last-child { border-bottom:none; }109 .radio {110 width:48px; height:48px; border-radius:50%; border:3px solid #cfd6de; box-shadow:inset 0 0 0 0 #4a86ff;111 }112 .radio.checked { border-color:#4a86ff; box-shadow:inset 0 0 0 14px #4a86ff; }113 .img-square {114 width:84px; height:84px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:14px;115 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; padding:8px;116 }117 .mychip {118 display:flex; align-items:center; gap:14px; padding:12px 18px; border-radius:16px; background:#f5f6f8; border:1px solid #e2e6eb;119 font-size:36px; color:#2f3d4c; font-weight:700;120 }121 .warn { color:#c62828; font-weight:700; }122 /* Bottom navigation */123 .bottom-nav {124 position:absolute; left:0; bottom:0; width:100%; height:240px;125 background:linear-gradient(0deg, #2d5877, #355d83);126 border-top-left-radius:28px; border-top-right-radius:28px;127 box-shadow:0 -12px 28px rgba(0,0,0,0.18);128 }129 .nav-inner { height:100%; display:flex; align-items:center; justify-content:space-around; padding:0 40px; }130 .nav-item {131 width:300px; height:140px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25);132 border-radius:26px; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;133 }134 .home-indicator {135 position:absolute; left:50%; transform:translateX(-50%); bottom:18px; width:300px; height:14px;136 background:#e8eaee; border-radius:7px; opacity:0.9;137 }138 /* Icon default styling */139 svg { display:block; }140</style>141</head>142<body>143<div id="render-target">144 <!-- Map area -->145 <div class="map-wrap">146 <div class="map-img">[IMG: Google Map with cycling route across Singapore]</div>147 148 <div class="fab back">149 <svg width="48" height="48" viewBox="0 0 24 24">150 <path d="M15 5 L8 12 L15 19" stroke="#2f3d4c" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>151 </svg>152 </div>153 154 <div class="fab-stack">155 <div class="fab-circle fab">156 <!-- Share icon -->157 <svg width="42" height="42" viewBox="0 0 24 24">158 <circle cx="6" cy="12" r="3" stroke="#355d83" stroke-width="2" fill="none"></circle>159 <circle cx="18" cy="6" r="3" stroke="#355d83" stroke-width="2" fill="none"></circle>160 <circle cx="18" cy="18" r="3" stroke="#355d83" stroke-width="2" fill="none"></circle>161 <path d="M9 11 L15 7 M9 13 L15 17" stroke="#355d83" stroke-width="2" fill="none" stroke-linecap="round"></path>162 </svg>163 </div>164 <div class="fab-circle fab">165 <!-- Locate icon -->166 <svg width="42" height="42" viewBox="0 0 24 24">167 <circle cx="12" cy="12" r="7" stroke="#355d83" stroke-width="2.2" fill="none"></circle>168 <circle cx="12" cy="12" r="2" fill="#355d83"></circle>169 <path d="M12 2 V6 M12 18 V22 M2 12 H6 M18 12 H22" stroke="#355d83" stroke-width="2" stroke-linecap="round"></path>170 </svg>171 </div>172 <div class="fab-circle fab">173 <!-- Simple vehicle icon -->174 <svg width="44" height="44" viewBox="0 0 24 24">175 <rect x="4" y="9" width="16" height="7" rx="2.2" fill="none" stroke="#355d83" stroke-width="2"></rect>176 <circle cx="7.5" cy="17" r="2.2" fill="#355d83"></circle>177 <circle cx="16.5" cy="17" r="2.2" fill="#355d83"></circle>178 </svg>179 </div>180 </div>181 182 <div class="chip start">Start</div>183 <div class="chip end">End</div>184 185 <div class="go-btn">186 <span>GO</span>187 <div class="go-icon">188 <svg width="42" height="42" viewBox="0 0 24 24">189 <path d="M8 5 L18 12 L8 19 Z" fill="#ffffff"></path>190 </svg>191 </div>192 </div>193 194 <div class="google-badge">Google</div>195 </div>196 197 <!-- Content below -->198 <div class="content">199 <div class="segment-wrap">200 <div class="seg-item">Quiet</div>201 <div class="seg-item active">Regular</div>202 <div class="seg-item">Fast</div>203 </div>204 205 <div class="row">206 <div class="title">207 <svg width="54" height="54" viewBox="0 0 24 24">208 <!-- Bicycle icon -->209 <circle cx="6" cy="17" r="4" stroke="#355d83" stroke-width="2" fill="none"></circle>210 <circle cx="18" cy="17" r="4" stroke="#355d83" stroke-width="2" fill="none"></circle>211 <path d="M6 17 L10 12 L14 12 L18 17 M10 12 L8 7" stroke="#355d83" stroke-width="2" fill="none" stroke-linecap="round"></path>212 </svg>213 <span>All Cycles</span>214 </div>215 <div class="stats">216 <span class="cal">408 cal</span>217 <span class="min">98 min</span>218 </div>219 </div>220 221 <div class="pill">21% of daily intake or 1.2 Singapore Slings</div>222 223 <div class="subhead">224 <div class="small-icons">225 <!-- Walk icon -->226 <svg width="46" height="46" viewBox="0 0 24 24">227 <circle cx="12" cy="5" r="2.4" fill="#355d83"></circle>228 <path d="M10 9 L13 12 L16 12 M11 12 L9 18 M15 12 L16 18" stroke="#355d83" stroke-width="2" fill="none" stroke-linecap="round"></path>229 </svg>230 <span>Walk to</span>231 <!-- small bicycle -->232 <svg width="44" height="44" viewBox="0 0 24 24">233 <circle cx="6" cy="17" r="3.4" stroke="#355d83" stroke-width="2" fill="none"></circle>234 <circle cx="18" cy="17" r="3.4" stroke="#355d83" stroke-width="2" fill="none"></circle>235 <path d="M6 17 L10 12 L14 12 L18 17 M10 12 L8 7" stroke="#355d83" stroke-width="2" fill="none" stroke-linecap="round"></path>236 </svg>237 </div>238 </div>239 240 <div class="card">241 <div class="card-inner">242 <div class="list-row" style="gap:28px;">243 <div class="radio checked"></div>244 <div class="mychip">245 <svg width="34" height="34" viewBox="0 0 24 24">246 <circle cx="6" cy="17" r="3" stroke="#70839a" stroke-width="2" fill="none"></circle>247 <circle cx="18" cy="17" r="3" stroke="#70839a" stroke-width="2" fill="none"></circle>248 <path d="M6 17 L10 12 L14 12 L18 17" stroke="#70839a" stroke-width="2" fill="none" stroke-linecap="round"></path>249 </svg>250 <span>My Cycle</span>251 </div>252 </div>253 254 <div class="list-row">255 <div class="radio"></div>256 <div class="img-square">[IMG: Anywheel Logo]</div>257 <div style="font-weight:800;">4 Cycles</div>258 </div>259 260 <div class="list-row">261 <div class="radio"></div>262 <div class="img-square">[IMG: Anywheel Logo]</div>263 <div class="warn">1 Cycle</div>264 </div>265 266 <div class="list-row">267 <div class="radio"></div>268 <div class="img-square">[IMG: Anywheel Logo]</div>269 <div class="warn">1 Cycle</div>270 </div>271 </div>272 </div>273 </div>274 275 <!-- Bottom navigation -->276 <div class="bottom-nav">277 <div class="nav-inner">278 <div class="nav-item">279 <svg width="52" height="52" viewBox="0 0 24 24">280 <circle cx="6" cy="17" r="4" stroke="#ffffff" stroke-width="2" fill="none"></circle>281 <circle cx="18" cy="17" r="4" stroke="#ffffff" stroke-width="2" fill="none"></circle>282 <path d="M6 17 L10 12 L14 12 L18 17 M10 12 L8 7" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"></path>283 </svg>284 <div style="font-size:40px; font-weight:800;">All Cycles</div>285 </div>286 <div class="nav-item">287 <svg width="52" height="52" viewBox="0 0 24 24">288 <circle cx="6" cy="17" r="4" stroke="#ffffff" stroke-width="2" fill="none"></circle>289 <circle cx="18" cy="17" r="4" stroke="#ffffff" stroke-width="2" fill="none"></circle>290 <path d="M6 17 L10 12 L14 12 L18 17 M10 12 L8 7" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"></path>291 </svg>292 <div style="font-size:40px; font-weight:800;">My Cycle</div>293 </div>294 <div class="nav-item">295 <div class="img-square" style="background:rgba(255,255,255,0.2); color:#fff; border-color:rgba(255,255,255,0.4);">[IMG: Anywheel]</div>296 <div style="font-size:40px; font-weight:800;">Anywheel</div>297 </div>298 </div>299 <div class="home-indicator"></div>300 </div>301</div>302</body>303</html>