GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Email Compose - Dark UI</title>6<style>7 body { margin:0; padding:0; background: transparent; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #0f2529; /* dark teal */14 color: #d7e3e6;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 }17 18 /* Status bar */19 .statusbar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 96px;25 padding: 0 36px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #eaf4f6;31 font-size: 34px;32 letter-spacing: 0.5px;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 22px;38 }39 .icon {40 width: 40px;41 height: 40px;42 fill: none;43 stroke: #eaf4f6;44 stroke-width: 3;45 }46 .battery {47 width: 60px;48 height: 32px;49 }50 51 /* App bar with back and actions */52 .appbar {53 position: absolute;54 top: 96px;55 left: 0;56 width: 100%;57 height: 120px;58 display: flex;59 align-items: center;60 box-sizing: border-box;61 padding: 0 24px;62 }63 .back-btn {64 width: 80px;65 height: 80px;66 display: flex;67 align-items: center;68 justify-content: center;69 margin-right: 12px;70 }71 .app-actions {72 margin-left: auto;73 display: flex;74 align-items: center;75 gap: 30px;76 }77 .action-btn svg {78 width: 54px; height: 54px;79 stroke: #cfe2e6; fill: none; stroke-width: 4;80 }81 .kebab svg { stroke: none; fill: #cfe2e6; }82 83 /* Content rows */84 .content {85 position: absolute;86 top: 216px;87 left: 0;88 width: 100%;89 box-sizing: border-box;90 padding: 0 36px;91 }92 .field-row {93 display: flex;94 align-items: center;95 border-bottom: 1px solid #20363a;96 height: 140px;97 }98 .label {99 color: #8aa1a7;100 font-size: 36px;101 width: 130px;102 }103 .value {104 font-size: 36px;105 color: #e8f0f1;106 flex: 1;107 }108 .chevron {109 width: 36px; height: 36px; margin-left: 12px;110 }111 112 /* Contact block */113 .contact {114 display: flex;115 align-items: center;116 gap: 28px;117 height: 160px;118 border-bottom: 1px solid #20363a;119 padding-top: 12px;120 }121 .avatar {122 width: 96px;123 height: 96px;124 border-radius: 48px;125 background: #8a6b61;126 color: #ffffff;127 display: flex;128 align-items: center;129 justify-content: center;130 font-weight: 700;131 font-size: 42px;132 }133 .contact-info {134 display: flex;135 flex-direction: column;136 justify-content: center;137 }138 .contact-main {139 font-size: 40px;140 color: #e8f0f1;141 line-height: 1.2;142 }143 .contact-sub {144 font-size: 28px;145 color: #8fa3a8;146 margin-top: 6px;147 }148 149 /* Keyboard */150 .keyboard {151 position: absolute;152 bottom: 80px;153 left: 0;154 width: 100%;155 height: 980px;156 background: #111b1e;157 border-top: 1px solid #1f3237;158 box-sizing: border-box;159 padding: 24px 20px 20px;160 }161 .tool-row {162 height: 90px;163 display: flex;164 align-items: center;165 gap: 26px;166 padding: 0 12px;167 }168 .tool {169 width: 72px;170 height: 72px;171 background: #1e2a2e;172 border: 1px solid #2b3a3f;173 border-radius: 16px;174 display: flex;175 align-items: center;176 justify-content: center;177 }178 .tool svg { width: 38px; height: 38px; stroke: #cfe2e6; fill: none; stroke-width: 3; }179 180 .keys {181 margin-top: 18px;182 display: flex;183 flex-direction: column;184 gap: 22px;185 }186 .key-row {187 display: flex;188 justify-content: center;189 gap: 14px;190 padding: 0 40px;191 }192 .key {193 width: 82px;194 height: 120px;195 background: #263339;196 border: 1px solid #37464b;197 border-radius: 18px;198 color: #f4f7f8;199 font-size: 42px;200 display: flex;201 align-items: center;202 justify-content: center;203 box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2);204 }205 .wide { width: 140px; }206 .xwide { width: 260px; }207 .space { width: 480px; }208 .shift, .backspace, .enter {209 font-size: 34px;210 }211 .enter {212 background: #55c6a6;213 border-color: #4bb192;214 color: #07211f;215 }216 .accent {217 background: #4a6b6f;218 border-color: #3f5a5f;219 }220 221 /* Home indicator */222 .home-indicator {223 position: absolute;224 bottom: 24px;225 left: 50%;226 transform: translateX(-50%);227 width: 240px;228 height: 10px;229 background: #6a7b80;230 border-radius: 6px;231 opacity: 0.6;232 }233</style>234</head>235<body>236<div id="render-target">237 238 <!-- Status bar -->239 <div class="statusbar">240 <div class="time">7:50</div>241 <div class="status-icons">242 <!-- simple dots to mimic status icons -->243 <svg class="icon" viewBox="0 0 40 40"><circle cx="20" cy="20" r="6" /></svg>244 <svg class="icon" viewBox="0 0 40 40"><circle cx="20" cy="20" r="6" /><circle cx="32" cy="20" r="6" /></svg>245 <svg class="icon" viewBox="0 0 40 40"><path d="M8 20h24" /></svg>246 <!-- battery -->247 <svg class="battery" viewBox="0 0 60 32">248 <rect x="2" y="6" width="50" height="20" rx="4" ry="4" fill="none" stroke="#eaf4f6" stroke-width="3"/>249 <rect x="6" y="10" width="34" height="12" fill="#eaf4f6"/>250 <rect x="52" y="12" width="6" height="8" rx="2" fill="#eaf4f6"/>251 </svg>252 <div style="font-size:28px;">93%</div>253 </div>254 </div>255 256 <!-- App bar -->257 <div class="appbar">258 <div class="back-btn">259 <svg viewBox="0 0 48 48">260 <path d="M30 10 L14 24 L30 38" stroke="#cfe2e6" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>261 </svg>262 </div>263 <div class="app-actions">264 <div class="action-btn">265 <!-- attach/paperclip -->266 <svg viewBox="0 0 48 48">267 <path d="M16 20 v10a8 8 0 0 0 16 0V16a6 6 0 0 0-12 0v14" stroke-linecap="round"/>268 </svg>269 </div>270 <div class="action-btn">271 <!-- send -->272 <svg viewBox="0 0 48 48">273 <path d="M6 24 L42 12 L30 24 L42 36 Z" />274 </svg>275 </div>276 <div class="action-btn kebab">277 <!-- vertical dots -->278 <svg viewBox="0 0 12 48">279 <circle cx="6" cy="10" r="4"/>280 <circle cx="6" cy="24" r="4"/>281 <circle cx="6" cy="38" r="4"/>282 </svg>283 </div>284 </div>285 </div>286 287 <!-- Content -->288 <div class="content">289 <div class="field-row">290 <div class="label">From</div>291 <div class="value">richardwegnar@gmail.com</div>292 <svg class="chevron" viewBox="0 0 24 24">293 <path d="M6 9 L12 15 L18 9" stroke="#bcd0d4" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>294 </svg>295 </div>296 297 <div class="field-row">298 <div class="label">To</div>299 <div class="value">clarawagner98b@gmail.com</div>300 <svg class="chevron" viewBox="0 0 24 24">301 <path d="M6 9 L12 15 L18 9" stroke="#bcd0d4" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>302 </svg>303 </div>304 305 <div class="contact">306 <div class="avatar">C</div>307 <div class="contact-info">308 <div class="contact-main">clarawagner98b@gmail.com</div>309 <div class="contact-sub">clarawagner98b@gmail.com</div>310 </div>311 </div>312 </div>313 314 <!-- Keyboard -->315 <div class="keyboard">316 <div class="tool-row">317 <div class="tool">318 <svg viewBox="0 0 48 48"><path d="M10 10h28v28H10z M18 18h12v12H18z"/></svg>319 </div>320 <div class="tool">321 <svg viewBox="0 0 48 48"><circle cx="24" cy="18" r="8"/><path d="M10 40c4-8 24-8 28 0" /></svg>322 </div>323 <div class="tool">324 <svg viewBox="0 0 48 48"><text x="10" y="32" fill="#cfe2e6" font-size="22">GIF</text></svg>325 </div>326 <div class="tool">327 <svg viewBox="0 0 48 48"><path d="M24 8a16 16 0 1 0 0 32a16 16 0 1 0 0-32z M24 18v12 M18 24h12" /></svg>328 </div>329 <div class="tool">330 <svg viewBox="0 0 48 48"><path d="M10 36h18l10-24H20z" /></svg>331 </div>332 <div class="tool">333 <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="16"/><path d="M24 12v20" /></svg>334 </div>335 <div class="tool">336 <svg viewBox="0 0 48 48"><path d="M12 20c0 8 8 12 12 12v-8h10c3 0 4-4 2-6l-4-4" /></svg>337 </div>338 </div>339 340 <div class="keys">341 <!-- Row 1 -->342 <div class="key-row">343 <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>344 <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>345 </div>346 347 <!-- Row 2 -->348 <div class="key-row" style="padding-left: 90px; padding-right: 90px;">349 <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>350 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>351 </div>352 353 <!-- Row 3 -->354 <div class="key-row" style="padding-left: 160px; padding-right: 40px;">355 <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>356 <div class="key wide backspace">⌫</div>357 </div>358 359 <!-- Row 4 -->360 <div class="key-row" style="padding-left: 30px; padding-right: 30px;">361 <div class="key wide accent">?123</div>362 <div class="key wide">@</div>363 <div class="key space">space</div>364 <div class="key wide">.</div>365 <div class="key wide enter">366 <svg viewBox="0 0 48 48" style="width:36px;height:36px;">367 <path d="M12 24h18v-8l12 8-12 8v-8H12z" fill="#07211f"/>368 </svg>369 </div>370 </div>371 </div>372 </div>373 374 <div class="home-indicator"></div>375</div>376</body>377</html>