GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Dark UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #EDEDED;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 padding: 0 36px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #EDEDED;29 font-weight: 600;30 font-size: 46px;31 }32 .status-right {33 display: flex;34 gap: 24px;35 align-items: center;36 }37 .status-icon {38 width: 32px;39 height: 32px;40 background: #BDBDBD;41 border-radius: 6px;42 opacity: 0.9;43 }44 45 /* Top search / app bar */46 .app-bar {47 position: absolute;48 top: 120px;49 left: 30px;50 width: 1020px;51 height: 120px;52 background: #1E1E1E;53 border-radius: 60px;54 display: flex;55 align-items: center;56 padding: 0 28px;57 box-sizing: border-box;58 }59 .app-pill {60 width: 1020px;61 height: 120px;62 border-radius: 60px;63 background: #242424;64 display: flex;65 align-items: center;66 padding: 0 40px;67 box-sizing: border-box;68 gap: 28px;69 }70 .hamburger {71 width: 64px;72 height: 64px;73 display: flex;74 align-items: center;75 justify-content: center;76 }77 .gmail-dots {78 flex: 1;79 display: flex;80 align-items: center;81 justify-content: center;82 gap: 16px;83 }84 .dot {85 width: 20px;86 height: 20px;87 border-radius: 50%;88 }89 .dot.red { background: #EA4335; }90 .dot.yellow { background: #FBBC04; }91 .dot.green { background: #34A853; }92 .dot.blue { background: #4285F4; }93 .profile {94 width: 84px;95 height: 84px;96 border-radius: 42px;97 background: #1AA7A7;98 color: #fff;99 display: flex;100 align-items: center;101 justify-content: center;102 font-weight: 700;103 font-size: 44px;104 }105 106 /* Section titles */107 .section-title {108 position: absolute;109 top: 300px;110 left: 40px;111 font-size: 40px;112 color: #CFCFCF;113 letter-spacing: 0.2px;114 }115 116 /* Phishing card */117 .card {118 position: absolute;119 top: 360px;120 left: 40px;121 width: 1000px;122 background: #202124;123 border-radius: 28px;124 padding: 36px;125 box-sizing: border-box;126 border: 1px solid #2B2C2F;127 }128 .card-header {129 display: flex;130 align-items: center;131 gap: 20px;132 margin-bottom: 10px;133 }134 .shield {135 width: 46px;136 height: 46px;137 }138 .card-title {139 font-size: 42px;140 font-weight: 700;141 color: #EDEDED;142 }143 .card-desc {144 margin-top: 16px;145 font-size: 32px;146 color: #B8B8B8;147 line-height: 1.35;148 }149 .card-actions {150 margin-top: 28px;151 display: flex;152 gap: 40px;153 font-size: 34px;154 align-items: center;155 }156 .action-primary { color: #8AB4F8; font-weight: 700; }157 .action-secondary { color: #B8B8B8; }158 159 /* Promotions chip */160 .promotions {161 position: absolute;162 top: 720px;163 left: 40px;164 width: 1000px;165 display: flex;166 align-items: center;167 justify-content: space-between;168 }169 .promo-left {170 display: flex;171 align-items: center;172 gap: 18px;173 }174 .promo-title { font-size: 38px; color: #CFCFCF; }175 .promo-sub { font-size: 32px; color: #9E9E9E; margin-left: 60px; }176 .new-pill {177 background: #3BB273;178 color: #EFFFF8;179 border-radius: 28px;180 padding: 10px 20px;181 font-size: 30px;182 font-weight: 700;183 }184 .tag-icon { width: 40px; height: 40px; }185 186 /* Email list */187 .list {188 position: absolute;189 top: 800px;190 left: 28px;191 width: 1024px;192 }193 .item {194 display: grid;195 grid-template-columns: 104px 1fr 130px 80px;196 align-items: center;197 padding: 26px 12px;198 border-bottom: 1px solid #252525;199 column-gap: 20px;200 }201 .avatar {202 width: 80px;203 height: 80px;204 border-radius: 40px;205 background: #3F3F3F;206 display: flex;207 align-items: center;208 justify-content: center;209 color: #CFCFCF;210 font-size: 40px;211 }212 .item-main { display: flex; flex-direction: column; gap: 8px; }213 .item-title { font-size: 40px; font-weight: 800; color: #EDEDED; }214 .item-subject { font-size: 32px; font-weight: 800; color: #EDEDED; }215 .item-snippet { font-size: 30px; color: #A9A9A9; }216 .item-date { font-size: 30px; color: #B8B8B8; text-align: right; }217 .star {218 width: 48px;219 height: 48px;220 justify-self: end;221 }222 223 /* Floating compose button */224 .compose {225 position: absolute;226 right: 40px;227 bottom: 280px;228 width: 360px;229 height: 120px;230 background: #2C2C2F;231 border-radius: 28px;232 display: flex;233 align-items: center;234 justify-content: center;235 gap: 24px;236 box-shadow: 0 6px 16px rgba(0,0,0,0.4);237 }238 .compose svg { width: 48px; height: 48px; }239 .compose span { font-size: 36px; font-weight: 700; color: #EDEDED; }240 241 /* Bottom mail pill */242 .bottom-mail {243 position: absolute;244 left: 160px;245 bottom: 250px;246 width: 160px;247 height: 80px;248 background: #2F2F32;249 border-radius: 40px;250 display: flex;251 align-items: center;252 justify-content: center;253 gap: 10px;254 }255 .badge {256 position: absolute;257 top: -12px;258 right: -12px;259 background: #E07D79;260 color: #fff;261 border-radius: 24px;262 padding: 6px 12px;263 font-size: 26px;264 font-weight: 700;265 }266 267 /* Home indicator */268 .home-indicator {269 position: absolute;270 bottom: 100px;271 left: 50%;272 transform: translateX(-50%);273 width: 320px;274 height: 12px;275 background: #E0E0E0;276 border-radius: 6px;277 opacity: 0.6;278 }279 280 /* Simple icon styles */281 svg { fill: none; stroke: #EDEDED; stroke-width: 4; }282</style>283</head>284<body>285<div id="render-target">286 287 <!-- Status bar -->288 <div class="status-bar">289 <div>9:28</div>290 <div class="status-right">291 <div class="status-icon"></div>292 <div class="status-icon"></div>293 <div class="status-icon"></div>294 <div class="status-icon" style="border-radius: 50%"></div>295 </div>296 </div>297 298 <!-- App bar pill -->299 <div class="app-bar">300 <div class="app-pill">301 <div class="hamburger">302 <svg viewBox="0 0 64 64">303 <line x1="8" y1="16" x2="56" y2="16"></line>304 <line x1="8" y1="32" x2="56" y2="32"></line>305 <line x1="8" y1="48" x2="56" y2="48"></line>306 </svg>307 </div>308 <div class="gmail-dots">309 <div class="dot red"></div>310 <div class="dot blue"></div>311 <div class="dot yellow"></div>312 <div class="dot green"></div>313 </div>314 <div class="profile">V</div>315 </div>316 </div>317 318 <!-- Primary title -->319 <div class="section-title">Primary</div>320 321 <!-- Phishing protection card -->322 <div class="card">323 <div class="card-header">324 <svg class="shield" viewBox="0 0 64 64">325 <path d="M32 6 L54 14 V32c0 14-10 24-22 28C20 56 10 46 10 32V14z" fill="#3A74F7" stroke="#3A74F7"></path>326 </svg>327 <div class="card-title">Get additional protection against phishing</div>328 </div>329 <div class="card-desc">330 Turn on Enhanced Safe Browsing to get additional protection against dangerous emails331 </div>332 <div class="card-actions">333 <span class="action-primary">Continue</span>334 <span class="action-secondary">No thanks</span>335 </div>336 </div>337 338 <!-- Promotions chip -->339 <div class="promotions">340 <div class="promo-left">341 <svg class="tag-icon" viewBox="0 0 64 64">342 <path d="M12 18 h22 l18 18 l-22 22 l-18 -18 z" stroke="#CFCFCF"></path>343 <circle cx="20" cy="26" r="4" fill="#CFCFCF" stroke="none"></circle>344 </svg>345 <div class="promo-title">Promotions</div>346 <div class="promo-sub">Kitchen Stories</div>347 </div>348 <div class="new-pill">1 new</div>349 </div>350 351 <!-- Email list -->352 <div class="list">353 354 <!-- Kitchen Stories confirmation -->355 <div class="item">356 <div class="avatar"></div>357 <div class="item-main">358 <div class="item-title">Kitchen Stories</div>359 <div class="item-subject">Good news is just one click away!</div>360 <div class="item-snippet">Please confirm your registration to receive ...</div>361 </div>362 <div class="item-date">Oct 4</div>363 <svg class="star" viewBox="0 0 64 64">364 <polygon points="32,8 38,26 58,26 42,38 48,56 32,46 16,56 22,38 6,26 26,26" stroke="#CFCFCF"></polygon>365 </svg>366 </div>367 368 <!-- Kitchen Stories welcome -->369 <div class="item">370 <div class="avatar"></div>371 <div class="item-main">372 <div class="item-title">Kitchen Stories</div>373 <div class="item-subject">Welcome to Kitchen Stories!</div>374 <div class="item-snippet">Thank you for signing up. Let's get cooking...</div>375 </div>376 <div class="item-date">Oct 4</div>377 <svg class="star" viewBox="0 0 64 64">378 <polygon points="32,8 38,26 58,26 42,38 48,56 32,46 16,56 22,38 6,26 26,26" stroke="#CFCFCF"></polygon>379 </svg>380 </div>381 382 <!-- OpenTable -->383 <div class="item">384 <div class="avatar" style="background:#4E78F7;">O</div>385 <div class="item-main">386 <div class="item-title">OpenTable Member Services</div>387 <div class="item-subject">Confirm It's You</div>388 <div class="item-snippet">Your verification code is 000854</div>389 </div>390 <div class="item-date">Sep 28</div>391 <svg class="star" viewBox="0 0 64 64">392 <polygon points="32,8 38,26 58,26 42,38 48,56 32,46 16,56 22,38 6,26 26,26" stroke="#CFCFCF"></polygon>393 </svg>394 </div>395 396 <!-- Cerebra Research (via Google Chat) -->397 <div class="item">398 <div class="avatar" style="background:#D96A5E;">C</div>399 <div class="item-main">400 <div class="item-title">Cerebra Research (via Google Ch...)</div>401 <div class="item-subject">Cerebra Research <dbwscratch.test.id3...></div>402 <div class="item-snippet">Cerebra Research <dbwscratch.test.id3@g...></div>403 </div>404 <div class="item-date">Sep 26</div>405 <svg class="star" viewBox="0 0 64 64">406 <polygon points="32,8 38,26 58,26 42,38 48,56 32,46 16,56 22,38 6,26 26,26" stroke="#CFCFCF"></polygon>407 </svg>408 </div>409 410 <!-- Cerebra Research no subject -->411 <div class="item">412 <div class="avatar"></div>413 <div class="item-main">414 <div class="item-title">Cerebra Research</div>415 <div class="item-subject">(no subject)</div>416 <div class="item-snippet">...</div>417 </div>418 <div class="item-date">Sep 23</div>419 <svg class="star" viewBox="0 0 64 64">420 <polygon points="32,8 38,26 58,26 42,38 48,56 32,46 16,56 22,38 6,26 26,26" stroke="#CFCFCF"></polygon>421 </svg>422 </div>423 424 </div>425 426 <!-- Floating compose button -->427 <div class="compose">428 <svg viewBox="0 0 64 64">429 <path d="M12 52 h40" stroke="#EDEDED"></path>430 <path d="M14 46 l28 -28 l12 12 l-28 28 h-12 z" stroke="#EDEDED"></path>431 </svg>432 <span>Compose</span>433 </div>434 435 <!-- Bottom mail pill with badge -->436 <div class="bottom-mail">437 <svg viewBox="0 0 64 64" style="width:44px;height:44px">438 <rect x="8" y="14" width="48" height="36" rx="6" stroke="#EDEDED"></rect>439 <path d="M10 16 l22 18 l22 -18" stroke="#EDEDED"></path>440 </svg>441 <div class="badge">6</div>442 </div>443 444 <!-- iOS/Android home indicator -->445 <div class="home-indicator"></div>446 447</div>448</body>449</html>