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>Search Map UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 18px;21 left: 28px;22 right: 28px;23 height: 48px;24 color: #111;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-weight: 600;29 font-size: 32px;30 z-index: 5;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 18px;36 font-size: 26px;37 color: #111;38 }39 .battery {40 display: inline-flex;41 align-items: center;42 gap: 10px;43 }44 .battery svg { width: 40px; height: 24px; }45 46 /* Map placeholder */47 .map {48 position: absolute;49 top: 0;50 left: 0;51 width: 1080px;52 height: 580px;53 background: #E0E0E0;54 border: 1px solid #BDBDBD;55 display: flex;56 align-items: flex-start;57 justify-content: center;58 color: #757575;59 font-size: 28px;60 }61 .map > span {62 margin-top: 12px;63 background: rgba(255,255,255,0.8);64 padding: 8px 14px;65 border-radius: 14px;66 border: 1px solid #d0d0d0;67 }68 69 /* Floating back button */70 .back-btn {71 position: absolute;72 top: 140px;73 left: 32px;74 width: 84px;75 height: 84px;76 background: #ffffff;77 border-radius: 50%;78 box-shadow: 0 6px 16px rgba(0,0,0,0.15);79 display: flex;80 align-items: center;81 justify-content: center;82 z-index: 6;83 }84 .back-btn svg { width: 40px; height: 40px; fill: none; stroke: #213547; stroke-width: 7; }85 86 /* Search bar */87 .search-bar {88 position: absolute;89 top: 230px;90 left: 48px;91 width: 984px;92 height: 122px;93 background: #ffffff;94 border-radius: 26px;95 box-shadow: 0 16px 26px rgba(0,0,0,0.18);96 display: flex;97 align-items: center;98 padding: 0 28px;99 gap: 22px;100 z-index: 6;101 }102 .search-bar .magnifier svg { width: 40px; height: 40px; fill: none; stroke: #7a8a9a; stroke-width: 7; }103 .search-text {104 flex: 1;105 font-size: 40px;106 color: #222;107 }108 .search-text .start {109 color: #3a83b9;110 margin-right: 14px;111 font-weight: 600;112 }113 .close-btn {114 width: 60px;115 height: 60px;116 border-radius: 50%;117 background: #e9eef3;118 display: flex;119 align-items: center;120 justify-content: center;121 }122 .close-btn svg { width: 28px; height: 28px; stroke: #5b6773; stroke-width: 8; }123 124 /* Blue results panel */125 .panel {126 position: absolute;127 left: 0;128 right: 0;129 top: 430px;130 height: 1200px;131 background: linear-gradient(#2D6886, #356F8E);132 border-top-left-radius: 36px;133 border-top-right-radius: 36px;134 padding: 34px 34px 26px 34px;135 color: #ffffff;136 z-index: 4;137 }138 .section-title {139 font-size: 42px;140 font-weight: 700;141 margin-bottom: 22px;142 }143 144 /* Station card */145 .station-card {146 background: #ffffff;147 border-radius: 26px;148 padding: 26px;149 display: flex;150 align-items: flex-start;151 gap: 22px;152 box-shadow: 0 8px 16px rgba(0,0,0,0.15);153 color: #111;154 }155 .circle-icon {156 width: 68px;157 height: 68px;158 border-radius: 50%;159 background: #111;160 display: flex;161 align-items: center;162 justify-content: center;163 flex: 0 0 68px;164 }165 .circle-icon svg { width: 40px; height: 40px; fill: #fff; }166 .station-text { flex: 1; }167 .station-title { font-size: 38px; font-weight: 700; margin-bottom: 10px; color: #222; }168 .station-sub { font-size: 30px; color: #66707a; display: flex; align-items: center; gap: 16px; }169 .badge {170 display: inline-flex;171 align-items: center;172 justify-content: center;173 width: 44px;174 height: 44px;175 border-radius: 50%;176 background: #1976D2;177 color: #fff;178 font-weight: 700;179 font-size: 28px;180 }181 .more-btn {182 width: 60px;183 height: 60px;184 border-radius: 18px;185 background: #f1f4f7;186 display: flex;187 align-items: center;188 justify-content: center;189 }190 .more-btn svg { width: 8px; height: 32px; fill: #6b7785; }191 192 /* Results header */193 .results-top {194 display: flex;195 align-items: center;196 justify-content: space-between;197 margin: 34px 0 16px;198 }199 .show-map {200 display: flex;201 align-items: center;202 gap: 12px;203 color: #cfe7e0;204 font-size: 34px;205 }206 .show-map .img {207 width: 56px;208 height: 36px;209 border: 1px solid #BDBDBD;210 background: #E0E0E0;211 color: #757575;212 font-size: 20px;213 border-radius: 8px;214 display: flex;215 align-items: center;216 justify-content: center;217 }218 219 /* Results list */220 .results {221 position: relative;222 margin-top: 12px;223 }224 .left-strip {225 position: absolute;226 left: 0;227 top: 0;228 width: 26px;229 height: 100%;230 background: #245E7A;231 border-top-right-radius: 14px;232 border-bottom-right-radius: 14px;233 }234 .result-card {235 position: relative;236 margin-left: 34px;237 background: #ffffff;238 border-radius: 22px;239 padding: 26px 26px;240 display: flex;241 align-items: center;242 gap: 22px;243 color: #111;244 border-top: 1px solid #e8ecef;245 border-bottom: 1px solid #e8ecef;246 }247 .result-card + .result-card { margin-top: 18px; }248 .pin {249 width: 56px;250 height: 56px;251 border-radius: 50%;252 background: #3A83B9;253 display: flex;254 align-items: center;255 justify-content: center;256 }257 .pin svg { width: 30px; height: 30px; fill: #ffffff; }258 .result-text { flex: 1; }259 .result-title { font-size: 36px; font-weight: 700; color: #1f2a36; }260 .result-sub { margin-top: 6px; font-size: 28px; color: #6b7785; }261 .out-link {262 width: 52px;263 height: 52px;264 border-radius: 14px;265 background: #f1f4f7;266 display: flex;267 align-items: center;268 justify-content: center;269 }270 .out-link svg { width: 30px; height: 30px; stroke: #6b7785; stroke-width: 6; fill: none; }271 272 /* Keyboard mock */273 .keyboard {274 position: absolute;275 bottom: 0;276 left: 0;277 width: 1080px;278 height: 720px;279 background: #171717;280 border-top-left-radius: 22px;281 border-top-right-radius: 22px;282 box-shadow: 0 -6px 18px rgba(0,0,0,0.35);283 padding: 36px 28px 80px;284 color: #fff;285 }286 .key-row {287 display: flex;288 justify-content: space-between;289 gap: 14px;290 margin-bottom: 22px;291 }292 .key {293 flex: 1;294 height: 98px;295 background: #2b2b2b;296 border-radius: 18px;297 display: flex;298 align-items: center;299 justify-content: center;300 font-size: 40px;301 color: #ddd;302 }303 .key.small { flex: 0 0 120px; }304 .key.medium { flex: 0 0 180px; }305 .search-action {306 position: absolute;307 right: 28px;308 bottom: 110px;309 width: 110px;310 height: 110px;311 background: #b4f46e;312 border-radius: 50%;313 display: flex;314 align-items: center;315 justify-content: center;316 }317 .search-action svg { width: 50px; height: 50px; stroke: #1a1a1a; stroke-width: 8; fill: none; }318 .home-indicator {319 position: absolute;320 bottom: 18px;321 left: 50%;322 transform: translateX(-50%);323 width: 240px;324 height: 10px;325 background: #f8f8f8;326 border-radius: 6px;327 opacity: 0.9;328 }329</style>330</head>331<body>332<div id="render-target">333 334 <!-- Status bar -->335 <div class="status-bar">336 <div>9:09</div>337 <div class="status-right">338 <div class="battery">339 <svg viewBox="0 0 50 30">340 <rect x="2" y="4" width="40" height="22" rx="5" ry="5" fill="none" stroke="#111" stroke-width="3"></rect>341 <rect x="44" y="10" width="4" height="10" rx="1" fill="#111"></rect>342 <rect x="6" y="7" width="32" height="16" rx="3" fill="#111"></rect>343 </svg>344 <span>100%</span>345 </div>346 </div>347 </div>348 349 <!-- Map placeholder -->350 <div class="map">351 <span>[IMG: Map]</span>352 </div>353 354 <!-- Floating back -->355 <div class="back-btn">356 <svg viewBox="0 0 48 48"><path d="M32 8 L16 24 L32 40"/></svg>357 </div>358 359 <!-- Search bar -->360 <div class="search-bar">361 <div class="magnifier">362 <svg viewBox="0 0 48 48"><circle cx="20" cy="20" r="12"></circle><line x1="32" y1="32" x2="44" y2="44"></line></svg>363 </div>364 <div class="search-text">365 <span class="start">Start</span>366 Amsterdam367 </div>368 <div class="close-btn">369 <svg viewBox="0 0 28 28"><line x1="6" y1="6" x2="22" y2="22"></line><line x1="22" y1="6" x2="6" y2="22"></line></svg>370 </div>371 </div>372 373 <!-- Results panel -->374 <div class="panel">375 <div class="section-title">Stations</div>376 377 <div class="station-card">378 <div class="circle-icon">379 <svg viewBox="0 0 48 48">380 <rect x="10" y="14" width="28" height="18" rx="4"></rect>381 <rect x="16" y="26" width="6" height="8" rx="2"></rect>382 <rect x="26" y="26" width="6" height="8" rx="2"></rect>383 </svg>384 </div>385 <div class="station-text">386 <div class="station-title">163 St - Amsterdam Av</div>387 <div class="station-sub">Station · <span class="badge">C</span></div>388 </div>389 <div class="more-btn">390 <svg viewBox="0 0 8 32"><rect x="3" y="4" width="2" height="6"/><rect x="3" y="13" width="2" height="6"/><rect x="3" y="22" width="2" height="6"/></svg>391 </div>392 </div>393 394 <div class="results-top">395 <div class="section-title" style="margin:0;">Results</div>396 <div class="show-map">397 <div class="img">MAP</div>398 <span>Show on Map</span>399 </div>400 </div>401 402 <div class="results">403 <div class="left-strip"></div>404 405 <div class="result-card">406 <div class="pin">407 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>408 </div>409 <div class="result-text">410 <div class="result-title">Amsterdam Avenue</div>411 <div class="result-sub">New York, NY, USA</div>412 </div>413 <div class="out-link">414 <svg viewBox="0 0 28 28"><path d="M8 20 L20 8"/><polyline points="12,8 20,8 20,16"/></svg>415 </div>416 </div>417 418 <div class="result-card">419 <div class="pin">420 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>421 </div>422 <div class="result-text">423 <div class="result-title">Amsterdam Billiards Club</div>424 <div class="result-sub">East 11th Street, New York, NY, USA</div>425 </div>426 <div class="out-link">427 <svg viewBox="0 0 28 28"><path d="M8 20 L20 8"/><polyline points="12,8 20,8 20,16"/></svg>428 </div>429 </div>430 431 <div class="result-card">432 <div class="pin">433 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>434 </div>435 <div class="result-text">436 <div class="result-title">Amsterdam Ale House</div>437 <div class="result-sub">Amsterdam Avenue, New York, NY, USA</div>438 </div>439 <div class="out-link">440 <svg viewBox="0 0 28 28"><path d="M8 20 L20 8"/><polyline points="12,8 20,8 20,16"/></svg>441 </div>442 </div>443 444 <div class="result-card">445 <div class="pin">446 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>447 </div>448 <div class="result-text">449 <div class="result-title">Amsterdam Nursing Home</div>450 <div class="result-sub">Amsterdam Avenue, New York, NY, USA</div>451 </div>452 <div class="out-link">453 <svg viewBox="0 0 28 28"><path d="M8 20 L20 8"/><polyline points="12,8 20,8 20,16"/></svg>454 </div>455 </div>456 457 <div class="result-card">458 <div class="pin">459 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path></svg>460 </div>461 <div class="result-text">462 <div class="result-title">AMSTERDAM BURGER NYC</div>463 <div class="result-sub">West 83rd Street, New York, NY, USA</div>464 </div>465 <div class="out-link">466 <svg viewBox="0 0 28 28"><path d="M8 20 L20 8"/><polyline points="12,8 20,8 20,16"/></svg>467 </div>468 </div>469 </div>470 </div>471 472 <!-- Keyboard mock -->473 <div class="keyboard">474 <div class="key-row">475 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>476 </div>477 <div class="key-row">478 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>479 </div>480 <div class="key-row">481 <div class="key small">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key small">⌫</div>482 </div>483 <div class="key-row">484 <div class="key medium">?123</div>485 <div class="key small">☺</div>486 <div class="key" style="flex: 1.8;">space</div>487 <div class="key small">.</div>488 </div>489 <div class="search-action">490 <svg viewBox="0 0 48 48"><circle cx="20" cy="20" r="12"></circle><line x1="32" y1="32" x2="44" y2="44"></line></svg>491 </div>492 <div class="home-indicator"></div>493 </div>494 495</div>496</body>497</html>