GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Drawer - UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0e1317;13    font-family: Arial, Helvetica, sans-serif;14    color: #dde3e7;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #0a0f12;25    color: #e6eaed;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-size: 40px;31    letter-spacing: 1px;32  }33  .status-icons {34    margin-left: 24px;35    display: flex;36    gap: 18px;37    align-items: center;38  }39  .ghost-dot, .wifi-dot, .battery-dot {40    width: 22px; height: 22px; border-radius: 50%; background:#e6eaed; opacity:0.9;41  }42  .right-status {43    margin-left: auto;44    display: flex; align-items: center; gap: 24px;45  }46  .wifi {47    width: 36px; height: 24px;48    border: 2px solid #e6eaed;49    border-radius: 4px;50  }51  .battery {52    width: 40px; height: 24px;53    border: 2px solid #e6eaed;54    border-radius: 3px;55    position: relative;56  }57  .battery::after {58    content: "";59    position: absolute;60    right: -10px; top: 7px;61    width: 6px; height: 10px; background: #e6eaed;62    border-radius: 1px;63  }64 65  /* Right side dimmed inbox preview */66  .inbox-preview {67    position: absolute;68    right: 0;69    top: 120px;70    width: 360px;71    height: 2280px;72    background: linear-gradient(180deg,#0f1418 0%, #121a20 100%);73  }74  .preview-item {75    color:#aeb7bd;76    border-bottom: 1px solid rgba(255,255,255,0.06);77    padding: 34px 24px;78    font-size: 32px;79    display: flex; align-items: center;80  }81  .preview-star {82    margin-left: auto;83    width: 30px; height: 30px;84    color:#8aa2b5;85  }86 87  /* Left drawer */88  .drawer {89    position: absolute;90    top: 120px;91    left: 0;92    width: 740px;93    height: 2280px;94    background: #1c242a;95    box-shadow: 8px 0 32px rgba(0,0,0,0.6);96  }97  .drawer-header {98    padding: 40px 48px 24px 48px;99    font-size: 56px;100    font-weight: 700;101    color: #e9edf0;102  }103 104  .menu-group {105    padding-top: 10px;106  }107 108  .menu-item {109    height: 108px;110    display: flex;111    align-items: center;112    padding: 0 44px;113    gap: 30px;114    font-size: 40px;115    color: #d7dde1;116    box-sizing: border-box;117  }118  .menu-item:hover { background: rgba(255,255,255,0.06); }119  .menu-item .icon {120    width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;121    color: #cbd4da;122  }123  .menu-item .count-pill {124    margin-left: auto;125    padding: 10px 24px;126    border-radius: 28px;127    font-size: 34px;128    background: #2c3841;129    color: #e0e6ea;130  }131  .selected {132    background: #2b3740;133    border-radius: 16px;134    margin: 10px 24px;135  }136 137  .subheading {138    color: #9aa6ad;139    font-size: 34px;140    padding: 28px 48px 10px 48px;141  }142 143  .footer-note {144    position: absolute;145    bottom: 28px;146    left: 48px;147    font-size: 34px;148    color: #9aa6ad;149  }150 151  /* Simple icons (inline SVG styled) */152  svg { fill: none; stroke: currentColor; stroke-width: 4; }153</style>154</head>155<body>156<div id="render-target">157  <div class="status-bar">158    8:20159    <div class="status-icons">160      <div class="ghost-dot"></div>161      <div class="ghost-dot"></div>162      <div class="ghost-dot"></div>163      <div class="ghost-dot"></div>164      <div class="ghost-dot"></div>165      <div class="ghost-dot"></div>166      <div class="ghost-dot"></div>167    </div>168    <div class="right-status">169      <div class="wifi"></div>170      <div class="battery"></div>171    </div>172  </div>173 174  <!-- Right side: dimmed inbox preview -->175  <div class="inbox-preview">176    <div class="preview-item">Oct 5 — Message subject177      <div class="preview-star">★</div>178    </div>179    <div class="preview-item">Oct 4 — Another message180      <div class="preview-star">☆</div>181    </div>182    <div class="preview-item">Oct 4 — Offers/Promos183      <div class="preview-star">☆</div>184    </div>185    <div class="preview-item">Oct 3 — Important info186      <div class="preview-star">★</div>187    </div>188    <div class="preview-item">Oct 3 — Updates189      <div class="preview-star">☆</div>190    </div>191    <div class="preview-item">Oct 3 — Reminder192      <div class="preview-star">☆</div>193    </div>194  </div>195 196  <!-- Left Drawer -->197  <div class="drawer">198    <div class="drawer-header">Gmail</div>199 200    <div class="menu-group">201      <div class="menu-item">202        <div class="icon">203          <svg viewBox="0 0 64 64" width="56" height="56">204            <rect x="8" y="12" width="48" height="36" rx="6"></rect>205            <path d="M12 20 L32 32 L52 20"></path>206          </svg>207        </div>208        <div>All inboxes</div>209      </div>210 211      <div class="menu-item selected">212        <div class="icon">213          <svg viewBox="0 0 64 64" width="56" height="56">214            <rect x="8" y="12" width="48" height="36" rx="6"></rect>215          </svg>216        </div>217        <div>Primary</div>218        <div class="count-pill">17</div>219      </div>220 221      <div class="menu-item">222        <div class="icon">223          <svg viewBox="0 0 64 64" width="56" height="56">224            <path d="M14 24 L26 12 L50 12 L38 24 Z"></path>225            <path d="M14 24 L14 44 L38 44 L50 24"></path>226          </svg>227        </div>228        <div>Promotions</div>229      </div>230 231      <div class="menu-item">232        <div class="icon">233          <svg viewBox="0 0 64 64" width="56" height="56">234            <circle cx="26" cy="24" r="10"></circle>235            <path d="M10 50 C12 38, 40 38, 42 50" ></path>236          </svg>237        </div>238        <div>Social</div>239      </div>240    </div>241 242    <div class="subheading">All labels</div>243 244    <div class="menu-group">245      <div class="menu-item">246        <div class="icon">247          <svg viewBox="0 0 64 64" width="56" height="56">248            <path d="M32 8 L38 26 L58 26 L42 38 L48 56 L32 44 L16 56 L22 38 L6 26 L26 26 Z"></path>249          </svg>250        </div>251        <div>Starred</div>252      </div>253 254      <div class="menu-item">255        <div class="icon">256          <svg viewBox="0 0 64 64" width="56" height="56">257            <circle cx="32" cy="32" r="22"></circle>258            <path d="M32 18 L32 34 L44 40"></path>259          </svg>260        </div>261        <div>Snoozed</div>262      </div>263 264      <div class="menu-item">265        <div class="icon">266          <svg viewBox="0 0 64 64" width="56" height="56">267            <rect x="10" y="10" width="44" height="44" rx="8"></rect>268            <path d="M22 32 L30 40 L46 24"></path>269          </svg>270        </div>271        <div>Important</div>272        <div class="count-pill">1</div>273      </div>274 275      <div class="menu-item">276        <div class="icon">277          <svg viewBox="0 0 64 64" width="56" height="56">278            <path d="M12 44 L52 44"></path>279            <path d="M16 22 L28 34 L52 16"></path>280          </svg>281        </div>282        <div>Sent</div>283      </div>284 285      <div class="menu-item">286        <div class="icon">287          <svg viewBox="0 0 64 64" width="56" height="56">288            <rect x="10" y="12" width="44" height="36" rx="6"></rect>289            <path d="M16 16 L48 16"></path>290            <path d="M20 24 L44 24"></path>291          </svg>292        </div>293        <div>Scheduled</div>294      </div>295 296      <div class="menu-item">297        <div class="icon">298          <svg viewBox="0 0 64 64" width="56" height="56">299            <rect x="12" y="14" width="40" height="30" rx="6"></rect>300            <path d="M22 44 L32 34 L42 44"></path>301          </svg>302        </div>303        <div>Outbox</div>304      </div>305 306      <div class="menu-item">307        <div class="icon">308          <svg viewBox="0 0 64 64" width="56" height="56">309            <rect x="14" y="10" width="36" height="44" rx="6"></rect>310            <path d="M20 22 L44 22"></path>311          </svg>312        </div>313        <div>Drafts</div>314      </div>315 316      <div class="menu-item">317        <div class="icon">318          <svg viewBox="0 0 64 64" width="56" height="56">319            <rect x="10" y="16" width="44" height="28" rx="6"></rect>320            <path d="M12 20 L32 34 L52 20"></path>321          </svg>322        </div>323        <div>All mail</div>324        <div class="count-pill">22</div>325      </div>326 327      <div class="menu-item">328        <div class="icon">329          <svg viewBox="0 0 64 64" width="56" height="56">330            <path d="M32 8 L38 14 L32 20 L26 14 Z"></path>331            <circle cx="32" cy="36" r="18"></circle>332            <path d="M32 26 L32 38"></path>333          </svg>334        </div>335        <div>Spam</div>336        <div class="count-pill">1</div>337      </div>338 339      <div class="menu-item">340        <div class="icon">341          <svg viewBox="0 0 64 64" width="56" height="56">342            <rect x="16" y="12" width="32" height="40" rx="4"></rect>343            <path d="M24 12 L24 8 L40 8 L40 12"></path>344          </svg>345        </div>346        <div>Trash</div>347        <div class="count-pill">1</div>348      </div>349    </div>350 351    <div class="footer-note">Google apps</div>352  </div>353</div>354</body>355</html>