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?</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: #FFFFFF;15 border-radius: 0;16 box-shadow: none;17 }18 19 /* Top bar and header */20 .top-area {21 background: #1C1340;22 color: #FFF;23 width: 100%;24 }25 .status-bar {26 height: 110px;27 display: flex;28 align-items: center;29 padding: 0 40px;30 font-weight: 600;31 font-size: 36px;32 }33 .status-icons {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 28px;38 }39 .header {40 height: 190px;41 display: flex;42 align-items: center;43 padding: 0 40px;44 }45 .header-title {46 font-size: 56px;47 font-weight: 700;48 color: #FFF;49 margin-left: 26px;50 }51 52 /* Search bar */53 .search-wrap {54 background: #1C1340;55 padding: 26px 40px 34px 40px;56 }57 .search-bar {58 height: 130px;59 background: #FFFFFF;60 border-radius: 28px;61 box-shadow: 0 2px 0 rgba(0,0,0,0.06);62 display: flex;63 align-items: center;64 padding: 0 30px;65 }66 .search-placeholder {67 color: #9E9E9E;68 font-size: 36px;69 margin-left: 22px;70 }71 72 /* Toggle row */73 .toggle-row {74 background: #FFFFFF;75 display: flex;76 align-items: center;77 justify-content: space-between;78 padding: 26px 40px 16px 40px;79 border-bottom: 1px solid #E6E6E6;80 }81 .toggle-item {82 display: flex;83 align-items: center;84 gap: 16px;85 color: #2F2F2F;86 font-size: 34px;87 font-weight: 600;88 }89 .toggle-item.secondary {90 color: #8A8A8A;91 font-weight: 600;92 }93 .toggle-indicator {94 width: 280px;95 height: 6px;96 background: #1C1340;97 border-radius: 3px;98 margin-left: 40px;99 }100 101 /* Section headers */102 .section-header {103 height: 120px;104 background: #EFEFEF;105 color: #8E8E96;106 display: flex;107 align-items: center;108 font-size: 36px;109 padding: 0 40px;110 border-bottom: 1px solid #E3E3E3;111 }112 113 /* GPS card */114 .gps-card {115 background: #FFFFFF;116 padding: 60px 40px;117 text-align: center;118 color: #1F2A4B;119 font-size: 38px;120 line-height: 56px;121 }122 .gps-btn {123 margin: 40px auto 10px auto;124 width: 360px;125 height: 100px;126 background: #F6B526;127 color: #FFFFFF;128 border-radius: 18px;129 display: flex;130 align-items: center;131 justify-content: center;132 font-size: 34px;133 font-weight: 700;134 box-shadow: 0 2px 0 rgba(0,0,0,0.08);135 }136 137 .recent-header {138 height: 110px;139 background: #EFEFEF;140 color: #8E8E96;141 display: flex;142 align-items: center;143 font-size: 34px;144 padding: 0 40px;145 border-top: 1px solid #E6E6E6;146 border-bottom: 1px solid #E6E6E6;147 }148 149 /* List items */150 .list {151 background: #FFFFFF;152 }153 .list-item {154 display: flex;155 align-items: center;156 padding: 26px 40px;157 border-bottom: 1px solid #E6E6E6;158 }159 .station-icon {160 width: 88px;161 height: 88px;162 border-radius: 44px;163 background: #E8E6F4;164 display: flex;165 align-items: center;166 justify-content: center;167 margin-right: 26px;168 }169 .item-text {170 flex: 1;171 }172 .item-title {173 font-size: 40px;174 color: #2A3E8F;175 font-weight: 700;176 margin-bottom: 8px;177 }178 .item-sub {179 font-size: 30px;180 color: #9E9E9E;181 }182 .fav-btn {183 width: 78px;184 height: 78px;185 border-radius: 39px;186 border: 2px solid #D9D9D9;187 display: flex;188 align-items: center;189 justify-content: center;190 margin-left: 20px;191 }192 193 /* Keyboard mock */194 .keyboard {195 position: absolute;196 left: 0;197 bottom: 30px;198 width: 100%;199 height: 980px;200 background: #F4F0F7;201 border-top: 1px solid #E0E0E0;202 padding: 24px 24px 32px 24px;203 box-sizing: border-box;204 }205 .kb-top {206 display: flex;207 gap: 22px;208 margin-bottom: 18px;209 }210 .kb-top .pill {211 width: 86px;212 height: 86px;213 border-radius: 26px;214 background: #E7E2F4;215 }216 217 .kb-row {218 display: grid;219 grid-template-columns: repeat(10, 1fr);220 gap: 16px;221 margin-bottom: 18px;222 }223 .key {224 height: 120px;225 background: #FFFFFF;226 border: 1px solid #E4E4E4;227 border-radius: 28px;228 display: flex;229 align-items: center;230 justify-content: center;231 font-size: 42px;232 color: #333;233 box-shadow: inset 0 -1px 0 rgba(0,0,0,0.04);234 }235 .kb-row.short {236 grid-template-columns: 1.3fr repeat(7, 1fr) 1.3fr;237 }238 .kb-row.bottom {239 grid-template-columns: 1.6fr 1fr 6fr 1fr 1.6fr;240 }241 242 .gesture-bar {243 position: absolute;244 bottom: 8px;245 left: 50%;246 transform: translateX(-50%);247 width: 260px;248 height: 12px;249 border-radius: 6px;250 background: #AFAFAF;251 opacity: 0.6;252 }253 254 /* Simple icon styles */255 .icon {256 width: 56px;257 height: 56px;258 }259 .icon.small {260 width: 40px;261 height: 40px;262 }263 .icon.white path, .icon.white circle, .icon.white rect, .icon.white polygon {264 fill: #FFFFFF;265 stroke: #FFFFFF;266 }267 .icon.dark path, .icon.dark circle, .icon.dark rect, .icon.dark polygon {268 stroke: #1C1340;269 fill: none;270 }271 .icon.grey path, .icon.grey circle, .icon.grey rect, .icon.grey polygon {272 stroke: #8A8A8A;273 fill: none;274 }275 .icon.blue path, .icon.blue circle, .icon.blue rect, .icon.blue polygon {276 stroke: #2A3E8F;277 fill: none;278 }279</style>280</head>281<body>282<div id="render-target">283 284 <!-- Top purple area -->285 <div class="top-area">286 <div class="status-bar">287 <div>11:26</div>288 <div class="status-icons">289 <!-- simple status dots -->290 <svg class="icon white" viewBox="0 0 56 56">291 <circle cx="28" cy="28" r="10"></circle>292 </svg>293 <svg class="icon white" viewBox="0 0 56 56">294 <rect x="12" y="16" width="32" height="24" rx="4"></rect>295 </svg>296 <svg class="icon white" viewBox="0 0 56 56">297 <circle cx="28" cy="28" r="6"></circle>298 </svg>299 <svg class="icon white" viewBox="0 0 56 56">300 <polygon points="10,40 28,12 46,40"></polygon>301 </svg>302 <!-- wifi -->303 <svg class="icon white" viewBox="0 0 56 56">304 <path d="M8 22 C20 12,36 12,48 22"></path>305 <path d="M14 28 C22 22,34 22,42 28"></path>306 <circle cx="28" cy="34" r="4" fill="#FFFFFF"></circle>307 </svg>308 <!-- battery -->309 <svg class="icon white" viewBox="0 0 56 56">310 <rect x="10" y="16" width="34" height="24" rx="4" fill="none" stroke="#FFFFFF" stroke-width="4"></rect>311 <rect x="46" y="22" width="6" height="12" rx="2" fill="#FFFFFF"></rect>312 </svg>313 </div>314 </div>315 316 <div class="header">317 <svg class="icon white" viewBox="0 0 56 56">318 <path d="M36 12 L20 28 L36 44" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>319 </svg>320 <div class="header-title">Where to next?</div>321 </div>322 323 <div class="search-wrap">324 <div class="search-bar">325 <svg class="icon grey" viewBox="0 0 56 56">326 <circle cx="24" cy="24" r="16" stroke="#9E9E9E" stroke-width="4" fill="none"></circle>327 <path d="M38 38 L52 52" stroke="#9E9E9E" stroke-width="4" stroke-linecap="round"></path>328 </svg>329 <div class="search-placeholder">Search station or city</div>330 </div>331 </div>332 </div>333 334 <!-- Toggle row -->335 <div class="toggle-row">336 <div class="toggle-item">337 <svg class="icon blue" viewBox="0 0 56 56">338 <path d="M10 16 H46" stroke="#1C1340" stroke-width="6" stroke-linecap="round"></path>339 <path d="M10 28 H46" stroke="#1C1340" stroke-width="6" stroke-linecap="round"></path>340 <path d="M10 40 H46" stroke="#1C1340" stroke-width="6" stroke-linecap="round"></path>341 </svg>342 <span>View as list</span>343 </div>344 <div class="toggle-item secondary">345 <svg class="icon grey" viewBox="0 0 56 56">346 <path d="M28 8 C18 8 10 16 10 26 C10 40 28 48 28 48 C28 48 46 40 46 26 C46 16 38 8 28 8 Z" stroke="#8A8A8A" stroke-width="4" fill="none"></path>347 <circle cx="28" cy="26" r="6" stroke="#8A8A8A" stroke-width="4" fill="none"></circle>348 </svg>349 <span>View on map</span>350 </div>351 </div>352 <div class="toggle-indicator"></div>353 354 <!-- Nearby stations header -->355 <div class="section-header">Nearby stations</div>356 357 <!-- GPS card -->358 <div class="gps-card">359 <div>Please enable GPS to see nearby stations. Don't worry, we won't store your location.</div>360 <div class="gps-btn">Enable GPS</div>361 </div>362 363 <!-- Recent searches header -->364 <div class="recent-header">Recent searches</div>365 366 <!-- List items -->367 <div class="list">368 <div class="list-item">369 <div class="station-icon">370 <svg class="icon blue" viewBox="0 0 56 56">371 <rect x="14" y="16" width="28" height="20" rx="4" stroke="#2A3E8F" stroke-width="4" fill="none"></rect>372 <circle cx="20" cy="40" r="4" fill="none" stroke="#2A3E8F" stroke-width="4"></circle>373 <circle cx="36" cy="40" r="4" fill="none" stroke="#2A3E8F" stroke-width="4"></circle>374 </svg>375 </div>376 <div class="item-text">377 <div class="item-title">Amsterdam Centraal</div>378 <div class="item-sub">Netherlands</div>379 </div>380 <div class="fav-btn">381 <svg class="icon grey" viewBox="0 0 56 56">382 <polygon points="28,8 34,22 48,22 36,32 40,46 28,38 16,46 20,32 8,22 22,22" stroke="#8A8A8A" stroke-width="4" fill="none" stroke-linejoin="round"></polygon>383 </svg>384 </div>385 </div>386 387 <div class="list-item">388 <div class="station-icon">389 <svg class="icon blue" viewBox="0 0 56 56">390 <rect x="14" y="16" width="28" height="20" rx="4" stroke="#2A3E8F" stroke-width="4" fill="none"></rect>391 <circle cx="20" cy="40" r="4" fill="none" stroke="#2A3E8F" stroke-width="4"></circle>392 <circle cx="36" cy="40" r="4" fill="none" stroke="#2A3E8F" stroke-width="4"></circle>393 </svg>394 </div>395 <div class="item-text">396 <div class="item-title">Brussels Airport - Zaventem</div>397 <div class="item-sub">Belgium</div>398 </div>399 <div class="fav-btn">400 <svg class="icon grey" viewBox="0 0 56 56">401 <polygon points="28,8 34,22 48,22 36,32 40,46 28,38 16,46 20,32 8,22 22,22" stroke="#8A8A8A" stroke-width="4" fill="none" stroke-linejoin="round"></polygon>402 </svg>403 </div>404 </div>405 </div>406 407 <!-- Keyboard mock -->408 <div class="keyboard">409 <div class="kb-top">410 <div class="pill"></div>411 <div class="pill"></div>412 <div class="pill"></div>413 <div class="pill"></div>414 <div class="pill"></div>415 <div class="pill"></div>416 </div>417 418 <div class="kb-row">419 <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>420 </div>421 <div class="kb-row">422 <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><div class="key">⌫</div>423 </div>424 <div class="kb-row short">425 <div class="key">⇧</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">⏎</div>426 </div>427 <div class="kb-row bottom">428 <div class="key">?123</div>429 <div class="key">,</div>430 <div class="key">space</div>431 <div class="key">.</div>432 <div class="key">↩</div>433 </div>434 </div>435 436 <div class="gesture-bar"></div>437</div>438</body>439</html>