GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Drawer Menu - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #0d0f0e;13 border-radius: 0;14 box-shadow: none;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute; top: 0; left: 0; right: 0;20 height: 120px; background: #121212; color: #eaeaea;21 display: flex; align-items: center; justify-content: space-between;22 padding: 0 36px;23 font-weight: 600;24 }25 .status-left { display: flex; align-items: center; gap: 24px; font-size: 40px; }26 .status-right { display: flex; align-items: center; gap: 26px; color: #eaeaea; }27 .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #eaeaea; stroke-width: 3; }28 29 /* Overlay inbox backdrop (right side) */30 .inbox-backdrop {31 position: absolute; top: 120px; right: 0; width: 220px; height: 2000px;32 background: linear-gradient(180deg, rgba(20,20,20,0.8), rgba(20,20,20,0.95));33 }34 35 /* Drawer */36 .drawer {37 position: absolute; top: 120px; left: 0; width: 860px; height: 2160px;38 background: #1b211c;39 box-shadow: 8px 0 20px rgba(0,0,0,0.6);40 color: #f6f6f6;41 overflow: hidden;42 }43 .drawer-content {44 padding: 32px 40px 40px 40px;45 }46 47 .menu-item {48 display: flex; align-items: center; justify-content: space-between;49 padding: 26px 0;50 border-bottom: 0 solid transparent;51 }52 .menu-left {53 display: flex; align-items: center; gap: 32px;54 }55 .menu-icon {56 width: 48px; height: 48px;57 }58 .menu-icon svg {59 width: 48px; height: 48px;60 stroke: #e9ece7; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;61 }62 .label { font-size: 40px; color: #e9ece7; }63 .count { font-size: 36px; color: #e9ece7; font-weight: 600; }64 65 .section-title {66 font-size: 28px; color: #b7beb7; margin-top: 14px; margin-bottom: 6px;67 }68 69 .divider {70 height: 1px; background: #2a2f29; margin: 28px -40px 18px;71 }72 73 .footer-divider {74 height: 2px; background: #2a2f29; margin: 16px -40px 6px;75 }76 77 /* Gesture bar */78 .gesture {79 position: absolute; bottom: 30px; left: 50%;80 transform: translateX(-50%);81 width: 300px; height: 12px; border-radius: 8px;82 background: #e7e7e7;83 }84</style>85</head>86<body>87<div id="render-target">88 <!-- Status bar -->89 <div class="status-bar">90 <div class="status-left">91 <span>11:25</span>92 <span class="status-icon">93 <!-- lock -->94 <svg viewBox="0 0 24 24"><path d="M6 10h12v10H6z"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>95 </span>96 <span class="status-icon">97 <!-- magnifier -->98 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M15 15l6 6"/></svg>99 </span>100 <span class="status-icon">101 <!-- badge LR (square) -->102 <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M6 9h5M6 13h8"/></svg>103 </span>104 <span class="status-icon">105 <!-- N glyph -->106 <svg viewBox="0 0 24 24"><path d="M4 19V5l16 14V5"/></svg>107 </span>108 <span class="status-icon">109 <!-- dot -->110 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#eaeaea"/></svg>111 </span>112 </div>113 <div class="status-right">114 <span class="status-icon">115 <!-- do-not-disturb circle -->116 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M7 12h10"/></svg>117 </span>118 <span class="status-icon">119 <!-- wifi -->120 <svg viewBox="0 0 24 24"><path d="M2 9c5-5 15-5 20 0"/><path d="M6 13c3-3 9-3 12 0"/><path d="M10 17c1-1 3-1 4 0"/><circle cx="12" cy="20" r="1" fill="#eaeaea"/></svg>121 </span>122 <span class="status-icon">123 <!-- battery -->124 <svg viewBox="0 0 28 24"><rect x="2" y="6" width="22" height="12" rx="2"/><rect x="24" y="9" width="2" height="6"/><rect x="4" y="8" width="18" height="8" fill="#eaeaea" stroke="none"/></svg>125 </span>126 <span style="font-size: 36px;">100%</span>127 </div>128 </div>129 130 <!-- Backdrop glimpse of inbox -->131 <div class="inbox-backdrop"></div>132 133 <!-- Drawer -->134 <div class="drawer">135 <div class="drawer-content">136 <div class="menu-item" style="padding-top: 8px;">137 <div class="menu-left">138 <div class="menu-icon">139 <!-- person -->140 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c2.5-4 13.5-4 16 0"/></svg>141 </div>142 <div class="label">Social</div>143 </div>144 </div>145 146 <div class="section-title">All labels</div>147 148 <div class="menu-item">149 <div class="menu-left">150 <div class="menu-icon">151 <!-- star -->152 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>153 </div>154 <div class="label">Starred</div>155 </div>156 </div>157 158 <div class="menu-item">159 <div class="menu-left">160 <div class="menu-icon">161 <!-- clock -->162 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg>163 </div>164 <div class="label">Snoozed</div>165 </div>166 </div>167 168 <div class="menu-item">169 <div class="menu-left">170 <div class="menu-icon">171 <!-- important tag/ribbon -->172 <svg viewBox="0 0 24 24"><path d="M6 4h10l2 4-2 4H6z"/><path d="M6 12l4 8"/></svg>173 </div>174 <div class="label">Important</div>175 </div>176 <div class="count">2</div>177 </div>178 179 <div class="menu-item">180 <div class="menu-left">181 <div class="menu-icon">182 <!-- sent - paper plane -->183 <svg viewBox="0 0 24 24"><path d="M3 12l18-9-6 18-4-6-8-3z"/></svg>184 </div>185 <div class="label">Sent</div>186 </div>187 </div>188 189 <div class="menu-item">190 <div class="menu-left">191 <div class="menu-icon">192 <!-- scheduled - megaphone + small clock -->193 <svg viewBox="0 0 24 24"><path d="M3 13l12-5v8L3 11z"/><path d="M9 16l1 3"/><circle cx="18" cy="9" r="4"/><path d="M18 7v2l1 1"/></svg>194 </div>195 <div class="label">Scheduled</div>196 </div>197 </div>198 199 <div class="menu-item">200 <div class="menu-left">201 <div class="menu-icon">202 <!-- outbox - rectangle + plane -->203 <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="12" rx="2"/><path d="M7 11l6-3-2 6-2-2-2-1z"/></svg>204 </div>205 <div class="label">Outbox</div>206 </div>207 </div>208 209 <div class="menu-item">210 <div class="menu-left">211 <div class="menu-icon">212 <!-- drafts - document -->213 <svg viewBox="0 0 24 24"><path d="M6 4h9l3 3v13H6z"/><path d="M15 4v3h3"/></svg>214 </div>215 <div class="label">Drafts</div>216 </div>217 <div class="count">1</div>218 </div>219 220 <div class="menu-item">221 <div class="menu-left">222 <div class="menu-icon">223 <!-- all mail - envelope -->224 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 8l9 6 9-6"/></svg>225 </div>226 <div class="label">All mail</div>227 </div>228 <div class="count">10</div>229 </div>230 231 <div class="menu-item">232 <div class="menu-left">233 <div class="menu-icon">234 <!-- spam - octagon ! -->235 <svg viewBox="0 0 24 24"><path d="M8 3h8l5 5v8l-5 5H8l-5-5V8z"/><path d="M12 8v6"/><circle cx="12" cy="17" r="1" fill="#e9ece7"/></svg>236 </div>237 <div class="label">Spam</div>238 </div>239 </div>240 241 <div class="menu-item">242 <div class="menu-left">243 <div class="menu-icon">244 <!-- trash -->245 <svg viewBox="0 0 24 24"><path d="M5 7h14"/><path d="M7 7l1 13h8l1-13"/><path d="M9 4h6l1 3H8z"/></svg>246 </div>247 <div class="label">Trash</div>248 </div>249 <div class="count">2</div>250 </div>251 252 <div class="section-title" style="margin-top: 12px;">Google apps</div>253 254 <div class="menu-item">255 <div class="menu-left">256 <div class="menu-icon">257 <!-- calendar -->258 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="14" rx="2"/><path d="M7 3v5M17 3v5"/><path d="M4 10h16"/></svg>259 </div>260 <div class="label">Calendar</div>261 </div>262 </div>263 264 <div class="menu-item">265 <div class="menu-left">266 <div class="menu-icon">267 <!-- contacts - person -->268 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c2.5-4 13.5-4 16 0"/></svg>269 </div>270 <div class="label">Contacts</div>271 </div>272 </div>273 274 <div class="footer-divider"></div>275 276 <div class="menu-item">277 <div class="menu-left">278 <div class="menu-icon">279 <!-- settings gear (simple) -->280 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M4 12h3M17 12h3M12 4v3M12 17v3M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2"/></svg>281 </div>282 <div class="label">Settings</div>283 </div>284 </div>285 286 <div class="menu-item">287 <div class="menu-left">288 <div class="menu-icon">289 <!-- help -->290 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4"/><circle cx="12" cy="17" r="1" fill="#e9ece7"/></svg>291 </div>292 <div class="label">Help & feedback</div>293 </div>294 </div>295 </div>296 </div>297 298 <!-- Gesture bar -->299 <div class="gesture"></div>300</div>301</body>302</html>