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 Inbox UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #121212;15 color: #EAEAEA;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 96px;25 color: #ffffff;26 padding: 0 32px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 font-size: 34px;31 }32 .status-left { display: flex; align-items: center; gap: 16px; }33 .status-right { display: flex; align-items: center; gap: 18px; color: #ffffff; }34 .battery {35 width: 44px; height: 22px; border: 2px solid #fff; border-radius: 4px; position: relative;36 }37 .battery::after {38 content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px;39 }40 .battery .level {41 position: absolute; left: 2px; top: 2px; height: 16px; width: 30px; background: #fff; border-radius: 2px;42 }43 44 /* Top search area */45 .top-area { position: absolute; top: 112px; left: 0; width: 100%; padding: 0 32px; }46 .search-row { display: flex; align-items: center; gap: 24px; }47 .menu-icon {48 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 12px;49 }50 .menu-icon svg { width: 48px; height: 48px; fill: none; stroke: #EAEAEA; stroke-width: 6; }51 .search-field {52 flex: 1;53 height: 110px;54 border-radius: 55px;55 background: #2C3A2C;56 color: #C7D0C3;57 padding: 0 36px;58 display: flex;59 align-items: center;60 font-size: 40px;61 }62 .profile-chip {63 width: 88px; height: 88px; border-radius: 44px; background: #29583F; color: #D8E6DB;64 display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 40px; border: 2px solid #3E614C;65 }66 67 /* Section label */68 .section-label {69 margin-top: 34px;70 padding-left: 32px;71 color: #B6B6B6;72 font-size: 34px;73 }74 75 /* Email list */76 .list {77 position: absolute;78 top: 320px;79 left: 0;80 width: 100%;81 }82 .email-item {83 display: flex;84 align-items: flex-start;85 justify-content: space-between;86 padding: 26px 32px;87 gap: 24px;88 border-bottom: 1px solid rgba(255,255,255,0.06);89 }90 .avatar {91 width: 88px; height: 88px; border-radius: 50%;92 background: #E0E0E0; border: 1px solid #BDBDBD;93 color: #757575; display: flex; align-items: center; justify-content: center; font-size: 22px;94 }95 .avatar.yellow { background: #E0CA5C; color: #4D3D00; }96 .avatar.small-img {97 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 50%;98 }99 .content {100 flex: 1;101 min-width: 0;102 }103 .sender { font-size: 40px; font-weight: 700; color: #ffffff; }104 .subject {105 font-size: 36px; font-weight: 700; color: #ffffff; margin-top: 6px;106 }107 .snippet {108 font-size: 32px; color: #BDBDBD; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;109 }110 .right-col {111 width: 180px; display: flex; flex-direction: column; align-items: flex-end; gap: 18px;112 }113 .timestamp { font-size: 30px; color: #BDBDBD; }114 .star-btn { width: 48px; height: 48px; }115 .star-btn svg { width: 48px; height: 48px; fill: none; stroke: #BDBDBD; stroke-width: 5; }116 117 /* Promotions row */118 .promo-row { display: flex; align-items: center; padding: 28px 32px; gap: 24px; }119 .tag-icon {120 width: 60px; height: 60px; background: #3AA46B; border-radius: 10px; position: relative;121 }122 .tag-icon::after {123 content: ""; position: absolute; left: 8px; top: 26px; width: 10px; height: 10px; border-radius: 50%; background: #c8f5da;124 }125 .promo-text { flex: 1; }126 .promo-title { font-size: 38px; font-weight: 700; color: #ffffff; }127 .promo-sub { font-size: 32px; color: #BDBDBD; margin-top: 6px; }128 .pill {129 padding: 12px 22px; background: #8FD5AB; color: #103b24; border-radius: 26px; font-weight: 700; font-size: 30px;130 }131 132 /* Compose FAB */133 .compose-fab {134 position: absolute; right: 36px; bottom: 250px;135 background: #44543F; color: #EAEAEA;136 height: 120px; width: 320px; border-radius: 26px;137 box-shadow: 0 8px 18px rgba(0,0,0,0.5);138 display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 40px; font-weight: 700;139 }140 .compose-fab svg { width: 40px; height: 40px; fill: none; stroke: #EAEAEA; stroke-width: 6; }141 142 /* Bottom bar */143 .bottom-bar {144 position: absolute; bottom: 0; left: 0; width: 100%; height: 170px; background: #1B1B1B;145 display: flex; align-items: center; justify-content: space-between; padding: 0 80px; color: #BDBDBD;146 }147 .bottom-icon { width: 64px; height: 64px; }148 .bottom-icon svg { width: 64px; height: 64px; fill: none; stroke: #BDBDBD; stroke-width: 6; }149 150 /* Center pill with badge */151 .center-pill {152 position: absolute; left: 50%; transform: translateX(-50%);153 bottom: 110px; width: 220px; height: 100px; background: #2F3B2F; border-radius: 60px;154 display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.5);155 }156 .center-pill svg { width: 56px; height: 56px; fill: none; stroke: #D7E3D7; stroke-width: 6; }157 .badge {158 position: absolute; right: 24px; top: -12px; background: #E9A9AE; color: #2a1a1b; font-weight: 700;159 width: 64px; height: 64px; border-radius: 32px; display: flex; align-items: center; justify-content: center; font-size: 30px; border: 2px solid #f3c4c8;160 }161</style>162</head>163<body>164<div id="render-target">165 166 <!-- Status bar -->167 <div class="status-bar">168 <div class="status-left">8:35</div>169 <div class="status-right">170 <span>⭘</span>171 <span>◓</span>172 <div class="battery"><div class="level"></div></div>173 <span>100%</span>174 </div>175 </div>176 177 <!-- Search area -->178 <div class="top-area">179 <div class="search-row">180 <div class="menu-icon">181 <svg viewBox="0 0 48 48">182 <path d="M6 10h36M6 24h36M6 38h36" />183 </svg>184 </div>185 <div class="search-field">Search in mail</div>186 <div class="profile-chip">K</div>187 </div>188 </div>189 190 <div class="section-label">Primary</div>191 192 <!-- Email list -->193 <div class="list">194 195 <div class="email-item">196 <div class="avatar">[IMG: User Avatar]</div>197 <div class="content">198 <div class="sender">Natalie Larson</div>199 <div class="subject">(no subject)</div>200 <div class="snippet">Hi, Karin Natalie this side , I want to shared...</div>201 </div>202 <div class="right-col">203 <div class="timestamp">5:38 PM</div>204 <div class="star-btn">205 <svg viewBox="0 0 48 48"><path d="M24 5l7 13 15 2-11 10 3 15-14-8-14 8 3-15L2 20l15-2z"/></svg>206 </div>207 </div>208 </div>209 210 <div class="email-item">211 <div class="avatar">[IMG: User Avatar]</div>212 <div class="content">213 <div class="sender">me, Mail 2</div>214 <div class="subject">Join us for a Book fair event</div>215 <div class="snippet">Dear Namoi, I wanted to share some excitin...</div>216 </div>217 <div class="right-col">218 <div class="timestamp">Oct 12</div>219 <div class="star-btn">220 <svg viewBox="0 0 48 48"><path d="M24 5l7 13 15 2-11 10 3 15-14-8-14 8 3-15L2 20l15-2z"/></svg>221 </div>222 </div>223 </div>224 225 <div class="email-item">226 <div class="avatar">[IMG: User Avatar]</div>227 <div class="content">228 <div class="sender">Yummly</div>229 <div class="snippet">Ready to get cooking with Yummly? Welcome! Get ready to have fun...</div>230 </div>231 <div class="right-col">232 <div class="timestamp">Oct 11</div>233 <div class="star-btn">234 <svg viewBox="0 0 48 48"><path d="M24 5l7 13 15 2-11 10 3 15-14-8-14 8 3-15L2 20l15-2z"/></svg>235 </div>236 </div>237 </div>238 239 <div class="email-item">240 <div class="avatar yellow">M</div>241 <div class="content">242 <div class="sender">Mail Delivery Subsystem</div>243 <div class="subject">Delivery Status Notification (Failure)</div>244 <div class="snippet">Address not found Your message wasn't deliv...</div>245 </div>246 <div class="right-col">247 <div class="timestamp">Oct 6</div>248 <div class="star-btn">249 <svg viewBox="0 0 48 48"><path d="M24 5l7 13 15 2-11 10 3 15-14-8-14 8 3-15L2 20l15-2z"/></svg>250 </div>251 </div>252 </div>253 254 <div class="email-item">255 <div class="avatar">[IMG: eBay Logo]</div>256 <div class="content">257 <div class="sender">eBay</div>258 <div class="snippet">A new device is using your account Here's what you need to know...</div>259 </div>260 <div class="right-col">261 <div class="timestamp">Oct 6</div>262 <div class="star-btn">263 <svg viewBox="0 0 48 48"><path d="M24 5l7 13 15 2-11 10 3 15-14-8-14 8 3-15L2 20l15-2z"/></svg>264 </div>265 </div>266 </div>267 268 <div class="email-item">269 <div class="avatar">[IMG: eBay Logo]</div>270 <div class="content">271 <div class="sender">eBay</div>272 <div class="snippet">Karin, your eBay adventure has just beg... Your perfect find is out there</div>273 </div>274 <div class="right-col">275 <div class="timestamp">Oct 5</div>276 <div class="star-btn">277 <svg viewBox="0 0 48 48"><path d="M24 5l7 13 15 2-11 10 3 15-14-8-14 8 3-15L2 20l15-2z"/></svg>278 </div>279 </div>280 </div>281 282 <div class="promo-row">283 <div class="tag-icon"></div>284 <div class="promo-text">285 <div class="promo-title">Promotions</div>286 <div class="promo-sub">TheFork</div>287 </div>288 <div class="pill">1 new</div>289 </div>290 291 <div class="email-item">292 <div class="avatar">[IMG: Vimeo Logo]</div>293 <div class="content">294 <div class="sender">Vimeo</div>295 <div class="snippet">Your September product updates...</div>296 </div>297 <div class="right-col">298 <div class="timestamp">Oct 3</div>299 <div class="star-btn">300 <svg viewBox="0 0 48 48"><path d="M24 5l7 13 15 2-11 10 3 15-14-8-14 8 3-15L2 20l15-2z"/></svg>301 </div>302 </div>303 </div>304 305 </div>306 307 <!-- Compose Floating Action Button -->308 <div class="compose-fab">309 <svg viewBox="0 0 48 48"><path d="M10 38h28M12 30l18-18 6 6-18 18H12v-6z"/></svg>310 <span>Compose</span>311 </div>312 313 <!-- Center mail pill with badge -->314 <div class="center-pill">315 <svg viewBox="0 0 56 56"><path d="M6 12h44v32H6zM6 12l22 16 22-16"/></svg>316 <div class="badge">10</div>317 </div>318 319 <!-- Bottom navigation bar -->320 <div class="bottom-bar">321 <div class="bottom-icon">322 <svg viewBox="0 0 64 64"><path d="M8 16h48v32H8zM8 16l24 16 24-16"/></svg>323 </div>324 <div class="bottom-icon">325 <svg viewBox="0 0 64 64"><path d="M20 18h24l8 10v18H12V28l8-10zM28 34l8 6"/></svg>326 </div>327 </div>328 329</div>330</body>331</html>