GD-ML/AndroidCode
13.4k
1<html lang="en">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: Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0d2123;13 color: #e8f2ef;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 80px;23 color: #cfe0dc;24 font-size: 28px;25 letter-spacing: 0.5px;26 display: flex;27 align-items: center;28 padding: 0 24px;29 }30 .status-spacer { flex: 1; }31 .status-icon {32 width: 24px; height: 24px; margin-left: 18px;33 }34 /* App bar */35 .app-bar {36 position: absolute;37 top: 80px;38 left: 0;39 width: 1080px;40 height: 120px;41 background: #132a2d;42 display: flex;43 align-items: center;44 padding: 0 24px;45 box-sizing: border-box;46 }47 .app-title { font-size: 42px; margin-left: 24px; }48 .app-actions { margin-left: auto; display: flex; align-items: center; }49 .icon-btn {50 width: 72px; height: 72px; display: flex; justify-content: center; align-items: center;51 border-radius: 36px;52 }53 .icon-svg { width: 40px; height: 40px; fill: #e8f2ef; }54 55 /* Select all row */56 .select-all {57 position: absolute;58 top: 200px;59 left: 0;60 width: 1080px;61 height: 72px;62 display: flex;63 align-items: center;64 padding: 0 24px;65 color: #a9c3ba;66 font-size: 34px;67 box-sizing: border-box;68 }69 .checkbox {70 width: 44px; height: 44px; border: 2px solid #74c69b; border-radius: 8px; margin-right: 18px;71 }72 73 /* Dropdown (kebab) menu */74 .dropdown {75 position: absolute;76 top: 170px;77 right: 30px;78 width: 520px;79 background: #1d1f21;80 border-radius: 16px;81 box-shadow: 0 12px 32px rgba(0,0,0,0.5);82 overflow: hidden;83 }84 .dropdown-item {85 padding: 30px 32px;86 font-size: 38px;87 border-bottom: 1px solid rgba(255,255,255,0.06);88 color: #e8f2ef;89 }90 .dropdown-item:last-child { border-bottom: none; }91 92 /* Content list */93 .content {94 position: absolute;95 top: 272px;96 left: 0;97 width: 1080px;98 bottom: 0;99 overflow: hidden;100 }101 102 .info-card {103 margin: 24px;104 padding: 24px;105 border-radius: 18px;106 background: #142a2c;107 border: 1px solid rgba(255,255,255,0.06);108 display: flex;109 align-items: center;110 }111 .shield {112 width: 64px; height: 64px; margin-right: 20px;113 }114 .card-text { flex: 1; }115 .card-title { font-size: 40px; font-weight: 600; }116 .card-sub { font-size: 30px; color: #9fb1ac; margin-top: 6px; }117 .card-actions { font-size: 34px; color: #7dd39a; font-weight: 600; }118 119 .section-header {120 display: flex;121 align-items: center;122 margin: 20px 24px 8px 24px;123 }124 .tag-icon { width: 40px; height: 40px; fill: #8fd1a9; margin-right: 12px; }125 .section-title { font-size: 46px; font-weight: 700; }126 .new-pill {127 margin-left: auto;128 background: #87d59f;129 color: #0d2123;130 padding: 10px 22px;131 border-radius: 28px;132 font-size: 34px;133 font-weight: 700;134 }135 136 .email-item {137 position: relative;138 display: flex;139 padding: 22px 24px;140 box-sizing: border-box;141 border-bottom: 1px solid rgba(255,255,255,0.06);142 }143 .email-item .avatar {144 width: 92px; height: 92px; border-radius: 46px; background: #c9c9c9;145 color: #555; border: 1px solid #bdbdbd;146 display: flex; justify-content: center; align-items: center; font-size: 24px;147 margin-right: 20px;148 }149 .email-item .content-col { flex: 1; }150 .sender { font-size: 42px; font-weight: 700; }151 .subject { font-size: 36px; margin-top: 10px; }152 .preview { font-size: 30px; color: #9fb1ac; margin-top: 8px; }153 154 .date { position: absolute; right: 120px; top: 30px; font-size: 32px; color: #b6c7c1; }155 .star {156 position: absolute; right: 36px; top: 34px;157 width: 48px; height: 48px;158 }159 .star svg { width: 48px; height: 48px; fill: none; stroke: #cfe0dc; stroke-width: 3px; }160 161 .selected {162 background: #1f4a3f;163 border-radius: 28px;164 margin: 16px 24px;165 padding: 28px;166 }167 .selected .check {168 width: 90px; height: 90px; background: #4ac089; border-radius: 45px; display: flex; justify-content: center; align-items: center; color: #093b2f; font-weight: 900; margin-right: 20px;169 }170 .selected .date { color: #cfe0dc; }171 .selected .star svg { stroke: #cfe0dc; }172 173 /* Compose button */174 .compose {175 position: absolute;176 right: 36px;177 bottom: 210px;178 background: #2e7d57;179 color: #e8f2ef;180 height: 120px;181 width: 520px;182 border-radius: 60px;183 box-shadow: 0 10px 24px rgba(0,0,0,0.4);184 display: flex;185 align-items: center;186 padding: 0 32px;187 font-size: 42px;188 font-weight: 700;189 }190 .compose .pencil { width: 52px; height: 52px; fill: none; stroke: #e8f2ef; stroke-width: 5px; margin-right: 22px; }191 192 .gesture {193 position: absolute;194 bottom: 120px;195 left: 50%;196 transform: translateX(-50%);197 width: 320px; height: 10px; background: #eaeaea; border-radius: 6px;198 opacity: 0.9;199 }200</style>201</head>202<body>203<div id="render-target">204 <!-- Status bar -->205 <div class="status-bar">206 <div>7:23</div>207 <div class="status-spacer"></div>208 <!-- simple status icons -->209 <svg class="status-icon" viewBox="0 0 24 24"><path fill="#cfe0dc" d="M3 10h18v4H3z"/></svg>210 <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#cfe0dc"/></svg>211 <svg class="status-icon" viewBox="0 0 24 24"><path fill="#cfe0dc" d="M4 7h16v10H4z"/></svg>212 </div>213 214 <!-- App bar -->215 <div class="app-bar">216 <div class="icon-btn">217 <svg class="icon-svg" viewBox="0 0 24 24"><path d="M15 18L9 12l6-6" stroke="#e8f2ef" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>218 </div>219 <div class="app-title">1</div>220 <div class="app-actions">221 <div class="icon-btn">222 <svg class="icon-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>223 </div>224 </div>225 </div>226 227 <!-- Select all -->228 <div class="select-all">229 <div class="checkbox"></div>230 <div>Select all</div>231 </div>232 233 <!-- Dropdown menu -->234 <div class="dropdown">235 <div class="dropdown-item">Move to</div>236 <div class="dropdown-item">Snooze</div>237 <div class="dropdown-item">Change labels</div>238 <div class="dropdown-item">Add star</div>239 <div class="dropdown-item">Mark important</div>240 <div class="dropdown-item">Mute</div>241 <div class="dropdown-item">Report spam</div>242 </div>243 244 <!-- Content -->245 <div class="content">246 <!-- Info card -->247 <div class="info-card">248 <svg class="shield" viewBox="0 0 24 24">249 <path fill="#5bb48b" d="M12 2l8 4v6c0 5-4 9-8 10-4-1-8-5-8-10V6z"/>250 </svg>251 <div class="card-text">252 <div class="card-title">Get additional protection from phishing</div>253 <div class="card-sub">Turn on Enhanced Safe Browsing for additional protection.</div>254 </div>255 <div class="card-actions">Continue</div>256 </div>257 258 <!-- Promotions header -->259 <div class="section-header">260 <svg class="tag-icon" viewBox="0 0 24 24">261 <path d="M3 7v6l8 8 10-10-8-8H7a4 4 0 0 0-4 4z" fill="#8fd1a9"/>262 </svg>263 <div class="section-title">Promotions</div>264 <div class="new-pill">3 new</div>265 </div>266 267 <!-- Email items -->268 <div class="email-item">269 <div class="avatar">👤</div>270 <div class="content-col">271 <div class="sender">Kitchen Stories</div>272 <div class="subject">Still want to receive our emails?</div>273 <div class="preview">Please don't forget to confirm your registration...</div>274 </div>275 <div class="date">Oct 6</div>276 <div class="star">277 <svg viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7.1 1-5.2 5 1.4 7-6.5-3.5-6.5 3.5 1.4-7-5.2-5 7.1-1z"/></svg>278 </div>279 </div>280 281 <div class="email-item">282 <div class="avatar">👤</div>283 <div class="content-col">284 <div class="sender">Kitchen Stories</div>285 <div class="subject">Good news is just one click away!</div>286 <div class="preview">Please confirm your registration to receive ...</div>287 </div>288 <div class="date">Oct 6</div>289 <div class="star">290 <svg viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7.1 1-5.2 5 1.4 7-6.5-3.5-6.5 3.5 1.4-7-5.2-5 7.1-1z"/></svg>291 </div>292 </div>293 294 <!-- Selected item -->295 <div class="email-item selected">296 <div class="check">✔</div>297 <div class="content-col">298 <div class="sender">OpenTable | Tanivera Pizza e Past...</div>299 <div class="subject">How was Tanivera Pizza e Pasta?</div>300 <div class="preview">OpenTable OpenTable How was Tanivera Pizza...</div>301 </div>302 <div class="date">Oct 6</div>303 <div class="star">304 <svg viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7.1 1-5.2 5 1.4 7-6.5-3.5-6.5 3.5 1.4-7-5.2-5 7.1-1z"/></svg>305 </div>306 </div>307 308 <div class="email-item">309 <div class="avatar">G</div>310 <div class="content-col">311 <div class="sender">Google Calendar</div>312 <div class="subject">Google Calendar now shows...</div>313 <div class="preview">Google Calendar now shows ...</div>314 </div>315 <div class="date">Oct 3</div>316 <div class="star">317 <svg viewBox="0 0 24 24"><path d="M12 3l3.2 6.5 7.1 1-5.2 5 1.4 7-6.5-3.5-6.5 3.5 1.4-7-5.2-5 7.1-1z"/></svg>318 </div>319 </div>320 </div>321 322 <!-- Compose -->323 <div class="compose">324 <svg class="pencil" viewBox="0 0 24 24">325 <path d="M3 17l2 4 4-2 10-10-4-4L5 15l-2 2z" />326 </svg>327 Compose328 </div>329 330 <div class="gesture"></div>331</div>332</body>333</html>