GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mail List UI - Dark</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #121212;14 color: #E5E5E5;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 }17 18 /* Status bar */19 .status-bar {20 height: 110px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #FFFFFF;26 font-weight: 600;27 font-size: 42px;28 letter-spacing: 0.5px;29 }30 .status-icons {31 display: flex;32 gap: 22px;33 align-items: center;34 }35 .status-dot { width: 12px; height: 12px; background:#9AA0A6; border-radius: 50%; }36 .status-icon {37 width: 40px; height: 40px;38 }39 .battery {40 width: 52px; height: 28px; border: 3px solid #FFFFFF; border-radius: 6px; position: relative;41 }42 .battery::after {43 content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 12px; background: #FFFFFF; border-radius: 2px;44 }45 .battery-level {46 position: absolute; left: 3px; top: 3px; height: 20px; width: 32px; background: #FFFFFF; border-radius: 3px;47 }48 49 /* Search bar area */50 .top-area {51 padding: 18px 36px 10px 36px;52 }53 .search-pill {54 background: #2A3137;55 height: 110px;56 border-radius: 55px;57 display: flex;58 align-items: center;59 padding: 0 24px;60 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);61 }62 .icon-btn {63 width: 78px; height: 78px; border-radius: 39px;64 display: flex; align-items: center; justify-content: center;65 color:#C7C7C7;66 }67 .icon-btn svg { width: 42px; height: 42px; }68 .search-text {69 flex: 1;70 color: #C7CDD1;71 font-size: 40px;72 margin-left: 18px;73 }74 .avatar-img {75 width: 78px; height: 78px; border-radius: 39px;76 background: #E0E0E0; border: 1px solid #BDBDBD;77 display: flex; align-items: center; justify-content: center;78 color:#757575; font-size: 22px;79 }80 81 /* Section label */82 .section-label {83 margin: 42px 36px 18px 36px;84 color: #9AA0A6;85 font-size: 36px;86 }87 88 /* Email list */89 .list {90 padding: 0 0 0 0;91 }92 .row {93 display: flex;94 align-items: flex-start;95 padding: 28px 36px;96 border-bottom: 1px solid rgba(255,255,255,0.06);97 }98 .avatar {99 width: 98px; height: 98px; border-radius: 49px;100 background: #546E7A; color: #D7E3EA;101 display: flex; align-items: center; justify-content: center;102 font-size: 42px; font-weight: 700; margin-right: 26px;103 flex-shrink: 0;104 }105 .avatar.orange { background: #F4A625; color: #1A1A1A; }106 .avatar-img.small { width: 98px; height: 98px; border-radius: 49px; margin-right: 26px; }107 .content {108 flex: 1;109 min-width: 0;110 }111 .title-line {112 display: flex;113 align-items: center;114 gap: 14px;115 }116 .sender {117 font-size: 44px; font-weight: 700; color: #EAEAEA;118 }119 .subject {120 font-size: 40px; font-weight: 700; color: #FFFFFF; margin-top: 6px;121 }122 .snippet {123 font-size: 36px; color: #B8C1C8; margin-top: 8px;124 }125 .right {126 width: 220px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding-left: 16px;127 }128 .meta-time { color: #C9D1D9; font-size: 34px; }129 .star-btn svg { width: 44px; height: 44px; fill: none; stroke: #9AA0A6; stroke-width: 2.5; }130 .more-dots { color:#9AA0A6; font-size: 52px; }131 .badge {132 background: #4CAF50; color: #07210B; font-weight: 700;133 font-size: 34px; padding: 12px 20px; border-radius: 28px;134 }135 .tag-icon svg { width: 50px; height: 50px; stroke:#7CB342; fill:none; stroke-width:3; }136 .promotions .sender { display: flex; align-items: center; gap: 14px; }137 138 /* Floating compose */139 .compose {140 position: absolute;141 right: 40px;142 bottom: 340px;143 background: #2D3A43;144 color: #E8EEF2;145 border-radius: 28px;146 box-shadow: 0 6px 12px rgba(0,0,0,0.35);147 display: flex; align-items: center; gap: 18px;148 padding: 26px 36px;149 }150 .compose svg { width: 40px; height: 40px; fill: none; stroke: #E8EEF2; stroke-width: 3; }151 152 /* Bottom navigation */153 .bottom-nav {154 position: absolute;155 left: 0; right: 0; bottom: 150px;156 height: 140px;157 background: rgba(255,255,255,0.06);158 backdrop-filter: blur(2px);159 display: flex; align-items: center; justify-content: space-around;160 }161 .nav-item {162 color: #C7CDD1; font-size: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px;163 }164 .nav-item svg { width: 54px; height: 54px; fill: none; stroke: #C7CDD1; stroke-width: 3; }165 .nav-badge {166 position: absolute;167 top: -18px; left: 50%;168 transform: translateX(-50%);169 background: #3D5361; color: #FFFFFF; font-size: 32px; border-radius: 26px; padding: 10px 18px;170 display: flex; align-items: center; gap: 10px;171 }172 .home-indicator {173 position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%);174 width: 280px; height: 12px; background: #EAEAEA; border-radius: 6px; opacity: 0.8;175 }176</style>177</head>178<body>179<div id="render-target">180 181 <!-- Status bar -->182 <div class="status-bar">183 <div>11:01</div>184 <div class="status-icons">185 <div class="status-dot"></div>186 <div class="status-dot"></div>187 <div class="status-dot"></div>188 <div class="status-dot"></div>189 <svg class="status-icon" viewBox="0 0 24 24">190 <path d="M3 12l6 6 12-12" stroke="#FFFFFF" stroke-width="3" fill="none"/>191 </svg>192 <div class="battery">193 <div class="battery-level"></div>194 </div>195 </div>196 </div>197 198 <!-- Search -->199 <div class="top-area">200 <div class="search-pill">201 <div class="icon-btn">202 <svg viewBox="0 0 24 24">203 <path d="M3 6h18M3 12h18M3 18h18" stroke="#C7C7C7" stroke-width="2.5" />204 </svg>205 </div>206 <div class="search-text">Search in mail</div>207 <div class="avatar-img">[IMG: Avatar]</div>208 </div>209 </div>210 211 <div class="section-label">Primary</div>212 213 <!-- Email list -->214 <div class="list">215 216 <!-- Facebook -->217 <div class="row">218 <div class="avatar">F</div>219 <div class="content">220 <div class="title-line">221 <div class="sender">Facebook</div>222 </div>223 <div class="subject">Update for you: 1 new notification</div>224 <div class="snippet">A lot has happened on Facebook since you l…</div>225 </div>226 <div class="right">227 <div class="meta-time">10:27 AM</div>228 <div class="star-btn">229 <svg viewBox="0 0 24 24">230 <path d="M12 3l3.3 6.7 7.4 1.1-5.3 5.2 1.3 7.3L12 20l-6.7 3.3 1.3-7.3-5.3-5.2 7.4-1.1z"/>231 </svg>232 </div>233 </div>234 </div>235 236 <!-- Promotions header -->237 <div class="row promotions">238 <div class="tag-icon">239 <svg viewBox="0 0 24 24">240 <path d="M3 12l9 9 9-9-9-9-9 9z"/>241 </svg>242 </div>243 <div class="content">244 <div class="sender">Promotions</div>245 <div class="subject">Temu, Pinterest, Ride with GPS, DIC…</div>246 </div>247 <div class="right">248 <div class="badge">24 new</div>249 </div>250 </div>251 252 <!-- Duolingo - 3 days -->253 <div class="row">254 <div class="avatar-img small">[IMG: Duolingo Owl]</div>255 <div class="content">256 <div class="sender">Duolingo</div>257 <div class="subject">🥺 It’s been 3 days…</div>258 <div class="snippet">Got back into learning in 3 minutes.</div>259 </div>260 <div class="right">261 <div class="meta-time">Oct 23</div>262 <div class="star-btn">263 <svg viewBox="0 0 24 24">264 <path d="M12 3l3.3 6.7 7.4 1.1-5.3 5.2 1.3 7.3L12 20l-6.7 3.3 1.3-7.3-5.3-5.2 7.4-1.1z"/>265 </svg>266 </div>267 </div>268 </div>269 270 <!-- Relive -->271 <div class="row">272 <div class="avatar orange">R</div>273 <div class="content">274 <div class="sender">Relive</div>275 <div class="subject">We think you'll like this, Cerebra</div>276 <div class="snippet">People love their Relive videos, what abou…</div>277 </div>278 <div class="right">279 <div class="meta-time">Oct 23</div>280 <div class="star-btn">281 <svg viewBox="0 0 24 24">282 <path d="M12 3l3.3 6.7 7.4 1.1-5.3 5.2 1.3 7.3L12 20l-6.7 3.3 1.3-7.3-5.3-5.2 7.4-1.1z"/>283 </svg>284 </div>285 </div>286 </div>287 288 <!-- Duolingo - 2 day streak -->289 <div class="row">290 <div class="avatar-img small">[IMG: Duolingo Owl]</div>291 <div class="content">292 <div class="sender">Duolingo</div>293 <div class="subject">Don’t lose your 2 day streak!</div>294 <div class="snippet">Your Streak Freeze saved the day yesterday…</div>295 </div>296 <div class="right">297 <div class="meta-time">Oct 22</div>298 <div class="star-btn">299 <svg viewBox="0 0 24 24">300 <path d="M12 3l3.3 6.7 7.4 1.1-5.3 5.2 1.3 7.3L12 20l-6.7 3.3 1.3-7.3-5.3-5.2 7.4-1.1z"/>301 </svg>302 </div>303 </div>304 </div>305 306 <!-- Duolingo - Keep your 2 day -->307 <div class="row">308 <div class="avatar-img small">[IMG: Duolingo Owl]</div>309 <div class="content">310 <div class="sender">Duolingo</div>311 <div class="subject">Hi Cerebra Research! Keep your 2 day Hi…</div>312 <div class="snippet">Practice now to reach a 3 day streak.</div>313 </div>314 <div class="right">315 <div class="meta-time">Oct 21</div>316 <div class="star-btn">317 <svg viewBox="0 0 24 24">318 <path d="M12 3l3.3 6.7 7.4 1.1-5.3 5.2 1.3 7.3L12 20l-6.7 3.3 1.3-7.3-5.3-5.2 7.4-1.1z"/>319 </svg>320 </div>321 </div>322 </div>323 324 <!-- Duolingo - progress report -->325 <div class="row">326 <div class="avatar-img small">[IMG: Duolingo Owl]</div>327 <div class="content">328 <div class="sender">Duolingo</div>329 <div class="subject">📝 Your progress report is ready</div>330 <div class="snippet">Check out this week's progress</div>331 </div>332 <div class="right">333 <div class="meta-time">Oct 21</div>334 <div class="star-btn">335 <svg viewBox="0 0 24 24">336 <path d="M12 3l3.3 6.7 7.4 1.1-5.3 5.2 1.3 7.3L12 20l-6.7 3.3 1.3-7.3-5.3-5.2 7.4-1.1z"/>337 </svg>338 </div>339 </div>340 </div>341 342 <!-- Michael -->343 <div class="row">344 <div class="avatar">M</div>345 <div class="content">346 <div class="sender">Michael, me</div>347 <div class="subject">3</div>348 <div class="snippet">upcoming events</div>349 </div>350 <div class="right">351 <div class="meta-time">10:50</div>352 <div class="star-btn">353 <svg viewBox="0 0 24 24">354 <path d="M12 3l3.3 6.7 7.4 1.1-5.3 5.2 1.3 7.3L12 20l-6.7 3.3 1.3-7.3-5.3-5.2 7.4-1.1z"/>355 </svg>356 </div>357 </div>358 </div>359 </div>360 361 <!-- Floating compose -->362 <div class="compose">363 <svg viewBox="0 0 24 24">364 <path d="M4 20h16M6 14l9-9 3 3-9 9H6z" />365 </svg>366 <div>Compose</div>367 </div>368 369 <!-- Bottom navigation -->370 <div class="bottom-nav">371 <div class="nav-item" style="position: relative;">372 <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3zM3 5l9 7 9-7"/></svg>373 <div>Mail</div>374 <div class="nav-badge">375 <svg viewBox="0 0 24 24" style="width:28px;height:28px;stroke:#FFF;fill:none;stroke-width:2;"><path d="M3 5h18v14H3zM3 5l9 7 9-7"/></svg>376 <span>99+</span>377 </div>378 </div>379 <div class="nav-item">380 <svg viewBox="0 0 24 24"><path d="M4 4h16v12H8l-4 4z"/></svg>381 <div>Chat</div>382 </div>383 <div class="nav-item">384 <svg viewBox="0 0 24 24"><path d="M12 5l7 4v6l-7 4-7-4V9l7-4z"/></svg>385 <div>Meet</div>386 </div>387 </div>388 389 <div class="home-indicator"></div>390 391</div>392</body>393</html>