GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Compose UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #111315;14 color: #EDEDED;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 84px;24 background: #111315;25 display: flex;26 align-items: center;27 padding: 0 32px;28 box-sizing: border-box;29 font-size: 40px;30 letter-spacing: 0.5px;31 }32 .status-icons {33 margin-left: 24px;34 display: flex;35 gap: 12px;36 align-items: center;37 }38 .status-dot {39 width: 24px; height: 24px; border-radius: 50%; background: #C7C7C7; opacity: 0.9;40 }41 .status-right {42 margin-left: auto;43 display: flex; gap: 18px; align-items: center;44 }45 .battery {46 width: 52px; height: 26px; border: 3px solid #C7C7C7; border-radius: 6px; position: relative;47 }48 .battery::after {49 content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 14px; background: #C7C7C7; border-radius: 2px;50 }51 .battery .fill { position: absolute; left: 3px; top: 3px; height: 16px; width: 34px; background: #C7C7C7; border-radius: 3px; }52 53 /* App header */54 .app-header {55 position: absolute;56 top: 84px;57 left: 0;58 width: 1080px;59 height: 140px;60 display: flex;61 align-items: center;62 padding: 0 28px;63 box-sizing: border-box;64 border-bottom: 1px solid #22272A;65 }66 .app-header .title {67 font-size: 56px;68 margin-left: 18px;69 font-weight: 600;70 }71 .header-actions {72 margin-left: auto;73 display: flex;74 gap: 28px;75 align-items: center;76 }77 .icon-btn {78 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;79 }80 .icon svg { fill: none; stroke: #EDEDED; stroke-width: 3; }81 82 /* Fields */83 .fields {84 position: absolute;85 top: 224px;86 left: 0;87 width: 1080px;88 padding: 8px 32px 0 32px;89 box-sizing: border-box;90 }91 .field-row {92 padding: 28px 0;93 border-bottom: 1px solid #23272A;94 display: flex;95 align-items: center;96 gap: 22px;97 }98 .label {99 color: #AAB0B6;100 font-size: 34px;101 width: 120px;102 }103 .value {104 font-size: 42px;105 line-height: 1.3;106 color: #EDEDED;107 flex: 1;108 white-space: nowrap;109 overflow: hidden;110 text-overflow: ellipsis;111 }112 .chevron {113 width: 42px; height: 42px;114 }115 116 /* Suggestion item */117 .suggestion {118 padding: 28px 0;119 display: flex; align-items: center;120 gap: 24px;121 border-bottom: 1px solid #23272A;122 }123 .img-placeholder {124 width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD;125 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 22px;126 border-radius: 12px;127 }128 .suggest-texts .primary {129 font-size: 46px; color: #EDEDED; font-weight: 600;130 }131 .suggest-texts .secondary {132 font-size: 34px; color: #AAB0B6;133 }134 135 /* Blank compose area */136 .compose-area {137 position: absolute;138 left: 0;139 top: 540px;140 width: 1080px;141 bottom: 960px; /* space above keyboard */142 padding: 24px 32px;143 box-sizing: border-box;144 }145 146 /* Keyboard */147 .keyboard {148 position: absolute;149 left: 0;150 bottom: 72px;151 width: 1080px;152 height: 900px;153 background: #0F1113;154 border-top: 1px solid #23272A;155 box-sizing: border-box;156 padding: 18px 18px 24px 18px;157 }158 .kb-toolbar {159 display: flex; align-items: center; gap: 28px; padding: 6px 8px 18px 8px;160 }161 .kb-tool {162 width: 72px; height: 72px; background: #1C2024; border-radius: 16px; display: flex; align-items: center; justify-content: center;163 }164 .kb-tool svg { stroke: #EDEDED; fill: none; stroke-width: 3; }165 166 .key-row {167 display: grid;168 grid-template-columns: repeat(10, 1fr);169 gap: 12px;170 margin-bottom: 18px;171 padding: 0 4px;172 }173 .key {174 height: 120px;175 background: #1C2024;176 border-radius: 22px;177 color: #EDEDED;178 font-size: 46px;179 display: flex; align-items: center; justify-content: center;180 }181 .key.small { font-size: 40px; }182 .key.wide {183 grid-column: span(2);184 }185 .key.space {186 grid-column: span(5);187 font-size: 38px;188 color: #B8BDC3;189 }190 .key.special {191 background: #28343A;192 color: #C9F0E9;193 }194 .key.accent {195 background: #2EC9B3;196 color: #0D1315;197 font-weight: 700;198 }199 .row-3 {200 grid-template-columns: 1.5fr repeat(7, 1fr) 2fr;201 }202 203 /* Gesture bar */204 .gesture {205 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);206 width: 420px; height: 10px; background: #EDEDED; opacity: 0.8; border-radius: 10px;207 }208</style>209</head>210<body>211<div id="render-target">212 213 <!-- Status Bar -->214 <div class="status-bar">215 <div>6:12</div>216 <div class="status-icons">217 <div class="status-dot"></div>218 <div class="status-dot"></div>219 <div class="status-dot"></div>220 <div class="status-dot"></div>221 <div class="status-dot"></div>222 <div class="status-dot"></div>223 <div class="status-dot"></div>224 </div>225 <div class="status-right">226 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#C7C7C7" fill="none" stroke-width="2"/></svg>227 <div class="battery"><div class="fill"></div></div>228 </div>229 </div>230 231 <!-- App Header -->232 <div class="app-header">233 <div class="icon-btn icon">234 <svg width="64" height="64" viewBox="0 0 24 24">235 <path d="M15 6 L9 12 L15 18" />236 </svg>237 </div>238 <div class="title">Compose</div>239 <div class="header-actions">240 <div class="icon-btn icon">241 <!-- Paperclip -->242 <svg width="64" height="64" viewBox="0 0 24 24">243 <path d="M7 13 l6 -6 a3 3 0 1 1 4 4 l-8 8 a5 5 0 0 1 -7 -7 l6 -6" />244 </svg>245 </div>246 <div class="icon-btn icon">247 <!-- Send -->248 <svg width="64" height="64" viewBox="0 0 24 24">249 <path d="M2 12 L22 3 L16 21 L13 14 L2 12 Z" />250 </svg>251 </div>252 <div class="icon-btn icon">253 <!-- Menu (vertical dots) -->254 <svg width="64" height="64" viewBox="0 0 24 24">255 <circle cx="12" cy="5" r="2" stroke="#EDEDED"/>256 <circle cx="12" cy="12" r="2" stroke="#EDEDED"/>257 <circle cx="12" cy="19" r="2" stroke="#EDEDED"/>258 </svg>259 </div>260 </div>261 </div>262 263 <!-- Fields -->264 <div class="fields">265 <div class="field-row">266 <div class="label">From</div>267 <div class="value">maria.rossi199309@gmail.com</div>268 <div class="chevron icon">269 <svg width="42" height="42" viewBox="0 0 24 24">270 <path d="M6 9 L12 15 L18 9" />271 </svg>272 </div>273 </div>274 275 <div class="field-row">276 <div class="label">To</div>277 <div class="value">janedbwpersonaltest@gmail.com</div>278 <div class="chevron icon">279 <svg width="42" height="42" viewBox="0 0 24 24">280 <path d="M6 9 L12 15 L18 9" />281 </svg>282 </div>283 </div>284 285 <div class="suggestion">286 <div class="img-placeholder">[IMG: User Avatar]</div>287 <div class="suggest-texts">288 <div class="primary">janedbwpersonaltest@gmail.com</div>289 <div class="secondary">janedbwpersonaltest@gmail.com</div>290 </div>291 </div>292 </div>293 294 <!-- Compose Body Area (empty for now) -->295 <div class="compose-area">296 <!-- Intentionally left empty as in screenshot -->297 </div>298 299 <!-- Keyboard -->300 <div class="keyboard">301 <div class="kb-toolbar">302 <div class="kb-tool icon">303 <svg width="40" height="40" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>304 </div>305 <div class="kb-tool icon">306 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 15 c3 0 5 -2 5 -5 s-2 -5 -5 -5 s-5 2 -5 5 s2 5 5 5z"/><path d="M12 15 v5"/></svg>307 </div>308 <div class="kb-tool" style="color:#EDEDED;font-weight:700; font-size:30px;">GIF</div>309 <div class="kb-tool icon">310 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 12 h18 M12 3 v18"/></svg>311 </div>312 <div class="kb-tool icon">313 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 8 v4 l3 2"/></svg>314 </div>315 <div class="kb-tool icon">316 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12 h18 M12 3 v18"/></svg>317 </div>318 <div class="kb-tool icon" style="margin-left:auto;">319 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 4 a4 4 0 0 1 4 4 v6 a4 4 0 0 1 -8 0 V8 a4 4 0 0 1 4 -4z"/></svg>320 </div>321 </div>322 323 <div class="key-row">324 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>325 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>326 <div class="key">o</div><div class="key">p</div>327 </div>328 329 <div class="key-row">330 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>331 <div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div>332 <div class="key">l</div><div class="key small">;</div>333 </div>334 335 <div class="key-row row-3">336 <div class="key small">⇧</div>337 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>338 <div class="key">b</div><div class="key">n</div><div class="key">m</div>339 <div class="key small">⌫</div>340 </div>341 342 <div class="key-row">343 <div class="key wide special">?123</div>344 <div class="key">@</div>345 <div class="key">☺</div>346 <div class="key space">space</div>347 <div class="key">.</div>348 <div class="key wide accent">↵</div>349 </div>350 </div>351 352 <div class="gesture"></div>353</div>354</body>355</html>