GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Map Search UI Mock</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;12 color: #213547;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 border-radius: 28px;21 box-shadow: 0 10px 30px rgba(0,0,0,0.15);22 }23 24 /* Map placeholder at top */25 .map {26 position: absolute;27 top: 0;28 left: 0;29 width: 1080px;30 height: 460px;31 background: #E0E0E0;32 border-bottom: 1px solid #BDBDBD;33 display: flex;34 align-items: center;35 justify-content: center;36 color: #757575;37 letter-spacing: 0.2px;38 }39 40 /* Floating back button */41 .back-btn {42 position: absolute;43 top: 280px;44 left: 36px;45 width: 80px;46 height: 80px;47 background: #ffffff;48 border-radius: 40px;49 box-shadow: 0 6px 12px rgba(0,0,0,0.15);50 display: flex;51 align-items: center;52 justify-content: center;53 }54 .back-btn svg {55 width: 36px;56 height: 36px;57 fill: #4A6B7F;58 }59 60 /* Search bar */61 .search-bar {62 position: absolute;63 top: 300px;64 left: 110px;65 width: 860px;66 height: 120px;67 background: #ffffff;68 border-radius: 28px;69 box-shadow: 0 10px 22px rgba(0,0,0,0.18);70 display: flex;71 align-items: center;72 padding: 0 24px;73 z-index: 5;74 }75 .search-icon {76 margin-right: 16px;77 }78 .search-icon svg {79 width: 44px;80 height: 44px;81 fill: #6f8ea0;82 }83 .search-text {84 display: flex;85 align-items: baseline;86 gap: 14px;87 font-size: 36px;88 }89 .search-text .start {90 color: #2a6f8c;91 font-weight: 700;92 }93 .search-text .placeholder {94 color: #9099a6;95 font-weight: 500;96 }97 .swap-btn {98 margin-left: auto;99 width: 90px;100 height: 90px;101 border-radius: 45px;102 background: #e7f1f6;103 display: flex;104 align-items: center;105 justify-content: center;106 }107 .swap-btn svg {108 width: 40px;109 height: 40px;110 fill: #2a6f8c;111 }112 113 /* Teal panel background */114 .panel {115 position: absolute;116 top: 460px;117 left: 0;118 width: 100%;119 height: 1190px;120 background: #2f667f;121 border-top-left-radius: 22px;122 border-top-right-radius: 22px;123 padding: 36px 40px;124 box-sizing: border-box;125 }126 127 /* Quick action buttons */128 .quick-actions {129 display: flex;130 gap: 36px;131 margin-top: 80px;132 margin-bottom: 30px;133 }134 .action {135 flex: 1;136 height: 150px;137 background: rgba(255,255,255,0.1);138 border: 1px solid rgba(255,255,255,0.18);139 border-radius: 26px;140 display: flex;141 align-items: center;142 justify-content: center;143 }144 .action svg {145 width: 56px;146 height: 56px;147 fill: #eaf2f6;148 }149 150 /* Section title */151 .section-title {152 color: #ffffff;153 font-size: 40px;154 font-weight: 700;155 margin-top: 26px;156 margin-bottom: 16px;157 }158 159 /* List card */160 .list-card {161 background: #ffffff;162 border-radius: 26px;163 overflow: hidden;164 box-shadow: 0 8px 18px rgba(0,0,0,0.18);165 }166 .list-item {167 display: flex;168 align-items: center;169 padding: 28px 26px;170 border-bottom: 1px solid #e6eaee;171 }172 .list-item:last-child {173 border-bottom: none;174 }175 .pin {176 width: 70px;177 height: 70px;178 border-radius: 35px;179 background: #eef3f7;180 display: flex;181 align-items: center;182 justify-content: center;183 margin-right: 22px;184 }185 .pin svg {186 width: 34px;187 height: 34px;188 fill: #98a9b6;189 }190 .item-content {191 flex: 1;192 }193 .item-title {194 font-size: 38px;195 font-weight: 700;196 color: #2c3b48;197 line-height: 1.2;198 margin-bottom: 8px;199 }200 .item-sub {201 font-size: 26px;202 color: #6c7a86;203 }204 .item-sub .label {205 font-weight: 700;206 color: #61707d;207 }208 .menu {209 width: 44px;210 display: flex;211 justify-content: center;212 margin-left: 12px;213 }214 .menu svg {215 width: 12px;216 height: 44px;217 fill: #c7cfd6;218 }219 220 /* Keyboard placeholder */221 .keyboard {222 position: absolute;223 bottom: 0;224 left: 0;225 width: 1080px;226 height: 700px;227 background: #1f2226;228 border-top-left-radius: 22px;229 border-top-right-radius: 22px;230 box-shadow: 0 -10px 18px rgba(0,0,0,0.25);231 padding: 26px 24px 70px;232 box-sizing: border-box;233 color: #cfd7dc;234 }235 .kb-top-row {236 display: flex;237 gap: 40px;238 align-items: center;239 margin-bottom: 16px;240 }241 .kb-pill {242 width: 72px;243 height: 72px;244 border-radius: 36px;245 background: #2b2e33;246 display: flex;247 align-items: center;248 justify-content: center;249 }250 .kb-grid {251 display: grid;252 grid-template-columns: repeat(10, 1fr);253 gap: 16px;254 margin-top: 18px;255 }256 .key {257 height: 92px;258 background: #2b2e33;259 border-radius: 18px;260 }261 .key.wide { grid-column: span 2; }262 .kb-bottom {263 position: absolute;264 bottom: 20px;265 left: 50%;266 transform: translateX(-50%);267 width: 280px;268 height: 12px;269 background: #e8ebee;270 border-radius: 6px;271 }272</style>273</head>274<body>275<div id="render-target">276 277 <!-- Map placeholder -->278 <div class="map">[IMG: Map of New York]</div>279 280 <!-- Back button -->281 <div class="back-btn">282 <svg viewBox="0 0 24 24"><path d="M15.5 5.5a1 1 0 0 1 0 1.4L10.4 12l5.1 5.1a1 1 0 1 1-1.4 1.4l-6-6a1 1 0 0 1 0-1.4l6-6a1 1 0 0 1 1.4 0z"/></svg>283 </div>284 285 <!-- Search bar -->286 <div class="search-bar">287 <div class="search-icon">288 <svg viewBox="0 0 24 24"><path d="M10.5 3a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11zm9.4 13.6-3.3-3.3a1 1 0 1 1 1.4-1.4l3.3 3.3a1 1 0 0 1-1.4 1.4z"/></svg>289 </div>290 <div class="search-text">291 <span class="start">Start</span>292 <span class="placeholder">Where from?</span>293 </div>294 <div class="swap-btn">295 <svg viewBox="0 0 24 24"><path d="M7 5h9l-2-2 1.4-1.4L20.8 5l-5.4 3.4L14 7l2-2H7V5zm10 14H8l2 2-1.4 1.4L3.2 19l5.4-3.4L10 17l-2 2h9v0z"/></svg>296 </div>297 </div>298 299 <!-- Teal panel -->300 <div class="panel">301 <div class="quick-actions">302 <div class="action">303 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/></svg>304 </div>305 <div class="action">306 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3 1-6-4.4-4.2 6.1-.9L12 3l2.7 6.2 6.1.9-4.4 4.2 1 6z"/></svg>307 </div>308 <div class="action">309 <svg viewBox="0 0 24 24"><path d="M6 3a1 1 0 0 1 2 0v2h8V3a1 1 0 0 1 2 0v2h1a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h1V3zm13 6H5v10h14V9z"/></svg>310 </div>311 </div>312 313 <div class="section-title">24 hours</div>314 315 <div class="list-card">316 <!-- Item 1 -->317 <div class="list-item">318 <div class="pin">319 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>320 </div>321 <div class="item-content">322 <div class="item-title">World Trade Center</div>323 </div>324 <div class="menu">325 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>326 </div>327 </div>328 <!-- Item 2 -->329 <div class="list-item">330 <div class="pin">331 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>332 </div>333 <div class="item-content">334 <div class="item-title">NAYA - Moynihan Train Hall</div>335 <div class="item-sub"><span class="label">Place</span> · 351 W 33rd St, New York, NY 10001, USA</div>336 </div>337 <div class="menu">338 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>339 </div>340 </div>341 <!-- Item 3 -->342 <div class="list-item">343 <div class="pin">344 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>345 </div>346 <div class="item-content">347 <div class="item-title">The Roxy Hotel New York</div>348 <div class="item-sub"><span class="label">Place</span> · 2 6th Ave, New York, NY 10013, USA</div>349 </div>350 <div class="menu">351 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>352 </div>353 </div>354 <!-- Item 4 -->355 <div class="list-item">356 <div class="pin">357 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>358 </div>359 <div class="item-content">360 <div class="item-title">West 46th Street, Manhattan</div>361 <div class="item-sub"><span class="label">Address</span></div>362 </div>363 <div class="menu">364 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>365 </div>366 </div>367 <!-- Item 5 -->368 <div class="list-item">369 <div class="pin">370 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>371 </div>372 <div class="item-content">373 <div class="item-title">New York Marriott Marquis</div>374 <div class="item-sub"><span class="label">Place</span> · 1535 Broadway, New York, NY 10036, USA</div>375 </div>376 <div class="menu">377 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>378 </div>379 </div>380 <!-- Item 6 -->381 <div class="list-item">382 <div class="pin">383 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>384 </div>385 <div class="item-content">386 <div class="item-title">New Canaan</div>387 </div>388 <div class="menu">389 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>390 </div>391 </div>392 </div>393 </div>394 395 <!-- Keyboard placeholder -->396 <div class="keyboard">397 <div class="kb-top-row">398 <div class="kb-pill"></div>399 <div class="kb-pill"></div>400 <div class="kb-pill"></div>401 <div class="kb-pill"></div>402 <div class="kb-pill"></div>403 <div class="kb-pill"></div>404 <div class="kb-pill"></div>405 </div>406 <div class="kb-grid">407 <!-- Row 1 -->408 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>409 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>410 <!-- Row 2 -->411 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>412 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>413 <!-- Row 3 -->414 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>415 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>416 <!-- Bottom row -->417 <div class="key wide"></div><div class="key"></div><div class="key wide"></div><div class="key"></div><div class="key wide"></div>418 <div class="key wide"></div><div class="key wide"></div><div class="key"></div><div class="key wide"></div><div class="key"></div>419 </div>420 <div class="kb-bottom"></div>421 </div>422 423</div>424</body>425</html>