GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Transit Planner UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #396E88;14 border-radius: 32px;15 box-shadow: 0 10px 30px rgba(0,0,0,0.15);16 }17 /* Top map area */18 .map {19 position: absolute;20 left: 0;21 top: 0;22 width: 1080px;23 height: 430px;24 background: #E0E0E0;25 border-bottom: 1px solid #BDBDBD;26 display: flex;27 align-items: center;28 justify-content: center;29 color: #757575;30 font-weight: 600;31 }32 /* Floating controls on map */33 .pill {34 position: absolute;35 right: 36px;36 top: 250px;37 background: #FFFFFF;38 color: #2D6F8A;39 height: 96px;40 width: 370px;41 border-radius: 48px;42 box-shadow: 0 6px 16px rgba(0,0,0,0.2);43 display: flex;44 align-items: center;45 justify-content: center;46 gap: 22px;47 font-size: 36px;48 font-weight: 700;49 }50 .round-btn {51 position: absolute;52 width: 110px;53 height: 110px;54 border-radius: 55px;55 background: #FFFFFF;56 box-shadow: 0 6px 16px rgba(0,0,0,0.2);57 display: flex;58 align-items: center;59 justify-content: center;60 }61 .round-btn.back { left: 32px; top: 300px; }62 .round-btn.refresh { left: 520px; top: 300px; }63 64 /* Panel container under map */65 .panel {66 position: absolute;67 left: 0;68 top: 360px;69 width: 1080px;70 background: #2E5F78;71 border-top-left-radius: 40px;72 border-top-right-radius: 40px;73 padding-bottom: 120px;74 }75 .panel-header {76 padding: 28px 32px 0 32px;77 }78 .info-row {79 margin: 22px 24px 0 24px;80 background: #356F8A;81 border-radius: 26px;82 height: 120px;83 display: flex;84 align-items: center;85 color: #fff;86 position: relative;87 }88 .info-row .icon-wrap {89 width: 110px;90 height: 110px;91 margin-left: 20px;92 border-radius: 55px;93 background: rgba(255,255,255,0.15);94 display: flex; align-items: center; justify-content: center;95 }96 .info-row .text {97 margin-left: 20px;98 line-height: 1.2;99 }100 .info-row .title { font-size: 40px; font-weight: 700; }101 .info-row .subtitle { font-size: 28px; opacity: 0.85; }102 .swap {103 position: absolute;104 right: 24px;105 top: 34px;106 width: 72px; height: 72px;107 border-radius: 24px;108 background: rgba(255,255,255,0.18);109 display: flex; align-items: center; justify-content: center;110 }111 112 /* White option cards */113 .card {114 margin: 26px 28px 0 28px;115 background: #FFFFFF;116 border-radius: 28px;117 box-shadow: 0 2px 0 rgba(0,0,0,0.06);118 padding: 24px;119 }120 .card-row {121 display: flex; align-items: center; justify-content: space-between;122 }123 .left {124 display: flex; align-items: center; gap: 20px;125 }126 .mini-icon {127 width: 84px; height: 84px; border-radius: 18px; background: #F3F4F6;128 display: flex; align-items: center; justify-content: center;129 }130 .label-main { font-size: 42px; color: #3A5663; font-weight: 700; }131 .label-sub { font-size: 30px; color: #8A9AA7; }132 .right {133 display: flex; align-items: baseline; gap: 26px;134 }135 .price { font-size: 34px; color: #2E86C1; font-weight: 800; }136 .duration { font-size: 42px; color: #555; font-weight: 800; }137 .muted { color: #8A9AA7; font-size: 28px; }138 139 .divider {140 height: 1px; background: #E9EEF2; margin: 16px -24px 16px -24px;141 }142 143 /* Line badges */144 .badge {145 display: inline-flex;146 align-items: center;147 justify-content: center;148 padding: 8px 18px;149 border-radius: 24px;150 font-size: 36px;151 font-weight: 800;152 color: #fff;153 margin-right: 12px;154 }155 .blue { background: #1E66D2; }156 .red { background: #E43A2B; }157 .gray-dot {158 display: inline-block;159 width: 14px; height: 14px;160 background: #777; border-radius: 7px; margin: 0 16px;161 }162 163 /* Report issue */164 .report {165 position: absolute; right: 44px; bottom: 200px;166 display: flex; align-items: center; gap: 18px;167 color: #FFFFFF;168 font-size: 40px; font-weight: 700;169 opacity: 0.95;170 }171 /* Home indicator */172 .home-indicator {173 position: absolute; left: 50%; bottom: 60px;174 width: 240px; height: 12px; border-radius: 6px;175 background: rgba(255,255,255,0.9);176 transform: translateX(-50%);177 }178</style>179</head>180<body>181<div id="render-target">182 183 <!-- Map placeholder -->184 <div class="map">[IMG: Map of New York City]</div>185 186 <!-- Floating controls -->187 <div class="round-btn back">188 <svg width="42" height="42" viewBox="0 0 24 24" fill="#2D6F8A">189 <path d="M15.5 5.5L9 12l6.5 6.5-1.5 1.5L6 12l8-8 1.5 1.5z"/>190 </svg>191 </div>192 193 <div class="round-btn refresh">194 <svg width="50" height="50" viewBox="0 0 24 24" fill="#2D6F8A">195 <path d="M12 6V3l4 4-4 4V8a4 4 0 1 0 4 4h2a6 6 0 1 1-6-6z"/>196 </svg>197 </div>198 199 <div class="pill">200 <svg width="44" height="44" viewBox="0 0 24 24" fill="#2D6F8A">201 <path d="M12 7a1 1 0 0 1 1 1v4l3 2-1 1-4-3V8a1 1 0 0 1 1-1zM12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/>202 </svg>203 <span>Leave: Now</span>204 </div>205 206 <!-- Main panel -->207 <div class="panel">208 209 <!-- Destination -->210 <div class="info-row">211 <div class="icon-wrap">212 <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff">213 <path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>214 </svg>215 </div>216 <div class="text">217 <div class="title">The Roxy Hotel New York</div>218 <div class="subtitle">2 6th Ave, New York, NY 10013, USA</div>219 </div>220 </div>221 222 <!-- From -->223 <div class="info-row">224 <div class="icon-wrap">225 <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff">226 <path d="M5 3h14a2 2 0 0 1 2 2v9a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V5a2 2 0 0 1 2-2zm1 3v6h12V6H6zm2 10h8a3 3 0 0 0 3-3H5a3 3 0 0 0 3 3z"/>227 </svg>228 </div>229 <div class="text">230 <div class="title">World Trade Center</div>231 </div>232 <div class="swap">233 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">234 <path d="M7 7h9l-2-2 1-1 4 4-4 4-1-1 2-2H7V7zm10 10H8l2 2-1 1-4-4 4-4 1 1-2 2h10v2z"/>235 </svg>236 </div>237 </div>238 239 <!-- Trip summary -->240 <div class="info-row" style="opacity:0.95;">241 <div class="icon-wrap">242 <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff">243 <path d="M12 2c-3 5-5 7-5 10a5 5 0 0 0 10 0c0-3-2-5-5-10z"/>244 </svg>245 </div>246 <div class="text">247 <div class="title" style="font-weight:600;">A short trip..</div>248 </div>249 </div>250 251 <!-- Walk card -->252 <div class="card">253 <div class="card-row">254 <div class="left">255 <div class="mini-icon">256 <svg width="52" height="52" viewBox="0 0 24 24" fill="#3A5663">257 <path d="M13 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-6 16v-2l3-4 1-3 2 1-1 3 3 4v1h-2l-2-3-2 3H7z"/>258 </svg>259 </div>260 <div>261 <div class="label-main">Walk</div>262 </div>263 </div>264 <div class="right">265 <div class="muted">40 cal</div>266 <div class="duration">10 min</div>267 </div>268 </div>269 </div>270 271 <!-- Transit card: E -->272 <div class="card">273 <div class="card-row">274 <div class="left">275 <span class="badge blue">E</span>276 <div>277 <div class="muted">in 1, 6, 18 min</div>278 </div>279 </div>280 <div class="right">281 <div class="price">$2.75</div>282 <div class="duration">10 min</div>283 </div>284 </div>285 <div class="divider"></div>286 <div class="card-row">287 <div class="left">288 <span class="badge blue">A</span>289 <span class="badge blue">C</span>290 <div>291 <div class="muted">in 3, 5, 16 min</div>292 </div>293 </div>294 <div class="right">295 <div class="price">$2.75</div>296 <div class="duration">10 min</div>297 </div>298 </div>299 <div class="divider"></div>300 <div class="card-row">301 <div class="left">302 <span class="badge red">1</span>303 <span class="gray-dot"></span>304 <span class="badge red">2</span>305 <span class="badge red">3</span>306 <div>307 <div class="muted">in 1, 18, 25 min</div>308 </div>309 </div>310 <div class="right">311 <div class="price">$2.75</div>312 <div class="duration">31 min</div>313 </div>314 </div>315 </div>316 317 <!-- My Cycle header -->318 <div class="card" style="background:#FFFFFF;">319 <div class="card-row">320 <div class="left">321 <div class="mini-icon">322 <svg width="50" height="50" viewBox="0 0 24 24" fill="#3A5663">323 <path d="M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm14 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 9h4l2 3h3l-1 1h-3l-2-3H6V9z"/>324 </svg>325 </div>326 <div class="label-main">My Cycle</div>327 </div>328 <div class="right">329 <div class="muted">35 cal</div>330 <div class="duration">10 min</div>331 </div>332 </div>333 </div>334 335 <!-- Citi Bike card -->336 <div class="card">337 <div class="card-row">338 <div class="left">339 <div style="width:96px; height:96px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; border-radius:16px;">[IMG: Citi Bike Logo]</div>340 <div>341 <div class="label-main">Citi Bike</div>342 <div class="muted">Bikes: 28, Spaces: 45</div>343 </div>344 </div>345 <div class="right">346 <div class="price">$4.00</div>347 <div class="duration">10 min</div>348 </div>349 </div>350 </div>351 352 </div>353 354 <!-- Report Issue -->355 <div class="report">356 <svg width="48" height="48" viewBox="0 0 24 24" fill="#FFFFFF">357 <path d="M12 2a10 10 0 1 0 0 20c5.5 0 10-4.5 10-10S17.5 2 12 2zm1 14h-2v-2h2v2zm0-4h-2V7h2v5z"/>358 </svg>359 <span>Report Issue</span>360 </div>361 362 <!-- Home indicator -->363 <div class="home-indicator"></div>364</div>365</body>366</html>