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 Search UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: linear-gradient(180deg, #74b7d4 0%, #2f6f8d 35%, #2f6f8d 100%);20 }21 22 /* Top map area */23 .map-area {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 480px;29 }30 .map-placeholder {31 width: 1080px;32 height: 480px;33 background: #E0E0E0;34 border: 1px solid #BDBDBD;35 color: #757575;36 display: flex;37 justify-content: center;38 align-items: center;39 font-weight: 600;40 }41 42 /* Back button */43 .back-btn {44 position: absolute;45 top: 160px;46 left: 40px;47 width: 96px;48 height: 96px;49 border-radius: 48px;50 background: rgba(255,255,255,0.9);51 box-shadow: 0 6px 12px rgba(0,0,0,0.15);52 display: flex;53 align-items: center;54 justify-content: center;55 }56 .back-btn svg { width: 44px; height: 44px; fill: #2f6f8d; }57 58 /* Search bar */59 .search-wrapper {60 position: absolute;61 top: 180px;62 left: 150px;63 width: 880px;64 height: 120px;65 border-radius: 30px;66 background: #ffffff;67 box-shadow: 0 14px 24px rgba(0,0,0,0.16);68 display: flex;69 align-items: center;70 padding: 0 24px;71 }72 .search-icon {73 width: 56px;74 height: 56px;75 border-radius: 28px;76 display: flex;77 align-items: center;78 justify-content: center;79 margin-right: 14px;80 }81 .search-icon svg { width: 36px; height: 36px; fill: #2f6f8d; }82 83 .search-text {84 display: flex;85 align-items: baseline;86 flex: 1;87 gap: 14px;88 }89 .chip {90 color: #2f6f8d;91 font-weight: 700;92 font-size: 36px;93 }94 .placeholder {95 color: #7d8b97;96 font-size: 36px;97 }98 .swap-btn {99 width: 84px;100 height: 84px;101 border-radius: 42px;102 background: #e7f3f8;103 display: flex;104 align-items: center;105 justify-content: center;106 margin-left: 10px;107 }108 .swap-btn svg { width: 42px; height: 42px; fill: #2f6f8d; }109 110 /* Quick filters row */111 .filters {112 position: absolute;113 top: 340px;114 left: 40px;115 right: 40px;116 display: flex;117 gap: 40px;118 }119 .filter-pill {120 flex: 1;121 height: 140px;122 border-radius: 24px;123 background: rgba(255,255,255,0.08);124 border: 1px solid rgba(255,255,255,0.12);125 display: flex;126 align-items: center;127 justify-content: center;128 }129 .filter-pill svg { width: 56px; height: 56px; fill: #e9f1f5; }130 131 /* Section title */132 .section-title {133 position: absolute;134 top: 520px;135 left: 40px;136 color: #e9f1f5;137 font-size: 42px;138 font-weight: 700;139 }140 141 /* List card */142 .list-card {143 position: absolute;144 top: 580px;145 left: 40px;146 width: 1000px;147 border-radius: 36px;148 background: #ffffff;149 overflow: hidden;150 box-shadow: 0 10px 20px rgba(0,0,0,0.15);151 }152 .list-item {153 display: flex;154 align-items: center;155 padding: 34px 28px;156 border-bottom: 1px solid #e6e6e6;157 }158 .list-item:last-child { border-bottom: none; }159 160 .pin {161 width: 64px;162 height: 64px;163 border-radius: 32px;164 background: #f0f2f4;165 display: flex;166 align-items: center;167 justify-content: center;168 margin-right: 26px;169 }170 .pin svg { width: 36px; height: 36px; fill: #9aa7b3; }171 172 .item-content {173 flex: 1;174 }175 .item-title {176 font-size: 38px;177 color: #2d2d2d;178 font-weight: 700;179 line-height: 1.1;180 margin-bottom: 8px;181 }182 .item-sub {183 font-size: 30px;184 color: #7d8b97;185 }186 187 .more {188 width: 60px;189 height: 60px;190 border-radius: 30px;191 display: flex;192 align-items: center;193 justify-content: center;194 }195 .more svg { width: 16px; height: 40px; fill: #b9c4cf; }196 197 /* Keyboard placeholder */198 .keyboard {199 position: absolute;200 bottom: 50px;201 left: 0;202 width: 1080px;203 height: 820px;204 background: #1f1f1f;205 border-top-left-radius: 30px;206 border-top-right-radius: 30px;207 box-shadow: 0 -8px 20px rgba(0,0,0,0.35) inset;208 }209 .keyboard-row {210 display: flex;211 gap: 16px;212 padding: 22px 24px;213 justify-content: center;214 }215 .key {216 width: 86px;217 height: 104px;218 border-radius: 18px;219 background: #2a2a2a;220 }221 .key.wide { width: 180px; }222 .key.space { width: 520px; }223 .key.action {224 background: #3a3a3a;225 }226 227 /* Home indicator */228 .home-indicator {229 position: absolute;230 bottom: 14px;231 left: 50%;232 transform: translateX(-50%);233 width: 240px;234 height: 12px;235 background: #e6e6e6;236 border-radius: 6px;237 opacity: 0.8;238 }239</style>240</head>241<body>242<div id="render-target">243 244 <div class="map-area">245 <div class="map-placeholder">[IMG: City Map]</div>246 </div>247 248 <div class="back-btn" aria-label="Back">249 <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7-2 2-9-9 9-9z"/></svg>250 </div>251 252 <div class="search-wrapper">253 <div class="search-icon">254 <svg viewBox="0 0 24 24"><path d="M10 3a7 7 0 105.3 12l4.2 4.2-1.4 1.4-4.2-4.2A7 7 0 1010 3z"/></svg>255 </div>256 <div class="search-text">257 <div class="chip">End</div>258 <div class="placeholder">Where to?</div>259 </div>260 <div class="swap-btn" title="Swap start/end">261 <svg viewBox="0 0 24 24"><path d="M7 7h9l-3-3 1.4-1.4L20.8 8l-6.4 5.4L13 12l3-3H7V7zm10 10H8l3 3-1.4 1.4L3.2 16l6.4-5.4L11 12l-3 3h9v2z"/></svg>262 </div>263 </div>264 265 <div class="filters">266 <div class="filter-pill"><svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 108 8h-2a6 6 0 11-6-6V4zm1 5H11v5l4 2 .7-1.9-2.7-1.1V9z"/></svg></div>267 <div class="filter-pill"><svg viewBox="0 0 24 24"><path d="M12 17.3l-5.2 3.1 1.4-5.9-4.4-3.8 5.8-.5L12 4l2.4 6.2 5.8.5-4.4 3.8 1.4 5.9z"/></svg></div>268 <div class="filter-pill"><svg viewBox="0 0 24 24"><path d="M7 3h2v2h6V3h2v2h3v16H4V5h3V3zm13 6H4v11h16V9z"/></svg></div>269 </div>270 271 <div class="section-title">24 hours</div>272 273 <div class="list-card">274 <div class="list-item">275 <div class="pin"><svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 017-7zm0 10a3 3 0 100-6 3 3 0 000 6z"/></svg></div>276 <div class="item-content">277 <div class="item-title">World Trade Center</div>278 </div>279 <div class="more"><svg viewBox="0 0 8 24"><path d="M4 4a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4z"/></svg></div>280 </div>281 282 <div class="list-item">283 <div class="pin"><svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 017-7zm0 10a3 3 0 100-6 3 3 0 000 6z"/></svg></div>284 <div class="item-content">285 <div class="item-title">NAYA - Moynihan Train Hall</div>286 <div class="item-sub">Place · 351 W 33rd St, New York, NY 10001, USA</div>287 </div>288 <div class="more"><svg viewBox="0 0 8 24"><path d="M4 4a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4z"/></svg></div>289 </div>290 291 <div class="list-item">292 <div class="pin"><svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 017-7zm0 10a3 3 0 100-6 3 3 0 000 6z"/></svg></div>293 <div class="item-content">294 <div class="item-title">The Roxy Hotel New York</div>295 <div class="item-sub">Place · 2 6th Ave, New York, NY 10013, USA</div>296 </div>297 <div class="more"><svg viewBox="0 0 8 24"><path d="M4 4a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4z"/></svg></div>298 </div>299 300 <div class="list-item">301 <div class="pin"><svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 017-7zm0 10a3 3 0 100-6 3 3 0 000 6z"/></svg></div>302 <div class="item-content">303 <div class="item-title">West 46th Street, Manhattan</div>304 <div class="item-sub">Address</div>305 </div>306 <div class="more"><svg viewBox="0 0 8 24"><path d="M4 4a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4z"/></svg></div>307 </div>308 309 <div class="list-item">310 <div class="pin"><svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 017-7zm0 10a3 3 0 100-6 3 3 0 000 6z"/></svg></div>311 <div class="item-content">312 <div class="item-title">New York Marriott Marquis</div>313 <div class="item-sub">Place · 1535 Broadway, New York, NY 10036, USA</div>314 </div>315 <div class="more"><svg viewBox="0 0 8 24"><path d="M4 4a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4z"/></svg></div>316 </div>317 318 <div class="list-item">319 <div class="pin"><svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 017-7zm0 10a3 3 0 100-6 3 3 0 000 6z"/></svg></div>320 <div class="item-content">321 <div class="item-title">New Canaan</div>322 </div>323 <div class="more"><svg viewBox="0 0 8 24"><path d="M4 4a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4z"/></svg></div>324 </div>325 </div>326 327 <div class="keyboard">328 <div class="keyboard-row">329 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>330 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>331 </div>332 <div class="keyboard-row">333 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>334 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>335 </div>336 <div class="keyboard-row">337 <div class="key wide"></div>338 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>339 <div class="key wide action"></div>340 </div>341 <div class="keyboard-row">342 <div class="key wide action"></div>343 <div class="key space"></div>344 <div class="key wide action"></div>345 </div>346 </div>347 348 <div class="home-indicator"></div>349</div>350</body>351</html>