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>Shopping Results - Women's Running Shoes</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; position: relative; overflow: hidden;11 background: #f7f7f7;12 }13 14 /* Top gradient header */15 .header {16 width: 100%;17 height: 240px;18 background: linear-gradient(90deg, #7ad9c9, #7ed1f0);19 position: relative;20 box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;21 }22 .status-bar {23 height: 70px; padding: 0 28px; color: #1d1d1d; font-size: 28px;24 display: flex; align-items: center; justify-content: space-between;25 opacity: 0.9;26 }27 .status-left { display: flex; align-items: center; gap: 16px; }28 .status-right { display: flex; align-items: center; gap: 18px; }29 .chip {30 border: 1px solid rgba(0,0,0,0.2); border-radius: 8px; padding: 3px 6px; font-size: 20px; opacity: 0.8;31 }32 .search-row {33 position: absolute; left: 0; right: 0; bottom: 20px;34 display: flex; align-items: center;35 padding: 0 24px;36 }37 .back-btn {38 width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;39 color: #222;40 }41 .search-box {42 flex: 1; height: 96px; background: #fff; border-radius: 28px;43 display: flex; align-items: center; padding: 0 26px; gap: 22px;44 box-shadow: 0 6px 12px rgba(0,0,0,0.15);45 }46 .search-text {47 font-size: 34px; color: #333; flex: 1;48 }49 .icon-btn {50 width: 72px; height: 72px; border-radius: 18px; background: #f3f6f8;51 display: flex; align-items: center; justify-content: center; border: 1px solid #e1e5e8;52 }53 54 /* Content area */55 .content {56 position: absolute; top: 240px; bottom: 168px; left: 0; right: 0;57 overflow-y: auto; padding: 22px 28px 220px;58 }59 60 /* Product grid */61 .grid {62 display: grid;63 grid-template-columns: 500px 500px;64 gap: 24px;65 }66 .card {67 background: #fff; border: 1px solid #e9e9e9; border-radius: 22px; overflow: hidden;68 }69 .img-wrap {70 position: relative; height: 520px; background: #E0E0E0; border-bottom: 1px solid #E5E5E5;71 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;72 }73 .img-wrap .scan {74 position: absolute; left: 18px; bottom: 18px; width: 88px; height: 88px; border-radius: 50%;75 background: #fff; border: 1px solid #cfd3d7; display: flex; align-items: center; justify-content: center;76 box-shadow: 0 4px 8px rgba(0,0,0,0.08);77 }78 .ribbon {79 position: absolute; left: 0; top: 0;80 background: #0f3c32; color: #fff; font-size: 26px; padding: 12px 18px; border-bottom-right-radius: 12px;81 }82 .ribbon span { color: #ffb74d; }83 84 .card-body { padding: 18px 22px 24px; }85 .swatches { display: flex; gap: 16px; margin-bottom: 6px; }86 .dot {87 width: 42px; height: 42px; border-radius: 50%; border: 3px solid #e1e1e1;88 }89 .brand { font-weight: 700; font-size: 30px; color: #1e1e1e; }90 .title { font-size: 30px; color: #191919; line-height: 1.25; margin-top: 4px; }91 .rating { display: flex; align-items: center; gap: 10px; margin-top: 10px; }92 .rating .score { color: #2e7cc5; font-size: 28px; }93 .stars svg { width: 26px; height: 26px; }94 .stars .filled { fill: #ff9800; }95 .stars .empty { fill: #e0e0e0; }96 .subdued { color: #6e6e6e; font-size: 26px; margin-left: 8px; }97 .price-row { display: flex; align-items: baseline; gap: 16px; margin-top: 18px; }98 .price { font-size: 48px; font-weight: 700; }99 .mrp { color: #7e7e7e; text-decoration: line-through; font-size: 28px; }100 .prime { color: #2c8be6; font-weight: 700; font-size: 28px; margin-top: 8px; }101 .delivery { font-size: 26px; color: #6f6f6f; margin-top: 4px; }102 103 /* Bottom navigation */104 .bottom-nav {105 position: absolute; left: 0; right: 0; bottom: 0; height: 168px; background: #fff; border-top: 1px solid #e6e6e6;106 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;107 }108 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #222; font-size: 26px; }109 .nav-item svg { width: 48px; height: 48px; }110 .active { color: #0bb6b3; }111 .active-bar {112 position: absolute; left: 90px; bottom: 0; width: 72px; height: 6px; background: #0bb6b3; border-radius: 3px;113 }114 115 /* Utility small icon paths share */116 .icon { fill: none; stroke: #222; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Header -->123 <div class="header">124 <div class="status-bar">125 <div class="status-left">126 <div>2:13</div>127 <div class="chip">LR</div>128 <div class="chip">▦</div>129 <div class="chip">▦</div>130 <div>•</div>131 </div>132 <div class="status-right">133 <div>▴</div>134 <div>⌁</div>135 <div>🔋</div>136 </div>137 </div>138 139 <div class="search-row">140 <div class="back-btn" aria-label="Back">141 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M15 19l-7-7 7-7" stroke="#1e1e1e" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>142 </div>143 <div class="search-box">144 <svg viewBox="0 0 24 24" width="38" height="38"><circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M20 20l-4-4" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/></svg>145 <div class="search-text">women's running shoes</div>146 <div class="icon-btn" title="Scan">147 <svg viewBox="0 0 24 24" width="28" height="28">148 <rect x="4" y="4" width="16" height="16" rx="2" ry="2" class="icon" />149 <circle cx="12" cy="12" r="3.2" stroke="#222" stroke-width="2" fill="none"/>150 </svg>151 </div>152 </div>153 </div>154 </div>155 156 <!-- Content -->157 <div class="content">158 <div class="grid">159 160 <!-- Card 1 -->161 <div class="card">162 <div class="img-wrap">163 <div class="ribbon">Amazon's <span>Choice</span></div>164 [IMG: Black Adidas women's running shoe]165 <div class="scan">166 <svg viewBox="0 0 24 24" width="34" height="34">167 <rect x="3.5" y="3.5" width="17" height="17" rx="2" ry="2" class="icon"/>168 <circle cx="12" cy="12" r="3.2" stroke="#222" stroke-width="2" fill="none"/>169 </svg>170 </div>171 </div>172 <div class="card-body">173 <div class="swatches">174 <div class="dot" style="background:#2c2c33;"></div>175 <div class="dot" style="background:#b7b2b6;"></div>176 <div class="dot" style="background:#2f3a4f;"></div>177 </div>178 <div class="brand">Adidas</div>179 <div class="title">Womens Clear Factor W Running Shoe</div>180 <div class="rating">181 <div class="score">4.1</div>182 <div class="stars">183 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>184 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>185 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>186 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>187 <svg viewBox="0 0 24 24"><path class="empty" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>188 </div>189 <div class="subdued">(930)</div>190 </div>191 <div class="subdued">300+ bought in past month</div>192 <div class="price-row">193 <div class="price">₹1,292</div>194 <div class="mrp">₹2,999</div>195 <div class="subdued">(57% off)</div>196 </div>197 <div class="prime">prime</div>198 <div class="delivery">FREE Delivery by Amazon</div>199 </div>200 </div>201 202 <!-- Card 2 -->203 <div class="card">204 <div class="img-wrap">205 [IMG: Black Campus women's running shoe with pink accent]206 <div class="scan">207 <svg viewBox="0 0 24 24" width="34" height="34">208 <rect x="3.5" y="3.5" width="17" height="17" rx="2" ry="2" class="icon"/>209 <circle cx="12" cy="12" r="3.2" stroke="#222" stroke-width="2" fill="none"/>210 </svg>211 </div>212 </div>213 <div class="card-body">214 <div class="swatches">215 <div class="dot" style="background:#1f1f25;"></div>216 <div class="dot" style="background:#2e3b48;"></div>217 <div class="dot" style="background:#4b3248;"></div>218 </div>219 <div class="brand">Campus</div>220 <div class="title">Women's Julius Running Shoes</div>221 <div class="rating">222 <div class="score">4.2</div>223 <div class="stars">224 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>225 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>226 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>227 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>228 <svg viewBox="0 0 24 24"><path class="empty" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>229 </div>230 <div class="subdued">(138)</div>231 </div>232 <div class="subdued">100+ bought in past month</div>233 <div class="price-row">234 <div class="price">₹807<span style="font-size:32px;">.29</span></div>235 <div class="mrp">₹1,399</div>236 <div class="subdued">(42% off)</div>237 </div>238 <div class="prime">prime</div>239 <div class="delivery">FREE Delivery by Amazon</div>240 </div>241 </div>242 243 <!-- Additional filler cards to extend scroll (optional for layout consistency) -->244 <div class="card">245 <div class="img-wrap">[IMG: Black/grey women's running shoe]</div>246 <div class="card-body">247 <div class="swatches">248 <div class="dot" style="background:#333;"></div>249 <div class="dot" style="background:#8f8f95;"></div>250 <div class="dot" style="background:#202a3a;"></div>251 </div>252 <div class="brand">ASIAN</div>253 <div class="title">Women's Running Shoe</div>254 <div class="rating">255 <div class="score">3.9</div>256 <div class="stars">257 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>258 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>259 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>260 <svg viewBox="0 0 24 24"><path class="empty" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>261 <svg viewBox="0 0 24 24"><path class="empty" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>262 </div>263 <div class="subdued">(9,920)</div>264 </div>265 <div class="price-row">266 <div class="price">₹649</div>267 <div class="mrp">₹799</div>268 <div class="subdued">(19% off)</div>269 </div>270 <div class="prime">prime</div>271 <div class="delivery">FREE Delivery by Amazon</div>272 </div>273 </div>274 275 <div class="card">276 <div class="img-wrap">[IMG: Black women's running shoe side view]</div>277 <div class="card-body">278 <div class="swatches">279 <div class="dot" style="background:#1c1c1c;"></div>280 <div class="dot" style="background:#434343;"></div>281 <div class="dot" style="background:#4d5475;"></div>282 </div>283 <div class="brand">Campus</div>284 <div class="title">Women's Running Shoes</div>285 <div class="rating">286 <div class="score">4.1</div>287 <div class="stars">288 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>289 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>290 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>291 <svg viewBox="0 0 24 24"><path class="filled" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>292 <svg viewBox="0 0 24 24"><path class="empty" d="M12 17.3l-6.2 3.6 1.6-6.9L2 8.9l7-0.6L12 2l3 6.3 7 .6-5.4 5.1 1.6 6.9z"/></svg>293 </div>294 <div class="subdued">(2,151)</div>295 </div>296 <div class="price-row">297 <div class="price">₹719</div>298 <div class="mrp">₹799</div>299 <div class="subdued">(10% off)</div>300 </div>301 <div class="prime">prime</div>302 <div class="delivery">FREE Delivery by Amazon</div>303 </div>304 </div>305 306 </div>307 </div>308 309 <!-- Bottom navigation -->310 <div class="bottom-nav">311 <div class="nav-item active">312 <svg viewBox="0 0 24 24">313 <path d="M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1z" fill="#0bb6b3"/>314 </svg>315 <div>Home</div>316 </div>317 <div class="nav-item">318 <svg viewBox="0 0 24 24">319 <circle cx="12" cy="8" r="4" fill="#333"/>320 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#333"/>321 </svg>322 <div>You</div>323 </div>324 <div class="nav-item">325 <svg viewBox="0 0 24 24">326 <path d="M4 13l8-4 8 4-8 4z" fill="#333"/>327 <path d="M4 9l8-4 8 4" fill="#999"/>328 </svg>329 <div>More</div>330 </div>331 <div class="nav-item">332 <svg viewBox="0 0 24 24">333 <path d="M3 6h3l2 11h9l2-8H7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>334 <circle cx="10" cy="20" r="1.6" fill="#333"/>335 <circle cx="17" cy="20" r="1.6" fill="#333"/>336 </svg>337 <div>Cart</div>338 </div>339 <div class="nav-item">340 <svg viewBox="0 0 24 24">341 <path d="M4 7h16M4 12h16M4 17h16" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>342 </svg>343 <div>Menu</div>344 </div>345 <div class="active-bar"></div>346 </div>347 348</div>349</body>350</html>