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: Roboto, Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#111316; color:#EDEDED;10 }11 12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0;15 height:90px; padding:0 36px;16 display:flex; align-items:center; justify-content:space-between;17 color:#DADADA; font-size:40px; letter-spacing:0.2px;18 }19 .status-right { display:flex; align-items:center; gap:24px; }20 .battery {21 display:flex; align-items:center; gap:10px; font-size:34px;22 color:#fff;23 }24 .battery .cell {25 width:64px; height:28px; border:3px solid #9E9E9E; border-radius:6px; position:relative;26 }27 .battery .cell::after {28 content:""; position:absolute; top:4px; left:4px; right:4px; bottom:4px; background:#7CFF7A; border-radius:3px;29 }30 .battery .cap {31 width:10px; height:14px; background:#9E9E9E; border-radius:2px; margin-left:6px;32 }33 34 /* App bar (selection mode) */35 .appbar {36 position:absolute; top:90px; left:0; right:0;37 height:120px; padding:0 24px;38 background:#1C1F23; display:flex; align-items:center; justify-content:space-between;39 border-bottom:1px solid #2a2e31;40 }41 .app-left { display:flex; align-items:center; gap:26px; }42 .icon-btn {43 width:88px; height:88px; display:flex; align-items:center; justify-content:center;44 border-radius:12px; color:#EDEDED;45 }46 .app-title { font-size:48px; font-weight:500; }47 .app-actions { display:flex; align-items:center; gap:12px; }48 .app-actions .icon-btn { width:88px; height:88px; }49 svg { width:48px; height:48px; fill:none; stroke:#EDEDED; stroke-width:5px; }50 51 /* Select all row */52 .select-row {53 position:absolute; top:210px; left:0; right:0; height:100px;54 display:flex; align-items:center; padding:0 36px; gap:24px; color:#C9C9C9;55 font-size:40px;56 }57 .checkbox {58 width:56px; height:56px; border-radius:12px; border:3px solid #7f8b98;59 display:flex; align-items:center; justify-content:center;60 }61 .checkbox svg { stroke:#7f8b98; width:42px; height:42px; }62 63 /* List area */64 .list {65 position:absolute; top:310px; left:0; right:0; bottom:0;66 padding-bottom:240px; overflow:hidden;67 }68 .email-item {69 padding:30px 36px; border-bottom:1px solid #24282C;70 display:flex; align-items:flex-start; gap:28px;71 color:#ECECEC;72 }73 .avatar, .tag-icon {74 width:84px; height:84px; border-radius:42px; background:#3A3F45;75 display:flex; align-items:center; justify-content:center; color:#DADADA; font-weight:700; font-size:40px;76 flex-shrink:0;77 }78 .tag-icon { border-radius:16px; }79 .item-content { flex:1; }80 .item-top {81 display:flex; align-items:center; justify-content:space-between;82 }83 .title {84 font-size:42px; font-weight:700;85 }86 .date { font-size:36px; color:#AAB0B6; margin-left:12px; }87 .snippet { font-size:36px; color:#BFC5CB; margin-top:8px; line-height:1.3; }88 .star {89 width:64px; height:64px; display:flex; align-items:center; justify-content:center;90 margin-left:20px;91 }92 .item-top-right { display:flex; align-items:center; gap:20px; }93 .pill {94 padding:8px 20px; background:#3A4F3A; color:#CFF5C6; border-radius:40px; font-size:32px; font-weight:700;95 }96 .selected {97 background:#2A2D32;98 border-radius:24px;99 margin:16px 16px 16px 16px;100 padding:30px 36px;101 }102 103 /* Floating compose */104 .compose {105 position:absolute; right:32px; bottom:280px;106 background:#3A3F45; color:#fff; border-radius:36px;107 height:150px; width:560px; display:flex; align-items:center; gap:26px; padding:0 40px;108 box-shadow:0 10px 24px rgba(0,0,0,0.5);109 }110 .compose .pencil { width:56px; height:56px; border-radius:12px; background:#59616A; display:flex; align-items:center; justify-content:center; }111 .compose span { font-size:46px; font-weight:600; }112 113 /* Bottom gesture bar */114 .gesture {115 position:absolute; bottom:160px; left:50%; transform:translateX(-50%);116 width:240px; height:10px; background:#EDEDED; border-radius:6px; opacity:0.9;117 }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar -->124 <div class="status-bar">125 <div>6:19</div>126 <div class="status-right">127 <div style="width:34px; height:34px; border-radius:50%; border:3px solid #9E9E9E;"></div>128 <div style="width:34px; height:34px; border-radius:50%; border:3px solid #9E9E9E;"></div>129 <div style="width:34px; height:34px; border-radius:50%; border:3px solid #9E9E9E;"></div>130 <div class="battery">131 <div class="cell"></div><div class="cap"></div><div>100%</div>132 </div>133 </div>134 </div>135 136 <!-- App bar -->137 <div class="appbar">138 <div class="app-left">139 <div class="icon-btn">140 <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>141 </div>142 <div class="app-title">1</div>143 </div>144 <div class="app-actions">145 <div class="icon-btn">146 <!-- archive/download to inbox -->147 <svg viewBox="0 0 24 24">148 <path d="M4 20h16v-8H4v8z"></path>149 <path d="M12 4v8m-4-4l4 4 4-4"></path>150 </svg>151 </div>152 <div class="icon-btn">153 <!-- trash -->154 <svg viewBox="0 0 24 24">155 <path d="M5 7h14"></path>156 <path d="M9 7V5h6v2"></path>157 <path d="M6 7l1 12h10l1-12"></path>158 </svg>159 </div>160 <div class="icon-btn">161 <!-- envelope -->162 <svg viewBox="0 0 24 24">163 <path d="M3 6h18v12H3z"></path>164 <path d="M3 6l9 7 9-7"></path>165 </svg>166 </div>167 <div class="icon-btn">168 <!-- more -->169 <svg viewBox="0 0 24 24">170 <circle cx="12" cy="5" r="2"></circle>171 <circle cx="12" cy="12" r="2"></circle>172 <circle cx="12" cy="19" r="2"></circle>173 </svg>174 </div>175 </div>176 </div>177 178 <!-- Select all -->179 <div class="select-row">180 <div class="checkbox">181 <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/></svg>182 </div>183 <div>Select all</div>184 </div>185 186 <!-- List -->187 <div class="list">188 189 <!-- Promotions -->190 <div class="email-item">191 <div class="tag-icon">🏷️</div>192 <div class="item-content">193 <div class="item-top">194 <div class="title">Promotions</div>195 <div class="item-top-right">196 <div class="pill">10 new</div>197 </div>198 </div>199 <div class="snippet">Kitchen Stories, Scribd, Emma at Si...</div>200 </div>201 </div>202 203 <!-- me, Quentin -->204 <div class="email-item">205 <div class="avatar" style="background:#6E5BD7;">Q</div>206 <div class="item-content">207 <div class="item-top">208 <div class="title">me, Quentin <span style="color:#9AA0A6; font-weight:600;">3</span></div>209 <div class="item-top-right">210 <div class="date">Oct 13</div>211 <div class="star">212 <svg viewBox="0 0 24 24"><path d="M12 3l3.5 7 7.5 1-5.5 5 1.5 8-7-4-7 4 1.5-8-5.5-5 7.5-1z"/></svg>213 </div>214 </div>215 </div>216 <div class="snippet">Important meeting time</div>217 <div class="snippet" style="color:#97A0A7;">Ok, see you then. On Fri, Oct 13, 2023, 8:48...</div>218 </div>219 </div>220 221 <!-- Kitchen Stories -->222 <div class="email-item">223 <div class="avatar" style="background:#59616A;">👤</div>224 <div class="item-content">225 <div class="item-top">226 <div class="title">Kitchen Stories</div>227 <div class="item-top-right">228 <div class="date">Oct 11</div>229 <div class="star">230 <svg viewBox="0 0 24 24"><path d="M12 3l3.5 7 7.5 1-5.5 5 1.5 8-7-4-7 4 1.5-8-5.5-5 7.5-1z"/></svg>231 </div>232 </div>233 </div>234 <div class="snippet">Good news is just one click away!</div>235 <div class="snippet" style="color:#AEB4BA;">Please confirm your registration to receive ...</div>236 </div>237 </div>238 239 <!-- me, Mail -->240 <div class="email-item">241 <div class="avatar" style="background:#D4A63B;">M</div>242 <div class="item-content">243 <div class="item-top">244 <div class="title">me, Mail <span style="color:#9AA0A6; font-weight:600;">2</span></div>245 <div class="item-top-right">246 <div class="date">Oct 4</div>247 <div class="star">248 <svg viewBox="0 0 24 24"><path d="M12 3l3.5 7 7.5 1-5.5 5 1.5 8-7-4-7 4 1.5-8-5.5-5 7.5-1z"/></svg>249 </div>250 </div>251 </div>252 <div class="snippet">(no subject)</div>253 <div class="snippet" style="color:#AEB4BA;">Address not found Your message wasn't deli...</div>254 </div>255 </div>256 257 <!-- Delivery Much -->258 <div class="email-item">259 <div class="avatar" style="background:#59616A;">👤</div>260 <div class="item-content">261 <div class="item-top">262 <div class="title">Delivery Much</div>263 <div class="item-top-right">264 <div class="date">Oct 4</div>265 <div class="star">266 <svg viewBox="0 0 24 24"><path d="M12 3l3.5 7 7.5 1-5.5 5 1.5 8-7-4-7 4 1.5-8-5.5-5 7.5-1z"/></svg>267 </div>268 </div>269 </div>270 <div class="snippet" style="font-weight:700;">Código de verificação</div>271 <div class="snippet" style="color:#AEB4BA;">Delivery Much Delivery Much Bem-vindo a...</div>272 </div>273 </div>274 275 <!-- Rappi selected -->276 <div class="email-item selected">277 <div class="avatar" style="background:#69727C;">✓</div>278 <div class="item-content">279 <div class="item-top">280 <div class="title">Rappi</div>281 <div class="item-top-right">282 <div class="date">Oct 3</div>283 <div class="star">284 <svg viewBox="0 0 24 24"><path d="M12 3l3.5 7 7.5 1-5.5 5 1.5 8-7-4-7 4 1.5-8-5.5-5 7.5-1z"/></svg>285 </div>286 </div>287 </div>288 <div class="snippet">Verifique seu email</div>289 <div class="snippet" style="color:#AEB4BA;">E comece desfrutar da Rappi Oi Fabio 😊 Cli...</div>290 </div>291 </div>292 293 <!-- Scribd Welcome -->294 <div class="email-item">295 <div class="avatar" style="background:#59616A;">👤</div>296 <div class="item-content">297 <div class="item-top">298 <div class="title">Scribd</div>299 <div class="item-top-right">300 <div class="date">Sep 26</div>301 <div class="star">302 <svg viewBox="0 0 24 24"><path d="M12 3l3.5 7 7.5 1-5.5 5 1.5 8-7-4-7 4 1.5-8-5.5-5 7.5-1z"/></svg>303 </div>304 </div>305 </div>306 <div class="snippet" style="font-weight:700;">Welcome to Scribd!</div>307 <div class="snippet" style="color:#AEB4BA;">Never stop growing with access to everythin...</div>308 </div>309 </div>310 311 <!-- Scribd verify -->312 <div class="email-item">313 <div class="avatar" style="background:#59616A;">👤</div>314 <div class="item-content">315 <div class="item-top">316 <div class="title">Scribd</div>317 <div class="item-top-right">318 <div class="date">Sep 26</div>319 <div class="star">320 <svg viewBox="0 0 24 24"><path d="M12 3l3.5 7 7.5 1-5.5 5 1.5 8-7-4-7 4 1.5-8-5.5-5 7.5-1z"/></svg>321 </div>322 </div>323 </div>324 <div class="snippet">Fabio, please verify your e...</div>325 <div class="snippet" style="color:#AEB4BA;">Didn't create a Scribd accou...</div>326 </div>327 </div>328 329 </div>330 331 <!-- Floating compose -->332 <div class="compose">333 <div class="pencil">334 <svg viewBox="0 0 24 24">335 <path d="M4 20l6-2 10-10-4-4L6 14l-2 6z"></path>336 </svg>337 </div>338 <span>Compose</span>339 </div>340 341 <!-- Gesture bar -->342 <div class="gesture"></div>343 344</div>345</body>346</html>