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>Yala Toys UI</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;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Common */18 .safe-h { padding-left: 40px; padding-right: 40px; }19 .row { display: flex; align-items: center; }20 .spacer-24 { height: 24px; }21 .spacer-32 { height: 32px; }22 .spacer-40 { height: 40px; }23 .muted { color: #8E8E93; }24 .pill { border-radius: 30px; }25 .shadow-soft { box-shadow: 0 8px 20px rgba(0,0,0,0.08); }26 .img-ph {27 background: #E0E0E0;28 border: 1px solid #BDBDBD;29 color: #757575;30 display: flex;31 align-items: center;32 justify-content: center;33 }34 35 /* Status bar */36 .status-bar {37 height: 70px;38 padding: 0 40px;39 display: flex;40 align-items: center;41 justify-content: space-between;42 color: #111;43 font-size: 34px;44 }45 .status-icons { display: flex; gap: 22px; align-items: center; }46 .status-icons svg { width: 34px; height: 34px; fill: #333; }47 48 /* Header / Logo */49 .header {50 padding: 16px 40px 0 40px;51 position: relative;52 }53 .logo {54 font-weight: 800;55 font-size: 72px;56 letter-spacing: -1px;57 text-align: center;58 line-height: 1;59 }60 .logo span { display: inline-block; padding: 0 4px; }61 .logo .y { color: #6A76FF; }62 .logo .a { color: #FFD33D; }63 .logo .l { color: #6A76FF; }64 .logo .a2 { color: #6AD66F; }65 .logo .t { color: #5CC3FF; }66 .logo .o { color: #FF6FC7; }67 .logo .y2 { color: #6A76FF; }68 .logo .s { color: #8FD3FF; }69 70 .bell-btn {71 position: absolute;72 right: 40px;73 top: 20px;74 width: 96px;75 height: 96px;76 background: #6F54D8;77 border-radius: 24px;78 display: flex;79 align-items: center;80 justify-content: center;81 }82 .bell-btn svg { width: 48px; height: 48px; fill: #fff; }83 84 /* Search */85 .search-bar {86 margin: 28px 40px 0 40px;87 height: 110px;88 background: #F3F3F5;89 border: 2px solid #E5E5EA;90 border-radius: 32px;91 display: flex;92 align-items: center;93 padding: 0 34px;94 gap: 26px;95 color: #9A9AAF;96 font-size: 38px;97 }98 .search-bar svg { width: 44px; height: 44px; fill: #9A9AAF; }99 100 /* Hero banner */101 .hero-wrap { padding: 32px 40px; }102 .hero-banner {103 width: 100%;104 height: 540px;105 border-radius: 36px;106 }107 .hero-banner .label {108 font-size: 40px;109 text-align: center;110 padding: 0 20px;111 }112 .carousel-dots {113 margin-top: 22px;114 display: flex;115 justify-content: center;116 gap: 18px;117 }118 .dot { width: 18px; height: 18px; border-radius: 50%; background: #D3D3D8; }119 .dot.active { background: #6F54D8; }120 121 /* Purple section */122 .purple-section {123 margin-top: 20px;124 background: #6F54D8;125 border-top-left-radius: 60px;126 border-top-right-radius: 60px;127 padding-bottom: 240px;128 }129 130 /* Category grid */131 .cat-grid {132 padding: 40px 40px 0 40px;133 display: grid;134 grid-template-columns: repeat(4, 1fr);135 gap: 40px 34px;136 }137 .cat-item { text-align: center; color: #fff; }138 .cat-item .icon {139 width: 180px;140 height: 180px;141 border-radius: 40px;142 margin: 0 auto 18px;143 }144 .cat-item .label {145 font-size: 32px;146 line-height: 1.2;147 }148 149 /* Chips row */150 .chips-row {151 margin-top: 36px;152 padding: 0 40px;153 display: flex;154 gap: 28px;155 }156 .chip {157 background: #fff;158 border-radius: 30px;159 height: 140px;160 min-width: 420px;161 padding: 20px;162 display: flex;163 align-items: center;164 gap: 20px;165 color: #222;166 font-weight: 700;167 font-size: 40px;168 }169 .chip .thumb {170 width: 100px;171 height: 100px;172 border-radius: 16px;173 flex-shrink: 0;174 }175 176 /* Bottom nav */177 .bottom-nav {178 position: absolute;179 left: 0;180 bottom: 0;181 width: 100%;182 height: 200px;183 background: #6F54D8;184 display: flex;185 align-items: center;186 justify-content: space-around;187 padding: 0 40px;188 }189 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; font-size: 32px; }190 .nav-item.active { color: #FFD33D; }191 .nav-item svg { width: 52px; height: 52px; fill: currentColor; }192 193 /* Floating center button */194 .fab-wrap {195 position: absolute;196 left: 50%;197 bottom: 160px;198 transform: translateX(-50%);199 width: 150px;200 height: 150px;201 background: #FFD33D;202 border-radius: 50%;203 display: flex;204 align-items: center;205 justify-content: center;206 box-shadow: 0 8px 18px rgba(0,0,0,0.25);207 border: 10px solid rgba(255,255,255,0.7);208 }209 .fab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }210 .fab-dot { width: 22px; height: 22px; border-radius: 50%; background: #6F54D8; }211 212</style>213</head>214<body>215<div id="render-target">216 217 <!-- Status bar -->218 <div class="status-bar">219 <div>12:29</div>220 <div class="status-icons">221 <!-- mail icon -->222 <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4V6zm2 0l8 6 8-6"/></svg>223 <!-- download icon -->224 <svg viewBox="0 0 24 24"><path d="M12 3v10l4-4m-4 4L8 9M4 19h16"/></svg>225 <!-- refresh icon -->226 <svg viewBox="0 0 24 24"><path d="M6 6l-2 4h4M18 18l2-4h-4M7 12a5 5 0 0 1 10 0"/></svg>227 <!-- timer icon -->228 <svg viewBox="0 0 24 24"><path d="M9 2h6M12 8v6l4 2M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16"/></svg>229 <!-- wifi icon -->230 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 16c3-2 5-2 8 0M12 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>231 </div>232 </div>233 234 <!-- Header with logo and bell -->235 <div class="header">236 <div class="logo">237 <span class="y">y</span><span class="a">a</span><span class="l">l</span><span class="a2">a</span><span class="t">t</span><span class="o">o</span><span class="y2">y</span><span class="s">s</span>238 </div>239 <div class="bell-btn">240 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm8-6V11a8 8 0 1 0-16 0v5l-2 2h20l-2-2z"/></svg>241 </div>242 </div>243 244 <!-- Search -->245 <div class="search-bar">246 <svg viewBox="0 0 24 24"><path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm8 14-4-4"/></svg>247 <div>What are you looking for?</div>248 </div>249 250 <!-- Hero banner -->251 <div class="hero-wrap">252 <div class="hero-banner img-ph shadow-soft">253 <div class="label">[IMG: Toys promo banner with headline and call-to-action]</div>254 </div>255 <div class="carousel-dots">256 <div class="dot active"></div>257 <div class="dot"></div>258 <div class="dot"></div>259 <div class="dot"></div>260 <div class="dot"></div>261 <div class="dot"></div>262 </div>263 </div>264 265 <!-- Purple section -->266 <div class="purple-section">267 <!-- Category grid -->268 <div class="cat-grid">269 <div class="cat-item">270 <div class="icon img-ph">[IMG: Toys for Boys]</div>271 <div class="label">Toys for Boys</div>272 </div>273 <div class="cat-item">274 <div class="icon img-ph">[IMG: Toys for Girls]</div>275 <div class="label">Toys for Girls</div>276 </div>277 <div class="cat-item">278 <div class="icon img-ph">[IMG: Toys For All]</div>279 <div class="label">Toys For All</div>280 </div>281 <div class="cat-item">282 <div class="icon img-ph">[IMG: Toddler Specials]</div>283 <div class="label">Toddler Spe..</div>284 </div>285 <div class="cat-item">286 <div class="icon img-ph">[IMG: Outdoor Toys]</div>287 <div class="label">Outdoor Toys</div>288 </div>289 <div class="cat-item">290 <div class="icon img-ph">[IMG: Ride-Ons]</div>291 <div class="label">Ride-Ons</div>292 </div>293 <div class="cat-item">294 <div class="icon img-ph">[IMG: Batman Toys]</div>295 <div class="label">Batman Toys</div>296 </div>297 <div class="cat-item">298 <div class="icon img-ph">[IMG: Dolls]</div>299 <div class="label">Dolls</div>300 </div>301 </div>302 303 <!-- Chips -->304 <div class="chips-row">305 <div class="chip shadow-soft">306 <div class="thumb img-ph">[IMG: Action Figures]</div>307 <div>Action Figures</div>308 </div>309 <div class="chip shadow-soft">310 <div class="thumb img-ph">[IMG: Doll Houses]</div>311 <div>Doll Houses</div>312 </div>313 </div>314 </div>315 316 <!-- Floating button -->317 <div class="fab-wrap">318 <div class="fab-grid">319 <div class="fab-dot"></div><div class="fab-dot"></div>320 <div class="fab-dot"></div><div class="fab-dot"></div>321 </div>322 </div>323 324 <!-- Bottom navigation -->325 <div class="bottom-nav">326 <div class="nav-item active">327 <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v9H3v-9zm4 9v-6h10v6"/></svg>328 <div>Home</div>329 </div>330 <div class="nav-item">331 <svg viewBox="0 0 24 24"><path d="M4 4h16v8H4V4zm0 10h8v6H4v-6z"/></svg>332 <div>Offers</div>333 </div>334 <div class="nav-item">335 <svg viewBox="0 0 24 24"><path d="M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z"/></svg>336 <div>Category</div>337 </div>338 <div class="nav-item">339 <svg viewBox="0 0 24 24"><path d="M6 6h14l-2 8H8L6 6zm2 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/></svg>340 <div>Cart</div>341 </div>342 <div class="nav-item">343 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-8 9c0-5 4-7 8-7s8 2 8 7H4z"/></svg>344 <div>Account</div>345 </div>346 </div>347 348</div>349</body>350</html>