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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 /* Root screen */10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #1E1B22; /* dark, Gmail-like */16 color: #EDE7F6;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 right: 0;25 height: 84px;26 padding: 0 28px;27 box-sizing: border-box;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #E0E0E0;32 font-size: 36px;33 letter-spacing: 1px;34 }35 .status-icons {36 display: flex;37 align-items: center;38 gap: 18px;39 }40 .icon-small {41 width: 36px;42 height: 36px;43 fill: #E0E0E0;44 opacity: 0.9;45 }46 47 /* App bar */48 .app-bar {49 position: absolute;50 top: 84px;51 left: 0;52 right: 0;53 height: 120px;54 display: flex;55 align-items: center;56 padding: 0 20px;57 box-sizing: border-box;58 }59 .app-bar .left,60 .app-bar .right {61 display: flex;62 align-items: center;63 }64 .app-bar .left { gap: 10px; }65 .app-bar .right { margin-left: auto; gap: 24px; }66 .app-title {67 font-size: 48px;68 color: #F5F5F5;69 margin-left: 8px;70 }71 .icon-btn {72 width: 72px;73 height: 72px;74 display: inline-flex;75 align-items: center;76 justify-content: center;77 border-radius: 36px;78 color: #F5F5F5;79 }80 .icon-btn svg { width: 42px; height: 42px; fill: #F5F5F5; }81 82 /* Content area */83 .content {84 position: absolute;85 top: 84px; /* start at status bar bottom */86 left: 0;87 right: 0;88 bottom: 920px; /* leave space for keyboard + toolbar + gesture */89 padding-top: 120px; /* account for app bar */90 overflow: hidden;91 }92 .fields {93 padding: 0 28px;94 }95 .field-row {96 padding: 28px 0;97 border-top: 1px solid #343138;98 display: flex;99 align-items: center;100 min-height: 96px;101 }102 .field-row:first-child { border-top: none; }103 .label {104 width: 120px;105 font-size: 34px;106 color: #BDB5C7;107 }108 .value {109 flex: 1;110 font-size: 38px;111 color: #EDE7F6;112 }113 .caret {114 width: 28px;115 height: 28px;116 margin-left: 8px;117 opacity: 0.8;118 }119 .subject-row .value { color: #EDE7F6; }120 .divider {121 height: 1px;122 background: #343138;123 margin: 8px 0 0 0;124 }125 .body-area {126 margin: 22px 28px 0 28px;127 padding-top: 24px;128 border-top: 1px solid #343138;129 color: #E0DCE7;130 font-size: 38px;131 line-height: 58px;132 word-break: break-word;133 }134 135 /* Keyboard accessory row */136 .kb-toolbar {137 position: absolute;138 left: 0;139 right: 0;140 bottom: 820px;141 height: 88px;142 border-top: 1px solid #2F2B34;143 background: #1E1B22;144 display: flex;145 align-items: center;146 padding: 0 16px;147 gap: 22px;148 color: #D1C4E9;149 }150 .pill-btn {151 width: 84px;152 height: 84px;153 border-radius: 42px;154 background: #D1C4E9;155 color: #2B2137;156 display: flex;157 align-items: center;158 justify-content: center;159 }160 .kb-icon {161 width: 48px;162 height: 48px;163 fill: #C7B8EA;164 }165 .kb-toolbar .spacer { flex: 1; }166 167 /* Keyboard */168 .keyboard {169 position: absolute;170 left: 0;171 right: 0;172 bottom: 54px;173 height: 766px;174 background: #1F1A24;175 border-top: 1px solid #2D2733;176 padding: 16px 18px 22px 18px;177 box-sizing: border-box;178 }179 .key-row {180 display: flex;181 gap: 14px;182 margin-bottom: 18px;183 justify-content: space-between;184 }185 .key {186 flex: 1;187 height: 120px;188 background: #332B3B;189 color: #EDE7F6;190 display: flex;191 align-items: center;192 justify-content: center;193 border-radius: 22px;194 font-size: 46px;195 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);196 }197 .key.small {198 flex: 0.9;199 }200 .key.wide {201 flex: 1.3;202 }203 .key.extra-wide {204 flex: 3.4;205 }206 .key.func {207 background: #3B3343;208 color: #E9DDF7;209 font-size: 38px;210 }211 .key.icon svg { width: 46px; height: 46px; fill: #EEE5FF; }212 213 /* Gesture bar */214 .gesture {215 position: absolute;216 bottom: 18px;217 left: 50%;218 transform: translateX(-50%);219 width: 320px;220 height: 10px;221 background: #E0E0E0;222 border-radius: 6px;223 opacity: 0.9;224 }225</style>226</head>227<body>228<div id="render-target">229 <!-- Status Bar -->230 <div class="status-bar">231 <div class="status-time">8:27</div>232 <div class="status-icons">233 <!-- Simple status icons -->234 <svg class="icon-small" viewBox="0 0 24 24"><path d="M2 12l8 8V4z"/></svg>235 <svg class="icon-small" viewBox="0 0 24 24"><path d="M4 12h16l-8 8z"/></svg>236 <svg class="icon-small" viewBox="0 0 24 24"><path d="M17 7H7v10h10V7zm2-2v14H5V5h14z"/></svg>237 <svg class="icon-small" viewBox="0 0 24 24"><path d="M17 4h-3V2h-4v2H7C5.9 4 5 4.9 5 6v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H7V8h10v10z"/></svg>238 </div>239 </div>240 241 <!-- App Bar -->242 <div class="app-bar">243 <div class="left">244 <div class="icon-btn">245 <svg viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>246 </div>247 <div class="app-title">Compose</div>248 </div>249 <div class="right">250 <div class="icon-btn" title="Attach">251 <svg viewBox="0 0 24 24"><path d="M16.5 6.5v7a4.5 4.5 0 1 1-9 0V5a3 3 0 1 1 6 0v7a1.5 1.5 0 1 1-3 0V6.5h-2V12a3.5 3.5 0 1 0 7 0V5a5 5 0 1 0-10 0v8.5a6.5 6.5 0 1 0 13 0v-7h-2z"/></svg>252 </div>253 <div class="icon-btn" title="Send">254 <svg viewBox="0 0 24 24"><path d="M2 21 23 12 2 3v7l15 2-15 2z"/></svg>255 </div>256 <div class="icon-btn" title="More">257 <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>258 </div>259 </div>260 </div>261 262 <!-- Content -->263 <div class="content">264 <div class="fields">265 <div class="field-row">266 <div class="label">From</div>267 <div class="value">dbwscratch.test.id4@gmail.com</div>268 </div>269 <div class="field-row">270 <div class="label">To</div>271 <div class="value" style="color:#8F8899;"> </div>272 <svg class="caret" viewBox="0 0 24 24"><path fill="#BDB5C7" d="M7 10l5 5 5-5z"/></svg>273 </div>274 <div class="field-row subject-row">275 <div class="label" style="visibility:hidden;">Sub</div>276 <div class="value">Look at this on eBay</div>277 </div>278 <div class="body-area">279 https://www.ebay.com/itm/iPhone-14-Pro-Max-Unlocked-128GB-Black-Excellent-/275550774521?mkcid=16&mkevt=1&_trksid=p4429486.m46890.l6249&mkrid=711-127632-2357-0280 </div>281 </div>282 </div>283 284 <!-- Keyboard accessory row -->285 <div class="kb-toolbar">286 <div class="pill-btn">287 <svg viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>288 </div>289 <svg class="kb-icon" viewBox="0 0 24 24" title="Settings"><path d="M19.14 12.94a7.48 7.48 0 0 0 .05-.94c0-.32-.02-.63-.05-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.42 7.42 0 0 0-1.63-.94l-.36-2.55A.5.5 0 0 0 13 1h-4a.5.5 0 0 0-.49.42l-.36 2.55c-.58.22-1.13.52-1.63.94l-2.39-.96a.5.5 0 0 0-.6.22L1.1 7.99a.5.5 0 0 0 .12.64l2.03 1.58c-.03.31-.05.62-.05.94s.02.63.05.94L1.22 14.67a.5.5 0 0 0-.12.64l1.92 3.32c.13.22.4.31.62.22l2.39-.96c.5.42 1.05.72 1.63.94l.36 2.55c.04.24.25.42.49.42h4c.24 0 .45-.18.49-.42l.36-2.55c.58-.22 1.13-.52 1.63-.94l2.39.96c.22.09.49 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58zM11 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>290 <svg class="kb-icon" viewBox="0 0 24 24" title="Translate"><path d="M4 4h9v2H6v4H4zm11 0h5v2h-2v12h-2zm-2 5H7v2h3v7h2z"/></svg>291 <svg class="kb-icon" viewBox="0 0 24 24" title="Theme"><path d="M9 2a7 7 0 1 0 7 7c0-3.87-3.13-7-7-7zm0 12a5 5 0 1 1 0-10v10z"/></svg>292 <svg class="kb-icon" viewBox="0 0 24 24" title="Clipboard"><path d="M16 2H8l-2 2H3v16h18V4h-3l-2-2zM12 4c.55 0 1 .45 1 1h-2c0-.55.45-1 1-1zm6 16H6V6h12v14z"/></svg>293 <svg class="kb-icon" viewBox="0 0 24 24" title="More"><path d="M6 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>294 <svg class="kb-icon" viewBox="0 0 24 24" title="Mic Off"><path d="M12 14a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3zm5.3 1.9 1.4 1.4A8.97 8.97 0 0 0 21 12h-2c0 1.61-.49 3.11-1.33 4.34zM3 4.27 4.28 3 21 19.72 19.72 21l-3.2-3.2A8.92 8.92 0 0 1 12 21a9 9 0 0 1-9-9h2a7 7 0 0 0 7 7c1.46 0 2.82-.44 3.94-1.2L3 4.27z"/></svg>295 <div class="spacer"></div>296 </div>297 298 <!-- Keyboard -->299 <div class="keyboard">300 <div class="key-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 <div class="key-row">313 <div class="key small">a</div>314 <div class="key">s</div>315 <div class="key">d</div>316 <div class="key">f</div>317 <div class="key">g</div>318 <div class="key">h</div>319 <div class="key">j</div>320 <div class="key">k</div>321 <div class="key small">l</div>322 </div>323 <div class="key-row">324 <div class="key wide func icon">325 <svg viewBox="0 0 24 24"><path d="M6 12l6-6v4h6v4h-6v4z"/></svg>326 </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 wide func icon" title="Backspace">335 <svg viewBox="0 0 24 24"><path d="M22 6H9L3 12l6 6h13V6zm-3.41 9.59L17.17 12l1.42-1.41L20 12l-1.41 1.59z"/></svg>336 </div>337 </div>338 <div class="key-row">339 <div class="key func wide">?123</div>340 <div class="key func">@</div>341 <div class="key func">☺</div>342 <div class="key extra-wide">space</div>343 <div class="key func">.</div>344 <div class="key func wide icon" title="Enter">345 <svg viewBox="0 0 24 24"><path d="M19 7v6H8l3.5-3.5L10 8l-6 6 6 6 1.5-1.5L8 15h13V7z"/></svg>346 </div>347 </div>348 </div>349 350 <!-- Gesture bar -->351 <div class="gesture"></div>352</div>353</body>354</html>