GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Transit Search UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f7f9fb;15 border-radius: 38px;16 box-shadow: 0 8px 28px rgba(0,0,0,0.15);17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;18 color: #1b2b34;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 1080px;27 height: 110px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 padding: 0 36px;32 color: #1a1a1a;33 font-weight: 600;34 font-size: 36px;35 }36 .sb-right {37 display: flex;38 gap: 22px;39 align-items: center;40 opacity: 0.8;41 }42 .sb-dot { width: 18px; height: 18px; background: #1a1a1a; border-radius: 50%; }43 44 /* Map placeholder */45 .map {46 position: absolute;47 top: 110px;48 left: 0;49 width: 1080px;50 height: 760px;51 background: #E0E0E0;52 border-top: 1px solid #BDBDBD;53 border-bottom: 1px solid #BDBDBD;54 display: flex;55 align-items: flex-start;56 justify-content: center;57 color: #757575;58 font-size: 36px;59 }60 .map span { margin-top: 18px; }61 62 /* Back button */63 .back-btn {64 position: absolute;65 top: 420px;66 left: 30px;67 width: 110px;68 height: 110px;69 background: #ffffff;70 border-radius: 55px;71 box-shadow: 0 4px 14px rgba(0,0,0,0.12);72 display: flex;73 align-items: center;74 justify-content: center;75 }76 .icon-arrow {77 width: 44px;78 height: 44px;79 fill: none;80 stroke: #4b6a82;81 stroke-width: 8;82 }83 84 /* Search bar */85 .search-wrap {86 position: absolute;87 top: 410px;88 left: 165px;89 width: 880px;90 height: 120px;91 background: #ffffff;92 border-radius: 60px;93 box-shadow: 0 8px 18px rgba(0,0,0,0.15);94 display: flex;95 align-items: center;96 padding: 0 34px;97 gap: 22px;98 }99 .icon-search {100 width: 46px; height: 46px; fill: none; stroke: #4b6a82; stroke-width: 8;101 }102 .end-pill {103 background: #42b6b0;104 color: #ffffff;105 font-weight: 700;106 font-size: 34px;107 padding: 10px 18px;108 border-radius: 20px;109 }110 .search-text {111 flex: 1;112 font-size: 40px;113 color: #1b2b34;114 }115 .icon-close {116 width: 42px; height: 42px; fill: none; stroke: #7c93a6; stroke-width: 8;117 }118 119 /* Blue results panel */120 .panel {121 position: absolute;122 top: 620px;123 left: 0;124 width: 1080px;125 height: 980px;126 background: #3e6a84;127 border-top-left-radius: 60px;128 border-top-right-radius: 60px;129 padding: 30px 32px 20px;130 color: #ffffff;131 }132 .panel::before {133 content: "";134 position: absolute;135 left: -180px;136 top: -140px;137 width: 440px;138 height: 440px;139 background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.15), rgba(255,255,255,0));140 border-radius: 50%;141 pointer-events: none;142 }143 .section-title {144 font-weight: 700;145 font-size: 42px;146 margin: 24px 8px;147 }148 .card {149 background: #ffffff;150 color: #1b2b34;151 border-radius: 28px;152 box-shadow: 0 6px 14px rgba(0,0,0,0.12);153 padding: 26px;154 display: flex;155 align-items: center;156 gap: 26px;157 margin: 16px 8px;158 }159 .card .left-icon {160 width: 84px; height: 84px; border-radius: 18px;161 background: #E0E0E0; border: 1px solid #BDBDBD;162 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;163 }164 .card .text {165 flex: 1;166 }167 .title {168 font-size: 40px; font-weight: 700; margin-bottom: 8px;169 }170 .subtitle {171 font-size: 30px; color: #5b7085;172 }173 .dots {174 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;175 }176 .dots svg { width: 22px; height: 22px; fill: #9aa9b7; }177 178 .results-row {179 display: flex;180 align-items: center;181 justify-content: space-between;182 margin: 18px 8px 10px;183 }184 .show-map {185 display: flex; align-items: center; gap: 12px; color: #cfe3ec; font-size: 34px; font-weight: 600;186 }187 .mini-map {188 width: 46px; height: 46px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 8px;189 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;190 }191 192 /* Keyboard */193 .keyboard {194 position: absolute;195 bottom: 54px;196 left: 0;197 width: 1080px;198 height: 760px;199 background: #1d1f22;200 border-top-left-radius: 28px;201 border-top-right-radius: 28px;202 box-shadow: 0 -8px 18px rgba(0,0,0,0.22);203 display: flex;204 flex-direction: column;205 overflow: hidden;206 }207 .kb-suggestions {208 background: #2a2d31;209 padding: 16px 24px;210 display: flex;211 align-items: center;212 gap: 26px;213 color: #e9eef4;214 font-size: 34px;215 }216 .chip {217 background: #3b3f45;218 color: #e9eef4;219 padding: 10px 20px;220 border-radius: 22px;221 }222 223 .kb-keys {224 flex: 1;225 padding: 20px 24px 18px;226 display: grid;227 grid-template-rows: repeat(4, 1fr);228 gap: 16px;229 }230 .row {231 display: grid;232 grid-auto-columns: 1fr;233 grid-auto-flow: column;234 gap: 14px;235 align-items: center;236 }237 .key {238 background: #2f3237;239 color: #eef2f6;240 border-radius: 14px;241 height: 120px;242 display: flex;243 align-items: center;244 justify-content: center;245 font-size: 42px;246 font-weight: 600;247 }248 .key.small { font-size: 34px; }249 .key.special {250 background: #4c5660;251 color: #eef2f6;252 }253 .key.cta {254 background: #a9c5de;255 color: #1b2b34;256 font-weight: 800;257 }258 259 /* Home indicator */260 .home-indicator {261 position: absolute;262 bottom: 14px;263 left: 50%;264 transform: translateX(-50%);265 width: 360px;266 height: 10px;267 background: #d8d8d8;268 border-radius: 5px;269 opacity: 0.9;270 }271</style>272</head>273<body>274<div id="render-target">275 276 <!-- Status Bar -->277 <div class="status-bar">278 <div>3:36</div>279 <div class="sb-right">280 <div class="sb-dot"></div>281 <div class="sb-dot"></div>282 <div class="sb-dot"></div>283 </div>284 </div>285 286 <!-- Map -->287 <div class="map">288 <span>[IMG: Map]</span>289 </div>290 291 <!-- Back Button -->292 <div class="back-btn">293 <svg class="icon-arrow" viewBox="0 0 24 24">294 <path d="M14 5l-7 7 7 7"/>295 </svg>296 </div>297 298 <!-- Search Bar -->299 <div class="search-wrap">300 <svg class="icon-search" viewBox="0 0 24 24">301 <circle cx="11" cy="11" r="7"></circle>302 <path d="M20 20l-4-4"></path>303 </svg>304 <div class="end-pill">End</div>305 <div class="search-text">World Trade Center</div>306 <svg class="icon-close" viewBox="0 0 24 24">307 <path d="M6 6l12 12M18 6l-12 12"></path>308 </svg>309 </div>310 311 <!-- Blue results panel -->312 <div class="panel">313 <div class="section-title">Stations</div>314 315 <!-- Station cards -->316 <div class="card">317 <div class="left-icon">[IMG]</div>318 <div class="text">319 <div class="title">World Trade Center</div>320 <div class="subtitle">Station</div>321 </div>322 <div class="dots">323 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>324 </div>325 </div>326 327 <div class="card">328 <div class="left-icon">[IMG]</div>329 <div class="text">330 <div class="title">World Trade Center</div>331 <div class="subtitle">Station · E</div>332 </div>333 <div class="dots">334 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>335 </div>336 </div>337 338 <!-- Results header -->339 <div class="results-row">340 <div class="section-title" style="margin: 0;">Results</div>341 <div class="show-map">342 <div class="mini-map">MAP</div>343 <div>Show on Map</div>344 </div>345 </div>346 347 <!-- Results list -->348 <div class="card">349 <div class="left-icon">[IMG]</div>350 <div class="text">351 <div class="title">World Trade Center</div>352 <div class="subtitle">Manhattan, New York, NY, USA</div>353 </div>354 </div>355 356 <div class="card">357 <div class="left-icon">[IMG]</div>358 <div class="text">359 <div class="title">World Trade Center Memorial</div>360 <div class="subtitle">Greenwich Street, New York, NY, USA</div>361 </div>362 <svg viewBox="0 0 24 24" style="width:40px;height:40px;fill:none;stroke:#9aa9b7;stroke-width:2;">363 <path d="M6 4h8v6h4l-6 6v-6H6z"></path>364 </svg>365 </div>366 367 <div class="card">368 <div class="left-icon">[IMG]</div>369 <div class="text">370 <div class="title">World Trade Center</div>371 <div class="subtitle">Fulton Street, New York, NY, USA</div>372 </div>373 </div>374 375 <div class="card">376 <div class="left-icon">[IMG]</div>377 <div class="text">378 <div class="title">World Trade Center</div>379 <div class="subtitle">New York, NY, USA</div>380 </div>381 </div>382 </div>383 384 <!-- Keyboard -->385 <div class="keyboard">386 <div class="kb-suggestions">387 <div class="chip">Center</div>388 <div class="chip">Centre</div>389 <div class="chip">Centers</div>390 <div style="margin-left:auto;">391 <svg class="icon-search" viewBox="0 0 24 24" style="width:36px;height:36px;stroke:#dbe7ef;"></svg>392 </div>393 </div>394 <div class="kb-keys">395 <div class="row">396 <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>397 </div>398 <div class="row">399 <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>400 </div>401 <div class="row">402 <div class="key special 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 special small">⌫</div>403 </div>404 <div class="row">405 <div class="key special small" style="width:150px">?123</div>406 <div class="key special small" style="width:120px">,</div>407 <div class="key" style="grid-column: span 5"> </div>408 <div class="key special small" style="width:120px">.</div>409 <div class="key cta small" style="width:150px">🔍</div>410 </div>411 </div>412 </div>413 414 <div class="home-indicator"></div>415 416</div>417</body>418</html>