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 UI Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#121212; color:#fff;13 }14 15 /* Status bar */16 .status-bar {17 height:120px; padding:0 40px;18 display:flex; align-items:center; justify-content:space-between;19 color:#fff; font-size:44px; opacity:0.9;20 }21 .status-icons { display:flex; align-items:center; gap:28px; }22 .status-icon { width:40px; height:40px; display:inline-block; }23 24 /* App bar */25 .app-bar {26 height:140px; padding:0 34px;27 display:flex; align-items:center; justify-content:space-between;28 }29 .app-left { display:flex; align-items:center; gap:26px; }30 .back-btn svg { width:52px; height:52px; fill:#fff; }31 .app-title { font-size:56px; font-weight:600; }32 .app-actions { display:flex; align-items:center; gap:42px; }33 .app-actions svg { width:52px; height:52px; fill:#fff; opacity:0.9; }34 35 /* Tabs */36 .tabs {37 padding:24px 34px;38 display:flex; align-items:center; justify-content:flex-start; gap:24px;39 }40 .pill {41 padding:18px 28px; border-radius:28px;42 background:#2a2a2a; color:#fafafa; font-size:34px; font-weight:600;43 }44 .pill.secondary { color:#cfcfcf; background:#202020; }45 .tabs .spacer { flex:1; }46 .filter-pill { padding:18px 26px; border-radius:28px; background:#2a2a2a; color:#d0d0d0; font-size:34px; }47 48 /* List */49 .list { padding-top:8px; }50 .section-label {51 padding:26px 34px 12px 34px; color:#bdbdbd; font-size:34px;52 }53 .item {54 display:flex; align-items:center;55 padding:28px 34px; gap:28px; border-bottom:1px solid #1e1e1e;56 }57 .item.selected { background:#5a4c25; } /* goldish selection */58 .avatar {59 width:96px; height:96px; border-radius:50%;60 display:flex; align-items:center; justify-content:center;61 font-weight:700; font-size:42px; color:#fff;62 }63 .avatar.grey { background:#3a3a3a; }64 .avatar.green { background:#45c06a; }65 .avatar.red { background:#eb5a4f; }66 .avatar.blue { background:#5aa3f0; }67 .avatar.brown { background:#a48369; }68 .avatar.google { background:#fff; color:#333; font-size:36px; }69 .content { flex:1; min-width:0; }70 .sender { font-size:44px; font-weight:800; line-height:1.2; }71 .subject { font-size:40px; font-weight:700; margin-top:8px; color:#e6e6e6; }72 .snippet { font-size:34px; color:#a9a9a9; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }73 .meta { width:200px; text-align:right; }74 .time { font-size:34px; color:#4aa3ff; font-weight:700; }75 .badge {76 margin-top:14px; margin-left:auto; background:#2579ff; color:#fff;77 border-radius:12px; padding:8px 12px; font-size:32px; width:56px; text-align:center;78 }79 80 /* Divider "Yesterday" */81 .day-divider {82 display:flex; align-items:center; gap:18px; padding:24px 34px; color:#a7a7a7; font-size:36px;83 border-top:1px solid #1e1e1e;84 }85 .day-divider::before {86 content:""; flex:1; height:1px; background:#1e1e1e;87 }88 .day-divider::after {89 content:""; flex:1; height:1px; background:#1e1e1e;90 }91 92 /* FAB */93 .fab {94 position:absolute; right:140px; bottom:340px;95 background:#4c8df7; color:#fff; height:120px; width:520px;96 border-radius:60px; display:flex; align-items:center; justify-content:space-between;97 box-shadow:0 8px 20px rgba(0,0,0,0.4); padding:0 34px;98 }99 .fab .label { font-size:42px; font-weight:700; display:flex; align-items:center; gap:22px; }100 .fab svg { width:52px; height:52px; fill:#fff; }101 102 /* Bottom nav */103 .bottom-nav {104 position:absolute; left:0; right:0; bottom:140px;105 height:160px; background:#0f0f0f; border-top:1px solid #1e1e1e;106 display:flex; justify-content:space-around; align-items:center;107 }108 .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#9e9e9e; }109 .nav-item.active { color:#4c8df7; }110 .nav-item svg { width:52px; height:52px; }111 .gesture {112 position:absolute; left:50%; transform:translateX(-50%);113 bottom:60px; width:280px; height:12px; background:#e9e9e9; border-radius:6px; opacity:0.9;114 }115</style>116</head>117<body>118<div id="render-target">119 120 <!-- Status Bar -->121 <div class="status-bar">122 <div class="time">9:58</div>123 <div class="status-icons">124 <span class="status-icon">📶</span>125 <span class="status-icon">🔋</span>126 <span style="font-size:40px;">100%</span>127 </div>128 </div>129 130 <!-- App Bar -->131 <div class="app-bar">132 <div class="app-left">133 <div class="back-btn">134 <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>135 </div>136 <div class="app-title">1 Selected</div>137 </div>138 <div class="app-actions">139 <!-- Delete -->140 <svg viewBox="0 0 24 24"><path d="M9 3h6l1 2h4v2H4V5h4l1-2zm1 6h2v8H10V9zm4 0h2v8h-2V9z" /></svg>141 <!-- Archive -->142 <svg viewBox="0 0 24 24"><path d="M3 4h18v4H3V4zm2 6h14v10H5V10zm4 2l3 3 3-3" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>143 <!-- More -->144 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>145 </div>146 </div>147 148 <!-- Tabs -->149 <div class="tabs">150 <div class="pill">Focused</div>151 <div class="pill secondary">Other</div>152 <div class="spacer"></div>153 <div class="filter-pill">Filter</div>154 </div>155 156 <!-- List -->157 <div class="list">158 <div class="item">159 <div class="avatar grey">160 <svg viewBox="0 0 24 24" width="44" height="44" style="fill:none; stroke:#fff; stroke-width:1.8;">161 <path d="M3 6h18v12H3z"/><path d="M3 6l9 7 9-7"/>162 </svg>163 </div>164 <div class="content">165 <div class="sender">Other emails</div>166 <div class="subject">Flipboard 10 For Today, FitOn</div>167 </div>168 <div class="meta">169 <div class="badge">2</div>170 </div>171 </div>172 173 <div class="item">174 <div class="avatar green">CR</div>175 <div class="content">176 <div class="sender">Cerebra Research</div>177 <div class="subject">Business meeting with the Clients</div>178 <div class="snippet">We have a business meeting on August 30, 2023, …</div>179 </div>180 <div class="meta">181 <div class="time">9:52 AM</div>182 </div>183 </div>184 185 <div class="item">186 <div class="avatar red">CR</div>187 <div class="content">188 <div class="sender">Cerebra Research</div>189 <div class="subject">M.O.M | Discussion on Multiple Judgments</div>190 <div class="snippet">Task Overlay should be not in this type of video as…</div>191 </div>192 <div class="meta">193 <div class="time">8:09 AM</div>194 </div>195 </div>196 197 <div class="day-divider">Yesterday</div>198 199 <div class="item">200 <div class="avatar blue">F</div>201 <div class="content">202 <div class="sender">Flipboard</div>203 <div class="subject">What's new on Flipboard: Stories from Politics, U…</div>204 <div class="snippet">A daily roundup of highlights from your Flipboard. …</div>205 </div>206 <div class="meta">207 <div class="time">Yesterday</div>208 </div>209 </div>210 211 <div class="item">212 <div class="avatar blue">F</div>213 <div class="content">214 <div class="sender">Feedly</div>215 <div class="subject">The top publications in your industry</div>216 <div class="snippet">Bundles of sources for your industry</div>217 </div>218 <div class="meta">219 <div class="time">Yesterday</div>220 </div>221 </div>222 223 <div class="item">224 <div class="avatar google">G</div>225 <div class="content">226 <div class="sender">Google</div>227 <div class="subject">Security alert</div>228 <div class="snippet">Microsoft apps & services was granted access to …</div>229 </div>230 <div class="meta">231 <div class="time">Yesterday</div>232 </div>233 </div>234 235 <div class="item">236 <div class="avatar brown">F</div>237 <div class="content">238 <div class="sender">FitOn</div>239 <div class="subject">Unlock the power of protein for weight loss</div>240 <div class="snippet">Plus, 9 practical tips to hit your daily protein goal …</div>241 </div>242 <div class="meta">243 <div class="time">Yesterday</div>244 </div>245 </div>246 247 <div class="item selected">248 <div class="avatar" style="background:#3467ff;">✓</div>249 <div class="content">250 <div class="sender">Flipboard 10 For Today</div>251 <div class="subject">Why some cities are m…</div>252 <div class="snippet">Plus, what you need in your…</div>253 </div>254 <div class="meta">255 <div class="time">Yesterday</div>256 </div>257 </div>258 </div>259 260 <!-- Floating Action Button -->261 <div class="fab">262 <div class="label">263 <svg viewBox="0 0 24 24"><path d="M5 4h10l5 5v11H5z" fill="none" stroke="white" stroke-width="2"/><path d="M8 12h8" stroke="white" stroke-width="2"/></svg>264 <span>New mail</span>265 </div>266 <div>267 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>268 </div>269 </div>270 271 <!-- Bottom Navigation -->272 <div class="bottom-nav">273 <div class="nav-item active">274 <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/><path d="M3 6l9 6 9-6" fill="none" stroke="currentColor" stroke-width="2"/></svg>275 <div>Mail</div>276 </div>277 <div class="nav-item">278 <svg viewBox="0 0 24 24"><path d="M7 3h10v6H7zM5 11h14v10H5z" fill="none" stroke="currentColor" stroke-width="2"/></svg>279 <div>Calendar</div>280 </div>281 <div class="nav-item">282 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="19" cy="12" r="3"/></svg>283 <div>Feed</div>284 </div>285 <div class="nav-item">286 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>287 <div>More</div>288 </div>289 </div>290 291 <!-- Gesture bar -->292 <div class="gesture"></div>293</div>294</body>295</html>