GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Gmail Dark UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #121212;14 color: #FFF;15 }16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 96px;23 padding: 0 32px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #EDEDED;29 font-size: 42px;30 letter-spacing: 0.5px;31 }32 .status-icons {33 display: flex;34 align-items: center;35 gap: 18px;36 }37 .status-dot { width: 14px; height: 14px; background: #DADADA; border-radius: 50%; }38 .battery {39 width: 46px; height: 24px; border: 3px solid #DADADA; border-radius: 6px; position: relative;40 }41 .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #DADADA; border-radius: 2px; }42 .battery-level { position: absolute; left: 3px; top: 3px; height: 16px; width: 28px; background: #DADADA; }43 /* Search bar */44 .search-wrap {45 position: absolute;46 top: 112px;47 left: 32px;48 right: 32px;49 height: 120px;50 display: flex;51 align-items: center;52 gap: 18px;53 }54 .hamburger {55 width: 88px; height: 88px; border-radius: 20px; background: #1E1E1E; display: flex; align-items: center; justify-content: center;56 }57 .search-field {58 flex: 1;59 height: 88px;60 background: #2A2A2A;61 border-radius: 44px;62 color: #CFCFCF;63 display: flex;64 align-items: center;65 padding: 0 36px;66 box-sizing: border-box;67 font-size: 40px;68 }69 .avatar {70 width: 88px; height: 88px; border-radius: 44px; background: #12A5A5; color: #FFF; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 44px;71 }72 /* Section titles */73 .section-title {74 position: absolute;75 top: 256px;76 left: 32px;77 font-size: 40px;78 color: #BDBDBD;79 }80 /* Card */81 .card {82 position: absolute;83 top: 320px;84 left: 32px;85 width: 1016px;86 background: #1A1A1A;87 border: 1px solid #2C2C2C;88 border-radius: 28px;89 padding: 32px;90 box-sizing: border-box;91 }92 .card-header {93 display: flex; align-items: flex-start; gap: 24px;94 }95 .shield {96 width: 64px; height: 64px; border-radius: 16px; background: #0B57D0; display: flex; align-items: center; justify-content: center;97 }98 .card-title { font-size: 44px; line-height: 1.2; color: #FFF; }99 .card-sub { margin-top: 12px; font-size: 36px; color: #C7C7C7; }100 .card-actions { margin-top: 30px; display: flex; gap: 40px; }101 .btn-link { font-size: 40px; color: #8AB4F8; }102 /* Promotions row */103 .promo {104 position: absolute;105 top: 620px;106 left: 32px;107 right: 32px;108 display: flex;109 align-items: center;110 justify-content: space-between;111 color: #EAEAEA;112 }113 .promo-left { display: flex; align-items: center; gap: 18px; }114 .tag-icon {115 width: 40px; height: 40px; border: 2px solid #9CCC65; border-radius: 8px;116 }117 .promo-title { font-size: 40px; }118 .promo-sub { font-size: 36px; color: #BDBDBD; margin-left: 66px; margin-top: 12px; }119 .pill {120 background: #84D784; color: #0B2E0B; padding: 10px 22px; border-radius: 26px; font-size: 34px; font-weight: bold;121 }122 /* Email list */123 .list {124 position: absolute;125 top: 700px;126 left: 32px;127 right: 32px;128 }129 .item {130 display: grid;131 grid-template-columns: 100px 1fr 220px;132 gap: 24px;133 padding: 28px 0;134 border-bottom: 1px solid #242424;135 align-items: center;136 }137 .avatar-circle {138 width: 84px; height: 84px; border-radius: 42px; background: #4A4A4A; display: flex; align-items: center; justify-content: center; color: #FFF; font-size: 42px;139 }140 .avatar-blue { background: #5C8DF6; }141 .avatar-coral { background: #E36A5A; }142 .mail-main { min-width: 0; }143 .mail-from { font-size: 44px; color: #FFF; }144 .mail-subject { font-size: 40px; margin-top: 6px; color: #FFF; font-weight: bold; }145 .mail-snippet { font-size: 36px; margin-top: 6px; color: #BDBDBD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }146 .mail-meta { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }147 .date { font-size: 36px; color: #BDBDBD; }148 .icon-btn { width: 52px; height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: center; }149 /* Snackbar + compose */150 .snackbar {151 position: absolute;152 bottom: 260px;153 left: 32px;154 width: 1016px;155 height: 120px;156 background: #FFFFFF;157 color: #000;158 border-radius: 24px;159 box-shadow: 0 6px 16px rgba(0,0,0,0.35);160 display: flex; align-items: center; justify-content: space-between;161 padding: 0 28px; box-sizing: border-box;162 font-size: 40px;163 }164 .snackbar .cancel { color: #1A73E8; font-weight: bold; }165 .compose-pill {166 position: absolute;167 bottom: 360px;168 right: 60px;169 height: 140px;170 width: 420px;171 background: #4C4F64;172 color: #FFFFFF;173 border-radius: 28px;174 box-shadow: 0 10px 20px rgba(0,0,0,0.5);175 display: flex; align-items: center; gap: 24px; padding: 0 28px; box-sizing: border-box;176 font-size: 44px; font-weight: 600;177 }178 /* Bottom nav */179 .bottom-nav {180 position: absolute;181 bottom: 120px;182 left: 0;183 width: 1080px;184 height: 160px;185 display: flex; align-items: center; justify-content: center; gap: 180px;186 }187 .nav-bubble {188 width: 160px; height: 100px; background: #2F3244; border-radius: 50px;189 display: flex; align-items: center; justify-content: center; position: relative;190 }191 .badge {192 position: absolute;193 right: 18px; bottom: -10px;194 width: 64px; height: 64px; background: #F6C5BE; color: #000; font-weight: bold;195 display: flex; align-items: center; justify-content: center; border-radius: 50%;196 font-size: 34px; border: 2px solid #E7A9A1;197 }198 .home-indicator {199 position: absolute;200 bottom: 40px;201 left: 50%;202 transform: translateX(-50%);203 width: 320px;204 height: 10px;205 background: #D9D9D9;206 border-radius: 6px;207 opacity: 0.8;208 }209 /* SVG helpers */210 svg { display: block; }211</style>212</head>213<body>214<div id="render-target">215 <!-- Status bar -->216 <div class="status-bar">217 <div>9:33</div>218 <div class="status-icons">219 <div class="status-dot"></div>220 <div class="status-dot"></div>221 <div class="status-dot"></div>222 <div class="status-dot"></div>223 <div class="battery"><div class="battery-level"></div></div>224 </div>225 </div>226 227 <!-- Search header -->228 <div class="search-wrap">229 <div class="hamburger">230 <svg width="52" height="52" viewBox="0 0 24 24">231 <path d="M3 5h18M3 12h18M3 19h18" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>232 </svg>233 </div>234 <div class="search-field">235 <span style="flex:1;">Search in mail</span>236 <!-- Right side avatar -->237 </div>238 <div class="avatar">V</div>239 </div>240 241 <div class="section-title">Primary</div>242 243 <!-- Phishing card -->244 <div class="card">245 <div class="card-header">246 <div class="shield">247 <svg width="40" height="40" viewBox="0 0 24 24">248 <path d="M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5l8-3z" fill="#FFFFFF" opacity="0.35"/>249 <path d="M12 8l4 2-4 7-4-7 4-2z" fill="#FFFFFF"/>250 </svg>251 </div>252 <div style="flex:1;">253 <div class="card-title">Get additional protection against phishing</div>254 <div class="card-sub">Turn on Enhanced Safe Browsing to get additional protection against dangerous emails</div>255 <div class="card-actions">256 <span class="btn-link">Continue</span>257 <span class="btn-link" style="color:#C7C7C7;">No thanks</span>258 </div>259 </div>260 </div>261 </div>262 263 <!-- Promotions -->264 <div class="promo">265 <div class="promo-left">266 <div class="tag-icon"></div>267 <div class="promo-title">Promotions</div>268 </div>269 <div class="pill">1 new</div>270 </div>271 <div class="promo-sub">Kitchen Stories</div>272 273 <!-- Email list -->274 <div class="list">275 <!-- Kitchen Stories confirm -->276 <div class="item">277 <div class="avatar-circle"></div>278 <div class="mail-main">279 <div class="mail-from">Kitchen Stories</div>280 <div class="mail-subject">Good news is just one click away!</div>281 <div class="mail-snippet">Please confirm your registration to receive ...</div>282 </div>283 <div class="mail-meta">284 <div class="date">Oct 4</div>285 <div class="icon-btn">286 <svg width="40" height="40" viewBox="0 0 24 24">287 <path d="M12 17.3l6.18 3.7-1.64-7.03L21 9.24l-7.19-.62L12 2 10.19 8.62 3 9.24l4.46 4.73L5.82 21z" fill="none" stroke="#BDBDBD" stroke-width="1.6"/>288 </svg>289 </div>290 </div>291 </div>292 293 <!-- Kitchen Stories welcome -->294 <div class="item">295 <div class="avatar-circle"></div>296 <div class="mail-main">297 <div class="mail-from">Kitchen Stories</div>298 <div class="mail-subject">Welcome to Kitchen Stories!</div>299 <div class="mail-snippet">Thank you for signing up. Let's get cooking...</div>300 </div>301 <div class="mail-meta">302 <div class="date">Oct 4</div>303 <div class="icon-btn">304 <svg width="40" height="40" viewBox="0 0 24 24">305 <path d="M12 17.3l6.18 3.7-1.64-7.03L21 9.24l-7.19-.62L12 2 10.19 8.62 3 9.24l4.46 4.73L5.82 21z" fill="none" stroke="#BDBDBD" stroke-width="1.6"/>306 </svg>307 </div>308 </div>309 </div>310 311 <!-- OpenTable -->312 <div class="item">313 <div class="avatar-circle avatar-blue">O</div>314 <div class="mail-main">315 <div class="mail-from">OpenTable Member Services</div>316 <div class="mail-subject">Confirm It's You</div>317 <div class="mail-snippet">Your verification code is 000854</div>318 </div>319 <div class="mail-meta">320 <div class="date">Sep 28</div>321 <div class="icon-btn">322 <svg width="40" height="40" viewBox="0 0 24 24">323 <path d="M12 17.3l6.18 3.7-1.64-7.03L21 9.24l-7.19-.62L12 2 10.19 8.62 3 9.24l4.46 4.73L5.82 21z" fill="none" stroke="#BDBDBD" stroke-width="1.6"/>324 </svg>325 </div>326 <div class="icon-btn">327 <svg width="36" height="36" viewBox="0 0 24 24">328 <circle cx="5" cy="6" r="2" fill="#BDBDBD"/>329 <circle cx="5" cy="12" r="2" fill="#BDBDBD"/>330 <circle cx="5" cy="18" r="2" fill="#BDBDBD"/>331 </svg>332 </div>333 </div>334 </div>335 336 <!-- Cerebra Research -->337 <div class="item">338 <div class="avatar-circle avatar-coral">C</div>339 <div class="mail-main">340 <div class="mail-from">Cerebra Research (via Google Groups)</div>341 <div class="mail-subject">Cerebra Research <dbwscrew></div>342 <div class="mail-snippet">Cerebra Research <dbwscrat...></div>343 </div>344 <div class="mail-meta">345 <div class="date">Sep 26</div>346 <div class="icon-btn">347 <svg width="40" height="40" viewBox="0 0 24 24">348 <path d="M12 17.3l6.18 3.7-1.64-7.03L21 9.24l-7.19-.62L12 2 10.19 8.62 3 9.24l4.46 4.73L5.82 21z" fill="none" stroke="#BDBDBD" stroke-width="1.6"/>349 </svg>350 </div>351 </div>352 </div>353 </div>354 355 <!-- Snackbar -->356 <div class="snackbar">357 <div>Sending...</div>358 <div class="cancel">Cancel</div>359 </div>360 361 <!-- Compose floating pill -->362 <div class="compose-pill">363 <svg width="46" height="46" viewBox="0 0 24 24">364 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#FFFFFF"/>365 <path d="M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#FFFFFF" opacity="0.8"/>366 </svg>367 <div>Compose</div>368 </div>369 370 <!-- Bottom navigation -->371 <div class="bottom-nav">372 <div class="nav-bubble">373 <svg width="58" height="58" viewBox="0 0 24 24">374 <path d="M2 7l10 7 10-7v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7z" fill="#FFFFFF"/>375 </svg>376 <div class="badge">6</div>377 </div>378 <div class="nav-bubble" style="background:#3A3D52;">379 <svg width="58" height="58" viewBox="0 0 24 24">380 <rect x="4" y="7" width="16" height="12" rx="2" fill="#FFFFFF" opacity="0.85"/>381 <path d="M8 7l2-3h4l2 3" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>382 </svg>383 </div>384 </div>385 386 <div class="home-indicator"></div>387</div>388</body>389</html>