GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Shopping Grid - Kalenji</title>5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #222;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 background: #f2f2f2;21 display: flex;22 align-items: center;23 padding: 0 32px;24 box-sizing: border-box;25 font-size: 34px;26 color: #444;27 }28 .status-bar .right {29 margin-left: auto;30 display: flex;31 gap: 26px;32 align-items: center;33 }34 .dot { width: 18px; height: 18px; background:#d8d8d8; border-radius:50%; display:inline-block; }35 36 /* App bar */37 .app-bar {38 height: 120px;39 display: flex;40 align-items: center;41 padding: 0 28px;42 box-sizing: border-box;43 border-bottom: 1px solid #e6e6e6;44 background:#fff;45 }46 .icon-btn {47 width: 84px; height: 84px; display:flex; align-items:center; justify-content:center; border-radius: 16px;48 }49 .title {50 font-size: 42px;51 font-weight: 700;52 margin-left: 8px;53 color:#222;54 white-space: nowrap;55 overflow: hidden;56 text-overflow: ellipsis;57 max-width: 560px;58 }59 .app-actions { margin-left: auto; display: flex; gap: 8px; }60 .app-actions .icon-btn { width: 88px; height: 88px; }61 62 /* Content */63 .content {64 position: absolute;65 top: 210px;66 bottom: 180px;67 left: 0; right: 0;68 overflow: hidden;69 background: #fafafa;70 }71 .grid {72 height: 100%;73 overflow-y: auto;74 padding: 16px 18px 180px;75 box-sizing: border-box;76 display: grid;77 grid-template-columns: repeat(2, 1fr);78 grid-column-gap: 20px;79 grid-row-gap: 22px;80 }81 82 .card {83 background: #fff;84 border: 1px solid #e5e5e5;85 border-radius: 12px;86 overflow: hidden;87 box-shadow: 0 1px 0 rgba(0,0,0,0.03);88 }89 .img-box {90 position: relative;91 height: 470px;92 background: #E0E0E0;93 border-bottom: 1px solid #e5e5e5;94 display: flex; align-items: center; justify-content: center;95 color: #666; font-size: 28px;96 }97 .chip {98 position: absolute;99 left: 16px;100 bottom: 16px;101 background: #fff;102 border: 1px solid #e3e3e3;103 font-size: 26px;104 padding: 6px 12px;105 border-radius: 10px;106 display: flex; align-items: center; gap: 8px;107 }108 .wishlist {109 position: absolute;110 right: 16px; top: 16px;111 width: 60px; height: 60px; border-radius: 30px;112 background: #ffffff;113 border: 1px solid #e3e3e3;114 display:flex; align-items:center; justify-content:center;115 }116 .ribbon {117 position: absolute;118 top: -12px; left: 0;119 background: #1f87f5;120 color: #fff;121 font-size: 22px;122 padding: 6px 12px;123 border-top-right-radius: 8px;124 border-bottom-right-radius: 8px;125 }126 .ribbon.yellow { background:#2aa4de; } /* alternate */127 .info {128 padding: 16px 16px 20px;129 }130 .brand {131 font-size: 26px;132 color: #3a3a3a;133 font-weight: 800;134 letter-spacing: 1px;135 }136 .name {137 margin-top: 6px;138 font-size: 28px;139 color: #333;140 line-height: 1.25;141 min-height: 72px;142 }143 .price-row {144 margin-top: 10px;145 display: flex; align-items: center; gap: 14px;146 }147 .price-tag {148 background: #ffd54d;149 color: #111;150 font-weight: 800;151 font-size: 30px;152 padding: 8px 14px;153 border-radius: 6px;154 }155 .old-price {156 color: #8a8a8a;157 text-decoration: line-through;158 font-size: 26px;159 }160 161 /* Bottom bar */162 .bottom-bar {163 position: absolute;164 left: 0; right: 0; bottom: 0;165 height: 170px;166 background: #fff;167 border-top: 1px solid #e5e5e5;168 display: flex; align-items: center; justify-content: space-around;169 padding-bottom: 12px;170 }171 .bottom-item {172 display: flex; align-items: center; gap: 20px;173 font-size: 38px;174 color: #222;175 }176 .red-dot { width: 16px; height: 16px; background:#e54040; border-radius:50%; }177 .muted { color: #6f6f6f; }178 179 /* Simple svg icons common style */180 svg { display:block }181</style>182</head>183<body>184<div id="render-target">185 186 <!-- Status bar -->187 <div class="status-bar">188 <div>12:08</div>189 <div class="right">190 <span class="dot"></span>191 <span class="dot"></span>192 <span class="dot"></span>193 <span class="dot"></span>194 </div>195 </div>196 197 <!-- App bar -->198 <div class="app-bar">199 <div class="icon-btn" aria-label="Back">200 <svg width="44" height="44" viewBox="0 0 24 24">201 <path d="M14.5 5L7 12l7.5 7" fill="none" stroke="#222" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>202 </svg>203 </div>204 <div class="title">Kalenji Mens Runnin...</div>205 <div class="app-actions">206 <div class="icon-btn" aria-label="Search">207 <svg width="42" height="42" viewBox="0 0 24 24">208 <circle cx="11" cy="11" r="7" fill="none" stroke="#222" stroke-width="2"/>209 <path d="M16.5 16.5L21 21" stroke="#222" stroke-width="2" stroke-linecap="round"/>210 </svg>211 </div>212 <div class="icon-btn" aria-label="Wishlist">213 <svg width="42" height="42" viewBox="0 0 24 24">214 <path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" fill="none" stroke="#222" stroke-width="2" stroke-linejoin="round"/>215 </svg>216 </div>217 <div class="icon-btn" aria-label="Cart">218 <svg width="42" height="42" viewBox="0 0 24 24">219 <path d="M3 5h2l2.2 10h9.6l2-7H7" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>220 <circle cx="10" cy="20" r="1.6" fill="#222"/>221 <circle cx="17" cy="20" r="1.6" fill="#222"/>222 </svg>223 </div>224 </div>225 </div>226 227 <!-- Content grid -->228 <div class="content">229 <div class="grid">230 231 <!-- Card 1 -->232 <div class="card">233 <div class="img-box">234 [IMG: Khaki Running Shorts]235 <div class="chip">236 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 17l-5.5 3 1.5-6-4.5-4 6-.5L12 3l2.5 6 6 .5-4.5 4 1.5 6z" fill="#f5b301"/></svg>237 <span>4.5</span>238 </div>239 <div class="wishlist">240 <svg width="30" height="30" viewBox="0 0 24 24">241 <path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" fill="none" stroke="#5f6a77" stroke-width="1.8"/>242 </svg>243 </div>244 <div class="ribbon yellow">PRICE DROP</div>245 </div>246 <div class="info">247 <div class="brand">KALENJI</div>248 <div class="name">Men's 2 in 1 Running Shorts - Khaki</div>249 <div class="price-row">250 <div class="price-tag">₹1,299</div>251 <div class="old-price">₹1,819</div>252 </div>253 </div>254 </div>255 256 <!-- Card 2 -->257 <div class="card">258 <div class="img-box">259 [IMG: Grey Running Shoes]260 <div class="chip">261 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 17l-5.5 3 1.5-6-4.5-4 6-.5L12 3l2.5 6 6 .5-4.5 4 1.5 6z" fill="#f5b301"/></svg>262 <span>4.4</span>263 </div>264 <div class="wishlist">265 <svg width="30" height="30" viewBox="0 0 24 24">266 <path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" fill="none" stroke="#5f6a77" stroke-width="1.8"/>267 </svg>268 </div>269 </div>270 <div class="info">271 <div class="brand">KALENJI</div>272 <div class="name">Men Running Shoes Run 100 - Grey</div>273 <div class="price-row">274 <div class="price-tag">₹899</div>275 <div class="old-price">₹1,199</div>276 </div>277 </div>278 </div>279 280 <!-- Card 3 -->281 <div class="card">282 <div class="img-box">283 [IMG: Dark Blue Running Shoes]284 <div class="chip">285 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 17l-5.5 3 1.5-6-4.5-4 6-.5L12 3l2.5 6 6 .5-4.5 4 1.5 6z" fill="#f5b301"/></svg>286 <span>4.5</span>287 </div>288 <div class="wishlist">289 <svg width="30" height="30" viewBox="0 0 24 24">290 <path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" fill="none" stroke="#5f6a77" stroke-width="1.8"/>291 </svg>292 </div>293 <div class="ribbon">PRICE DROP</div>294 </div>295 <div class="info">296 <div class="brand">KALENJI</div>297 <div class="name">Men Running Shoes Run Active - Dark Blue</div>298 <div class="price-row">299 <div class="price-tag">₹2,299</div>300 <div class="old-price">₹2,999</div>301 </div>302 </div>303 </div>304 305 <!-- Card 4 -->306 <div class="card">307 <div class="img-box">308 [IMG: Blue Run Cushion Shoes]309 <div class="chip">310 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 17l-5.5 3 1.5-6-4.5-4 6-.5L12 3l2.5 6 6 .5-4.5 4 1.5 6z" fill="#f5b301"/></svg>311 <span>4.2</span>312 </div>313 <div class="wishlist">314 <svg width="30" height="30" viewBox="0 0 24 24">315 <path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" fill="none" stroke="#5f6a77" stroke-width="1.8"/>316 </svg>317 </div>318 <div class="ribbon">BESTSELLER</div>319 </div>320 <div class="info">321 <div class="brand">KALENJI</div>322 <div class="name">Men Running Shoes Run Cushion - Blue</div>323 <div class="price-row">324 <div class="price-tag">₹1,399</div>325 <div class="old-price">₹2,099</div>326 </div>327 </div>328 </div>329 330 <!-- Card 5 -->331 <div class="card">332 <div class="img-box">333 [IMG: Teal Running Shoes]334 <div class="chip">335 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 17l-5.5 3 1.5-6-4.5-4 6-.5L12 3l2.5 6 6 .5-4.5 4 1.5 6z" fill="#f5b301"/></svg>336 <span>4.3</span>337 </div>338 <div class="wishlist">339 <svg width="30" height="30" viewBox="0 0 24 24">340 <path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" fill="none" stroke="#5f6a77" stroke-width="1.8"/>341 </svg>342 </div>343 <div class="ribbon">BESTSELLER</div>344 </div>345 <div class="info">346 <div class="brand">KALENJI</div>347 <div class="name">Men Running Shoes - Blue/Teal</div>348 <div class="price-row">349 <div class="price-tag">₹1,999</div>350 <div class="old-price">₹2,499</div>351 </div>352 </div>353 </div>354 355 <!-- Card 6 -->356 <div class="card">357 <div class="img-box">358 [IMG: Black Shoe with Yellow Sole]359 <div class="chip">360 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 17l-5.5 3 1.5-6-4.5-4 6-.5L12 3l2.5 6 6 .5-4.5 4 1.5 6z" fill="#f5b301"/></svg>361 <span>4.4</span>362 </div>363 <div class="wishlist">364 <svg width="30" height="30" viewBox="0 0 24 24">365 <path d="M12 20s-7-4.3-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.7-7 9-7 9z" fill="none" stroke="#5f6a77" stroke-width="1.8"/>366 </svg>367 </div>368 <div class="ribbon">BESTSELLER</div>369 </div>370 <div class="info">371 <div class="brand">KALENJI</div>372 <div class="name">Men Running Shoes - Black with Yellow Cushion</div>373 <div class="price-row">374 <div class="price-tag">₹2,499</div>375 <div class="old-price">₹2,999</div>376 </div>377 </div>378 </div>379 380 </div>381 </div>382 383 <!-- Bottom bar -->384 <div class="bottom-bar">385 <div class="bottom-item">386 <svg width="40" height="40" viewBox="0 0 24 24">387 <path d="M12 3c3 0 5 2.4 5 6 0 3.2-3 7.5-5 9.5-2-2-5-6.3-5-9.5 0-3.6 2-6 5-6z" fill="none" stroke="#222" stroke-width="1.8"/>388 </svg>389 <span>GENDER</span>390 </div>391 <div class="bottom-item">392 <span class="red-dot"></span>393 <svg width="40" height="40" viewBox="0 0 24 24">394 <path d="M8 4l-3 4h6L8 4zm8 16l3-4h-6l3 4zM7 13h10" stroke="#222" stroke-width="1.8" fill="none" stroke-linecap="round"/>395 </svg>396 <span>SORT</span>397 </div>398 <div class="bottom-item">399 <svg width="40" height="40" viewBox="0 0 24 24">400 <path d="M4 6h16M7 12h10M10 18h4" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>401 </svg>402 <span>FILTER</span>403 </div>404 </div>405 406</div>407</body>408</html>