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>Email Compose Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F2F4F8;15 color: #1f1f1f;16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #2b2b2b;26 font-size: 42px;27 }28 .status-right {29 display: flex;30 align-items: center;31 gap: 24px;32 }33 .icon {34 width: 44px;35 height: 44px;36 display: inline-flex;37 align-items: center;38 justify-content: center;39 }40 .icon svg { width: 100%; height: 100%; }41 42 /* App top row */43 .top-actions {44 height: 120px;45 padding: 0 20px;46 display: flex;47 align-items: center;48 justify-content: space-between;49 }50 .left-actions, .right-actions {51 display: flex;52 align-items: center;53 gap: 16px;54 }55 .btn-circle {56 width: 86px;57 height: 86px;58 border-radius: 50%;59 display: inline-flex;60 align-items: center;61 justify-content: center;62 }63 64 /* Fields */65 .fields {66 background: transparent;67 padding: 8px 32px 0 32px;68 font-size: 40px;69 }70 .field-row {71 display: flex;72 align-items: center;73 gap: 24px;74 padding: 30px 0;75 border-bottom: 1px solid #E3E6EB;76 }77 .field-label {78 min-width: 120px;79 color: #6b6f77;80 }81 .field-value {82 flex: 1;83 display: flex;84 align-items: center;85 gap: 16px;86 color: #1e1f21;87 }88 .value-text {89 white-space: nowrap;90 overflow: hidden;91 text-overflow: ellipsis;92 }93 .chev {94 width: 36px;95 height: 36px;96 display: inline-flex;97 align-items: center;98 justify-content: center;99 }100 .helper {101 margin-top: 26px;102 display: flex;103 align-items: center;104 gap: 24px;105 }106 .avatar {107 width: 94px;108 height: 94px;109 border-radius: 50%;110 background: #0F8A83;111 color: white;112 display: flex;113 align-items: center;114 justify-content: center;115 font-weight: 700;116 font-size: 46px;117 }118 .helper-texts {119 display: flex;120 flex-direction: column;121 line-height: 1.2;122 }123 .helper-name { font-size: 44px; color: #1f1f1f; }124 .helper-email { font-size: 34px; color: #6c6f75; }125 126 /* Spacer above keyboard */127 .content-spacer {128 height: 920px;129 }130 131 /* Keyboard mock */132 .keyboard {133 position: absolute;134 left: 0;135 bottom: 60px;136 width: 100%;137 height: 860px;138 background: #ECEFF6;139 border-top-left-radius: 18px;140 border-top-right-radius: 18px;141 box-shadow: 0 -2px 6px rgba(0,0,0,0.06);142 padding: 18px 22px 10px 22px;143 display: flex;144 flex-direction: column;145 gap: 16px;146 }147 .kbd-toolbar {148 display: flex;149 align-items: center;150 gap: 26px;151 padding: 6px 8px 10px 8px;152 }153 .tool-btn {154 width: 92px;155 height: 92px;156 border-radius: 28px;157 background: #D8E6B6;158 display: inline-flex;159 align-items: center;160 justify-content: center;161 }162 .tool-icon {163 width: 44px; height: 44px;164 }165 .toolbar-spacer {166 flex: 1;167 }168 169 .rows { display: flex; flex-direction: column; gap: 16px; }170 .row { display: flex; justify-content: center; gap: 16px; padding: 0 8px; }171 .key {172 min-width: 84px;173 height: 124px;174 border-radius: 26px;175 background: #FFFFFF;176 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.04);177 display: flex;178 align-items: center;179 justify-content: center;180 font-size: 46px;181 color: #1e1e1e;182 padding: 0 18px;183 }184 .key.wide { min-width: 160px; }185 .key.space { flex: 1; min-width: 0; }186 .key.pink { background: #FFD7E6; }187 .key.green { background: #CFE8A9; }188 .key.small { font-size: 38px; }189 .row.second { padding-left: 54px; padding-right: 54px; }190 .row.third { padding-left: 8px; padding-right: 8px; }191 192 /* Gesture bar */193 .gesture {194 position: absolute;195 bottom: 16px;196 left: 50%;197 transform: translateX(-50%);198 width: 340px;199 height: 10px;200 border-radius: 6px;201 background: #B8BCC6;202 opacity: 0.8;203 }204</style>205</head>206<body>207 <div id="render-target">208 209 <!-- Status Bar -->210 <div class="status-bar">211 <div class="status-left">5:19</div>212 <div class="status-right">213 <span class="icon" aria-hidden="true">214 <svg viewBox="0 0 24 24" fill="#6b6f77"><path d="M4 12h2v6H4v-6zm3-3h2v9H7V9zm3-4h2v13h-2V5zm3 7h2v6h-2v-6zm3-3h2v9h-2V9z"/></svg>215 </span>216 <span class="icon" aria-hidden="true">217 <svg viewBox="0 0 24 24" fill="#6b6f77"><path d="M12 3C7 3 2.73 6.11 1 10.5L12 21l11-10.5C21.27 6.11 17 3 12 3z"/></svg>218 </span>219 <span class="icon" aria-label="Battery">220 <svg viewBox="0 0 24 24" fill="#6b6f77">221 <rect x="2" y="7" width="18" height="10" rx="2"></rect>222 <rect x="21" y="10" width="2" height="4" rx="1"></rect>223 <rect x="4" y="9" width="12" height="6" fill="#9AA0A6"></rect>224 </svg>225 </span>226 </div>227 </div>228 229 <!-- App Actions -->230 <div class="top-actions">231 <div class="left-actions">232 <div class="btn-circle">233 <svg viewBox="0 0 24 24" width="56" height="56" fill="#1f1f1f">234 <path d="M15.5 19l-7-7 7-7v14z"/>235 </svg>236 </div>237 </div>238 <div class="right-actions">239 <span class="icon" title="Attach">240 <svg viewBox="0 0 24 24" fill="#1f1f1f"><path d="M7 13.5V6a5 5 0 0 1 10 0v8a3.5 3.5 0 0 1-7 0V7h2v7a1.5 1.5 0 0 0 3 0V6a3 3 0 0 0-6 0v7.5a5.5 5.5 0 1 0 11 0V6h2v8a7.5 7.5 0 1 1-15 0z"/></svg>241 </span>242 <span class="icon" title="Send">243 <svg viewBox="0 0 24 24" fill="#1f1f1f"><path d="M2 21l19-9L2 3v7l13 2-13 2v7z"/></svg>244 </span>245 <span class="icon" title="More">246 <svg viewBox="0 0 24 24" fill="#1f1f1f"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>247 </span>248 </div>249 </div>250 251 <!-- Email Fields -->252 <div class="fields">253 <div class="field-row">254 <div class="field-label">From</div>255 <div class="field-value">256 <div class="value-text">natalie.larson1998@gmail.com</div>257 <div class="chev" aria-hidden="true">258 <svg viewBox="0 0 24 24" fill="#6b6f77"><path d="M7 10l5 5 5-5H7z"/></svg>259 </div>260 </div>261 </div>262 263 <div class="field-row">264 <div class="field-label">To</div>265 <div class="field-value">266 <div class="value-text" style="color:#1a73e8;">amelia.miller2709@gmail.com</div>267 <div class="chev" aria-hidden="true">268 <svg viewBox="0 0 24 24" fill="#6b6f77"><path d="M7 10l5 5 5-5H7z"/></svg>269 </div>270 </div>271 </div>272 273 <div class="helper">274 <div class="avatar">A</div>275 <div class="helper-texts">276 <div class="helper-name">Amelia miller</div>277 <div class="helper-email">amelia.miller2709@gmail.com</div>278 </div>279 </div>280 </div>281 282 <div class="content-spacer"></div>283 284 <!-- Keyboard -->285 <div class="keyboard">286 <div class="kbd-toolbar">287 <div class="tool-btn">288 <svg class="tool-icon" viewBox="0 0 24 24" fill="#1f1f1f"><path d="M4 4h16v5H4V4zm0 7h7v9H4v-9zm9 0h7v9h-7v-9z"/></svg>289 </div>290 <div class="icon"><svg viewBox="0 0 24 24" fill="#9AA0A6"><path d="M12 17c2.8 0 5-2.24 5-5s-2.2-5-5-5-5 2.24-5 5 2.2 5 5 5zm0 2c-4 0-7-3.13-7-7s3-7 7-7 7 3.13 7 7-3 7-7 7z"/></svg></div>291 <div class="icon"><svg viewBox="0 0 24 24" fill="#9AA0A6"><path d="M8 4v6H4l8 10 8-10h-4V4z"/></svg></div>292 <div class="icon"><svg viewBox="0 0 24 24" fill="#9AA0A6"><path d="M12 8a4 4 0 0 0 0 8v3l5-4-5-4v3a2 2 0 1 1 0-4z"/></svg></div>293 <div class="icon"><svg viewBox="0 0 24 24" fill="#9AA0A6"><path d="M3 3h18v2H3V3zm4 4h10v2H7V7zm-4 4h18v2H3v-2zm4 4h10v2H7v-2zm-4 4h18v2H3v-2z"/></svg></div>294 <div class="icon"><svg viewBox="0 0 24 24" fill="#9AA0A6"><circle cx="12" cy="12" r="8"/></svg></div>295 <div class="toolbar-spacer"></div>296 <div class="icon"><svg viewBox="0 0 24 24" fill="#9AA0A6"><path d="M12 3a9 9 0 0 0-9 9h2a7 7 0 0 1 14 0h2a9 9 0 0 0-9-9zm-1 10v6h2v-6h-2z"/></svg></div>297 </div>298 299 <div class="rows">300 <div class="row">301 <div class="key">q</div>302 <div class="key">w</div>303 <div class="key">e</div>304 <div class="key">r</div>305 <div class="key">t</div>306 <div class="key">y</div>307 <div class="key">u</div>308 <div class="key">i</div>309 <div class="key">o</div>310 <div class="key">p</div>311 </div>312 313 <div class="row second">314 <div class="key">a</div>315 <div class="key">s</div>316 <div class="key">d</div>317 <div class="key">f</div>318 <div class="key">g</div>319 <div class="key">h</div>320 <div class="key">j</div>321 <div class="key">k</div>322 <div class="key">l</div>323 </div>324 325 <div class="row third">326 <div class="key pink wide">⇧</div>327 <div class="key">z</div>328 <div class="key">x</div>329 <div class="key">c</div>330 <div class="key">v</div>331 <div class="key">b</div>332 <div class="key">n</div>333 <div class="key">m</div>334 <div class="key pink wide">⌫</div>335 </div>336 337 <div class="row">338 <div class="key small pink wide">?123</div>339 <div class="key small pink"> @ </div>340 <div class="key small">☺</div>341 <div class="key space"></div>342 <div class="key small pink">.</div>343 <div class="key green wide">344 <svg viewBox="0 0 24 24" width="48" height="48" fill="#1f1f1f"><path d="M4 12h14l-5-5 1.4-1.4L22.8 12l-8.4 6.4L13 17l5-5H4z"/></svg>345 </div>346 </div>347 </div>348 </div>349 350 <div class="gesture"></div>351 </div>352</body>353</html>