GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mail UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: #0c0c0f;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 padding: 0 28px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #eaeaea;28 font-size: 36px;29 letter-spacing: 0.2px;30 background: rgba(0,0,0,0.55);31 }32 .status-icons {33 display:flex;34 align-items:center;35 gap:24px;36 }37 .icon { width: 38px; height: 38px; fill: #eaeaea; }38 39 /* Header */40 .header {41 position: absolute;42 top: 90px;43 left: 0;44 width: 1080px;45 height: 110px;46 display:flex;47 align-items:center;48 padding: 0 24px;49 gap: 24px;50 }51 .back-btn {52 width: 64px; height: 64px; border-radius: 32px;53 display:flex; align-items:center; justify-content:center;54 }55 .header-title { font-size: 48px; font-weight: 600; }56 57 /* Tabs */58 .tabs {59 position: absolute;60 top: 200px;61 left: 0;62 width: 1080px;63 height: 84px;64 display:flex;65 align-items:center;66 padding: 0 24px;67 gap: 16px;68 }69 .tab {70 padding: 18px 28px;71 border-radius: 40px;72 font-size: 32px;73 color: #cfcfcf;74 background: #1a1a1e;75 }76 .tab.active {77 color:#fff;78 background:#2a2a2f;79 font-weight:600;80 }81 82 /* List */83 .list {84 position:absolute;85 top: 284px;86 left:0;87 width: 1080px;88 height: 1636px; /* until above bottom nav */89 overflow:hidden;90 padding-bottom: 12px;91 }92 .mail-item {93 display:flex;94 gap: 20px;95 padding: 26px 24px;96 border-bottom: 1px solid rgba(255,255,255,0.06);97 }98 .mail-item.selected {99 background: rgba(194,160,67,0.18);100 }101 .avatar {102 width: 92px; height: 92px; border-radius: 46px;103 display:flex; align-items:center; justify-content:center;104 font-weight:700; font-size: 36px;105 }106 .avatar.gray { background:#2b2b30; color:#cfcfcf; }107 .avatar.green { background:#1bde78; color:#113520; }108 .avatar.red { background:#ff5a49; color:#3b0d0b; }109 .avatar.blue { background:#4aa6ff; color:#0b2743; }110 .avatar.orange { background:#e9a36a; color:#3a210e; }111 112 .mail-content { flex: 1; }113 .subject {114 font-size: 36px; font-weight: 700; margin-bottom: 8px;115 }116 .snippet {117 font-size: 30px; color:#b6b6b6;118 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;119 }120 .meta-right {121 width: 180px; text-align:right; font-size: 28px; color:#9aa0a6;122 }123 124 /* Overlay action menu */125 .action-overlay {126 position:absolute;127 top: 280px;128 right: 20px;129 width: 540px;130 background:#2a2a2f;131 border-radius: 20px;132 box-shadow: 0 20px 50px rgba(0,0,0,0.6);133 padding: 20px 24px;134 }135 .action-item {136 display:flex; align-items:center; gap: 26px;137 padding: 24px 12px;138 font-size: 34px;139 border-radius: 12px;140 color:#f1f1f1;141 }142 .action-item + .action-item { border-top: 1px solid rgba(255,255,255,0.06); }143 .action-icon { width: 44px; height: 44px; fill:#cfd8dc; }144 145 /* Floating compose */146 .compose {147 position:absolute;148 bottom: 250px;149 right: 40px;150 height: 140px;151 display:flex; align-items:center; gap: 26px;152 padding: 0 40px;153 background:#0a88ff;154 color:#fff; font-size: 42px; font-weight:600;155 border-radius: 70px;156 box-shadow: 0 20px 40px rgba(10,136,255,0.4);157 }158 .compose .icon { fill:#fff; width: 48px; height: 48px; }159 160 /* Bottom nav */161 .bottom-nav {162 position:absolute;163 bottom:0; left:0; width:1080px; height: 170px;164 background:#111114;165 display:flex; align-items:center; justify-content:space-around;166 border-top:1px solid rgba(255,255,255,0.08);167 }168 .nav-item {169 display:flex; flex-direction:column; align-items:center; gap: 8px;170 color:#9aa0a6; font-size:28px;171 }172 .nav-item.active { color:#3ea6ff; }173 .nav-item svg { width:48px; height:48px; fill: currentColor; }174 175 /* Small check pill for selected item */176 .check-pill {177 width: 64px; height: 64px; border-radius: 32px;178 border: 2px solid #3ea6ff;179 display:flex; align-items:center; justify-content:center;180 color:#3ea6ff;181 }182 183 /* Divider labels */184 .day-label {185 color:#8b8b90; font-size:28px; padding: 16px 24px;186 }187</style>188</head>189<body>190<div id="render-target">191 192 <!-- Status Bar -->193 <div class="status-bar">194 <div>10:04</div>195 <div class="status-icons">196 <!-- small mail envelope near clock is omitted; right side icons -->197 <svg class="icon" viewBox="0 0 24 24"><path d="M12 4l8 4v8l-8 4-8-4V8l8-4zm-6.7 5.5L12 13l6.7-3.5V9L12 12 5.3 9.5z"/></svg>198 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3c4.97 0 9 4.03 9 9h-2a7 7 0 10-7 7v2C7.03 21 3 16.97 3 12S7.03 3 12 3z"/></svg>199 <svg class="icon" viewBox="0 0 24 24"><path d="M20 7h-3V5a3 3 0 00-3-3H10a3 3 0 00-3 3v2H4a2 2 0 00-2 2v11a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2zm-9-2h2a1 1 0 011 1v1H10V6a1 1 0 011-1zm9 15H4V9h16v11z"/></svg>200 <div style="display:flex; align-items:center; gap:10px;">201 <svg class="icon" viewBox="0 0 24 24"><path d="M18 6c-2.76 0-5 2.24-5 5h2c0-1.65 1.35-3 3-3s3 1.35 3 3-1.35 3-3 3H6v2h12a5 5 0 000-10z"/></svg>202 <span style="font-size:32px;">100%</span>203 </div>204 </div>205 </div>206 207 <!-- Header -->208 <div class="header">209 <div class="back-btn">210 <svg class="icon" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/></svg>211 </div>212 <div class="header-title">1 Selected</div>213 </div>214 215 <!-- Tabs -->216 <div class="tabs">217 <div class="tab active">Focused</div>218 <div class="tab">Other</div>219 </div>220 221 <!-- Email List -->222 <div class="list">223 224 <div class="mail-item">225 <div class="avatar gray">226 <svg width="42" height="42" viewBox="0 0 24 24" style="fill:#cfcfcf;"><path d="M4 4h16v16H4z" opacity=".2"/><path d="M4 6l8 5 8-5v12H4z"/></svg>227 </div>228 <div class="mail-content">229 <div class="subject">Other emails</div>230 <div class="snippet">Flipboard 10 For Today ...</div>231 </div>232 <div class="meta-right"></div>233 </div>234 235 <div class="mail-item">236 <div class="avatar green">CR</div>237 <div class="mail-content">238 <div class="subject">Cerebra Research</div>239 <div class="snippet">Business meeting with our partners — We have a business meeting...</div>240 </div>241 <div class="meta-right"></div>242 </div>243 244 <div class="mail-item">245 <div class="avatar red">CR</div>246 <div class="mail-content">247 <div class="subject">Cerebra Research</div>248 <div class="snippet">M.O.M | Discussion on Task Overlay should be ...</div>249 </div>250 <div class="meta-right"></div>251 </div>252 253 <div class="day-label">Yesterday</div>254 255 <div class="mail-item">256 <div class="avatar blue">F</div>257 <div class="mail-content">258 <div class="subject">Flipboard</div>259 <div class="snippet">What's new on Flipboard — A daily roundup of highlights for you...</div>260 </div>261 <div class="meta-right">Yesterday</div>262 </div>263 264 <div class="mail-item">265 <div class="avatar blue">F</div>266 <div class="mail-content">267 <div class="subject">Feedly</div>268 <div class="snippet">The top publications in your industry — Bundles of sources for your...</div>269 </div>270 <div class="meta-right">Yesterday</div>271 </div>272 273 <div class="mail-item">274 <div class="avatar">275 <div style="width:92px;height:92px;border-radius:46px;background:#f5f5f5;color:#333;display:flex;align-items:center;justify-content:center;border:2px solid #ddd;">276 <span style="font-size:30px;">[IMG: Google logo]</span>277 </div>278 </div>279 <div class="mail-content">280 <div class="subject">Google</div>281 <div class="snippet">Security alert — Microsoft apps & services was granted access...</div>282 </div>283 <div class="meta-right">Yesterday</div>284 </div>285 286 <div class="mail-item">287 <div class="avatar orange">F</div>288 <div class="mail-content">289 <div class="subject">FitOn</div>290 <div class="snippet">Unlock the power of protein for weight loss — 9 practical tips to hit your daily goal...</div>291 </div>292 <div class="meta-right">Yesterday</div>293 </div>294 295 <div class="mail-item selected">296 <div class="check-pill">297 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16.17l-3.88-3.88L3.7 13.71 9 19l12-12-1.41-1.41z"/></svg>298 </div>299 <div class="mail-content">300 <div class="subject">Flipboard 10 For Today</div>301 <div class="snippet">Why some cities are more— Plus, what you need in your ...</div>302 </div>303 <div class="meta-right">Yesterday</div>304 </div>305 306 </div>307 308 <!-- Action overlay panel -->309 <div class="action-overlay">310 <div class="action-item">311 <svg class="action-icon" viewBox="0 0 24 24"><path d="M4 4h16v14H4V4zm2 2v10h12V6H6zm4 12h4l-2 2-2-2z"/></svg>312 <div>Move to folder</div>313 </div>314 <div class="action-item">315 <svg class="action-icon" viewBox="0 0 24 24"><path d="M3 6h18v4H3V6zm0 6h10v6H3v-6zm12 0h6v6h-6v-6z"/></svg>316 <div>Move to Other</div>317 </div>318 <div class="action-item">319 <svg class="action-icon" viewBox="0 0 24 24"><path d="M3 3h18v18H3V3zm9 14l-5-5h3V7h4v5h3l-5 5z"/></svg>320 <div>Report junk</div>321 </div>322 <div class="action-item">323 <svg class="action-icon" viewBox="0 0 24 24"><path d="M4 4h16v12H4z"/><path d="M12 20l-4-4h8l-4 4z"/></svg>324 <div>Ignore conversation</div>325 </div>326 <div class="action-item">327 <svg class="action-icon" viewBox="0 0 24 24"><path d="M6 2h12v20H6z" opacity=".2"/><path d="M7 4h10v13H7zM7 19h10v1H7z"/></svg>328 <div>Mark as unread</div>329 </div>330 <div class="action-item">331 <svg class="action-icon" viewBox="0 0 24 24"><path d="M6 2l12 8-12 8V2zm2 5.2v9.6L15.2 10 8 7.2z"/></svg>332 <div>Unflag</div>333 </div>334 <div class="action-item">335 <svg class="action-icon" viewBox="0 0 24 24"><path d="M6 2h12v20H6z" opacity=".2"/><path d="M8 4h8v7l-4-2-4 2V4z"/></svg>336 <div>Pin</div>337 </div>338 <div class="action-item">339 <svg class="action-icon" viewBox="0 0 24 24"><path d="M12 6a5 5 0 015 5h-4l4 6-9-6h4a3 3 0 113-5z"/></svg>340 <div>Snooze</div>341 </div>342 <div class="action-item">343 <svg class="action-icon" viewBox="0 0 24 24"><path d="M4 11h16v2H4zM4 7h16v2H4zM4 15h16v2H4z"/></svg>344 <div>Select all</div>345 </div>346 </div>347 348 <!-- Compose button -->349 <div class="compose">350 <svg class="icon" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm18.71-11.21a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>351 <div>New mail</div>352 <svg class="icon" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>353 </div>354 355 <!-- Bottom navigation -->356 <div class="bottom-nav">357 <div class="nav-item active">358 <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z" opacity=".2"/><path d="M20 6l-8 5-8-5v12h16V6z"/></svg>359 <div>Mail</div>360 </div>361 <div class="nav-item">362 <svg viewBox="0 0 24 24"><path d="M7 3h10v2H7zM5 7h14v14H5z"/><path d="M7 9h10v4H7z"/></svg>363 <div>Calendar</div>364 </div>365 <div class="nav-item">366 <svg viewBox="0 0 24 24"><path d="M3 4h18v2H3zM3 9h18v2H3zM3 14h18v2H3zM3 19h18v2H3z"/></svg>367 <div>Feed</div>368 </div>369 <div class="nav-item">370 <svg viewBox="0 0 24 24"><path d="M12 2a5 5 0 015 5v2h3a2 2 0 012 2v9H2V11a2 2 0 012-2h3V7a5 5 0 015-5zm-3 7h6V7a3 3 0 00-6 0v2z"/></svg>371 <div>More</div>372 </div>373 </div>374 375</div>376</body>377</html>