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 { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #111214;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 90px;25 background: #1a1c1f;26 display: flex;27 align-items: center;28 padding: 0 24px;29 box-sizing: border-box;30 font-size: 32px;31 letter-spacing: 0.5px;32 }33 .status-left { flex: 1; }34 .status-right {35 display: flex;36 gap: 22px;37 align-items: center;38 }39 .status-icon svg { width: 40px; height: 40px; fill: #eaeaea; }40 41 /* Header */42 .header {43 position: absolute;44 top: 90px;45 left: 0;46 width: 1080px;47 height: 130px;48 background: #222428;49 display: flex;50 align-items: center;51 padding: 0 24px;52 box-sizing: border-box;53 gap: 22px;54 }55 .hdr-title {56 font-size: 42px;57 font-weight: 600;58 flex: 1;59 white-space: nowrap;60 }61 .hdr-icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; }62 .hdr-icon svg { width: 54px; height: 54px; fill: #ffffff; }63 64 /* Filter chips */65 .chips {66 position: absolute;67 top: 220px;68 left: 0;69 width: 1080px;70 height: 120px;71 background: #222428;72 display: flex;73 align-items: center;74 gap: 16px;75 padding: 0 24px;76 box-sizing: border-box;77 }78 .chip {79 background: #2c2f34;80 color: #fff;81 padding: 20px 30px;82 border-radius: 999px;83 font-size: 34px;84 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);85 }86 87 /* Suggestions row */88 .suggestions {89 position: absolute;90 top: 340px;91 left: 0;92 width: 1080px;93 height: 300px;94 background: #000000;95 display: flex;96 align-items: flex-start;97 gap: 60px;98 padding: 30px 24px 0 24px;99 box-sizing: border-box;100 }101 .suggestion {102 width: 220px;103 text-align: center;104 }105 .avatar {106 width: 140px;107 height: 140px;108 border-radius: 50%;109 margin: 0 auto 18px;110 display: flex;111 align-items: center;112 justify-content: center;113 font-size: 52px;114 font-weight: 700;115 color: #ffffff;116 }117 .avatar.blue { background: #3aa1ff; }118 .avatar.pink { background: #ff6fb4; }119 .sugg-title { font-size: 36px; font-weight: 600; }120 .sugg-sub { font-size: 28px; color: #bdbdbd; margin-top: 6px; }121 122 /* Main content area (black) */123 .content {124 position: absolute;125 top: 640px;126 left: 0;127 width: 1080px;128 height: 950px;129 background: #000000;130 border-top: 1px solid #222;131 border-bottom: 1px solid #222;132 }133 134 /* Floating mic action */135 .fab {136 position: absolute;137 right: 40px;138 bottom: 920px; /* sits above keyboard */139 width: 120px;140 height: 120px;141 background: #1ea6ff;142 border-radius: 50%;143 display: flex;144 align-items: center;145 justify-content: center;146 box-shadow: 0 10px 20px rgba(0,0,0,0.4);147 }148 .fab svg { width: 60px; height: 60px; fill: #ffffff; }149 150 /* Keyboard */151 .keyboard {152 position: absolute;153 bottom: 0;154 left: 0;155 width: 1080px;156 height: 840px;157 background: #1f2226;158 box-sizing: border-box;159 padding-top: 24px;160 border-top-left-radius: 24px;161 border-top-right-radius: 24px;162 }163 .kb-toolbar {164 display: flex;165 align-items: center;166 justify-content: space-around;167 padding: 0 24px 18px 24px;168 }169 .kb-tool {170 width: 72px;171 height: 72px;172 background: #272b30;173 border-radius: 20px;174 display: flex;175 align-items: center;176 justify-content: center;177 }178 .kb-tool svg { width: 40px; height: 40px; fill: #d7d7d7; }179 180 .kb-row {181 display: flex;182 gap: 14px;183 padding: 12px 24px;184 box-sizing: border-box;185 }186 .key {187 flex: 1;188 height: 110px;189 background: #2a2e33;190 border-radius: 22px;191 color: #eaeaea;192 font-size: 44px;193 display: flex;194 align-items: center;195 justify-content: center;196 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);197 }198 .key.small { flex: 0 0 110px; }199 .key.wide { flex: 2.6; }200 .key.xwide { flex: 4.5; }201 202 .kb-bottom {203 padding: 18px 24px 24px;204 display: flex;205 gap: 14px;206 align-items: center;207 }208 .search-btn {209 width: 120px;210 height: 120px;211 background: #c7dcf5;212 border-radius: 50%;213 display: flex;214 align-items: center;215 justify-content: center;216 }217 .search-btn svg { width: 60px; height: 60px; fill: #1f2226; }218 219 /* Home indicator */220 .home-indicator {221 position: absolute;222 bottom: 12px;223 left: 50%;224 transform: translateX(-50%);225 width: 300px;226 height: 10px;227 background: #e6e6e6;228 border-radius: 10px;229 opacity: 0.8;230 }231</style>232</head>233<body>234<div id="render-target">235 236 <!-- Status Bar -->237 <div class="status-bar">238 <div class="status-left">10:45</div>239 <div class="status-right">240 <div class="status-icon">241 <!-- Calendar icon (simple) -->242 <svg viewBox="0 0 24 24"><path d="M6 2h2v3h8V2h2v3h2v15H4V5h2V2zm14 7H4v10h16V9z"/></svg>243 </div>244 <div class="status-icon">245 <!-- Lock icon -->246 <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 015 5v3h1a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8a2 2 0 012-2h1V7a5 5 0 015-5zm3 8V7a3 3 0 00-6 0v3h6z"/></svg>247 </div>248 <div class="status-icon">249 <!-- Wifi -->250 <svg viewBox="0 0 24 24"><path d="M12 20l2-2-2-2-2 2 2 2zm-6-8a10 10 0 0112 0l-1.6 1.6a7.5 7.5 0 00-8.8 0L6 12zm-4-4a16 16 0 0116 0l-1.7 1.7a12.8 12.8 0 00-12.6 0L2 8z"/></svg>251 </div>252 <div class="status-icon">253 <!-- Battery -->254 <svg viewBox="0 0 24 24"><path d="M2 8h17v8H2V8zm19 3h2v2h-2v-2z"/></svg>255 </div>256 </div>257 </div>258 259 <!-- Header -->260 <div class="header">261 <div class="hdr-icon">262 <!-- Back arrow -->263 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6v12z"/></svg>264 </div>265 <div class="hdr-title">Mail, Events, Contacts, Files</div>266 <div class="hdr-icon">267 <!-- Home outline -->268 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8zM8 12v7h8v-7H8z"/></svg>269 </div>270 <div class="hdr-icon">271 <!-- Chevron down -->272 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6H6z"/></svg>273 </div>274 </div>275 276 <!-- Chips -->277 <div class="chips">278 <div class="chip">All</div>279 <div class="chip">Mail</div>280 <div class="chip">People</div>281 <div class="chip">Files</div>282 <div class="chip">Events</div>283 </div>284 285 <!-- Suggestions -->286 <div class="suggestions">287 <div class="suggestion">288 <div class="avatar blue">MB</div>289 <div class="sugg-title">Microsoft</div>290 <div class="sugg-sub">Bing</div>291 </div>292 <div class="suggestion">293 <div class="avatar pink">D</div>294 <div class="sugg-title">dbwscra…</div>295 <div class="sugg-sub"> </div>296 </div>297 </div>298 299 <!-- Main content blank area -->300 <div class="content"></div>301 302 <!-- Floating microphone action -->303 <div class="fab">304 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm6-3a6 6 0 01-12 0H4a8 8 0 0016 0h-2zm-6 9h-2v-2h4v2h-2z"/></svg>305 </div>306 307 <!-- Keyboard -->308 <div class="keyboard">309 <div class="kb-toolbar">310 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg></div>311 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 2c2.8 0 5 2.2 5 5v2c0 2.8-2.2 5-5 5s-5-2.2-5-5V7c0-2.8 2.2-5 5-5zm-8 17c0-3.3 3.6-5 8-5s8 1.7 8 5v1H4v-1z"/></svg></div>312 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M4 10h16v4H4v-4zm4-6h8v4H8V4zm0 12h8v4H8v-4z"/></svg></div>313 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 2l9 9-9 9-9-9 9-9zm-1 6h2v8h-2V8z"/></svg></div>314 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M10 2h4v4h4v4h4v4h-4v4h-4v4h-4v-4H6v-4H2v-4h4V6h4V2z"/></svg></div>315 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 2l6 6-6 6-6-6 6-6zm-2 14h4v6h-4v-6z"/></svg></div>316 <div class="kb-tool"><svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm6-3a6 6 0 01-12 0H4a8 8 0 0016 0h-2z"/></svg></div>317 </div>318 319 <!-- Row 1 -->320 <div class="kb-row">321 <div class="key">q</div>322 <div class="key">w</div>323 <div class="key">e</div>324 <div class="key">r</div>325 <div class="key">t</div>326 <div class="key">y</div>327 <div class="key">u</div>328 <div class="key">i</div>329 <div class="key">o</div>330 <div class="key">p</div>331 </div>332 <!-- Row 2 -->333 <div class="kb-row" style="padding-left:48px; padding-right:48px;">334 <div class="key">a</div>335 <div class="key">s</div>336 <div class="key">d</div>337 <div class="key">f</div>338 <div class="key">g</div>339 <div class="key">h</div>340 <div class="key">j</div>341 <div class="key">k</div>342 <div class="key">l</div>343 </div>344 <!-- Row 3 -->345 <div class="kb-row">346 <div class="key small">⇧</div>347 <div class="key">z</div>348 <div class="key">x</div>349 <div class="key">c</div>350 <div class="key">v</div>351 <div class="key">b</div>352 <div class="key">n</div>353 <div class="key">m</div>354 <div class="key small">⌫</div>355 </div>356 357 <!-- Bottom controls -->358 <div class="kb-bottom">359 <div class="key small">?123</div>360 <div class="key small">,</div>361 <div class="key xwide">space</div>362 <div class="key small">.</div>363 <div class="search-btn">364 <!-- Search icon -->365 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.3 14.1l4.3 4.3-1.4 1.4-4.3-4.3A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/></svg>366 </div>367 </div>368 </div>369 370 <div class="home-indicator"></div>371</div>372</body>373</html>