GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Sidebar Drawer UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #141414;14 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 18px;22 left: 24px;23 right: 24px;24 height: 60px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #fff;29 font-size: 34px;30 letter-spacing: 0.5px;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .status-icon svg { display: block; }38 39 /* Right apps column (background app visible behind drawer) */40 .apps-column {41 position: absolute;42 top: 260px;43 right: 0;44 width: 380px;45 height: 2140px;46 background: #000;47 padding: 28px 24px;48 box-sizing: border-box;49 }50 .apps-title {51 font-size: 64px;52 font-weight: 700;53 letter-spacing: 2px;54 margin: 8px 0 24px;55 text-transform: lowercase;56 }57 .app-card {58 margin-bottom: 52px;59 }60 .app-label {61 display: inline-block;62 background: #0b0b0b;63 color: #fff;64 padding: 10px 16px;65 border-radius: 16px;66 font-size: 30px;67 margin-bottom: 12px;68 }69 .img-ph {70 width: 300px;71 height: 300px;72 background: #E0E0E0;73 border: 1px solid #BDBDBD;74 border-radius: 26px;75 display: flex;76 justify-content: center;77 align-items: center;78 color: #757575;79 font-size: 28px;80 text-align: center;81 }82 83 /* Left drawer overlay */84 .drawer {85 position: absolute;86 top: 0;87 left: 0;88 width: 720px;89 height: 2400px;90 background: #212121;91 box-shadow: 6px 0 20px rgba(0,0,0,0.5);92 z-index: 5;93 }94 95 /* Ad banner */96 .ad-banner {97 position: absolute;98 top: 140px;99 left: 40px;100 width: 640px;101 height: 130px;102 background: #f0e24f;103 border-radius: 8px;104 display: flex;105 align-items: center;106 padding: 0 18px;107 box-sizing: border-box;108 color: #111;109 font-weight: 600;110 }111 .ad-left {112 display: flex;113 align-items: center;114 gap: 14px;115 flex: 1;116 }117 .ad-badge {118 width: 42px; height: 42px;119 border-radius: 21px;120 background: #1db954; /* Spotify green badge */121 display: flex; align-items: center; justify-content: center;122 color: #fff; font-weight: 700;123 font-size: 20px;124 }125 .ad-text {126 font-size: 28px;127 line-height: 1.2;128 }129 .ad-right {130 display: flex; align-items: center; gap: 16px;131 }132 .ad-cta {133 background: #2f5bd7;134 color: #fff;135 padding: 12px 20px;136 border-radius: 22px;137 font-size: 24px;138 white-space: nowrap;139 }140 .ad-close {141 width: 28px; height: 28px;142 background: #cfe0ff;143 color: #0f3aaa;144 border-radius: 4px;145 display: flex; align-items: center; justify-content: center;146 font-weight: 700;147 }148 149 /* Wave visual + mic */150 .wave-wrap {151 position: absolute;152 top: 420px;153 left: 60px;154 width: 600px;155 height: 140px;156 display: flex;157 align-items: center;158 justify-content: center;159 gap: 8px;160 }161 .bar {162 width: 8px;163 background: #3a3a3a;164 border-radius: 4px;165 opacity: 0.9;166 }167 .bar:nth-child(odd) { background: #4a4a4a; }168 .mic-icon {169 position: absolute;170 top: 520px;171 left: 330px;172 width: 90px;173 height: 90px;174 }175 176 /* Menu list */177 .menu {178 position: absolute;179 top: 720px;180 left: 60px;181 width: 600px;182 }183 .menu-item {184 display: flex;185 align-items: center;186 gap: 26px;187 padding: 28px 0;188 border-bottom: 1px solid rgba(255,255,255,0.04);189 }190 .menu-item:last-child { border-bottom: none; }191 .icon-plate {192 width: 48px; height: 48px;193 display: flex; align-items: center; justify-content: center;194 color: #d9d9d9;195 }196 .menu-text {197 font-size: 44px;198 color: #eaeaea;199 }200 201 /* Home pill */202 .home-pill {203 position: absolute;204 bottom: 42px;205 left: 50%;206 transform: translateX(-50%);207 width: 360px;208 height: 12px;209 background: #ffffff;210 opacity: 0.7;211 border-radius: 6px;212 }213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Status bar -->219 <div class="status-bar">220 <div>1:28</div>221 <div style="opacity:0.8; font-size:28px;">M DH</div>222 <div class="status-right">223 <div class="status-icon">224 <!-- WiFi icon -->225 <svg width="40" height="28" viewBox="0 0 40 28" fill="none">226 <path d="M4 10c8-8 24-8 32 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>227 <path d="M9 15c6-6 16-6 22 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>228 <path d="M15 20c3-3 8-3 11 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>229 <circle cx="20.5" cy="24" r="2.5" fill="#fff"/>230 </svg>231 </div>232 <div class="status-icon">233 <!-- Battery icon -->234 <svg width="46" height="26" viewBox="0 0 46 26" fill="none">235 <rect x="1.5" y="3" width="36" height="20" rx="4" stroke="#fff" stroke-width="3"/>236 <rect x="5" y="6" width="28" height="14" rx="2" fill="#fff"/>237 <rect x="39" y="8" width="6" height="10" rx="2" fill="#fff"/>238 </svg>239 </div>240 </div>241 </div>242 243 <!-- Right column: apps behind drawer -->244 <div class="apps-column">245 <div class="apps-title">plus apps</div>246 247 <div class="app-card">248 <div class="app-label">audio editor</div>249 <div class="img-ph">[IMG: Audio editor app tile]</div>250 </div>251 252 <div class="app-card">253 <div class="app-label">calculator</div>254 <div class="img-ph">[IMG: Calculator app tile]</div>255 </div>256 257 <div class="app-card">258 <div class="app-label">magnifier</div>259 <div class="img-ph">[IMG: Magnifier app tile]</div>260 </div>261 262 <div class="app-card">263 <div class="app-label">mirror</div>264 <div class="img-ph">[IMG: Mirror app tile]</div>265 </div>266 267 <div class="app-card">268 <div class="app-label">PDF scanner</div>269 <div class="img-ph">[IMG: PDF scanner app tile]</div>270 </div>271 272 <div class="app-card">273 <div class="app-label">flashlight</div>274 <div class="img-ph">[IMG: Flashlight app tile]</div>275 </div>276 </div>277 278 <!-- Drawer overlay -->279 <div class="drawer">280 <!-- Ad banner -->281 <div class="ad-banner">282 <div class="ad-left">283 <div class="ad-badge">S</div>284 <div class="ad-text">Unlock your growth with ‘The Ranveer Show’.</div>285 </div>286 <div class="ad-right">287 <div class="ad-cta">Click to listen</div>288 <div class="ad-close">×</div>289 </div>290 </div>291 292 <!-- Decorative waveform -->293 <div class="wave-wrap">294 <!-- Create a symmetrical set of bars -->295 <!-- Left side -->296 <div class="bar" style="height:18px;"></div>297 <div class="bar" style="height:28px;"></div>298 <div class="bar" style="height:40px;"></div>299 <div class="bar" style="height:56px;"></div>300 <div class="bar" style="height:72px;"></div>301 <div class="bar" style="height:96px;"></div>302 <div class="bar" style="height:120px;"></div>303 <div class="bar" style="height:96px;"></div>304 <div class="bar" style="height:72px;"></div>305 <div class="bar" style="height:56px;"></div>306 <div class="bar" style="height:40px;"></div>307 <div class="bar" style="height:28px;"></div>308 <div class="bar" style="height:18px;"></div>309 </div>310 311 <!-- Mic icon -->312 <svg class="mic-icon" viewBox="0 0 100 100">313 <!-- Mic capsule -->314 <rect x="34" y="18" width="32" height="40" rx="16" fill="#ff7a3c"/>315 <!-- Neck -->316 <rect x="47" y="58" width="6" height="16" rx="3" fill="#ff7a3c"/>317 <!-- Base -->318 <path d="M30 70c0 12 10 22 20 22s20-10 20-22" stroke="#ff7a3c" stroke-width="8" fill="none" stroke-linecap="round"/>319 <rect x="38" y="86" width="24" height="6" rx="3" fill="#ff7a3c"/>320 </svg>321 322 <!-- Menu items -->323 <div class="menu">324 <div class="menu-item">325 <div class="icon-plate">326 <!-- Gear -->327 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">328 <circle cx="22" cy="22" r="6" stroke="#d9d9d9" stroke-width="3"/>329 <path d="M22 4v6M22 34v6M4 22h6M34 22h6M10 10l4 4M30 30l4 4M34 10l-4 4M10 34l4-4" stroke="#d9d9d9" stroke-width="3" stroke-linecap="round"/>330 </svg>331 </div>332 <div class="menu-text">Settings</div>333 </div>334 335 <div class="menu-item">336 <div class="icon-plate">337 <!-- Palette -->338 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">339 <path d="M22 6c-9 0-16 7-16 16s4 10 10 10h9c4 0 6 3 5 6" stroke="#d9d9d9" stroke-width="3" fill="none"/>340 <circle cx="14" cy="20" r="2.5" fill="#d9d9d9"/>341 <circle cx="20" cy="15" r="2.5" fill="#d9d9d9"/>342 <circle cx="26" cy="20" r="2.5" fill="#d9d9d9"/>343 </svg>344 </div>345 <div class="menu-text">Themes</div>346 </div>347 348 <div class="menu-item">349 <div class="icon-plate">350 <!-- AD badge -->351 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">352 <rect x="6" y="6" width="32" height="32" rx="6" stroke="#d9d9d9" stroke-width="3"/>353 <text x="22" y="28" font-size="16" text-anchor="middle" fill="#d9d9d9" font-family="Segoe UI, Arial">AD</text>354 </svg>355 </div>356 <div class="menu-text">Remove ads</div>357 </div>358 359 <div class="menu-item">360 <div class="icon-plate">361 <!-- Share arrow -->362 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">363 <path d="M28 8l8 8-8 8" stroke="#d9d9d9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>364 <path d="M28 16H10c-3 0-4 2-4 5" stroke="#d9d9d9" stroke-width="3" stroke-linecap="round"/>365 </svg>366 </div>367 <div class="menu-text">Share app</div>368 </div>369 370 <div class="menu-item">371 <div class="icon-plate">372 <!-- Chat bubble -->373 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">374 <path d="M8 10h28v16H20l-8 8v-8H8V10z" stroke="#d9d9d9" stroke-width="3" fill="none" stroke-linejoin="round"/>375 <circle cx="16" cy="18" r="2" fill="#d9d9d9"/>376 <circle cx="22" cy="18" r="2" fill="#d9d9d9"/>377 <circle cx="28" cy="18" r="2" fill="#d9d9d9"/>378 </svg>379 </div>380 <div class="menu-text">Help and feedback</div>381 </div>382 383 <div class="menu-item">384 <div class="icon-plate">385 <!-- Info -->386 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">387 <circle cx="22" cy="22" r="16" stroke="#d9d9d9" stroke-width="3"/>388 <circle cx="22" cy="16" r="2.5" fill="#d9d9d9"/>389 <rect x="21" y="20" width="2.5" height="10" fill="#d9d9d9"/>390 </svg>391 </div>392 <div class="menu-text">About</div>393 </div>394 </div>395 </div>396 397 <!-- Home pill -->398 <div class="home-pill"></div>399</div>400</body>401</html>