GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Where to next UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", system-ui, -apple-system, 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 /* Header / Top area */17 .status-bar {18 height: 88px;19 background: #1D1245;20 color: #fff;21 display: flex;22 align-items: center;23 padding: 0 36px;24 font-weight: 600;25 font-size: 32px;26 letter-spacing: 0.2px;27 }28 .status-icons {29 margin-left: auto;30 display: flex;31 align-items: center;32 gap: 28px;33 }34 .status-dot { width: 18px; height: 18px; background:#fff; border-radius:50%; opacity:0.9; }35 .status-battery {36 width: 42px; height: 22px; border:2px solid #fff; border-radius:5px; position: relative;37 }38 .status-battery::after {39 content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#fff; border-radius:2px;40 }41 .status-battery-fill { width: 26px; height: 14px; background:#fff; margin: 4px; }42 43 .header {44 background: #1D1245;45 color: #fff;46 padding: 18px 36px 36px 36px;47 position: relative;48 }49 .header-row {50 display: flex;51 align-items: center;52 margin-top: 12px;53 }54 .back-icon {55 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;56 margin-right: 16px;57 }58 .title {59 font-size: 46px;60 font-weight: 700;61 }62 63 .search-bar {64 margin-top: 32px;65 background: #fff;66 height: 92px;67 border-radius: 18px;68 display: flex;69 align-items: center;70 padding: 0 24px;71 box-shadow: 0 4px 10px rgba(0,0,0,0.08);72 }73 .search-text { font-size: 38px; color: #2C2C2C; font-weight: 600; letter-spacing: 0.2px; }74 .caret { width: 3px; height: 40px; background: #FFA000; margin-left: 6px; border-radius: 2px; }75 .clear-btn {76 margin-left: auto;77 width: 56px; height: 56px; border-radius: 28px;78 background: #ECECEC; display:flex; align-items:center; justify-content:center;79 }80 81 /* Tabs */82 .toggle-row {83 background: #fff;84 display: flex;85 align-items: center;86 padding: 22px 36px;87 border-top-left-radius: 20px;88 border-top-right-radius: 20px;89 }90 .toggle {91 display: flex; align-items: center; gap: 16px; color: #2E2E5C; font-weight: 700; font-size: 34px;92 }93 .toggle + .toggle { margin-left: auto; color: #6A6A8A; font-weight: 600; }94 .active-underline {95 height: 6px; background: #2E1E69; width: 240px; margin-left: 36px; border-radius: 3px;96 }97 98 /* Section label */99 .section-label {100 height: 96px;101 background: #EFEFF3;102 color: #7A7A86;103 display: flex;104 align-items: center;105 padding: 0 36px;106 font-size: 34px;107 font-weight: 600;108 border-top: 1px solid #E2E2E8;109 border-bottom: 1px solid #E2E2E8;110 }111 112 /* List */113 .list {114 background: #fff;115 padding-bottom: 24px;116 }117 .list-item {118 display: flex;119 align-items: center;120 padding: 28px 36px;121 border-bottom: 1px solid #E6E6EB;122 }123 .circle-icon {124 width: 80px; height: 80px; border: 2px solid #5B4A8F; border-radius: 50%;125 display: flex; align-items: center; justify-content: center; margin-right: 28px;126 color: #5B4A8F;127 }128 .item-text { flex: 1; }129 .item-title {130 font-size: 40px; line-height: 52px;131 }132 .item-title strong { color: #1E2657; font-weight: 800; }133 .item-title span { color: #1E2657; font-weight: 600; }134 .item-sub { font-size: 30px; color: #8B8B96; margin-top: 4px; }135 .fav {136 width: 64px; height: 64px; border-radius: 50%; border: 2px solid #C9CAD3;137 display:flex; align-items:center; justify-content:center; color:#8B8B96;138 }139 140 /* Keyboard overlay */141 .keyboard {142 position: absolute;143 left: 0;144 bottom: 0;145 width: 100%;146 height: 980px;147 background: #F1ECF5;148 border-top: 1px solid #D9D9E3;149 box-shadow: 0 -6px 14px rgba(0,0,0,0.08);150 }151 .kb-suggestion {152 height: 82px;153 display: flex; align-items: center; justify-content: center;154 color: #2C2C2C; font-size: 36px; font-weight: 600;155 }156 .kb-row { display: flex; gap: 18px; padding: 26px 24px; }157 .key {158 background: #FFFFFF;159 border-radius: 24px;160 box-shadow: inset 0 0 0 1px #E2E2E8;161 height: 120px;162 flex: 1;163 display: flex; align-items: center; justify-content: center;164 font-size: 42px; color: #222;165 }166 .key.wide { flex: 1.4; }167 .key.medium { flex: 1.2; }168 .key.small { flex: 0.9; }169 170 .kb-bottom-row {171 display: flex; gap: 18px; padding: 12px 24px 36px 24px; align-items: center;172 }173 .key-func {174 background: #DDD6EB;175 color: #2C2C4F;176 border-radius: 24px;177 height: 120px;178 width: 160px;179 display:flex; align-items:center; justify-content:center;180 font-size: 36px; font-weight: 700;181 }182 .space { flex: 1; height: 120px; border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E2E2E8; }183 .enter { width: 160px; height: 120px; background: #DDD6EB; border-radius: 24px; display:flex; align-items:center; justify-content:center; font-size: 36px; font-weight:700; }184 .mic { width: 120px; height: 120px; background:#DDD6EB; border-radius:24px; display:flex; align-items:center; justify-content:center; }185 186 /* Helpers */187 .separator { height: 1px; background:#E6E6EB; }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status bar -->194 <div class="status-bar">195 11:25196 <div class="status-icons">197 <div class="status-dot"></div>198 <div class="status-dot"></div>199 <div class="status-dot"></div>200 <div class="status-battery"><div class="status-battery-fill"></div></div>201 </div>202 </div>203 204 <!-- Header -->205 <div class="header">206 <div class="header-row">207 <div class="back-icon">208 <svg width="48" height="48" viewBox="0 0 48 48">209 <path d="M28 10 L14 24 L28 38" stroke="#FFFFFF" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>210 </svg>211 </div>212 <div class="title">Where to next?</div>213 </div>214 215 <div class="search-bar">216 <div class="search-text">Amsterdam</div>217 <div class="caret"></div>218 <div class="clear-btn">219 <svg width="28" height="28" viewBox="0 0 28 28">220 <path d="M6 6 L22 22 M22 6 L6 22" stroke="#5F5F69" stroke-width="3" stroke-linecap="round"/>221 </svg>222 </div>223 </div>224 </div>225 226 <!-- Toggle row -->227 <div class="toggle-row">228 <div class="toggle">229 <svg width="40" height="40" viewBox="0 0 40 40">230 <rect x="6" y="8" width="28" height="4" fill="#2E1E69"/>231 <rect x="6" y="18" width="28" height="4" fill="#2E1E69"/>232 <rect x="6" y="28" width="28" height="4" fill="#2E1E69"/>233 </svg>234 <div>View as list</div>235 </div>236 <div class="toggle">237 <svg width="40" height="40" viewBox="0 0 40 40">238 <path d="M20 6 C14 6 10 10 10 16 C10 24 20 34 20 34 C20 34 30 24 30 16 C30 10 26 6 20 6 Z" fill="#8A86A8"/>239 <circle cx="20" cy="16" r="4" fill="#FFFFFF"/>240 </svg>241 <div>View on map</div>242 </div>243 </div>244 <div class="active-underline"></div>245 246 <!-- Section label -->247 <div class="section-label">Search results</div>248 249 <!-- List -->250 <div class="list">251 <!-- Item 1 -->252 <div class="list-item">253 <div class="circle-icon">254 <svg width="48" height="48" viewBox="0 0 48 48">255 <rect x="12" y="14" width="24" height="20" rx="4" fill="none" stroke="#5B4A8F" stroke-width="3"/>256 <circle cx="18" cy="20" r="3" fill="#5B4A8F"/>257 <circle cx="30" cy="20" r="3" fill="#5B4A8F"/>258 <rect x="16" y="28" width="16" height="4" fill="#5B4A8F"/>259 </svg>260 </div>261 <div class="item-text">262 <div class="item-title"><strong>Amsterdam</strong> <span>Centraal</span></div>263 <div class="item-sub">Netherlands</div>264 </div>265 <div class="fav">266 <svg width="34" height="34" viewBox="0 0 34 34">267 <path d="M17 4 L20 12 L28 12 L21 17 L24 26 L17 21 L10 26 L13 17 L6 12 L14 12 Z" fill="none" stroke="#8B8B96" stroke-width="2" stroke-linejoin="round"/>268 </svg>269 </div>270 </div>271 272 <!-- Item 2 -->273 <div class="list-item">274 <div class="circle-icon">275 <svg width="48" height="48" viewBox="0 0 48 48">276 <rect x="12" y="14" width="24" height="20" rx="4" fill="none" stroke="#5B4A8F" stroke-width="3"/>277 <circle cx="18" cy="20" r="3" fill="#5B4A8F"/>278 <circle cx="30" cy="20" r="3" fill="#5B4A8F"/>279 <rect x="16" y="28" width="16" height="4" fill="#5B4A8F"/>280 </svg>281 </div>282 <div class="item-text">283 <div class="item-title"><strong>Amsterdam</strong> <span>Airport<nld></span></div>284 <div class="item-sub">Netherlands</div>285 </div>286 <div class="fav">287 <svg width="34" height="34" viewBox="0 0 34 34">288 <path d="M17 4 L20 12 L28 12 L21 17 L24 26 L17 21 L10 26 L13 17 L6 12 L14 12 Z" fill="none" stroke="#8B8B96" stroke-width="2" stroke-linejoin="round"/>289 </svg>290 </div>291 </div>292 293 <!-- Item 3 -->294 <div class="list-item">295 <div class="circle-icon">296 <svg width="48" height="48" viewBox="0 0 48 48">297 <rect x="12" y="14" width="24" height="20" rx="4" fill="none" stroke="#5B4A8F" stroke-width="3"/>298 <circle cx="18" cy="20" r="3" fill="#5B4A8F"/>299 <circle cx="30" cy="20" r="3" fill="#5B4A8F"/>300 <rect x="16" y="28" width="16" height="4" fill="#5B4A8F"/>301 </svg>302 </div>303 <div class="item-text">304 <div class="item-title"><strong>Amsterdam</strong> <span>Zuid</span></div>305 <div class="item-sub">Netherlands</div>306 </div>307 <div class="fav">308 <svg width="34" height="34" viewBox="0 0 34 34">309 <path d="M17 4 L20 12 L28 12 L21 17 L24 26 L17 21 L10 26 L13 17 L6 12 L14 12 Z" fill="none" stroke="#8B8B96" stroke-width="2" stroke-linejoin="round"/>310 </svg>311 </div>312 </div>313 314 <!-- Item 4 -->315 <div class="list-item">316 <div class="circle-icon">317 <svg width="48" height="48" viewBox="0 0 48 48">318 <rect x="12" y="14" width="24" height="20" rx="4" fill="none" stroke="#5B4A8F" stroke-width="3"/>319 <circle cx="18" cy="20" r="3" fill="#5B4A8F"/>320 <circle cx="30" cy="20" r="3" fill="#5B4A8F"/>321 <rect x="16" y="28" width="16" height="4" fill="#5B4A8F"/>322 </svg>323 </div>324 <div class="item-text">325 <div class="item-title"><strong>Amsterdam</strong> <span>Amstel</span></div>326 <div class="item-sub">Netherlands</div>327 </div>328 <div class="fav">329 <svg width="34" height="34" viewBox="0 0 34 34">330 <path d="M17 4 L20 12 L28 12 L21 17 L24 26 L17 21 L10 26 L13 17 L6 12 L14 12 Z" fill="none" stroke="#8B8B96" stroke-width="2" stroke-linejoin="round"/>331 </svg>332 </div>333 </div>334 335 <!-- Item 5 -->336 <div class="list-item">337 <div class="circle-icon">338 <svg width="48" height="48" viewBox="0 0 48 48">339 <rect x="12" y="14" width="24" height="20" rx="4" fill="none" stroke="#5B4A8F" stroke-width="3"/>340 <circle cx="18" cy="20" r="3" fill="#5B4A8F"/>341 <circle cx="30" cy="20" r="3" fill="#5B4A8F"/>342 <rect x="16" y="28" width="16" height="4" fill="#5B4A8F"/>343 </svg>344 </div>345 <div class="item-text">346 <div class="item-title"><strong>Amsterdam</strong> <span>Bijlmer Arena</span></div>347 <div class="item-sub">Netherlands</div>348 </div>349 <div class="fav">350 <svg width="34" height="34" viewBox="0 0 34 34">351 <path d="M17 4 L20 12 L28 12 L21 17 L24 26 L17 21 L10 26 L13 17 L6 12 L14 12 Z" fill="none" stroke="#8B8B96" stroke-width="2" stroke-linejoin="round"/>352 </svg>353 </div>354 </div>355 356 <!-- Item 6 -->357 <div class="list-item">358 <div class="circle-icon">359 <svg width="48" height="48" viewBox="0 0 48 48">360 <rect x="12" y="14" width="24" height="20" rx="4" fill="none" stroke="#5B4A8F" stroke-width="3"/>361 <circle cx="18" cy="20" r="3" fill="#5B4A8F"/>362 <circle cx="30" cy="20" r="3" fill="#5B4A8F"/>363 <rect x="16" y="28" width="16" height="4" fill="#5B4A8F"/>364 </svg>365 </div>366 <div class="item-text">367 <div class="item-title"><strong>Amsterdam</strong> <span>Sloterdijk</span></div>368 <div class="item-sub">Netherlands</div>369 </div>370 <div class="fav">371 <svg width="34" height="34" viewBox="0 0 34 34">372 <path d="M17 4 L20 12 L28 12 L21 17 L24 26 L17 21 L10 26 L13 17 L6 12 L14 12 Z" fill="none" stroke="#8B8B96" stroke-width="2" stroke-linejoin="round"/>373 </svg>374 </div>375 </div>376 </div>377 378 <!-- Keyboard -->379 <div class="keyboard">380 <div class="kb-suggestion">Amsterdam</div>381 <div class="kb-row">382 <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>383 </div>384 <div class="kb-row">385 <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>386 </div>387 <div class="kb-row">388 <div class="key-func">⇧</div>389 <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>390 <div class="key-func">391 <svg width="30" height="30" viewBox="0 0 30 30">392 <path d="M8 8 L22 15 L8 22 Z" fill="#2C2C4F"/>393 </svg>394 </div>395 </div>396 <div class="kb-bottom-row">397 <div class="key-func">?123</div>398 <div class="key-func">,</div>399 <div class="key-func">😊</div>400 <div class="space"></div>401 <div class="key-func">.</div>402 <div class="enter">↵</div>403 </div>404 </div>405 406</div>407</body>408</html>