GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #111316;15 color: #FFFFFF;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 88px;25 background: #1a1c1f;26 display: flex;27 align-items: center;28 padding: 0 32px;29 box-sizing: border-box;30 font-weight: 600;31 font-size: 36px;32 letter-spacing: 0.5px;33 }34 .status-right {35 margin-left: auto;36 display: flex;37 align-items: center;38 gap: 22px;39 }40 .status-icon {41 width: 36px;42 height: 36px;43 opacity: 0.85;44 }45 46 /* Header / search */47 .header {48 position: absolute;49 top: 88px;50 left: 0;51 width: 1080px;52 height: 160px;53 background: #1a1c1f;54 box-sizing: border-box;55 padding: 24px 32px;56 display: flex;57 align-items: center;58 gap: 24px;59 }60 .icon-btn {61 width: 64px;62 height: 64px;63 display: inline-flex;64 align-items: center;65 justify-content: center;66 border-radius: 32px;67 background: transparent;68 }69 .icon-btn.gray {70 background: #2d2f33;71 }72 .header-title {73 font-size: 54px;74 font-weight: 600;75 letter-spacing: 0.2px;76 }77 .title-caret {78 display: inline-block;79 width: 4px;80 height: 58px;81 background: #8ab4ff;82 margin-left: 6px;83 vertical-align: -10px;84 border-radius: 2px;85 animation: blink 1.2s step-end infinite;86 }87 @keyframes blink { 50% { opacity: 0; } }88 .header-actions {89 margin-left: auto;90 display: flex;91 align-items: center;92 gap: 22px;93 }94 95 /* Chips */96 .chips {97 position: absolute;98 top: 248px;99 left: 0;100 width: 1080px;101 padding: 0 24px;102 box-sizing: border-box;103 display: flex;104 gap: 16px;105 }106 .chip {107 padding: 18px 32px;108 border-radius: 30px;109 background: #24262b;110 color: #e5e5e5;111 font-size: 36px;112 font-weight: 600;113 }114 .chip.active {115 background: #2f3136;116 color: #ffffff;117 }118 119 /* Content area */120 .content {121 position: absolute;122 top: 340px;123 left: 0;124 width: 1080px;125 bottom: 930px; /* leave space for keyboard */126 background: #000000;127 }128 129 /* Floating mic button */130 .mic-fab {131 position: absolute;132 right: 48px;133 bottom: 1050px;134 width: 152px;135 height: 152px;136 border-radius: 76px;137 background: #0794ff;138 display: flex;139 align-items: center;140 justify-content: center;141 box-shadow: 0 10px 30px rgba(7,148,255,0.45);142 }143 144 /* Keyboard */145 .keyboard {146 position: absolute;147 left: 0;148 bottom: 52px;149 width: 1080px;150 height: 820px;151 background: #1a1c1f;152 border-top: 1px solid #2b2d31;153 box-sizing: border-box;154 }155 .kb-suggest {156 height: 88px;157 display: flex;158 align-items: center;159 padding: 0 28px;160 gap: 18px;161 color: #cfd6dc;162 font-size: 34px;163 border-bottom: 1px solid #2b2d31;164 }165 .kb-divider {166 width: 2px;167 height: 36px;168 background: #3a3d42;169 opacity: 0.8;170 }171 .kb-emojis {172 margin-left: auto;173 display: flex;174 align-items: center;175 gap: 18px;176 font-size: 38px;177 }178 .kb-row {179 display: flex;180 gap: 16px;181 padding: 18px 20px;182 }183 .key {184 height: 112px;185 flex: 1;186 background: #2a2c31;187 color: #f1f3f5;188 border-radius: 20px;189 display: flex;190 align-items: center;191 justify-content: center;192 font-size: 44px;193 box-shadow: inset 0 -4px 0 rgba(0,0,0,0.35);194 }195 .key.small {196 flex: 0 0 120px;197 }198 .key.medium {199 flex: 0 0 160px;200 }201 .key.wide {202 flex: 1 1 auto;203 }204 .key.circle {205 border-radius: 56px;206 }207 .key.secondary {208 background: #3a3d42;209 color: #cfd6dc;210 }211 .space {212 height: 112px;213 background: #2a2c31;214 border-radius: 20px;215 flex: 1;216 box-shadow: inset 0 -4px 0 rgba(0,0,0,0.35);217 }218 219 /* Gesture bar */220 .gesture {221 position: absolute;222 bottom: 12px;223 left: 50%;224 transform: translateX(-50%);225 width: 240px;226 height: 8px;227 border-radius: 4px;228 background: #e7e7e7;229 opacity: 0.9;230 }231 232 /* SVG common */233 svg { display: block; }234 235</style>236</head>237<body>238<div id="render-target">239 240 <!-- Status Bar -->241 <div class="status-bar">242 <div>10:46</div>243 <div class="status-right">244 <!-- simple icons -->245 <svg class="status-icon" viewBox="0 0 24 24">246 <rect x="3" y="6" width="18" height="12" rx="2" fill="#cfd6dc"></rect>247 <rect x="6" y="9" width="12" height="6" rx="1" fill="#111316"></rect>248 </svg>249 <svg class="status-icon" viewBox="0 0 24 24">250 <rect x="2" y="8" width="16" height="8" rx="2" fill="#cfd6dc"></rect>251 <rect x="19" y="10" width="3" height="4" rx="1" fill="#cfd6dc"></rect>252 </svg>253 <svg class="status-icon" viewBox="0 0 24 24">254 <path d="M3 18h18M6 12h12M9 6h6" stroke="#cfd6dc" stroke-width="2" stroke-linecap="round"></path>255 </svg>256 <svg class="status-icon" viewBox="0 0 24 24">257 <path d="M6 18h12" stroke="#cfd6dc" stroke-width="2" stroke-linecap="round"></path>258 </svg>259 </div>260 </div>261 262 <!-- Header -->263 <div class="header">264 <div class="icon-btn">265 <svg width="44" height="44" viewBox="0 0 24 24">266 <path d="M15 6 L7 12 L15 18" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>267 </svg>268 </div>269 <div class="header-title">Fun Session<span class="title-caret"></span></div>270 <div class="header-actions">271 <div class="icon-btn gray">272 <svg width="30" height="30" viewBox="0 0 24 24">273 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round"></path>274 </svg>275 </div>276 <div class="icon-btn">277 <svg width="46" height="46" viewBox="0 0 24 24">278 <path d="M4 10 L12 4 L20 10 V20 H4 Z" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linejoin="round"></path>279 </svg>280 </div>281 <div class="icon-btn">282 <svg width="28" height="28" viewBox="0 0 24 24">283 <path d="M6 9 L12 15 L18 9" stroke="#ffffff" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>284 </svg>285 </div>286 </div>287 </div>288 289 <!-- Filter Chips -->290 <div class="chips">291 <div class="chip active">All</div>292 <div class="chip">Mail</div>293 <div class="chip">People</div>294 <div class="chip">Files</div>295 <div class="chip">Events</div>296 </div>297 298 <!-- Content Area -->299 <div class="content"></div>300 301 <!-- Floating Mic Button -->302 <div class="mic-fab">303 <svg width="68" height="68" viewBox="0 0 24 24">304 <rect x="8" y="4" width="8" height="10" rx="4" fill="#0b1522"></rect>305 <path d="M6 10c0 3 2.5 5 6 5s6-2 6-5M12 15v4M9 19h6" stroke="#0b1522" stroke-width="2" fill="none" stroke-linecap="round"></path>306 </svg>307 </div>308 309 <!-- Keyboard -->310 <div class="keyboard">311 <div class="kb-suggest">312 <div>on</div>313 <div class="kb-divider"></div>314 <div>of</div>315 <div class="kb-emojis">316 <span>🙂</span>317 <span>🐱</span>318 <svg width="34" height="34" viewBox="0 0 24 24">319 <path d="M5 5 L19 19" stroke="#cfd6dc" stroke-width="2" stroke-linecap="round"></path>320 </svg>321 </div>322 </div>323 324 <!-- Row 1 -->325 <div class="kb-row">326 <div class="key">q</div>327 <div class="key">w</div>328 <div class="key">e</div>329 <div class="key">r</div>330 <div class="key">t</div>331 <div class="key">y</div>332 <div class="key">u</div>333 <div class="key">i</div>334 <div class="key">o</div>335 <div class="key">p</div>336 </div>337 338 <!-- Row 2 -->339 <div class="kb-row">340 <div class="key">a</div>341 <div class="key">s</div>342 <div class="key">d</div>343 <div class="key">f</div>344 <div class="key">g</div>345 <div class="key">h</div>346 <div class="key">j</div>347 <div class="key">k</div>348 <div class="key">l</div>349 </div>350 351 <!-- Row 3 -->352 <div class="kb-row">353 <div class="key small secondary">354 <svg width="34" height="34" viewBox="0 0 24 24">355 <path d="M8 16 L12 12 L16 16" stroke="#cfd6dc" stroke-width="2" fill="none" stroke-linecap="round"></path>356 <path d="M12 8v4" stroke="#cfd6dc" stroke-width="2" stroke-linecap="round"></path>357 </svg>358 </div>359 <div class="key">z</div>360 <div class="key">x</div>361 <div class="key">c</div>362 <div class="key">v</div>363 <div class="key">b</div>364 <div class="key">n</div>365 <div class="key">m</div>366 <div class="key medium secondary">367 <svg width="40" height="40" viewBox="0 0 24 24">368 <path d="M19 12 L5 12 M7 9 L4 12 L7 15" stroke="#cfd6dc" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>369 </svg>370 </div>371 </div>372 373 <!-- Row 4 -->374 <div class="kb-row">375 <div class="key circle secondary" style="flex:0 0 120px;background:#8da3b8;color:#111316;">?123</div>376 <div class="key small secondary">,</div>377 <div class="space"></div>378 <div class="key small secondary">.</div>379 <div class="key circle secondary" style="flex:0 0 120px;background:#b5c8dc;color:#111316;">380 <svg width="32" height="32" viewBox="0 0 24 24">381 <circle cx="10" cy="10" r="6" stroke="#111316" stroke-width="2" fill="none"></circle>382 <path d="M15 15 L20 20" stroke="#111316" stroke-width="2" stroke-linecap="round"></path>383 </svg>384 </div>385 </div>386 </div>387 388 <!-- Gesture bar -->389 <div class="gesture"></div>390 391</div>392</body>393</html>