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>Shoes Listing - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1c1c1c; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top gradient header */18 .header {19 width: 100%;20 height: 330px;21 background: linear-gradient(180deg, #7dd5cc 0%, #b9e6c7 100%);22 position: relative;23 padding: 28px 24px 0;24 box-sizing: border-box;25 }26 .statusbar {27 font-size: 28px;28 color: #1f2a2e;29 opacity: 0.85;30 display: flex;31 align-items: center;32 justify-content: space-between;33 padding-right: 6px;34 height: 44px;35 }36 .search-row {37 margin-top: 16px;38 display: flex;39 align-items: center;40 gap: 16px;41 }42 .back-btn {43 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;44 }45 .search-field {46 flex: 1;47 background: #ffffff;48 border-radius: 24px;49 box-shadow: 0 2px 4px rgba(0,0,0,0.06);50 height: 82px;51 display: flex;52 align-items: center;53 padding: 0 18px;54 box-sizing: border-box;55 }56 .search-field svg { width: 36px; height: 36px; fill: #616161; }57 .search-input {58 flex: 1;59 margin-left: 12px;60 font-size: 34px;61 color: #2e2e2e;62 }63 .scan-btn {64 width: 60px; height: 60px; border-radius: 16px; background: #f5f7f9; display: flex; align-items: center; justify-content: center; border: 1px solid #d3d7da;65 }66 67 /* Filter chips row */68 .chips {69 position: absolute;70 left: 0;71 right: 0;72 bottom: 0;73 padding: 14px 16px;74 background: #ffffff;75 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;76 display: flex;77 gap: 12px;78 overflow: hidden;79 }80 .chip {81 display: inline-flex;82 align-items: center;83 gap: 10px;84 padding: 14px 18px;85 font-size: 28px;86 background: #f3f5f7;87 border: 1px solid #e1e5e8;88 color: #2f2f2f;89 border-radius: 24px;90 white-space: nowrap;91 }92 .toggle {93 width: 70px; height: 36px; border-radius: 18px; background: #e8ebee; position: relative; border: 1px solid #cfd6db;94 }95 .toggle::after {96 content: "";97 position: absolute; top: 2px; left: 2px; width: 30px; height: 30px; border-radius: 50%; background: #ffffff; border: 1px solid #cfd6db;98 }99 .chip .down { margin-left: 6px; }100 101 /* Content */102 .content {103 position: absolute;104 top: 330px;105 bottom: 140px;106 left: 0;107 right: 0;108 overflow-y: auto;109 background: #f6f7f8;110 }111 112 .products {113 padding: 18px 24px 140px;114 box-sizing: border-box;115 display: grid;116 grid-template-columns: 1fr 1fr;117 gap: 24px;118 }119 .card {120 background: #ffffff;121 border: 1px solid #e6e6e6;122 border-radius: 18px;123 padding: 18px;124 box-sizing: border-box;125 }126 .title {127 font-size: 32px;128 font-weight: 700;129 line-height: 1.25;130 color: #222;131 margin-bottom: 8px;132 }133 .subline { font-size: 26px; color: #616161; }134 .blue { color: #1384cf; }135 .rating {136 display: inline-flex;137 align-items: center;138 gap: 6px;139 margin: 6px 0 6px;140 }141 .rating svg { width: 26px; height: 26px; }142 .deal {143 display: inline-block;144 background: #9f3b17;145 color: #fff;146 padding: 10px 14px;147 font-size: 26px;148 border-radius: 6px;149 margin: 8px 0;150 }151 .price-row {152 display: flex;153 align-items: baseline;154 gap: 10px;155 margin-top: 8px;156 margin-bottom: 4px;157 }158 .price {159 font-size: 44px;160 font-weight: 700;161 }162 .mrp {163 font-size: 26px; color: #6f6f6f;164 }165 .mrp s { color: #8b8b8b; }166 .prime {167 display: inline-block; font-size: 28px; color: #17a2e5; font-weight: 700; margin: 6px 0;168 }169 .small-grey { font-size: 24px; color: #6f6f6f; }170 171 /* Image placeholder */172 .img-box {173 width: 100%;174 height: 340px;175 background: #E0E0E0;176 border: 1px solid #BDBDBD;177 border-radius: 14px;178 color: #757575;179 display: flex; align-items: center; justify-content: center;180 margin-bottom: 8px;181 }182 183 .color-dots { display: flex; gap: 12px; align-items: center; margin: 10px 0 8px; }184 .dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #c7c7c7; }185 .dot.dark { background: #1b1b1b; }186 .dot.grey { background: #6f6f7a; }187 .dot.purple { background: #3b3f6b; }188 .dot.pink { background: #f39; opacity: 0.4; }189 .brand { font-size: 30px; font-weight: 700; margin-top: 6px; }190 .product-name { font-size: 28px; color: #333; margin-top: 2px; }191 192 /* Bottom navigation */193 .bottom-nav {194 position: absolute;195 left: 0; right: 0; bottom: 0;196 height: 140px;197 background: #ffffff;198 border-top: 1px solid #e3e3e3;199 display: flex; align-items: center; justify-content: space-around;200 }201 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 20%; }202 .nav-item svg { width: 46px; height: 46px; fill: #5b6770; }203 .nav-item span { font-size: 26px; color: #5b6770; }204 .nav-item.active svg, .nav-item.active span { color: #00a19a; fill: #00a19a; }205 206 .gesture {207 position: absolute;208 width: 300px; height: 8px; border-radius: 4px; background: #cad0d6;209 bottom: 8px; left: 50%; transform: translateX(-50%);210 }211 .muted { color: #6f6f6f; }212 .notify { color: #1384cf; font-weight: 600; margin-left: 10px; }213</style>214</head>215<body>216<div id="render-target">217 218 <div class="header">219 <div class="statusbar">220 <div>2:14</div>221 <div class="muted">• • •</div>222 </div>223 224 <div class="search-row">225 <div class="back-btn" aria-label="Back">226 <svg viewBox="0 0 24 24"><path d="M15.5 19.5L8 12l7.5-7.5" stroke="#263238" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>227 </div>228 <div class="search-field">229 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.3 14l4.4 4.4 1.4-1.4-4.4-4.4A8 8 0 0010 2zm0 2a6 6 0 110 12A6 6 0 0110 4z"/></svg>230 <div class="search-input">women's running shoes</div>231 <div class="scan-btn" aria-label="Scan">232 <svg viewBox="0 0 24 24"><path d="M4 4h6v2H6v4H4V4zm10 0h6v6h-2V6h-4V4zM4 14h2v4h4v2H4v-6zm14 0h2v6h-6v-2h4v-4z"/></svg>233 </div>234 </div>235 </div>236 237 <div class="chips">238 <div class="chip">239 <span style="color:#0ea5e9;font-weight:700">prime</span>240 <div class="toggle"></div>241 </div>242 <div class="chip">243 <span style="color:#ff8a00; display:inline-flex; align-items:center;">244 <svg viewBox="0 0 24 24" width="22" height="22" style="fill:#ff8a00;margin-right:6px;"><path d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>245 ★★★★246 </span>247 <span>and Up</span>248 </div>249 <div class="chip">Nike</div>250 <div class="chip">Adidas</div>251 <div class="chip">Filters252 <svg class="down" viewBox="0 0 24 24" width="22" height="22"><path d="M6 9l6 6 6-6" fill="none" stroke="#4c4c4c" stroke-width="2"/></svg>253 </div>254 </div>255 </div>256 257 <div class="content">258 <div class="products">259 260 <!-- Left info card -->261 <div class="card">262 <div class="title">DOCTOR EXTRA SOFT Memory Foam Women's Shoes for Walking Gym...</div>263 <div class="rating">264 <span class="blue" style="font-weight:700;">4.1</span>265 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>266 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>267 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>268 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>269 <svg viewBox="0 0 24 24"><path fill="#e0e0e0" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>270 <span class="subline">(3,412)</span>271 </div>272 <div class="subline">50+ bought in past month</div>273 <div class="deal">Deal of the Day</div>274 <div class="price-row">275 <div class="price">₹699</div>276 <div class="mrp">M.R.P.: <s>₹999</s> (30% off)</div>277 </div>278 <div class="prime">prime</div>279 <div class="small-grey">FREE Delivery by Amazon</div>280 </div>281 282 <!-- Right info card -->283 <div class="card">284 <div class="title">Amazon Brand - Symactive Womens Bounce Running Shoe</div>285 <div class="rating">286 <span class="blue" style="font-weight:700;">3.9</span>287 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>288 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>289 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>290 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>291 <svg viewBox="0 0 24 24"><path fill="#e0e0e0" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>292 <span class="subline">(503)</span>293 </div>294 <div>295 <span class="deal">Upcoming deal</span>296 <span class="notify">Notify me</span>297 </div>298 <div class="price-row">299 <div class="price">₹916</div>300 <div class="mrp">M.R.P.: <s>₹3,299</s> (72% off)</div>301 </div>302 <div class="prime">prime</div>303 <div class="small-grey">FREE Delivery by Amazon</div>304 </div>305 306 <!-- Image card left -->307 <div class="card">308 <div class="img-box">[IMG: Black Women's Running Shoe]</div>309 310 <div class="color-dots">311 <div class="dot dark"></div>312 <div class="dot"></div>313 <div class="dot purple"></div>314 </div>315 316 <div class="brand">Campus</div>317 <div class="product-name">Women's Running Shoes</div>318 <div class="rating">319 <span class="blue" style="font-weight:700;">4.1</span>320 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>321 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>322 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>323 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>324 <svg viewBox="0 0 24 24"><path fill="#e0e0e0" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>325 <span class="subline">(2,151)</span>326 </div>327 <div class="subline">700+ bought in past month</div>328 <div class="price-row">329 <div class="price">₹719</div>330 <div class="mrp">M.R.P.: <s>₹799</s> (10% off)</div>331 </div>332 <div class="prime">prime</div>333 <div class="small-grey">FREE Delivery by Amazon</div>334 </div>335 336 <!-- Image card right -->337 <div class="card">338 <div class="img-box">[IMG: Grey & Pink Women's Running Shoe]</div>339 340 <div class="color-dots">341 <div class="dot"></div>342 <div class="dot dark"></div>343 <div class="dot grey"></div>344 <div class="small-grey">+4</div>345 </div>346 347 <div class="brand">ASIAN</div>348 <div class="product-name">Women's Running Shoe</div>349 <div class="rating">350 <span class="blue" style="font-weight:700;">3.9</span>351 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>352 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>353 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>354 <svg viewBox="0 0 24 24"><path fill="#ff8a00" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>355 <svg viewBox="0 0 24 24"><path fill="#e0e0e0" d="M12 2l2.5 6.9L22 9l-5 4.3 1.6 6.7L12 16l-6.6 4 1.6-6.7L2 9l7.5-.1L12 2z"/></svg>356 <span class="subline">(9,920)</span>357 </div>358 <div class="subline">200+ bought in past month</div>359 <div class="deal">Deal of the Day</div>360 <div class="price-row">361 <div class="price">₹649</div>362 <div class="mrp">M.R.P.: <s>₹799</s> (19% off)</div>363 </div>364 <div class="prime">prime</div>365 <div class="small-grey">FREE Delivery by Amazon</div>366 </div>367 368 </div>369 </div>370 371 <div class="bottom-nav">372 <div class="nav-item active">373 <svg viewBox="0 0 24 24"><path d="M3 10.5l9-7 9 7V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1v-10.5z"/></svg>374 <span>Home</span>375 </div>376 <div class="nav-item">377 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 6v2h16v-2c0-4-4-6-8-6z"/></svg>378 <span>You</span>379 </div>380 <div class="nav-item">381 <svg viewBox="0 0 24 24"><path d="M3 7h18v2H3V7zm3 5h12v2H6v-2zm-3 5h18v2H3v-2z"/></svg>382 <span>More</span>383 </div>384 <div class="nav-item">385 <svg viewBox="0 0 24 24"><path d="M7 4h-2l-1 2H2v2h2l3 9h11l3-9H7.6L7 6zm3 15a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 .001 4.001A2 2 0 0 0 18 19z"/></svg>386 <span>Cart</span>387 </div>388 <div class="nav-item">389 <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/></svg>390 <span>Menu</span>391 </div>392 <div class="gesture"></div>393 </div>394 395</div>396</body>397</html>