GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mail List - Dark UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1440px;9 height: 3120px;10 position: relative;11 overflow: hidden;12 background: #1e2a1d; /* deep dark-green background similar to screenshot */13 color: #e8efe5;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1440px;22 height: 100px;23 padding: 0 40px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #e8efe5;29 font-weight: 600;30 font-size: 42px;31 opacity: 0.95;32 }33 .status-icons {34 display: flex;35 gap: 26px;36 align-items: center;37 }38 .status-dot{39 width: 18px; height: 18px; background:#e8efe5; border-radius:50%;40 }41 42 /* Top mail selection toolbar */43 .mail-toolbar {44 position: absolute;45 top: 100px;46 left: 0;47 width: 1440px;48 height: 170px;49 padding: 0 40px;50 box-sizing: border-box;51 display: flex;52 align-items: center;53 gap: 40px;54 background: rgba(16, 24, 16, 0.45);55 border-bottom: 1px solid rgba(255,255,255,0.06);56 font-size: 56px;57 letter-spacing: 1px;58 }59 .mail-toolbar .title {60 font-size: 60px;61 margin-right: auto;62 }63 .icon-btn {64 width: 86px;65 height: 86px;66 display: inline-flex;67 align-items: center;68 justify-content: center;69 border-radius: 16px;70 }71 .icon-btn svg { width: 60px; height: 60px; fill: none; stroke: #e8efe5; stroke-width: 60; stroke-linecap: round; stroke-linejoin: round; }72 .icon-btn .filled { fill: #e8efe5; stroke: none; }73 74 /* "Select all" row */75 .select-all {76 position: absolute;77 top: 270px;78 left: 0;79 width: 1440px;80 height: 120px;81 padding: 0 40px;82 box-sizing: border-box;83 display: flex;84 align-items: center;85 gap: 30px;86 color: #d5dfd0;87 font-size: 56px;88 }89 .checkbox {90 width: 70px; height: 70px; border: 4px solid #cfe2c9; border-radius: 14px;91 display: flex; align-items: center; justify-content: center;92 }93 .checkbox svg { width: 48px; height: 48px; fill: none; stroke: #9fd39b; stroke-width: 12; }94 95 /* List area */96 .list {97 position: absolute;98 top: 390px;99 left: 0;100 width: 1440px;101 height: 2400px;102 overflow: hidden;103 padding: 0 30px;104 box-sizing: border-box;105 }106 107 .category {108 display: flex;109 align-items: center;110 gap: 26px;111 color: #e8efe5;112 padding: 24px 18px;113 font-size: 64px;114 font-weight: 700;115 }116 .category .sub {117 font-size: 48px; font-weight: 600; color: #cbd7c8;118 margin-top: 12px;119 }120 .tag-icon{121 width: 70px; height: 70px; border-radius: 16px; display:flex; align-items:center; justify-content:center;122 }123 .tag-icon svg { width: 60px; height: 60px; fill:none; stroke:#e8efe5; stroke-width: 60; }124 125 .email-row {126 display: flex;127 padding: 36px 18px;128 box-sizing: border-box;129 align-items: center;130 gap: 34px;131 border-top: 1px solid rgba(255,255,255,0.06);132 }133 134 .avatar {135 width: 120px; height: 120px; border-radius: 60px;136 background: #F4C74B; color: #1e1e1e; font-weight: 800; font-size: 64px;137 display: flex; align-items: center; justify-content: center;138 }139 140 .mail-meta {141 flex: 1;142 }143 .sender-line {144 display: flex; align-items: baseline; gap: 16px;145 font-size: 58px; color: #e8efe5; font-weight: 700;146 }147 .sender-line .count { font-weight: 800; }148 .subject {149 font-size: 56px; color: #e8efe5; margin-top: 10px; font-weight: 700;150 }151 .snippet {152 font-size: 46px; color: #b7c1b1; margin-top: 6px;153 }154 155 .right-col {156 width: 180px;157 display: flex; flex-direction: column; align-items: flex-end; gap: 24px;158 }159 .time { font-size: 46px; color: #cbd7c8; }160 .star svg { width: 64px; height: 64px; fill: none; stroke:#cbd7c8; stroke-width: 50; }161 162 /* Highlighted item (green bubble) */163 .highlight {164 background: #2b3f2b;165 border-radius: 40px;166 margin: 26px 0;167 padding: 30px 18px;168 }169 .highlight .avatar {170 background: #93c983;171 color: #113011;172 }173 .highlight .sender-line { font-weight: 800; }174 .highlight .snippet { color: #cfdfcf; }175 176 /* Floating compose button */177 .compose {178 position: absolute;179 right: 70px;180 bottom: 360px;181 width: 540px;182 height: 180px;183 background: #2e4430;184 border-radius: 90px;185 display: flex; align-items: center; justify-content: center; gap: 24px;186 box-shadow: 0 10px 24px rgba(0,0,0,0.45);187 font-size: 64px; font-weight: 700; color: #e8efe5;188 }189 .compose .circle {190 width: 100px; height: 100px; border-radius: 50%; background: #3a5a3a;191 display: flex; align-items: center; justify-content: center;192 }193 .compose svg { width: 60px; height: 60px; stroke:#e8efe5; stroke-width: 14; fill:none; }194 195 /* Snackbar */196 .snackbar {197 position: absolute;198 left: 40px;199 bottom: 230px;200 width: 1360px;201 height: 130px;202 background: #2b2f2b;203 border-radius: 26px;204 display: flex; align-items: center; justify-content: space-between;205 padding: 0 40px;206 box-sizing: border-box;207 font-size: 52px;208 color: #e8efe5;209 }210 .snackbar .undo { color: #a7d6a2; font-weight: 700; }211 212 /* Gesture bar */213 .gesture {214 position: absolute;215 bottom: 70px;216 left: 50%;217 transform: translateX(-50%);218 width: 420px; height: 18px; border-radius: 9px; background: #cbd7c8; opacity: 0.55;219 }220</style>221</head>222<body>223<div id="render-target">224 225 <!-- Status bar -->226 <div class="status-bar">227 <div>11:54</div>228 <div class="status-icons">229 <div class="status-dot"></div>230 <div class="status-dot"></div>231 <div class="status-dot"></div>232 <!-- Battery icon -->233 <svg viewBox="0 0 100 60">234 <rect x="4" y="6" width="80" height="48" rx="10" ry="10" stroke="#e8efe5" fill="none" stroke-width="6"></rect>235 <rect x="10" y="12" width="68" height="36" rx="6" fill="#e8efe5"></rect>236 <rect x="86" y="22" width="10" height="16" rx="3" fill="#e8efe5"></rect>237 </svg>238 </div>239 </div>240 241 <!-- Mail selection toolbar -->242 <div class="mail-toolbar">243 <!-- Back Arrow -->244 <div class="icon-btn">245 <svg viewBox="0 0 100 100">246 <path d="M60 20 L30 50 L60 80" />247 </svg>248 </div>249 <div class="title">1</div>250 <!-- Download -->251 <div class="icon-btn">252 <svg viewBox="0 0 100 100">253 <path d="M50 20 L50 64" />254 <path d="M32 46 L50 64 L68 46" />255 <rect x="22" y="72" width="56" height="8" class="filled"></rect>256 </svg>257 </div>258 <!-- Trash -->259 <div class="icon-btn">260 <svg viewBox="0 0 100 100">261 <rect x="26" y="30" width="48" height="50" rx="6"></rect>262 <rect x="38" y="20" width="24" height="8"></rect>263 <path d="M20 30 L80 30"></path>264 </svg>265 </div>266 <!-- Envelope -->267 <div class="icon-btn">268 <svg viewBox="0 0 100 100">269 <rect x="18" y="26" width="64" height="48" rx="8"></rect>270 <path d="M18 26 L50 52 L82 26"></path>271 </svg>272 </div>273 <!-- More (vertical dots) -->274 <div class="icon-btn">275 <svg viewBox="0 0 100 100">276 <circle cx="50" cy="26" r="8" class="filled"></circle>277 <circle cx="50" cy="50" r="8" class="filled"></circle>278 <circle cx="50" cy="74" r="8" class="filled"></circle>279 </svg>280 </div>281 </div>282 283 <!-- Select all row -->284 <div class="select-all">285 <div class="checkbox">286 <svg viewBox="0 0 100 100"><path d="M22 54 L40 72 L78 34"></path></svg>287 </div>288 <div>Select all</div>289 </div>290 291 <!-- List -->292 <div class="list">293 <!-- Category: Promotions -->294 <div class="category">295 <div class="tag-icon">296 <svg viewBox="0 0 100 100">297 <path d="M30 20 H70 V50 L50 80 L30 50 Z"></path>298 </svg>299 </div>300 <div>301 Promotions302 <div class="sub">Emma at SideChef</div>303 </div>304 </div>305 306 <!-- Email item 1 -->307 <div class="email-row">308 <div class="avatar">M</div>309 <div class="mail-meta">310 <div class="sender-line">311 <div>me, Mail</div><div class="count">2</div>312 </div>313 <div class="subject">Thank you for the gift</div>314 <div class="snippet">Recipient inbox full Your message couldn't b...</div>315 </div>316 <div class="right-col">317 <div class="time">6:45 PM</div>318 <div class="star">319 <svg viewBox="0 0 100 100">320 <path d="M50 16 L60 40 L86 40 L65 56 L74 80 L50 66 L26 80 L35 56 L14 40 L40 40 Z"></path>321 </svg>322 </div>323 </div>324 </div>325 326 <!-- Email item 2 -->327 <div class="email-row">328 <div class="avatar">M</div>329 <div class="mail-meta">330 <div class="sender-line">331 <div>me, Mail</div><div class="count">2</div>332 </div>333 <div class="subject">(no subject)</div>334 <div class="snippet">Recipient inbox full Your message couldn't b...</div>335 </div>336 <div class="right-col">337 <div class="time">Oct 12</div>338 <div class="star">339 <svg viewBox="0 0 100 100">340 <path d="M50 16 L60 40 L86 40 L65 56 L74 80 L50 66 L26 80 L35 56 L14 40 L40 40 Z"></path>341 </svg>342 </div>343 </div>344 </div>345 346 <!-- Email item 3 -->347 <div class="email-row">348 <div class="avatar">M</div>349 <div class="mail-meta">350 <div class="sender-line">351 <div>me, <span style="font-weight:800;">Mail</span></div><div class="count">2</div>352 </div>353 <div class="subject" style="font-weight:900;">(no subject)</div>354 <div class="snippet">Recipient inbox full Your message couldn't b...</div>355 </div>356 <div class="right-col">357 <div class="time">Oct 11</div>358 <div class="star">359 <svg viewBox="0 0 100 100">360 <path d="M50 16 L60 40 L86 40 L65 56 L74 80 L50 66 L26 80 L35 56 L14 40 L40 40 Z"></path>361 </svg>362 </div>363 </div>364 </div>365 366 <!-- Email item 4 -->367 <div class="email-row">368 <div class="avatar">M</div>369 <div class="mail-meta">370 <div class="sender-line">371 <div>me, Mail</div><div class="count">2</div>372 </div>373 <div class="subject">Check out Men's Under Armour T‑Shirt S...</div>374 <div class="snippet">Recipient inbox full Your message couldn't b...</div>375 </div>376 <div class="right-col">377 <div class="time">Oct 6</div>378 <div class="star">379 <svg viewBox="0 0 100 100">380 <path d="M50 16 L60 40 L86 40 L65 56 L74 80 L50 66 L26 80 L35 56 L14 40 L40 40 Z"></path>381 </svg>382 </div>383 </div>384 </div>385 386 <!-- Highlighted item -->387 <div class="email-row highlight">388 <div class="avatar">389 <!-- Checkmark circle to mimic selected -->390 <svg viewBox="0 0 100 100">391 <circle cx="50" cy="50" r="44" fill="#a5d6a7"></circle>392 <path d="M30 52 L46 68 L74 40" stroke="#1b3c1b" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>393 </svg>394 </div>395 <div class="mail-meta">396 <div class="sender-line">397 <div>Google Community Team</div>398 </div>399 <div class="subject">Quentin, take the next step by customizi...</div>400 <div class="snippet">Access your account features and services...</div>401 </div>402 <div class="right-col">403 <div class="time">Oct 4</div>404 <div class="star">405 <svg viewBox="0 0 100 100">406 <path d="M50 16 L60 40 L86 40 L65 56 L74 80 L50 66 L26 80 L35 56 L14 40 L40 40 Z"></path>407 </svg>408 </div>409 </div>410 </div>411 </div>412 413 <!-- Compose floating button -->414 <div class="compose">415 <div class="circle">416 <svg viewBox="0 0 100 100">417 <path d="M20 70 L80 20" />418 <rect x="20" y="70" width="30" height="8" rx="4" />419 </svg>420 </div>421 <div>Compose</div>422 </div>423 424 <!-- Snackbar -->425 <div class="snackbar">426 <div>1 marked as unread</div>427 <div class="undo">Undo</div>428 </div>429 430 <!-- Gesture bar -->431 <div class="gesture"></div>432</div>433</body>434</html>