GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mail - Dark UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #1f1a16; /* deep brown/black */15 color: #e8e0d5;16 font-family: Arial, Helvetica, sans-serif;17 }18 19 /* Status bar */20 .status {21 height: 88px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #e8e0d5;27 font-size: 38px;28 }29 .status-icons {30 display: flex;31 align-items: center;32 gap: 22px;33 }34 .dot { width: 10px; height: 10px; background:#cfc5b6; border-radius:50%; display:inline-block; }35 .wifi, .battery, .lock {36 width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;37 }38 .wifi svg, .battery svg, .lock svg { fill:#cfc5b6; }39 40 /* Search bar area */41 .search-row {42 padding: 18px 28px 24px 28px;43 }44 .search-box {45 background: #3a332b;46 height: 120px;47 border-radius: 60px;48 display: flex;49 align-items: center;50 padding: 0 28px;51 box-shadow: inset 0 0 0 1px #2b241f;52 }53 .menu-btn {54 width: 80px; height: 80px; border-radius: 12px; display: flex; align-items:center; justify-content:center;55 margin-right: 20px;56 }57 .menu-btn svg { fill:#cfc5b6; }58 .search-placeholder {59 flex: 1;60 color: #cfc5b6;61 font-size: 42px;62 }63 .avatar-circle {64 width: 84px; height: 84px; border-radius: 50%;65 background: #1e88e5;66 color: #fff;67 display: flex; align-items: center; justify-content: center;68 font-weight: bold; font-size: 44px;69 }70 71 /* Section header and tip */72 .section-header {73 padding: 12px 36px;74 font-size: 40px;75 color: #cfc5b6;76 }77 .tip-banner {78 display: flex;79 align-items: center;80 justify-content: space-between;81 padding: 26px 36px;82 font-size: 38px;83 color: #cfc5b6;84 }85 .tip-left { display: flex; align-items: center; gap: 22px; }86 .hand-icon {87 width: 42px; height: 42px;88 display: inline-flex; align-items: center; justify-content: center;89 }90 .hand-icon svg { fill: #d2a64a; }91 .dismiss { color: #d2a64a; }92 93 .divider { height: 2px; background: #2b241f; }94 95 /* Email list */96 .email-item {97 display: flex;98 align-items: flex-start;99 gap: 28px;100 padding: 32px 36px;101 border-bottom: 1px solid #2b241f;102 }103 .avatar {104 width: 100px; height: 100px; border-radius: 50%;105 flex: 0 0 100px;106 display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 48px;107 color: #1f1a16;108 }109 .avatar.yellow { background:#f2c300; }110 .avatar.gray { background:#6d6d6d; color:#1f1a16; }111 .content {112 flex: 1;113 min-width: 0;114 }115 .line1 {116 font-size: 44px;117 color: #e8e0d5;118 }119 .line1 .bold { font-weight: bold; }120 .subject {121 margin-top: 6px;122 font-size: 44px;123 font-weight: bold;124 color: #e8e0d5;125 }126 .snippet {127 margin-top: 6px;128 font-size: 40px;129 color: #b9ad9e;130 }131 .meta {132 width: 220px;133 text-align: right;134 font-size: 36px;135 color: #cfc5b6;136 display: flex;137 flex-direction: column;138 align-items: flex-end;139 gap: 16px;140 }141 .star { width: 52px; height: 52px; }142 .star svg { fill:#cfc5b6; }143 144 .pill {145 display: inline-flex; align-items: center; gap: 16px;146 padding: 18px 22px;147 border-radius: 36px;148 border: 1px solid #4a4036;149 background: #332c24;150 color: #cfc5b6;151 font-size: 36px;152 margin-top: 16px;153 }154 .label-red {155 background:#d84a3a; color:#fff; padding: 6px 12px; border-radius: 16px; font-size: 32px;156 }157 158 /* Promotions row special icon */159 .tag-icon {160 width: 100px; height: 100px; border-radius: 24px;161 border: 2px solid #59cf88;162 color: #59cf88;163 display: flex; align-items: center; justify-content: center;164 flex: 0 0 100px;165 }166 .tag-icon svg { stroke:#59cf88; fill:none; stroke-width:6; }167 168 .green-pill {169 background:#4cc58a; color:#0b301e; border: none;170 padding: 16px 24px; border-radius: 28px; font-weight: bold; font-size: 34px;171 }172 173 /* Compose FAB */174 .compose {175 position: absolute;176 right: 48px;177 bottom: 330px;178 background: #6e5a40;179 color: #f3e9dc;180 border-radius: 34px;181 height: 120px;182 width: 360px;183 display: flex; align-items: center; gap: 26px; padding: 0 28px;184 box-shadow: 0 8px 20px rgba(0,0,0,0.35);185 z-index: 3;186 }187 .compose .pencil {188 width: 64px; height: 64px;189 }190 .compose .pencil svg { fill:#f3e9dc; }191 192 /* Bottom navigation */193 .bottom-bar {194 position: absolute;195 bottom: 0;196 left: 0;197 width: 1080px;198 height: 200px;199 background: #29221c;200 display: flex; align-items: center; justify-content: space-between;201 padding: 0 80px;202 }203 .nav-icon { width: 110px; height: 110px; border-radius: 36px; background:#3a332b; display:flex; align-items:center; justify-content:center; position: relative; }204 .nav-icon svg { fill:#e8e0d5; }205 .badge {206 position: absolute; top: -8px; left: -10px;207 background: #e7b8b8; color: #841a1a;208 border-radius: 30px; padding: 8px 16px; font-size: 32px; font-weight: bold;209 }210 .handle {211 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);212 width: 280px; height: 12px; background: #b9ad9e; border-radius: 8px; opacity: 0.7;213 }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status bar -->220 <div class="status">221 <div>10:02</div>222 <div class="status-icons">223 <span class="lock">224 <svg viewBox="0 0 24 24"><path d="M12 2a4 4 0 0 1 4 4v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h2V6a4 4 0 0 1 4-4Zm-2 8h8v8H8v-8h2Z"/></svg>225 </span>226 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>227 <span class="wifi">228 <svg viewBox="0 0 24 24"><path d="M12 18l2 2-2 2-2-2 2-2Zm-6-6 2 2a6 6 0 0 1 8 0l2-2a10 10 0 0 0-12 0Zm-4-4 2 2a12 12 0 0 1 16 0l2-2a16 16 0 0 0-20 0Z"/></svg>229 </span>230 <span class="battery">231 <svg viewBox="0 0 24 24"><path d="M2 8a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8Zm18 3h2v4h-2v-4Z"/></svg>232 </span>233 </div>234 </div>235 236 <!-- Search -->237 <div class="search-row">238 <div class="search-box">239 <div class="menu-btn">240 <svg viewBox="0 0 24 24" width="64" height="64"><path d="M3 6h18v2H3V6Zm0 5h18v2H3v-2Zm0 5h18v2H3v-2Z"/></svg>241 </div>242 <div class="search-placeholder">Search in mail</div>243 <div class="avatar-circle">C</div>244 </div>245 </div>246 247 <div class="section-header">Primary</div>248 249 <div class="tip-banner">250 <div class="tip-left">251 <span class="hand-icon">252 <svg viewBox="0 0 24 24"><path d="M12 2c1 0 1 1 1 2v6h2V7c0-1 1-1 2-1s1 1 1 2v4h2V9c0-1 1-1 2-1s1 1 1 2v6c0 3-2 6-5 6H9c-2 0-3-2-3-3l1-6 1-6c0-1 1-2 2-2h2Z"/></svg>253 </span>254 <span>Tap a sender image to select that conversation.</span>255 </div>256 <div class="dismiss">Dismiss</div>257 </div>258 259 <div class="divider"></div>260 261 <!-- Email items -->262 <div class="email-item">263 <div class="avatar yellow">M</div>264 <div class="content">265 <div class="line1">me, <span class="bold">Mail</span> 2</div>266 <div class="subject">carols competition .pdf</div>267 <div class="snippet">Address not found Your message wasn't deli…</div>268 <div class="pill"><span class="label-red">PDF</span> carols competiti…</div>269 </div>270 <div class="meta">271 <div>9:22 AM</div>272 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3 9 9 3 10l5 4-2 7 6-4 6 4-2-7 5-4-6-1-3-6Z"/></svg></div>273 </div>274 </div>275 276 <div class="email-item">277 <div class="avatar gray"></div>278 <div class="content">279 <div class="line1">Anshika from Idanim</div>280 <div class="subject">Ten Reasons why Saarthi should be a part o…</div>281 <div class="snippet">Hi Cerebra, We have crafted a compelling lis…</div>282 </div>283 <div class="meta">284 <div>9:00 AM</div>285 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3 9 9 3 10l5 4-2 7 6-4 6 4-2-7 5-4-6-1-3-6Z"/></svg></div>286 </div>287 </div>288 289 <div class="email-item">290 <div class="avatar gray"></div>291 <div class="content">292 <div class="line1">Shoppers Stop</div>293 <div class="subject">LONG TIME NO SEE 😟</div>294 <div class="snippet">FLAT ₹600 OFF with code - MISSU23 for big…</div>295 </div>296 <div class="meta">297 <div>6:11 AM</div>298 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3 9 9 3 10l5 4-2 7 6-4 6 4-2-7 5-4-6-1-3-6Z"/></svg></div>299 </div>300 </div>301 302 <div class="email-item">303 <div class="avatar gray"></div>304 <div class="content">305 <div class="line1">Jotform</div>306 <div class="subject">Access your forms on the go with our mo…</div>307 <div class="snippet">Being away from your computer shouldn't st…</div>308 </div>309 <div class="meta">310 <div>Dec 28</div>311 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3 9 9 3 10l5 4-2 7 6-4 6 4-2-7 5-4-6-1-3-6Z"/></svg></div>312 </div>313 </div>314 315 <div class="email-item">316 <div class="tag-icon">317 <svg viewBox="0 0 24 24"><path d="M4 6h8l6 6-6 6-8-8V6Z"/></svg>318 </div>319 <div class="content">320 <div class="line1">Promotions</div>321 <div class="subject">Albertsons Weekly Digital Deals, An…</div>322 </div>323 <div class="meta">324 <div class="green-pill">49 new</div>325 </div>326 </div>327 328 <div class="email-item">329 <div class="avatar gray"></div>330 <div class="content">331 <div class="line1">Jotform</div>332 <div class="subject">Discover how to receive online payment…</div>333 <div class="snippet">Sell your products, collect do…</div>334 </div>335 <div class="meta">336 <div>Dec 27</div>337 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3 9 9 3 10l5 4-2 7 6-4 6 4-2-7 5-4-6-1-3-6Z"/></svg></div>338 </div>339 </div>340 341 <div class="email-item">342 <div class="avatar gray"></div>343 <div class="content">344 <div class="line1">LastPass</div>345 <div class="subject">Security update</div>346 <div class="snippet">Your account notifications…</div>347 </div>348 <div class="meta">349 <div>Dec 27</div>350 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3 9 9 3 10l5 4-2 7 6-4 6 4-2-7 5-4-6-1-3-6Z"/></svg></div>351 </div>352 </div>353 354 <!-- Compose floating button -->355 <div class="compose">356 <span class="pencil"><svg viewBox="0 0 24 24"><path d="M3 17v4h4l11-11-4-4L3 17Zm14-12 4 4"/></svg></span>357 <div style="font-size:46px;">Compose</div>358 </div>359 360 <!-- Bottom navigation -->361 <div class="bottom-bar">362 <div class="nav-icon">363 <span class="badge">48</span>364 <svg viewBox="0 0 24 24"><path d="M2 6h20v12H2V6Zm2 2v8h16V8H4Zm4 2h8v2H8v-2Z"/></svg>365 </div>366 <div class="nav-icon">367 <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3V5Zm4 3v8h10V8H7Zm12 10v2H5v-2h14Z"/></svg>368 </div>369 <div class="handle"></div>370 </div>371 372</div>373</body>374</html>