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 - Dark</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Roboto", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #1b120d; /* dark brown-black */20 color: #e9dccf;21 }22 23 /* Status bar */24 .statusbar {25 height: 90px;26 padding: 0 28px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #fff;31 font-size: 34px;32 letter-spacing: 0.5px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 26px;38 }39 .status-icon svg { display: block; }40 41 /* App bar */42 .appbar {43 height: 120px;44 padding: 0 22px 0 18px;45 display: flex;46 align-items: center;47 justify-content: space-between;48 border-bottom: 1px solid #2b221d;49 color: #e9dccf;50 }51 .appbar .left {52 display: flex;53 align-items: center;54 gap: 18px;55 font-size: 36px;56 }57 .appbar .right {58 display: flex;59 align-items: center;60 gap: 36px;61 }62 .icon {63 width: 56px;64 height: 56px;65 color: #e9dccf;66 }67 .icon.send {68 color: #f0c8a8; /* peach send */69 }70 71 /* Fields */72 .fields {73 font-size: 40px;74 }75 .field {76 display: flex;77 align-items: center;78 gap: 24px;79 padding: 26px 24px;80 border-bottom: 1px solid #2d221d;81 }82 .label {83 width: 130px;84 color: #bdaea2;85 font-size: 32px;86 text-transform: none;87 }88 .value {89 flex: 1;90 display: flex;91 align-items: center;92 gap: 14px;93 font-size: 40px;94 color: #e9dccf;95 }96 .caret {97 width: 0;98 height: 40px;99 border-left: 3px solid #f0c8a8;100 }101 .dropdown {102 width: 36px; height: 36px;103 }104 .divider {105 height: 1px;106 background: #2b221d;107 }108 109 /* Contact suggestion */110 .suggestion {111 display: flex;112 align-items: center;113 gap: 26px;114 padding: 26px 24px 30px 154px; /* align under value text after label */115 border-bottom: 1px solid #2d221d;116 }117 .avatar {118 width: 96px;119 height: 96px;120 border-radius: 50%;121 background: #65ad4a;122 color: #ffffff;123 display: flex;124 justify-content: center;125 align-items: center;126 font-size: 54px;127 text-transform: lowercase;128 flex: 0 0 96px;129 }130 .contact-lines {131 display: flex;132 flex-direction: column;133 gap: 8px;134 }135 .contact-name {136 font-size: 44px;137 color: #e9dccf;138 }139 .contact-sub {140 font-size: 34px;141 color: #a9968b;142 }143 144 /* Spacer between content and keyboard */145 .spacer {146 height: 780px; /* open drafting area before keyboard */147 }148 149 /* Keyboard mock */150 .keyboard {151 position: absolute;152 left: 0;153 bottom: 0;154 width: 1080px;155 height: 760px;156 background: #18110e;157 border-top: 1px solid #2b221e;158 padding: 16px 18px 24px;159 box-sizing: border-box;160 }161 .kb-top {162 display: flex;163 align-items: center;164 justify-content: space-between;165 padding: 6px 6px 12px;166 color: #9f9189;167 font-size: 28px;168 }169 .kb-top .top-icon {170 width: 64px; height: 64px;171 display: flex;172 align-items: center; justify-content: center;173 color: #c8b8ad;174 }175 176 .row {177 display: flex;178 justify-content: center;179 gap: 12px;180 margin: 10px 0;181 }182 .key {183 height: 118px;184 min-width: 88px;185 padding: 0 10px;186 border-radius: 20px;187 background: #2a2320;188 color: #e7d7c7;189 display: flex;190 align-items: center;191 justify-content: center;192 font-size: 44px;193 box-sizing: border-box;194 }195 .key.wide { min-width: 140px; }196 .key.space { flex: 1; min-width: 420px; }197 .key.special {198 background: #e3bf9f;199 color: #2b2220;200 font-weight: 600;201 }202 .key.icon {203 padding: 0;204 }205 .backspace svg, .enter svg, .shift svg { width: 42px; height: 42px; }206 207 /* Small gesture bar at very bottom center */208 .gesture {209 position: absolute;210 left: 50%;211 bottom: 10px;212 width: 240px;213 height: 10px;214 margin-left: -120px;215 background: #e5e5e5;216 border-radius: 6px;217 opacity: 0.7;218 }219</style>220</head>221<body>222<div id="render-target">223 224 <!-- Status bar -->225 <div class="statusbar">226 <div class="status-left">11:06</div>227 <div class="status-right">228 <div class="status-icon">229 <!-- Simple Wi-Fi -->230 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">231 <path d="M2 8c5-4 15-4 20 0"/>232 <path d="M5 12c4-3 10-3 14 0"/>233 <path d="M8 16c3-2 5-2 8 0"/>234 <circle cx="12" cy="19" r="1.6" fill="white"></circle>235 </svg>236 </div>237 <div class="status-icon">238 <!-- Battery -->239 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">240 <rect x="3" y="7" width="16" height="10" rx="2"></rect>241 <rect x="5" y="9" width="10" height="6" fill="white"></rect>242 <rect x="19" y="10" width="2" height="4" fill="white"></rect>243 </svg>244 </div>245 </div>246 </div>247 248 <!-- App bar with actions -->249 <div class="appbar">250 <div class="left">251 <!-- Back arrow -->252 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">253 <path d="M11 6l-6 6 6 6v-4h9v-4h-9z"></path>254 </svg>255 </div>256 <div class="right">257 <!-- Attachment -->258 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">259 <path d="M7 12.5V7.8A4.2 4.2 0 0 1 11.2 3.6c2.3 0 4.2 1.9 4.2 4.2V13a3.5 3.5 0 1 1-7 0V8.5h2.2V13a1.3 1.3 0 1 0 2.6 0V7.8a2 2 0 1 0-4 0v4.7H7z"></path>260 </svg>261 <!-- Send -->262 <svg class="icon send" viewBox="0 0 24 24" fill="currentColor">263 <path d="M3 11.5l18-8-4 8 4 8-18-8z"></path>264 </svg>265 <!-- Kebab -->266 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">267 <circle cx="12" cy="5" r="2"></circle>268 <circle cx="12" cy="12" r="2"></circle>269 <circle cx="12" cy="19" r="2"></circle>270 </svg>271 </div>272 </div>273 274 <!-- Email fields -->275 <div class="fields">276 <div class="field">277 <div class="label">From</div>278 <div class="value">279 <span>naomirousseau5@gmail.com</span>280 <svg class="dropdown" viewBox="0 0 24 24" fill="#bdaea2">281 <path d="M7 10l5 5 5-5z"></path>282 </svg>283 </div>284 </div>285 286 <div class="field">287 <div class="label">To</div>288 <div class="value">289 <span>karin.iversen@example.com</span>290 <svg class="dropdown" viewBox="0 0 24 24" fill="#bdaea2">291 <path d="M7 10l5 5 5-5z"></path>292 </svg>293 <span class="caret"></span>294 </div>295 </div>296 297 <!-- Contact suggestion card -->298 <div class="suggestion">299 <div class="avatar">k</div>300 <div class="contact-lines">301 <div class="contact-name">karin.iversen@example.com</div>302 <div class="contact-sub">karin.iversen@example.com</div>303 </div>304 </div>305 </div>306 307 <!-- Spacer area representing the message body -->308 <div class="spacer"></div>309 310 <!-- Keyboard mock -->311 <div class="keyboard">312 <div class="kb-top">313 <div class="top-icon">314 <svg width="36" height="36" viewBox="0 0 24 24" fill="currentColor">315 <rect x="3" y="3" width="6" height="6"></rect>316 <rect x="15" y="3" width="6" height="6"></rect>317 <rect x="3" y="15" width="6" height="6"></rect>318 <rect x="15" y="15" width="6" height="6"></rect>319 </svg>320 </div>321 <div class="top-icon">☺</div>322 <div class="top-icon" style="font-weight:700;">GIF</div>323 <div class="top-icon">324 <svg width="36" height="36" viewBox="0 0 24 24" fill="currentColor">325 <path d="M12 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM4 22v-1a8 8 0 1 1 16 0v1H4z"></path>326 </svg>327 </div>328 <div class="top-icon">329 <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor">330 <path d="M3 11h8v2H3zM13 11h8v2h-8z"></path>331 <path d="M8 7l-5 5 5 5" fill="none" stroke="currentColor" stroke-width="2"></path>332 </svg>333 </div>334 <div class="top-icon">335 <svg width="34" height="34" viewBox="0 0 24 24" fill="currentColor">336 <circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.2"></circle>337 <circle cx="12" cy="12" r="5" fill="currentColor"></circle>338 </svg>339 </div>340 <div class="top-icon">341 <svg width="34" height="34" viewBox="0 0 24 24" fill="currentColor">342 <path d="M12 3c-1.7 0-3 1.3-3 3v7a2 2 0 0 0 3.1 1.7L16 13v2.5a3.5 3.5 0 1 0 7 0V8h-2v7.5a1.5 1.5 0 1 1-3 0V6c0-1.7-1.3-3-3-3z"></path>343 </svg>344 </div>345 </div>346 347 <div class="row">348 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>349 </div>350 <div class="row">351 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>352 <div class="key backspace icon">353 <svg viewBox="0 0 24 24" fill="#e7d7c7">354 <path d="M10 6l-6 6 6 6h11a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H10z"></path>355 <path d="M14 9l4 4m0-4l-4 4" stroke="#1b120d" stroke-width="2"></path>356 </svg>357 </div>358 </div>359 <div class="row">360 <div class="key shift icon">361 <svg viewBox="0 0 24 24" fill="#e7d7c7">362 <path d="M12 4l7 7h-4v7H9v-7H5z"></path>363 </svg>364 </div>365 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>366 <div class="key icon">.</div>367 </div>368 <div class="row">369 <div class="key wide special">?123</div>370 <div class="key">@</div>371 <div class="key">☺</div>372 <div class="key space"></div>373 <div class="key">.</div>374 <div class="key wide special enter icon">375 <svg viewBox="0 0 24 24" fill="#2b2220">376 <path d="M20 7v6H9l3 3-1.4 1.4L4.2 12l6.4-5.4L12 8l-3 3h9V7h2z"></path>377 </svg>378 </div>379 </div>380 <div class="gesture"></div>381 </div>382 383</div>384</body>385</html>