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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 color: #1b1740;16 }17 18 /* Header */19 .header {20 background: #1a0f3a;21 color: #ffffff;22 height: 560px;23 position: relative;24 padding: 24px 36px 0 36px;25 box-sizing: border-box;26 }27 .status-bar {28 display: flex;29 align-items: center;30 justify-content: space-between;31 font-weight: 600;32 font-size: 34px;33 opacity: 0.95;34 }35 .status-icons {36 display: flex;37 align-items: center;38 gap: 28px;39 }40 .header-title {41 text-align: center;42 font-size: 64px;43 font-weight: 700;44 margin: 28px 0 18px 0;45 letter-spacing: -0.5px;46 }47 .back-btn {48 position: absolute;49 left: 24px;50 top: 136px;51 width: 84px;52 height: 84px;53 display: flex;54 align-items: center;55 justify-content: center;56 cursor: default;57 }58 .search-bar {59 width: 100%;60 padding: 0 36px 0 36px;61 box-sizing: border-box;62 margin-top: 6px;63 }64 .search-input {65 background: #ffffff;66 border-radius: 20px;67 height: 116px;68 width: 100%;69 border: none;70 box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset;71 display: flex;72 align-items: center;73 padding: 0 28px;74 box-sizing: border-box;75 color: #666;76 font-size: 40px;77 }78 .search-dot {79 width: 54px;80 height: 54px;81 border-radius: 50%;82 background: #E5E5E9;83 border: 2px solid #D2D2D7;84 margin-right: 18px;85 }86 .tabs {87 margin: 24px 0 0 0;88 padding: 0 36px;89 display: flex;90 align-items: center;91 justify-content: space-between;92 color: #d9d7e8;93 font-weight: 700;94 font-size: 38px;95 }96 .tab {97 display: flex;98 align-items: center;99 gap: 18px;100 opacity: 0.95;101 }102 .tab.inactive {103 opacity: 0.65;104 }105 .tab-underline {106 position: absolute;107 left: 36px;108 right: 36px;109 bottom: 0;110 height: 6px;111 background: transparent;112 }113 .tab-underline:before {114 content: "";115 display: block;116 width: 260px;117 height: 8px;118 background: #2b1d6a;119 border-radius: 4px;120 }121 122 /* Sections */123 .section-label {124 height: 122px;125 background: #EDECEF;126 color: #8E8C99;127 display: flex;128 align-items: center;129 padding: 0 36px;130 box-sizing: border-box;131 font-size: 40px;132 font-weight: 700;133 }134 135 .gps-card {136 background: #ffffff;137 padding: 72px 64px;138 text-align: center;139 color: #1f254f;140 font-size: 40px;141 line-height: 1.45;142 box-sizing: border-box;143 }144 .gps-btn {145 display: inline-block;146 margin-top: 42px;147 background: #F6B62A;148 color: #1a1a1a;149 padding: 26px 48px;150 border-radius: 18px;151 font-weight: 800;152 font-size: 40px;153 box-shadow: 0 2px 0 rgba(0,0,0,0.15);154 }155 156 .list {157 background: #ffffff;158 }159 .item {160 display: flex;161 align-items: center;162 padding: 28px 36px;163 box-sizing: border-box;164 border-top: 1px solid #E5E5EA;165 }166 .item:first-child { border-top: none; }167 .icon-circle {168 width: 108px;169 height: 108px;170 border-radius: 54px;171 background: #ffffff;172 border: 6px solid #4A3D84;173 display: flex;174 align-items: center;175 justify-content: center;176 margin-right: 24px;177 }178 .item-text {179 flex: 1;180 }181 .item-title {182 font-size: 46px;183 color: #27285c;184 font-weight: 700;185 margin-bottom: 6px;186 }187 .item-sub {188 font-size: 34px;189 color: #8C8C97;190 }191 .fav-btn {192 width: 84px;193 height: 84px;194 border-radius: 42px;195 border: 4px solid #D7D7DC;196 display: flex;197 align-items: center;198 justify-content: center;199 }200 201 /* Keyboard overlay (simplified) */202 .keyboard {203 position: absolute;204 left: 0;205 right: 0;206 bottom: 72px;207 height: 760px;208 background: #F2EDF6;209 border-top: 1px solid #E3E0E8;210 box-sizing: border-box;211 padding: 22px 20px;212 }213 .kb-row {214 display: flex;215 gap: 14px;216 justify-content: center;217 margin: 18px 0;218 }219 .key {220 width: 86px;221 height: 110px;222 background: #ffffff;223 border-radius: 20px;224 box-shadow: 0 1px 0 rgba(0,0,0,0.06);225 display: flex;226 align-items: center;227 justify-content: center;228 font-size: 44px;229 color: #2e2e3a;230 }231 .key.wide { width: 180px; }232 .key.space { width: 540px; }233 .kb-topbar {234 display: flex;235 align-items: center;236 gap: 26px;237 margin-bottom: 8px;238 padding: 4px 10px;239 }240 .kb-small {241 width: 92px;242 height: 92px;243 background: #EDE9F5;244 border-radius: 24px;245 display: flex;246 align-items: center;247 justify-content: center;248 color: #5E5A70;249 font-weight: 700;250 }251 252 /* Gesture bar */253 .gesture {254 position: absolute;255 bottom: 20px;256 left: 50%;257 transform: translateX(-50%);258 width: 360px;259 height: 12px;260 background: #A6A6AD;261 border-radius: 8px;262 opacity: 0.9;263 }264 265 /* Simple icon helpers */266 .icon {267 width: 40px;268 height: 40px;269 display: inline-block;270 }271</style>272</head>273<body>274<div id="render-target">275 276 <!-- Header -->277 <div class="header">278 <div class="status-bar">279 <div>1:05</div>280 <div class="status-icons">281 <svg class="icon" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><path d="M12 3C7 3 3 7 3 12h2c0-3.9 3.1-7 7-7s7 3.1 7 7h2c0-5-4-9-9-9zM5 12c0 3.9 3.1 7 7 7s7-3.1 7-7h-2c0 2.8-2.2 5-5 5s-5-2.2-5-5H5z"/></svg>282 <svg class="icon" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><path d="M16 2H8c-1.1 0-2 .9-2 2v16l6-3 6 3V4c0-1.1-.9-2-2-2z"/></svg>283 </div>284 </div>285 286 <div class="header-title">Where to next?</div>287 288 <div class="back-btn" aria-label="Back">289 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">290 <path d="M15 6l-6 6 6 6" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>291 </svg>292 </div>293 294 <div class="search-bar">295 <div class="search-input">296 <div class="search-dot"></div>297 <span style="opacity:0.5;">Search</span>298 </div>299 </div>300 301 <div class="tabs">302 <div class="tab">303 <svg width="38" height="38" viewBox="0 0 24 24" fill="#ffffff"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h12v2H4v-2z"/></svg>304 <span>View as list</span>305 </div>306 <div class="tab inactive">307 <svg width="38" height="38" viewBox="0 0 24 24" fill="#d9d7e8"><path d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>308 <span>View on map</span>309 </div>310 </div>311 <div class="tab-underline"></div>312 </div>313 314 <!-- Content -->315 <div class="section-label">Nearby stations</div>316 317 <div class="gps-card">318 <div>Please enable GPS to see nearby stations. Don't worry, we won't store your location.</div>319 <div class="gps-btn">Enable GPS</div>320 </div>321 322 <div class="section-label">Recent searches</div>323 324 <div class="list">325 <div class="item">326 <div class="icon-circle">327 <svg width="58" height="58" viewBox="0 0 24 24" fill="#4A3D84">328 <path d="M7 6h10a2 2 0 012 2v6a3 3 0 01-3 3H8a3 3 0 01-3-3V8a2 2 0 012-2zm1 2v5h8V8H8zm-1 9l-2 2h3l1-2H7zm10 0l1 2h3l-2-2h-2z"/>329 </svg>330 </div>331 <div class="item-text">332 <div class="item-title">Barcelona City</div>333 <div class="item-sub">Spain</div>334 </div>335 <div class="fav-btn" aria-label="Save">336 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">337 <path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.8l6-.5L12 4l3 5.3 6 .5-5.2 4.7 1.4 5.9L12 17.3z" stroke="#B9BBC6" stroke-width="1.6" fill="none"/>338 </svg>339 </div>340 </div>341 342 <div class="item">343 <div class="icon-circle">344 <svg width="58" height="58" viewBox="0 0 24 24" fill="#4A3D84">345 <path d="M7 6h10a2 2 0 012 2v6a3 3 0 01-3 3H8a3 3 0 01-3-3V8a2 2 0 012-2zm1 2v5h8V8H8zm-1 9l-2 2h3l1-2H7zm10 0l1 2h3l-2-2h-2z"/>346 </svg>347 </div>348 <div class="item-text">349 <div class="item-title">Madrid City</div>350 <div class="item-sub">Spain</div>351 </div>352 <div class="fav-btn" aria-label="Save">353 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">354 <path d="M12 17.3l-5.2 3.1 1.4-5.9L3 9.8l6-.5L12 4l3 5.3 6 .5-5.2 4.7 1.4 5.9L12 17.3z" stroke="#B9BBC6" stroke-width="1.6" fill="none"/>355 </svg>356 </div>357 </div>358 </div>359 360 <!-- Keyboard (simplified rendering) -->361 <div class="keyboard">362 <div class="kb-topbar">363 <div class="kb-small">⬛</div>364 <div class="kb-small">🙂</div>365 <div class="kb-small">GIF</div>366 <div class="kb-small">⚙︎</div>367 <div class="kb-small">G↔︎</div>368 <div class="kb-small">🎨</div>369 <div class="kb-small">🎙</div>370 </div>371 <div class="kb-row">372 <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>373 </div>374 <div class="kb-row">375 <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>376 </div>377 <div class="kb-row">378 <div class="key wide">⇧</div>379 <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>380 <div class="key wide">⌫</div>381 </div>382 <div class="kb-row">383 <div class="key wide">?123</div>384 <div class="key wide">,</div>385 <div class="key space"></div>386 <div class="key wide">.</div>387 <div class="key wide">⏎</div>388 </div>389 </div>390 391 <div class="gesture"></div>392</div>393</body>394</html>