GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mail List - Dark UI</title>6<style>7 body { margin:0; padding:0; background:transparent; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#0f1418; color:#e6eaef;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 }14 15 .status-bar {16 height:120px;17 display:flex; align-items:center; justify-content:space-between;18 padding:0 36px; color:#ffffff;19 }20 .status-left { font-size:42px; letter-spacing:1px; }21 .status-center { display:flex; gap:18px; align-items:center; }22 .status-center .dot {23 width:22px; height:22px; background:#ffffff; border-radius:50%;24 opacity:0.85;25 }26 .status-right { display:flex; align-items:center; gap:22px; }27 .icon { width:48px; height:48px; }28 .wifi path, .battery rect, .battery path { fill:#ffffff; }29 30 .search-wrapper { padding:8px 36px 0 36px; }31 .search-bar {32 height:116px; border-radius:58px;33 background:#243038; display:flex; align-items:center;34 padding:0 28px; color:#b9c2c9;35 }36 .hamburger { margin-right:22px; }37 .search-text { font-size:38px; }38 .profile {39 margin-left:auto; width:96px; height:96px; border-radius:50%;40 background:#6a46b9; color:#fff; display:flex; align-items:center; justify-content:center;41 font-size:44px; font-weight:700;42 }43 44 .section-title {45 margin:24px 36px 8px 36px; color:#b6c0c7;46 font-size:36px; font-weight:600;47 }48 49 .list { margin-top:6px; }50 .row {51 display:flex; align-items:center;52 padding:24px 36px;53 border-bottom:1px solid #1b262e;54 }55 .avatar {56 width:96px; height:96px; border-radius:50%;57 display:flex; align-items:center; justify-content:center;58 font-size:42px; font-weight:700; margin-right:26px;59 color:#1b1b1b;60 }61 .avatar.yellow { background:#ffb300; }62 .avatar.grey { background:#9aa5ad; color:#0f1418; }63 .avatar.pink { background:#f06192; color:#0f1418; }64 65 .tag-icon {66 width:84px; height:84px; border-radius:16px;67 background:#2a3a32; display:flex; align-items:center; justify-content:center;68 margin-right:28px;69 }70 .tag-icon svg { width:48px; height:48px; }71 72 .text { flex:1; min-width:0; }73 .title {74 font-size:42px; font-weight:700; color:#ffffff; line-height:1.1;75 }76 .subtitle {77 font-size:32px; color:#a7b1ba; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;78 }79 80 .meta {81 width:160px; text-align:right; color:#b0bac2;82 }83 .date { font-size:32px; margin-bottom:8px; }84 .star { width:48px; height:48px; margin-left:auto; }85 .star svg { width:48px; height:48px; }86 .star-outline path { fill:none; stroke:#b0bac2; stroke-width:3; }87 .star-filled path { fill:#4fa3f7; }88 89 .pill {90 background:#7ad38a; color:#0f1418; font-weight:700;91 padding:12px 20px; border-radius:28px; font-size:30px;92 }93 94 .pdf-chip {95 display:inline-flex; align-items:center; gap:14px;96 padding:12px 18px; border-radius:28px; border:2px solid #3a474f;97 color:#dfe4ea; font-size:30px; margin-top:14px;98 }99 .pdf-badge {100 background:#d34b45; color:#fff; font-weight:700;101 padding:10px 16px; border-radius:12px; font-size:26px;102 }103 104 .fab {105 position:absolute; right:48px; top:1540px;106 background:#2e3b44; color:#e8edf2;107 padding:28px 34px; border-radius:26px; box-shadow:0 10px 24px rgba(0,0,0,0.45);108 display:flex; align-items:center; gap:18px;109 }110 .fab .pencil svg { width:40px; height:40px; fill:#e8edf2; }111 112 .bottom-bar {113 position:absolute; left:0; right:0; bottom:150px; height:160px;114 background:#121a20; display:flex; align-items:center; justify-content:space-around;115 border-top:1px solid #1b262e;116 }117 .nav-icon { width:84px; height:84px; position:relative; }118 .badge {119 position:absolute; right:-10px; top:-8px;120 background:#e56f6f; color:#fff; font-size:26px; font-weight:700;121 padding:6px 12px; border-radius:24px;122 }123 124 .gesture {125 position:absolute; left:50%; transform:translateX(-50%);126 bottom:70px; width:300px; height:12px; background:#e0e0e0; border-radius:8px; opacity:0.85;127 }128</style>129</head>130<body>131<div id="render-target">132 133 <!-- Status bar -->134 <div class="status-bar">135 <div class="status-left">9:08</div>136 <div class="status-center">137 <div class="dot"></div>138 <div class="dot"></div>139 <div class="dot"></div>140 <div class="dot"></div>141 <div class="dot"></div>142 <div class="dot" style="width:10px;height:10px;opacity:0.6;"></div>143 </div>144 <div class="status-right">145 <svg class="icon wifi" viewBox="0 0 24 24">146 <path d="M12 18a2 2 0 1 0 0.001 0zM3 9c5-4 13-4 18 0l-2 2c-4-3-10-3-14 0L3 9zm4 4c3-2 10-2 13 0l-2 2c-2-1-7-1-9 0l-2-2z"></path>147 </svg>148 <svg class="icon battery" viewBox="0 0 24 24">149 <rect x="2" y="7" width="18" height="10" rx="2"></rect>150 <rect x="4" y="9" width="12" height="6" fill="#ffffff"></rect>151 <path d="M22 10v4h-2v-4h2z"></path>152 </svg>153 </div>154 </div>155 156 <!-- Search bar -->157 <div class="search-wrapper">158 <div class="search-bar">159 <svg class="hamburger" width="52" height="52" viewBox="0 0 24 24">160 <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#c6d0d8"></path>161 </svg>162 <div class="search-text">Search in mail</div>163 <div class="profile">A</div>164 </div>165 </div>166 167 <div class="section-title">Primary</div>168 169 <div class="list">170 171 <!-- Promotions -->172 <div class="row">173 <div class="tag-icon">174 <svg viewBox="0 0 24 24">175 <path d="M3 7v6l8 8 10-10-8-8H7a4 4 0 0 0-4 4z" fill="#61c277"></path>176 </svg>177 </div>178 <div class="text">179 <div class="title">Promotions</div>180 <div class="subtitle">Duolingo</div>181 </div>182 <div class="meta">183 <div class="pill">2 new</div>184 </div>185 </div>186 187 <!-- Row 1 -->188 <div class="row">189 <div class="avatar yellow">N</div>190 <div class="text">191 <div class="title">Natalie Larson</div>192 <div class="subtitle">You have to try this recipe I found...</div>193 </div>194 <div class="meta">195 <div class="date">Oct 5</div>196 <div class="star star-outline">197 <svg viewBox="0 0 24 24">198 <path d="M12 17.3l-6.2 3.4 1.6-6.8-5.2-4.5 6.9-.6L12 2l2.9 6.8 6.9.6-5.2 4.5 1.6 6.8z"></path>199 </svg>200 </div>201 </div>202 </div>203 204 <!-- Row 2 -->205 <div class="row">206 <div class="avatar yellow">N</div>207 <div class="text">208 <div class="title">Natalie Larson</div>209 <div class="subtitle">(no subject) — https://www.kitchenstories.com/en/recipes/f...</div>210 </div>211 <div class="meta">212 <div class="date">Oct 4</div>213 <div class="star star-outline">214 <svg viewBox="0 0 24 24">215 <path d="M12 17.3l-6.2 3.4 1.6-6.8-5.2-4.5 6.9-.6L12 2l2.9 6.8 6.9.6-5.2 4.5 1.6 6.8z"></path>216 </svg>217 </div>218 </div>219 </div>220 221 <!-- Row 3 -->222 <div class="row">223 <div class="avatar yellow">N</div>224 <div class="text">225 <div class="title">Natalie Larson</div>226 <div class="subtitle">(no subject) — I found this restaurant on TheFork, what do...</div>227 </div>228 <div class="meta">229 <div class="date">Oct 4</div>230 <div class="star star-outline">231 <svg viewBox="0 0 24 24">232 <path d="M12 17.3l-6.2 3.4 1.6-6.8-5.2-4.5 6.9-.6L12 2l2.9 6.8 6.9.6-5.2 4.5 1.6 6.8z"></path>233 </svg>234 </div>235 </div>236 </div>237 238 <!-- Row 4 -->239 <div class="row">240 <div class="avatar yellow">N</div>241 <div class="text">242 <div class="title">Natalie Larson</div>243 <div class="subtitle">Check out Hard Rock Cafe - Amsterdam on...</div>244 </div>245 <div class="meta">246 <div class="date">Oct 4</div>247 <div class="star star-filled">248 <svg viewBox="0 0 24 24">249 <path d="M12 17.6l-6.5 3.4 1.7-7-5.2-4.6 7.1-.6L12 2l2.9 6.8 7.1.6-5.2 4.6 1.7 7z"></path>250 </svg>251 </div>252 </div>253 </div>254 255 <!-- Row 5 -->256 <div class="row">257 <div class="avatar grey">P</div>258 <div class="text">259 <div class="title" style="font-weight:600;">Pinta Libre</div>260 <div class="subtitle">Un amigo te invitó a pintear 🍺 — Tu salida la armás vos</div>261 </div>262 <div class="meta">263 <div class="date">Oct 3</div>264 <div class="star star-outline">265 <svg viewBox="0 0 24 24">266 <path d="M12 17.3l-6.2 3.4 1.6-6.8-5.2-4.5 6.9-.6L12 2l2.9 6.8 6.9.6-5.2 4.5 1.6 6.8z"></path>267 </svg>268 </div>269 </div>270 </div>271 272 <!-- Row 6 -->273 <div class="row">274 <div class="avatar pink">N</div>275 <div class="text">276 <div class="title">Natalie Larson (via Google Drive)</div>277 <div class="subtitle">Item shared with you: "01. A Voyage to th..." — Natalie Larson shared an item...</div>278 <div class="pdf-chip">279 <div class="pdf-badge">PDF</div>280 <div>01. A Voyage to ...</div>281 </div>282 </div>283 <div class="meta">284 <div class="date">Oct 3</div>285 <div class="star star-outline">286 <svg viewBox="0 0 24 24">287 <path d="M12 17.3l-6.2 3.4 1.6-6.8-5.2-4.5 6.9-.6L12 2l2.9 6.8 6.9.6-5.2 4.5 1.6 6.8z"></path>288 </svg>289 </div>290 </div>291 </div>292 293 </div>294 295 <!-- Compose FAB -->296 <div class="fab">297 <div class="pencil">298 <svg viewBox="0 0 24 24">299 <path d="M3 17.2V21h3.8l11-11-3.8-3.8-11 11zM18.3 3.7l2 2-2.6 2.6-2-2 2.6-2.6z"></path>300 </svg>301 </div>302 <div style="font-size:36px; font-weight:700;">Compose</div>303 </div>304 305 <!-- Bottom navigation -->306 <div class="bottom-bar">307 <div class="nav-icon">308 <svg viewBox="0 0 24 24" width="84" height="84">309 <path d="M2 4h20v16H2z" fill="#c8d1d7"></path>310 <path d="M2 6l10 7 10-7" fill="none" stroke="#0f1418" stroke-width="2"></path>311 </svg>312 <div class="badge">17</div>313 </div>314 <div class="nav-icon">315 <svg viewBox="0 0 24 24" width="84" height="84">316 <path d="M3 5h18v12H7l-4 4V5z" fill="#9aa5ad"></path>317 </svg>318 </div>319 <div class="nav-icon">320 <svg viewBox="0 0 24 24" width="84" height="84">321 <path d="M4 5h16v14H4z" fill="#9aa5ad"></path>322 <path d="M10 9h4v6h-4z" fill="#0f1418"></path>323 </svg>324 </div>325 </div>326 327 <div class="gesture"></div>328 329</div>330</body>331</html>