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</title>7<style>8 body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;color:#222;}9 #render-target{10 position:relative;11 width:1080px;12 height:2400px;13 overflow:hidden;14 background:#ffffff;15 }16 /* Top bars */17 .status-bar{18 height:150px;19 background:#E5E5E5;20 color:#696969;21 font-size:36px;22 display:flex;23 align-items:center;24 padding:0 40px;25 box-sizing:border-box;26 }27 .status-left{flex:1;}28 .status-right{29 display:flex;gap:30px;align-items:center;30 }31 .app-bar{32 height:150px;33 background:#fff;34 border-bottom:1px solid #E0E0E0;35 display:flex;align-items:center;36 padding:0 36px;37 box-sizing:border-box;38 }39 .app-title{40 font-size:46px;41 font-weight:600;42 margin-left:20px;43 }44 .app-actions{margin-left:auto;display:flex;gap:44px;align-items:center;}45 /* Grid */46 .grid{47 position:absolute;left:0;right:0;48 top:300px; /* beneath top bars */49 bottom:200px; /* above bottom bar */50 overflow:hidden;51 }52 .cards{53 display:flex; flex-wrap:wrap;54 width:100%;55 border-top:1px solid #E5E5E5;56 border-left:1px solid #E5E5E5;57 }58 .card{59 width:540px;60 height:640px;61 background:#fff;62 box-sizing:border-box;63 border-right:1px solid #E5E5E5;64 border-bottom:1px solid #E5E5E5;65 padding:26px;66 }67 .img{68 width:100%;69 height:360px;70 background:#E0E0E0;71 border:1px solid #BDBDBD;72 display:flex;justify-content:center;align-items:center;73 color:#757575;font-size:34px;74 }75 .row{display:flex;align-items:center;justify-content:space-between;margin-top:18px;}76 .chip{77 display:inline-flex;align-items:center;gap:10px;78 background:#fff;border:1px solid #E0E0E0;border-radius:8px;79 padding:6px 12px;font-size:28px;color:#444;80 }81 .fav{82 width:56px;height:56px;border-radius:50%;83 border:2px solid #C8D7E3;display:flex;align-items:center;justify-content:center;84 }85 .brand{margin-top:18px;font-weight:800;letter-spacing:1px;font-size:34px;}86 .name{margin-top:6px;color:#555;font-size:30px;line-height:40px;max-height:82px;overflow:hidden;}87 .price-row{display:flex;align-items:center;gap:18px;margin-top:16px;}88 .price{89 background:#F1D857;color:#111;90 font-weight:800;font-size:34px;padding:8px 14px;border-radius:6px;91 }92 .mrp{color:#8c8c8c;text-decoration:line-through;font-size:30px;}93 .swatches{display:flex;gap:10px;align-items:center;}94 .sw{width:30px;height:30px;border-radius:4px;border:1px solid #bbb;}95 .sw.b{background:#1c1c1c;}96 .sw.n{background:#223349;}97 .sw.g{background:#6a6a6a;}98 .plus1{font-size:26px;color:#444;margin-left:6px;}99 /* Bottom toolbar */100 .bottom-bar{101 position:absolute;left:0;right:0;bottom:60px;height:160px;background:#fff;102 border-top:1px solid #E5E5E5;display:flex;align-items:center;justify-content:space-around;103 }104 .bt-item{width:33.33%;height:100%;display:flex;align-items:center;justify-content:center;gap:18px;font-size:34px;color:#444;position:relative;}105 .divider{106 position:absolute;right:0;top:25px;bottom:25px;width:1px;background:#E5E5E5;107 }108 .dot{position:absolute;top:32px;left:42%;width:16px;height:16px;background:#E53935;border-radius:50%;}109 /* Gesture bar */110 .gesture{111 position:absolute;bottom:18px;left:50%;transform:translateX(-50%);112 width:300px;height:12px;background:#000;border-radius:8px;opacity:0.8;113 }114 /* Icons */115 .icon{width:44px;height:44px;}116 .small-icon{width:28px;height:28px;}117</style>118</head>119<body>120<div id="render-target">121 <!-- Status bar -->122 <div class="status-bar">123 <div class="status-left">11:39</div>124 <div class="status-right">125 <!-- simple placeholders for status icons -->126 <svg class="small-icon" viewBox="0 0 24 24"><rect x="3" y="7" width="14" height="10" rx="2" fill="#9e9e9e"/><rect x="18" y="10" width="3" height="4" rx="1" fill="#9e9e9e"/></svg>127 <svg class="small-icon" viewBox="0 0 24 24"><path d="M4 7h16v10H4z" fill="#c2c2c2"/></svg>128 <svg class="small-icon" viewBox="0 0 24 24"><path d="M3 6h18v12H3z" fill="#c2c2c2"/><path d="M3 6l9 7 9-7" fill="#b0b0b0"/></svg>129 <svg class="small-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#c2c2c2"/></svg>130 <svg class="small-icon" viewBox="0 0 24 24"><path d="M6 18h12" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round"/></svg>131 <svg class="small-icon" viewBox="0 0 24 24"><path d="M17 7a5 5 0 015 5" stroke="#9e9e9e" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M2 17h12V7H2z" fill="#bdbdbd"/></svg>132 <svg class="small-icon" viewBox="0 0 24 24"><path d="M7 21h10" stroke="#c2c2c2" stroke-width="3" stroke-linecap="round"/></svg>133 </div>134 </div>135 136 <!-- App bar -->137 <div class="app-bar">138 <svg class="icon" viewBox="0 0 24 24">139 <path d="M15 6l-6 6 6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>140 </svg>141 <div class="app-title">Shoes</div>142 <div class="app-actions">143 <!-- Search -->144 <svg class="icon" viewBox="0 0 24 24">145 <circle cx="11" cy="11" r="6" stroke="#222" stroke-width="2" fill="none"/>146 <path d="M16.5 16.5L21 21" stroke="#222" stroke-width="2" stroke-linecap="round"/>147 </svg>148 <!-- Heart -->149 <svg class="icon" viewBox="0 0 24 24">150 <path d="M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z" stroke="#222" stroke-width="2" fill="none" stroke-linejoin="round"/>151 </svg>152 <!-- Cart -->153 <svg class="icon" viewBox="0 0 24 24">154 <path d="M3 6h2l2 10h11l2-7H7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>155 <circle cx="10" cy="20" r="1.6" fill="#222"/>156 <circle cx="17" cy="20" r="1.6" fill="#222"/>157 </svg>158 </div>159 </div>160 161 <!-- Product grid -->162 <div class="grid">163 <div class="cards">164 <!-- Card 1 -->165 <div class="card">166 <div class="img">[IMG: Grey Running Shoes]</div>167 <div class="row">168 <div class="chip">169 <svg class="small-icon" viewBox="0 0 24 24">170 <path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.6L12 16l-4.9 2.3.9-5.6-4-3.9 5.5-.8L12 3z" fill="#F6B343"/>171 </svg>172 <span>4.4</span>173 </div>174 <div class="fav">175 <svg class="small-icon" viewBox="0 0 24 24">176 <path d="M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z" stroke="#6ea2c4" stroke-width="2" fill="none"/>177 </svg>178 </div>179 </div>180 <div class="brand">KALENJI</div>181 <div class="name">Men Running Shoes Run 100 - Grey</div>182 <div class="price-row">183 <div class="price">₹899</div>184 <div class="mrp">₹1,199</div>185 </div>186 </div>187 188 <!-- Card 2 -->189 <div class="card">190 <div class="img">[IMG: Navy Jog Flow Shoes]</div>191 <div class="row">192 <div class="chip">193 <svg class="small-icon" viewBox="0 0 24 24">194 <path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.6L12 16l-4.9 2.3.9-5.6-4-3.9 5.5-.8L12 3z" fill="#F6B343"/>195 </svg>196 <span>4.5</span>197 </div>198 <div class="swatches">199 <div class="sw g"></div>200 <div class="sw n"></div>201 <div class="sw b"></div>202 <span class="plus1">+1</span>203 </div>204 </div>205 <div class="brand">KALENJI</div>206 <div class="name">Men's Running Shoes Jog flow 100.1 Navy ...</div>207 <div class="price-row">208 <div class="price">₹1,799</div>209 <div class="mrp">₹2,999</div>210 </div>211 </div>212 213 <!-- Card 3 -->214 <div class="card">215 <div class="img">[IMG: Grey Hiking Shoes]</div>216 <div class="row">217 <div class="chip">218 <svg class="small-icon" viewBox="0 0 24 24">219 <path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.6L12 16l-4.9 2.3.9-5.6-4-3.9 5.5-.8L12 3z" fill="#F6B343"/>220 </svg>221 <span>4.3</span>222 </div>223 <div class="fav">224 <svg class="small-icon" viewBox="0 0 24 24">225 <path d="M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z" stroke="#6ea2c4" stroke-width="2" fill="none"/>226 </svg>227 </div>228 </div>229 <div class="brand">QUECHUA</div>230 <div class="name">Men's Hiking boots - NH100</div>231 <div class="price-row">232 <div class="price">₹999</div>233 <div class="mrp">₹1,699</div>234 </div>235 </div>236 237 <!-- Card 4 -->238 <div class="card">239 <div class="img">[IMG: Khaki Waterproof Hiking Shoes]</div>240 <div class="row">241 <div class="chip">242 <svg class="small-icon" viewBox="0 0 24 24">243 <path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.6L12 16l-4.9 2.3.9-5.6-4-3.9 5.5-.8L12 3z" fill="#F6B343"/>244 </svg>245 <span>4.5</span>246 </div>247 <div class="fav">248 <svg class="small-icon" viewBox="0 0 24 24">249 <rect x="5" y="5" width="14" height="14" rx="3" stroke="#222" stroke-width="2" fill="none"/>250 </svg>251 </div>252 </div>253 <div class="brand">QUECHUA</div>254 <div class="name">Men Waterproof Hiking Shoes MH100 Khaki</div>255 <div class="price-row">256 <div class="price">₹4,999</div>257 <div class="mrp">₹5,599</div>258 </div>259 </div>260 261 <!-- Card 5 -->262 <div class="card">263 <div class="img">[IMG: Light Grey Mesh Sneakers]</div>264 <div class="row">265 <div class="chip">266 <svg class="small-icon" viewBox="0 0 24 24">267 <path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.6L12 16l-4.9 2.3.9-5.6-4-3.9 5.5-.8L12 3z" fill="#F6B343"/>268 </svg>269 <span>4.4</span>270 </div>271 <div class="fav">272 <svg class="small-icon" viewBox="0 0 24 24">273 <path d="M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z" stroke="#6ea2c4" stroke-width="2" fill="none"/>274 </svg>275 </div>276 </div>277 <div class="brand">KALENJI</div>278 <div class="name">Lightweight Running Shoes</div>279 <div class="price-row">280 <div class="price">₹1,299</div>281 <div class="mrp">₹1,999</div>282 </div>283 </div>284 285 <!-- Card 6 -->286 <div class="card">287 <div class="img">[IMG: Navy Fitness Shoes]</div>288 <div class="row">289 <div class="chip">290 <svg class="small-icon" viewBox="0 0 24 24">291 <path d="M12 3l2.5 5 5.5.8-4 3.9.9 5.6L12 16l-4.9 2.3.9-5.6-4-3.9 5.5-.8L12 3z" fill="#F6B343"/>292 </svg>293 <span>4.6</span>294 </div>295 <div class="fav">296 <svg class="small-icon" viewBox="0 0 24 24">297 <path d="M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z" stroke="#6ea2c4" stroke-width="2" fill="none"/>298 </svg>299 </div>300 </div>301 <div class="brand">KALENJI</div>302 <div class="name">Men Running Shoes Comfort - Navy</div>303 <div class="price-row">304 <div class="price">₹2,499</div>305 <div class="mrp">₹3,299</div>306 </div>307 </div>308 </div>309 </div>310 311 <!-- Bottom toolbar -->312 <div class="bottom-bar">313 <div class="bt-item">314 <svg class="icon" viewBox="0 0 24 24">315 <path d="M5 5h14M5 12h14M5 19h14" stroke="#444" stroke-width="2" stroke-linecap="round"/>316 </svg>317 <span>GENDER</span>318 <div class="divider"></div>319 </div>320 <div class="bt-item">321 <div class="dot"></div>322 <svg class="icon" viewBox="0 0 24 24">323 <path d="M8 5v14M16 5v14M8 5l-2 2M8 19l-2-2M16 5l2 2M16 19l2-2" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>324 </svg>325 <span>SORT</span>326 <div class="divider"></div>327 </div>328 <div class="bt-item">329 <svg class="icon" viewBox="0 0 24 24">330 <path d="M3 5h18l-7 8v6l-4-2v-4z" stroke="#444" stroke-width="2" fill="none" stroke-linejoin="round"/>331 </svg>332 <span>FILTER</span>333 </div>334 </div>335 336 <div class="gesture"></div>337</div>338</body>339</html>