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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #121212;15 color: #EDEDED;16 }17 18 /* Status bar */19 .statusbar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 110px;25 padding: 0 32px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #fff;31 }32 .status-left { display: flex; align-items: center; gap: 20px; font-weight: 600; font-size: 36px; }33 .status-right { display: flex; align-items: center; gap: 24px; }34 .icon { width: 40px; height: 40px; }35 .battery-text { font-size: 30px; color: #fff; }36 37 /* Top search bar area */38 .topbar {39 position: absolute;40 top: 120px;41 left: 24px;42 right: 24px;43 height: 100px;44 display: flex;45 align-items: center;46 gap: 24px;47 }48 .hamburger {49 width: 72px;50 height: 72px;51 border-radius: 36px;52 display: flex;53 align-items: center;54 justify-content: center;55 background: transparent;56 }57 .search-pill {58 flex: 1;59 height: 90px;60 border-radius: 45px;61 background: #2f3b2f;62 display: flex;63 align-items: center;64 padding: 0 32px;65 box-sizing: border-box;66 color: #B7C7B7;67 font-size: 36px;68 }69 .avatar {70 width: 72px;71 height: 72px;72 border-radius: 36px;73 background: #2f3b2f;74 border: 2px solid #436245;75 color: #CFE3CF;76 display: flex;77 align-items: center;78 justify-content: center;79 font-weight: 700;80 font-size: 34px;81 }82 83 /* Section label */84 .section-label {85 position: absolute;86 top: 240px;87 left: 32px;88 font-size: 34px;89 color: #bfbfbf;90 }91 92 /* Email list */93 .list {94 position: absolute;95 top: 290px;96 left: 0;97 right: 0;98 bottom: 340px;99 overflow: hidden;100 padding: 0 12px;101 box-sizing: border-box;102 }103 .email-item {104 display: flex;105 align-items: flex-start;106 gap: 26px;107 padding: 28px 20px;108 border-bottom: 1px solid rgba(255,255,255,0.05);109 }110 .circle {111 width: 84px;112 height: 84px;113 border-radius: 42px;114 background: #f4b400;115 color: #1f1f1f;116 display: flex;117 align-items: center;118 justify-content: center;119 font-weight: 800;120 font-size: 38px;121 flex-shrink: 0;122 }123 .logo-box {124 width: 84px;125 height: 84px;126 border-radius: 42px;127 background: #E0E0E0;128 border: 1px solid #BDBDBD;129 color: #757575;130 display: flex;131 align-items: center;132 justify-content: center;133 font-size: 22px;134 flex-shrink: 0;135 }136 .content {137 flex: 1;138 min-width: 0;139 }140 .title-row {141 display: flex;142 align-items: center;143 justify-content: space-between;144 gap: 16px;145 }146 .name {147 font-size: 38px;148 font-weight: 700;149 color: #EDEDED;150 white-space: nowrap;151 overflow: hidden;152 text-overflow: ellipsis;153 }154 .date {155 font-size: 30px;156 color: #A0A0A0;157 white-space: nowrap;158 flex-shrink: 0;159 }160 .subject {161 font-size: 32px;162 color: #EDEDED;163 margin-top: 6px;164 font-weight: 600;165 white-space: nowrap;166 overflow: hidden;167 text-overflow: ellipsis;168 }169 .snippet {170 font-size: 30px;171 color: #A0A0A0;172 margin-top: 6px;173 white-space: nowrap;174 overflow: hidden;175 text-overflow: ellipsis;176 }177 .star {178 width: 48px;179 height: 48px;180 margin-left: 12px;181 flex-shrink: 0;182 }183 184 /* Promotions row */185 .pill {186 background: #79C28E;187 color: #06280f;188 padding: 10px 20px;189 border-radius: 28px;190 font-size: 28px;191 font-weight: 700;192 }193 .tag-icon {194 width: 60px;195 height: 60px;196 flex-shrink: 0;197 }198 199 /* Floating action button */200 .compose {201 position: absolute;202 right: 36px;203 bottom: 300px;204 width: 300px;205 height: 120px;206 background: #3f4d36;207 border-radius: 26px;208 box-shadow: 0 8px 20px rgba(0,0,0,0.4);209 display: flex;210 align-items: center;211 justify-content: center;212 gap: 18px;213 color: #EDEDED;214 font-size: 36px;215 font-weight: 700;216 }217 .compose .icon-pencil { width: 48px; height: 48px; }218 219 /* Bottom navigation */220 .bottom-bar {221 position: absolute;222 left: 0;223 right: 0;224 bottom: 100px;225 height: 180px;226 background: #1a1a1a;227 display: flex;228 align-items: center;229 justify-content: space-around;230 }231 .nav-item { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: #d9d9d9; font-size: 28px; }232 .nav-icon { width: 66px; height: 66px; }233 234 .mail-pill {235 position: absolute;236 left: 210px;237 bottom: 228px;238 width: 160px;239 height: 100px;240 background: #2f3b2f;241 border-radius: 50px;242 display: flex;243 align-items: center;244 justify-content: center;245 gap: 12px;246 box-shadow: 0 6px 16px rgba(0,0,0,0.5);247 }248 .badge {249 background: #F7B0B0;250 color: #1a1a1a;251 font-size: 28px;252 font-weight: 800;253 border-radius: 22px;254 padding: 6px 14px;255 }256 257 /* Gesture bar */258 .gesture {259 position: absolute;260 left: 50%;261 transform: translateX(-50%);262 bottom: 36px;263 width: 360px;264 height: 12px;265 border-radius: 6px;266 background: #E6E6E6;267 opacity: 0.9;268 }269</style>270</head>271<body>272<div id="render-target">273 274 <!-- Status bar -->275 <div class="statusbar">276 <div class="status-left">277 <div>11:25</div>278 <!-- simple dots/icons -->279 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>280 </div>281 <div class="status-right">282 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">283 <path d="M3 10c4-6 14-6 18 0v4c-4 6-14 6-18 0v-4z"></path>284 <circle cx="12" cy="12" r="2" fill="#fff"></circle>285 </svg>286 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">287 <rect x="3" y="6" width="18" height="12" rx="2"></rect>288 <path d="M21 10h2v4h-2"></path>289 </svg>290 <div class="battery-text">100%</div>291 </div>292 </div>293 294 <!-- Top search -->295 <div class="topbar">296 <div class="hamburger">297 <svg class="icon" viewBox="0 0 24 24" fill="#EDEDED">298 <rect x="3" y="5" width="18" height="2"></rect>299 <rect x="3" y="11" width="18" height="2"></rect>300 <rect x="3" y="17" width="12" height="2"></rect>301 </svg>302 </div>303 <div class="search-pill">Search in mail</div>304 <div class="avatar">K</div>305 </div>306 307 <div class="section-label">Primary</div>308 309 <!-- Email list -->310 <div class="list">311 312 <!-- Item 1 -->313 <div class="email-item">314 <div class="circle">N</div>315 <div class="content">316 <div class="title-row">317 <div class="name">Natalie Larson</div>318 <div class="date">10:45 PM</div>319 </div>320 <div class="subject">Happiness</div>321 <div class="snippet">Hi, Karin How are you ?</div>322 </div>323 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="2">324 <path d="M12 3l3.2 6.5 7 .9-5.2 4.7 1.5 6.6L12 18l-6.5 3.7 1.5-6.6L2 10.4l7-.9L12 3z"></path>325 </svg>326 </div>327 328 <!-- Item 2 -->329 <div class="email-item">330 <div class="circle">M</div>331 <div class="content">332 <div class="title-row">333 <div class="name">me, Mail 2</div>334 <div class="date">Oct 12</div>335 </div>336 <div class="subject">Join us for a Book fair event</div>337 <div class="snippet">Address not found Your message wasn't deli...</div>338 </div>339 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="2">340 <path d="M12 3l3.2 6.5 7 .9-5.2 4.7 1.5 6.6L12 18l-6.5 3.7 1.5-6.6L2 10.4l7-.9L12 3z"></path>341 </svg>342 </div>343 344 <!-- Item 3 -->345 <div class="email-item">346 <div class="circle">M</div>347 <div class="content">348 <div class="title-row">349 <div class="name">Mail Delivery Subsystem</div>350 <div class="date">Oct 6</div>351 </div>352 <div class="subject">Delivery Status Notification (Failure)</div>353 <div class="snippet">Address not found Your message wasn't deli...</div>354 </div>355 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="2">356 <path d="M12 3l3.2 6.5 7 .9-5.2 4.7 1.5 6.6L12 18l-6.5 3.7 1.5-6.6L2 10.4l7-.9L12 3z"></path>357 </svg>358 </div>359 360 <!-- Item 4 -->361 <div class="email-item">362 <div class="logo-box">[IMG: eBay logo]</div>363 <div class="content">364 <div class="title-row">365 <div class="name">eBay</div>366 <div class="date">Oct 6</div>367 </div>368 <div class="subject">A new device is using your account</div>369 <div class="snippet">Here's what you need to know. Let's make s...</div>370 </div>371 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="2">372 <path d="M12 3l3.2 6.5 7 .9-5.2 4.7 1.5 6.6L12 18l-6.5 3.7 1.5-6.6L2 10.4l7-.9L12 3z"></path>373 </svg>374 </div>375 376 <!-- Item 5 -->377 <div class="email-item">378 <div class="logo-box">[IMG: eBay logo]</div>379 <div class="content">380 <div class="title-row">381 <div class="name">eBay</div>382 <div class="date">Oct 5</div>383 </div>384 <div class="subject">Karin, your eBay adventure has just beg...</div>385 <div class="snippet">Your perfect find is out there</div>386 </div>387 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="2">388 <path d="M12 3l3.2 6.5 7 .9-5.2 4.7 1.5 6.6L12 18l-6.5 3.7 1.5-6.6L2 10.4l7-.9L12 3z"></path>389 </svg>390 </div>391 392 <!-- Promotions tag row -->393 <div class="email-item">394 <svg class="tag-icon" viewBox="0 0 24 24" fill="none" stroke="#79C28E" stroke-width="2">395 <path d="M3 7v6l8 8 10-10-8-8H7a4 4 0 0 0-4 4z"></path>396 <circle cx="7" cy="9" r="1.5" fill="#79C28E"></circle>397 </svg>398 <div class="content">399 <div class="title-row">400 <div class="name">Promotions</div>401 <div class="pill">1 new</div>402 </div>403 <div class="subject">TheFork</div>404 </div>405 </div>406 407 <!-- Item 6 -->408 <div class="email-item">409 <div class="logo-box">[IMG: Vimeo logo]</div>410 <div class="content">411 <div class="title-row">412 <div class="name">Vimeo</div>413 <div class="date">Oct 3</div>414 </div>415 <div class="subject">Your September product updates</div>416 </div>417 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="2">418 <path d="M12 3l3.2 6.5 7 .9-5.2 4.7 1.5 6.6L12 18l-6.5 3.7 1.5-6.6L2 10.4l7-.9L12 3z"></path>419 </svg>420 </div>421 422 <!-- Extra item preview near bottom -->423 <div class="email-item">424 <div class="circle">M</div>425 <div class="content">426 <div class="title-row">427 <div class="name">me, Mail 2</div>428 <div class="date">Sep 23</div>429 </div>430 <div class="subject">(no subject)</div>431 </div>432 </div>433 434 </div>435 436 <!-- Floating compose button -->437 <div class="compose">438 <svg class="icon-pencil" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">439 <path d="M3 17l4 4 14-14-4-4L3 17z"></path>440 <path d="M13 5l6 6"></path>441 </svg>442 <div>Compose</div>443 </div>444 445 <!-- Mini mail pill with badge -->446 <div class="mail-pill">447 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#cdd6c9" stroke-width="2">448 <rect x="3" y="5" width="18" height="14" rx="2"></rect>449 <path d="M3 7l9 6 9-6"></path>450 </svg>451 <div class="badge">8</div>452 </div>453 454 <!-- Bottom navigation -->455 <div class="bottom-bar">456 <div class="nav-item">457 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#d9d9d9" stroke-width="2">458 <rect x="3" y="5" width="18" height="14" rx="2"></rect>459 <path d="M3 7l9 6 9-6"></path>460 </svg>461 </div>462 <div class="nav-item">463 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#d9d9d9" stroke-width="2">464 <rect x="5" y="3" width="14" height="10" rx="2"></rect>465 <rect x="3" y="15" width="18" height="6" rx="2"></rect>466 </svg>467 </div>468 </div>469 470 <!-- Gesture bar -->471 <div class="gesture"></div>472 473</div>474</body>475</html>