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: #ECEFF1;14 }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 24px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #DADADA;28 font-weight: 600;29 font-size: 38px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 22px;35 }36 .icon {37 width: 48px;38 height: 48px;39 display: inline-flex;40 align-items: center;41 justify-content: center;42 }43 .icon svg { fill: #DADADA; }44 45 /* Action bar */46 .action-bar {47 position: absolute;48 top: 96px;49 left: 0;50 width: 1080px;51 height: 120px;52 padding: 0 24px;53 display: flex;54 align-items: center;55 gap: 26px;56 background: #1C1C1C;57 border-bottom: 1px solid #2A2A2A;58 box-sizing: border-box;59 }60 .action-bar .title {61 font-size: 44px;62 color: #E0E0E0;63 margin-right: auto;64 }65 .action-icon { width: 72px; height: 72px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }66 .kebab svg { fill: #BDBDBD; }67 68 /* Select all row */69 .select-all {70 position: absolute;71 top: 216px;72 left: 0;73 width: 1080px;74 height: 90px;75 padding: 0 24px;76 display: flex;77 align-items: center;78 gap: 20px;79 color: #9ED2B8;80 font-size: 40px;81 }82 .checkbox {83 width: 54px; height: 54px; border: 2px solid #8BC34A; border-radius: 8px;84 }85 86 /* Blue info card */87 .info-card {88 position: absolute;89 top: 306px;90 left: 24px;91 width: 1032px;92 border-radius: 28px;93 background: #162B33;94 border: 1px solid #284F5B;95 padding: 36px;96 box-sizing: border-box;97 }98 .info-header { display: flex; align-items: center; gap: 20px; }99 .shield {100 width: 60px; height: 60px; border-radius: 30px;101 background: #1E88E5; display: flex; align-items: center; justify-content: center;102 color: #FFFFFF; font-weight: 700;103 }104 .info-title {105 font-size: 42px; color: #BFE7FF; font-weight: 700;106 }107 .info-desc { margin-top: 14px; font-size: 34px; color: #CFE9F6; line-height: 1.4; }108 .info-actions { margin-top: 28px; display: flex; gap: 40px; align-items: center; }109 .btn-link { color: #4CAF50; font-weight: 700; font-size: 38px; }110 .btn-muted { color: #B0BEC5; font-size: 38px; }111 112 /* Mail list */113 .list {114 position: absolute;115 top: 540px;116 left: 0;117 width: 1080px;118 }119 .mail-row {120 position: relative;121 width: 1080px;122 height: 180px;123 padding: 24px;124 box-sizing: border-box;125 display: flex;126 align-items: center;127 gap: 24px;128 border-bottom: 1px solid #262626;129 }130 .mail-row .avatar {131 width: 96px; height: 96px; border-radius: 48px; background: #616161; color: #E0E0E0;132 display: flex; align-items: center; justify-content: center; font-weight: 700;133 }134 .mail-content { flex: 1; }135 .mail-title { font-size: 40px; font-weight: 700; color: #E8E8E8; }136 .mail-sub { font-size: 34px; color: #B0B0B0; margin-top: 6px; }137 .mail-preview { font-size: 30px; color: #8F8F8F; margin-top: 6px; }138 .mail-date-star {139 position: absolute; right: 24px; top: 24px; display: flex; align-items: center; gap: 24px;140 color: #B0B0B0; font-size: 36px;141 }142 143 /* Selected row styling */144 .mail-row.selected {145 background: rgba(46, 84, 56, 0.8);146 border-radius: 22px;147 margin: 16px 24px;148 width: 1032px;149 }150 .check-circle {151 width: 96px; height: 96px; border-radius: 48px; background: #3FA36B; display: flex; align-items: center; justify-content: center;152 }153 .check-circle svg { fill: #0C3320; }154 155 /* Compose FAB */156 .compose-fab {157 position: absolute;158 right: 36px;159 bottom: 260px;160 width: 420px;161 height: 120px;162 background: #2E7D32;163 color: #DDF6E2;164 border-radius: 60px;165 box-shadow: 0 10px 24px rgba(0,0,0,0.5);166 display: flex; align-items: center; justify-content: center; gap: 24px;167 font-size: 44px; font-weight: 700;168 }169 .compose-fab .fab-icon {170 width: 72px; height: 72px; border-radius: 12px; background: rgba(255,255,255,0.12);171 display: flex; align-items: center; justify-content: center;172 }173 .compose-fab svg { fill: #DDF6E2; }174 175 /* Modal */176 .overlay {177 position: absolute;178 inset: 0;179 background: rgba(0,0,0,0.55);180 }181 .modal {182 position: absolute;183 left: 60px;184 top: 980px;185 width: 960px;186 background: #263238;187 border-radius: 70px;188 padding: 70px 64px;189 box-sizing: border-box;190 color: #E0F2F1;191 box-shadow: 0 12px 40px rgba(0,0,0,0.6);192 }193 .modal-title { font-size: 64px; font-weight: 700; margin-bottom: 40px; }194 .modal-item { display: flex; align-items: center; gap: 26px; padding: 24px 0; font-size: 48px; color: #E0F2F1; }195 .modal-item .micon {196 width: 72px; height: 72px; border-radius: 16px; background: #37474F; display: flex; align-items: center; justify-content: center;197 }198 .modal-actions { display: flex; justify-content: flex-end; margin-top: 30px; }199 .cancel-btn { font-size: 48px; color: #79D4A6; }200 201 /* Stars */202 .star svg { fill: #BDBDBD; }203 204</style>205</head>206<body>207<div id="render-target">208 209 <!-- Status Bar -->210 <div class="status-bar">211 <div class="status-left">7:24</div>212 <div class="status-right">213 <div class="icon"><svg viewBox="0 0 24 24"><path d="M3 12l7-7v4h7v6h-7v4z"/></svg></div>214 <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 3l9 4v6c0 5-4 7-9 8-5-1-9-3-9-8V7l9-4z"/></svg></div>215 <div class="icon"><svg viewBox="0 0 24 24"><path d="M4 9h16v2H4zm0 4h16v2H4z"/></svg></div>216 <div style="font-weight:700; color:#DADADA;">100%</div>217 </div>218 </div>219 220 <!-- Action Bar -->221 <div class="action-bar">222 <div class="icon">223 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6v12z"/></svg>224 </div>225 <div class="title">1</div>226 <div class="action-icon">227 <!-- Archive -->228 <svg viewBox="0 0 24 24"><path fill="#CFCFCF" d="M4 5h16l-2 3H6L4 5zm3 5h10v9H7v-9zm4 2v3h2v-3h-2z"/></svg>229 </div>230 <div class="action-icon">231 <!-- Trash -->232 <svg viewBox="0 0 24 24"><path fill="#CFCFCF" d="M6 7h12v2H6V7zm2 3h8l-1 8H9L8 10zm4-6c1.1 0 2 .9 2 2H8c0-1.1.9-2 2-2h2z"/></svg>233 </div>234 <div class="action-icon">235 <!-- Envelope -->236 <svg viewBox="0 0 24 24"><path fill="#CFCFCF" d="M4 6h16v12H4V6zm8 6l8-6H4l8 6zm-8 6l6-6 2 1.5L14 12l6 6H4z"/></svg>237 </div>238 <div class="action-icon kebab">239 <!-- Kebab menu -->240 <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>241 </div>242 </div>243 244 <!-- Select all -->245 <div class="select-all">246 <div class="checkbox"></div>247 <div>Select all</div>248 </div>249 250 <!-- Info card -->251 <div class="info-card">252 <div class="info-header">253 <div class="shield">G</div>254 <div class="info-title">Get additional protection against phishing</div>255 </div>256 <div class="info-desc">257 Turn on Enhanced Safe Browsing to get additional protection against dangerous emails258 </div>259 <div class="info-actions">260 <div class="btn-link">Continue</div>261 <div class="btn-muted">No thanks</div>262 </div>263 </div>264 265 <!-- List -->266 <div class="list">267 <!-- Row: Kitchen Stories -->268 <div class="mail-row" style="top: 0px;">269 <div class="avatar"></div>270 <div class="mail-content">271 <div class="mail-title">Kitchen Stories</div>272 <div class="mail-sub">Welcome to Kitchen Stories!</div>273 <div class="mail-preview">Thank you for signing up. Let's get cooking...</div>274 </div>275 <div class="mail-date-star">276 <div>Oct 6</div>277 <div class="star">278 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-0.6L12 3l3 6.2 7 0.6-5.4 4.3 1.6 6.9z"/></svg>279 </div>280 </div>281 </div>282 283 <!-- Row: OpenTable selected -->284 <div class="mail-row selected" style="top: 196px;">285 <div class="check-circle">286 <svg viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>287 </div>288 <div class="mail-content">289 <div class="mail-title">OpenTable | Tanivera Pizza e Pasta</div>290 <div class="mail-sub">How was Tanivera Pizza e Pasta?</div>291 <div class="mail-preview">OpenTable OpenTable How was Tanivera Pizza...</div>292 </div>293 <div class="mail-date-star">294 <div>Oct 6</div>295 <div class="star">296 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-0.6L12 3l3 6.2 7 0.6-5.4 4.3 1.6 6.9z"/></svg>297 </div>298 </div>299 </div>300 301 <!-- Row: Google Calendar -->302 <div class="mail-row" style="top: 408px;">303 <div class="avatar" style="background:#7E57C2;">G</div>304 <div class="mail-content">305 <div class="mail-title">Google Calendar</div>306 <div class="mail-sub">Google Calendar now shows</div>307 <div class="mail-preview">Google Calendar now shows...</div>308 </div>309 <div class="mail-date-star">310 <div>Oct 3</div>311 <div class="star">312 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-0.6L12 3l3 6.2 7 0.6-5.4 4.3 1.6 6.9z"/></svg>313 </div>314 </div>315 </div>316 </div>317 318 <!-- Compose FAB -->319 <div class="compose-fab">320 <div class="fab-icon">321 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.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"/></svg>322 </div>323 Compose324 </div>325 326 <!-- Modal: Move to -->327 <div class="overlay"></div>328 <div class="modal">329 <div class="modal-title">Move to</div>330 <div class="modal-item">331 <div class="micon">332 <!-- Tag icon -->333 <svg viewBox="0 0 24 24"><path fill="#CFE8F1" d="M3 12l9 9 9-9-9-9H6a3 3 0 0 0-3 3v6zM8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>334 </div>335 Promotions336 </div>337 <div class="modal-item">338 <div class="micon">339 <!-- Person icon -->340 <svg viewBox="0 0 24 24"><path fill="#CFE8F1" d="M12 12a4 4 0 1 0-0.001-8.001A4 4 0 0 0 12 12zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z"/></svg>341 </div>342 Social343 </div>344 <div class="modal-actions">345 <div class="cancel-btn">Cancel</div>346 </div>347 </div>348 349</div>350</body>351</html>