GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, height=2400, initial-scale=1.0">6<title>Categories - UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #222;17 }18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #E9E9EB;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 40px;30 box-sizing: border-box;31 }32 .status-left { font-size: 42px; font-weight: 600; color: #111; }33 .status-right { display: flex; gap: 26px; align-items: center; }34 .status-icon svg { width: 40px; height: 40px; fill: #555; }35 /* Title bar */36 .title-bar {37 position: absolute;38 top: 120px;39 left: 0;40 width: 1080px;41 height: 140px;42 background: #fff;43 border-bottom: 1px solid #eee;44 display: flex;45 align-items: center;46 padding-left: 48px;47 box-sizing: border-box;48 }49 .title-bar h1 {50 margin: 0;51 font-size: 64px;52 font-weight: 600;53 }54 /* Layout: sidebar + content */55 .main {56 position: absolute;57 left: 0;58 top: 260px;59 width: 1080px;60 bottom: 180px; /* leave space for bottom nav */61 }62 .sidebar {63 position: absolute;64 left: 0;65 top: 0;66 width: 270px;67 bottom: 0;68 border-right: 1px solid #E5E5E5;69 background: #FAFAFA;70 overflow: hidden;71 }72 .side-item {73 height: 160px;74 padding: 20px 20px 20px 24px;75 display: flex;76 align-items: center;77 gap: 22px;78 font-size: 32px;79 color: #555;80 border-bottom: 1px solid #EFEFEF;81 box-sizing: border-box;82 }83 .side-item svg { width: 48px; height: 48px; stroke: #666; fill: none; stroke-width: 2.5; }84 .side-item.active {85 background: #fff;86 color: #5E43F3;87 position: relative;88 }89 .side-item.active::before {90 content: "";91 position: absolute;92 left: 0;93 top: 0;94 width: 10px;95 height: 100%;96 background: #5E43F3;97 border-radius: 0 8px 8px 0;98 }99 .side-item .badge {100 margin-left: auto;101 color: #5E43F3;102 font-size: 30px;103 }104 /* Content area */105 .content {106 position: absolute;107 left: 270px;108 right: 0;109 top: 0;110 bottom: 0;111 overflow: auto;112 background: #fff;113 padding: 24px 36px 36px 36px;114 box-sizing: border-box;115 }116 .section-label {117 font-size: 30px;118 color: #9E9E9E;119 letter-spacing: 2px;120 font-weight: 600;121 border-bottom: 1px solid #EAEAEA;122 padding-bottom: 10px;123 margin-top: 4px;124 }125 .content h2 {126 font-size: 48px;127 margin: 24px 0 18px 0;128 font-weight: 700;129 }130 .grid {131 display: grid;132 grid-template-columns: repeat(3, 1fr);133 column-gap: 30px;134 row-gap: 36px;135 }136 .item {137 text-align: center;138 font-size: 32px;139 color: #333;140 }141 .img {142 width: 230px;143 height: 180px;144 margin: 0 auto 14px auto;145 background: #E0E0E0;146 border: 1px solid #BDBDBD;147 display: flex;148 align-items: center;149 justify-content: center;150 color: #757575;151 border-radius: 10px;152 box-sizing: border-box;153 font-size: 28px;154 }155 .divider-label {156 margin-top: 40px;157 font-size: 28px;158 color: #9E9E9E;159 letter-spacing: 2px;160 border-bottom: 1px solid #EAEAEA;161 padding-bottom: 10px;162 font-weight: 700;163 text-transform: uppercase;164 }165 .subsection h3 {166 font-size: 44px;167 margin: 24px 0 16px 0;168 font-weight: 700;169 }170 .carousel {171 display: flex;172 gap: 28px;173 overflow: hidden;174 }175 .carousel .img {176 width: 210px;177 height: 260px;178 }179 .carousel .label {180 text-align: center;181 font-size: 28px;182 margin-top: 8px;183 color: #444;184 }185 /* Bottom navigation */186 .bottom-nav {187 position: absolute;188 left: 0;189 bottom: 0;190 width: 1080px;191 height: 180px;192 background: #fff;193 border-top: 1px solid #E3E3E3;194 display: flex;195 align-items: center;196 justify-content: space-around;197 box-sizing: border-box;198 }199 .nav-item {200 width: 200px;201 height: 140px;202 display: flex;203 flex-direction: column;204 align-items: center;205 justify-content: center;206 color: #666;207 font-size: 30px;208 position: relative;209 }210 .nav-item svg { width: 56px; height: 56px; stroke: #666; fill: none; stroke-width: 2.5; }211 .nav-item.active { color: #5E43F3; }212 .nav-item.active svg { stroke: #5E43F3; }213 .active-indicator {214 position: absolute;215 top: -8px;216 width: 160px;217 height: 8px;218 background: #5E43F3;219 border-radius: 4px;220 }221 .active-dot {222 position: absolute;223 top: -20px;224 width: 16px;225 height: 16px;226 background: #E1636A;227 border-radius: 50%;228 }229</style>230</head>231<body>232<div id="render-target">233 234 <!-- Status bar -->235 <div class="status-bar">236 <div class="status-left">11:15</div>237 <div class="status-right">238 <div class="status-icon">239 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 .6-5 4.5 1.5 7L12 17l-6.5 3.1L7 13.1 2 8.6 9 8z"/></svg>240 </div>241 <div class="status-icon">242 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>243 </div>244 <div class="status-icon">245 <svg viewBox="0 0 24 24"><path d="M3 12h18M12 3v18"/></svg>246 </div>247 <div class="status-icon">248 <svg viewBox="0 0 24 24"><path d="M2 7h20M2 12h14M2 17h8"/></svg>249 </div>250 <div class="status-icon">251 <svg viewBox="0 0 24 24"><path d="M3 6l18 6-18 6 6-6z"/></svg>252 </div>253 </div>254 </div>255 256 <!-- Title -->257 <div class="title-bar">258 <h1>Categories</h1>259 </div>260 261 <div class="main">262 <!-- Sidebar -->263 <div class="sidebar">264 <div class="side-item active">265 <svg viewBox="0 0 24 24">266 <path d="M12 2l2.2 5.2L20 8l-4.3 3.6L16.5 18 12 15.2 7.5 18l.8-6.4L4 8l5.8-.8z"/>267 </svg>268 <div>Best Selling</div>269 <div class="badge">★</div>270 </div>271 <div class="side-item">272 <svg viewBox="0 0 24 24"><path d="M12 4l4 7H8l4-7zM6 20h12"/></svg>273 <div>Women's Ethnic Wear</div>274 </div>275 <div class="side-item">276 <svg viewBox="0 0 24 24"><rect x="8" y="3" width="8" height="12"/><path d="M10 16v5M14 16v5"/></svg>277 <div>Beauty, Wellness & ...</div>278 </div>279 <div class="side-item">280 <svg viewBox="0 0 24 24"><path d="M7 4l5 3 5-3v8a5 5 0 01-10 0V4z"/></svg>281 <div>Women's Western Wear</div>282 </div>283 <div class="side-item">284 <svg viewBox="0 0 24 24"><rect x="4" y="8" width="16" height="10"/><path d="M6 8V5h12v3"/></svg>285 <div>Home</div>286 </div>287 <div class="side-item">288 <svg viewBox="0 0 24 24"><path d="M6 7h12l-2 10H8L6 7z"/><path d="M7 7l1-3h8l1 3"/></svg>289 <div>Men's Fashion</div>290 </div>291 <div class="side-item">292 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="12"/><path d="M3 17l4 2h10l4-2"/></svg>293 <div>Electronics</div>294 </div>295 <div class="side-item">296 <svg viewBox="0 0 24 24"><path d="M9 3l6 2-2 14-8-2z"/></svg>297 <div>Women's Footwear</div>298 </div>299 <div class="side-item">300 <svg viewBox="0 0 24 24"><path d="M5 18l5-8 4 4 5-7"/><circle cx="6" cy="19" r="2"/></svg>301 <div>Toys & Stationery</div>302 </div>303 <div class="side-item">304 <svg viewBox="0 0 24 24"><path d="M3 15c5 0 6-5 13-5l5 5-4 5H7z"/></svg>305 <div>Men's Footwear</div>306 </div>307 </div>308 309 <!-- Content -->310 <div class="content">311 <div class="section-label">BEST SELLING</div>312 <h2>Best Selling</h2>313 314 <div class="grid">315 <div class="item">316 <div class="img">[IMG: Saree Product]</div>317 <div>Sarees</div>318 </div>319 <div class="item">320 <div class="img">[IMG: Headphones]</div>321 <div>Headphones</div>322 </div>323 <div class="item">324 <div class="img">[IMG: Sports Shoes]</div>325 <div>Footwear</div>326 </div>327 328 <div class="item">329 <div class="img">[IMG: Bedding Set]</div>330 <div>Home Furnishing</div>331 </div>332 <div class="item">333 <div class="img">[IMG: Kurti Set]</div>334 <div>Kurtis & Sets</div>335 </div>336 <div class="item">337 <div class="img">[IMG: Kitchen Tool]</div>338 <div>Kitchen & Household</div>339 </div>340 341 <div class="item">342 <div class="img">[IMG: T-Shirt]</div>343 <div>T-Shirts & Shirts</div>344 </div>345 <div class="item">346 <div class="img">[IMG: Jewellery Set]</div>347 <div>Fashion Jewellery</div>348 </div>349 <div class="item">350 <div class="img">[IMG: Gaming Earbuds]</div>351 <div>True Wireless</div>352 </div>353 354 <div class="item">355 <div class="img">[IMG: Wrist Watch]</div>356 <div>Wrist Watches</div>357 </div>358 <div class="item">359 <div class="img">[IMG: Wall Sticker]</div>360 <div>Stickers & Wallpapers</div>361 </div>362 <div class="item">363 <div class="img">[IMG: Top/Dress]</div>364 <div>Tops & Dresses</div>365 </div>366 367 <div class="item">368 <div class="img">[IMG: Lipstick]</div>369 <div>Beauty & Grooming</div>370 </div>371 <div class="item">372 <div class="img">[IMG: Winter Wear]</div>373 <div>Winter Store</div>374 </div>375 </div>376 377 <div class="divider-label">WOMEN'S ETHNIC WEAR</div>378 379 <div class="subsection">380 <h3>Sarees</h3>381 <div class="carousel">382 <div>383 <div class="img">[IMG: Embroidered Saree]</div>384 <div class="label">Embroidered</div>385 </div>386 <div>387 <div class="img">[IMG: Silk Saree]</div>388 <div class="label">Silk</div>389 </div>390 <div>391 <div class="img">[IMG: Printed Saree]</div>392 <div class="label">Printed</div>393 </div>394 <div>395 <div class="img">[IMG: Georgette Saree]</div>396 <div class="label">Georgette</div>397 </div>398 </div>399 </div>400 </div>401 </div>402 403 <!-- Bottom navigation -->404 <div class="bottom-nav">405 <div class="nav-item">406 <svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9H3z"/><path d="M9 20v-6h6v6"/></svg>407 <div>Home</div>408 </div>409 <div class="nav-item">410 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/></svg>411 <div>Search</div>412 </div>413 <div class="nav-item active">414 <div class="active-indicator"></div>415 <div class="active-dot"></div>416 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>417 <div>Categories</div>418 </div>419 <div class="nav-item">420 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>421 <div>Account</div>422 </div>423 <div class="nav-item">424 <svg viewBox="0 0 24 24"><path d="M3 5h3l2 12h10l2-9H8"/><circle cx="9" cy="20" r="2"/><circle cx="17" cy="20" r="2"/></svg>425 <div>Cart</div>426 </div>427 </div>428 429</div>430</body>431</html>