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>Category Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 border-radius: 44px;16 box-shadow: 0 10px 40px rgba(0,0,0,0.15);17 }18 19 /* Status bar */20 .status-bar {21 height: 88px;22 padding: 0 40px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #1c1c1e;27 font-weight: 600;28 font-size: 36px;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .status-dot {36 width: 12px; height: 12px; background: #5E5E5E; border-radius: 50%;37 margin: 0 2px;38 }39 .status-pill {40 width: 18px; height: 28px; border-radius: 4px; border: 2px solid #5E5E5E;41 }42 .wifi-icon, .cell-icon, .mail-icon {43 width: 32px; height: 32px;44 }45 46 /* Search */47 .search-wrap {48 padding: 0 60px;49 margin-top: 14px;50 }51 .search-bar {52 height: 120px;53 border-radius: 60px;54 background: #FFFFFF;55 box-shadow: 0 8px 24px rgba(0,0,0,0.12);56 display: flex;57 align-items: center;58 padding: 0 40px;59 gap: 28px;60 }61 .search-input {62 font-size: 40px;63 color: #616161;64 }65 .icon {66 width: 56px; height: 56px;67 }68 69 /* Categories grid */70 .category-grid {71 display: grid;72 grid-template-columns: repeat(2, 1fr);73 gap: 48px;74 padding: 40px 60px 0;75 }76 .card {77 background: #ffffff;78 border-radius: 40px;79 box-shadow: 0 4px 18px rgba(0,0,0,0.08);80 overflow: hidden;81 }82 .card-media {83 height: 340px;84 background: #E0E0E0;85 border: 1px solid #BDBDBD;86 display: flex; align-items: center; justify-content: center;87 color: #757575; font-size: 34px;88 }89 .card-label {90 background: #97B7D3;91 color: #ffffff;92 font-weight: 800;93 font-size: 40px;94 text-align: center;95 padding: 26px 20px;96 }97 98 /* Brand section */99 .brand-section {100 margin-top: 40px;101 background: #F5F6F8;102 padding: 34px 60px 220px;103 }104 .brand-title {105 color: #6C55D9;106 font-size: 44px;107 font-weight: 700;108 margin-bottom: 28px;109 }110 .brand-row {111 display: flex;112 gap: 24px;113 overflow: hidden;114 }115 .brand-card {116 width: 200px;117 height: 160px;118 border-radius: 26px;119 background: #FFFFFF;120 box-shadow: 0 4px 12px rgba(0,0,0,0.06);121 display: flex; align-items: center; justify-content: center;122 }123 .brand-card .img {124 width: 180px; height: 140px;125 background: #E0E0E0; border: 1px solid #BDBDBD;126 display: flex; align-items: center; justify-content: center;127 color: #757575; font-size: 28px;128 border-radius: 18px;129 }130 131 /* Bottom nav */132 .bottom-nav {133 position: absolute;134 left: 0; right: 0; bottom: 0;135 height: 240px;136 background: #6F49F6;137 border-top-left-radius: 52px;138 border-top-right-radius: 52px;139 box-shadow: 0 -8px 24px rgba(0,0,0,0.2);140 }141 .nav-items {142 height: 100%;143 display: flex;144 align-items: flex-end;145 justify-content: space-around;146 padding-bottom: 42px;147 }148 .nav-item {149 width: 20%;150 display: flex;151 flex-direction: column;152 align-items: center;153 gap: 12px;154 color: #FFFFFF;155 font-size: 34px;156 font-weight: 700;157 text-align: center;158 }159 .nav-item .icon {160 width: 64px; height: 64px;161 }162 .nav-item.active { color: #FFD84D; }163 .nav-item.active svg { fill: #FFD84D; }164 165 /* Floating center button */166 .fab {167 position: absolute;168 left: 50%;169 transform: translateX(-50%);170 bottom: 180px;171 width: 140px; height: 140px;172 border-radius: 50%;173 background: #FFD84D;174 box-shadow: 0 10px 24px rgba(0,0,0,0.25);175 display: flex; align-items: center; justify-content: center;176 border: 8px solid #FFFFFF;177 }178 .fab-grid {179 width: 64px; height: 64px;180 display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;181 }182 .fab-dot {183 width: 26px; height: 26px; background: #6F49F6; border-radius: 6px;184 }185 186 /* Home indicator */187 .home-indicator {188 position: absolute;189 left: 50%;190 transform: translateX(-50%);191 bottom: 18px;192 width: 360px;193 height: 12px;194 background: #000000;195 opacity: 0.16;196 border-radius: 6px;197 }198</style>199</head>200<body>201<div id="render-target">202 203 <!-- Status bar -->204 <div class="status-bar">205 <div>12:33</div>206 <div class="status-icons">207 <!-- simple placeholders to mimic status icons -->208 <svg class="mail-icon" viewBox="0 0 24 24">209 <path d="M3 5h18v14H3V5zm9 7L3 6v12h18V6l-9 6z" fill="#5E5E5E"></path>210 </svg>211 <svg class="cell-icon" viewBox="0 0 24 24">212 <path d="M3 19h2v2H3v-2zm3-4h2v6H6v-6zm3-3h2v9H9V12zm3-2h2v11h-2V10zm3-3h2v14h-2V7zm3-3h2v17h-2V4z" fill="#5E5E5E"></path>213 </svg>214 <svg class="wifi-icon" viewBox="0 0 24 24">215 <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-6.5-7.5a10 10 0 0 1 13 0l-1.5 1.5a8 8 0 0 0-10 0L5.5 12.5zm-3-3a14 14 0 0 1 19 0L20 12a12 12 0 0 0-16 0L2 9.5z" fill="#5E5E5E"></path>216 </svg>217 <div class="status-dot"></div>218 <div class="status-pill"></div>219 </div>220 </div>221 222 <!-- Search -->223 <div class="search-wrap">224 <div class="search-bar">225 <svg class="icon" viewBox="0 0 24 24">226 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.28v.79L20 19.5 18.5 21l-4.5-4.5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z" fill="#616161"></path>227 </svg>228 <div class="search-input">What are you looking for?</div>229 </div>230 </div>231 232 <!-- Categories -->233 <div class="category-grid">234 <div class="card">235 <div class="card-media">[IMG: Outdoor Playset]</div>236 <div class="card-label">Outdoor</div>237 </div>238 <div class="card">239 <div class="card-media">[IMG: Action Figure]</div>240 <div class="card-label">Action Figures</div>241 </div>242 243 <div class="card">244 <div class="card-media">[IMG: Baby Doll Product]</div>245 <div class="card-label">Dolls & Accessories</div>246 </div>247 <div class="card">248 <div class="card-media">[IMG: Kick Scooter]</div>249 <div class="card-label">Ride-Ons</div>250 </div>251 252 <div class="card">253 <div class="card-media">[IMG: Monster Truck Toy]</div>254 <div class="card-label">Vehicle Toys</div>255 </div>256 <div class="card">257 <div class="card-media">[IMG: Kids Art Desk]</div>258 <div class="card-label">Arts & Crafts</div>259 </div>260 </div>261 262 <!-- Shop by Brand -->263 <div class="brand-section">264 <div class="brand-title">Shop by Brand</div>265 <div class="brand-row">266 <div class="brand-card"><div class="img">[IMG: Brand Logo]</div></div>267 <div class="brand-card"><div class="img">[IMG: Brand Logo]</div></div>268 <div class="brand-card"><div class="img">[IMG: Brand Logo]</div></div>269 <div class="brand-card"><div class="img">[IMG: Brand Logo]</div></div>270 <div class="brand-card"><div class="img">[IMG: Brand Logo]</div></div>271 </div>272 </div>273 274 <!-- Floating Action Button -->275 <div class="fab">276 <div class="fab-grid">277 <div class="fab-dot"></div>278 <div class="fab-dot"></div>279 <div class="fab-dot"></div>280 <div class="fab-dot"></div>281 </div>282 </div>283 284 <!-- Bottom Navigation -->285 <div class="bottom-nav">286 <div class="nav-items">287 <div class="nav-item">288 <svg class="icon" viewBox="0 0 24 24">289 <path d="M12 3l9 8v10h-6v-6H9v6H3V11l9-8z" fill="#FFFFFF"></path>290 </svg>291 <div>Home</div>292 </div>293 <div class="nav-item">294 <svg class="icon" viewBox="0 0 24 24">295 <path d="M20 6l-2-2-10 10-4 1 1-4 10-10 2 2zm-5 13H5v-2h10v2z" fill="#FFFFFF"></path>296 </svg>297 <div>Offers</div>298 </div>299 <div class="nav-item active">300 <svg class="icon" viewBox="0 0 24 24">301 <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" fill="#FFD84D"></path>302 </svg>303 <div>Category</div>304 </div>305 <div class="nav-item">306 <svg class="icon" viewBox="0 0 24 24">307 <path d="M7 18c0 1.1.9 2 2 2h8v-2H9.42c-.32 0-.61-.2-.72-.51L8 15h10c.83 0 1.54-.5 1.84-1.26L22 9H6.21l-.94-2H2V8h2l3.6 7.59c.17.37.53.61.93.61H19v-2H9.42L8.97 14H20l-1.2 3H9c-1.1 0-2-.9-2-2z" fill="#FFFFFF"></path>308 </svg>309 <div>Cart</div>310 </div>311 <div class="nav-item">312 <svg class="icon" viewBox="0 0 24 24">313 <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.42 0-8 2.69-8 6v2h16v-2c0-3.31-3.58-6-8-6z" fill="#FFFFFF"></path>314 </svg>315 <div>Account</div>316 </div>317 </div>318 </div>319 320 <!-- Home indicator -->321 <div class="home-indicator"></div>322 323</div>324</body>325</html>