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 - Dark UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Roboto, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #1b1b1b;20 color: #eaeaea;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 96px;30 padding: 0 36px;31 box-sizing: border-box;32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #f5f5f5;36 font-size: 38px;37 letter-spacing: 0.5px;38 }39 .sb-right {40 display: flex;41 align-items: center;42 gap: 24px;43 }44 .sb-icon svg { width: 44px; height: 44px; fill: #f5f5f5; }45 46 /* App bar */47 .app-bar {48 position: absolute;49 top: 96px;50 left: 0;51 width: 1080px;52 height: 148px;53 display: flex;54 align-items: center;55 padding: 0 24px;56 box-sizing: border-box;57 border-bottom: 1px solid #2b2b2b;58 }59 .app-left, .app-right {60 display: flex;61 align-items: center;62 }63 .app-left { gap: 18px; }64 .app-title {65 font-size: 58px;66 font-weight: 500;67 color: #fafafa;68 }69 .icon-btn {70 width: 88px;71 height: 88px;72 display: flex;73 align-items: center;74 justify-content: center;75 }76 .icon-btn svg { width: 52px; height: 52px; fill: #eaeaea; }77 78 /* Content area */79 .content {80 position: absolute;81 top: 244px;82 left: 0;83 width: 1080px;84 height: 1230px;85 box-sizing: border-box;86 padding: 6px 32px 0 32px;87 }88 .field {89 display: flex;90 align-items: center;91 padding: 26px 0;92 font-size: 40px;93 border-bottom: 1px solid #2b2b2b;94 color: #dcdcdc;95 }96 .label {97 width: 140px;98 color: #bdbdbd;99 }100 .value {101 flex: 1;102 color: #eaeaea;103 overflow: hidden;104 text-overflow: ellipsis;105 white-space: nowrap;106 }107 .down-icon {108 width: 40px; height: 40px; margin-left: 12px;109 }110 .down-icon svg { width: 40px; height: 40px; fill: #bdbdbd; }111 112 .suggestion {113 display: flex;114 align-items: center;115 gap: 24px;116 padding: 26px 0;117 border-bottom: 1px solid #2b2b2b;118 }119 .avatar {120 width: 88px;121 height: 88px;122 border-radius: 50%;123 background: #E0E0E0;124 border: 1px solid #BDBDBD;125 display: flex;126 align-items: center;127 justify-content: center;128 color: #757575;129 font-size: 20px;130 text-align: center;131 line-height: 1.1;132 }133 .suggest-text {134 display: flex;135 flex-direction: column;136 gap: 8px;137 }138 .suggest-title { font-size: 42px; color: #f0f0f0; }139 .suggest-sub { font-size: 34px; color: #a8a8a8; }140 141 /* Empty message body spacer */142 .spacer {143 height: 850px; /* large empty area above keyboard */144 }145 146 /* Keyboard */147 .keyboard {148 position: absolute;149 left: 0;150 bottom: 120px;151 width: 1080px;152 height: 940px;153 background: #151515;154 border-top: 1px solid #2b2b2b;155 box-sizing: border-box;156 padding: 20px 20px 16px 20px;157 }158 .kb-toolbar {159 display: flex;160 align-items: center;161 gap: 28px;162 margin-bottom: 16px;163 }164 .kb-tool {165 width: 92px; height: 92px;166 background: #222;167 border-radius: 24px;168 display: flex; align-items: center; justify-content: center;169 }170 .kb-tool svg { width: 44px; height: 44px; fill: #e6e6e6; }171 172 .keyboard-row {173 display: flex;174 justify-content: center;175 gap: 12px;176 margin: 12px 0;177 padding: 0 16px;178 }179 .key {180 width: 90px; height: 120px;181 background: #2a2a2a;182 border-radius: 22px;183 color: #f5f5f5;184 font-size: 42px;185 display: flex; align-items: center; justify-content: center;186 }187 .key.wide { width: 140px; }188 .key.extra-wide { width: 520px; }189 .key.special { background: #342d2d; color: #f0e0e0; }190 .key svg { width: 42px; height: 42px; fill: #f5f5f5; }191 192 /* Bottom gesture pill */193 .gesture-pill {194 position: absolute;195 bottom: 36px;196 left: 50%;197 transform: translateX(-50%);198 width: 300px;199 height: 12px;200 background: #eaeaea;201 border-radius: 6px;202 opacity: 0.85;203 }204</style>205</head>206<body>207<div id="render-target">208 209 <!-- Status Bar -->210 <div class="status-bar">211 <div class="sb-left">8:28</div>212 <div class="sb-right">213 <div class="sb-icon">214 <!-- Signal -->215 <svg viewBox="0 0 24 24"><path d="M2 18h2v2H2v-2zm4-4h2v6H6v-6zm4-4h2v10h-2V10zm4-4h2v14h-2V6zm4-2h2v16h-2V4z"/></svg>216 </div>217 <div class="sb-icon">218 <!-- Wifi -->219 <svg viewBox="0 0 24 24"><path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zM2 9l2-2c8-6 16 0 16 0l2 2-4 4c-4-3-8-3-12 0L2 9zm5 5l2-2c3-2 6-2 9 0l2 2-3 3c-3-2-4-2-7 0l-3-3z"/></svg>220 </div>221 <div class="sb-icon">222 <!-- Battery -->223 <svg viewBox="0 0 24 24"><path d="M16 4h2v2h2v12h-2v2h-2V4zM2 6h12v12H2V6z"/></svg>224 </div>225 </div>226 </div>227 228 <!-- App Bar -->229 <div class="app-bar">230 <div class="app-left">231 <!-- Back Arrow -->232 <div class="icon-btn">233 <svg viewBox="0 0 24 24"><path d="M15.5 3.5L6 12l9.5 8.5L17 18l-6-6 6-6-1.5-2.5z"/></svg>234 </div>235 <div class="app-title">Compose</div>236 </div>237 <div class="app-right" style="margin-left:auto; gap:8px;">238 <!-- Attach -->239 <div class="icon-btn">240 <svg viewBox="0 0 24 24"><path d="M7 13.5l6.5-6.5a3.5 3.5 0 115 5L10 20a5 5 0 11-7-7l8-8 1.5 1.5-8 8a3.5 3.5 0 105 5l8.5-8.5"/></svg>241 </div>242 <!-- Send -->243 <div class="icon-btn">244 <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>245 </div>246 <!-- More -->247 <div class="icon-btn">248 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4zm0 10a2 2 0 110-4 2 2 0 010 4z"/></svg>249 </div>250 </div>251 </div>252 253 <!-- Content -->254 <div class="content">255 <div class="field">256 <div class="label">From</div>257 <div class="value">dbwscratch.test.id6@gmail.com</div>258 </div>259 260 <div class="field">261 <div class="label">To</div>262 <div class="value">dbwscratch.test.id_6@gmail.com</div>263 <div class="down-icon">264 <svg viewBox="0 0 24 24"><path d="M12 15l-6-6h12l-6 6z"/></svg>265 </div>266 </div>267 268 <div class="suggestion">269 <div class="avatar">[IMG: User Avatar]</div>270 <div class="suggest-text">271 <div class="suggest-title">Add recipient</div>272 <div class="suggest-sub">dbwscratch.test.id_6@gmail.com</div>273 </div>274 </div>275 276 <div class="spacer"></div>277 </div>278 279 <!-- Keyboard -->280 <div class="keyboard">281 <div class="kb-toolbar">282 <div class="kb-tool">283 <!-- apps grid -->284 <svg viewBox="0 0 24 24"><path d="M3 3h6v6H3V3zm12 0h6v6h-6V3zM3 15h6v6H3v-6zm12 0h6v6h-6v-6z"/></svg>285 </div>286 <div class="kb-tool">287 <!-- emoji -->288 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm-4 8a2 2 0 110-4 2 2 0 010 4zm8 0a2 2 0 110-4 2 2 0 010 4zm-8.5 6a7 7 0 0013 0H7.5z"/></svg>289 </div>290 <div class="kb-tool">291 <!-- GIF -->292 <svg viewBox="0 0 24 24"><path d="M3 7h8v10H3V7zm10 0h8v4h-8V7zm0 6h8v4h-8v-4z"/></svg>293 </div>294 <div class="kb-tool">295 <!-- translate -->296 <svg viewBox="0 0 24 24"><path d="M12 3h9v7h-9V3zM3 14h7v7H3v-7zm9-2h9v9h-9v-9z"/></svg>297 </div>298 <div class="kb-tool">299 <!-- settings -->300 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm8 4l2-2-2-2-2 2-2-2-2 2 2 2-2 2 2 2 2-2 2 2 2-2-2-2z"/></svg>301 </div>302 <div class="kb-tool">303 <!-- palette -->304 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 00-3 19c2 1 2-2 4-2h3a4 4 0 000-8h-1a10 10 0 00-3-9z"/></svg>305 </div>306 <div class="kb-tool">307 <!-- mic -->308 <svg viewBox="0 0 24 24"><path d="M12 2a3 3 0 013 3v6a3 3 0 11-6 0V5a3 3 0 013-3zm-5 9a5 5 0 0010 0h2a7 7 0 01-6 6.9V21h-2v-3.1A7 7 0 015 11h2z"/></svg>309 </div>310 </div>311 312 <div class="keyboard-row">313 <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>314 <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>315 </div>316 <div class="keyboard-row" style="padding-left:60px;">317 <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>318 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>319 </div>320 <div class="keyboard-row" style="padding-left:30px;">321 <div class="key special">322 <!-- shift -->323 <svg viewBox="0 0 24 24"><path d="M12 4l8 8h-5v8H9v-8H4l8-8z"/></svg>324 </div>325 <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>326 <div class="key">n</div><div class="key">m</div>327 <div class="key wide special">328 <!-- backspace -->329 <svg viewBox="0 0 24 24"><path d="M22 6v12H9L3 12l6-6h13zm-8 3l-3 3 3 3 1.5-1.5L14 12l1.5-1.5L14 9z"/></svg>330 </div>331 </div>332 <div class="keyboard-row" style="justify-content: space-between; padding: 0 24px;">333 <div class="key wide special">?123</div>334 <div class="key">,</div>335 <div class="key extra-wide">space</div>336 <div class="key">.</div>337 <div class="key wide special">338 <!-- enter -->339 <svg viewBox="0 0 24 24"><path d="M5 11h10V7l5 5-5 5v-4H5v-2z"/></svg>340 </div>341 </div>342 </div>343 344 <!-- Gesture pill -->345 <div class="gesture-pill"></div>346</div>347</body>348</html>