GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Plan - UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0f0f0f;13 color: #fff;14 }15 16 /* Top red app bar */17 .app-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 280px;23 background: #c62828;24 }25 .status-row {26 height: 70px;27 display: flex;28 align-items: center;29 padding: 0 30px;30 font-weight: 600;31 font-size: 34px;32 color: #fff;33 opacity: 0.95;34 }35 .status-row .spacer { flex: 1; }36 .status-icon { margin-left: 20px; opacity: 0.95; }37 .title-row {38 height: 210px;39 display: flex;40 align-items: center;41 justify-content: center;42 position: relative;43 color: #fff;44 }45 .title-text {46 font-size: 54px;47 font-weight: 600;48 letter-spacing: 0.5px;49 }50 .nav-btn {51 position: absolute;52 left: 24px;53 top: 120px;54 width: 100px;55 height: 100px;56 display: flex;57 align-items: center;58 justify-content: center;59 }60 .brand-btn {61 position: absolute;62 right: 24px;63 top: 120px;64 width: 120px;65 height: 100px;66 display: flex;67 align-items: center;68 justify-content: center;69 }70 71 /* Search card */72 .search-card {73 position: absolute;74 top: 220px;75 left: 24px;76 width: 1032px;77 background: #1b1b1b;78 border-radius: 36px;79 box-shadow: 0 16px 40px rgba(0,0,0,0.4);80 padding: 36px 120px 36px 120px;81 }82 .search-inner {83 position: relative;84 min-height: 180px;85 }86 .route-marker {87 position: absolute;88 left: -70px;89 top: 10px;90 width: 60px;91 height: 160px;92 }93 .route-marker:before,94 .route-marker:after {95 content: "";96 position: absolute;97 left: 20px;98 width: 22px; height: 22px;99 border: 4px solid #bbb;100 border-radius: 50%;101 background: #111;102 }103 .route-marker:before { top: 8px; }104 .route-marker:after { bottom: 8px; }105 .route-marker .line {106 position: absolute;107 left: 29px;108 top: 30px;109 width: 6px;110 height: 100px;111 background: #666;112 border-radius: 3px;113 }114 .field {115 color: #eaeaea;116 font-size: 46px;117 line-height: 64px;118 margin-bottom: 24px;119 }120 .field.to { color: #fff; }121 .thin-divider {122 height: 2px;123 background: #333;124 margin: 6px 0 24px 0;125 }126 .clear-btn {127 position: absolute;128 right: 24px;129 top: 24px;130 width: 80px;131 height: 80px;132 display: flex;133 align-items: center;134 justify-content: center;135 color: #ddd;136 }137 138 /* List of results */139 .results {140 position: absolute;141 left: 0;142 top: 430px;143 width: 1080px;144 background: #121212;145 }146 .result-item {147 display: flex;148 align-items: center;149 padding: 32px 36px;150 border-top: 1px solid rgba(255,255,255,0.04);151 color: #fff;152 }153 .result-item:first-child { border-top: none; }154 .result-title {155 font-size: 48px;156 letter-spacing: 0.2px;157 }158 .left-icon {159 width: 72px;160 height: 72px;161 margin-right: 30px;162 display: flex;163 align-items: center;164 justify-content: center;165 }166 .right-star {167 margin-left: auto;168 width: 72px; height: 72px;169 display: flex; align-items: center; justify-content: center;170 opacity: 0.9;171 }172 173 /* Keyboard mock */174 .keyboard {175 position: absolute;176 left: 0;177 bottom: 130px;178 width: 1080px;179 height: 830px;180 background: #1a1a1a;181 border-top: 1px solid #2a2a2a;182 box-shadow: 0 -8px 24px rgba(0,0,0,0.35);183 }184 .kb-top-text {185 height: 120px;186 display: flex;187 align-items: center;188 justify-content: center;189 font-size: 52px;190 color: #e0e0e0;191 }192 .kb-rows {193 padding: 0 24px 24px 24px;194 }195 .kb-row {196 display: grid;197 grid-template-columns: repeat(10, 1fr);198 gap: 16px;199 margin-bottom: 22px;200 }201 .key {202 height: 112px;203 border-radius: 18px;204 background: #2b2b2b;205 color: #e6e6e6;206 display: flex;207 align-items: center;208 justify-content: center;209 font-size: 42px;210 }211 .key.wide { grid-column: span 2; }212 .key.icon { font-size: 56px; }213 .kb-bottom-row {214 display: grid;215 grid-template-columns: 1.2fr 1fr 1fr 1fr 4fr 1fr 1.2fr;216 gap: 16px;217 }218 219 /* Home indicator */220 .home-indicator {221 position: absolute;222 bottom: 32px;223 left: 50%;224 transform: translateX(-50%);225 width: 560px;226 height: 12px;227 background: #6e6e6e;228 border-radius: 6px;229 opacity: 0.7;230 }231</style>232</head>233<body>234<div id="render-target">235 236 <!-- Red app bar -->237 <div class="app-bar">238 <div class="status-row">239 <div>10:40</div>240 <div class="spacer"></div>241 <!-- simple status icons -->242 <div class="status-icon">243 <!-- Wi-Fi icon -->244 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">245 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>246 <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>247 <circle cx="12" cy="16" r="2" fill="#fff"/>248 </svg>249 </div>250 <div class="status-icon">251 <!-- Battery -->252 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">253 <rect x="3" y="7" width="16" height="10" rx="2" stroke="#fff" stroke-width="2"/>254 <rect x="5" y="9" width="12" height="6" fill="#fff"/>255 <rect x="19" y="10" width="2" height="4" fill="#fff"/>256 </svg>257 </div>258 </div>259 260 <div class="title-row">261 <div class="nav-btn">262 <!-- back arrow -->263 <svg width="80" height="80" viewBox="0 0 24 24" fill="none">264 <path d="M15 5l-8 7 8 7" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>265 </svg>266 </div>267 <div class="title-text">Plan</div>268 <div class="brand-btn">269 <!-- double chevrons logo -->270 <svg width="100" height="80" viewBox="0 0 24 24" fill="none">271 <path d="M4 5l6 7-6 7" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>272 <path d="M12 5l6 7-6 7" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>273 </svg>274 </div>275 </div>276 </div>277 278 <!-- Search card -->279 <div class="search-card">280 <div class="search-inner">281 <div class="route-marker">282 <div class="line"></div>283 </div>284 <div class="field">Dundee</div>285 <div class="thin-divider"></div>286 <div class="field to">Guildford</div>287 <div class="clear-btn">288 <!-- X icon -->289 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">290 <path d="M5 5l14 14M19 5L5 19" stroke="#ddd" stroke-width="2.5" stroke-linecap="round"/>291 </svg>292 </div>293 </div>294 </div>295 296 <!-- Results list -->297 <div class="results">298 <div class="result-item">299 <div class="left-icon">300 <!-- clock icon -->301 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">302 <circle cx="12" cy="12" r="9" stroke="#ccc" stroke-width="2"/>303 <path d="M12 7v6l4 2" stroke="#ccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>304 </svg>305 </div>306 <div class="result-title">Guildford</div>307 <div class="right-star">308 <!-- star outline -->309 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">310 <path d="M12 3l3.3 6.7 7.2 1.1-5.2 5.1 1.2 7.1L12 19l-6.5 4 1.2-7.1-5.2-5.1 7.2-1.1L12 3z" stroke="#ccc" stroke-width="1.8" fill="none"/>311 </svg>312 </div>313 </div>314 315 <div class="result-item">316 <div style="width:72px;height:72px;margin-right:30px;"></div>317 <div class="result-title">Guildford London Road</div>318 <div class="right-star">319 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">320 <path d="M12 3l3.3 6.7 7.2 1.1-5.2 5.1 1.2 7.1L12 19l-6.5 4 1.2-7.1-5.2-5.1 7.2-1.1L12 3z" stroke="#ccc" stroke-width="1.8" fill="none"/>321 </svg>322 </div>323 </div>324 325 <div class="result-item">326 <div style="width:72px;height:72px;margin-right:30px;"></div>327 <div class="result-title">Guilherand-Granges Sadi Carnot</div>328 <div class="right-star">329 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">330 <path d="M12 3l3.3 6.7 7.2 1.1-5.2 5.1 1.2 7.1L12 19l-6.5 4 1.2-7.1-5.2-5.1 7.2-1.1L12 3z" stroke="#ccc" stroke-width="1.8" fill="none"/>331 </svg>332 </div>333 </div>334 335 <div class="result-item">336 <div style="width:72px;height:72px;margin-right:30px;"></div>337 <div class="result-title">Guillarei</div>338 <div class="right-star">339 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">340 <path d="M12 3l3.3 6.7 7.2 1.1-5.2 5.1 1.2 7.1L12 19l-6.5 4 1.2-7.1-5.2-5.1 7.2-1.1L12 3z" stroke="#ccc" stroke-width="1.8" fill="none"/>341 </svg>342 </div>343 </div>344 345 <div class="result-item">346 <div style="width:72px;height:72px;margin-right:30px;"></div>347 <div class="result-title">Guillerval</div>348 <div class="right-star">349 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">350 <path d="M12 3l3.3 6.7 7.2 1.1-5.2 5.1 1.2 7.1L12 19l-6.5 4 1.2-7.1-5.2-5.1 7.2-1.1L12 3z" stroke="#ccc" stroke-width="1.8" fill="none"/>351 </svg>352 </div>353 </div>354 355 <div class="result-item">356 <div style="width:72px;height:72px;margin-right:30px;"></div>357 <div class="result-title">Guilberville, Covoiturage</div>358 <div class="right-star">359 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">360 <path d="M12 3l3.3 6.7 7.2 1.1-5.2 5.1 1.2 7.1L12 19l-6.5 4 1.2-7.1-5.2-5.1 7.2-1.1L12 3z" stroke="#ccc" stroke-width="1.8" fill="none"/>361 </svg>362 </div>363 </div>364 </div>365 366 <!-- Keyboard -->367 <div class="keyboard">368 <div class="kb-top-text">Guildford</div>369 <div class="kb-rows">370 <div class="kb-row">371 <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>372 </div>373 <div class="kb-row">374 <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 icon">⌫</div>375 </div>376 <div class="kb-row">377 <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><div class="key icon">✔</div>378 </div>379 <div class="kb-bottom-row">380 <div class="key">?123</div>381 <div class="key">⎋</div>382 <div class="key">🙂</div>383 <div class="key"></div>384 <div class="key wide">space</div>385 <div class="key">.</div>386 <div class="key">✔</div>387 </div>388 </div>389 </div>390 391 <div class="home-indicator"></div>392</div>393</body>394</html>