GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Email Compose Screen Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F3F5F9;15 color: #202124;16 }17 18 /* Status bar */19 .status-bar {20 height: 100px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #2b2b2b;26 font-size: 34px;27 letter-spacing: 0.5px;28 }29 .status-right {30 display: flex;31 align-items: center;32 gap: 24px;33 color: #6b6f75;34 }35 .sb-icon { width: 36px; height: 36px; opacity: 0.9; }36 37 /* App bar */38 .app-bar {39 height: 120px;40 background: #FFFFFF;41 display: flex;42 align-items: center;43 padding: 0 16px 0 8px;44 border-bottom: 1px solid #E4E6EB;45 }46 .icon-btn {47 width: 84px;48 height: 84px;49 display: flex;50 align-items: center;51 justify-content: center;52 border-radius: 42px;53 }54 .icon-btn svg { width: 44px; height: 44px; fill: #5f6368; }55 .icon-btn.send svg { fill: #789C30; } /* olive green send */56 57 .app-title {58 flex: 1;59 padding-left: 8px;60 color: #202124;61 font-size: 40px;62 font-weight: 600;63 }64 65 /* Compose area */66 .compose {67 background: #FFFFFF;68 padding: 24px 32px 16px 32px;69 }70 .field-row {71 display: flex;72 align-items: center;73 gap: 18px;74 padding: 18px 0;75 border-bottom: 1px solid #EEEFF2;76 }77 .field-label {78 width: 120px;79 color: #80868b;80 font-size: 34px;81 }82 .field-value {83 flex: 1;84 color: #202124;85 font-size: 36px;86 display: flex;87 align-items: center;88 gap: 12px;89 }90 .down {91 width: 28px;92 height: 28px;93 }94 95 /* Recipient chip */96 .chip {97 display: inline-flex;98 align-items: center;99 gap: 14px;100 padding: 10px 18px 10px 10px;101 border: 2px solid #D6D9DE;102 border-radius: 40px;103 font-size: 34px;104 color: #202124;105 background: #FFFFFF;106 }107 .avatar {108 width: 56px;109 height: 56px;110 background: #1AA57A;111 color: #FFFFFF;112 border-radius: 50%;113 display: flex;114 align-items: center;115 justify-content: center;116 font-weight: bold;117 font-size: 34px;118 }119 .caret {120 width: 2px;121 height: 36px;122 background: #6FA74A;123 margin-left: 8px;124 }125 126 .subject-label {127 color: #80868b;128 font-size: 34px;129 padding: 22px 0;130 border-bottom: 1px solid #EEEFF2;131 }132 133 .message {134 padding: 24px 0 240px 0;135 font-size: 40px;136 line-height: 1.5;137 color: #202124;138 }139 140 /* Keyboard mock */141 .keyboard {142 position: absolute;143 left: 0;144 right: 0;145 bottom: 64px;146 height: 880px;147 background: #EEF1F8;148 border-top: 1px solid #E1E4EA;149 padding: 22px 26px;150 box-sizing: border-box;151 }152 .key-row {153 display: flex;154 gap: 18px;155 margin-bottom: 18px;156 }157 .key {158 flex: 1;159 height: 120px;160 background: #FFFFFF;161 border: 1px solid #DDE1E6;162 border-radius: 26px;163 display: flex;164 align-items: center;165 justify-content: center;166 font-size: 44px;167 color: #2b2f33;168 }169 .key.wide { flex: 1.4; }170 .key.extra-wide { flex: 4; }171 .key.pink {172 background: #FFDCEA;173 border-color: #F5BFD3;174 color: #2b2f33;175 }176 .key.green {177 background: #D7E5B0;178 border-color: #B9CE84;179 color: #2b2f33;180 }181 .gesture-bar {182 position: absolute;183 bottom: 18px;184 left: 330px;185 width: 420px;186 height: 10px;187 background: #8D9096;188 border-radius: 6px;189 opacity: 0.6;190 }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Status Bar -->197 <div class="status-bar">198 <div class="status-left">5:21</div>199 <div class="status-right">200 <!-- simplified status icons -->201 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#9AA0A6"/></svg>202 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M2 16h20l-5-6-4 5-3-4-8 5z" fill="#9AA0A6"/></svg>203 <svg class="sb-icon" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2" fill="#9AA0A6"/></svg>204 </div>205 </div>206 207 <!-- App Bar -->208 <div class="app-bar">209 <div class="icon-btn" aria-label="Back">210 <svg viewBox="0 0 24 24">211 <path d="M15.4 3.4L13.99 2 4 12l9.99 10 1.41-1.4L7.83 12 15.4 3.4z"/>212 </svg>213 </div>214 <div class="app-title"></div>215 <div class="icon-btn" aria-label="Attach">216 <svg viewBox="0 0 24 24">217 <path d="M16.5 6.5v8.25a4.25 4.25 0 11-8.5 0V5.75a2.75 2.75 0 115.5 0v7.75a1.25 1.25 0 11-2.5 0V6.5H9v7.25a3.75 3.75 0 107.5 0V5.75a4.25 4.25 0 10-8.5 0V15h1.5V5.75a2.75 2.75 0 115.5 0v8a2.75 2.75 0 11-5.5 0V9h1.5v4.75a1.25 1.25 0 102.5 0V6.5h1.5z"/>218 </svg>219 </div>220 <div class="icon-btn send" aria-label="Send">221 <svg viewBox="0 0 24 24">222 <path d="M2 21l20-9L2 3v7l14 2-14 2v7z"/>223 </svg>224 </div>225 <div class="icon-btn" aria-label="More">226 <svg viewBox="0 0 24 24">227 <circle cx="12" cy="5" r="2"></circle>228 <circle cx="12" cy="12" r="2"></circle>229 <circle cx="12" cy="19" r="2"></circle>230 </svg>231 </div>232 </div>233 234 <!-- Compose Fields -->235 <div class="compose">236 <div class="field-row">237 <div class="field-label">From</div>238 <div class="field-value">239 natalie.larson1998@gmail.com240 <svg class="down" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z" fill="#80868b"/></svg>241 </div>242 </div>243 244 <div class="field-row">245 <div class="field-label">To</div>246 <div class="field-value">247 <span class="chip">248 <span class="avatar">A</span>249 amelia.miller2709@gmail.com250 </span>251 <svg class="down" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z" fill="#80868b"/></svg>252 <div class="caret"></div>253 </div>254 </div>255 256 <div class="subject-label">Subject</div>257 258 <div class="message">259 Oh wow, look at this deal I found! I think you should lock it down before it’s gone.<br><br>260 Book now with Omio!<br>261 https://www.omio.com/app/search-frontend/journey/train/1410180531/E71BB7DE81A5D420287DB702079049B67/-1598870492550613873?locale=en&utm_source=share&utm_medium=ticket-config-page262 </div>263 </div>264 265 <!-- Keyboard Mock -->266 <div class="keyboard">267 <div class="key-row">268 <div class="key">q</div>269 <div class="key">w</div>270 <div class="key">e</div>271 <div class="key">r</div>272 <div class="key">t</div>273 <div class="key">y</div>274 <div class="key">u</div>275 <div class="key">i</div>276 <div class="key">o</div>277 <div class="key">p</div>278 </div>279 <div class="key-row">280 <div class="key">a</div>281 <div class="key">s</div>282 <div class="key">d</div>283 <div class="key">f</div>284 <div class="key">g</div>285 <div class="key">h</div>286 <div class="key">j</div>287 <div class="key">k</div>288 <div class="key">l</div>289 </div>290 <div class="key-row">291 <div class="key wide pink">⇧</div>292 <div class="key">z</div>293 <div class="key">x</div>294 <div class="key">c</div>295 <div class="key">v</div>296 <div class="key">b</div>297 <div class="key">n</div>298 <div class="key">m</div>299 <div class="key wide pink">⌫</div>300 </div>301 <div class="key-row">302 <div class="key wide pink">?123</div>303 <div class="key pink">@</div>304 <div class="key">😊</div>305 <div class="key extra-wide">space</div>306 <div class="key pink">.</div>307 <div class="key wide green">↩︎</div>308 </div>309 </div>310 311 <div class="gesture-bar"></div>312</div>313</body>314</html>