GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Email Compose UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #F6F6F8;13 }14 /* Status bar */15 .status-bar {16 position: absolute;17 top: 0;18 left: 0;19 width: 1080px;20 height: 120px;21 background: #ffffff;22 display: flex;23 align-items: center;24 padding: 0 40px;25 box-sizing: border-box;26 color: #555;27 font-size: 44px;28 letter-spacing: 0.5px;29 }30 .status-right {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 28px;35 }36 /* App bar */37 .app-bar {38 position: absolute;39 top: 120px;40 left: 0;41 width: 1080px;42 height: 160px;43 background: #ffffff;44 display: flex;45 align-items: center;46 box-sizing: border-box;47 padding: 0 30px;48 border-bottom: 1px solid #e9e9ee;49 }50 .app-bar .title { font-size: 48px; color: #333; }51 .app-actions {52 margin-left: auto;53 display: flex;54 gap: 40px;55 align-items: center;56 }57 .icon-btn {58 width: 64px;59 height: 64px;60 display: inline-flex;61 justify-content: center;62 align-items: center;63 color: #60656b;64 }65 .icon-btn svg { width: 56px; height: 56px; }66 /* Content area */67 .content {68 position: absolute;69 top: 280px;70 left: 0;71 width: 1080px;72 height: 1060px;73 background: #ffffff;74 box-sizing: border-box;75 padding: 30px 40px;76 }77 .field-row {78 display: flex;79 align-items: center;80 gap: 24px;81 padding: 24px 0;82 border-bottom: 1px solid #f0f0f4;83 }84 .field-label {85 width: 140px;86 color: #757575;87 font-size: 40px;88 }89 .field-value {90 flex: 1;91 font-size: 44px;92 color: #222;93 }94 .dropdown {95 width: 48px; height: 48px;96 display: inline-flex; justify-content: center; align-items: center;97 color: #60656b;98 }99 .contact-chip {100 display: flex;101 align-items: center;102 gap: 28px;103 padding-top: 26px;104 }105 .avatar {106 width: 112px; height: 112px; border-radius: 56px;107 background: #2F7D72; color: #ffffff;108 display: flex; justify-content: center; align-items: center;109 font-size: 56px; font-weight: 600;110 }111 .contact-info .name {112 font-size: 52px; color: #222;113 }114 .contact-info .email {115 font-size: 38px; color: #6f6f6f; margin-top: 6px;116 }117 .body-area {118 margin-top: 40px;119 height: 700px;120 border: 1px dashed #e6e6ea;121 border-radius: 18px;122 color: #9aa0a6;123 display: flex;124 align-items: center;125 justify-content: center;126 font-size: 36px;127 }128 /* Keyboard */129 .keyboard {130 position: absolute;131 bottom: 60px;132 left: 0;133 width: 1080px;134 height: 1000px;135 background: #EEF0F6;136 box-sizing: border-box;137 padding: 28px 36px;138 border-top: 1px solid #dde0e6;139 }140 .kb-tools {141 display: flex;142 align-items: center;143 gap: 36px;144 margin-bottom: 26px;145 }146 .tool {147 width: 96px; height: 96px; border-radius: 24px;148 background: #D7DBE6; display: flex; justify-content: center; align-items: center;149 color: #596273;150 }151 .keys-row {152 display: grid;153 gap: 16px;154 margin-top: 14px;155 }156 .row1 { grid-template-columns: repeat(10, 1fr); }157 .row2 { grid-template-columns: repeat(9, 1fr); padding: 0 60px; }158 .row3 { grid-template-columns: repeat(8, 1fr); padding: 0 80px; }159 .key {160 height: 120px;161 background: #ffffff;162 border-radius: 26px;163 box-shadow: 0 2px 0 rgba(0,0,0,0.08);164 display: flex;165 align-items: center;166 justify-content: center;167 font-size: 46px;168 color: #2a2d33;169 }170 .key.wide { flex: 1; }171 .keys-bottom {172 display: flex;173 gap: 16px;174 margin-top: 24px;175 align-items: center;176 }177 .key.special { background: #E9EAF0; color: #333; }178 .space { flex: 1; height: 120px; border-radius: 26px; background: #ffffff; }179 .enter-btn, .backspace-btn {180 width: 120px; height: 120px; border-radius: 26px; background: #ffffff; display: flex; justify-content: center; align-items: center;181 }182 .gesture-indicator {183 position: absolute;184 bottom: 20px;185 left: 50%;186 transform: translateX(-50%);187 width: 260px; height: 10px;188 background: #BFC4CC; border-radius: 6px;189 }190 /* Simple icon sizing */191 svg { display: block; }192</style>193</head>194<body>195<div id="render-target">196 197 <!-- Status bar -->198 <div class="status-bar">199 <div>7:02</div>200 <div class="status-right">201 <!-- WiFi -->202 <svg width="46" height="46" viewBox="0 0 24 24">203 <path d="M2 8c5-4 15-4 20 0" stroke="#60656b" stroke-width="2" fill="none"/>204 <path d="M5 12c4-3 10-3 14 0" stroke="#60656b" stroke-width="2" fill="none"/>205 <circle cx="12" cy="16" r="2" fill="#60656b"/>206 </svg>207 <!-- Battery -->208 <svg width="48" height="48" viewBox="0 0 24 24">209 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#60656b" fill="none" stroke-width="2"/>210 <rect x="4" y="8" width="12" height="8" fill="#60656b"/>211 <rect x="20" y="9" width="2" height="6" fill="#60656b"/>212 </svg>213 </div>214 </div>215 216 <!-- App bar -->217 <div class="app-bar">218 <!-- Back button -->219 <div class="icon-btn">220 <svg viewBox="0 0 24 24">221 <path d="M15 4 L7 12 L15 20" stroke="#42464c" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>222 </svg>223 </div>224 <div class="title"></div>225 <div class="app-actions">226 <!-- Attach -->227 <div class="icon-btn">228 <svg viewBox="0 0 24 24">229 <path d="M7 12v6a5 5 0 0 0 10 0V8a3 3 0 0 0-6 0v8a1 1 0 0 0 2 0V9" stroke="#60656b" stroke-width="2" fill="none" stroke-linecap="round"/>230 </svg>231 </div>232 <!-- Send -->233 <div class="icon-btn">234 <svg viewBox="0 0 24 24">235 <path d="M3 12L21 3L15 12L21 21Z" fill="#60656b"/>236 </svg>237 </div>238 <!-- Menu -->239 <div class="icon-btn">240 <svg viewBox="0 0 24 24">241 <circle cx="12" cy="5" r="2.2" fill="#60656b"/>242 <circle cx="12" cy="12" r="2.2" fill="#60656b"/>243 <circle cx="12" cy="19" r="2.2" fill="#60656b"/>244 </svg>245 </div>246 </div>247 </div>248 249 <!-- Content -->250 <div class="content">251 <div class="field-row">252 <div class="field-label">From</div>253 <div class="field-value">natalie.larson1998@gmail.com</div>254 <div class="dropdown">255 <svg viewBox="0 0 24 24">256 <path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2.4" fill="none" stroke-linecap="round"/>257 </svg>258 </div>259 </div>260 261 <div class="field-row">262 <div class="field-label">To</div>263 <div class="field-value">amelia.miller2709@gmail.com</div>264 <div class="dropdown">265 <svg viewBox="0 0 24 24">266 <path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2.4" fill="none" stroke-linecap="round"/>267 </svg>268 </div>269 </div>270 271 <div class="contact-chip">272 <div class="avatar">A</div>273 <div class="contact-info">274 <div class="name">Amelia miller</div>275 <div class="email">amelia.miller2709@gmail.com</div>276 </div>277 </div>278 279 <div class="body-area">Email body area</div>280 </div>281 282 <!-- Keyboard -->283 <div class="keyboard">284 <div class="kb-tools">285 <div class="tool">286 <!-- grid dots -->287 <svg width="44" height="44" viewBox="0 0 24 24">288 <circle cx="6" cy="6" r="2" fill="#596273"/>289 <circle cx="12" cy="6" r="2" fill="#596273"/>290 <circle cx="18" cy="6" r="2" fill="#596273"/>291 <circle cx="6" cy="12" r="2" fill="#596273"/>292 <circle cx="12" cy="12" r="2" fill="#596273"/>293 <circle cx="18" cy="12" r="2" fill="#596273"/>294 <circle cx="6" cy="18" r="2" fill="#596273"/>295 <circle cx="12" cy="18" r="2" fill="#596273"/>296 <circle cx="18" cy="18" r="2" fill="#596273"/>297 </svg>298 </div>299 <div class="tool">300 <!-- emoji -->301 <svg width="48" height="48" viewBox="0 0 24 24">302 <circle cx="12" cy="12" r="9" fill="none" stroke="#596273" stroke-width="2"/>303 <circle cx="9" cy="10" r="1.5" fill="#596273"/>304 <circle cx="15" cy="10" r="1.5" fill="#596273"/>305 <path d="M8 15c2 2 6 2 8 0" stroke="#596273" stroke-width="2" fill="none" stroke-linecap="round"/>306 </svg>307 </div>308 <div class="tool"><span style="font-size:34px;font-weight:700;color:#596273">GIF</span></div>309 <div class="tool">310 <!-- gear -->311 <svg width="48" height="48" viewBox="0 0 24 24">312 <circle cx="12" cy="12" r="3" fill="none" stroke="#596273" stroke-width="2"/>313 <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2" stroke="#596273" stroke-width="2" fill="none" stroke-linecap="round"/>314 </svg>315 </div>316 <div class="tool">317 <!-- translate G -->318 <span style="font-size:36px;color:#596273;font-weight:600">G</span>319 </div>320 <div class="tool">321 <!-- palette -->322 <svg width="48" height="48" viewBox="0 0 24 24">323 <path d="M12 3a9 9 0 1 0 0 18c3 0 3-3 1.5-3H11" fill="none" stroke="#596273" stroke-width="2"/>324 <circle cx="7.5" cy="10" r="1.3" fill="#596273"/>325 <circle cx="11" cy="8" r="1.3" fill="#596273"/>326 <circle cx="14.5" cy="10" r="1.3" fill="#596273"/>327 </svg>328 </div>329 <div class="tool">330 <!-- mic -->331 <svg width="40" height="40" viewBox="0 0 24 24">332 <rect x="9" y="5" width="6" height="10" rx="3" fill="none" stroke="#596273" stroke-width="2"/>333 <path d="M5 12a7 7 0 0 0 14 0M12 19v3" stroke="#596273" stroke-width="2" fill="none" stroke-linecap="round"/>334 </svg>335 </div>336 </div>337 338 <div class="keys-row row1">339 <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>340 </div>341 342 <div class="keys-row row2">343 <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>344 </div>345 346 <div class="keys-row row3">347 <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>348 <div class="backspace-btn">349 <svg width="48" height="48" viewBox="0 0 24 24">350 <path d="M3 12l5-5h11v10H8z" fill="none" stroke="#42464c" stroke-width="2"/>351 <path d="M12 10l4 4M16 10l-4 4" stroke="#42464c" stroke-width="2" stroke-linecap="round"/>352 </svg>353 </div>354 </div>355 356 <div class="keys-bottom">357 <div class="key special" style="width:150px"><span style="font-size:40px">?123</span></div>358 <div class="key special" style="width:120px">@</div>359 <div class="key special" style="width:120px">🙂</div>360 <div class="space"></div>361 <div class="key special" style="width:120px">.</div>362 <div class="enter-btn">363 <svg width="48" height="48" viewBox="0 0 24 24">364 <path d="M5 7v6h10l-3 3M15 10l-3-3" stroke="#42464c" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>365 </svg>366 </div>367 </div>368 </div>369 370 <div class="gesture-indicator"></div>371</div>372</body>373</html>