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 UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #2d2d2d;15 color: #EDEDED;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #3a3a3a;26 display: flex;27 align-items: center;28 padding: 0 36px;29 box-sizing: border-box;30 }31 .status-time {32 font-size: 48px;33 font-weight: 600;34 letter-spacing: 1px;35 color: #f1f1f1;36 }37 .status-icons {38 margin-left: auto;39 display: flex;40 align-items: center;41 gap: 28px;42 }43 .icon {44 width: 44px;45 height: 44px;46 display: inline-block;47 }48 .icon svg { width: 100%; height: 100%; fill: none; stroke: #f1f1f1; stroke-width: 2.5; }49 50 /* Layout: Drawer + right sliver */51 .drawer {52 position: absolute;53 top: 120px;54 left: 0;55 width: 860px;56 height: 2280px;57 background: #444546;58 display: flex;59 flex-direction: column;60 }61 62 .right-sliver {63 position: absolute;64 top: 120px;65 right: 0;66 width: 220px;67 height: 2280px;68 background: #161616;69 }70 .right-sliver .top-controls {71 height: 140px;72 background: #272727;73 display: flex;74 justify-content: flex-end;75 align-items: center;76 padding-right: 26px;77 gap: 26px;78 box-sizing: border-box;79 }80 .right-floating {81 position: absolute;82 right: 28px;83 bottom: 220px;84 width: 138px;85 height: 138px;86 background: rgba(255,255,255,0.08);87 border-radius: 50%;88 border: 1px solid rgba(255,255,255,0.15);89 display: flex;90 align-items: center;91 justify-content: center;92 }93 94 /* Drawer header image placeholder */95 .drawer-header {96 height: 380px;97 border-bottom: 1px solid rgba(255,255,255,0.08);98 display: flex;99 align-items: stretch;100 }101 .img-ph {102 width: 100%;103 height: 100%;104 background: #E0E0E0;105 border: 1px solid #BDBDBD;106 color: #757575;107 display: flex;108 align-items: center;109 justify-content: center;110 font-size: 42px;111 font-weight: 500;112 }113 114 /* Navigation list */115 .nav-list {116 flex: 1;117 overflow: hidden;118 padding-bottom: 220px; /* space for footer */119 position: relative;120 }121 .nav-item {122 height: 140px;123 display: flex;124 align-items: center;125 padding: 0 36px;126 gap: 34px;127 box-sizing: border-box;128 border-bottom: 1px solid rgba(255,255,255,0.09);129 }130 .nav-item .ico {131 width: 64px;132 height: 64px;133 display: grid;134 place-items: center;135 color: #bdbdbd;136 }137 .nav-item .label {138 font-size: 48px;139 color: #e8e8e8;140 }141 .nav-item.bold .label { font-weight: 700; color: #ffffff; }142 .nav-item .meta {143 margin-left: auto;144 color: #9e9e9e;145 }146 .nav-item.no-border { border-bottom: none; }147 .nav-item.italic .label { font-style: italic; color: #d9d9d9; }148 149 /* Footer actions at bottom */150 .drawer-footer {151 position: absolute;152 bottom: 0;153 left: 0;154 width: 860px;155 height: 220px;156 background: #505152;157 border-top: 1px solid rgba(0,0,0,0.4);158 display: grid;159 grid-template-columns: repeat(4, 1fr);160 padding-top: 28px;161 box-sizing: border-box;162 }163 .footer-item {164 display: flex;165 flex-direction: column;166 align-items: center;167 gap: 18px;168 color: #d0d0d0;169 }170 .footer-item .round {171 width: 86px;172 height: 86px;173 border-radius: 50%;174 background: #6a6a6a;175 display: grid;176 place-items: center;177 color: white;178 }179 .footer-item span {180 font-size: 36px;181 }182 183 /* Gesture bar */184 .gesture {185 position: absolute;186 bottom: 24px;187 left: 50%;188 transform: translateX(-50%);189 width: 320px;190 height: 14px;191 background: white;192 border-radius: 10px;193 opacity: 0.9;194 }195 196 /* Minimal inline icon SVG styles */197 .ico svg { width: 64px; height: 64px; stroke: #bfbfbf; stroke-width: 6; fill: none; }198 .meta svg { width: 34px; height: 34px; stroke: #9e9e9e; stroke-width: 6; }199 200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status Bar -->206 <div class="status-bar">207 <div class="status-time">11:09</div>208 <div class="status-icons">209 <!-- simple moon/crescent indicator icon -->210 <span class="icon">211 <svg viewBox="0 0 24 24">212 <path d="M12 3a7.5 7.5 0 0 0 0 18A9 9 0 1 1 12 3z" fill="#f1f1f1" stroke="none"></path>213 </svg>214 </span>215 <!-- Wi-Fi -->216 <span class="icon">217 <svg viewBox="0 0 24 24">218 <path d="M2 8c5-5 15-5 20 0" />219 <path d="M6 12c3-3 9-3 12 0" />220 <path d="M10 16c2-2 4-2 6 0" />221 <circle cx="15" cy="19" r="1.5" fill="#f1f1f1" stroke="none"></circle>222 </svg>223 </span>224 <!-- Battery -->225 <span class="icon">226 <svg viewBox="0 0 24 24">227 <rect x="3" y="7" width="16" height="10" rx="2"></rect>228 <rect x="20" y="10" width="2" height="4"></rect>229 <rect x="5" y="9" width="12" height="6" fill="#f1f1f1" stroke="none"></rect>230 </svg>231 </span>232 </div>233 </div>234 235 <!-- Left Drawer -->236 <div class="drawer">237 <div class="drawer-header">238 <div class="img-ph">[IMG: Night Sky with Crescent Moon]</div>239 </div>240 241 <div class="nav-list">242 <div class="nav-item">243 <div class="ico">244 <!-- Clock -->245 <svg viewBox="0 0 24 24">246 <circle cx="12" cy="12" r="9"></circle>247 <path d="M12 7v6l4 2"></path>248 </svg>249 </div>250 <div class="label">Recent list</div>251 </div>252 253 <div class="nav-item bold">254 <div class="ico">255 <!-- Books -->256 <svg viewBox="0 0 24 24">257 <rect x="3" y="5" width="4" height="14"></rect>258 <rect x="9" y="5" width="4" height="14"></rect>259 <rect x="15" y="5" width="4" height="14"></rect>260 </svg>261 </div>262 <div class="label">My Shelf</div>263 <div class="meta">264 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>265 </div>266 </div>267 268 <div class="nav-item">269 <div class="ico">270 <!-- File -->271 <svg viewBox="0 0 24 24">272 <path d="M6 3h8l4 4v14H6z"></path>273 <path d="M14 3v5h5"></path>274 </svg>275 </div>276 <div class="label">My Files</div>277 </div>278 279 <div class="nav-item">280 <div class="ico">281 <!-- Globe -->282 <svg viewBox="0 0 24 24">283 <circle cx="12" cy="12" r="9"></circle>284 <path d="M3 12h18"></path>285 <path d="M12 3a12 12 0 0 1 0 18"></path>286 <path d="M12 3a12 12 0 0 0 0 18"></path>287 </svg>288 </div>289 <div class="label">Net Library</div>290 </div>291 292 <div class="nav-item">293 <div class="ico">294 <!-- Bookmark -->295 <svg viewBox="0 0 24 24">296 <path d="M7 4h10v16l-5-3-5 toppingz" />297 </svg>298 </div>299 <div class="label">Bookmarks</div>300 </div>301 302 <div class="nav-item italic no-border">303 <div class="ico">304 <!-- Empty placeholder icon -->305 <svg viewBox="0 0 24 24">306 <circle cx="12" cy="12" r="9" stroke-dasharray="2 4"></circle>307 </svg>308 </div>309 <div class="label">Remove Ads</div>310 </div>311 </div>312 313 <!-- Bottom actions -->314 <div class="drawer-footer">315 <div class="footer-item">316 <div class="round">317 <!-- Gear -->318 <svg viewBox="0 0 24 24" style="stroke:#fff;">319 <circle cx="12" cy="12" r="3"></circle>320 <path d="M4 12h3M17 12h3M12 4v3M12 17v3M6.3 6.3l2.1 2.1M15.6 15.6l2.1 2.1M6.3 17.7l2.1-2.1M15.6 8.4l2.1-2.1"></path>321 </svg>322 </div>323 <span>Options</span>324 </div>325 <div class="footer-item">326 <div class="round">327 <!-- Info -->328 <svg viewBox="0 0 24 24" style="stroke:#fff;">329 <circle cx="12" cy="12" r="9"></circle>330 <path d="M12 10v6M12 7h.1"></path>331 </svg>332 </div>333 <span>About</span>334 </div>335 <div class="footer-item">336 <div class="round">337 <!-- Sun -->338 <svg viewBox="0 0 24 24" style="stroke:#fff;">339 <circle cx="12" cy="12" r="4"></circle>340 <path d="M12 2v3M12 19v3M4 12H2m20 0h-3M5 5l2 2m10-2l-2 2m2 10l-2-2M7 17l-2 2"></path>341 </svg>342 </div>343 <span>Day Theme</span>344 </div>345 <div class="footer-item">346 <div class="round">347 <!-- Power -->348 <svg viewBox="0 0 24 24" style="stroke:#fff;">349 <path d="M12 3v8"></path>350 <path d="M6.3 6.3a8 8 0 1 0 11.4 0"></path>351 </svg>352 </div>353 <span>Exit</span>354 </div>355 </div>356 </div>357 358 <!-- Right side sliver (underlying app) -->359 <div class="right-sliver">360 <div class="top-controls">361 <!-- Filter icon -->362 <span class="icon">363 <svg viewBox="0 0 24 24">364 <path d="M3 5h18l-7 7v6l-4-2v-4z" stroke="#cfcfcf" fill="none" stroke-width="2.5"></path>365 </svg>366 </span>367 <!-- Kebab menu -->368 <span class="icon">369 <svg viewBox="0 0 24 24">370 <circle cx="12" cy="5" r="2" fill="#cfcfcf" stroke="none"></circle>371 <circle cx="12" cy="12" r="2" fill="#cfcfcf" stroke="none"></circle>372 <circle cx="12" cy="19" r="2" fill="#cfcfcf" stroke="none"></circle>373 </svg>374 </span>375 </div>376 <div class="right-floating">377 <svg viewBox="0 0 24 24" style="stroke:#cfcfcf; fill:none; stroke-width:2.5;">378 <path d="M6 4h12v16l-6-3-6 3z"></path>379 </svg>380 </div>381 </div>382 383 <!-- Gesture bar -->384 <div class="gesture"></div>385</div>386</body>387</html>