GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Shopping - Learning Toy</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; border-radius: 34px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);12 color: #222;13 }14 /* Status bar */15 .status-bar {16 height: 120px; background: #e9e9ea; padding: 0 36px;17 display: flex; align-items: center; justify-content: space-between; font-size: 38px; color: #4d4d4d;18 }19 .status-icons { display: flex; gap: 22px; align-items: center; }20 .dot { width: 12px; height: 12px; background: #6d6d6d; border-radius: 50%; display: inline-block; }21 /* App bar */22 .app-bar {23 height: 120px; display: flex; align-items: center; padding: 0 28px 0 20px;24 border-bottom: 1px solid #ededed; background: #fff;25 }26 .app-left { display: flex; align-items: center; gap: 20px; flex: 1; }27 .app-title { font-size: 46px; font-weight: 600; color: #333; }28 .app-actions { display: flex; gap: 40px; align-items: center; }29 .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }30 .icon { width: 48px; height: 48px; fill: none; stroke: #555; stroke-width: 2.5; }31 .icon-fill { fill: #555; stroke: none; }32 /* Sort & Filter */33 .sort-filter {34 display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #ededed;35 height: 120px; background: #fff;36 }37 .sf-item { display: flex; align-items: center; gap: 20px; padding: 0 40px; font-size: 40px; color: #444; }38 .sf-item + .sf-item { border-left: 1px solid #ededed; }39 .badge-count {40 position: relative;41 }42 .badge-dot {43 position: absolute; top: -8px; right: -12px; width: 44px; height: 44px; background: #ff4d4d;44 border-radius: 50%; color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center;45 border: 3px solid #fff;46 }47 /* Grid */48 .content { padding: 24px; }49 .grid {50 display: flex; flex-wrap: wrap; gap: 36px;51 }52 .card {53 width: calc((100% - 72px) / 2);54 background: #fff; border: 1px solid #e6e6e6; border-radius: 22px; overflow: hidden; position: relative;55 }56 .card-img {57 height: 420px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;58 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; text-align: center;59 }60 .favorite {61 position: absolute; top: 20px; right: 20px; width: 78px; height: 78px;62 background: #ffffffcc; border-radius: 50%; border: 1px solid #e3e3e3; display: flex; align-items: center; justify-content: center;63 }64 .tag {65 position: absolute; top: 20px; left: 20px; background: #16a2a3; color: #fff; font-size: 34px; font-weight: 700;66 padding: 10px 20px; border-radius: 10px;67 }68 .card-body { padding: 24px; }69 .title {70 font-size: 34px; color: #333; line-height: 1.3; height: 86px; overflow: hidden;71 }72 .price-row { margin-top: 10px; font-size: 34px; display: flex; gap: 10px; align-items: baseline; }73 .discount { color: #2ecc71; font-weight: 700; }74 .old { color: #999; text-decoration: line-through; }75 .new { color: #000; font-weight: 800; }76 .rating { margin-top: 12px; display: flex; align-items: center; gap: 12px; }77 .stars { display: flex; gap: 6px; }78 .star { width: 34px; height: 34px; }79 .star-green { fill: #2ecc71; }80 .star-grey { fill: #c7c7c7; }81 .count { color: #777; font-size: 30px; }82 /* Coupon pill */83 .coupon {84 margin: 22px 24px 30px; background: #eaf9ed; border: 1px solid #bfe7c7; border-radius: 16px;85 display: flex; overflow: hidden;86 }87 .coupon .amount {88 width: 200px; background: #dff7e5; color: #1f8e2e; font-size: 38px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 18px 0;89 }90 .coupon .text {91 flex: 1; padding: 18px 24px; color: #1f8e2e; font-size: 36px; display: flex; align-items: center;92 position: relative;93 }94 .coupon .text:before {95 content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-left: 2px dashed #a9d9b1;96 }97 /* Bottom gesture bar */98 .gesture {99 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);100 width: 480px; height: 16px; background: #000; border-radius: 9px;101 }102</style>103</head>104<body>105<div id="render-target">106 <!-- Status Bar -->107 <div class="status-bar">108 <div style="display:flex; align-items:center; gap:16px;">109 <span>11:16</span>110 <div class="status-icons">111 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>112 <span style="font-size:40px;">•</span>113 </div>114 </div>115 <div class="status-icons">116 <svg class="icon" viewBox="0 0 24 24"><path d="M4 12h16M18 8l2 4-2 4" /></svg>117 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18" /></svg>118 <svg class="icon" viewBox="0 0 24 24"><path d="M7 4h10v16H7z"/></svg>119 </div>120 </div>121 122 <!-- App Bar -->123 <div class="app-bar">124 <div class="app-left">125 <div class="icon-btn" aria-label="Back">126 <svg class="icon" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>127 </div>128 <div class="app-title">learning Toy</div>129 </div>130 <div class="app-actions">131 <div class="icon-btn" aria-label="Search">132 <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>133 </div>134 <div class="icon-btn" aria-label="Voice">135 <svg class="icon" viewBox="0 0 24 24"><path d="M12 4a3 3 0 013 3v6a3 3 0 01-6 0V7a3 3 0 013-3z"/><path d="M5 11a7 7 0 0014 0"/><path d="M12 18v2"/></svg>136 </div>137 <div class="icon-btn" aria-label="Wishlist">138 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 017-3 4 4 0 017 3c0 5.65-7 10-7 10z"/></svg>139 </div>140 <div class="icon-btn" aria-label="Cart">141 <svg class="icon" viewBox="0 0 24 24"><path d="M6 6h15l-2 9H7L6 6z"/><circle cx="9" cy="20" r="1.8" class="icon-fill"/><circle cx="18" cy="20" r="1.8" class="icon-fill"/></svg>142 </div>143 </div>144 </div>145 146 <!-- Sort / Filter -->147 <div class="sort-filter">148 <div class="sf-item">149 <svg class="icon" viewBox="0 0 24 24"><path d="M6 4v10M6 14l-2-2 2-2M12 4v6M12 10l-2-2 2-2M18 4v2M18 6l-2-2 2-2"/></svg>150 <span style="font-weight:600;">Sort</span>151 </div>152 <div class="sf-item badge-count">153 <svg class="icon" viewBox="0 0 24 24"><path d="M5 6h14M9 10h10M13 14h6M7 18h12"/></svg>154 <span style="font-weight:600;">Filter</span>155 <div class="badge-dot">1</div>156 </div>157 </div>158 159 <!-- Grid of products -->160 <div class="content">161 <div class="grid">162 <!-- Card 1 -->163 <div class="card">164 <div class="tag">Bestseller</div>165 <div class="favorite">166 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 017-3 4 4 0 017 3c0 5.65-7 10-7 10z"/></svg>167 </div>168 <div class="card-img">[IMG: Hello Kitty learning telephone]</div>169 <div class="card-body">170 <div class="title">XELIX Hello Kitty Learning Telephone Toy for Kids...</div>171 <div class="price-row">172 <span class="discount">80% off</span>173 <span class="old">499</span>174 <span class="new">₹98</span>175 </div>176 <div class="rating">177 <div class="stars">178 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>179 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>180 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>181 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>182 <svg class="star star-grey" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>183 </div>184 <span class="count">(415)</span>185 </div>186 </div>187 <div class="coupon">188 <div class="amount">₹25</div>189 <div class="text">Coupon available</div>190 </div>191 </div>192 193 <!-- Card 2 -->194 <div class="card">195 <div class="tag">Trending</div>196 <div class="favorite">197 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 017-3 4 4 0 017 3c0 5.65-7 10-7 10z"/></svg>198 </div>199 <div class="card-img">[IMG: Kids study laptop game toy]</div>200 <div class="card-body">201 <div class="title">RSA Enterprises Angry birds study laptop for kids...</div>202 <div class="price-row">203 <span class="discount">70% off</span>204 <span class="old">999</span>205 <span class="new">₹290</span>206 </div>207 <div class="rating">208 <div class="stars">209 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>210 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>211 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>212 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>213 <svg class="star star-grey" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>214 </div>215 <span class="count">(30)</span>216 </div>217 </div>218 <div class="coupon">219 <div class="amount">₹40</div>220 <div class="text">Coupon available</div>221 </div>222 </div>223 224 <!-- Card 3 -->225 <div class="card">226 <div class="favorite">227 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 017-3 4 4 0 017 3c0 5.65-7 10-7 10z"/></svg>228 </div>229 <div class="card-img">[IMG: Electronic talking cat toy]</div>230 <div class="card-body">231 <div class="title">Rachna enterprise Electronic talking cat toy with music...</div>232 <div class="price-row">233 <span class="discount">48% off</span>234 <span class="old">499</span>235 <span class="new">₹259</span>236 </div>237 <div class="rating">238 <div class="stars">239 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>240 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>241 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>242 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>243 <svg class="star star-grey" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>244 </div>245 <span class="count">(18)</span>246 </div>247 </div>248 <div class="coupon">249 <div class="amount">₹40</div>250 <div class="text">Coupon available</div>251 </div>252 </div>253 254 <!-- Card 4 -->255 <div class="card">256 <div class="tag">Trending</div>257 <div class="favorite">258 <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 017-3 4 4 0 017 3c0 5.65-7 10-7 10z"/></svg>259 </div>260 <div class="card-img">[IMG: 4-string kids guitar toy]</div>261 <div class="card-body">262 <div class="title">KETKIFASHION 4-String Kids Guitar Musical Toy...</div>263 <div class="price-row">264 <span class="discount">80% off</span>265 <span class="old">1,999</span>266 <span class="new">₹399</span>267 </div>268 <div class="rating">269 <div class="stars">270 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>271 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>272 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>273 <svg class="star star-green" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>274 <svg class="star star-grey" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3L22 9.3l-5 4.9L18.2 20 12 16.8 5.8 20 7 14.2 2 9.3l6.9-1L12 2z"/></svg>275 </div>276 </div>277 </div>278 <div class="coupon">279 <div class="amount">₹40</div>280 <div class="text">Coupon available</div>281 </div>282 </div>283 </div>284 </div>285 286 <div class="gesture"></div>287</div>288</body>289</html>