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 History UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1c2b33; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #376E86;15 }16 17 /* Map header */18 .map-placeholder {19 position: absolute;20 left: 0; top: 0;21 width: 1080px; height: 500px;22 background: #E0E0E0;23 border-bottom: 1px solid #BDBDBD;24 display: flex; align-items: center; justify-content: center;25 color: #757575; font-weight: 600;26 }27 28 /* Back button on map */29 .back-btn {30 position: absolute;31 top: 260px; left: 40px;32 width: 88px; height: 88px;33 border-radius: 44px;34 background: #ffffff;35 box-shadow: 0 6px 18px rgba(0,0,0,0.15);36 display: flex; align-items: center; justify-content: center;37 }38 .back-btn svg { width: 40px; height: 40px; fill: none; stroke: #2b4c5c; stroke-width: 7; }39 40 /* Search bar */41 .search-bar {42 position: absolute;43 left: 40px; top: 360px;44 width: 1000px; height: 120px;45 background: #ffffff;46 border-radius: 30px;47 box-shadow: 0 14px 30px rgba(0,0,0,0.18);48 display: flex; align-items: center;49 padding: 0 32px;50 gap: 24px;51 }52 .search-icon svg { width: 48px; height: 48px; stroke: #3a6c86; stroke-width: 8; fill: none; }53 .search-text { display: flex; align-items: center; gap: 16px; flex: 1; }54 .pill {55 padding: 8px 14px;56 border-radius: 14px;57 background: #E9F3F8;58 color: #3a6c86;59 font-weight: 700;60 font-size: 32px;61 }62 .placeholder-text { font-size: 34px; color: #5a6b74; }63 .swap-btn {64 width: 72px; height: 72px;65 border-radius: 36px;66 background: #F3F7FA;67 display: flex; align-items: center; justify-content: center;68 }69 .swap-btn svg { width: 42px; height: 42px; fill: none; stroke: #3a6c86; stroke-width: 7; }70 71 /* Quick actions */72 .quick-actions {73 position: absolute;74 left: 40px; top: 520px;75 width: 1000px;76 display: flex; gap: 30px;77 }78 .qa {79 flex: 1;80 height: 150px;81 background: rgba(255,255,255,0.10);82 border-radius: 24px;83 display: flex; align-items: center; justify-content: center;84 border: 1px solid rgba(255,255,255,0.15);85 }86 .qa svg { width: 52px; height: 52px; fill: none; stroke: #cfe2ea; stroke-width: 7; }87 88 /* Sections and cards */89 .section-title {90 position: absolute;91 left: 40px;92 font-weight: 700;93 color: #ffffff;94 letter-spacing: 0.2px;95 }96 .section-24 { top: 710px; font-size: 34px; }97 .section-7 { top: 1450px; font-size: 34px; }98 99 .card {100 position: absolute;101 left: 40px;102 width: 1000px;103 background: #ffffff;104 border-radius: 32px;105 box-shadow: 0 8px 22px rgba(0,0,0,0.12);106 overflow: hidden;107 }108 .card.card-24 { top: 770px; }109 .card.card-7 { top: 1510px; }110 111 .list-item {112 display: flex;113 align-items: center;114 padding: 28px 30px;115 gap: 28px;116 border-top: 1px solid #eef1f4;117 }118 .list-item:first-child { border-top: none; }119 120 .pin {121 width: 56px; height: 56px;122 border-radius: 28px;123 background: #F1F5F8;124 display: flex; align-items: center; justify-content: center;125 }126 .pin svg { width: 36px; height: 36px; fill: #cfd8dc; stroke: none; }127 128 .train {129 width: 56px; height: 56px;130 border-radius: 28px;131 background: #101820;132 display: flex; align-items: center; justify-content: center;133 color: #fff;134 font-weight: 800;135 font-size: 26px;136 }137 138 .text-block { flex: 1; }139 .title {140 font-size: 36px;141 line-height: 40px;142 color: #1f2d35;143 font-weight: 700;144 }145 .subtitle {146 margin-top: 8px;147 font-size: 28px;148 color: #6b7c86;149 }150 151 .ellipsis {152 width: 40px;153 height: 80px;154 display: flex; flex-direction: column;155 align-items: center; justify-content: center;156 gap: 8px;157 }158 .ellipsis span {159 width: 10px; height: 10px; background: #cfd8dc; border-radius: 5px;160 }161 162 /* Badges for lines */163 .badge {164 display: inline-flex; align-items: center; justify-content: center;165 width: 34px; height: 34px; border-radius: 17px;166 font-size: 20px; font-weight: 800; color: #fff; margin-right: 8px;167 }168 .line-green { background: #21c25e; }169 .line-darkgreen { background: #009b3a; }170 .line-lightgreen { background: #33b96c; }171 .line-darkcyan { background: #007f6e; }172 .line-purple { background: #7c3aad; }173 .line-s { background: #5c5c5c; }174 .line-blue { background: #1173d3; }175 176 /* Bottom home indicator */177 .home-indicator {178 position: absolute;179 bottom: 40px; left: 50%;180 transform: translateX(-50%);181 width: 360px; height: 14px;182 background: #9daab2;183 border-radius: 7px;184 opacity: 0.8;185 }186</style>187</head>188<body>189<div id="render-target">190 191 <!-- Map banner -->192 <div class="map-placeholder">[IMG: City Map]</div>193 194 <!-- Back button -->195 <div class="back-btn">196 <svg viewBox="0 0 48 48">197 <path d="M30 12 L18 24 L30 36"></path>198 </svg>199 </div>200 201 <!-- Search bar -->202 <div class="search-bar">203 <div class="search-icon">204 <svg viewBox="0 0 48 48">205 <circle cx="20" cy="20" r="12"></circle>206 <line x1="30" y1="30" x2="44" y2="44"></line>207 </svg>208 </div>209 <div class="search-text">210 <span class="pill">End</span>211 <span class="placeholder-text">Where to?</span>212 </div>213 <div class="swap-btn">214 <svg viewBox="0 0 48 48">215 <path d="M10 30 c8 0 10-8 22-8"></path>216 <polyline points="30,16 34,22 24,22" fill="none"></polyline>217 <path d="M38 18 c-8 0-10 8-22 8"></path>218 <polyline points="18,32 14,26 24,26" fill="none"></polyline>219 </svg>220 </div>221 </div>222 223 <!-- Quick actions -->224 <div class="quick-actions">225 <div class="qa" title="Recent">226 <svg viewBox="0 0 48 48">227 <circle cx="24" cy="24" r="18"></circle>228 <path d="M24 10 L24 24 L34 28"></path>229 </svg>230 </div>231 <div class="qa" title="Favorites">232 <svg viewBox="0 0 48 48">233 <path d="M24 8 L28 20 L40 20 L30 28 L34 40 L24 32 L14 40 L18 28 L8 20 L20 20 Z"></path>234 </svg>235 </div>236 <div class="qa" title="Calendar">237 <svg viewBox="0 0 48 48">238 <rect x="8" y="12" width="32" height="28"></rect>239 <line x1="8" y1="20" x2="40" y2="20"></line>240 <line x1="16" y1="8" x2="16" y2="16"></line>241 <line x1="32" y1="8" x2="32" y2="16"></line>242 </svg>243 </div>244 </div>245 246 <!-- Section: 24 hours -->247 <div class="section-title section-24">24 hours</div>248 <div class="card card-24">249 <div class="list-item">250 <div class="pin">251 <svg viewBox="0 0 48 48"><path d="M24 6c-6 0-10 4-10 10 0 8 10 20 10 20s10-12 10-20c0-6-4-10-10-10zm0 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path></svg>252 </div>253 <div class="text-block">254 <div class="title">Amsterdam Ave, New York, NY, USA</div>255 <div class="subtitle">Address</div>256 </div>257 <div class="ellipsis"><span></span><span></span><span></span></div>258 </div>259 260 <div class="list-item">261 <div class="pin">262 <svg viewBox="0 0 48 48"><path d="M24 6c-6 0-10 4-10 10 0 8 10 20 10 20s10-12 10-20c0-6-4-10-10-10zm0 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path></svg>263 </div>264 <div class="text-block">265 <div class="title">La Scuola d' Italia</div>266 <div class="subtitle">Place · 12 E 96th St, New York, NY 10128, USA</div>267 </div>268 <div class="ellipsis"><span></span><span></span><span></span></div>269 </div>270 271 <div class="list-item">272 <div class="train">M</div>273 <div class="text-block">274 <div class="title">163 St - Amsterdam Av</div>275 <div class="subtitle">Station · <span class="badge line-blue">C</span></div>276 </div>277 <div class="ellipsis"><span></span><span></span><span></span></div>278 </div>279 280 <div class="list-item">281 <div class="pin">282 <svg viewBox="0 0 48 48"><path d="M24 6c-6 0-10 4-10 10 0 8 10 20 10 20s10-12 10-20c0-6-4-10-10-10zm0 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path></svg>283 </div>284 <div class="text-block">285 <div class="title">Saint Pancras Church</div>286 <div class="subtitle">72-22 68th St, Queens, NY 11385, USA</div>287 </div>288 <div class="ellipsis"><span></span><span></span><span></span></div>289 </div>290 291 <div class="list-item">292 <div class="pin">293 <svg viewBox="0 0 48 48"><path d="M24 6c-6 0-10 4-10 10 0 8 10 20 10 20s10-12 10-20c0-6-4-10-10-10zm0 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path></svg>294 </div>295 <div class="text-block">296 <div class="title">Consulate General of Italy</div>297 <div class="subtitle">Place · 690 Park Ave, New York, NY 10065, USA</div>298 </div>299 <div class="ellipsis"><span></span><span></span><span></span></div>300 </div>301 </div>302 303 <!-- Section: 7 days -->304 <div class="section-title section-7">7 days</div>305 <div class="card card-7">306 <div class="list-item">307 <div class="train">M</div>308 <div class="text-block">309 <div class="title">Grand Central - 42 St</div>310 <div class="subtitle">Station · 311 <span class="badge line-green">4</span>312 <span class="badge line-green">5</span>313 <span class="badge line-darkgreen">5</span>314 <span class="badge line-lightgreen">6</span>315 <span class="badge line-darkcyan">6</span>316 <span class="badge line-purple">7</span>317 <span class="badge line-purple">7</span>318 <span class="badge line-s">S</span>319 </div>320 </div>321 <div class="ellipsis"><span></span><span></span><span></span></div>322 </div>323 324 <div class="list-item">325 <div class="pin">326 <svg viewBox="0 0 48 48"><path d="M24 6c-6 0-10 4-10 10 0 8 10 20 10 20s10-12 10-20c0-6-4-10-10-10zm0 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path></svg>327 </div>328 <div class="text-block">329 <div class="title">125 St</div>330 </div>331 <div class="ellipsis"><span></span><span></span><span></span></div>332 </div>333 334 <div class="list-item">335 <div class="pin">336 <svg viewBox="0 0 48 48"><path d="M24 6c-6 0-10 4-10 10 0 8 10 20 10 20s10-12 10-20c0-6-4-10-10-10zm0 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path></svg>337 </div>338 <div class="text-block">339 <div class="title">138 St - Grand Concourse</div>340 </div>341 <div class="ellipsis"><span></span><span></span><span></span></div>342 </div>343 344 <div class="list-item">345 <div class="pin">346 <svg viewBox="0 0 48 48"><path d="M24 6c-6 0-10 4-10 10 0 8 10 20 10 20s10-12 10-20c0-6-4-10-10-10zm0 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path></svg>347 </div>348 <div class="text-block">349 <div class="title">Amsterdam Nursing Home</div>350 <div class="subtitle">Place · 1060 Amsterdam Ave, New York, NY 10025, USA</div>351 </div>352 <div class="ellipsis"><span></span><span></span><span></span></div>353 </div>354 355 <div class="list-item">356 <div class="pin">357 <svg viewBox="0 0 48 48"><path d="M24 6c-6 0-10 4-10 10 0 8 10 20 10 20s10-12 10-20c0-6-4-10-10-10zm0 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path></svg>358 </div>359 <div class="text-block">360 <div class="title">London Terrace</div>361 <div class="subtitle">Place · 435 W 23rd St, New York, NY 10011, USA</div>362 </div>363 <div class="ellipsis"><span></span><span></span><span></span></div>364 </div>365 366 <div class="list-item">367 <div class="pin">368 <svg viewBox="0 0 48 48"><path d="M24 6c-6 0-10 4-10 10 0 8 10 20 10 20s10-12 10-20c0-6-4-10-10-10zm0 14a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path></svg>369 </div>370 <div class="text-block">371 <div class="title">OSHA.NYC Clases de OSHA 40 SST</div>372 <div class="subtitle">Place · 1989 Amsterdam Ave, New York, NY 10032, USA</div>373 </div>374 <div class="ellipsis"><span></span><span></span><span></span></div>375 </div>376 </div>377 378 <!-- Bottom indicator -->379 <div class="home-indicator"></div>380</div>381</body>382</html>