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>Categories Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Top status bar */16 .status-bar {17 height: 110px; background: #E6E6E6; color: #2e2e2e;18 display: flex; align-items: center; justify-content: space-between;19 padding: 0 40px; font-size: 34px;20 }21 .status-center { display: flex; align-items: center; gap: 26px; color: #4a4a4a; }22 .dot { width: 12px; height: 12px; background: #4a4a4a; border-radius: 50%; display: inline-block; }23 24 /* Page title */25 .page-title {26 font-size: 64px; font-weight: 600; color: #111;27 padding: 40px; padding-top: 44px;28 border-bottom: 1px solid #EFEFEF;29 }30 31 /* Main area: left menu + content */32 .main {33 display: flex;34 height: 1900px;35 }36 .left-menu {37 width: 280px; background: #F5F5F5; border-right: 1px solid #E0E0E0;38 }39 .menu-item {40 height: 170px; padding: 24px 18px;41 display: flex; align-items: center; gap: 18px;42 border-bottom: 1px solid #E8E8E8; color: #555;43 }44 .menu-item .label {45 font-size: 28px; line-height: 1.2;46 }47 .menu-icon {48 width: 64px; height: 64px; border: 2px solid #CFCFCF; border-radius: 14px;49 display: flex; align-items: center; justify-content: center; background: #fff;50 }51 .menu-item.active {52 background: #ffffff;53 border-left: 6px solid #6C63FF;54 color: #6C63FF;55 }56 57 /* Content area */58 .content {59 width: 800px; padding: 34px 40px;60 }61 .section-tag {62 font-size: 26px; letter-spacing: 1px; color: #9aa0a6; text-transform: uppercase;63 display: flex; align-items: center; gap: 16px; margin-bottom: 18px;64 }65 .section-tag .line { flex: 1; height: 2px; background: #E9E9EB; }66 .section-title {67 font-size: 46px; font-weight: 700; color: #111; margin: 26px 0 22px;68 }69 .grid { display: flex; flex-wrap: wrap; }70 .grid-item { width: 33.333%; padding-right: 24px; margin-bottom: 36px; }71 .img-ph {72 width: 210px; height: 210px; background: #E0E0E0;73 border: 1px solid #BDBDBD; border-radius: 12px;74 display: flex; align-items: center; justify-content: center;75 color: #757575; font-size: 26px; text-align: center; margin-bottom: 16px;76 }77 .caption { font-size: 30px; color: #333; }78 79 .divider { height: 1px; background: #EFEFEF; margin: 24px 0; }80 81 /* Bottom tab bar */82 .tabbar {83 position: absolute; left: 0; bottom: 110px;84 width: 1080px; height: 180px;85 background: #FFFFFF; border-top: 1px solid #E6E6E6;86 display: flex; align-items: center; justify-content: space-around;87 }88 .tab {89 width: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;90 color: #777; font-size: 28px;91 }92 .tab .icon {93 width: 60px; height: 60px;94 }95 .tab.active { color: #6C63FF; }96 .active-dot {97 position: absolute; top: -18px; width: 22px; height: 22px; background: #FF3050; border-radius: 50%;98 }99 100 /* Home indicator (bottom pill) */101 .home-indicator {102 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);103 width: 300px; height: 16px; background: #000; border-radius: 10px; opacity: 0.85;104 }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Status bar -->111 <div class="status-bar">112 <div>11:16</div>113 <div class="status-center">114 <span>🔔</span><span>🔔</span><span>🔔</span><span>🔔</span>115 <span class="dot"></span>116 </div>117 <div style="display:flex;align-items:center;gap:22px;">118 <!-- Simple status icons -->119 <svg class="icon" width="40" height="40" viewBox="0 0 24 24"><path d="M3 17h18v2H3zM7 5h10l2 10H5z" fill="#666"/></svg>120 <svg class="icon" width="40" height="40" viewBox="0 0 24 24"><path d="M2 10h4v4H2zM8 7h4v7H8zM14 4h4v10h-4z" fill="#666"/></svg>121 <svg class="icon" width="40" height="40" viewBox="0 0 24 24"><rect x="5" y="6" width="14" height="12" rx="2" fill="#666"/><rect x="19" y="9" width="2" height="6" rx="1" fill="#666"/></svg>122 </div>123 </div>124 125 <!-- Title -->126 <div class="page-title">Categories</div>127 128 <!-- Main content -->129 <div class="main">130 <!-- Left navigation -->131 <div class="left-menu">132 <div class="menu-item">133 <div class="menu-icon">134 <svg width="40" height="40" viewBox="0 0 24 24">135 <circle cx="12" cy="7" r="3" fill="#999"/>136 <path d="M6 21h12l-3-7H9z" fill="none" stroke="#999" stroke-width="2"/>137 </svg>138 </div>139 <div class="label">Women's<br>Ethnic Wear</div>140 </div>141 <div class="menu-item">142 <div class="menu-icon">143 <svg width="40" height="40" viewBox="0 0 24 24">144 <rect x="8" y="3" width="4" height="10" fill="#999"/>145 <rect x="7" y="13" width="6" height="8" rx="2" fill="none" stroke="#999" stroke-width="2"/>146 </svg>147 </div>148 <div class="label">Beauty,<br>Wellness & ...</div>149 </div>150 <div class="menu-item">151 <div class="menu-icon">152 <svg width="40" height="40" viewBox="0 0 24 24">153 <path d="M8 6h8l2 5H6z" fill="none" stroke="#999" stroke-width="2"/>154 <path d="M7 11h10l-3 6H10z" fill="none" stroke="#999" stroke-width="2"/>155 </svg>156 </div>157 <div class="label">Women's<br>Western Wear</div>158 </div>159 <div class="menu-item">160 <div class="menu-icon">161 <svg width="40" height="40" viewBox="0 0 24 24">162 <path d="M4 12l8-7 8 7v8H4z" fill="none" stroke="#999" stroke-width="2"/>163 <rect x="10" y="14" width="4" height="6" fill="#999"/>164 </svg>165 </div>166 <div class="label">Home</div>167 </div>168 <div class="menu-item">169 <div class="menu-icon">170 <svg width="40" height="40" viewBox="0 0 24 24">171 <path d="M6 7h12v5H6z" fill="none" stroke="#999" stroke-width="2"/>172 <path d="M6 12l3 8h6l3-8" fill="none" stroke="#999" stroke-width="2"/>173 </svg>174 </div>175 <div class="label">Men's<br>Fashion</div>176 </div>177 <div class="menu-item">178 <div class="menu-icon">179 <svg width="40" height="40" viewBox="0 0 24 24">180 <rect x="4" y="6" width="16" height="10" rx="2" fill="none" stroke="#999" stroke-width="2"/>181 <rect x="9" y="17" width="6" height="2" fill="#999"/>182 </svg>183 </div>184 <div class="label">Electronics</div>185 </div>186 <div class="menu-item">187 <div class="menu-icon">188 <svg width="40" height="40" viewBox="0 0 24 24">189 <path d="M6 20l4-2 8 2-2-6-8-1z" fill="none" stroke="#999" stroke-width="2"/>190 </svg>191 </div>192 <div class="label">Women's<br>Footwear</div>193 </div>194 <div class="menu-item active">195 <div class="menu-icon">196 <svg width="40" height="40" viewBox="0 0 24 24">197 <rect x="5" y="5" width="6" height="6" fill="#6C63FF"/>198 <rect x="13" y="5" width="6" height="6" fill="#6C63FF"/>199 <rect x="5" y="13" width="6" height="6" fill="#6C63FF"/>200 <rect x="13" y="13" width="6" height="6" fill="#6C63FF"/>201 </svg>202 </div>203 <div class="label">Toys &<br>Stationery</div>204 </div>205 <div class="menu-item">206 <div class="menu-icon">207 <svg width="40" height="40" viewBox="0 0 24 24">208 <path d="M4 18h16l-2-7H6z" fill="none" stroke="#999" stroke-width="2"/>209 </svg>210 </div>211 <div class="label">Men's<br>Footwear</div>212 </div>213 <div class="menu-item">214 <div class="menu-icon">215 <svg width="40" height="40" viewBox="0 0 24 24">216 <path d="M7 7h10v10H7z" fill="none" stroke="#999" stroke-width="2"/>217 <path d="M9 17v3h6v-3" fill="none" stroke="#999" stroke-width="2"/>218 </svg>219 </div>220 <div class="label">Women's<br>Accessories</div>221 </div>222 </div>223 224 <!-- Right content area -->225 <div class="content">226 <div class="section-tag">TOYS & STATIONERY <div class="line"></div></div>227 228 <div class="section-title">Toys</div>229 <div class="grid">230 <div class="grid-item">231 <div class="img-ph">[IMG: Teddy Bear]</div>232 <div class="caption">Stuff Toys</div>233 </div>234 <div class="grid-item">235 <div class="img-ph">[IMG: Writing Tabs]</div>236 <div class="caption">Learning Toys</div>237 </div>238 <div class="grid-item">239 <div class="img-ph">[IMG: Musical Toy Cat]</div>240 <div class="caption">Musical Toys</div>241 </div>242 243 <div class="grid-item">244 <div class="img-ph">[IMG: Hobby Kit Fan]</div>245 <div class="caption">Hobby Kits</div>246 </div>247 <div class="grid-item">248 <div class="img-ph">[IMG: Puzzle House]</div>249 <div class="caption">Puzzles and Cubes</div>250 </div>251 <div class="grid-item">252 <div class="img-ph">[IMG: Action Toy Blaster]</div>253 <div class="caption">Action Toys</div>254 </div>255 256 <div class="grid-item">257 <div class="img-ph">[IMG: RC Vehicle]</div>258 <div class="caption">Vehicles</div>259 </div>260 </div>261 262 <div class="section-title">Key Chains</div>263 <div class="grid">264 <div class="grid-item">265 <div class="img-ph">[IMG: Metal Key Chain]</div>266 <div class="caption">Key Chains</div>267 </div>268 </div>269 270 <div class="section-title">School Essentials</div>271 <div class="grid">272 <div class="grid-item">273 <div class="img-ph">[IMG: Stationery Set]</div>274 <div class="caption">Stationery</div>275 </div>276 <div class="grid-item">277 <div class="img-ph">[IMG: Kids Backpack]</div>278 <div class="caption">Kids Bags</div>279 </div>280 </div>281 282 <div class="divider"></div>283 <div class="section-tag">MEN'S FOOTWEAR <div class="line"></div></div>284 </div>285 </div>286 287 <!-- Bottom tab bar -->288 <div class="tabbar">289 <div class="tab">290 <svg class="icon" viewBox="0 0 24 24">291 <path d="M4 12l8-7 8 7v8H4z" fill="none" stroke="#777" stroke-width="2"/>292 <rect x="10" y="14" width="4" height="6" fill="#777"/>293 </svg>294 <div>Home</div>295 </div>296 <div class="tab">297 <svg class="icon" viewBox="0 0 24 24">298 <circle cx="11" cy="11" r="7" fill="none" stroke="#777" stroke-width="2"/>299 <path d="M16 16l5 5" stroke="#777" stroke-width="2" fill="none"/>300 </svg>301 <div>Search</div>302 </div>303 <div class="tab active" style="position:relative;">304 <div class="active-dot"></div>305 <svg class="icon" viewBox="0 0 24 24">306 <rect x="3" y="3" width="8" height="8" rx="2" fill="#6C63FF"/>307 <rect x="13" y="3" width="8" height="8" rx="2" fill="#6C63FF"/>308 <rect x="3" y="13" width="8" height="8" rx="2" fill="#6C63FF"/>309 <rect x="13" y="13" width="8" height="8" rx="2" fill="#6C63FF"/>310 </svg>311 <div>Categories</div>312 </div>313 <div class="tab">314 <svg class="icon" viewBox="0 0 24 24">315 <circle cx="12" cy="8" r="4" fill="none" stroke="#777" stroke-width="2"/>316 <path d="M4 21c1-5 7-5 8-5s7 0 8 5" fill="none" stroke="#777" stroke-width="2"/>317 </svg>318 <div>Account</div>319 </div>320 <div class="tab">321 <svg class="icon" viewBox="0 0 24 24">322 <path d="M3 6h3l2 10h10l2-7H7" fill="none" stroke="#777" stroke-width="2"/>323 <circle cx="10" cy="20" r="1.8" fill="#777"/>324 <circle cx="17" cy="20" r="1.8" fill="#777"/>325 </svg>326 <div>Cart</div>327 </div>328 </div>329 330 <div class="home-indicator"></div>331</div>332</body>333</html>