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: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F6F4F9;15 }16 17 /* Top status bar and header */18 .topbar {19 height: 120px;20 background: #1B1340;21 color: #fff;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 36px;26 font-size: 36px;27 box-sizing: border-box;28 }29 .status-icons { display: flex; align-items: center; gap: 24px; }30 .icon-dot { width: 22px; height: 22px; background: #fff; border-radius: 50%; opacity: 0.85; }31 .wifi, .battery {32 display: inline-block;33 vertical-align: middle;34 }35 .header {36 height: 160px;37 background: #1B1340;38 color: #fff;39 display: flex;40 align-items: center;41 padding: 0 36px;42 box-sizing: border-box;43 gap: 24px;44 }45 .header h1 {46 margin: 0;47 font-size: 56px;48 font-weight: 600;49 }50 51 /* Search bar */52 .search-wrap {53 padding: 28px 36px 16px 36px;54 background: #1B1340;55 box-sizing: border-box;56 }57 .search-bar {58 height: 110px;59 background: #FFFFFF;60 border-radius: 18px;61 border: 1px solid #DADADA;62 display: flex;63 align-items: center;64 padding: 0 28px;65 box-sizing: border-box;66 gap: 24px;67 }68 .search-placeholder {69 color: #8A8E9A;70 font-size: 36px;71 }72 73 /* Tabs */74 .tabs {75 height: 120px;76 background: #F6F4F9;77 display: flex;78 align-items: center;79 justify-content: space-between;80 padding: 0 36px;81 box-sizing: border-box;82 border-bottom: 2px solid #E3E1E8;83 }84 .tab {85 display: flex;86 align-items: center;87 gap: 18px;88 color: #2E2E4B;89 font-size: 36px;90 padding-bottom: 18px;91 }92 .tab.right { color: #77778B; }93 .tab.selected {94 border-bottom: 8px solid #2A224F;95 font-weight: 600;96 }97 98 /* Section labels */99 .section-label {100 height: 110px;101 background: #EDECEE;102 color: #8A8A9A;103 font-size: 38px;104 display: flex;105 align-items: center;106 padding: 0 36px;107 box-sizing: border-box;108 }109 110 /* GPS card */111 .gps-card {112 background: #FFFFFF;113 margin: 0 0 20px 0;114 padding: 60px 60px;115 box-sizing: border-box;116 text-align: center;117 color: #212746;118 font-size: 40px;119 line-height: 1.35;120 box-shadow: 0 1px 0 #E6E4EC inset;121 }122 .gps-btn {123 margin-top: 40px;124 display: inline-block;125 background: #F6B72B;126 color: #2B2B2B;127 padding: 26px 40px;128 border-radius: 16px;129 font-weight: 700;130 font-size: 38px;131 box-shadow: 0 2px 0 rgba(0,0,0,0.1);132 }133 134 /* Recent searches list */135 .list {136 background: #FFFFFF;137 box-shadow: 0 -1px 0 #E6E4EC inset;138 }139 .list-item {140 display: flex;141 align-items: center;142 padding: 30px 36px;143 box-sizing: border-box;144 border-bottom: 1px solid #E5E3EA;145 gap: 28px;146 }147 .circle-icon {148 width: 92px;149 height: 92px;150 border-radius: 50%;151 background: #D8D6E4;152 display: flex;153 align-items: center;154 justify-content: center;155 }156 .item-text {157 flex: 1;158 }159 .item-title {160 font-size: 42px;161 color: #26315A;162 margin: 0;163 font-weight: 600;164 }165 .item-sub {166 font-size: 32px;167 color: #9AA0AF;168 margin-top: 6px;169 }170 .star-circle {171 width: 84px;172 height: 84px;173 border-radius: 50%;174 border: 2px solid #D4D3DC;175 display: flex;176 align-items: center;177 justify-content: center;178 }179 180 /* Keyboard placeholder */181 .keyboard {182 position: absolute;183 left: 0;184 bottom: 0;185 width: 1080px;186 height: 860px;187 background: #F1ECF6;188 box-shadow: 0 -2px 0 #E3E0EA inset;189 padding: 24px;190 box-sizing: border-box;191 }192 .kb-top-icons {193 display: flex;194 gap: 24px;195 margin-bottom: 20px;196 }197 .kb-icon {198 width: 92px;199 height: 92px;200 border-radius: 24px;201 background: #DDD7E6;202 display: flex;203 align-items: center;204 justify-content: center;205 color: #4D4D6A;206 font-size: 32px;207 }208 .kb-row {209 display: grid;210 grid-template-columns: repeat(10, 1fr);211 gap: 16px;212 margin-bottom: 16px;213 }214 .kb-row.nine { grid-template-columns: repeat(9, 1fr); }215 .kb-row.seven { grid-template-columns: repeat(7, 1fr); }216 .key {217 height: 110px;218 background: #FFFFFF;219 border-radius: 22px;220 display: flex;221 align-items: center;222 justify-content: center;223 color: #3A3A58;224 font-size: 42px;225 box-shadow: 0 1px 0 #E5E3EB inset;226 }227 .key.alt { background: #DBD7EA; color: #303051; }228 .space-row {229 display: grid;230 grid-template-columns: 160px 120px 1fr 140px 120px 160px;231 gap: 16px;232 }233 .space { height: 110px; background: #FFFFFF; border-radius: 22px; }234</style>235</head>236<body>237<div id="render-target">238 239 <!-- Status bar -->240 <div class="topbar">241 <div>11:24</div>242 <div class="status-icons">243 <div class="icon-dot"></div>244 <div class="icon-dot" style="opacity:0.6;"></div>245 <div class="icon-dot" style="opacity:0.6;"></div>246 <svg class="wifi" width="38" height="26" viewBox="0 0 24 16" fill="none">247 <path d="M2 6 C6 2 18 2 22 6" stroke="#fff" stroke-width="2" opacity="0.9"/>248 <path d="M5 9 C8 6 16 6 19 9" stroke="#fff" stroke-width="2" opacity="0.9"/>249 <circle cx="12" cy="12" r="2" fill="#fff"/>250 </svg>251 <svg class="battery" width="40" height="24" viewBox="0 0 28 16" fill="none">252 <rect x="1" y="3" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>253 <rect x="3" y="5" width="14" height="6" fill="#fff"/>254 <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"/>255 </svg>256 </div>257 </div>258 259 <!-- Header with back arrow -->260 <div class="header">261 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">262 <path d="M15 6 L9 12 L15 18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>263 <path d="M9 12 H21" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>264 </svg>265 <h1>Where to next?</h1>266 </div>267 268 <!-- Search bar -->269 <div class="search-wrap">270 <div class="search-bar">271 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">272 <circle cx="10" cy="10" r="7" stroke="#8A8E9A" stroke-width="2"/>273 <path d="M15 15 L22 22" stroke="#8A8E9A" stroke-width="2" stroke-linecap="round"/>274 </svg>275 <div class="search-placeholder">Search for a station</div>276 </div>277 </div>278 279 <!-- Tabs -->280 <div class="tabs">281 <div class="tab selected">282 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">283 <rect x="4" y="5" width="16" height="2" fill="#2A224F"/>284 <rect x="4" y="11" width="16" height="2" fill="#2A224F"/>285 <rect x="4" y="17" width="16" height="2" fill="#2A224F"/>286 </svg>287 <span>View as list</span>288 </div>289 <div class="tab right">290 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">291 <path d="M12 2 C8.5 2 6 4.7 6 8 C6 12 12 20 12 20 C12 20 18 12 18 8 C18 4.7 15.5 2 12 2 Z" stroke="#77778B" stroke-width="2"/>292 <circle cx="12" cy="8" r="2.5" fill="#77778B"/>293 </svg>294 <span>View on map</span>295 </div>296 </div>297 298 <!-- Nearby stations label -->299 <div class="section-label">Nearby stations</div>300 301 <!-- GPS card -->302 <div class="gps-card">303 <div>Please enable GPS to see nearby stations. Don't worry, we won't store your location.</div>304 <div class="gps-btn">Enable GPS</div>305 </div>306 307 <!-- Recent searches label -->308 <div class="section-label">Recent searches</div>309 310 <!-- Recent list -->311 <div class="list">312 <div class="list-item">313 <div class="circle-icon">314 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">315 <rect x="6" y="8" width="12" height="8" rx="2" stroke="#4A4A74" stroke-width="2"/>316 <circle cx="9" cy="11" r="1.5" fill="#4A4A74"/>317 <circle cx="15" cy="11" r="1.5" fill="#4A4A74"/>318 <rect x="8" y="16" width="8" height="1.8" fill="#4A4A74"/>319 </svg>320 </div>321 <div class="item-text">322 <p class="item-title">Brussels Airport - Zaventem</p>323 <div class="item-sub">Belgium</div>324 </div>325 <div class="star-circle">326 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">327 <path d="M12 3 L14.5 9 H21 L16 12.8 L18 19 L12 15.5 L6 19 L8 12.8 L3 9 H9.5 Z" stroke="#9C9AA8" stroke-width="1.6" fill="none"/>328 </svg>329 </div>330 </div>331 332 <div class="list-item">333 <div class="circle-icon">334 <svg width="52" height="52" viewBox="0 0 24 24" fill="none">335 <rect x="6" y="8" width="12" height="8" rx="2" stroke="#4A4A74" stroke-width="2"/>336 <circle cx="9" cy="11" r="1.5" fill="#4A4A74"/>337 <circle cx="15" cy="11" r="1.5" fill="#4A4A74"/>338 <rect x="8" y="16" width="8" height="1.8" fill="#4A4A74"/>339 </svg>340 </div>341 <div class="item-text">342 <p class="item-title">Amsterdam Centraal</p>343 <div class="item-sub">Netherlands</div>344 </div>345 <div class="star-circle">346 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">347 <path d="M12 3 L14.5 9 H21 L16 12.8 L18 19 L12 15.5 L6 19 L8 12.8 L3 9 H9.5 Z" stroke="#9C9AA8" stroke-width="1.6" fill="none"/>348 </svg>349 </div>350 </div>351 </div>352 353 <!-- On-screen keyboard -->354 <div class="keyboard">355 <div class="kb-top-icons">356 <div class="kb-icon">◧</div>357 <div class="kb-icon">🙂</div>358 <div class="kb-icon">GIF</div>359 <div class="kb-icon">⚙</div>360 <div class="kb-icon">⊗</div>361 </div>362 363 <div class="kb-row">364 <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>365 <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>366 </div>367 <div class="kb-row nine">368 <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>369 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>370 </div>371 <div class="kb-row seven">372 <div class="key alt">⇧</div>373 <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>374 <div class="key alt">⌫</div>375 </div>376 <div class="space-row">377 <div class="key alt">?123</div>378 <div class="key">,</div>379 <div class="space"></div>380 <div class="key">.</div>381 <div class="key">↵</div>382 <div class="key alt">⤓</div>383 </div>384 </div>385 386</div>387</body>388</html>