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>Compose Email UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #14110B; /* deep warm black */15 color: #E6DDC9;16 }17 18 /* Status bar */19 .status-bar {20 height: 96px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #E6DDC9;26 font-weight: 600;27 font-size: 36px;28 }29 .sb-right {30 display: flex;31 align-items: center;32 gap: 26px;33 }34 .sb-icon svg { display: block; }35 36 /* Header / App bar */37 .app-bar {38 height: 120px;39 padding: 0 24px;40 display: flex;41 align-items: center;42 justify-content: space-between;43 border-bottom: 1px solid #2A251B;44 }45 .app-left, .app-right { display: flex; align-items: center; gap: 28px; }46 .icon-btn {47 width: 60px; height: 60px;48 display: inline-flex; align-items: center; justify-content: center;49 color: #D8C9A8;50 }51 .icon-btn svg { width: 44px; height: 44px; }52 53 /* Fields */54 .field {55 padding: 26px 32px;56 border-bottom: 1px solid #2A251B;57 display: flex;58 align-items: center;59 gap: 24px;60 }61 .label {62 min-width: 120px;63 color: #C9BA9A;64 font-size: 34px;65 letter-spacing: 0.2px;66 }67 .value {68 flex: 1;69 font-size: 36px;70 }71 .subject {72 padding: 30px 32px;73 border-bottom: 1px solid #2A251B;74 font-size: 44px;75 color: #E9E1CD;76 }77 78 .body-text {79 padding: 36px 32px 24px;80 font-size: 38px;81 line-height: 1.5;82 color: #E6DDC9;83 }84 .body-text a { color: #E6DDC9; text-decoration: underline; }85 86 /* Keyboard */87 .keyboard {88 position: absolute;89 bottom: 0;90 left: 0; right: 0;91 height: 950px;92 background: #1C1913;93 border-top: 1px solid #2A251B;94 box-shadow: 0 -6px 16px rgba(0,0,0,0.35);95 }96 .kb-top {97 height: 120px;98 display: flex;99 align-items: center;100 justify-content: space-between;101 padding: 0 24px;102 color: #D8C9A8;103 font-size: 34px;104 }105 .kb-top .tool {106 display: inline-flex; align-items: center; gap: 12px;107 color: #D8C9A8;108 }109 .kb-top .tool-icon {110 width: 56px; height: 56px; border-radius: 12px;111 background: #2A2721; border: 1px solid #3A342C;112 display: inline-flex; align-items: center; justify-content: center;113 color: #CFC3A6;114 }115 116 .kb-rows { padding: 6px 22px 20px; }117 .row {118 display: grid;119 grid-template-columns: repeat(10, 1fr);120 gap: 14px;121 margin: 14px 0;122 }123 .key {124 height: 110px;125 background: #2B2721;126 border: 1px solid #3A342C;127 border-radius: 22px;128 color: #E6DDC9;129 display: flex; align-items: center; justify-content: center;130 font-size: 40px; font-weight: 600;131 }132 .key.small { font-size: 34px; }133 .key.wide { grid-column: span 2; }134 .key.backspace svg, .key.shift svg { width: 44px; height: 44px; }135 .accent {136 background: #D6C696;137 color: #1A160E;138 border-color: #C9BA8E;139 font-weight: 700;140 }141 142 .bottom-row {143 display: grid;144 grid-template-columns: 160px 110px 110px 1fr 110px 200px;145 gap: 14px;146 margin-top: 16px;147 }148 .spacebar {149 height: 110px;150 background: #2B2721;151 border: 1px solid #3A342C;152 border-radius: 22px;153 }154 155 /* Gesture bar (navigation pill) */156 .gesture-bar {157 position: absolute;158 bottom: 14px;159 left: 50%;160 transform: translateX(-50%);161 width: 300px;162 height: 12px;163 background: #E6E6E6;164 border-radius: 8px;165 opacity: 0.85;166 }167 168 /* Utility */169 .chevron svg { width: 32px; height: 32px; color: #C9BA9A; }170</style>171</head>172<body>173<div id="render-target">174 175 <!-- Status Bar -->176 <div class="status-bar">177 <div>11:17</div>178 <div class="sb-right">179 <div class="sb-icon">180 <!-- Cellular signal -->181 <svg width="48" height="32" viewBox="0 0 48 32" fill="none">182 <rect x="2" y="16" width="6" height="14" fill="#D8C9A8"/>183 <rect x="12" y="12" width="6" height="18" fill="#D8C9A8"/>184 <rect x="22" y="8" width="6" height="22" fill="#D8C9A8"/>185 <rect x="32" y="4" width="6" height="26" fill="#D8C9A8"/>186 </svg>187 </div>188 <div class="sb-icon">189 <!-- WiFi -->190 <svg width="42" height="32" viewBox="0 0 42 32" fill="none">191 <path d="M3 10c8-8 28-8 36 0" stroke="#D8C9A8" stroke-width="4" stroke-linecap="round"/>192 <path d="M8 16c6-6 20-6 26 0" stroke="#D8C9A8" stroke-width="4" stroke-linecap="round"/>193 <path d="M16 22c4-4 12-4 16 0" stroke="#D8C9A8" stroke-width="4" stroke-linecap="round"/>194 <circle cx="21" cy="27" r="3" fill="#D8C9A8"/>195 </svg>196 </div>197 <div class="sb-icon">198 <!-- Battery -->199 <svg width="60" height="32" viewBox="0 0 60 32" fill="none">200 <rect x="2" y="6" width="48" height="20" rx="4" stroke="#D8C9A8" stroke-width="3"/>201 <rect x="6" y="9" width="40" height="14" rx="2" fill="#D8C9A8"/>202 <rect x="52" y="12" width="6" height="8" rx="2" fill="#D8C9A8"/>203 </svg>204 </div>205 </div>206 </div>207 208 <!-- App Bar -->209 <div class="app-bar">210 <div class="app-left">211 <div class="icon-btn">212 <!-- Back arrow -->213 <svg viewBox="0 0 24 24">214 <path d="M15 18l-6-6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>215 </svg>216 </div>217 </div>218 <div class="app-right">219 <div class="icon-btn">220 <!-- Attachment (paperclip) -->221 <svg viewBox="0 0 24 24">222 <path d="M7 12l6.5-6.5a4 4 0 115.7 5.7L11 19a6 6 0 11-8.5-8.5L13 0" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223 </svg>224 </div>225 <div class="icon-btn">226 <!-- Send (paper plane) -->227 <svg viewBox="0 0 24 24">228 <path d="M2 21l20-9L2 3l5 7 8 2-8 2-5 7z" fill="currentColor"/>229 </svg>230 </div>231 <div class="icon-btn">232 <!-- More (kebab) -->233 <svg viewBox="0 0 24 24">234 <circle cx="12" cy="5" r="2" fill="currentColor"/>235 <circle cx="12" cy="12" r="2" fill="currentColor"/>236 <circle cx="12" cy="19" r="2" fill="currentColor"/>237 </svg>238 </div>239 </div>240 </div>241 242 <!-- Fields -->243 <div class="field">244 <div class="label">From</div>245 <div class="value">dbwscratch.test.id16@gmail.com</div>246 </div>247 248 <div class="field">249 <div class="label">To</div>250 <div class="value"></div>251 <div class="chevron">252 <svg viewBox="0 0 24 24">253 <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 </div>256 </div>257 258 <div class="subject">259 Lord Huron - The Night We Met (Slowed down) - SoundCloud260 </div>261 262 <div class="body-text">263 Listen to Lord Huron - The Night We Met (Slowed down) by Tina on #SoundCloud<br>264 <a href="#">https://on.soundcloud.com/FZbtq</a>265 </div>266 267 <!-- Keyboard -->268 <div class="keyboard">269 <div class="kb-top">270 <div class="tool">271 <div class="tool-icon">272 <!-- apps grid -->273 <svg viewBox="0 0 24 24">274 <rect x="3" y="3" width="6" height="6" fill="currentColor"/>275 <rect x="15" y="3" width="6" height="6" fill="currentColor"/>276 <rect x="3" y="15" width="6" height="6" fill="currentColor"/>277 <rect x="15" y="15" width="6" height="6" fill="currentColor"/>278 </svg>279 </div>280 </div>281 <div class="tool">282 <div class="tool-icon">283 <!-- emoji -->284 <svg viewBox="0 0 24 24">285 <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" fill="none"/>286 <circle cx="9" cy="10" r="1.5" fill="currentColor"/>287 <circle cx="15" cy="10" r="1.5" fill="currentColor"/>288 <path d="M8 15c2 2 6 2 8 0" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>289 </svg>290 </div>291 GIF292 </div>293 <div class="tool">294 <div class="tool-icon">295 <!-- gear -->296 <svg viewBox="0 0 24 24">297 <circle cx="12" cy="12" r="3" fill="currentColor"/>298 <path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M19.1 4.9l-2.8 2.8M7.7 16.3l-2.8 2.8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>299 </svg>300 </div>301 </div>302 <div class="tool">303 <div class="tool-icon">304 <!-- translate -->305 <svg viewBox="0 0 24 24">306 <path d="M4 4h9v9H4z" stroke="currentColor" stroke-width="2" fill="none"/>307 <path d="M14 12l6 8M14 20l6-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>308 </svg>309 </div>310 </div>311 <div class="tool">312 <div class="tool-icon">313 <!-- palette -->314 <svg viewBox="0 0 24 24">315 <path d="M12 3a9 9 0 100 18c2 0 2-2 1-3s0-2 2-2h1a5 5 0 000-10A9 9 0 0012 3z" stroke="currentColor" stroke-width="2" fill="none"/>316 </svg>317 </div>318 </div>319 <div class="tool">320 <div class="tool-icon">321 <!-- mic -->322 <svg viewBox="0 0 24 24">323 <rect x="9" y="4" width="6" height="10" rx="3" stroke="currentColor" stroke-width="2" fill="none"/>324 <path d="M6 12a6 6 0 0012 0M12 18v3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>325 </svg>326 </div>327 </div>328 </div>329 330 <div class="kb-rows">331 <!-- Row 1 -->332 <div class="row">333 <div class="key">q</div>334 <div class="key">w</div>335 <div class="key">e</div>336 <div class="key">r</div>337 <div class="key">t</div>338 <div class="key">y</div>339 <div class="key">u</div>340 <div class="key">i</div>341 <div class="key">o</div>342 <div class="key backspace">343 <svg viewBox="0 0 24 24">344 <path d="M3 12l6-6h10a2 2 0 012 2v8a2 2 0 01-2 2H9l-6-6z" fill="currentColor"/>345 <path d="M12 9l4 4M16 9l-4 4" stroke="#1A160E" stroke-width="2" stroke-linecap="round"/>346 </svg>347 </div>348 </div>349 350 <!-- Row 2 -->351 <div class="row">352 <div class="key">a</div>353 <div class="key">s</div>354 <div class="key">d</div>355 <div class="key">f</div>356 <div class="key">g</div>357 <div class="key">h</div>358 <div class="key">j</div>359 <div class="key">k</div>360 <div class="key">l</div>361 <div class="key">362 <svg viewBox="0 0 24 24">363 <path d="M19 13H5a1 1 0 110-2h14a1 1 0 110 2z" fill="currentColor"/>364 </svg>365 </div>366 </div>367 368 <!-- Row 3 -->369 <div class="row">370 <div class="key shift">371 <svg viewBox="0 0 24 24">372 <path d="M12 5l7 7H5l7-7zM12 12v7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>373 </svg>374 </div>375 <div class="key">z</div>376 <div class="key">x</div>377 <div class="key">c</div>378 <div class="key">v</div>379 <div class="key">b</div>380 <div class="key">n</div>381 <div class="key">m</div>382 <div class="key">,</div>383 <div class="key">⌫</div>384 </div>385 386 <!-- Bottom Row -->387 <div class="bottom-row">388 <div class="key accent">?123</div>389 <div class="key">@</div>390 <div class="key">😊</div>391 <div class="spacebar"></div>392 <div class="key">.</div>393 <div class="key accent">394 <!-- enter arrow -->395 <svg viewBox="0 0 24 24">396 <path d="M3 12h12v-4l6 6-6 6v-4H3v-4z" fill="#1A160E"/>397 </svg>398 </div>399 </div>400 </div>401 </div>402 403 <div class="gesture-bar"></div>404</div>405</body>406</html>