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>Mail List - Dark</title>7<style>8 body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;}9 #render-target{10 width:1080px;11 height:2400px;12 position:relative;13 overflow:hidden;14 background:#1b120b;15 color:#eadfd2;16 }17 18 /* Status bar */19 .status-bar{20 height:92px;21 padding:0 32px;22 display:flex;23 align-items:center;24 justify-content:space-between;25 color:#e9decd;26 font-weight:600;27 letter-spacing:0.5px;28 font-size:36px;29 opacity:0.95;30 }31 .status-right{32 display:flex;33 align-items:center;34 gap:28px;35 }36 .icon-small svg{width:38px;height:38px;fill:#e9decd;opacity:0.9}37 38 /* Search */39 .search-wrap{40 padding:18px 24px 0 24px;41 }42 .search-bar{43 height:116px;44 background:#3b2f25;45 border-radius:64px;46 display:flex;47 align-items:center;48 padding:0 28px;49 }50 .hamburger{width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin-right:18px}51 .search-input{52 color:#ccbfb1;53 font-size:38px;54 flex:1;55 opacity:0.95;56 }57 .account{58 width:92px;height:92px;border-radius:50%;59 background:#3A86FF;60 color:#fff;font-weight:700;font-size:40px;61 display:flex;align-items:center;justify-content:center;62 box-shadow:0 0 0 6px rgba(0,0,0,0.2);63 }64 65 /* Section title */66 .section-title{67 color:#aa9b8d;68 font-size:34px;69 margin:34px 0 8px 44px;70 }71 72 /* List */73 .list{padding:0 10px}74 .email{75 display:flex;76 gap:26px;77 padding:28px 22px;78 border-bottom:1px solid rgba(255,255,255,0.06);79 }80 .avatar{81 width:96px;height:96px;border-radius:50%;82 background:#E0E0E0;border:1px solid #BDBDBD;83 color:#757575;font-size:22px;line-height:1.1;text-align:center;84 display:flex;align-items:center;justify-content:center;85 }86 .content{flex:1}87 .row-top{88 display:flex;align-items:center;justify-content:space-between;89 margin-bottom:6px;90 }91 .sender{font-size:40px;font-weight:700;letter-spacing:0.2px}92 .right-meta{display:flex;align-items:center;gap:18px;color:#a69486;font-size:28px}93 .subject{94 font-size:34px;font-weight:700;color:#eadfd2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;95 }96 .snippet{97 margin-top:6px;color:#b9a89a;font-size:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;98 }99 .date{min-width:120px;text-align:right}100 .star svg{width:42px;height:42px;fill:none;stroke:#b79f8c;stroke-width:2}101 102 /* Promotions row */103 .promotions{104 display:flex;align-items:center;gap:22px;105 padding:30px 22px;border-bottom:1px solid rgba(255,255,255,0.06);106 }107 .tag-icon svg{width:44px;height:44px;fill:#69d17d}108 .promo-title{font-size:44px;font-weight:800}109 .promo-sub{font-size:30px;color:#b9a89a;margin-top:6px}110 111 /* Compose floating button */112 .compose{113 position:absolute;right:64px;bottom:380px;114 background:#5a4636;color:#eadfd2;115 height:120px;padding:0 36px;border-radius:26px;116 box-shadow:0 12px 24px rgba(0,0,0,0.35);117 display:flex;align-items:center;gap:18px;font-size:40px;font-weight:700;118 }119 .compose svg{width:42px;height:42px;fill:#eadfd2}120 121 /* Snackbar */122 .snackbar{123 position:absolute;left:30px;right:30px;bottom:250px;124 background:#e9ddcf;color:#3b2f25;border-radius:18px;125 height:92px;display:flex;align-items:center;justify-content:space-between;126 padding:0 26px;font-size:34px;font-weight:600;127 }128 .snack-action{color:#5a4636}129 130 /* Bottom nav */131 .bottom-nav{132 position:absolute;left:0;right:0;bottom:96px;height:132px;133 background:#2a1f16;border-top-left-radius:24px;border-top-right-radius:24px;134 display:flex;align-items:center;justify-content:space-around;135 }136 .nav-item{color:#c9b8a9;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:26px}137 .nav-item svg{width:56px;height:56px;fill:#c9b8a9}138 .nav-active{139 background:#5a4636;border-radius:36px;padding:14px 30px;color:#eadfd2;140 position:relative;141 }142 .badge{143 position:absolute;top:-8px;right:-8px;background:#e54545;color:#fff;144 width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;145 font-size:24px;font-weight:700;146 }147 148 /* Gesture bar */149 .gesture{150 position:absolute;left:50%;transform:translateX(-50%);151 bottom:36px;width:240px;height:10px;border-radius:10px;background:#e9e6e3;opacity:0.9;152 }153</style>154</head>155<body>156<div id="render-target">157 158 <!-- Status bar -->159 <div class="status-bar">160 <div>8:39</div>161 <div class="status-right">162 <span class="icon-small">163 <!-- Screen record icon substitute -->164 <svg viewBox="0 0 24 24"><path d="M5 8h9a3 3 0 0 1 3 3v5H5V8z"></path><circle cx="18" cy="7" r="2"></circle></svg>165 </span>166 <span class="icon-small">167 <!-- sun -->168 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"></circle><path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" stroke="#e9decd" stroke-width="2" fill="none"/></svg>169 </span>170 <span class="icon-small">171 <!-- cloud -->172 <svg viewBox="0 0 24 24"><path d="M6 18h10a4 4 0 0 0 0-8 6 6 0 0 0-11-1A4 4 0 0 0 6 18z"></path></svg>173 </span>174 <span class="icon-small">175 <!-- wifi -->176 <svg viewBox="0 0 24 24"><path d="M2 8a16 16 0 0 1 20 0M5 12a10 10 0 0 1 14 0M9 16a4 4 0 0 1 6 0"></path><circle cx="12" cy="19" r="1.5" fill="#e9decd"/></svg>177 </span>178 <span class="icon-small">179 <!-- battery -->180 <svg viewBox="0 0 26 24"><rect x="2" y="6" width="20" height="12" rx="2" ry="2"></rect><rect x="22" y="9" width="2" height="6"></rect></svg>181 </span>182 </div>183 </div>184 185 <!-- Search -->186 <div class="search-wrap">187 <div class="search-bar">188 <div class="hamburger">189 <svg viewBox="0 0 24 24" width="44" height="44" fill="#cdbfaf"><rect x="3" y="5" width="18" height="2"></rect><rect x="3" y="11" width="18" height="2"></rect><rect x="3" y="17" width="18" height="2"></rect></svg>190 </div>191 <div class="search-input">Search in mail</div>192 <div class="account">N</div>193 </div>194 </div>195 196 <div class="section-title">Primary</div>197 198 <div class="list">199 200 <!-- Promotions row -->201 <div class="promotions">202 <div class="tag-icon">203 <svg viewBox="0 0 24 24"><path d="M3 7l7-3 8 8-7 7-8-8z" fill="#69d17d"/></svg>204 </div>205 <div>206 <div class="promo-title">Promotions</div>207 <div class="promo-sub">eBay</div>208 </div>209 </div>210 211 <!-- Email 1 -->212 <div class="email">213 <div class="avatar">[IMG: eBay logo]</div>214 <div class="content">215 <div class="row-top">216 <div class="sender">me, Mail <span style="color:#aa9b8d;font-weight:600">2</span></div>217 <div class="right-meta">218 <div class="date">Oct 12</div>219 <div class="star">220 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>221 </div>222 </div>223 </div>224 <div class="subject" style="font-weight:600">All Recipes App</div>225 <div class="snippet">Address not found Your message wasn't deli...</div>226 </div>227 </div>228 229 <!-- Email 2 -->230 <div class="email">231 <div class="avatar">[IMG: eBay logo]</div>232 <div class="content">233 <div class="row-top">234 <div class="sender">eBay</div>235 <div class="right-meta">236 <div class="date">Oct 12</div>237 <div class="star">238 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>239 </div>240 </div>241 </div>242 <div class="subject">Recently viewed: New Twin Tubs Washing M...</div>243 <div class="snippet">Give it another look</div>244 </div>245 </div>246 247 <!-- Email 3 -->248 <div class="email">249 <div class="avatar">[IMG: eBay logo]</div>250 <div class="content">251 <div class="row-top">252 <div class="sender">eBay</div>253 <div class="right-meta">254 <div class="date">Oct 11</div>255 <div class="star">256 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>257 </div>258 </div>259 </div>260 <div class="subject">Recently viewed: Woman K‑Swiss ST329...</div>261 <div class="snippet">Give it another look</div>262 </div>263 </div>264 265 <!-- Email 4 -->266 <div class="email">267 <div class="avatar">[IMG: eBay logo]</div>268 <div class="content">269 <div class="row-top">270 <div class="sender">eBay</div>271 <div class="right-meta">272 <div class="date">Oct 10</div>273 <div class="star">274 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>275 </div>276 </div>277 </div>278 <div class="subject">K‑Swiss Women's Sneakers K‑Swiss Cou...</div>279 <div class="snippet">They have 99.6% positive feedback</div>280 </div>281 </div>282 283 <!-- Email 5 -->284 <div class="email">285 <div class="avatar">[IMG: eBay logo]</div>286 <div class="content">287 <div class="row-top">288 <div class="sender">eBay</div>289 <div class="right-meta">290 <div class="date">Oct 9</div>291 <div class="star">292 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>293 </div>294 </div>295 </div>296 <div class="subject">Your discount on 11 Pro+ 5G 8/256Gb... h...</div>297 <div class="snippet">Buy it now for $517.13</div>298 </div>299 </div>300 301 <!-- Email 6 -->302 <div class="email" style="padding-bottom:180px">303 <div class="avatar">[IMG: eBay logo]</div>304 <div class="content">305 <div class="row-top">306 <div class="sender">eBay</div>307 <div class="right-meta">308 <div class="date">Oct 8</div>309 <div class="star">310 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>311 </div>312 </div>313 </div>314 <div class="subject">You have an offer from the...</div>315 <div class="snippet">Here's a special discount for you...</div>316 </div>317 </div>318 319 </div>320 321 <!-- Compose -->322 <div class="compose">323 <svg viewBox="0 0 24 24"><path d="M3 17v4h4l10-10-4-4L3 17zM14 6l4 4"/></svg>324 <div>Compose</div>325 </div>326 327 <!-- Snackbar -->328 <div class="snackbar">329 <div>1 deleted</div>330 <div class="snack-action">Undo</div>331 </div>332 333 <!-- Bottom navigation -->334 <div class="bottom-nav">335 <div class="nav-item nav-active">336 <svg viewBox="0 0 24 24"><path d="M2 6h20v12H2z"></path><path d="M2 6l10 7 10-7" fill="#eadfd2"></path></svg>337 <div class="badge">4</div>338 </div>339 <div class="nav-item">340 <svg viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 4z"></path></svg>341 </div>342 <div class="nav-item">343 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="12" rx="2"/><path d="M10 16v3h4v-3" fill="#c9b8a9"/></svg>344 </div>345 </div>346 347 <div class="gesture"></div>348</div>349</body>350</html>