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 Mail UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #121212;15 font-family: Arial, Helvetica, sans-serif;16 color: #EDEDED;17 }18 19 /* Status bar */20 .status-bar {21 height: 72px;22 background: #0E0E0E;23 display: flex;24 align-items: center;25 padding: 0 32px;26 box-sizing: border-box;27 color: #FFFFFF;28 font-size: 30px;29 letter-spacing: 0.3px;30 }31 .status-bar .left { flex: 1; }32 .status-bar .right {33 display: flex;34 gap: 28px;35 align-items: center;36 }37 .status-icon {38 width: 34px;39 height: 34px;40 opacity: 0.9;41 }42 43 /* App bar */44 .app-bar {45 height: 148px;46 display: flex;47 align-items: center;48 padding: 0 24px;49 box-sizing: border-box;50 border-bottom: 1px solid #2A2A2A;51 }52 .app-bar .nav {53 width: 100px;54 display: flex;55 justify-content: center;56 align-items: center;57 }58 .app-bar .title {59 font-size: 44px;60 font-weight: 600;61 margin-left: 8px;62 }63 .app-bar .spacer { flex: 1; }64 .app-bar .actions {65 display: flex;66 gap: 26px;67 align-items: center;68 padding-right: 8px;69 }70 .icon {71 width: 56px;72 height: 56px;73 fill: none;74 stroke: #EDEDED;75 stroke-width: 3.5;76 }77 .icon.solid { fill: #EDEDED; stroke: none; }78 79 /* Fields */80 .fields {81 padding: 10px 24px 0;82 box-sizing: border-box;83 }84 .field {85 padding: 26px 0;86 border-bottom: 1px solid #2A2A2A;87 display: flex;88 align-items: center;89 gap: 20px;90 }91 .label {92 color: #A0A0A0;93 font-size: 30px;94 width: 110px;95 }96 .value {97 font-size: 32px;98 color: #EDEDED;99 flex: 1;100 }101 .chevron {102 width: 36px;103 height: 36px;104 stroke: #BDBDBD;105 stroke-width: 4;106 fill: none;107 }108 109 /* Email body */110 .email-body {111 padding: 32px 24px 24px;112 box-sizing: border-box;113 line-height: 1.5;114 font-size: 34px;115 color: #F5F5F5;116 }117 .email-body .section-title {118 font-size: 36px;119 font-weight: 600;120 margin-bottom: 20px;121 }122 .divider {123 color: #BDBDBD;124 margin: 12px 0 24px;125 font-family: "Courier New", monospace;126 font-size: 32px;127 }128 129 /* Keyboard mock */130 .keyboard {131 position: absolute;132 left: 0;133 bottom: 64px;134 width: 100%;135 height: 940px;136 background: #1A1A1A;137 border-top: 1px solid #2A2A2A;138 box-sizing: border-box;139 padding: 22px 24px 24px;140 }141 .kb-toolbar {142 height: 84px;143 display: flex;144 align-items: center;145 gap: 26px;146 }147 .kb-tool {148 width: 84px;149 height: 84px;150 background: #232323;151 border: 1px solid #3A3A3A;152 border-radius: 18px;153 display: flex;154 align-items: center;155 justify-content: center;156 color: #BDBDBD;157 font-size: 28px;158 }159 160 .kb-rows {161 margin-top: 8px;162 }163 .kb-row {164 display: grid;165 grid-template-columns: repeat(10, 1fr);166 gap: 16px;167 margin-bottom: 18px;168 }169 .kb-row.second { grid-template-columns: repeat(9, 1fr); }170 .kb-row.third { grid-template-columns: repeat(8, 1fr) 1.4fr; }171 .key {172 background: #2A2A2A;173 border: 1px solid #3C3C3C;174 border-radius: 22px;175 height: 120px;176 display: flex;177 align-items: center;178 justify-content: center;179 color: #FFFFFF;180 font-size: 40px;181 }182 .key.wide {183 grid-column: span 2;184 }185 186 .kb-bottom {187 display: grid;188 grid-template-columns: 1.2fr 1fr 4.2fr 1fr 1.2fr;189 gap: 16px;190 margin-top: 8px;191 align-items: center;192 }193 .circle-key {194 height: 120px;195 border-radius: 60px;196 background: #D0E6C4;197 border: 1px solid #8AA67B;198 color: #1A1A1A;199 font-size: 36px;200 display: flex;201 align-items: center;202 justify-content: center;203 }204 .spacebar {205 height: 120px;206 border-radius: 22px;207 background: #2A2A2A;208 border: 1px solid #3C3C3C;209 color: #BDBDBD;210 font-size: 32px;211 display: flex;212 align-items: center;213 justify-content: center;214 }215 .enter {216 height: 120px;217 border-radius: 60px;218 background: #B7E58E;219 border: 1px solid #84B862;220 color: #0E0E0E;221 font-size: 44px;222 display: flex;223 align-items: center;224 justify-content: center;225 font-weight: 700;226 }227 228 /* Gesture bar */229 .gesture-bar {230 position: absolute;231 bottom: 18px;232 left: 50%;233 transform: translateX(-50%);234 width: 260px;235 height: 10px;236 background: #FFFFFF;237 opacity: 0.9;238 border-radius: 8px;239 }240</style>241</head>242<body>243<div id="render-target">244 245 <!-- Status Bar -->246 <div class="status-bar">247 <div class="left">12:18</div>248 <div class="right">249 <!-- simple status icons -->250 <svg class="status-icon" viewBox="0 0 24 24">251 <circle cx="12" cy="12" r="10" stroke="#FFFFFF" stroke-width="2" fill="none"></circle>252 </svg>253 <svg class="status-icon" viewBox="0 0 24 24">254 <path d="M3 18h18M3 12h18M3 6h18" stroke="#FFFFFF" stroke-width="2" fill="none"></path>255 </svg>256 <svg class="status-icon" viewBox="0 0 24 24">257 <path d="M6 18h12V8l-6-4-6 4v10z" stroke="#FFFFFF" stroke-width="2" fill="none"></path>258 </svg>259 <span style="font-size:28px;">100%</span>260 </div>261 </div>262 263 <!-- App Bar -->264 <div class="app-bar">265 <div class="nav">266 <svg class="icon" viewBox="0 0 24 24">267 <path d="M15 6l-6 6 6 6" stroke="#EDEDED" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>268 </svg>269 </div>270 <div class="title">Compose</div>271 <div class="spacer"></div>272 <div class="actions">273 <!-- attach -->274 <svg class="icon" viewBox="0 0 24 24">275 <path d="M7 12l7-7a4 4 0 115 5l-8 8a6 6 0 11-8-8l9-9" stroke="#EDEDED" stroke-width="2.3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>276 </svg>277 <!-- send -->278 <svg class="icon solid" viewBox="0 0 24 24">279 <path d="M2 21l20-9-20-9 5 9-5 9zm5-9h9" fill="#EDEDED"></path>280 </svg>281 <!-- more -->282 <svg class="icon" viewBox="0 0 24 24">283 <circle cx="12" cy="5" r="2" fill="#EDEDED"></circle>284 <circle cx="12" cy="12" r="2" fill="#EDEDED"></circle>285 <circle cx="12" cy="19" r="2" fill="#EDEDED"></circle>286 </svg>287 </div>288 </div>289 290 <!-- Fields -->291 <div class="fields">292 <div class="field">293 <div class="label">From</div>294 <div class="value">dbwscratch.test.id10@gmail.com</div>295 </div>296 <div class="field">297 <div class="label">To</div>298 <div class="value" style="color:#808080;"> </div>299 <svg class="chevron" viewBox="0 0 24 24">300 <path d="M6 9l6 6 6-6" stroke="#BDBDBD" stroke-width="2.5" fill="none" stroke-linecap="round"></path>301 </svg>302 </div>303 <div class="field" style="border-bottom: 1px solid #2A2A2A;">304 <div class="label" style="width: 0;"></div>305 <div class="value" style="font-size: 36px;">GVB - Travel details</div>306 </div>307 </div>308 309 <!-- Email body -->310 <div class="email-body">311 <div class="section-title">Station Bijlmer ArenA Amsterdam ➔ Station RAI Amsterdam</div>312 <div class="divider">---------------------------------------------</div>313 314 <div>Metro 50 direction Isolatorweg</div>315 <div>Departure: Aug 16, 2023, 3:12 AM</div>316 <div>Arrival: Aug 16, 2023, 3:21 AM</div>317 318 <div style="height:24px;"></div>319 320 <div class="section-title">Station RAI Amsterdam ➔ Amstelpark</div>321 <div class="divider">---------------------------------------------</div>322 323 <div>Walk 14 min</div>324 <div>Departure: Aug 16, 2023, 3:21 AM</div>325 <div>Arrival: Aug 16, 2023, 3:35 AM</div>326 </div>327 328 <!-- Keyboard mock -->329 <div class="keyboard">330 <div class="kb-toolbar">331 <div class="kb-tool">▦</div>332 <div class="kb-tool">🙂</div>333 <div class="kb-tool">GIF</div>334 <div class="kb-tool">⚙</div>335 <div class="kb-tool">G⇄</div>336 <div style="flex:1;"></div>337 <div class="kb-tool">🎤</div>338 </div>339 340 <div class="kb-rows">341 <!-- Row 1 -->342 <div class="kb-row">343 <div class="key">q</div>344 <div class="key">w</div>345 <div class="key">e</div>346 <div class="key">r</div>347 <div class="key">t</div>348 <div class="key">y</div>349 <div class="key">u</div>350 <div class="key">i</div>351 <div class="key">o</div>352 <div class="key">p</div>353 </div>354 <!-- Row 2 -->355 <div class="kb-row second">356 <div class="key">a</div>357 <div class="key">s</div>358 <div class="key">d</div>359 <div class="key">f</div>360 <div class="key">g</div>361 <div class="key">h</div>362 <div class="key">j</div>363 <div class="key">k</div>364 <div class="key">l</div>365 </div>366 <!-- Row 3 -->367 <div class="kb-row third">368 <div class="key">z</div>369 <div class="key">x</div>370 <div class="key">c</div>371 <div class="key">v</div>372 <div class="key">b</div>373 <div class="key">n</div>374 <div class="key">m</div>375 <div class="key">⌫</div>376 </div>377 </div>378 379 <!-- Bottom controls -->380 <div class="kb-bottom">381 <div class="circle-key">?123</div>382 <div class="key">↑</div>383 <div class="spacebar">space</div>384 <div class="key">.</div>385 <div class="enter">↦</div>386 </div>387 </div>388 389 <!-- Gesture bar -->390 <div class="gesture-bar"></div>391 392</div>393</body>394</html>