GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mail List - Dark</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 color: #EDEDED;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #0f0f0f;25 display: flex;26 align-items: center;27 padding: 0 32px;28 box-sizing: border-box;29 font-size: 40px;30 letter-spacing: 0.5px;31 }32 .status-left { flex: 1; }33 .status-right { display: flex; gap: 28px; align-items: center; color: #EDEDED; }34 .icon { width: 48px; height: 48px; }35 36 /* Action bar (selection mode) */37 .action-bar {38 position: absolute;39 top: 110px;40 left: 0;41 width: 1080px;42 height: 130px;43 background: #1d2a1d; /* olive/dark green tone */44 display: flex;45 align-items: center;46 box-sizing: border-box;47 padding: 0 24px;48 }49 .action-bar .title {50 font-size: 48px;51 margin-left: 22px;52 }53 .action-icons { margin-left: auto; display: flex; gap: 40px; }54 .action-icons .icon-wrap { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }55 56 /* Select all row */57 .select-all {58 position: absolute;59 top: 240px;60 left: 0;61 width: 1080px;62 height: 86px;63 display: flex;64 align-items: center;65 padding: 0 30px;66 box-sizing: border-box;67 color: #9BE28F;68 font-size: 42px;69 gap: 24px;70 }71 .checkbox {72 width: 50px; height: 50px;73 border: 3px solid #9BE28F; border-radius: 6px;74 }75 76 /* List area */77 .list {78 position: absolute;79 top: 326px;80 left: 0;81 width: 1080px;82 height: 1700px;83 overflow: hidden;84 padding-bottom: 80px;85 }86 87 .mail-item {88 display: grid;89 grid-template-columns: 140px 1fr 140px;90 align-items: center;91 padding: 26px 30px;92 box-sizing: border-box;93 border-bottom: 1px solid rgba(255,255,255,0.06);94 gap: 20px;95 }96 .mail-item.selected {97 background: #2b3a28;98 border-radius: 24px;99 margin: 12px 16px;100 }101 102 .avatar {103 width: 96px; height: 96px; border-radius: 50%;104 background: #3a3a3a; color: #ececec;105 display: flex; align-items: center; justify-content: center;106 font-weight: bold; font-size: 44px;107 }108 .avatar.badge-green {109 background: #98c379; color: #1a1a1a;110 }111 .avatar.grey {112 background: #7a8794;113 }114 .avatar.yellow {115 background: #e0b84f; color: #1a1a1a;116 }117 .avatar-img {118 width: 96px; height: 96px; border-radius: 50%;119 background: #E0E0E0; border: 1px solid #BDBDBD;120 display: flex; align-items: center; justify-content: center;121 color: #757575; font-size: 28px; text-align: center; padding: 6px;122 box-sizing: border-box;123 }124 125 .mail-content .line1 {126 display: flex; align-items: center; gap: 12px;127 font-size: 40px;128 color: #f0f0f0;129 }130 .mail-content .count {131 background: #3b3b3b; color: #cfcfcf; border-radius: 24px; padding: 6px 12px; font-size: 32px;132 }133 .mail-content .subject {134 margin-top: 6px; font-size: 44px; font-weight: 700; color: #ffffff;135 }136 .mail-content .subtle {137 margin-top: 6px; font-size: 36px; color: #b3b3b3;138 }139 140 .meta {141 display: flex; align-items: center; justify-content: flex-end; gap: 18px;142 }143 .meta .date { color: #bdbdbd; font-size: 34px; }144 .star-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }145 146 /* Floating compose */147 .compose {148 position: absolute;149 right: 40px;150 bottom: 380px;151 background: #2f3a2f;152 color: #e8f0e8;153 padding: 24px 40px;154 border-radius: 28px;155 display: flex; align-items: center; gap: 20px;156 font-size: 44px;157 box-shadow: 0 6px 12px rgba(0,0,0,0.4);158 }159 160 /* Snackbar */161 .snackbar {162 position: absolute;163 left: 30px;164 right: 30px;165 bottom: 250px;166 height: 110px;167 background: #E9E9E9;168 border-radius: 24px;169 color: #181818;170 display: flex; align-items: center; justify-content: space-between;171 padding: 0 40px;172 box-sizing: border-box;173 font-size: 40px;174 }175 .snackbar .undo { color: #2b7de9; font-weight: 600; }176 177 /* Gesture bar */178 .gesture-bar {179 position: absolute;180 bottom: 170px;181 left: 50%;182 transform: translateX(-50%);183 width: 300px; height: 10px; background: #d6d6d6; border-radius: 10px;184 opacity: 0.7;185 }186</style>187</head>188<body>189<div id="render-target">190 191 <!-- Status bar -->192 <div class="status-bar">193 <div class="status-left">8:36</div>194 <div class="status-right">195 <!-- simple cellular icon -->196 <svg class="icon" viewBox="0 0 24 24">197 <rect x="2" y="16" width="3" height="6" fill="#EDEDED"></rect>198 <rect x="7" y="12" width="3" height="10" fill="#EDEDED"></rect>199 <rect x="12" y="8" width="3" height="14" fill="#EDEDED"></rect>200 <rect x="17" y="4" width="3" height="18" fill="#EDEDED"></rect>201 </svg>202 <!-- wifi icon -->203 <svg class="icon" viewBox="0 0 24 24">204 <path d="M2 8c5-4 15-4 20 0" stroke="#EDEDED" stroke-width="2" fill="none"/>205 <path d="M5 12c4-3 10-3 14 0" stroke="#EDEDED" stroke-width="2" fill="none"/>206 <path d="M9 16c2-2 4-2 6 0" stroke="#EDEDED" stroke-width="2" fill="none"/>207 <circle cx="12" cy="20" r="2" fill="#EDEDED"></circle>208 </svg>209 <!-- Do not disturb icon -->210 <svg class="icon" viewBox="0 0 24 24">211 <circle cx="12" cy="12" r="10" stroke="#EDEDED" stroke-width="2" fill="none"></circle>212 <rect x="6" y="11" width="12" height="2" fill="#EDEDED"></rect>213 </svg>214 <!-- battery 100% -->215 <svg class="icon" viewBox="0 0 32 16">216 <rect x="1" y="3" width="26" height="10" rx="2" ry="2" stroke="#EDEDED" stroke-width="2" fill="none"></rect>217 <rect x="3" y="5" width="22" height="6" fill="#EDEDED"></rect>218 <rect x="28" y="6" width="3" height="4" fill="#EDEDED"></rect>219 </svg>220 <span style="font-size:38px;">100%</span>221 </div>222 </div>223 224 <!-- Action bar -->225 <div class="action-bar">226 <!-- back arrow -->227 <svg class="icon" viewBox="0 0 24 24">228 <path d="M15 5l-7 7 7 7" stroke="#EDEDED" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>229 </svg>230 <div class="title">1</div>231 <div class="action-icons">232 <!-- download/save icon -->233 <div class="icon-wrap">234 <svg class="icon" viewBox="0 0 24 24">235 <path d="M6 20h12" stroke="#EDEDED" stroke-width="2" fill="none"/>236 <path d="M12 4v10" stroke="#EDEDED" stroke-width="2" fill="none"/>237 <path d="M8 10l4 4 4-4" stroke="#EDEDED" stroke-width="2" fill="none"/>238 </svg>239 </div>240 <!-- archive icon -->241 <div class="icon-wrap">242 <svg class="icon" viewBox="0 0 24 24">243 <rect x="3" y="4" width="18" height="5" rx="1" fill="#EDEDED"></rect>244 <rect x="5" y="10" width="14" height="10" stroke="#EDEDED" stroke-width="2" fill="none"></rect>245 <rect x="9" y="13" width="6" height="2" fill="#EDEDED"></rect>246 </svg>247 </div>248 <!-- delete icon -->249 <div class="icon-wrap">250 <svg class="icon" viewBox="0 0 24 24">251 <path d="M4 7h16" stroke="#EDEDED" stroke-width="2"/>252 <rect x="6" y="7" width="12" height="14" stroke="#EDEDED" stroke-width="2" fill="none"></rect>253 <rect x="9" y="3" width="6" height="3" fill="#EDEDED"></rect>254 </svg>255 </div>256 <!-- mail icon -->257 <div class="icon-wrap">258 <svg class="icon" viewBox="0 0 24 24">259 <rect x="3" y="5" width="18" height="14" rx="2" ry="2" stroke="#EDEDED" stroke-width="2" fill="none"></rect>260 <path d="M3 7l9 6 9-6" stroke="#EDEDED" stroke-width="2" fill="none"></path>261 </svg>262 </div>263 <!-- more icon -->264 <div class="icon-wrap">265 <svg class="icon" viewBox="0 0 24 24">266 <circle cx="5" cy="12" r="2" fill="#EDEDED"></circle>267 <circle cx="12" cy="12" r="2" fill="#EDEDED"></circle>268 <circle cx="19" cy="12" r="2" fill="#EDEDED"></circle>269 </svg>270 </div>271 </div>272 </div>273 274 <!-- Select all -->275 <div class="select-all">276 <div class="checkbox"></div>277 <div>Select all</div>278 </div>279 280 <!-- List of mails -->281 <div class="list">282 <!-- Selected mail -->283 <div class="mail-item selected">284 <div class="avatar badge-green">285 <!-- check circle -->286 <svg viewBox="0 0 24 24" width="64" height="64">287 <circle cx="12" cy="12" r="10" fill="#98c379"></circle>288 <path d="M6 12l4 4 8-8" stroke="#1a1a1a" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>289 </svg>290 </div>291 <div class="mail-content">292 <div class="line1">Natalie Larson</div>293 <div class="subtle">(no subject)</div>294 <div class="subtle">Hi, Karin Natalie this side , I want to shared...</div>295 </div>296 <div class="meta">297 <div class="date">5:38 PM</div>298 <div class="star-btn">299 <svg viewBox="0 0 24 24" width="44" height="44">300 <path d="M12 3l3 6 6 .9-4.5 4.2 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9l3-6z" stroke="#D8D8D8" stroke-width="2" fill="none"></path>301 </svg>302 </div>303 </div>304 </div>305 306 <!-- Mail 2 -->307 <div class="mail-item">308 <div class="avatar grey">M</div>309 <div class="mail-content">310 <div class="line1">311 me, Mail312 <span class="count">2</span>313 </div>314 <div class="subject">Join us for a Book fair event</div>315 <div class="subtle">Dear Namoi, I wanted to share some excitin...</div>316 </div>317 <div class="meta">318 <div class="date">Oct 12</div>319 <div class="star-btn">320 <svg viewBox="0 0 24 24" width="44" height="44">321 <path d="M12 3l3 6 6 .9-4.5 4.2 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9l3-6z" stroke="#D8D8D8" stroke-width="2" fill="none"></path>322 </svg>323 </div>324 </div>325 </div>326 327 <!-- Mail 3 -->328 <div class="mail-item">329 <div class="avatar">330 <svg viewBox="0 0 24 24" width="60" height="60">331 <circle cx="12" cy="8" r="4" fill="#EDEDED"></circle>332 <path d="M4 22c0-5 16-5 16 0" fill="#EDEDED"></path>333 </svg>334 </div>335 <div class="mail-content">336 <div class="line1">Yummly</div>337 <div class="subject">Ready to get cooking with Yummly?</div>338 <div class="subtle">Welcome! Get ready to have fun achieving y...</div>339 </div>340 <div class="meta">341 <div class="date">Oct 11</div>342 <div class="star-btn">343 <svg viewBox="0 0 24 24" width="44" height="44">344 <path d="M12 3l3 6 6 .9-4.5 4.2 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9l3-6z" stroke="#D8D8D8" stroke-width="2" fill="none"></path>345 </svg>346 </div>347 </div>348 </div>349 350 <!-- Mail 4 -->351 <div class="mail-item">352 <div class="avatar yellow">M</div>353 <div class="mail-content">354 <div class="line1">Mail Delivery Subsystem</div>355 <div class="subject">Delivery Status Notification (Failure)</div>356 <div class="subtle">Address not found Your message wasn't deli...</div>357 </div>358 <div class="meta">359 <div class="date">Oct 6</div>360 <div class="star-btn">361 <svg viewBox="0 0 24 24" width="44" height="44">362 <path d="M12 3l3 6 6 .9-4.5 4.2 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9l3-6z" stroke="#D8D8D8" stroke-width="2" fill="none"></path>363 </svg>364 </div>365 </div>366 </div>367 368 <!-- Mail 5 -->369 <div class="mail-item">370 <div class="avatar-img">[IMG: eBay logo]</div>371 <div class="mail-content">372 <div class="line1">eBay</div>373 <div class="subject">A new device is using your account</div>374 <div class="subtle">Here's what you need to know. Let's make s...</div>375 </div>376 <div class="meta">377 <div class="date">Oct 6</div>378 <div class="star-btn">379 <svg viewBox="0 0 24 24" width="44" height="44">380 <path d="M12 3l3 6 6 .9-4.5 4.2 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9l3-6z" stroke="#D8D8D8" stroke-width="2" fill="none"></path>381 </svg>382 </div>383 </div>384 </div>385 386 <!-- Mail 6 -->387 <div class="mail-item">388 <div class="avatar-img">[IMG: eBay logo]</div>389 <div class="mail-content">390 <div class="line1">eBay</div>391 <div class="subject">Karin, your eBay adventure has just beg...</div>392 <div class="subtle">Your perfect find is out there</div>393 </div>394 <div class="meta">395 <div class="date">Oct 5</div>396 <div class="star-btn">397 <svg viewBox="0 0 24 24" width="44" height="44">398 <path d="M12 3l3 6 6 .9-4.5 4.2 1 6-5.5-3-5.5 3 1-6L3 9.9 9 9l3-6z" stroke="#D8D8D8" stroke-width="2" fill="none"></path>399 </svg>400 </div>401 </div>402 </div>403 404 <!-- Promotions -->405 <div class="mail-item">406 <div class="avatar" style="background:#3a5f3a;">407 <svg viewBox="0 0 24 24" width="54" height="54">408 <path d="M4 4h12v10l-6 6-6-6z" fill="#EDEDED"></path>409 <circle cx="10" cy="9" r="2" fill="#3a5f3a"></circle>410 </svg>411 </div>412 <div class="mail-content">413 <div class="line1">Promotions</div>414 <div class="subject">TheFork</div>415 <div class="subtle">Limited-time offers and restaurant deals</div>416 </div>417 <div class="meta">418 <div style="background:#9BE28F;color:#1a1a1a;border-radius:20px;padding:8px 16px;font-size:34px;">1 new</div>419 </div>420 </div>421 422 <!-- Vimeo -->423 <div class="mail-item">424 <div class="avatar-img">[IMG: Vimeo logo]</div>425 <div class="mail-content">426 <div class="line1">Vimeo</div>427 <div class="subject">Welcome to Vimeo</div>428 <div class="subtle">Get started by uploading your first video</div>429 </div>430 <div class="meta">431 <div class="date">Oct 3</div>432 </div>433 </div>434 </div>435 436 <!-- Compose button -->437 <div class="compose">438 <svg viewBox="0 0 24 24" width="44" height="44">439 <path d="M4 17l10-10 3 3-10 10H4v-3z" fill="#e8f0e8"></path>440 <rect x="4" y="19" width="16" height="2" fill="#e8f0e8"></rect>441 </svg>442 Compose443 </div>444 445 <!-- Snackbar -->446 <div class="snackbar">447 <div>1 marked as read</div>448 <div class="undo">Undo</div>449 </div>450 451 <!-- Gesture bar -->452 <div class="gesture-bar"></div>453</div>454</body>455</html>