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: Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #0f1519;15 color: #e6eef2;16 }17 18 /* Simulated app content behind the drawer */19 .app-behind {20 position: absolute;21 inset: 0;22 background: #0d1114;23 }24 .app-behind .row {25 display: flex;26 align-items: center;27 padding: 34px 40px;28 border-bottom: 1px solid #1c2328;29 color: #a8b3b9;30 opacity: 0.7;31 }32 .chip {33 margin-left: auto;34 background: #2d463a;35 color: #b8d6c6;36 padding: 10px 18px;37 border-radius: 18px;38 font-size: 26px;39 }40 41 /* Status bar (top) */42 .status-bar {43 position: absolute;44 top: 0; left: 0; right: 0;45 height: 96px;46 background: #0c1216;47 display: flex;48 align-items: center;49 padding: 0 28px;50 color: #e7f0f4;51 z-index: 3;52 }53 .status-time { font-size: 34px; letter-spacing: 1px; }54 .status-icons { margin-left: auto; display: flex; gap: 26px; opacity: 0.9; }55 56 /* Drawer */57 .drawer {58 position: absolute;59 top: 0; left: 0;60 width: 820px;61 height: 100%;62 background: #25323a;63 box-shadow: 8px 0 24px rgba(0,0,0,0.6);64 z-index: 4;65 }66 .drawer .content {67 position: absolute;68 top: 96px; /* below status bar */69 left: 0; right: 0; bottom: 0;70 overflow: hidden;71 display: flex;72 flex-direction: column;73 }74 .drawer .scroll {75 overflow-y: auto;76 padding-bottom: 160px;77 }78 79 .section-label {80 font-size: 26px;81 color: #9fb0b8;82 padding: 30px 36px 10px 36px;83 }84 85 .menu-item {86 display: flex;87 align-items: center;88 gap: 28px;89 padding: 28px 32px 28px 36px;90 color: #e5eef2;91 font-size: 34px;92 }93 .menu-item .count {94 margin-left: auto;95 color: #a9b6bc;96 font-size: 30px;97 }98 .divider {99 height: 1px;100 background: #2f3e46;101 margin: 20px 0;102 }103 104 .right-dim {105 position: absolute;106 top: 0; left: 820px; right: 0; bottom: 0;107 background: rgba(0,0,0,0.45);108 z-index: 3;109 }110 111 /* Simple bottom home indicator */112 .home-indicator {113 position: absolute;114 bottom: 38px;115 left: 50%;116 transform: translateX(-50%);117 width: 270px;118 height: 10px;119 background: #e6e6e6;120 border-radius: 8px;121 opacity: 0.9;122 z-index: 5;123 }124 125 /* Icon sizing */126 .ic { width: 44px; height: 44px; fill: none; stroke: #cfe0e6; stroke-width: 2.5; }127 .ic-fill { fill: #cfe0e6; stroke: none; }128</style>129</head>130<body>131<div id="render-target">132 133 <!-- Behind content -->134 <div class="app-behind">135 <div class="status-bar" style="opacity:0;">136 <!-- hidden under drawer but keeps structure -->137 </div>138 <div class="row">139 <div style="width:56px;height:56px;border-radius:28px;background:#1e262b;margin-right:18px;"></div>140 <div style="flex:1;">Conversation preview text</div>141 <div class="chip">24 new</div>142 </div>143 <div class="row"><div style="flex:1;">Another thread …</div><span style="opacity:.7;">Oct 23</span></div>144 <div class="row"><div style="flex:1;">Message preview …</div><span style="opacity:.7;">Oct 22</span></div>145 <div class="row"><div style="flex:1;">Message preview …</div><span style="opacity:.7;">Oct 21</span></div>146 </div>147 148 <!-- OS status bar -->149 <div class="status-bar">150 <div class="status-time">11:05</div>151 <div class="status-icons">152 <!-- simple placeholders -->153 <svg class="ic" viewBox="0 0 24 24"><path d="M3 12h4M3 6h8M3 18h12" /></svg>154 <svg class="ic" viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 0 16 0" /></svg>155 <svg class="ic" viewBox="0 0 24 24"><path d="M20 8c0-3.3-2.7-6-6-6S8 4.7 8 8M3 20h18" /></svg>156 <svg class="ic" viewBox="0 0 24 24"><path d="M18 6l-2 0a4 4 0 0 0-8 0l-2 0v14h12V6z" /></svg>157 </div>158 </div>159 160 <!-- Drawer -->161 <div class="drawer">162 <div class="content">163 <div class="scroll">164 165 <div class="menu-item" style="margin-top:18px;">166 <!-- Social -->167 <svg class="ic" viewBox="0 0 24 24">168 <circle cx="12" cy="8" r="3.2"></circle>169 <path d="M4 20c1.8-4.5 14.2-4.5 16 0"></path>170 </svg>171 <span>Social</span>172 </div>173 174 <div class="section-label">All labels</div>175 176 <div class="menu-item">177 <svg class="ic" viewBox="0 0 24 24">178 <path d="M12 2l2.6 5.3 5.9.9-4.2 4.1.99 5.8L12 15.9 6.7 18l1-5.8L3.5 8.2l5.9-.9L12 2z"></path>179 </svg>180 <span>Starred</span>181 <span class="count"></span>182 </div>183 184 <div class="menu-item">185 <svg class="ic" viewBox="0 0 24 24">186 <circle cx="12" cy="12" r="8"></circle>187 <path d="M12 7v6l4 2"></path>188 </svg>189 <span>Snoozed</span>190 </div>191 192 <div class="menu-item">193 <svg class="ic" viewBox="0 0 24 24">194 <path d="M5 4l6 8 6-8v16H5z"></path>195 </svg>196 <span>Important</span>197 <span class="count">32</span>198 </div>199 200 <div class="menu-item">201 <svg class="ic" viewBox="0 0 24 24">202 <path d="M3 12l8-5v4h10v2H11v4z"></path>203 </svg>204 <span>Sent</span>205 <span class="count">4</span>206 </div>207 208 <div class="menu-item">209 <svg class="ic" viewBox="0 0 24 24">210 <rect x="3" y="5" width="18" height="14" rx="2"></rect>211 <path d="M7 9h10M7 13h6"></path>212 </svg>213 <span>Scheduled</span>214 </div>215 216 <div class="menu-item">217 <svg class="ic" viewBox="0 0 24 24">218 <rect x="4" y="6" width="16" height="12" rx="2"></rect>219 <path d="M9 12l3-3 3 3M12 9v6"></path>220 </svg>221 <span>Outbox</span>222 </div>223 224 <div class="menu-item">225 <svg class="ic" viewBox="0 0 24 24">226 <path d="M5 3h10l4 4v14H5z"></path>227 <path d="M15 3v5h4"></path>228 </svg>229 <span>Drafts</span>230 <span class="count">2</span>231 </div>232 233 <div class="menu-item">234 <svg class="ic" viewBox="0 0 24 24">235 <rect x="3" y="5" width="18" height="14" rx="2"></rect>236 <path d="M3 7l9 6 9-6"></path>237 </svg>238 <span>All mail</span>239 <span class="count">901</span>240 </div>241 242 <div class="menu-item">243 <svg class="ic" viewBox="0 0 24 24">244 <path d="M7 12l5-9 5 9-5 9-5-9z"></path>245 <path d="M12 8v4"></path>246 </svg>247 <span>Spam</span>248 <span class="count">6</span>249 </div>250 251 <div class="menu-item">252 <svg class="ic" viewBox="0 0 24 24">253 <path d="M6 7h12v12H6z"></path>254 <path d="M10 7V5h4v2M9 11h6"></path>255 </svg>256 <span>Trash</span>257 <span class="count">2</span>258 </div>259 260 <div class="section-label" style="margin-top:8px;">Google apps</div>261 262 <div class="menu-item">263 <svg class="ic" viewBox="0 0 24 24">264 <rect x="3" y="4" width="18" height="16" rx="2"></rect>265 <path d="M8 4v4M16 4v4M3 10h18"></path>266 </svg>267 <span>Calendar</span>268 </div>269 270 <div class="menu-item">271 <svg class="ic" viewBox="0 0 24 24">272 <circle cx="12" cy="9" r="3.2"></circle>273 <path d="M4 20c1.8-4.5 14.2-4.5 16 0"></path>274 </svg>275 <span>Contacts</span>276 </div>277 278 <div class="divider"></div>279 280 <div class="menu-item">281 <svg class="ic" viewBox="0 0 24 24">282 <circle cx="12" cy="12" r="7"></circle>283 <path d="M12 9a3 3 0 0 1 2 5v1M12 17h.01"></path>284 </svg>285 <span>Settings</span>286 </div>287 288 <div class="menu-item" style="margin-bottom:20px;">289 <svg class="ic" viewBox="0 0 24 24">290 <circle cx="12" cy="12" r="10"></circle>291 <path d="M12 8v4M12 16h.01"></path>292 </svg>293 <span>Help & feedback</span>294 </div>295 296 </div>297 </div>298 </div>299 300 <div class="right-dim"></div>301 302 <div class="home-indicator"></div>303</div>304</body>305</html>