GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Email List - Dark</title>7<style>8 body { margin:0; padding:0; background: transparent; }9 #render-target{10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#2b2018; color:#e8dccf;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 }15 .statusbar{16 height:96px;17 padding:0 32px;18 display:flex; align-items:center; justify-content:space-between;19 color:#f0e6db; font-weight:600; letter-spacing:1px; font-size:36px;20 }21 .status-icons{ display:flex; align-items:center; gap:24px; }22 .actionbar{23 height:128px; border-top:1px solid rgba(255,255,255,0.06);24 display:flex; align-items:center; justify-content:space-between;25 padding:0 28px 0 20px;26 }27 .left-action{ display:flex; align-items:center; gap:20px; }28 .left-action .count{ font-size:44px; font-weight:700; color:#f1e7da; }29 .icon-btn svg{ width:64px; height:64px; }30 .icon-btn{ padding:14px; }31 .select-all{32 display:flex; align-items:center; gap:24px;33 color:#f2b37b; font-size:36px; padding:26px 36px;34 border-top:1px solid rgba(255,255,255,0.06);35 }36 .checkbox{37 width:44px; height:44px; border:3px solid #f2b37b; border-radius:6px;38 }39 40 .list{ padding-top:8px; }41 .section-row{42 display:flex; align-items:center; gap:20px;43 padding:28px 36px;44 background:#241a13; border-top:1px solid rgba(255,255,255,0.06);45 border-bottom:1px solid rgba(255,255,255,0.06);46 }47 .section-title{ font-size:40px; font-weight:700; color:#f1ddc8; }48 .section-sub{ color:#d7c7b7; font-size:34px; margin-top:4px; }49 .mail-row{50 display:flex; align-items:flex-start; gap:28px;51 padding:30px 36px;52 border-bottom:1px solid rgba(255,255,255,0.06);53 }54 .avatar{55 width:92px; height:92px; border-radius:50%;56 display:flex; align-items:center; justify-content:center;57 font-weight:700; color:#3b2c1f;58 }59 .avatar.m{ background:#ffcf48; }60 .avatar.person{ background:#9aa0a6; color:#2b2018; font-weight:800; }61 .content{ flex:1; min-width:0; }62 .top-line{63 display:flex; align-items:center; justify-content:space-between;64 gap:8px;65 }66 .from{ font-size:38px; font-weight:700; color:#f0e5d8; }67 .time{ color:#d0c1b2; font-size:34px; }68 .subject{ font-size:36px; color:#f0e6db; margin-top:6px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }69 .snippet{ font-size:32px; color:#cdbfaf; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }70 .right-icons{ display:flex; align-items:center; gap:14px; }71 .star svg{ width:44px; height:44px; }72 73 /* Selected card */74 .selected{75 margin:26px 28px 26px 28px;76 background:#4d3a2e; border-radius:34px; padding:26px 28px;77 display:flex; align-items:flex-start; gap:22px;78 }79 .check-pill{80 width:86px; height:86px; border-radius:50%;81 background:#f2a56f; display:flex; align-items:center; justify-content:center;82 }83 .pill-content{ flex:1; }84 .pill-top{ display:flex; align-items:center; justify-content:space-between; }85 .pill-from{ color:#ffd9bd; font-weight:800; font-size:38px; }86 .pill-subject{ font-weight:800; font-size:36px; color:#f3e7db; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }87 .pill-snippet{ color:#d8c8b7; font-size:32px; margin-top:4px; }88 89 .chips{ display:flex; gap:22px; margin-top:16px; flex-wrap:wrap; }90 .chip{91 padding:14px 22px; border:2px solid rgba(255,255,255,0.25);92 border-radius:28px; color:#e6d9cc; font-size:30px; display:flex; align-items:center; gap:12px;93 background:#3b2c22;94 }95 .chip .img-icon{96 width:28px; height:28px; background:#d65c4a; border-radius:6px;97 }98 99 /* Compose FAB */100 .fab{101 position:absolute; right:36px; bottom:170px;102 background:#6d5442; color:#f6ebdf;103 padding:26px 40px; border-radius:28px; display:flex; align-items:center; gap:16px;104 box-shadow:0 8px 20px rgba(0,0,0,0.35);105 font-size:36px; font-weight:600;106 }107 .fab .pen{ width:40px; height:40px; border:3px solid #f6ebdf; border-radius:4px; transform:rotate(-20deg); position:relative; }108 .fab .pen:after{ content:""; position:absolute; right:-8px; bottom:-8px; width:14px; height:14px; background:#f6ebdf; transform:rotate(-20deg); }109 110 /* Gesture bar */111 .gesture{112 position:absolute; left:50%; transform:translateX(-50%);113 bottom:80px; width:380px; height:12px; background:#ffffff; opacity:0.85; border-radius:8px;114 }115 116 /* Small helper */117 svg{ display:block; }118</style>119</head>120<body>121<div id="render-target">122 <!-- Status bar -->123 <div class="statusbar">124 <div>10:50</div>125 <div class="status-icons">126 <!-- simple sun icon -->127 <svg width="40" height="40" viewBox="0 0 24 24">128 <circle cx="12" cy="12" r="4" fill="#f5e6cf"></circle>129 <g stroke="#f5e6cf" stroke-width="2" stroke-linecap="round">130 <path d="M12 1v3"/><path d="M12 20v3"/>131 <path d="M1 12h3"/><path d="M20 12h3"/>132 <path d="M4 4l2 2"/><path d="M18 18l2 2"/>133 <path d="M20 4l-2 2"/><path d="M6 18l-2 2"/>134 </g>135 </svg>136 <!-- cloud -->137 <svg width="44" height="44" viewBox="0 0 24 24">138 <path d="M7 18h10a4 4 0 0 0 0-8 6 6 0 0 0-11.5 1.8A3.5 3.5 0 0 0 7 18z" fill="#e9dece"/>139 </svg>140 </div>141 <div class="status-icons">142 <!-- wifi -->143 <svg width="44" height="44" viewBox="0 0 24 24">144 <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#f5e6cf" stroke-width="2" stroke-linecap="round"/>145 <path d="M5 12c3-3 11-3 14 0" fill="none" stroke="#f5e6cf" stroke-width="2" stroke-linecap="round"/>146 <path d="M8 16c2-2 6-2 8 0" fill="none" stroke="#f5e6cf" stroke-width="2" stroke-linecap="round"/>147 <circle cx="12" cy="19" r="1.2" fill="#f5e6cf"></circle>148 </svg>149 <!-- battery -->150 <svg width="44" height="44" viewBox="0 0 28 18">151 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#f5e6cf" stroke-width="2"/>152 <rect x="3" y="5" width="14" height="8" fill="#f5e6cf"/>153 <rect x="23" y="7" width="4" height="6" rx="1" fill="#f5e6cf"/>154 </svg>155 </div>156 </div>157 158 <!-- Action bar -->159 <div class="actionbar">160 <div class="left-action">161 <!-- back -->162 <div class="icon-btn">163 <svg viewBox="0 0 24 24">164 <path d="M15 4L7 12l8 8" fill="none" stroke="#f1e7da" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>165 </svg>166 </div>167 <div class="count">1</div>168 </div>169 <div class="right-icons">170 <!-- download box -->171 <div class="icon-btn">172 <svg viewBox="0 0 24 24">173 <rect x="3" y="3" width="18" height="18" rx="2" fill="none" stroke="#f1e7da" stroke-width="2"/>174 <path d="M12 7v8m0 0l-3-3m3 3l3-3" fill="none" stroke="#f1e7da" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>175 </svg>176 </div>177 <!-- delete -->178 <div class="icon-btn">179 <svg viewBox="0 0 24 24">180 <path d="M6 7h12M9 7V5h6v2M7 7l1 13h8l1-13" fill="none" stroke="#f1e7da" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>181 </svg>182 </div>183 <!-- envelope -->184 <div class="icon-btn">185 <svg viewBox="0 0 24 24">186 <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#f1e7da" stroke-width="2"/>187 <path d="M3 7l9 6 9-6" fill="none" stroke="#f1e7da" stroke-width="2" stroke-linecap="round"/>188 </svg>189 </div>190 <!-- more -->191 <div class="icon-btn">192 <svg viewBox="0 0 24 24">193 <circle cx="12" cy="5" r="2" fill="#f1e7da"/>194 <circle cx="12" cy="12" r="2" fill="#f1e7da"/>195 <circle cx="12" cy="19" r="2" fill="#f1e7da"/>196 </svg>197 </div>198 </div>199 </div>200 201 <!-- Select all -->202 <div class="select-all">203 <div class="checkbox"></div>204 <div>Select all</div>205 </div>206 207 <div class="list">208 <!-- Promotions header row -->209 <div class="section-row">210 <svg width="48" height="48" viewBox="0 0 24 24">211 <path d="M4 4h10l6 6-10 10L4 14V4z" fill="none" stroke="#cbb9a7" stroke-width="2" stroke-linejoin="round"/>212 </svg>213 <div>214 <div class="section-title">Promotions</div>215 <div class="section-sub">eBay</div>216 </div>217 </div>218 219 <!-- Regular mail row -->220 <div class="mail-row">221 <div class="avatar m">M</div>222 <div class="content">223 <div class="top-line">224 <div class="from">me, Mail 2</div>225 <div class="right-icons">226 <div class="time">Oct 12</div>227 <div class="star">228 <svg viewBox="0 0 24 24">229 <path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.5 2.6 1-6.3L3 8.9l6-.9z" fill="none" stroke="#cdbfaf" stroke-width="2" stroke-linejoin="round"/>230 </svg>231 </div>232 </div>233 </div>234 <div class="subject">All Recipes App</div>235 <div class="snippet">Address not found Your message wasn't deli…</div>236 </div>237 </div>238 239 <!-- Selected pill card -->240 <div class="selected">241 <div class="check-pill">242 <svg width="40" height="40" viewBox="0 0 24 24">243 <circle cx="12" cy="12" r="10" fill="none"></circle>244 <path d="M6 12l4 4 8-8" fill="none" stroke="#3b2c22" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>245 </svg>246 </div>247 <div class="pill-content">248 <div class="pill-top">249 <div class="pill-from">eBay</div>250 <div class="right-icons">251 <div class="time">Oct 12</div>252 <div class="star">253 <svg viewBox="0 0 24 24">254 <path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.5 2.6 1-6.3L3 8.9l6-.9z" fill="none" stroke="#cdbfaf" stroke-width="2" stroke-linejoin="round"/>255 </svg>256 </div>257 </div>258 </div>259 <div class="pill-subject">Recently viewed: New Twin Tubs Washing…</div>260 <div class="pill-snippet">Give it another look</div>261 </div>262 </div>263 264 <!-- Cerebra research with attachments -->265 <div class="mail-row">266 <div class="avatar person">267 <svg width="40" height="40" viewBox="0 0 24 24">268 <circle cx="12" cy="8" r="5" fill="#2b2018"/>269 <path d="M4 22a8 8 0 0 1 16 0" fill="#2b2018"/>270 </svg>271 </div>272 <div class="content">273 <div class="top-line">274 <div class="from">Cerebra Research</div>275 <div class="right-icons">276 <div class="time">Oct 6</div>277 <div class="star">278 <svg viewBox="0 0 24 24">279 <path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.5 2.6 1-6.3L3 8.9l6-.9z" fill="none" stroke="#cdbfaf" stroke-width="2" stroke-linejoin="round"/>280 </svg>281 </div>282 </div>283 </div>284 <div class="subject">(no subject)</div>285 <div class="snippet">(no body)</div>286 <div class="chips">287 <div class="chip"><div class="img-icon"></div> Screenshot_…</div>288 <div class="chip"><div class="img-icon"></div> Screenshot_… +3</div>289 </div>290 </div>291 </div>292 293 <!-- More mails -->294 <div class="mail-row">295 <div class="avatar m">M</div>296 <div class="content">297 <div class="top-line">298 <div class="from">me, Mail 2</div>299 <div class="right-icons">300 <div class="time">Oct 5</div>301 <div class="star">302 <svg viewBox="0 0 24 24">303 <path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.5 2.6 1-6.3L3 8.9l6-.9z" fill="none" stroke="#cdbfaf" stroke-width="2" stroke-linejoin="round"/>304 </svg>305 </div>306 </div>307 </div>308 <div class="subject">Check out Samsung Galaxy F54 5G (Stardus…</div>309 <div class="snippet">Address not found Your message wasn't deli…</div>310 </div>311 </div>312 313 <div class="mail-row">314 <div class="avatar m">M</div>315 <div class="content">316 <div class="top-line">317 <div class="from">me, Mail 2</div>318 <div class="right-icons">319 <div class="time">Sep 29</div>320 <div class="star">321 <svg viewBox="0 0 24 24">322 <path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.5 2.6 1-6.3L3 8.9l6-.9z" fill="none" stroke="#cdbfaf" stroke-width="2" stroke-linejoin="round"/>323 </svg>324 </div>325 </div>326 </div>327 <div class="subject">Travel plans</div>328 <div class="snippet">Address not found Your message wasn't deli…</div>329 </div>330 </div>331 332 <div class="mail-row">333 <div class="avatar m">M</div>334 <div class="content">335 <div class="top-line">336 <div class="from">me, Mail 2</div>337 <div class="right-icons">338 <div class="time">Sep 28</div>339 <div class="star">340 <svg viewBox="0 0 24 24">341 <path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.5 2.6 1-6.3L3 8.9l6-.9z" fill="none" stroke="#cdbfaf" stroke-width="2" stroke-linejoin="round"/>342 </svg>343 </div>344 </div>345 </div>346 <div class="subject">Reminder App</div>347 <div class="snippet">Address not found Your message wasn't deli…</div>348 </div>349 </div>350 351 <div class="mail-row">352 <div class="avatar m">M</div>353 <div class="content">354 <div class="top-line">355 <div class="from">me, Mail 2</div>356 <div class="right-icons">357 <div class="time">Sep 27</div>358 <div class="star">359 <svg viewBox="0 0 24 24">360 <path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.5 2.6 1-6.3L3 8.9l6-.9z" fill="none" stroke="#cdbfaf" stroke-width="2" stroke-linejoin="round"/>361 </svg>362 </div>363 </div>364 </div>365 <div class="subject">(no subject)</div>366 <div class="snippet">—</div>367 </div>368 </div>369 </div>370 371 <!-- Compose FAB -->372 <div class="fab">373 <div class="pen"></div>374 Compose375 </div>376 377 <!-- Gesture bar -->378 <div class="gesture"></div>379</div>380</body>381</html>