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>Email Compose UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Roboto", Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #0f2b2e; /* dark teal Gmail-like */20 color: #e4f2f4;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 92px;30 padding: 0 28px;31 box-sizing: border-box;32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #d6e7ea;36 font-size: 34px;37 letter-spacing: 0.5px;38 }39 .status-right {40 display: flex;41 align-items: center;42 gap: 24px;43 }44 .status-icon {45 width: 34px;46 height: 34px;47 opacity: 0.9;48 }49 .battery {50 display: flex;51 align-items: center;52 gap: 10px;53 font-size: 28px;54 color: #cde3e7;55 }56 .battery-box {57 width: 52px;58 height: 26px;59 border: 2px solid #cde3e7;60 border-radius: 4px;61 position: relative;62 }63 .battery-box::after {64 content: "";65 position: absolute;66 right: -8px;67 top: 6px;68 width: 6px;69 height: 14px;70 background: #cde3e7;71 border-radius: 2px;72 }73 .battery-level {74 position: absolute;75 left: 3px;76 top: 3px;77 height: 18px;78 width: 36px;79 background: #7bd389;80 border-radius: 2px;81 }82 83 /* Header row with navigation and actions */84 .top-actions {85 position: absolute;86 top: 92px;87 left: 0;88 width: 1080px;89 height: 100px;90 padding: 0 24px;91 box-sizing: border-box;92 display: flex;93 align-items: center;94 justify-content: space-between;95 }96 .left-actions, .right-actions {97 display: flex;98 align-items: center;99 gap: 28px;100 }101 .icon-btn {102 width: 56px;103 height: 56px;104 display: inline-flex;105 align-items: center;106 justify-content: center;107 border-radius: 28px;108 color: #b6cbd0;109 }110 .send-btn {111 width: 60px;112 height: 60px;113 background: #2fd6a2;114 border-radius: 30px;115 display: inline-flex;116 align-items: center;117 justify-content: center;118 }119 .icon-svg {120 width: 38px;121 height: 38px;122 fill: currentColor;123 }124 .icon-svg.stroke {125 fill: none;126 stroke: currentColor;127 stroke-width: 4;128 stroke-linecap: round;129 stroke-linejoin: round;130 }131 132 /* Fields */133 .fields {134 position: absolute;135 top: 192px;136 left: 0;137 width: 1080px;138 padding: 0 36px;139 box-sizing: border-box;140 }141 .field-row {142 padding: 20px 0;143 border-bottom: 1px solid rgba(200,230,235,0.08);144 display: flex;145 align-items: center;146 gap: 18px;147 }148 .label {149 color: #8fb1b7;150 font-size: 30px;151 min-width: 90px;152 }153 .value {154 color: #e8f5f6;155 font-size: 32px;156 flex: 1;157 }158 .chev {159 width: 30px;160 height: 30px;161 color: #8fb1b7;162 }163 164 /* To chip */165 .chip {166 display: inline-flex;167 align-items: center;168 gap: 16px;169 border: 2px solid #426b70;170 border-radius: 38px;171 padding: 10px 20px 10px 12px;172 color: #e8f5f6;173 font-size: 30px;174 }175 .avatar {176 width: 46px;177 height: 46px;178 border-radius: 50%;179 background: #8d6e63;180 color: #fff;181 display: inline-flex;182 align-items: center;183 justify-content: center;184 font-weight: 700;185 }186 187 /* Message body */188 .body-area {189 position: absolute;190 top: 372px;191 left: 0;192 right: 0;193 bottom: 980px; /* space for keyboard */194 padding: 0 36px;195 box-sizing: border-box;196 overflow: hidden;197 }198 .msg-line {199 font-size: 36px;200 line-height: 54px;201 color: #e7f3f5;202 margin-top: 40px;203 }204 .link {205 margin-top: 36px;206 font-size: 32px;207 line-height: 48px;208 color: #8ac6ff;209 word-wrap: break-word;210 }211 212 /* Keyboard */213 .keyboard {214 position: absolute;215 bottom: 90px;216 left: 0;217 width: 1080px;218 height: 900px;219 background: #152124;220 border-top: 1px solid rgba(180,210,215,0.08);221 box-sizing: border-box;222 padding: 18px 20px;223 }224 .kb-toolbar {225 display: flex;226 align-items: center;227 gap: 26px;228 margin-bottom: 18px;229 }230 .tool {231 width: 64px;232 height: 64px;233 background: #1f2f33;234 border: 1px solid #2f4448;235 border-radius: 12px;236 display: flex;237 align-items: center;238 justify-content: center;239 color: #9fb7bc;240 font-size: 24px;241 }242 .keys-row {243 display: flex;244 justify-content: center;245 gap: 14px;246 margin: 22px 0;247 }248 .key {249 width: 88px;250 height: 120px;251 background: #1c2b2f;252 border: 1px solid #2e4246;253 border-radius: 16px;254 color: #cfe2e6;255 font-size: 40px;256 display: flex;257 align-items: center;258 justify-content: center;259 }260 .key.wide {261 width: 160px;262 }263 .key.space {264 flex: 1;265 height: 120px;266 min-width: 360px;267 }268 .key.icon {269 color: #9fb7bc;270 font-size: 36px;271 }272 .key.backspace {273 width: 120px;274 }275 .bottom-row {276 display: flex;277 align-items: center;278 gap: 14px;279 margin-top: 10px;280 }281 .round-key {282 width: 120px;283 height: 120px;284 border-radius: 60px;285 background: #2fd6a2;286 color: #0f2b2e;287 display: flex;288 align-items: center;289 justify-content: center;290 font-size: 48px;291 margin-left: auto;292 }293 .round-key.left {294 background: #59c59d;295 color: #0f2b2e;296 margin-left: 0;297 }298 299 /* Gesture bar */300 .gesture {301 position: absolute;302 bottom: 24px;303 left: 50%;304 transform: translateX(-50%);305 width: 320px;306 height: 10px;307 background: #93aeb3;308 opacity: 0.45;309 border-radius: 6px;310 }311</style>312</head>313<body>314<div id="render-target">315 <!-- Status bar -->316 <div class="status-bar">317 <div class="time">7:50</div>318 <div class="status-right">319 <!-- simple icons -->320 <svg class="status-icon" viewBox="0 0 24 24">321 <path fill="#cde3e7" d="M12 3C7 3 3 7 3 12h3c0-3.3 2.7-6 6-6s6 2.7 6 6h3c0-5-4-9-9-9z"/>322 </svg>323 <svg class="status-icon" viewBox="0 0 24 24">324 <path fill="#cde3e7" d="M4 20h2v-6H4v6zm4 0h2V8H8v12zm4 0h2V4h-2v16zm4 0h2v-10h-2v10z"/>325 </svg>326 <div class="battery">327 <span>93%</span>328 <div class="battery-box">329 <div class="battery-level"></div>330 </div>331 </div>332 </div>333 </div>334 335 <!-- Top actions -->336 <div class="top-actions">337 <div class="left-actions">338 <div class="icon-btn">339 <svg class="icon-svg" viewBox="0 0 24 24">340 <path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z" fill="currentColor"/>341 </svg>342 </div>343 </div>344 <div class="right-actions">345 <div class="icon-btn">346 <svg class="icon-svg stroke" viewBox="0 0 24 24">347 <path d="M4 7l12 12M16 7L4 19" />348 </svg>349 </div>350 <div class="send-btn">351 <svg class="icon-svg" viewBox="0 0 24 24">352 <path d="M2 21l20-9L2 3l5 9-5 9z" fill="#0f2b2e"/>353 </svg>354 </div>355 <div class="icon-btn">356 <svg class="icon-svg" viewBox="0 0 24 24">357 <circle cx="12" cy="5" r="2" fill="currentColor"/>358 <circle cx="12" cy="12" r="2" fill="currentColor"/>359 <circle cx="12" cy="19" r="2" fill="currentColor"/>360 </svg>361 </div>362 </div>363 </div>364 365 <!-- Fields -->366 <div class="fields">367 <div class="field-row">368 <div class="label">From</div>369 <div class="value">richardwagnar@gmail.com</div>370 <svg class="chev" viewBox="0 0 24 24">371 <path d="M7 10l5 5 5-5" fill="none" stroke="#8fb1b7" stroke-width="3" stroke-linecap="round"/>372 </svg>373 </div>374 375 <div class="field-row">376 <div class="label">To</div>377 <div class="value">378 <span class="chip">379 <span class="avatar">C</span>380 clarawagner98b@gmail.com381 </span>382 </div>383 <svg class="chev" viewBox="0 0 24 24">384 <path d="M7 10l5 5 5-5" fill="none" stroke="#8fb1b7" stroke-width="3" stroke-linecap="round"/>385 </svg>386 </div>387 </div>388 389 <!-- Message body -->390 <div class="body-area">391 <div class="msg-line">Richard Wagner has shared a file with you</div>392 <div class="link">https://acrobat.adobe.com/id/urn:aaid:sc:EU:03256161-3f9e-4f36-a5b7-b36630d70d43</div>393 </div>394 395 <!-- Keyboard -->396 <div class="keyboard">397 <div class="kb-toolbar">398 <div class="tool">▦</div>399 <div class="tool">☺</div>400 <div class="tool">GIF</div>401 <div class="tool">⚙</div>402 <div class="tool">G↔︎</div>403 <div class="tool">🎨</div>404 <div class="tool">🎙</div>405 </div>406 407 <div class="keys-row">408 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>409 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>410 <div class="key">o</div><div class="key">p</div>411 </div>412 <div class="keys-row">413 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>414 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>415 <div class="key">l</div><div class="key backspace">⌫</div>416 </div>417 <div class="keys-row">418 <div class="key wide">⇧</div>419 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>420 <div class="key">b</div><div class="key">n</div><div class="key">m</div>421 <div class="key wide">.</div>422 </div>423 <div class="bottom-row">424 <div class="round-key left">?123</div>425 <div class="key">@</div>426 <div class="key icon">☺</div>427 <div class="key space"></div>428 <div class="key">.</div>429 <div class="round-key">➜</div>430 </div>431 </div>432 433 <!-- Gesture bar -->434 <div class="gesture"></div>435</div>436</body>437</html>