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>Email Compose - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 font-family: Arial, Helvetica, sans-serif;16 color: #EAEAEA;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 100%;25 height: 90px;26 display: flex;27 align-items: center;28 padding: 0 32px;29 box-sizing: border-box;30 color: #f5f5f5;31 font-size: 34px;32 letter-spacing: 0.5px;33 }34 .status-right {35 margin-left: auto;36 display: flex;37 align-items: center;38 gap: 24px;39 }40 .status-icon svg { width: 38px; height: 38px; fill: #d9d9d9; }41 .battery {42 display: flex; align-items: center; gap: 10px; font-size: 26px; color: #d9d9d9;43 }44 .battery svg { width: 52px; height: 28px; }45 46 /* Toolbar */47 .toolbar {48 position: absolute;49 top: 90px;50 left: 0;51 width: 100%;52 height: 130px;53 display: flex;54 align-items: center;55 padding: 0 24px;56 box-sizing: border-box;57 border-bottom: 1px solid #242424;58 }59 .toolbar .left { display: flex; align-items: center; gap: 20px; }60 .toolbar .right { margin-left: auto; display: flex; align-items: center; gap: 36px; }61 .toolbar svg { width: 52px; height: 52px; fill: #E0E0E0; }62 63 /* Compose fields */64 .compose {65 position: absolute;66 top: 220px;67 left: 0;68 width: 100%;69 padding: 0 32px;70 box-sizing: border-box;71 color: #e6e6e6;72 }73 .field {74 display: flex;75 align-items: center;76 height: 110px;77 border-bottom: 1px solid #252525;78 }79 .label {80 width: 140px;81 color: #bdbdbd;82 font-size: 30px;83 }84 .value {85 flex: 1;86 display: flex;87 align-items: center;88 gap: 16px;89 font-size: 32px;90 }91 .value .placeholder { color: #7b7b7b; }92 .chevron svg { width: 36px; height: 36px; fill: #bdbdbd; }93 94 /* Message body */95 .message-body {96 padding: 28px 0 24px 0;97 font-size: 36px;98 line-height: 1.45;99 color: #ffffff;100 }101 .link {102 color: #9ecaff;103 word-break: break-word;104 }105 106 /* Keyboard */107 .keyboard {108 position: absolute;109 left: 0;110 bottom: 40px;111 width: 100%;112 height: 840px;113 background: #1a1a1a;114 border-top: 1px solid #292929;115 box-sizing: border-box;116 padding: 16px 22px 24px;117 }118 .kb-top {119 height: 90px;120 display: flex;121 align-items: center;122 gap: 24px;123 padding: 0 8px;124 box-sizing: border-box;125 }126 .kb-top .chip {127 height: 56px; padding: 0 22px; border-radius: 28px;128 background: #2a2a2a; color: #dcdcdc; display: flex; align-items: center; font-size: 26px;129 }130 .kb-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 18px; }131 .kb-row { display: flex; justify-content: space-between; padding: 0 8px; }132 133 .key {134 background: #2e2e2e;135 color: #f0f0f0;136 border-radius: 16px;137 height: 118px;138 min-width: 88px;139 flex: 1;140 margin: 0 6px;141 display: flex;142 align-items: center;143 justify-content: center;144 font-size: 40px;145 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.03);146 }147 .key.small { flex: 0 0 90px; }148 .key.medium { flex: 0 0 140px; }149 .key.wide { flex: 1.6; }150 .key.extra-wide { flex: 3.2; }151 .key.special { background: #3a3a3a; color: #e7e7e7; }152 .key.icon svg { width: 44px; height: 44px; fill: #e7e7e7; }153 154 /* Bottom navigation pill */155 .nav-pill {156 position: absolute;157 bottom: 10px;158 left: 50%;159 transform: translateX(-50%);160 width: 200px;161 height: 10px;162 background: #f0f0f0;163 border-radius: 8px;164 opacity: 0.85;165 }166</style>167</head>168<body>169<div id="render-target">170 171 <!-- Status bar -->172 <div class="status-bar">173 <div class="status-left">9:27</div>174 <div class="status-right">175 <div class="status-icon">176 <!-- Cellular -->177 <svg viewBox="0 0 24 24"><path d="M3 20h2v-6H3v6zm4 0h2v-10H7v10zm4 0h2V8h-2v12zm4 0h2V4h-2v16z"/></svg>178 </div>179 <div class="status-icon">180 <!-- WiFi -->181 <svg viewBox="0 0 24 24"><path d="M12 20l4-4H8l4 4zm8-10C15 6 9 6 4 10l2 2c4-3 12-3 16 0l2-2z"/></svg>182 </div>183 <div class="status-icon">184 <!-- Do not disturb bell -->185 <svg viewBox="0 0 24 24"><path d="M12 2a4 4 0 0 0-4 4v2.1C6.3 9.7 5 11.3 5 13v5l-2 2h18l-2-2v-5c0-1.7-1.3-3.3-3-4.9V6a4 4 0 0 0-4-4z"/></svg>186 </div>187 <div class="battery">188 <svg viewBox="0 0 24 24"><path d="M2 7h17v10H2V7zm19 3h1v4h-1v-4z"/></svg>189 <span>100%</span>190 </div>191 </div>192 </div>193 194 <!-- Toolbar -->195 <div class="toolbar">196 <div class="left">197 <!-- Back arrow -->198 <svg viewBox="0 0 24 24"><path d="M20 11H7.8l5.6-5.6L12 4 4 12l8 8 1.4-1.4L7.8 13H20v-2z"/></svg>199 </div>200 <div class="right">201 <!-- Attach -->202 <svg viewBox="0 0 24 24"><path d="M7 13.5l6.4-6.4a3 3 0 0 1 4.2 4.2L10.2 18A5 5 0 0 1 3 11.8l7.1-7.1 1.4 1.4-7.1 7.1a3 3 0 1 0 4.2 4.2l7.4-7.4a1.5 1.5 0 0 0-2.1-2.1L7 12.1v1.4z"/></svg>203 <!-- Send -->204 <svg viewBox="0 0 24 24"><path d="M2 21l20-9L2 3v7l14 2-14 2v7z"/></svg>205 <!-- More -->206 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>207 </div>208 </div>209 210 <!-- Compose fields -->211 <div class="compose">212 <div class="field">213 <div class="label">From</div>214 <div class="value">fabioteixeira00123@gmail.com215 <span class="chevron">216 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>217 </span>218 </div>219 </div>220 <div class="field">221 <div class="label">To</div>222 <div class="value"><span class="placeholder">Add recipients</span>223 <span class="chevron">224 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>225 </span>226 </div>227 </div>228 <div class="field">229 <div class="label">Subject</div>230 <div class="value"><span class="placeholder">Subject</span></div>231 </div>232 233 <div class="message-body">234 <p>Oh wow, look at this deal I found! I think you should lock it down before it’s gone.</p>235 <p>Book now with Omio!236 <span class="link">https://www.omio.com/app/search-frontend/journey/bus/-996524785/L4C4A5E02A2D54A43A0A93EF36F107D96/-356815279341286571?locale=en&utm_source=share&utm_medium=ticket-config-page</span>237 </p>238 </div>239 </div>240 241 <!-- Keyboard -->242 <div class="keyboard">243 <div class="kb-top">244 <div class="chip">☷</div>245 <div class="chip">😊</div>246 <div class="chip">GIF</div>247 <div class="chip">⚙️</div>248 <div class="chip">G↔︎</div>249 <div class="chip">🎨</div>250 <div class="chip" style="margin-left:auto;">🎤</div>251 </div>252 253 <div class="kb-rows">254 <!-- Row 1 -->255 <div class="kb-row">256 <div class="key">q</div>257 <div class="key">w</div>258 <div class="key">e</div>259 <div class="key">r</div>260 <div class="key">t</div>261 <div class="key">y</div>262 <div class="key">u</div>263 <div class="key">i</div>264 <div class="key">o</div>265 <div class="key">p</div>266 </div>267 <!-- Row 2 -->268 <div class="kb-row">269 <div class="key">a</div>270 <div class="key">s</div>271 <div class="key">d</div>272 <div class="key">f</div>273 <div class="key">g</div>274 <div class="key">h</div>275 <div class="key">j</div>276 <div class="key">k</div>277 <div class="key">l</div>278 </div>279 <!-- Row 3 -->280 <div class="kb-row">281 <div class="key medium special icon">282 <!-- Shift -->283 <svg viewBox="0 0 24 24"><path d="M12 4l8 8h-5v8H9v-8H4l8-8z"/></svg>284 </div>285 <div class="key">z</div>286 <div class="key">x</div>287 <div class="key">c</div>288 <div class="key">v</div>289 <div class="key">b</div>290 <div class="key">n</div>291 <div class="key">m</div>292 <div class="key medium special icon">293 <!-- Backspace -->294 <svg viewBox="0 0 24 24"><path d="M22 6H9L2 12l7 6h13V6zm-4.6 9.6L15 13.2l-2.4 2.4-1.4-1.4 2.4-2.4-2.4-2.4 1.4-1.4 2.4 2.4 2.4-2.4 1.4 1.4-2.4 2.4 2.4 2.4-1.4 1.4z"/></svg>295 </div>296 </div>297 <!-- Row 4 -->298 <div class="kb-row">299 <div class="key medium special">?123</div>300 <div class="key small special">@</div>301 <div class="key small special">☺</div>302 <div class="key extra-wide">space</div>303 <div class="key small special">.</div>304 <div class="key medium special icon" style="background:#5f6df8;">305 <!-- Enter/Send -->306 <svg viewBox="0 0 24 24"><path d="M3 21l18-9L3 3v7l12 2-12 2v7z"/></svg>307 </div>308 </div>309 </div>310 </div>311 312 <!-- Bottom navigation pill -->313 <div class="nav-pill"></div>314 315</div>316</body>317</html>