GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Map Search 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: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 16px;20 left: 0;21 width: 100%;22 padding: 0 32px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #111;27 font-size: 38px;28 pointer-events: none;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 18px;34 font-size: 34px;35 }36 .battery {37 display: inline-flex;38 align-items: center;39 gap: 10px;40 }41 .battery svg { width: 48px; height: 28px; }42 43 /* Map placeholder */44 .map {45 position: absolute;46 top: 0;47 left: 0;48 width: 1080px;49 height: 1240px;50 background: #E0E0E0;51 border: 1px solid #BDBDBD;52 display: flex;53 align-items: center;54 justify-content: center;55 color: #757575;56 font-size: 40px;57 }58 59 /* Search bar */60 .search-bar {61 position: absolute;62 top: 330px;63 left: 60px;64 width: 960px;65 height: 120px;66 background: #ffffff;67 border-radius: 30px;68 box-shadow: 0 6px 18px rgba(0,0,0,0.15);69 display: flex;70 align-items: center;71 padding: 0 28px;72 gap: 22px;73 }74 .search-icon { width: 48px; height: 48px; fill: none; stroke: #5f6f7d; stroke-width: 8; }75 .tag-start {76 background: #5CCF91;77 color: #0c3b2a;78 font-weight: 600;79 padding: 10px 18px;80 border-radius: 18px;81 font-size: 34px;82 }83 .search-text {84 color: #2b3b4a;85 font-size: 40px;86 flex: 1;87 }88 .clear-btn {89 width: 60px;90 height: 60px;91 border-radius: 30px;92 background: #eaf4ff;93 display: flex;94 align-items: center;95 justify-content: center;96 }97 .clear-btn svg { width: 36px; height: 36px; stroke: #3a78a6; stroke-width: 10; }98 99 /* Bottom sheet */100 .sheet {101 position: absolute;102 left: 0;103 right: 0;104 top: 560px;105 height: 1080px;106 background: linear-gradient(180deg, #3E7FA1 0%, #2E5D79 100%);107 border-top-left-radius: 40px;108 border-top-right-radius: 40px;109 box-shadow: 0 -12px 24px rgba(0,0,0,0.18);110 color: #ffffff;111 padding: 48px;112 }113 .section-title {114 font-size: 46px;115 font-weight: 700;116 margin-bottom: 24px;117 }118 119 .card {120 background: #ffffff;121 border-radius: 28px;122 box-shadow: 0 6px 14px rgba(0,0,0,0.12);123 padding: 30px;124 display: flex;125 align-items: center;126 gap: 24px;127 color: #1a2732;128 }129 .card + .card { margin-top: 26px; }130 .train-icon {131 width: 64px;132 height: 64px;133 background: #000000;134 color: #ffffff;135 border-radius: 16px;136 display: flex;137 align-items: center;138 justify-content: center;139 }140 .train-icon svg { width: 44px; height: 44px; fill: #ffffff; }141 .card-content {142 flex: 1;143 }144 .card-title {145 font-size: 42px;146 font-weight: 700;147 margin-bottom: 8px;148 color: #0f1f2b;149 }150 .card-sub {151 font-size: 32px;152 color: #647282;153 display: flex;154 align-items: center;155 gap: 10px;156 }157 .c-pill {158 font-size: 28px;159 font-weight: 700;160 color: #0f5cc0;161 border: 2px solid #0f5cc0;162 border-radius: 16px;163 padding: 2px 10px;164 line-height: 1;165 }166 .menu-dots {167 width: 26px;168 height: 26px;169 display: grid;170 grid-template-rows: repeat(3, 6px);171 justify-items: center;172 align-items: center;173 gap: 6px;174 }175 .menu-dots span {176 width: 6px; height: 6px; background: #9aa7b4; border-radius: 3px;177 }178 179 .results-row {180 display: flex;181 align-items: center;182 justify-content: space-between;183 margin-top: 46px;184 margin-bottom: 20px;185 }186 .show-map {187 display: flex;188 align-items: center;189 gap: 12px;190 font-size: 34px;191 color: #d8e6f1;192 }193 .mini-map {194 width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,0.3);195 display: inline-flex; align-items: center; justify-content: center;196 }197 .mini-map svg { width: 26px; height: 26px; stroke: #ffffff; stroke-width: 6; fill: none; }198 199 .doc-icon {200 width: 64px; height: 64px; background: #4A89C7; color: #ffffff; border-radius: 12px;201 display: flex; align-items: center; justify-content: center;202 }203 .doc-icon svg { width: 40px; height: 40px; stroke: #ffffff; stroke-width: 8; fill: none; }204 205 .arrow-right {206 width: 46px; height: 46px;207 }208 .arrow-right svg { width: 100%; height: 100%; stroke: #7b8a99; stroke-width: 10; fill: none; }209 210 .powered {211 margin: 18px 8px 0 8px;212 font-size: 30px;213 color: #cfe2ef;214 }215 .google {216 font-weight: 700;217 letter-spacing: 0.5px;218 }219 .g-b { color: #4285F4; }220 .g-r { color: #DB4437; }221 .g-y { color: #F4B400; }222 .g-g { color: #0F9D58; }223 224 .hint {225 margin-top: 60px;226 text-align: center;227 font-size: 40px;228 color: #d5e7f4;229 }230 .deepsearch-btn {231 margin-top: 24px;232 display: inline-flex;233 align-items: center;234 gap: 16px;235 padding: 16px 22px;236 border-radius: 20px;237 color: #ffffff;238 font-size: 42px;239 font-weight: 800;240 }241 .submarine { width: 52px; height: 52px; }242 .submarine svg { width: 100%; height: 100%; fill: #ffffff; }243 244 /* Keyboard mock */245 .keyboard {246 position: absolute;247 bottom: 0;248 left: 0;249 width: 1080px;250 height: 740px;251 background: #1c1c1f;252 border-top-left-radius: 24px;253 border-top-right-radius: 24px;254 box-shadow: 0 -8px 20px rgba(0,0,0,0.3);255 }256 .kb-top {257 height: 100px;258 display: flex;259 align-items: center;260 justify-content: space-between;261 padding: 0 40px;262 color: #bfc4c8;263 font-size: 40px;264 }265 .kb-top .mic {266 width: 40px; height: 40px;267 }268 .keys {269 padding: 12px 24px 24px;270 display: grid;271 grid-template-rows: repeat(4, 1fr);272 gap: 18px;273 }274 .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; }275 .key {276 background: #2b2b2e;277 height: 120px;278 border-radius: 20px;279 }280 .key.wide { grid-column: span 2; }281 .key.space { grid-column: span 4; }282 .key.green { background: #BFD8AA; }283 .key.search {284 background: #B8F76B;285 border-radius: 60px;286 }287 .home-indicator {288 position: absolute;289 bottom: 20px;290 left: 50%;291 transform: translateX(-50%);292 width: 300px;293 height: 10px;294 border-radius: 5px;295 background: rgba(255,255,255,0.7);296 }297</style>298</head>299<body>300<div id="render-target">301 302 <!-- Status bar -->303 <div class="status-bar">304 <div>9:09</div>305 <div class="status-icons">306 <span>100%</span>307 <span class="battery">308 <svg viewBox="0 0 60 30">309 <rect x="2" y="4" width="50" height="22" rx="6" ry="6" stroke="#111" fill="none" stroke-width="3"></rect>310 <rect x="52" y="10" width="6" height="10" rx="2" fill="#111"></rect>311 <rect x="6" y="8" width="42" height="14" rx="3" fill="#28a745"></rect>312 </svg>313 </span>314 </div>315 </div>316 317 <!-- Map area -->318 <div class="map">[IMG: Map]</div>319 320 <!-- Search bar -->321 <div class="search-bar">322 <svg class="search-icon" viewBox="0 0 24 24">323 <circle cx="10" cy="10" r="7"></circle>324 <line x1="16" y1="16" x2="22" y2="22"></line>325 </svg>326 <span class="tag-start">Start</span>327 <div class="search-text">163 St - Amsterdam</div>328 <div class="clear-btn">329 <svg viewBox="0 0 24 24">330 <line x1="4" y1="4" x2="20" y2="20"></line>331 <line x1="20" y1="4" x2="4" y2="20"></line>332 </svg>333 </div>334 </div>335 336 <!-- Bottom sheet -->337 <div class="sheet">338 <div class="section-title">Stations</div>339 <div class="card">340 <div class="train-icon">341 <svg viewBox="0 0 24 24">342 <rect x="5" y="3" width="14" height="12" rx="2"></rect>343 <circle cx="9" cy="17" r="2"></circle>344 <circle cx="15" cy="17" r="2"></circle>345 </svg>346 </div>347 <div class="card-content">348 <div class="card-title">163 St - Amsterdam Av</div>349 <div class="card-sub">Station • <span class="c-pill">C</span></div>350 </div>351 <div class="menu-dots"><span></span><span></span><span></span></div>352 </div>353 354 <div class="results-row">355 <div class="section-title" style="margin:0;">Results</div>356 <div class="show-map">357 <div class="mini-map">358 <svg viewBox="0 0 24 24">359 <rect x="3" y="3" width="18" height="18" rx="4"></rect>360 <path d="M6 12h12"></path>361 </svg>362 </div>363 <span>Show on Map</span>364 </div>365 </div>366 367 <div class="card">368 <div class="doc-icon">369 <svg viewBox="0 0 24 24">370 <rect x="5" y="3" width="14" height="18" rx="2"></rect>371 <line x1="8" y1="8" x2="16" y2="8"></line>372 <line x1="8" y1="12" x2="16" y2="12"></line>373 </svg>374 </div>375 <div class="card-content">376 <div class="card-title">County Highway 163</div>377 <div class="card-sub">Amsterdam, NY, USA</div>378 </div>379 <div class="arrow-right">380 <svg viewBox="0 0 24 24">381 <polyline points="8,4 16,12 8,20"></polyline>382 </svg>383 </div>384 </div>385 386 <div class="powered">powered by387 <span class="google">388 <span class="g-b">G</span><span class="g-r">o</span><span class="g-y">o</span><span class="g-b">g</span><span class="g-g">l</span><span class="g-r">e</span>389 </span>390 </div>391 392 <div class="hint">Didn't find what you were looking for?</div>393 <div class="deepsearch-btn">394 <span class="submarine">395 <svg viewBox="0 0 64 64">396 <rect x="12" y="26" width="40" height="16" rx="8"></rect>397 <circle cx="24" cy="34" r="3"></circle>398 <circle cx="34" cy="34" r="3"></circle>399 <rect x="30" y="20" width="8" height="6" rx="2"></rect>400 </svg>401 </span>402 <span>Use DeepSearch</span>403 </div>404 </div>405 406 <!-- Keyboard mock -->407 <div class="keyboard">408 <div class="kb-top">409 <span>Amsterdam</span>410 <svg class="mic" viewBox="0 0 24 24">411 <rect x="9" y="4" width="6" height="10" rx="3" fill="#bfc4c8"></rect>412 <path d="M5 11c0 4 3 6 7 6s7-2 7-6" stroke="#bfc4c8" stroke-width="2" fill="none"></path>413 </svg>414 </div>415 <div class="keys">416 <div class="row">417 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>418 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>419 </div>420 <div class="row">421 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>422 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>423 </div>424 <div class="row">425 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>426 <div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>427 </div>428 <div class="row">429 <div class="key green wide"></div>430 <div class="key wide"></div>431 <div class="key space"></div>432 <div class="key wide"></div>433 <div class="key search wide"></div>434 </div>435 </div>436 <div class="home-indicator"></div>437 </div>438 439</div>440</body>441</html>