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>Compose Email UI - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #1b1612;15 color: #eadbcf;16 }17 18 /* Status bar */19 .status-bar {20 height: 90px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #e7d6c6;26 font-size: 34px;27 letter-spacing: 1px;28 }29 .status-right {30 display: flex;31 align-items: center;32 gap: 22px;33 }34 .icon { width: 44px; height: 44px; fill: #e7d6c6; }35 36 /* App bar */37 .app-bar {38 height: 120px;39 display: flex;40 align-items: center;41 padding: 0 24px;42 border-bottom: 1px solid #332a24;43 }44 .app-left, .app-right {45 display: flex;46 align-items: center;47 }48 .app-left { flex: 1; gap: 18px; }49 .app-right { gap: 32px; }50 .back-icon { width: 56px; height: 56px; }51 52 /* Fields */53 .content {54 padding: 18px 36px 0 36px;55 }56 .row {57 display: flex;58 align-items: center;59 padding: 22px 6px;60 border-bottom: 1px solid #332a24;61 gap: 24px;62 }63 .label {64 min-width: 120px;65 color: #b8a99a;66 font-size: 28px;67 }68 .value {69 font-size: 36px;70 color: #f0e2d6;71 flex: 1;72 }73 .caret {74 width: 28px; height: 28px; fill: #b8a99a;75 }76 77 /* Suggestion */78 .suggestion {79 display: flex;80 align-items: center;81 gap: 28px;82 padding: 28px 6px;83 }84 .avatar {85 width: 96px;86 height: 96px;87 border-radius: 50%;88 background: #5fb76a;89 color: #e9f5ec;90 display: flex;91 align-items: center;92 justify-content: center;93 font-size: 54px;94 font-weight: 600;95 }96 .sugg-text .primary {97 font-size: 40px;98 color: #f1e5d9;99 }100 .sugg-text .secondary {101 font-size: 28px;102 color: #b39f8e;103 margin-top: 6px;104 }105 106 /* Keyboard mock */107 .keyboard {108 position: absolute;109 left: 0; right: 0; bottom: 0;110 height: 820px;111 background: #211b16;112 border-top: 1px solid #342b25;113 box-shadow: 0 -8px 24px rgba(0,0,0,0.3) inset;114 padding: 14px 18px 24px;115 }116 .kb-tools {117 height: 88px;118 display: flex;119 align-items: center;120 gap: 26px;121 padding: 0 8px 10px;122 }123 .tool {124 width: 72px; height: 72px;125 border-radius: 18px;126 background: #2b231e;127 display: flex; align-items: center; justify-content: center;128 }129 .tool svg { width: 38px; height: 38px; fill: #d7c1ae; }130 131 .keys {132 display: grid;133 grid-template-rows: repeat(4, 1fr);134 row-gap: 16px;135 height: calc(100% - 98px);136 padding: 0 6px;137 }138 .row-keys {139 display: grid;140 column-gap: 12px;141 grid-auto-flow: column;142 align-items: center;143 }144 .row-1 { grid-template-columns: repeat(10, 1fr); }145 .row-2 { grid-template-columns: repeat(9, 1fr); padding: 0 40px; }146 .row-3 { grid-template-columns: 1.3fr repeat(7, 1fr) 1.3fr; }147 .row-4 { grid-template-columns: 1.6fr 1fr 1fr 5fr 1fr 1fr 1.6fr; }148 149 .key {150 height: 120px;151 background: #2b241f;152 border-radius: 22px;153 display: flex; align-items: center; justify-content: center;154 color: #e7d6c6;155 font-size: 44px;156 box-shadow: 0 2px 0 rgba(0,0,0,0.3) inset;157 }158 .key.alt {159 background: #eac6a6;160 color: #2b241f;161 font-weight: 600;162 }163 .key.enter {164 background: #edc6a9;165 color: #2b241f;166 font-weight: 700;167 }168 169 /* Home indicator */170 .home-indicator {171 position: absolute;172 bottom: 8px; left: 50%;173 width: 300px; height: 10px;174 transform: translateX(-50%);175 background: #ddd;176 border-radius: 6px;177 opacity: .85;178 }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Status bar -->185 <div class="status-bar">186 <div class="status-left">11:13</div>187 <div class="status-right">188 <!-- Simple cellular/wifi/battery -->189 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">190 <path d="M2 18h3v4H2v-4zm5-6h3v10H7V12zm5-4h3v14h-3V8zm5-6h3v20h-3V2z"/>191 </svg>192 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">193 <path d="M12 3C7 3 2.73 5.11 0 8.27L12 21 24 8.27C21.27 5.11 17 3 12 3z"/>194 </svg>195 <svg class="icon" viewBox="0 0 28 20" aria-hidden="true">196 <rect x="1" y="2" width="22" height="16" rx="3" ry="3" fill="none" stroke="#e7d6c6" stroke-width="2"/>197 <rect x="3" y="4" width="16" height="12" rx="2" ry="2" fill="#e7d6c6"/>198 <rect x="25" y="6" width="2" height="8" rx="1" ry="1" fill="#e7d6c6"/>199 </svg>200 </div>201 </div>202 203 <!-- App bar -->204 <div class="app-bar">205 <div class="app-left">206 <svg class="back-icon" viewBox="0 0 48 48" aria-hidden="true">207 <path d="M30 8 16 24l14 16" stroke="#e7d6c6" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>208 </svg>209 </div>210 <div class="app-right" style="margin-left:auto;">211 <!-- Attach -->212 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">213 <path d="M7 13.5V6.8C7 4.7 8.7 3 10.8 3s3.8 1.7 3.8 3.8v8.9c0 2-1.6 3.7-3.6 3.7s-3.6-1.6-3.6-3.6V9.5" fill="none" stroke="#e7d6c6" stroke-width="2.2" stroke-linecap="round"/>214 </svg>215 <!-- Send -->216 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">217 <path d="M2 21 23 12 2 3l4 8-4 8z" fill="#e7d6c6"/>218 </svg>219 <!-- Kebab -->220 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">221 <circle cx="12" cy="5" r="2.2"></circle>222 <circle cx="12" cy="12" r="2.2"></circle>223 <circle cx="12" cy="19" r="2.2"></circle>224 </svg>225 </div>226 </div>227 228 <!-- Fields -->229 <div class="content">230 <div class="row">231 <div class="label">From</div>232 <div class="value">naomirousseau5@gmail.com</div>233 <svg class="caret" viewBox="0 0 24 24" aria-hidden="true">234 <path d="M6 9l6 6 6-6" fill="#b8a99a"/>235 </svg>236 </div>237 238 <div class="row">239 <div class="label">To</div>240 <div class="value">karin.iversen@example.com</div>241 <svg class="caret" viewBox="0 0 24 24" aria-hidden="true">242 <path d="M6 9l6 6 6-6" fill="#b8a99a"/>243 </svg>244 </div>245 246 <div class="suggestion">247 <div class="avatar">k</div>248 <div class="sugg-text">249 <div class="primary">karin.iversen@example.com</div>250 <div class="secondary">karin.iversen@example.com</div>251 </div>252 </div>253 </div>254 255 <!-- Keyboard mock -->256 <div class="keyboard">257 <div class="kb-tools">258 <div class="tool">259 <svg viewBox="0 0 24 24"><path d="M12 2C7.6 2 4 5.6 4 10s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 3a3 3 0 0 1 0 6 3 3 0 0 1 0-6zm0 13c-2.7 0-5.1-1.4-6.4-3.6.1-2.1 4.3-3.2 6.4-3.2s6.3 1.1 6.4 3.2C17.1 16.6 14.7 18 12 18z"/></svg>260 </div>261 <div class="tool"><svg viewBox="0 0 24 24"><path d="M3 12h18v2H3zm0-6h18v2H3zm0 12h12v2H3z"/></svg></div>262 <div class="tool"><svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm8-5h-2l-2 3h-8L6 3H4l2.2 3.3A6.98 6.98 0 0 0 5 12c0 3.9 3.1 7 7 7s7-3.1 7-7c0-2.1-.9-4-2.2-5.3L20 3z"/></svg></div>263 <div class="tool"><svg viewBox="0 0 24 24"><path d="M3 4h18v4H3zm0 6h12v4H3zm0 6h18v4H3z"/></svg></div>264 <div class="tool"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg></div>265 <div class="tool"><svg viewBox="0 0 24 24"><path d="M12 3a4 4 0 0 0-4 4v5a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4zm-1 16h2v2h-2z"/></svg></div>266 </div>267 268 <div class="keys">269 <div class="row-keys row-1">270 <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>271 <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>272 </div>273 <div class="row-keys row-2">274 <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>275 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>276 </div>277 <div class="row-keys row-3">278 <div class="key alt">⇧</div>279 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>280 <div class="key">b</div><div class="key">n</div><div class="key">m</div>281 <div class="key"><svg width="44" height="44" viewBox="0 0 24 24" fill="#e7d6c6"><path d="M5 4h14v2H5zm0 7h14v2H5zm0 7h14v2H5z"/></svg></div>282 </div>283 <div class="row-keys row-4">284 <div class="key alt">?123</div>285 <div class="key">@</div>286 <div class="key">☺</div>287 <div class="key">space</div>288 <div class="key">.</div>289 <div class="key"><svg width="36" height="36" viewBox="0 0 24 24" fill="#e7d6c6"><path d="M4 4h16v16H4z"/></svg></div>290 <div class="key enter">↵</div>291 </div>292 </div>293 </div>294 295 <div class="home-indicator"></div>296</div>297</body>298</html>