GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Side Drawer - Shop by Category</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #2f334a; /* overall dark backdrop similar to screenshot */18 }19 20 /* Dimmed main app content on the right side */21 .app-dimmed {22 position: absolute;23 right: 0;24 top: 0;25 width: 380px;26 height: 2400px;27 background: rgba(240,240,240,0.85);28 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);29 }30 .app-header {31 position: absolute;32 top: 90px;33 right: 40px;34 width: 300px;35 height: 160px;36 background: #E0E0E0;37 border: 1px solid #BDBDBD;38 border-radius: 16px;39 display: flex;40 align-items: center;41 justify-content: center;42 color: #757575;43 font-size: 28px;44 }45 .app-banner {46 position: absolute;47 top: 300px;48 right: 40px;49 width: 300px;50 height: 520px;51 background: #E0E0E0;52 border: 1px solid #BDBDBD;53 border-radius: 16px;54 display: flex;55 align-items: center;56 justify-content: center;57 color: #757575;58 font-size: 26px;59 }60 61 /* Side drawer */62 .drawer {63 position: absolute;64 left: 0;65 top: 0;66 width: 700px;67 height: 2400px;68 background: #2f334a;69 }70 .drawer-header {71 padding-top: 120px;72 padding-left: 80px;73 padding-right: 80px;74 color: #ffffff;75 }76 .drawer-header h1 {77 margin: 0 0 40px 0;78 font-size: 72px;79 font-weight: 700;80 letter-spacing: 1px;81 }82 .signin-btn {83 width: 560px;84 height: 115px;85 background: #9fa3b0;86 border-radius: 60px;87 display: flex;88 align-items: center;89 justify-content: center;90 font-size: 44px;91 color: #ffffff;92 font-weight: 600;93 }94 95 .drawer-content {96 position: absolute;97 left: 0;98 top: 430px;99 width: 700px;100 height: 1970px;101 background: #ffffff;102 border-top-left-radius: 0;103 border-top-right-radius: 0;104 box-shadow: -6px 0 12px rgba(0,0,0,0.1);105 }106 .section-title {107 font-size: 40px;108 color: #6b6b6b;109 padding: 40px 40px 30px 40px;110 font-weight: 600;111 }112 .category-list {113 list-style: none;114 margin: 0;115 padding: 0 0 40px 0;116 }117 .category-item {118 position: relative;119 padding: 42px 100px 42px 40px;120 font-size: 40px;121 color: #222;122 border-bottom: 1px solid #e9e9e9;123 }124 .category-item:last-child {125 border-bottom: none;126 }127 .plus-icon {128 position: absolute;129 right: 32px;130 top: 50%;131 transform: translateY(-50%);132 width: 48px;133 height: 48px;134 }135 .plus-icon svg {136 width: 48px;137 height: 48px;138 fill: none;139 stroke: #6b6b6b;140 stroke-width: 6;141 stroke-linecap: round;142 }143</style>144</head>145<body>146<div id="render-target">147 148 <!-- Right side dimmed app preview -->149 <div class="app-dimmed">150 <div class="app-header">[IMG: App header / search]</div>151 <div class="app-banner">[IMG: Main app content preview]</div>152 </div>153 154 <!-- Left Side Drawer -->155 <div class="drawer">156 <div class="drawer-header">157 <h1>Welcome</h1>158 <div class="signin-btn">Sign in / Sign up</div>159 </div>160 161 <div class="drawer-content">162 <div class="section-title">Shop by Category</div>163 <ul class="category-list">164 <li class="category-item">165 Power Tools166 <div class="plus-icon">167 <svg viewBox="0 0 48 48">168 <path d="M24 10 L24 38"></path>169 <path d="M10 24 L38 24"></path>170 </svg>171 </div>172 </li>173 <li class="category-item">174 Hand Tools175 <div class="plus-icon">176 <svg viewBox="0 0 48 48">177 <path d="M24 10 L24 38"></path>178 <path d="M10 24 L38 24"></path>179 </svg>180 </div>181 </li>182 <li class="category-item">183 General Safety184 <div class="plus-icon">185 <svg viewBox="0 0 48 48">186 <path d="M24 10 L24 38"></path>187 <path d="M10 24 L38 24"></path>188 </svg>189 </div>190 </li>191 <li class="category-item">192 Organization & Storage193 <div class="plus-icon">194 <svg viewBox="0 0 48 48">195 <path d="M24 10 L24 38"></path>196 <path d="M10 24 L38 24"></path>197 </svg>198 </div>199 </li>200 <li class="category-item">201 Lighting and Electrical202 <div class="plus-icon">203 <svg viewBox="0 0 48 48">204 <path d="M24 10 L24 38"></path>205 <path d="M10 24 L38 24"></path>206 </svg>207 </div>208 </li>209 <li class="category-item">210 Gardening and Tools211 <div class="plus-icon">212 <svg viewBox="0 0 48 48">213 <path d="M24 10 L24 38"></path>214 <path d="M10 24 L38 24"></path>215 </svg>216 </div>217 </li>218 <li class="category-item">219 Paint & Supplies220 <div class="plus-icon">221 <svg viewBox="0 0 48 48">222 <path d="M24 10 L24 38"></path>223 <path d="M10 24 L38 24"></path>224 </svg>225 </div>226 </li>227 <li class="category-item">228 Automotive229 <div class="plus-icon">230 <svg viewBox="0 0 48 48">231 <path d="M24 10 L24 38"></path>232 <path d="M10 24 L38 24"></path>233 </svg>234 </div>235 </li>236 <li class="category-item">237 Sanitary & Plumbing238 <div class="plus-icon">239 <svg viewBox="0 0 48 48">240 <path d="M24 10 L24 38"></path>241 <path d="M10 24 L38 24"></path>242 </svg>243 </div>244 </li>245 <li class="category-item">246 Door Handles, Accessories and Hardware247 <div class="plus-icon">248 <svg viewBox="0 0 48 48">249 <path d="M24 10 L24 38"></path>250 <path d="M10 24 L38 24"></path>251 </svg>252 </div>253 </li>254 <li class="category-item">255 Houseware256 <div class="plus-icon">257 <svg viewBox="0 0 48 48">258 <path d="M24 10 L24 38"></path>259 <path d="M10 24 L38 24"></path>260 </svg>261 </div>262 </li>263 <li class="category-item">264 Garden center265 <div class="plus-icon">266 <svg viewBox="0 0 48 48">267 <path d="M24 10 L24 38"></path>268 <path d="M10 24 L38 24"></path>269 </svg>270 </div>271 </li>272 <li class="category-item">273 Kitchenware274 <div class="plus-icon">275 <svg viewBox="0 0 48 48">276 <path d="M24 10 L24 38"></path>277 <path d="M10 24 L38 24"></path>278 </svg>279 </div>280 </li>281 <li class="category-item">282 Cleaning Supplies & Equipment283 <div class="plus-icon">284 <svg viewBox="0 0 48 48">285 <path d="M24 10 L24 38"></path>286 <path d="M10 24 L38 24"></path>287 </svg>288 </div>289 </li>290 </ul>291 </div>292 </div>293 294</div>295</body>296</html>