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>Mobile UI - Search Results</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #180D3F; /* deep purple */15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 110px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 40px;29 font-size: 38px;30 letter-spacing: 0.2px;31 }32 .status-right { display: flex; gap: 28px; align-items: center; }33 .status-icon { width: 44px; height: 44px; opacity: 0.9; }34 35 /* Header */36 .header {37 position: absolute;38 top: 110px;39 left: 0;40 width: 100%;41 height: 150px;42 display: flex;43 align-items: center;44 gap: 24px;45 padding: 0 36px;46 }47 .back-btn {48 width: 72px; height: 72px; border-radius: 36px;49 display: flex; align-items: center; justify-content: center;50 }51 .header-title { font-size: 58px; font-weight: 700; }52 53 /* Search box */54 .search-box {55 position: absolute;56 top: 270px;57 left: 36px;58 width: 1008px;59 height: 112px;60 background: #FFFFFF;61 border-radius: 28px;62 display: flex;63 align-items: center;64 justify-content: space-between;65 padding: 0 28px;66 box-sizing: border-box;67 color: #1E234F;68 }69 .search-text { font-size: 44px; font-weight: 600; }70 .close-pill {71 width: 64px; height: 64px; border-radius: 32px;72 background: #EDEDED; display: flex; align-items: center; justify-content: center;73 }74 75 /* Toggle row */76 .toggle-row {77 position: absolute;78 top: 404px;79 left: 0;80 width: 100%;81 height: 120px;82 display: flex;83 align-items: center;84 justify-content: space-between;85 padding: 0 36px;86 box-sizing: border-box;87 }88 .toggle {89 display: flex; align-items: center; gap: 18px; color: #EDEAF7; font-size: 40px; font-weight: 600;90 }91 .toggle svg { width: 44px; height: 44px; }92 .active-underline {93 position: absolute; bottom: 0; left: 36px; width: 330px; height: 8px; background: #1A7; opacity: 0.0; /* hidden placeholder */94 }95 .view-list-underline {96 position: absolute; bottom: 0; left: 36px; width: 280px; height: 6px; background: #3E2E86; border-radius: 3px;97 }98 99 /* Results header strip */100 .results-strip {101 position: absolute;102 top: 524px;103 left: 0;104 width: 100%;105 height: 110px;106 background: #EFEFEF;107 display: flex;108 align-items: center;109 padding: 0 36px;110 color: #6E6E6E;111 font-size: 38px;112 font-weight: 600;113 box-sizing: border-box;114 }115 116 /* Results list */117 .results {118 position: absolute;119 top: 634px;120 left: 0;121 width: 100%;122 height: 830px;123 background: #F7F7F9;124 box-sizing: border-box;125 padding: 12px 0;126 overflow: hidden;127 }128 .item {129 display: flex;130 align-items: center;131 justify-content: space-between;132 padding: 26px 36px;133 border-bottom: 1px solid #E3E3E8;134 color: #1D2356;135 }136 .left {137 display: flex; align-items: center; gap: 26px;138 }139 .circle-icon {140 width: 86px; height: 86px; border-radius: 43px;141 background: #4A3C86; display: flex; align-items: center; justify-content: center;142 }143 .titles {144 display: flex; flex-direction: column; gap: 10px;145 }146 .title { font-size: 44px; font-weight: 800; }147 .subtitle { font-size: 34px; color: #8F8F98; }148 .fav {149 width: 72px; height: 72px; border-radius: 36px; border: 2px solid #D6D6DB;150 display: flex; align-items: center; justify-content: center; background: #FFFFFF;151 }152 .divider-last { border-bottom: none; }153 154 /* Keyboard overlay */155 .keyboard {156 position: absolute;157 bottom: 0;158 left: 0;159 width: 100%;160 height: 930px;161 background: #F1ECF5;162 border-top-left-radius: 24px;163 border-top-right-radius: 24px;164 box-shadow: 0 -2px 0 rgba(0,0,0,0.06);165 color: #333;166 }167 .kb-suggestions {168 height: 120px; display: flex; align-items: center; gap: 26px;169 padding: 0 36px; box-sizing: border-box;170 }171 .chip {172 background: #E6DFF3;173 color: #1E234F;174 padding: 16px 24px; border-radius: 28px; font-size: 36px; font-weight: 600;175 }176 .kb-row {177 display: flex; justify-content: space-between; padding: 0 28px; margin-top: 24px;178 }179 .key {180 width: 90px; height: 110px; background: #FFFFFF; border-radius: 24px;181 display: flex; align-items: center; justify-content: center;182 font-size: 40px; font-weight: 600; color: #242424; box-shadow: inset 0 0 0 1px #E3E3EA;183 }184 .key.wide { width: 160px; }185 .key.xwide { width: 260px; }186 .key.space { flex: 1; min-width: 420px; }187 .kb-bottom {188 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);189 width: 420px; height: 10px; background: #9E9EA6; border-radius: 6px; opacity: 0.8;190 }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Status Bar -->197 <div class="status-bar">198 <div>1:07</div>199 <div class="status-right">200 <!-- simple icons -->201 <svg class="status-icon" viewBox="0 0 24 24">202 <path fill="#FFFFFF" d="M12 20c4.4 0 8-3.6 8-8h-2c0 3.3-2.7 6-6 6s-6-2.7-6-6H4c0 4.4 3.6 8 8 8z"/>203 <path fill="#FFFFFF" d="M12 14c2.2 0 4-1.8 4-4h-2c0 1.1-.9 2-2 2s-2-.9-2-2H8c0 2.2 1.8 4 4 4z"/>204 <circle cx="12" cy="8" r="1" fill="#FFFFFF"/>205 </svg>206 <svg class="status-icon" viewBox="0 0 24 24">207 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>208 <rect x="4" y="8" width="12" height="8" fill="#FFFFFF"/>209 <rect x="21" y="10" width="2" height="4" fill="#FFFFFF"/>210 </svg>211 </div>212 </div>213 214 <!-- Header -->215 <div class="header">216 <div class="back-btn">217 <svg width="50" height="50" viewBox="0 0 24 24">218 <path d="M15 19L8 12l7-7" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>219 </svg>220 </div>221 <div class="header-title">Where to next?</div>222 </div>223 224 <!-- Search Box -->225 <div class="search-box">226 <div class="search-text">Barcelona</div>227 <div class="close-pill">228 <svg width="26" height="26" viewBox="0 0 24 24">229 <path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2" stroke-linecap="round"/>230 </svg>231 </div>232 </div>233 234 <!-- Toggle Row -->235 <div class="toggle-row">236 <div class="toggle">237 <svg viewBox="0 0 24 24">238 <rect x="4" y="5" width="16" height="2" fill="#FFFFFF"/>239 <rect x="4" y="11" width="16" height="2" fill="#FFFFFF"/>240 <rect x="4" y="17" width="16" height="2" fill="#FFFFFF"/>241 </svg>242 <div>View as list</div>243 </div>244 <div class="toggle" style="opacity:0.8;">245 <svg viewBox="0 0 24 24">246 <path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#FFFFFF"/>247 </svg>248 <div>View on map</div>249 </div>250 <div class="view-list-underline"></div>251 </div>252 253 <!-- Results Header Strip -->254 <div class="results-strip">Search results</div>255 256 <!-- Results List -->257 <div class="results">258 <!-- Item 1 -->259 <div class="item">260 <div class="left">261 <div class="circle-icon">262 <svg width="48" height="48" viewBox="0 0 24 24">263 <rect x="5" y="7" width="14" height="8" rx="2" fill="#FFFFFF"/>264 <circle cx="8" cy="17" r="1.5" fill="#FFFFFF"/>265 <circle cx="16" cy="17" r="1.5" fill="#FFFFFF"/>266 </svg>267 </div>268 <div class="titles">269 <div class="title">Barcelona City</div>270 <div class="subtitle">Spain</div>271 </div>272 </div>273 <div class="fav">274 <svg width="34" height="34" viewBox="0 0 24 24">275 <path d="M12 17.3l-6.2 3.6 1.6-6.9L2 9.4l7-0.6L12 2l3 6.8 7 .6-5.4 4.6 1.6 6.9z" fill="none" stroke="#9A9AAF" stroke-width="1.5"/>276 </svg>277 </div>278 </div>279 280 <!-- Item 2 -->281 <div class="item">282 <div class="left">283 <div class="circle-icon">284 <svg width="48" height="48" viewBox="0 0 24 24">285 <rect x="5" y="7" width="14" height="8" rx="2" fill="#FFFFFF"/>286 <circle cx="8" cy="17" r="1.5" fill="#FFFFFF"/>287 <circle cx="16" cy="17" r="1.5" fill="#FFFFFF"/>288 </svg>289 </div>290 <div class="titles">291 <div class="title">Barcelona-Sants</div>292 <div class="subtitle">Spain</div>293 </div>294 </div>295 <div class="fav">296 <svg width="34" height="34" viewBox="0 0 24 24">297 <path d="M12 17.3l-6.2 3.6 1.6-6.9L2 9.4l7-0.6L12 2l3 6.8 7 .6-5.4 4.6 1.6 6.9z" fill="none" stroke="#9A9AAF" stroke-width="1.5"/>298 </svg>299 </div>300 </div>301 302 <!-- Item 3 -->303 <div class="item">304 <div class="left">305 <div class="circle-icon">306 <svg width="48" height="48" viewBox="0 0 24 24">307 <rect x="5" y="7" width="14" height="8" rx="2" fill="#FFFFFF"/>308 <circle cx="8" cy="17" r="1.5" fill="#FFFFFF"/>309 <circle cx="16" cy="17" r="1.5" fill="#FFFFFF"/>310 </svg>311 </div>312 <div class="titles">313 <div class="title">Barcelona-Paseo De Gracia (Apd)</div>314 <div class="subtitle">Spain</div>315 </div>316 </div>317 <div class="fav">318 <svg width="34" height="34" viewBox="0 0 24 24">319 <path d="M12 17.3l-6.2 3.6 1.6-6.9L2 9.4l7-0.6L12 2l3 6.8 7 .6-5.4 4.6 1.6 6.9z" fill="none" stroke="#9A9AAF" stroke-width="1.5"/>320 </svg>321 </div>322 </div>323 324 <!-- Item 4 -->325 <div class="item">326 <div class="left">327 <div class="circle-icon">328 <svg width="48" height="48" viewBox="0 0 24 24">329 <rect x="5" y="7" width="14" height="8" rx="2" fill="#FFFFFF"/>330 <circle cx="8" cy="17" r="1.5" fill="#FFFFFF"/>331 <circle cx="16" cy="17" r="1.5" fill="#FFFFFF"/>332 </svg>333 </div>334 <div class="titles">335 <div class="title">Barcelona-Clot-Aragon (Apd.)</div>336 <div class="subtitle">Spain</div>337 </div>338 </div>339 <div class="fav">340 <svg width="34" height="34" viewBox="0 0 24 24">341 <path d="M12 17.3l-6.2 3.6 1.6-6.9L2 9.4l7-0.6L12 2l3 6.8 7 .6-5.4 4.6 1.6 6.9z" fill="none" stroke="#9A9AAF" stroke-width="1.5"/>342 </svg>343 </div>344 </div>345 346 <!-- Item 5 -->347 <div class="item">348 <div class="left">349 <div class="circle-icon">350 <svg width="48" height="48" viewBox="0 0 24 24">351 <rect x="5" y="7" width="14" height="8" rx="2" fill="#FFFFFF"/>352 <circle cx="8" cy="17" r="1.5" fill="#FFFFFF"/>353 <circle cx="16" cy="17" r="1.5" fill="#FFFFFF"/>354 </svg>355 </div>356 <div class="titles">357 <div class="title">Barcelona-Estacio De Francia</div>358 <div class="subtitle">Spain</div>359 </div>360 </div>361 <div class="fav">362 <svg width="34" height="34" viewBox="0 0 24 24">363 <path d="M12 17.3l-6.2 3.6 1.6-6.9L2 9.4l7-0.6L12 2l3 6.8 7 .6-5.4 4.6 1.6 6.9z" fill="none" stroke="#9A9AAF" stroke-width="1.5"/>364 </svg>365 </div>366 </div>367 368 <!-- Item 6 -->369 <div class="item divider-last">370 <div class="left">371 <div class="circle-icon">372 <svg width="48" height="48" viewBox="0 0 24 24">373 <rect x="5" y="7" width="14" height="8" rx="2" fill="#FFFFFF"/>374 <circle cx="8" cy="17" r="1.5" fill="#FFFFFF"/>375 <circle cx="16" cy="17" r="1.5" fill="#FFFFFF"/>376 </svg>377 </div>378 <div class="titles">379 <div class="title">Barcelona Aeroport El Prat</div>380 <div class="subtitle">Spain</div>381 </div>382 </div>383 <div class="fav">384 <svg width="34" height="34" viewBox="0 0 24 24">385 <path d="M12 17.3l-6.2 3.6 1.6-6.9L2 9.4l7-0.6L12 2l3 6.8 7 .6-5.4 4.6 1.6 6.9z" fill="none" stroke="#9A9AAF" stroke-width="1.5"/>386 </svg>387 </div>388 </div>389 </div>390 391 <!-- Keyboard -->392 <div class="keyboard">393 <div class="kb-suggestions">394 <div class="chip" style="display:flex; align-items:center; gap:14px;">395 <svg width="34" height="34" viewBox="0 0 24 24">396 <rect x="4" y="4" width="6" height="6" fill="#6C5EB5"/>397 <rect x="14" y="4" width="6" height="6" fill="#6C5EB5"/>398 <rect x="4" y="14" width="6" height="6" fill="#6C5EB5"/>399 <rect x="14" y="14" width="6" height="6" fill="#6C5EB5"/>400 </svg>401 <span>Barcelona</span>402 </div>403 <div class="chip">Barcelona's</div>404 <div style="margin-left:auto; display:flex; align-items:center;">405 <svg width="44" height="44" viewBox="0 0 24 24">406 <path d="M12 2c-2.8 0-5 2.2-5 5v6a5 5 0 0 0 10 0V7c0-2.8-2.2-5-5-5zm0 19a3 3 0 0 1-3-3h6a3 3 0 0 1-3 3z" fill="#7A6FC5"/>407 </svg>408 </div>409 </div>410 411 <div class="kb-row">412 <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>413 </div>414 <div class="kb-row">415 <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>416 <div class="key wide">⌫</div>417 </div>418 <div class="kb-row">419 <div class="key wide">⇧</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">.</div><div class="key wide">↵</div>420 </div>421 <div class="kb-row" style="align-items:center;">422 <div class="key wide">?123</div>423 <div class="key">,</div>424 <div class="key">😊</div>425 <div class="key space"></div>426 <div class="key">.</div>427 <div class="key wide">↩</div>428 </div>429 <div class="kb-bottom"></div>430 </div>431 432</div>433</body>434</html>