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>Where to next UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; border-radius: 28px;13 box-shadow: 0 20px 60px rgba(0,0,0,0.15);14 color: #1d1d1f;15 }16 17 /* Top bars */18 .top-area { background:#1d1543; color:#fff; }19 .status-bar {20 height: 110px; display:flex; align-items:center; justify-content:space-between;21 padding: 0 32px; font-weight:600; font-size:34px;22 }23 .status-icons { display:flex; align-items:center; gap:28px; }24 .header {25 height: 160px; display:flex; align-items:center; gap:20px; padding: 0 28px; color:#fff;26 }27 .header .title { font-size:52px; font-weight:700; }28 29 /* Search */30 .search-wrap { padding: 24px 32px 10px; background:#1d1543; }31 .search-bar {32 height: 110px; background:#ffffff; border-radius: 24px; display:flex; align-items:center;33 padding: 0 24px; box-shadow: 0 2px 0 rgba(0,0,0,0.1) inset;34 }35 .search-bar .input {36 flex:1; font-size:40px; color:#333; padding: 0 18px;37 }38 .circle-btn {39 width: 70px; height: 70px; border-radius: 50%; background:#eee; display:flex; align-items:center; justify-content:center;40 }41 42 /* Tabs */43 .tabs {44 display:flex; justify-content:space-between; align-items:center; padding: 26px 32px 18px; background:#ffffff;45 border-bottom: 1px solid #e5e6ea;46 }47 .tab { display:flex; align-items:center; gap:16px; color:#2c2c52; font-size:36px; font-weight:600; }48 .tab.secondary { color:#7b7b93; font-weight:600; }49 .tab-underline { height: 6px; width: 210px; background:#2c1d77; border-radius:3px; margin-left: 32px; }50 51 /* Results header */52 .results-header {53 background:#f2f2f5; color:#8b8b99; font-size:34px; padding: 26px 32px; border-bottom: 1px solid #e7e7ee;54 }55 56 /* List */57 .list { background:#fff; }58 .item {59 display:flex; align-items:center; gap:22px; padding: 26px 32px; border-bottom:1px solid #e6e6ea;60 }61 .rail-icon {62 width: 84px; height: 84px; border-radius: 50%;63 background:#6c6299; display:flex; align-items:center; justify-content:center;64 }65 .item .text { flex:1; }66 .item .title { font-size:40px; color:#1f2150; font-weight:700; }67 .item .subtitle { font-size:30px; color:#9aa0ac; margin-top: 8px; }68 .fav {69 width: 72px; height: 72px; border-radius: 50%; border: 1px solid #cfd3db; display:flex; align-items:center; justify-content:center;70 }71 72 /* Keyboard */73 .keyboard {74 position:absolute; left:0; right:0; bottom:40px; height: 860px; background:#f3eef7;75 border-top: 1px solid #e5e1ea;76 }77 .kb-suggestions {78 height: 110px; display:flex; align-items:center; gap:18px; padding: 0 24px; border-bottom: 1px solid #e5e1ea;79 }80 .suggest-chip {81 background:#ffffff; border:1px solid #ddd; border-radius:24px; padding: 10px 24px; font-size:34px; color:#3b3b52;82 }83 .kb-icon-circle {84 width:72px; height:72px; border-radius:36px; background:#d9d2f3; display:flex; align-items:center; justify-content:center;85 }86 87 .kb-rows { padding: 16px 20px; }88 .row { display:flex; justify-content:center; gap:14px; margin: 18px 0; }89 .key {90 width: 88px; height: 104px; background:#f6f3fa; border:1px solid #ddd; border-radius:26px; display:flex; align-items:center; justify-content:center;91 font-size:42px; color:#2b2b2b; box-shadow: 0 1px 0 rgba(0,0,0,0.05);92 }93 .key.wide { width: 160px; }94 .space { flex: 1; min-width: 360px; background:#ffffff; }95 .key.special { background:#e9e4f5; color:#5b57a3; }96 .key.backspace { width: 120px; }97 .key.enter { width: 120px; }98 .key.shift { width: 120px; }99 100 /* Gesture bar */101 .gesture-bar {102 position:absolute; bottom: 12px; left:50%; transform: translateX(-50%);103 width: 240px; height: 10px; background:#bfbfc4; border-radius: 6px;104 }105 106 /* Simple reset for SVGs */107 svg { display:block; }108</style>109</head>110<body>111<div id="render-target">112 113 <div class="top-area">114 <div class="status-bar">115 <div>1:06</div>116 <div class="status-icons">117 <!-- two little indicators -->118 <div style="width:26px;height:26px;border-radius:6px;background:#fff;opacity:.95;"></div>119 <div style="width:26px;height:26px;border-radius:6px;background:#fff;opacity:.95;"></div>120 <div style="color:#fff;font-weight:800;">oyo</div>121 <!-- Wi-Fi icon -->122 <svg width="40" height="32" viewBox="0 0 40 32">123 <path d="M4 10c8-6 24-6 32 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>124 <path d="M9 16c6-4 16-4 22 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>125 <circle cx="20" cy="22" r="3" fill="#fff"/>126 </svg>127 <!-- Battery -->128 <svg width="54" height="26" viewBox="0 0 54 26">129 <rect x="1" y="3" width="44" height="20" rx="4" stroke="#fff" stroke-width="3" fill="none"/>130 <rect x="5" y="7" width="36" height="12" rx="2" fill="#fff"/>131 <rect x="47" y="9" width="6" height="8" rx="2" fill="#fff"/>132 </svg>133 </div>134 </div>135 136 <div class="header">137 <!-- Back arrow -->138 <svg width="54" height="54" viewBox="0 0 24 24">139 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>140 </svg>141 <div class="title">Where to next?</div>142 </div>143 144 <div class="search-wrap">145 <div class="search-bar">146 <!-- search icon -->147 <div class="circle-btn" style="background:#eee;">148 <svg width="34" height="34" viewBox="0 0 24 24">149 <circle cx="10" cy="10" r="6.5" stroke="#6b6b78" stroke-width="2" fill="none"/>150 <path d="M15.5 15.5L22 22" stroke="#6b6b78" stroke-width="2" stroke-linecap="round"/>151 </svg>152 </div>153 <div class="input">Madrid</div>154 <!-- clear -->155 <div class="circle-btn">156 <svg width="28" height="28" viewBox="0 0 24 24">157 <path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2.3" stroke-linecap="round"/>158 </svg>159 </div>160 </div>161 </div>162 </div>163 164 <div class="tabs">165 <div style="display:flex; flex-direction:column;">166 <div class="tab">167 <svg width="38" height="38" viewBox="0 0 24 24">168 <rect x="3" y="4" width="18" height="4" rx="2" fill="#2c1d77"/>169 <rect x="3" y="10" width="18" height="4" rx="2" fill="#2c1d77" opacity=".85"/>170 <rect x="3" y="16" width="12" height="4" rx="2" fill="#2c1d77" opacity=".7"/>171 </svg>172 <span>View as list</span>173 </div>174 <div class="tab-underline"></div>175 </div>176 <div class="tab secondary">177 <svg width="38" height="38" viewBox="0 0 24 24">178 <path d="M12 2c4.4 0 8 3.6 8 8 0 6-8 12-8 12S4 16 4 10c0-4.4 3.6-8 8-8z" fill="#9aa0ac"/>179 <circle cx="12" cy="10" r="3.5" fill="#fff"/>180 </svg>181 <span>View on map</span>182 </div>183 </div>184 185 <div class="results-header">Search results</div>186 187 <div class="list">188 <!-- Item 1 -->189 <div class="item">190 <div class="rail-icon">191 <svg width="42" height="42" viewBox="0 0 24 24">192 <rect x="6" y="6" width="12" height="8" rx="2" fill="#fff"/>193 <rect x="8" y="16" width="8" height="2" rx="1" fill="#fff"/>194 <circle cx="9" cy="20" r="1.5" fill="#fff"/>195 <circle cx="15" cy="20" r="1.5" fill="#fff"/>196 </svg>197 </div>198 <div class="text">199 <div class="title">Madrid City</div>200 <div class="subtitle">Spain</div>201 </div>202 <div class="fav">203 <svg width="34" height="34" viewBox="0 0 24 24">204 <path d="M12 17.5l-5.2 3 1-6-4.2-4 5.8-.8L12 4l2.6 5.7 5.8.8-4.2 4 1 6z" fill="none" stroke="#a9adb8" stroke-width="1.6"/>205 </svg>206 </div>207 </div>208 <!-- Item 2 -->209 <div class="item">210 <div class="rail-icon">211 <svg width="42" height="42" viewBox="0 0 24 24">212 <rect x="6" y="6" width="12" height="8" rx="2" fill="#fff"/>213 <rect x="8" y="16" width="8" height="2" rx="1" fill="#fff"/>214 <circle cx="9" cy="20" r="1.5" fill="#fff"/>215 <circle cx="15" cy="20" r="1.5" fill="#fff"/>216 </svg>217 </div>218 <div class="text">219 <div class="title">Madrid-Chamartin</div>220 <div class="subtitle">Spain</div>221 </div>222 <div class="fav">223 <svg width="34" height="34" viewBox="0 0 24 24">224 <path d="M12 17.5l-5.2 3 1-6-4.2-4 5.8-.8L12 4l2.6 5.7 5.8.8-4.2 4 1 6z" fill="none" stroke="#a9adb8" stroke-width="1.6"/>225 </svg>226 </div>227 </div>228 <!-- Item 3 -->229 <div class="item">230 <div class="rail-icon">231 <svg width="42" height="42" viewBox="0 0 24 24">232 <rect x="6" y="6" width="12" height="8" rx="2" fill="#fff"/>233 <rect x="8" y="16" width="8" height="2" rx="1" fill="#fff"/>234 <circle cx="9" cy="20" r="1.5" fill="#fff"/>235 <circle cx="15" cy="20" r="1.5" fill="#fff"/>236 </svg>237 </div>238 <div class="text">239 <div class="title">Madrid-Puerta De Atocha</div>240 <div class="subtitle">Spain</div>241 </div>242 <div class="fav">243 <svg width="34" height="34" viewBox="0 0 24 24">244 <path d="M12 17.5l-5.2 3 1-6-4.2-4 5.8-.8L12 4l2.6 5.7 5.8.8-4.2 4 1 6z" fill="none" stroke="#a9adb8" stroke-width="1.6"/>245 </svg>246 </div>247 </div>248 <!-- Item 4 -->249 <div class="item">250 <div class="rail-icon">251 <svg width="42" height="42" viewBox="0 0 24 24">252 <rect x="6" y="6" width="12" height="8" rx="2" fill="#fff"/>253 <rect x="8" y="16" width="8" height="2" rx="1" fill="#fff"/>254 <circle cx="9" cy="20" r="1.5" fill="#fff"/>255 <circle cx="15" cy="20" r="1.5" fill="#fff"/>256 </svg>257 </div>258 <div class="text">259 <div class="title">Madrid-Principe Pio</div>260 <div class="subtitle">Spain</div>261 </div>262 <div class="fav">263 <svg width="34" height="34" viewBox="0 0 24 24">264 <path d="M12 17.5l-5.2 3 1-6-4.2-4 5.8-.8L12 4l2.6 5.7 5.8.8-4.2 4 1 6z" fill="none" stroke="#a9adb8" stroke-width="1.6"/>265 </svg>266 </div>267 </div>268 <!-- Item 5 -->269 <div class="item">270 <div class="rail-icon">271 <svg width="42" height="42" viewBox="0 0 24 24">272 <rect x="6" y="6" width="12" height="8" rx="2" fill="#fff"/>273 <rect x="8" y="16" width="8" height="2" rx="1" fill="#fff"/>274 <circle cx="9" cy="20" r="1.5" fill="#fff"/>275 <circle cx="15" cy="20" r="1.5" fill="#fff"/>276 </svg>277 </div>278 <div class="text">279 <div class="title">Madrid-Nuevos Ministerios</div>280 <div class="subtitle">Spain</div>281 </div>282 <div class="fav">283 <svg width="34" height="34" viewBox="0 0 24 24">284 <path d="M12 17.5l-5.2 3 1-6-4.2-4 5.8-.8L12 4l2.6 5.7 5.8.8-4.2 4 1 6z" fill="none" stroke="#a9adb8" stroke-width="1.6"/>285 </svg>286 </div>287 </div>288 <!-- Item 6 -->289 <div class="item">290 <div class="rail-icon">291 <svg width="42" height="42" viewBox="0 0 24 24">292 <rect x="6" y="6" width="12" height="8" rx="2" fill="#fff"/>293 <rect x="8" y="16" width="8" height="2" rx="1" fill="#fff"/>294 <circle cx="9" cy="20" r="1.5" fill="#fff"/>295 <circle cx="15" cy="20" r="1.5" fill="#fff"/>296 </svg>297 </div>298 <div class="text">299 <div class="title">Madrid-Recoletos (Apd.)</div>300 <div class="subtitle">Spain</div>301 </div>302 <div class="fav">303 <svg width="34" height="34" viewBox="0 0 24 24">304 <path d="M12 17.5l-5.2 3 1-6-4.2-4 5.8-.8L12 4l2.6 5.7 5.8.8-4.2 4 1 6z" fill="none" stroke="#a9adb8" stroke-width="1.6"/>305 </svg>306 </div>307 </div>308 </div>309 310 <!-- Keyboard -->311 <div class="keyboard">312 <div class="kb-suggestions">313 <div class="kb-icon-circle">314 <!-- apps/grid icon -->315 <svg width="34" height="34" viewBox="0 0 24 24">316 <rect x="3" y="3" width="7" height="7" rx="2" fill="#6f66a8"/>317 <rect x="14" y="3" width="7" height="7" rx="2" fill="#6f66a8"/>318 <rect x="3" y="14" width="7" height="7" rx="2" fill="#6f66a8"/>319 <rect x="14" y="14" width="7" height="7" rx="2" fill="#6f66a8"/>320 </svg>321 </div>322 <div class="suggest-chip">Madrid</div>323 <div class="suggest-chip">Madridista</div>324 <div class="suggest-chip">Madrid's</div>325 <div style="flex:1"></div>326 <div class="kb-icon-circle" style="background:#e7e2f5;">327 <!-- microphone -->328 <svg width="28" height="28" viewBox="0 0 24 24">329 <rect x="8" y="4" width="8" height="10" rx="4" fill="#6f66a8"/>330 <path d="M6 10c0 4 12 4 12 0" stroke="#6f66a8" stroke-width="2" fill="none"/>331 <path d="M12 14v4M9 20h6" stroke="#6f66a8" stroke-width="2" stroke-linecap="round"/>332 </svg>333 </div>334 </div>335 336 <div class="kb-rows">337 <div class="row">338 <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>339 <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>340 </div>341 <div class="row">342 <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>343 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>344 </div>345 <div class="row">346 <div class="key shift special">347 <svg width="34" height="34" viewBox="0 0 24 24">348 <path d="M12 4l7 8h-4v8H9v-8H5z" fill="#6f66a8"/>349 </svg>350 </div>351 <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>352 <div class="key backspace special">353 <svg width="40" height="40" viewBox="0 0 24 24">354 <path d="M3 12l5-5h12v10H8z" fill="#6f66a8"/>355 <path d="M10 9l6 6M16 9l-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>356 </svg>357 </div>358 </div>359 <div class="row">360 <div class="key wide special">?123</div>361 <div class="key wide special">,</div>362 <div class="key wide special">363 <!-- emoji -->364 <svg width="34" height="34" viewBox="0 0 24 24">365 <circle cx="12" cy="12" r="10" fill="#6f66a8" opacity=".9"/>366 <circle cx="9" cy="10" r="1.5" fill="#fff"/>367 <circle cx="15" cy="10" r="1.5" fill="#fff"/>368 <path d="M8 15c2 2 6 2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>369 </svg>370 </div>371 <div class="key space"></div>372 <div class="key wide special">.</div>373 <div class="key enter special">374 <svg width="34" height="34" viewBox="0 0 24 24">375 <path d="M5 6v6h9" stroke="#6f66a8" stroke-width="2" fill="none" stroke-linecap="round"/>376 <path d="M12 17l4-5-4-5" fill="none" stroke="#6f66a8" stroke-width="2" stroke-linecap="round"/>377 </svg>378 </div>379 </div>380 </div>381 </div>382 383 <div class="gesture-bar"></div>384 385</div>386</body>387</html>