GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Sports Shoes Listing - Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #F7F7F7;12 color: #222;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 100px; background: #EDEDED; color: #555;19 display: flex; align-items: center; padding: 0 28px;20 font-size: 30px; letter-spacing: 0.5px;21 }22 .status-bar .right { margin-left: auto; display: flex; align-items: center; gap: 22px; }23 24 /* Header with search/title */25 .header {26 position: absolute; top: 100px; left: 0; right: 0;27 height: 120px; background: #FFFFFF;28 display: flex; align-items: center;29 padding: 0 24px; box-shadow: 0 1px 0 rgba(0,0,0,0.06);30 }31 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }32 .header-title {33 font-size: 44px; font-weight: 600; color: #1b1b1b; margin-left: 8px;34 flex: 1;35 }36 .header-actions { display: flex; align-items: center; gap: 22px; }37 38 /* Sort/Filter */39 .sort-filter {40 position: absolute; top: 220px; left: 0; right: 0;41 height: 112px; background: #FFFFFF;42 display: flex; align-items: center; padding: 0 28px; gap: 36px;43 box-shadow: 0 1px 0 rgba(0,0,0,0.06);44 }45 .chip {46 display: flex; align-items: center; gap: 12px;47 font-size: 36px; font-weight: 600; color: #222;48 }49 .badge {50 background: #E53935; color: #fff; font-size: 28px; line-height: 28px;51 border-radius: 20px; padding: 6px 10px; margin-left: -12px;52 }53 54 /* Promo banner */55 .promo {56 position: absolute; top: 332px; left: 0; right: 0;57 height: 180px; background: linear-gradient(90deg, #6A35FF, #7C4DFF);58 color: #fff; display: flex; align-items: center; justify-content: space-between;59 padding: 0 28px;60 }61 .promo .left { font-size: 42px; font-weight: 700; }62 .promo .right {63 background: rgba(255,255,255,0.18);64 padding: 14px 22px; border-radius: 16px; font-size: 38px; font-weight: 700;65 display: flex; align-items: center; gap: 16px;66 }67 68 /* Product grid area */69 .content {70 position: absolute; top: 512px; left: 0; right: 0; bottom: 180px;71 overflow: hidden; padding: 20px 16px;72 }73 .grid {74 display: flex; flex-wrap: wrap; gap: 24px;75 padding-bottom: 20px;76 justify-content: space-between;77 }78 .card {79 width: 516px; background: #fff; border-radius: 12px;80 box-shadow: 0 1px 0 rgba(0,0,0,0.06);81 overflow: hidden; position: relative;82 }83 .img {84 width: 100%; height: 516px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;85 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; text-align: center; padding: 10px;86 }87 .favorite {88 position: absolute; top: 20px; right: 20px;89 width: 78px; height: 78px; background: rgba(255,255,255,0.92);90 border-radius: 40px; display: flex; align-items: center; justify-content: center;91 border: 1px solid #DADADA;92 }93 .card-body { padding: 18px 18px 22px; }94 .title {95 font-size: 34px; color: #111; font-weight: 700; line-height: 1.2; height: 86px;96 }97 .price-row {98 margin-top: 8px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;99 }100 .price { font-size: 42px; font-weight: 800; color: #111; }101 .strike { font-size: 32px; color: #757575; text-decoration: line-through; }102 .off { font-size: 34px; color: #1B5E20; font-weight: 700; }103 .coupon {104 display: inline-block; margin-top: 12px; padding: 8px 14px;105 background: #E8F5E9; color: #1B5E20; border-radius: 12px; font-size: 30px; font-weight: 700;106 }107 .rating {108 margin-top: 14px; color: #2E7D32; font-size: 32px; display: flex; align-items: center; gap: 10px;109 }110 .rating .stars { letter-spacing: 2px; }111 .rating .count { color: #666; font-weight: 600; }112 113 /* Bottom navigation */114 .bottom-nav {115 position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: #FFFFFF;116 display: flex; border-top: 1px solid #E0E0E0;117 }118 .nav-item {119 flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;120 gap: 12px; color: #333; font-size: 30px; font-weight: 700;121 }122 .nav-item.active { color: #6A35FF; }123 .active-indicator {124 position: absolute; bottom: 0; height: 10px; width: 20%; background: #6A35FF; left: 20%;125 border-radius: 10px 10px 0 0;126 }127 128 /* Small helpers for icons */129 svg { width: 48px; height: 48px; }130 .icon-large svg { width: 56px; height: 56px; }131</style>132</head>133<body>134<div id="render-target">135 136 <!-- Status Bar -->137 <div class="status-bar">138 <div>2:28</div>139 <div class="right">140 <div>•</div>141 <!-- simple signal icon -->142 <svg viewBox="0 0 24 24"><rect x="2" y="14" width="3" height="8" fill="#666"/><rect x="7" y="10" width="3" height="12" fill="#666"/><rect x="12" y="6" width="3" height="16" fill="#666"/><rect x="17" y="2" width="3" height="20" fill="#666"/></svg>143 <!-- wifi -->144 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#666" stroke-width="2" fill="none"/><path d="M5 12c3-3 11-3 14 0" stroke="#666" stroke-width="2" fill="none"/><path d="M9 16c1-1 5-1 6 0" stroke="#666" stroke-width="2" fill="none"/><circle cx="12" cy="20" r="2" fill="#666"/></svg>145 <!-- battery -->146 <svg viewBox="0 0 30 18"><rect x="1" y="3" width="24" height="12" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"/><rect x="3" y="5" width="18" height="8" fill="#666"/><rect x="26" y="7" width="3" height="6" fill="#666"/></svg>147 <span>70%</span>148 </div>149 </div>150 151 <!-- Header -->152 <div class="header">153 <div class="icon-btn">154 <!-- back arrow -->155 <svg viewBox="0 0 24 24"><path d="M15 4L7 12l8 8" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>156 </div>157 <div class="header-title">sports shoes for men</div>158 <div class="header-actions">159 <!-- search icon -->160 <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#222" stroke-width="2" fill="none"/><path d="M16 16l6 6" stroke="#222" stroke-width="2"/></svg></div>161 <!-- mic icon -->162 <div class="icon-btn"><svg viewBox="0 0 24 24"><rect x="9" y="4" width="6" height="12" rx="3" fill="#222"/><path d="M5 12c0 4 3 7 7 7s7-3 7-7" stroke="#222" stroke-width="2" fill="none"/><path d="M12 19v3" stroke="#222" stroke-width="2"/></svg></div>163 <!-- heart -->164 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 21s-8-5-10-9a6 6 0 0 1 10-6 6 6 0 0 1 10 6c-2 4-10 9-10 9z" fill="none" stroke="#222" stroke-width="2"/></svg></div>165 <!-- cart -->166 <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M3 3h3l2 12h10l2-8H7" stroke="#222" stroke-width="2" fill="none"/><circle cx="10" cy="20" r="2" fill="#222"/><circle cx="18" cy="20" r="2" fill="#222"/></svg></div>167 </div>168 </div>169 170 <!-- Sort / Filter -->171 <div class="sort-filter">172 <div class="chip">173 <!-- sort icon -->174 <svg viewBox="0 0 24 24"><path d="M3 6h10M3 12h7M3 18h4" stroke="#222" stroke-width="2"/><path d="M19 5v14M19 5l-3 3M19 5l3 3" stroke="#222" stroke-width="2" fill="none"/></svg>175 <span>Sort</span>176 </div>177 <div class="chip" style="margin-left:auto;">178 <!-- filter icon -->179 <svg viewBox="0 0 24 24"><path d="M3 5h18l-7 8v6l-4-2v-4z" stroke="#222" stroke-width="2" fill="none"/></svg>180 <span>Filter</span>181 <span class="badge">3</span>182 </div>183 </div>184 185 <!-- Promo -->186 <div class="promo">187 <div class="left">Ye Hai Best Value Ka Badge</div>188 <div class="right">189 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="6" stroke="#fff" stroke-width="2" fill="none"/><path d="M7 14l-2 8 7-4 7 4-2-8" stroke="#fff" stroke-width="2" fill="none"/></svg>190 <span>Budget</span>191 </div>192 </div>193 194 <!-- Content grid -->195 <div class="content">196 <div class="grid">197 198 <!-- Card 1 -->199 <div class="card">200 <div class="img">[IMG: Navy Slip-on Running Shoes]</div>201 <div class="favorite">202 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5-10-9a6 6 0 0 1 10-6 6 6 0 0 1 10 6c-2 4-10 9-10 9z" fill="none" stroke="#777" stroke-width="2"/></svg>203 </div>204 <div class="card-body">205 <div class="title">ROCKEE Running Shoes For Me...</div>206 <div class="price-row">207 <span class="strike">1,399</span>208 <span class="price">₹1,199</span>209 <span class="off">14% off</span>210 </div>211 <div class="coupon">₹1,164 with 1 coupon</div>212 <div class="rating">213 <span class="stars">★ ★ ★ ★ ☆</span>214 <span class="count">(58)</span>215 </div>216 </div>217 </div>218 219 <!-- Card 2 -->220 <div class="card">221 <div class="img">[IMG: Grey Mesh Running Shoe with Blue Sole]</div>222 <div class="favorite" style="right: 20px;">223 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5-10-9a6 6 0 0 1 10-6 6 6 0 0 1 10 6c-2 4-10 9-10 9z" fill="none" stroke="#777" stroke-width="2"/></svg>224 </div>225 <div class="card-body">226 <div class="title">CAMPUS TOLL Running Shoe...</div>227 <div class="price-row">228 <span class="strike">1,699</span>229 <span class="price">₹1,529</span>230 <span class="off">10% off</span>231 </div>232 <div class="coupon">₹1,494 with 1 coupon</div>233 <div class="rating">234 <span class="stars">★ ★ ★ ★ ☆</span>235 <span class="count">(93)</span>236 </div>237 </div>238 </div>239 240 <!-- Card 3 -->241 <div class="card">242 <div class="img">[IMG: Grey-Orange Running Shoe on Blocks]</div>243 <div class="favorite">244 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5-10-9a6 6 0 0 1 10-6 6 6 0 0 1 10 6c-2 4-10 9-10 9z" fill="none" stroke="#777" stroke-width="2"/></svg>245 </div>246 <div class="card-body">247 <div class="title">ROCKEE Light Runner Grey / Orange</div>248 <div class="price-row">249 <span class="strike">1,499</span>250 <span class="price">₹1,249</span>251 <span class="off">17% off</span>252 </div>253 <div class="coupon">₹1,214 with 1 coupon</div>254 <div class="rating">255 <span class="stars">★ ★ ★ ★ ★</span>256 <span class="count">(120)</span>257 </div>258 </div>259 </div>260 261 <!-- Card 4 -->262 <div class="card">263 <div class="img">[IMG: Black Slip-on Walking Sneakers]</div>264 <div class="favorite">265 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5-10-9a6 6 0 0 1 10-6 6 6 0 0 1 10 6c-2 4-10 9-10 9z" fill="none" stroke="#777" stroke-width="2"/></svg>266 </div>267 <div class="card-body">268 <div class="title">CAMPUS Easy Wear Black Sneakers</div>269 <div class="price-row">270 <span class="strike">1,799</span>271 <span class="price">₹1,399</span>272 <span class="off">22% off</span>273 </div>274 <div class="coupon">₹1,349 with 1 coupon</div>275 <div class="rating">276 <span class="stars">★ ★ ★ ★ ☆</span>277 <span class="count">(76)</span>278 </div>279 </div>280 </div>281 282 </div>283 </div>284 285 <!-- Bottom Navigation -->286 <div class="bottom-nav">287 <div class="nav-item">288 <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v10H3z" stroke="#333" stroke-width="2" fill="none"/></svg>289 <div>Home</div>290 </div>291 <div class="nav-item active">292 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#6A35FF" stroke-width="2" fill="none"/><path d="M16 16l6 6" stroke="#6A35FF" stroke-width="2"/></svg>293 <div>Search</div>294 </div>295 <div class="nav-item">296 <svg viewBox="0 0 24 24"><path d="M3 4h8v8H3zM13 4h8v8h-8zM3 14h8v8H3zM13 14h8v8h-8z" stroke="#333" stroke-width="2" fill="none"/></svg>297 <div>Categories</div>298 </div>299 <div class="nav-item">300 <svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="4" stroke="#333" stroke-width="2" fill="none"/><path d="M4 22c0-4 4-7 8-7s8 3 8 7" stroke="#333" stroke-width="2" fill="none"/></svg>301 <div>Account</div>302 </div>303 <div class="nav-item">304 <svg viewBox="0 0 24 24"><path d="M3 3h3l2 12h10l2-8H7" stroke="#333" stroke-width="2" fill="none"/><circle cx="10" cy="20" r="2" fill="#333"/><circle cx="18" cy="20" r="2" fill="#333"/></svg>305 <div>Cart</div>306 </div>307 <div class="active-indicator"></div>308 </div>309 310</div>311</body>312</html>