GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Dark Inbox 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: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 background: #1d1d1d;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 box-sizing: border-box;29 }30 .status-left { font-size: 42px; letter-spacing: 1px; }31 .status-right { display: flex; align-items: center; gap: 28px; }32 .status-icon {33 width: 40px; height: 40px; opacity: 0.9;34 border-radius: 4px;35 }36 37 /* Top app bar */38 .top-bar {39 position: absolute;40 top: 110px;41 left: 0;42 width: 1080px;43 height: 130px;44 background: #222326;45 display: flex;46 align-items: center;47 padding: 0 24px;48 box-sizing: border-box;49 border-bottom: 1px solid #2c2c2c;50 }51 .bar-left {52 display: flex; align-items: center; gap: 24px;53 }54 .bar-title { font-size: 44px; }55 .bar-actions {56 margin-left: auto;57 display: flex; align-items: center; gap: 36px;58 }59 .icon-btn {60 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;61 border-radius: 12px;62 }63 .icon-btn svg { width: 48px; height: 48px; fill: #bdbdbd; }64 65 /* List */66 .list {67 position: absolute;68 top: 240px;69 left: 0;70 width: 1080px;71 height: 2000px;72 overflow: hidden;73 padding-bottom: 120px;74 }75 .item {76 display: flex;77 align-items: center;78 padding: 28px 30px;79 border-bottom: 1px solid #262626;80 box-sizing: border-box;81 gap: 28px;82 background: transparent;83 }84 .item.selected {85 background: #2f3f67;86 border-radius: 28px;87 margin: 12px 16px;88 }89 .avatar {90 width: 96px; height: 96px; border-radius: 50%;91 display: flex; align-items: center; justify-content: center;92 font-weight: bold; font-size: 40px; color: #121212;93 }94 .avatar.person { background: #9E9E9E; color: #222; }95 .avatar.gold { background: #FFCC4D; }96 .avatar.yellow { background: #FFDA6B; }97 .avatar.gray { background: #B0BEC5; color: #111; }98 .avatar.blue {99 width: 96px; height: 96px; border-radius: 50%;100 background: #89A7FF; color: #152354;101 }102 .content {103 flex: 1;104 min-width: 0;105 }106 .line1 {107 display: flex; align-items: center; gap: 14px;108 }109 .sender {110 font-size: 44px; font-weight: bold;111 }112 .badge { background: #343a40; color: #bdbdbd; border-radius: 18px; padding: 2px 10px; font-size: 26px; }113 .subject {114 font-size: 40px; font-weight: bold; margin-top: 8px;115 }116 .snippet {117 font-size: 34px; color: #b5b5b5; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;118 }119 .meta {120 display: flex; flex-direction: column; align-items: flex-end; gap: 8px;121 width: 180px;122 }123 .date { font-size: 34px; color: #cfcfcf; }124 .star svg { width: 48px; height: 48px; fill: none; stroke: #bdbdbd; stroke-width: 3; }125 126 /* floating compose */127 .fab {128 position: absolute;129 right: 36px;130 bottom: 220px;131 width: 140px; height: 140px;132 background: #3f4a54;133 border-radius: 28px;134 display: flex; align-items: center; justify-content: center;135 box-shadow: 0 6px 20px rgba(0,0,0,0.6);136 }137 .fab svg { width: 72px; height: 72px; fill: #d7dce2; }138 139 /* gesture bar */140 .gesture {141 position: absolute;142 bottom: 60px;143 left: 50%;144 transform: translateX(-50%);145 width: 420px; height: 16px;146 background: #e6e6e6; border-radius: 12px; opacity: 0.75;147 }148 149 /* small helper icon */150 .check-circle {151 width: 96px; height: 96px; border-radius: 50%;152 background: #92a9ff; display: flex; align-items: center; justify-content: center; color: #14224b; font-size: 42px; font-weight: bold;153 }154</style>155</head>156<body>157<div id="render-target">158 159 <!-- Status bar -->160 <div class="status-bar">161 <div class="status-left">10:16</div>162 <div class="status-right">163 <div class="status-icon" title="Signal">164 <svg viewBox="0 0 24 24">165 <rect x="3" y="14" width="3" height="6" fill="#cfcfcf"></rect>166 <rect x="8" y="11" width="3" height="9" fill="#cfcfcf"></rect>167 <rect x="13" y="8" width="3" height="12" fill="#cfcfcf"></rect>168 <rect x="18" y="5" width="3" height="15" fill="#cfcfcf"></rect>169 </svg>170 </div>171 <div class="status-icon" title="Lock">172 <svg viewBox="0 0 24 24">173 <path d="M6 10h12v10H6z" fill="#cfcfcf"></path>174 <path d="M8 10V7a4 4 0 018 0v3" fill="none" stroke="#cfcfcf" stroke-width="2"></path>175 </svg>176 </div>177 <div class="status-icon" title="Bluetooth">178 <svg viewBox="0 0 24 24">179 <path d="M12 3l5 5-4 4 4 4-5 5V3z" fill="none" stroke="#cfcfcf" stroke-width="2"></path>180 <path d="M7 8l5 4M7 16l5-4" stroke="#cfcfcf" stroke-width="2" fill="none"></path>181 </svg>182 </div>183 <div class="status-icon" title="Wi-Fi">184 <svg viewBox="0 0 24 24">185 <path d="M2 9c5-4 15-4 20 0" stroke="#cfcfcf" stroke-width="2" fill="none"/>186 <path d="M5 12c4-3 10-3 14 0" stroke="#cfcfcf" stroke-width="2" fill="none"/>187 <path d="M8 15c2-2 6-2 8 0" stroke="#cfcfcf" stroke-width="2" fill="none"/>188 <circle cx="12" cy="18" r="2" fill="#cfcfcf"/>189 </svg>190 </div>191 <div class="status-icon" title="Battery">192 <svg viewBox="0 0 24 24">193 <rect x="2" y="6" width="18" height="12" stroke="#cfcfcf" fill="none" stroke-width="2"></rect>194 <rect x="4" y="8" width="12" height="8" fill="#cfcfcf"></rect>195 <rect x="20" y="10" width="2" height="4" fill="#cfcfcf"></rect>196 </svg>197 </div>198 </div>199 </div>200 201 <!-- Top app bar -->202 <div class="top-bar">203 <div class="bar-left">204 <div class="icon-btn" title="Back">205 <svg viewBox="0 0 24 24">206 <path d="M15 6l-6 6 6 6" stroke="#e0e0e0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>207 </svg>208 </div>209 <div class="bar-title">1</div>210 </div>211 <div class="bar-actions">212 <div class="icon-btn" title="Download">213 <svg viewBox="0 0 24 24">214 <path d="M12 3v10" stroke="#bdbdbd" stroke-width="2" fill="none"/>215 <path d="M7 10l5 5 5-5" stroke="#bdbdbd" stroke-width="2" fill="none"/>216 <rect x="4" y="18" width="16" height="2" fill="#bdbdbd"></rect>217 </svg>218 </div>219 <div class="icon-btn" title="Delete">220 <svg viewBox="0 0 24 24">221 <rect x="6" y="7" width="12" height="14" stroke="#bdbdbd" stroke-width="2" fill="none"/>222 <rect x="9" y="3" width="6" height="3" fill="#bdbdbd"></rect>223 <rect x="5" y="6" width="14" height="2" fill="#bdbdbd"></rect>224 </svg>225 </div>226 <div class="icon-btn" title="Archive">227 <svg viewBox="0 0 24 24">228 <rect x="3" y="4" width="18" height="5" stroke="#bdbdbd" stroke-width="2" fill="none"/>229 <rect x="5" y="9" width="14" height="11" stroke="#bdbdbd" stroke-width="2" fill="none"/>230 <path d="M9 13h6" stroke="#bdbdbd" stroke-width="2"/>231 </svg>232 </div>233 <div class="icon-btn" title="More">234 <svg viewBox="0 0 24 24">235 <circle cx="12" cy="6" r="2" fill="#bdbdbd"/>236 <circle cx="12" cy="12" r="2" fill="#bdbdbd"/>237 <circle cx="12" cy="18" r="2" fill="#bdbdbd"/>238 </svg>239 </div>240 </div>241 </div>242 243 <!-- Email list -->244 <div class="list">245 246 <div class="item">247 <div class="avatar person">•</div>248 <div class="content">249 <div class="line1">250 <div class="sender">Evernote</div>251 </div>252 <div class="subject">Add Evernote to your computer</div>253 <div class="snippet">See the big picture and get more from your...</div>254 </div>255 <div class="meta">256 <div class="date">Aug 9</div>257 <div class="star">258 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4 1.2 6.1L12 17l-5.7 3.9L7.5 14 3 9.9 9 9l3-6z"/></svg>259 </div>260 </div>261 </div>262 263 <div class="item">264 <div class="avatar gold">G</div>265 <div class="content">266 <div class="line1">267 <div class="sender">Google</div>268 <span class="badge">2</span>269 </div>270 <div class="subject">Security alert</div>271 <div class="snippet">Yahoo! was granted access to your Google...</div>272 </div>273 <div class="meta">274 <div class="date">Aug 9</div>275 <div class="star">276 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4 1.2 6.1L12 17l-5.7 3.9L7.5 14 3 9.9 9 9l3-6z"/></svg>277 </div>278 </div>279 </div>280 281 <div class="item">282 <div class="avatar yellow">M</div>283 <div class="content">284 <div class="line1">285 <div class="sender">me, Mail</div><span class="badge">2</span>286 </div>287 <div class="subject">Medical documents</div>288 <div class="snippet">Address not found Your message wasn't deli...</div>289 </div>290 <div class="meta">291 <div class="date">Aug 9</div>292 <div class="star">293 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4 1.2 6.1L12 17l-5.7 3.9L7.5 14 3 9.9 9 9l3-6z"/></svg>294 </div>295 </div>296 </div>297 298 <div class="item">299 <div class="avatar yellow">M</div>300 <div class="content">301 <div class="line1">302 <div class="sender">me, Mail</div><span class="badge">2</span>303 </div>304 <div class="subject">Medical documents</div>305 <div class="snippet">Address not found Your message wasn't deli...</div>306 </div>307 <div class="meta">308 <div class="date">Aug 9</div>309 <div class="star">310 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4 1.2 6.1L12 17l-5.7 3.9L7.5 14 3 9.9 9 9l3-6z"/></svg>311 </div>312 </div>313 </div>314 315 <div class="item">316 <div class="avatar gray">C</div>317 <div class="content">318 <div class="line1">319 <div class="sender">Cerebra Research</div>320 </div>321 <div class="subject">Fwd: Working from office</div>322 <div class="snippet">Get Outlook for Android From: Cerebra Res...</div>323 </div>324 <div class="meta">325 <div class="date">Aug 9</div>326 <div class="star">327 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4 1.2 6.1L12 17l-5.7 3.9L7.5 14 3 9.9 9 9l3-6z"/></svg>328 </div>329 </div>330 </div>331 332 <div class="item selected">333 <div class="check-circle">✓</div>334 <div class="content">335 <div class="line1">336 <div class="sender">Cerebra Research</div>337 </div>338 <div class="subject">OFFICIAL WEEKEND PARTY</div>339 <div class="snippet">you are welcome to the party in the mail bo...</div>340 </div>341 <div class="meta">342 <div class="date">Aug 9</div>343 <div class="star">344 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4 1.2 6.1L12 17l-5.7 3.9L7.5 14 3 9.9 9 9l3-6z"/></svg>345 </div>346 </div>347 </div>348 349 <div class="item">350 <div class="avatar person">•</div>351 <div class="content">352 <div class="line1">353 <div class="sender">Jotform</div>354 </div>355 <div class="subject">Limited time: 50% off annual Jotform pla...</div>356 <div class="snippet">Get more forms, submissions, and storage a...</div>357 </div>358 <div class="meta">359 <div class="date">Aug 9</div>360 <div class="star">361 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4 1.2 6.1L12 17l-5.7 3.9L7.5 14 3 9.9 9 9l3-6z"/></svg>362 </div>363 </div>364 </div>365 366 <div class="item">367 <div class="avatar yellow">M</div>368 <div class="content">369 <div class="line1">370 <div class="sender">me, Mail</div><span class="badge">2</span>371 </div>372 <div class="subject">(no subject)</div>373 <div class="snippet">Address not found Your message wasn't deli...</div>374 </div>375 <div class="meta">376 <div class="date">Aug 9</div>377 <div class="star">378 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 .9-4.5 4 1.2 6.1L12 17l-5.7 3.9L7.5 14 3 9.9 9 9l3-6z"/></svg>379 </div>380 </div>381 </div>382 383 </div>384 385 <!-- Floating compose button -->386 <div class="fab" title="Compose">387 <svg viewBox="0 0 24 24">388 <path d="M3 17v4h4l11-11-4-4L3 17z" fill="#d7dce2"></path>389 <path d="M14 5l4 4" stroke="#d7dce2" stroke-width="2"></path>390 </svg>391 </div>392 393 <!-- Gesture bar -->394 <div class="gesture"></div>395 396</div>397</body>398</html>