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>Inbox - Dark</title>7<style>8 body{9 margin:0;10 padding:0;11 background:transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;13 }14 #render-target{15 width:1080px;16 height:2400px;17 position:relative;18 overflow:hidden;19 background:#121212;20 color:#EDEDED;21 }22 23 /* Status bar */24 .status-bar{25 position:absolute;26 top:0;27 left:0;28 width:100%;29 height:96px;30 background:#151915;31 display:flex;32 align-items:center;33 justify-content:space-between;34 padding:0 36px;35 color:#E0E0E0;36 font-size:36px;37 letter-spacing:1px;38 }39 .status-icons{40 display:flex;41 align-items:center;42 gap:26px;43 color:#CFCFCF;44 }45 .status-dot{46 width:10px;height:10px;background:#CFCFCF;border-radius:50%;47 }48 49 /* Action / selection app bar */50 .app-bar{51 position:absolute;52 top:96px;53 left:0;54 width:100%;55 height:136px;56 background:#233425;57 display:flex;58 align-items:center;59 padding:0 24px 0 18px;60 box-sizing:border-box;61 }62 .app-left{63 display:flex;64 align-items:center;65 gap:18px;66 }67 .app-left .count{68 font-size:44px;69 color:#D7EBC3;70 margin-left:10px;71 }72 .app-actions{73 margin-left:auto;74 display:flex;75 align-items:center;76 gap:34px;77 }78 .icon{79 width:56px;height:56px;80 display:inline-flex;align-items:center;justify-content:center;81 }82 .icon svg{width:48px;height:48px;stroke:#D7EBC3;fill:none;stroke-width:3;}83 .icon.filled svg{fill:#D7EBC3;stroke:none;}84 85 /* Select all row */86 .select-all{87 position:absolute;88 top:232px;89 left:0;90 width:100%;91 height:88px;92 display:flex;align-items:center;93 padding:0 36px;94 box-sizing:border-box;95 color:#A8D08D;96 font-size:36px;97 gap:28px;98 }99 .checkbox{100 width:44px;height:44px;border-radius:6px;border:3px solid #A8D08D;101 }102 103 /* List area */104 .list{105 position:absolute;106 top:320px;107 left:0;108 right:0;109 bottom:0;110 overflow:hidden;111 padding-bottom:220px;112 }113 .email{114 display:flex;115 align-items:center;116 padding:28px 30px;117 gap:24px;118 box-sizing:border-box;119 border-bottom:1px solid #262626;120 }121 .email .avatar{122 width:96px;height:96px;border-radius:50%;123 display:flex;align-items:center;justify-content:center;124 font-weight:600;125 font-size:40px;126 color:#111;127 background:#9E9E9E;128 }129 .email .avatar.light{130 background:#BDBDBD;color:#222;131 }132 .email .avatar.yellow{133 background:#E0B53A;color:#111;134 }135 .email .avatar-logo{136 background:#EEEEEE;color:#1a73e8;font-size:34px;137 }138 .email .content{139 flex:1;140 min-width:0;141 }142 .top-row{143 display:flex;align-items:center;144 gap:12px;145 margin-bottom:8px;146 }147 .sender{148 font-size:38px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;149 }150 .date{151 margin-left:auto;color:#BDBDBD;font-size:30px;white-space:nowrap;152 }153 .subject{154 font-size:34px;font-weight:700;color:#FFFFFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;155 }156 .snippet{157 font-size:30px;color:#BDBDBD;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;158 margin-top:6px;159 }160 .star{161 width:64px;height:64px;display:flex;align-items:center;justify-content:center;margin-left:18px;162 }163 .star svg{width:44px;height:44px;stroke:#BDBDBD;fill:none;stroke-width:3;}164 .email.selected{165 background:#2E3D2E;166 border-radius:28px;167 margin:12px 18px 12px 18px;168 border-bottom:none;169 }170 .email.selected .avatar{171 background:#8BC34A;color:#fff;position:relative;172 }173 .email.selected .star svg{stroke:#DDE9D2;}174 .badge{175 display:inline-block;background:#365A3A;color:#DDEFD4;border-radius:14px;176 padding:6px 12px;font-size:26px;margin-left:10px;177 }178 179 /* Floating compose */180 .fab{181 position:absolute;182 right:48px;183 bottom:220px;184 background:#3F5138;185 color:#EAF2E2;186 height:140px;187 width:420px;188 border-radius:80px;189 display:flex;align-items:center;gap:22px;justify-content:center;190 box-shadow:0 8px 20px rgba(0,0,0,0.35);191 font-size:40px;font-weight:600;192 }193 .fab svg{width:42px;height:42px;stroke:#EAF2E2;fill:none;stroke-width:3;}194 195 /* Gesture bar */196 .gesture{197 position:absolute;left:50%;transform:translateX(-50%);198 bottom:100px;width:300px;height:10px;border-radius:6px;background:#9E9E9E55;199 }200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status bar -->206 <div class="status-bar">207 <div>8:35</div>208 <div class="status-icons">209 <div class="status-dot"></div>210 <div class="status-dot"></div>211 <div class="status-dot"></div>212 <span>100%</span>213 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2">214 <rect x="2" y="7" width="18" height="10" rx="2"></rect>215 <rect x="20" y="10" width="2" height="4"></rect>216 </svg>217 </div>218 </div>219 220 <!-- Selection App Bar -->221 <div class="app-bar">222 <div class="app-left">223 <div class="icon">224 <svg viewBox="0 0 24 24"><path d="M15 6L9 12l6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>225 </div>226 <div class="count">1</div>227 </div>228 <div class="app-actions">229 <div class="icon">230 <svg viewBox="0 0 24 24"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16" stroke-linecap="round" stroke-linejoin="round"/></svg>231 </div>232 <div class="icon">233 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 3h6v4H9z"/></svg>234 </div>235 <div class="icon">236 <svg viewBox="0 0 24 24"><path d="M4 7h16M7 7v13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V7" /><path d="M10 11v6M14 11v6"/></svg>237 </div>238 <div class="icon">239 <svg viewBox="0 0 24 24"><path d="M3 6l9 7 9-7v12H3z" /></svg>240 </div>241 <div class="icon filled">242 <svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="20" r="2"/></svg>243 </div>244 </div>245 </div>246 247 <!-- Select all row -->248 <div class="select-all">249 <div class="checkbox"></div>250 <div>Select all</div>251 </div>252 253 <!-- Email List -->254 <div class="list">255 256 <!-- Selected Email -->257 <div class="email selected">258 <div class="avatar">259 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3">260 <path d="M4 12l4 4 12-12" stroke-linecap="round" stroke-linejoin="round"/>261 </svg>262 </div>263 <div class="content">264 <div class="top-row">265 <div class="sender">Natalie Larson</div>266 <div class="date">5:38 PM</div>267 </div>268 <div class="subject">(no subject)</div>269 <div class="snippet">Hi, Karin Natalie this side , I want to shared...</div>270 </div>271 <div class="star">272 <svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 .9-5.1 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.9 10.2l7-.9L12 3z"/></svg>273 </div>274 </div>275 276 <!-- Email item -->277 <div class="email">278 <div class="avatar light">M</div>279 <div class="content">280 <div class="top-row">281 <div class="sender">me, Mail <span class="badge">2</span></div>282 <div class="date">Oct 12</div>283 </div>284 <div class="subject">Join us for a Book fair event</div>285 <div class="snippet">Dear Namoi, I wanted to share some exciti...</div>286 </div>287 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 .9-5.1 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.9 10.2l7-.9L12 3z"/></svg></div>288 </div>289 290 <div class="email">291 <div class="avatar light">292 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">293 <circle cx="12" cy="8" r="4" fill="#DDD" stroke="none"></circle>294 <path d="M4 22c1.5-4 5-6 8-6s6.5 2 8 6" fill="#DDD" stroke="none"></path>295 </svg>296 </div>297 <div class="content">298 <div class="top-row">299 <div class="sender">Yummly</div>300 <div class="date">Oct 11</div>301 </div>302 <div class="subject">Ready to get cooking with Yummly?</div>303 <div class="snippet">Welcome! Get ready to have fun achieving y...</div>304 </div>305 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 .9-5.1 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.9 10.2l7-.9L12 3z"/></svg></div>306 </div>307 308 <div class="email">309 <div class="avatar yellow">M</div>310 <div class="content">311 <div class="top-row">312 <div class="sender">Mail Delivery Subsystem</div>313 <div class="date">Oct 6</div>314 </div>315 <div class="subject">Delivery Status Notification (Failure)</div>316 <div class="snippet">Address not found Your message wasn't deli...</div>317 </div>318 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 .9-5.1 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.9 10.2l7-.9L12 3z"/></svg></div>319 </div>320 321 <div class="email">322 <div class="avatar avatar-logo">ebay</div>323 <div class="content">324 <div class="top-row">325 <div class="sender">eBay</div>326 <div class="date">Oct 6</div>327 </div>328 <div class="subject">A new device is using your account</div>329 <div class="snippet">Here's what you need to know. Let's make s...</div>330 </div>331 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 .9-5.1 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.9 10.2l7-.9L12 3z"/></svg></div>332 </div>333 334 <div class="email">335 <div class="avatar avatar-logo">ebay</div>336 <div class="content">337 <div class="top-row">338 <div class="sender">eBay</div>339 <div class="date">Oct 5</div>340 </div>341 <div class="subject">Karin, your eBay adventure has just beg...</div>342 <div class="snippet">Your perfect find is out there</div>343 </div>344 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 .9-5.1 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.9 10.2l7-.9L12 3z"/></svg></div>345 </div>346 347 <div class="email">348 <div class="avatar" style="background:#2F6B43;color:#CFE8C9;">349 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#CFE8C9" stroke-width="2">350 <path d="M3 12l6 6 12-12" />351 </svg>352 </div>353 <div class="content">354 <div class="top-row">355 <div class="sender">Promotions</div>356 <div class="date"><span class="badge" style="background:#87C174;color:#10250F;">1 new</span></div>357 </div>358 <div class="subject">TheFork</div>359 <div class="snippet"></div>360 </div>361 </div>362 363 <div class="email">364 <div class="avatar light">v</div>365 <div class="content">366 <div class="top-row">367 <div class="sender">Vimeo</div>368 <div class="date">Oct 3</div>369 </div>370 <div class="subject">Your September product u...</div>371 <div class="snippet"></div>372 </div>373 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 .9-5.1 4.9 1.3 7-6.3-3.4-6.3 3.4 1.3-7L1.9 10.2l7-.9L12 3z"/></svg></div>374 </div>375 376 </div>377 378 <!-- Floating Compose Button -->379 <div class="fab">380 <svg viewBox="0 0 24 24"><path d="M4 20h6M3 16l9-9 4 4-9 9H3z" stroke-linejoin="round" stroke-linecap="round"/></svg>381 Compose382 </div>383 384 <!-- Gesture bar -->385 <div class="gesture"></div>386 387</div>388</body>389</html>