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>UI Render</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #C9C9C9; /* overall app canvas */20 border-radius: 0;21 box-shadow: none;22 color: #222;23 }24 25 /* Status bar */26 .statusbar {27 position: absolute;28 top: 0;29 left: 0;30 width: 1080px;31 height: 120px;32 background: #000;33 color: #fff;34 display: flex;35 align-items: center;36 padding: 0 36px;37 box-sizing: border-box;38 font-size: 44px;39 letter-spacing: 0.3px;40 }41 .statusbar .right {42 margin-left: auto;43 display: flex;44 align-items: center;45 gap: 24px;46 }47 .status-icon {48 width: 44px;49 height: 44px;50 }51 52 /* Top app toolbar */53 .toolbar {54 position: absolute;55 top: 120px;56 left: 0;57 width: 1080px;58 height: 160px;59 background: #BDBDBD;60 display: flex;61 align-items: center;62 padding: 0 32px;63 box-sizing: border-box;64 gap: 28px;65 }66 .tool-btn {67 width: 88px;68 height: 88px;69 display: inline-flex;70 align-items: center;71 justify-content: center;72 border-radius: 16px;73 color: #5f5f5f;74 }75 .tool-btn svg {76 width: 64px;77 height: 64px;78 stroke: #6b6b6b;79 fill: none;80 stroke-width: 6;81 }82 83 /* Content */84 .content {85 position: absolute;86 top: 280px;87 left: 0;88 width: 1080px;89 bottom: 970px; /* space for keyboard */90 display: block;91 text-align: center;92 }93 .title {94 margin-top: 360px;95 font-size: 88px;96 font-weight: 700;97 color: #222;98 }99 .divider-wrap {100 margin-top: 280px;101 display: flex;102 justify-content: center;103 }104 .divider {105 width: 900px;106 height: 4px;107 background: rgba(120,120,120,0.6);108 border-radius: 2px;109 }110 111 /* Keyboard overlay */112 .keyboard {113 position: absolute;114 left: 0;115 bottom: 60px; /* leave room for navigation pill */116 width: 1080px;117 height: 920px;118 background: #1c1c1f;119 border-top-left-radius: 28px;120 border-top-right-radius: 28px;121 box-shadow: 0 -10px 20px rgba(0,0,0,0.25);122 overflow: hidden;123 }124 125 /* Keyboard top white bar */126 .kb-top {127 height: 140px;128 background: #f5f5f5;129 display: flex;130 align-items: center;131 padding: 0 28px;132 box-sizing: border-box;133 gap: 26px;134 }135 .kb-pill {136 width: 56px;137 height: 56px;138 background: #e8e8e8;139 border-radius: 28px;140 display: inline-flex;141 align-items: center;142 justify-content: center;143 color: #666;144 }145 .kb-top .spacer {146 flex: 1;147 }148 .kb-top .check {149 background: #e8f0ff;150 color: #3a6ff0;151 }152 .kb-top svg {153 width: 40px;154 height: 40px;155 stroke: #666;156 fill: none;157 stroke-width: 6;158 }159 .kb-top .color-dot {160 width: 56px;161 height: 56px;162 border-radius: 50%;163 border: 3px solid #999;164 background: #000;165 box-shadow: 0 0 0 3px rgba(180,180,180,0.5) inset;166 }167 168 /* Suggestions row */169 .kb-suggest {170 height: 120px;171 background: #151515;172 display: flex;173 align-items: center;174 padding: 0 30px;175 box-sizing: border-box;176 gap: 24px;177 color: #cfcfcf;178 font-size: 44px;179 }180 .kb-suggest .chip {181 padding: 10px 20px;182 border-radius: 18px;183 background: transparent;184 }185 .kb-suggest .sep {186 width: 2px;187 height: 44px;188 background: #3a3a3a;189 margin: 0 12px;190 }191 .kb-suggest .mic {192 margin-left: auto;193 width: 56px;194 height: 56px;195 background: #2a2a2a;196 border-radius: 28px;197 display: flex;198 align-items: center;199 justify-content: center;200 }201 .kb-suggest .mic svg {202 width: 34px;203 height: 34px;204 stroke: #cfcfcf;205 fill: none;206 stroke-width: 5;207 }208 209 /* Keys */210 .kb-keys {211 height: 660px;212 padding: 24px 24px 12px 24px;213 box-sizing: border-box;214 display: grid;215 grid-template-rows: repeat(4, 1fr);216 row-gap: 22px;217 }218 .row {219 display: grid;220 grid-template-columns: repeat(10, 1fr);221 column-gap: 16px;222 }223 .key {224 background: #2a2a2a;225 border-radius: 18px;226 color: #e5e5e5;227 font-size: 48px;228 display: flex;229 align-items: center;230 justify-content: center;231 }232 .key.light {233 background: #cfe1ff;234 color: #1a1a1a;235 }236 .key.wide {237 grid-column: span 2;238 }239 .key.space {240 grid-column: span 5;241 }242 243 /* Navigation pill */244 .nav-pill {245 position: absolute;246 bottom: 12px;247 left: 50%;248 transform: translateX(-50%);249 width: 280px;250 height: 14px;251 background: #e6e6e6;252 border-radius: 8px;253 opacity: 0.9;254 }255</style>256</head>257<body>258<div id="render-target">259 260 <!-- Status bar -->261 <div class="statusbar">262 <div>1:50</div>263 <div class="right">264 <!-- small status icons -->265 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#fff" fill="none" stroke-width="2"/></svg>266 <svg class="status-icon" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="3" stroke="#fff" fill="none" stroke-width="2"/><rect x="6" y="8" width="12" height="8" rx="2" fill="#fff"/></svg>267 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 12h12" stroke="#fff" stroke-width="2"/><path d="M18 8l4 4-4 4" stroke="#fff" stroke-width="2" fill="none"/></svg>268 <svg class="status-icon" viewBox="0 0 24 24"><path d="M7 4h10M7 12h10M7 20h10" stroke="#fff" stroke-width="2"/></svg>269 <svg class="status-icon" viewBox="0 0 24 24"><path d="M2 12h12" stroke="#fff" stroke-width="2"/><path d="M18 8l4 4-4 4" stroke="#fff" stroke-width="2" fill="none"/></svg>270 <svg class="status-icon" viewBox="0 0 24 24"><path d="M17 7a5 5 0 0 1 0 10" stroke="#fff" stroke-width="2" fill="none"/><path d="M7 17a5 5 0 0 1 0-10" stroke="#fff" stroke-width="2" fill="none"/></svg>271 <svg class="status-icon" viewBox="0 0 24 24"><path d="M6 18h12M6 18c2-6 10-6 12 0" stroke="#fff" stroke-width="2" fill="none"/></svg>272 <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 12h14" stroke="#fff" stroke-width="2"/><path d="M18 8l4 4-4 4" stroke="#fff" stroke-width="2" fill="none"/></svg>273 <svg class="status-icon" viewBox="0 0 24 24"><path d="M7 4h10M7 12h10M7 20h10" stroke="#fff" stroke-width="2"/></svg>274 <svg class="status-icon" viewBox="0 0 24 24">275 <path d="M20 7v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7" stroke="#fff" stroke-width="2" fill="none"/>276 <path d="M6 7l6-4 6 4" stroke="#fff" stroke-width="2" fill="none"/>277 </svg>278 </div>279 </div>280 281 <!-- Top toolbar -->282 <div class="toolbar">283 <div class="tool-btn">284 <!-- back chevron -->285 <svg viewBox="0 0 24 24"><path d="M15 4L7 12l8 8" /></svg>286 </div>287 <div class="tool-btn">288 <!-- document + -->289 <svg viewBox="0 0 24 24">290 <rect x="5" y="3" width="14" height="18" rx="2"></rect>291 <path d="M12 9v6M9 12h6"></path>292 </svg>293 </div>294 <div class="tool-btn">295 <!-- layers -->296 <svg viewBox="0 0 24 24">297 <path d="M12 4l8 4-8 4-8-4 8-4z"></path>298 <path d="M4 12l8 4 8-4"></path>299 </svg>300 </div>301 <div class="tool-btn">302 <!-- undo -->303 <svg viewBox="0 0 24 24">304 <path d="M9 8l-5 4 5 4"></path>305 <path d="M20 12c-3-6-9-6-12 0" ></path>306 </svg>307 </div>308 <div class="tool-btn">309 <!-- redo -->310 <svg viewBox="0 0 24 24">311 <path d="M15 8l5 4-5 4"></path>312 <path d="M4 12c3-6 9-6 12 0"></path>313 </svg>314 </div>315 <div class="tool-btn">316 <!-- grid -->317 <svg viewBox="0 0 24 24">318 <rect x="3" y="3" width="6" height="6"></rect>319 <rect x="15" y="3" width="6" height="6"></rect>320 <rect x="3" y="15" width="6" height="6"></rect>321 <rect x="15" y="15" width="6" height="6"></rect>322 </svg>323 </div>324 <div class="tool-btn">325 <!-- sync -->326 <svg viewBox="0 0 24 24">327 <path d="M4 12a8 8 0 0 1 13-5" ></path>328 <path d="M20 12a8 8 0 0 1-13 5" ></path>329 <path d="M17 5l0 4-4 0"></path>330 <path d="M7 19l0-4 4 0"></path>331 </svg>332 </div>333 <div class="tool-btn">334 <!-- share -->335 <svg viewBox="0 0 24 24">336 <circle cx="6" cy="12" r="3"></circle>337 <circle cx="18" cy="6" r="3"></circle>338 <circle cx="18" cy="18" r="3"></circle>339 <path d="M8.5 10.5L15.5 7.5M8.5 13.5L15.5 16.5"></path>340 </svg>341 </div>342 <div class="tool-btn">343 <!-- expand -->344 <svg viewBox="0 0 24 24">345 <path d="M4 10V4h6"></path>346 <path d="M20 14v6h-6"></path>347 <path d="M20 4h-6"></path>348 <path d="M4 20h6"></path>349 </svg>350 </div>351 </div>352 353 <!-- Content area -->354 <div class="content">355 <div class="title">Lucas Miller</div>356 <div class="divider-wrap">357 <div class="divider"></div>358 </div>359 </div>360 361 <!-- Keyboard overlay -->362 <div class="keyboard">363 <div class="kb-top">364 <div class="kb-pill">365 <!-- close X -->366 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"></path></svg>367 </div>368 <div class="kb-pill">369 <!-- line spacing icon -->370 <svg viewBox="0 0 24 24">371 <path d="M6 6h12M6 12h12M6 18h12"></path>372 </svg>373 </div>374 <div class="kb-pill" style="font-size: 40px; font-weight: 600; color:#555;">A</div>375 <div class="color-dot"></div>376 <div class="kb-pill">377 <!-- align icon -->378 <svg viewBox="0 0 24 24">379 <path d="M4 6h16M8 12h12M4 18h16"></path>380 </svg>381 </div>382 <div class="spacer"></div>383 <div class="kb-pill check">384 <!-- check icon -->385 <svg viewBox="0 0 24 24">386 <path d="M5 13l4 4 10-10" stroke="#3a6ff0" stroke-width="4" fill="none"></path>387 </svg>388 </div>389 </div>390 391 <div class="kb-suggest">392 <div class="chip">Miller</div>393 <div class="sep"></div>394 <div class="chip">MILLER</div>395 <div class="sep"></div>396 <div class="chip">Miller's</div>397 <div class="mic">398 <!-- mic icon -->399 <svg viewBox="0 0 24 24">400 <rect x="9" y="5" width="6" height="10" rx="3"></rect>401 <path d="M6 11a6 6 0 0 0 12 0"></path>402 <path d="M12 17v4"></path>403 </svg>404 </div>405 </div>406 407 <div class="kb-keys">408 <!-- Row 1 -->409 <div class="row">410 <div class="key">q</div>411 <div class="key">w</div>412 <div class="key">e</div>413 <div class="key">r</div>414 <div class="key">t</div>415 <div class="key">y</div>416 <div class="key">u</div>417 <div class="key">i</div>418 <div class="key">o</div>419 <div class="key">p</div>420 </div>421 <!-- Row 2 -->422 <div class="row">423 <div class="key">a</div>424 <div class="key">s</div>425 <div class="key">d</div>426 <div class="key">f</div>427 <div class="key">g</div>428 <div class="key">h</div>429 <div class="key">j</div>430 <div class="key">k</div>431 <div class="key">l</div>432 <div class="key light">⌫</div>433 </div>434 <!-- Row 3 -->435 <div class="row">436 <div class="key">z</div>437 <div class="key">x</div>438 <div class="key">c</div>439 <div class="key">v</div>440 <div class="key">b</div>441 <div class="key">n</div>442 <div class="key">m</div>443 <div class="key">,</div>444 <div class="key">.</div>445 <div class="key light">↵</div>446 </div>447 <!-- Row 4 -->448 <div class="row">449 <div class="key light">?123</div>450 <div class="key">🙂</div>451 <div class="key space"></div>452 <div class="key">.</div>453 <div class="key light">↵</div>454 </div>455 </div>456 </div>457 458 <div class="nav-pill"></div>459</div>460</body>461</html>