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>Yalatoys - Category</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #F4F6FA;13 }14 15 /* Status bar */16 .statusbar {17 position: absolute; top: 24px; left: 0; right: 0;18 height: 60px; display: flex; align-items: center; justify-content: space-between;19 padding: 0 36px; color: #3A3A3A; font-size: 34px;20 }21 .status-icons { display: flex; gap: 28px; align-items: center; }22 .status-icons svg { width: 42px; height: 42px; }23 24 /* Header with logo and quick actions */25 .header {26 position: absolute; top: 110px; left: 0; right: 0;27 height: 180px;28 display: flex; align-items: center; justify-content: center;29 }30 .logo {31 font-weight: 800; font-size: 92px; letter-spacing: 2px;32 }33 .logo span { display: inline-block; }34 .logo .y{ color:#6BB1FF; }35 .logo .a{ color:#FFB300; }36 .logo .l{ color:#6AD56D; }37 .logo .a2{ color:#FF4E6D; }38 .logo .t{ color:#6AD56D; }39 .logo .o{ color:#8A67FF; }40 .logo .y2{ color:#00BCD4; }41 .logo .s{ color:#FF67C0; }42 43 .actions {44 position: absolute; right: 40px; top: 96px; display: flex; gap: 28px;45 }46 .round-btn {47 width: 110px; height: 110px; border-radius: 28px;48 display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0,0,0,0.12);49 }50 .btn-green { background: #64D46B; }51 .btn-purple { background: #6C4BEF; }52 .round-btn svg { width: 58px; height: 58px; fill: #FFFFFF; }53 54 /* Search bar */55 .search {56 position: absolute; top: 320px; left: 60px; width: 960px; height: 120px;57 background: #F0F2F5; border: 1px solid #DDE1E7; border-radius: 34px;58 display: flex; align-items: center; padding: 0 34px; gap: 22px; color: #77839A; font-size: 40px;59 }60 .search svg { width: 56px; height: 56px; stroke: #77839A; }61 62 /* Grid of cards */63 .content {64 position: absolute; top: 480px; left: 0; right: 0; bottom: 360px;65 padding: 30px 36px 260px 36px;66 }67 .grid {68 display: grid; grid-template-columns: 1fr 1fr; gap: 34px;69 }70 .card {71 background: #FFFFFF; border-radius: 36px; box-shadow: 0 8px 20px rgba(0,0,0,0.06);72 overflow: hidden; position: relative;73 padding-bottom: 26px;74 }75 .img-holder {76 width: 100%; height: 360px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;77 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;78 }79 .heart {80 position: absolute; top: 18px; right: 18px;81 width: 92px; height: 92px; border-radius: 50%;82 background: #FFFFFF; box-shadow: 0 4px 10px rgba(0,0,0,0.1);83 display: flex; align-items: center; justify-content: center;84 }85 .heart svg { width: 46px; height: 46px; stroke: #7C5AE6; fill: none; stroke-width: 5px; }86 87 .card-body { padding: 26px; }88 .title { font-size: 40px; color: #222; line-height: 1.2; margin-bottom: 16px; }89 .price { font-size: 42px; color: #6C4BEF; font-weight: 700; }90 91 .badge {92 display: inline-block; background: #87E4D3; color: #2D6D66; font-size: 32px;93 padding: 10px 22px; border-radius: 26px; margin-bottom: 16px; font-weight: 700;94 }95 96 /* Bottom navigation */97 .bottom-nav {98 position: absolute; left: 0; right: 0; bottom: 0; height: 290px;99 background: #6C4BEF; border-top-left-radius: 70px; border-top-right-radius: 70px;100 box-shadow: 0 -10px 24px rgba(0,0,0,0.18);101 display: flex; align-items: center; justify-content: space-around; padding: 40px 30px;102 }103 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 24px; color: #EFEAFF; }104 .nav-item svg { width: 72px; height: 72px; fill: none; stroke: #FFFFFF; stroke-width: 5px; }105 .nav-label { font-size: 36px; }106 .active .nav-label { color: #FFD93A; font-weight: 700; }107 108 /* Floating action button */109 .fab {110 position: absolute; bottom: 220px; left: 50%; transform: translateX(-50%);111 width: 160px; height: 160px; border-radius: 50%;112 background: #FFD93A; box-shadow: 0 10px 22px rgba(0,0,0,0.20);113 border: 16px solid #FFFFFF;114 display: flex; align-items: center; justify-content: center;115 }116 .fab-grid { width: 84px; height: 84px; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 14px; }117 .fab-grid div { background: #6C4BEF; border-radius: 12px; }118 119 /* Home indicator (iOS-like) */120 .home-indicator {121 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);122 width: 320px; height: 14px; background: #000; opacity: 0.15; border-radius: 8px;123 }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status bar -->130 <div class="statusbar">131 <div class="time">12:34</div>132 <div class="status-icons">133 <!-- WiFi -->134 <svg viewBox="0 0 24 24">135 <path d="M2 8c5-4 15-4 20 0" stroke="#333" fill="none" stroke-width="2"/>136 <path d="M5 11c4-3 10-3 14 0" stroke="#333" fill="none" stroke-width="2"/>137 <path d="M8 14c2-2 6-2 8 0" stroke="#333" fill="none" stroke-width="2"/>138 <circle cx="12" cy="18" r="2" fill="#333"/>139 </svg>140 <!-- Battery -->141 <svg viewBox="0 0 28 18">142 <rect x="1" y="2" width="22" height="14" rx="3" ry="3" stroke="#333" fill="none" stroke-width="2"/>143 <rect x="3" y="4" width="16" height="10" fill="#333"/>144 <rect x="24" y="6" width="3" height="6" rx="1" fill="#333"/>145 </svg>146 </div>147 </div>148 149 <!-- Header with logo -->150 <div class="header">151 <div class="logo">152 <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>153 </div>154 </div>155 156 <!-- Action buttons -->157 <div class="actions">158 <div class="round-btn btn-green" title="Filters">159 <!-- sliders icon -->160 <svg viewBox="0 0 24 24">161 <line x1="5" y1="6" x2="19" y2="6" stroke="#FFF" stroke-width="2"/>162 <circle cx="9" cy="6" r="3" fill="#FFF"/>163 <line x1="5" y1="12" x2="19" y2="12" stroke="#FFF" stroke-width="2"/>164 <circle cx="14" cy="12" r="3" fill="#FFF"/>165 <line x1="5" y1="18" x2="19" y2="18" stroke="#FFF" stroke-width="2"/>166 <circle cx="7" cy="18" r="3" fill="#FFF"/>167 </svg>168 </div>169 <div class="round-btn btn-purple" title="Notifications">170 <!-- bell icon -->171 <svg viewBox="0 0 24 24">172 <path d="M12 3c-3 0-5 2-5 5v4c0 1-1 2-2 3h14c-1-1-2-2-2-3V8c0-3-2-5-5-5z" fill="#FFF"/>173 <circle cx="12" cy="20" r="2" fill="#FFF"/>174 </svg>175 </div>176 </div>177 178 <!-- Search bar -->179 <div class="search">180 <svg viewBox="0 0 24 24">181 <circle cx="10" cy="10" r="7" fill="none" stroke="#77839A" stroke-width="2"></circle>182 <line x1="16" y1="16" x2="22" y2="22" stroke="#77839A" stroke-width="2"></line>183 </svg>184 <div>What are you looking for?</div>185 </div>186 187 <!-- Content grid -->188 <div class="content">189 <div class="grid">190 191 <!-- Card 1 -->192 <div class="card">193 <div class="img-holder">[IMG: Boom City Racers Fireworks Set]</div>194 <div class="heart">195 <svg viewBox="0 0 24 24">196 <path d="M12 21s-7-4.5-8.5-8C2.5 9 4 6.5 6.7 6.5c2 0 3.3 1.5 3.3 1.5s1.3-1.5 3.3-1.5C16 6.5 17.5 9 16.5 13c-1.5 3.5-8.5 8-8.5 8z"></path>197 </svg>198 </div>199 <div class="card-body">200 <div class="title">Boom City Racers-Fireworks</div>201 <div class="price">BHD 19.950</div>202 </div>203 </div>204 205 <!-- Card 2 -->206 <div class="card">207 <div class="img-holder">[IMG: Maisto Build N Play Police Department]</div>208 <div class="heart">209 <svg viewBox="0 0 24 24">210 <path d="M12 21s-7-4.5-8.5-8C2.5 9 4 6.5 6.7 6.5c2 0 3.3 1.5 3.3 1.5s1.3-1.5 3.3-1.5C16 6.5 17.5 9 16.5 13c-1.5 3.5-8.5 8-8.5 8z"></path>211 </svg>212 </div>213 <div class="card-body">214 <div class="badge">Featured</div>215 <div class="title">Maisto Fresh Metal Build N Play Police Department</div>216 <div class="price">BHD 3.950</div>217 </div>218 </div>219 220 <!-- Card 3 -->221 <div class="card">222 <div class="img-holder">[IMG: Maisto Chevrolet 1970 Nova SS Coupe]</div>223 <div class="heart">224 <svg viewBox="0 0 24 24">225 <path d="M12 21s-7-4.5-8.5-8C2.5 9 4 6.5 6.7 6.5c2 0 3.3 1.5 3.3 1.5s1.3-1.5 3.3-1.5C16 6.5 17.5 9 16.5 13c-1.5 3.5-8.5 8-8.5 8z"></path>226 </svg>227 </div>228 <div class="card-body">229 <div class="title">Maisto Chevrolet 1970 Nova Ss Coupe Diecast</div>230 <div class="price">BHD 17.500</div>231 </div>232 </div>233 234 <!-- Card 4 -->235 <div class="card">236 <div class="img-holder">[IMG: Maisto 1939 Ford Deluxe Coupe Light Green]</div>237 <div class="heart">238 <svg viewBox="0 0 24 24">239 <path d="M12 21s-7-4.5-8.5-8C2.5 9 4 6.5 6.7 6.5c2 0 3.3 1.5 3.3 1.5s1.3-1.5 3.3-1.5C16 6.5 17.5 9 16.5 13c-1.5 3.5-8.5 8-8.5 8z"></path>240 </svg>241 </div>242 <div class="card-body">243 <div class="title">Maisto 1939 Ford Deluxe Coupe Light Green Diecast</div>244 <div class="price">BHD 14.250</div>245 </div>246 </div>247 248 </div>249 </div>250 251 <!-- Floating action button -->252 <div class="fab">253 <div class="fab-grid">254 <div></div><div></div><div></div><div></div>255 </div>256 </div>257 258 <!-- Bottom Navigation -->259 <div class="bottom-nav">260 <div class="nav-item">261 <svg viewBox="0 0 24 24">262 <path d="M3 10l9-7 9 7v10H15V13H9v7H3z" stroke="#FFF" fill="none" stroke-width="2"/>263 </svg>264 <div class="nav-label">Home</div>265 </div>266 <div class="nav-item">267 <svg viewBox="0 0 24 24">268 <path d="M20 8l-8-6-8 6v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="#FFF" fill="none"/>269 <circle cx="12" cy="14" r="3" fill="#FFF"/>270 </svg>271 <div class="nav-label">Offers</div>272 </div>273 <div class="nav-item active">274 <svg viewBox="0 0 24 24">275 <rect x="3" y="3" width="7" height="7" rx="1" stroke="#FFF"></rect>276 <rect x="14" y="3" width="7" height="7" rx="1" stroke="#FFF"></rect>277 <rect x="3" y="14" width="7" height="7" rx="1" stroke="#FFF"></rect>278 <rect x="14" y="14" width="7" height="7" rx="1" stroke="#FFF"></rect>279 </svg>280 <div class="nav-label">Category</div>281 </div>282 <div class="nav-item">283 <svg viewBox="0 0 24 24">284 <path d="M3 6h4l2 9h8l2-6H9" stroke="#FFF" fill="none"/>285 <circle cx="10" cy="20" r="2" fill="#FFF"/>286 <circle cx="17" cy="20" r="2" fill="#FFF"/>287 </svg>288 <div class="nav-label">Cart</div>289 </div>290 <div class="nav-item">291 <svg viewBox="0 0 24 24">292 <circle cx="12" cy="7" r="4" stroke="#FFF" fill="none"/>293 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#FFF" fill="none"/>294 </svg>295 <div class="nav-label">Account</div>296 </div>297 </div>298 299 <div class="home-indicator"></div>300</div>301</body>302</html>