GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Sports shoes Listing</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; position:relative; overflow:hidden;10 background:#f7f7f9; border-radius:0;11 color:#222;12 }13 14 /* Top system status bar */15 .status-bar{16 height:80px; background:#efefef; display:flex; align-items:center; justify-content:space-between;17 padding:0 28px; font-size:34px; color:#333;18 border-bottom:1px solid #e2e2e2;19 }20 .status-icons{ display:flex; gap:18px; align-items:center; }21 .dot{ width:16px; height:16px; background:#555; border-radius:50%; opacity:.8; }22 .signal{ width:26px; height:26px; border:3px solid #555; border-radius:3px; position:relative; }23 .signal:before{ content:""; position:absolute; bottom:3px; left:3px; width:6px; height:14px; background:#555; }24 .battery{ width:36px; height:18px; border:3px solid #555; border-radius:3px; position:relative; }25 .battery:after{ content:""; position:absolute; right:-8px; top:3px; width:6px; height:10px; background:#555; border-radius:2px; }26 27 /* App bar */28 .app-bar{29 height:120px; background:#fff; display:flex; align-items:center; justify-content:space-between;30 padding:0 24px; border-bottom:1px solid #e7e7e7;31 }32 .app-left{ display:flex; align-items:center; gap:18px; }33 .title{ font-size:46px; font-weight:700; }34 .icon-btn{ width:70px; height:70px; display:flex; align-items:center; justify-content:center; }35 .icon{ width:42px; height:42px; fill:#222; }36 .icon.outline{ fill:none; stroke:#222; stroke-width:3px; }37 38 /* Sort / Filter row */39 .controls{40 height:110px; background:#fff; display:flex; align-items:center; gap:16px; padding:0 24px; border-bottom:1px solid #e9e9e9;41 }42 .control-pill{43 flex:1; height:78px; border:1px solid #e1e1e1; border-radius:16px; display:flex; align-items:center; justify-content:center;44 gap:16px; font-size:38px; font-weight:600; color:#222; background:#fff;45 }46 47 /* Promo banner */48 .promo{49 height:150px; margin:0 24px 18px; border-radius:16px;50 background:linear-gradient(90deg,#dfe7ff,#cfe1ff); border:1px solid #c6d0ff;51 display:flex; align-items:center; justify-content:space-between; padding:0 26px; color:#1b59d1; font-weight:700; font-size:42px;52 }53 .promo .badge{ background:#2b7cff; color:#fff; padding:14px 20px; border-radius:14px; font-size:34px; }54 55 /* Scrollable content */56 .content{ position:absolute; top:310px; bottom:170px; left:0; right:0; overflow:auto; padding-bottom:20px; }57 58 /* Grid cards */59 .grid{ padding:0 16px; display:flex; flex-wrap:wrap; gap:16px; }60 .card{61 width:514px; background:#fff; border:1px solid #e6e6e6; border-radius:18px; overflow:hidden; position:relative;62 }63 .ad-tag{64 position:absolute; top:10px; left:10px; background:#f2f2f2; border:1px solid #ddd; padding:8px 12px; border-radius:10px;65 font-size:28px; font-weight:700; color:#555;66 }67 .favorite{68 position:absolute; top:16px; right:16px; width:64px; height:64px; border-radius:50%; background:#fff;69 border:1px solid #ddd; display:flex; align-items:center; justify-content:center;70 }71 .fav-heart{ width:34px; height:34px; fill:none; stroke:#666; stroke-width:4px; }72 .img-box{73 height:420px; background:#E0E0E0; border-bottom:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;74 }75 .budget-chip{76 position:absolute; left:18px; top:360px; background:#f0f7ff; color:#2b7cff; border:1px solid #cfe0ff;77 padding:10px 16px; border-radius:28px; font-size:30px; display:flex; align-items:center; gap:10px;78 }79 .card-body{ padding:18px; }80 .title2{ font-size:34px; line-height:1.25; height:88px; overflow:hidden; font-weight:700; color:#222; }81 .price-row{ display:flex; align-items:center; gap:16px; margin-top:8px; font-size:36px; }82 .old{ text-decoration:line-through; color:#8f8f8f; }83 .new{ font-weight:800; }84 .off{ color:#20a152; font-weight:800; }85 .ship{ display:flex; align-items:center; gap:10px; margin-top:10px; color:#1d5fd1; font-weight:700; font-size:32px; }86 .truck{ width:36px; height:24px; border:2px solid #1d5fd1; border-radius:4px; position:relative; }87 .truck:after{ content:""; position:absolute; right:-8px; top:8px; width:8px; height:8px; background:#1d5fd1; border-radius:2px; }88 .stars{ display:flex; align-items:center; gap:8px; margin-top:10px; color:#20a152; font-size:34px; }89 .muted{ color:#7c7c7c; }90 .coupon{91 display:flex; align-items:center; justify-content:space-between; gap:10px; background:#e8f8ea; border:1px solid #bfeac7;92 padding:16px; border-radius:14px; margin-top:12px; font-size:32px; color:#1a7c3a; font-weight:700;93 }94 95 /* Bestseller ribbon for lower images */96 .ribbon{97 position:absolute; top:10px; left:10px; background:#1a9f78; color:#fff; padding:10px 16px; border-radius:12px;98 font-size:30px; font-weight:800;99 }100 101 /* Bottom navigation */102 .bottom-nav{103 position:absolute; left:0; right:0; bottom:0; height:170px; background:#fff; border-top:1px solid #e5e5e5;104 display:flex; align-items:center; justify-content:space-around;105 }106 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#555; font-size:30px; }107 .nav-item.active{ color:#2564eb; }108 .nav-icon{ width:50px; height:50px; fill:currentColor; stroke:currentColor; }109 110 /* Tiny helpers */111 .row{ display:flex; align-items:center; gap:10px; }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- System status bar -->118 <div class="status-bar">119 <div>9:18</div>120 <div class="status-icons">121 <div class="dot"></div>122 <div class="signal"></div>123 <div class="battery"></div>124 </div>125 </div>126 127 <!-- App bar -->128 <div class="app-bar">129 <div class="app-left">130 <div class="icon-btn">131 <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12 14 3z"/></svg>132 </div>133 <div class="title">Sports shoes</div>134 </div>135 <div class="row">136 <div class="icon-btn">137 <svg class="icon outline" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><path d="M21 21l-5.5-5.5"></path></svg>138 </div>139 <div class="icon-btn">140 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3zm-5 14h10v2H7v-2zm2 4h6v2H9v-2z"/></svg>141 </div>142 <div class="icon-btn">143 <svg class="icon outline" viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>144 </div>145 <div class="icon-btn">146 <svg class="icon outline" viewBox="0 0 24 24"><path d="M7 7h14l-2 10H7L5 4H2"></path><circle cx="9" cy="20" r="2"></circle><circle cx="18" cy="20" r="2"></circle></svg>147 </div>148 </div>149 </div>150 151 <!-- Sort / Filter controls -->152 <div class="controls">153 <div class="control-pill">154 <svg class="icon outline" viewBox="0 0 24 24"><path d="M6 7h12M4 12h16M8 17h8"></path></svg>155 <div>Sort</div>156 </div>157 <div class="control-pill">158 <svg class="icon outline" viewBox="0 0 24 24"><path d="M4 6h16l-6 7v5l-4 2v-7z"></path></svg>159 <div>Filter</div>160 </div>161 </div>162 163 <!-- Promo -->164 <div class="promo">165 <div>Ye Hai Best Value Ka Badge</div>166 <div class="badge">Budget</div>167 </div>168 169 <div class="content">170 <div class="grid">171 172 <!-- Card 1 -->173 <div class="card">174 <div class="ad-tag">Ad</div>175 <div class="favorite">176 <svg class="fav-heart" viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>177 </div>178 <div class="img-box">[IMG: Blue running shoes]</div>179 <div class="budget-chip">S Budget</div>180 <div class="card-body">181 <div class="title2">Stylish Men Shoe In Lightweight...</div>182 <div class="price-row">183 <div class="old">999</div>184 <div class="new">₹279</div>185 <div class="off">72% off</div>186 </div>187 <div class="ship">188 <div class="truck"></div>189 <div>Free Delivery</div>190 </div>191 <div class="stars">192 <div>★★★★☆</div>193 <div class="muted">(21,585)</div>194 </div>195 <div class="coupon">196 <div>₹35</div>197 <div>Coupon available</div>198 </div>199 </div>200 </div>201 202 <!-- Card 2 -->203 <div class="card">204 <div class="ad-tag">Ad</div>205 <div class="favorite">206 <svg class="fav-heart" viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>207 </div>208 <div class="img-box">[IMG: Black sneakers pair]</div>209 <div class="card-body">210 <div class="title2">Slip On Sneakers For Men</div>211 <div class="price-row">212 <div class="old">698</div>213 <div class="new">₹216</div>214 <div class="off">69% off</div>215 </div>216 <div class="ship">217 <div class="truck"></div>218 <div>Free Delivery</div>219 </div>220 <div class="stars">221 <div>★★★☆☆</div>222 <div class="muted">(230)</div>223 </div>224 <div class="coupon">225 <div>₹35</div>226 <div>Coupon available</div>227 </div>228 </div>229 </div>230 231 <!-- Lower row: bestseller images (left) -->232 <div class="card">233 <div class="img-box" style="height:520px; position:relative;">234 <div class="ribbon">Bestseller</div>235 <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Black slip-on sneaker closeup]</div>236 </div>237 </div>238 239 <!-- Lower row: bestseller image (right) -->240 <div class="card">241 <div class="img-box" style="height:520px; position:relative;">242 <div class="ribbon">Bestseller</div>243 <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Black & white casual sneaker on jeans]</div>244 </div>245 </div>246 247 </div>248 </div>249 250 <!-- Bottom navigation -->251 <div class="bottom-nav">252 <div class="nav-item">253 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3z" fill="currentColor"></path></svg>254 <div>Home</div>255 </div>256 <div class="nav-item active">257 <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="2"></circle><path d="M21 21l-5.5-5.5" stroke="currentColor" stroke-width="2"></path></svg>258 <div>Search</div>259 </div>260 <div class="nav-item">261 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 5h8v6H3zM13 5h8v6h-8zM3 13h8v6H3zM13 13h8v6h-8z" fill="currentColor"></path></svg>262 <div>Categories</div>263 </div>264 <div class="nav-item">265 <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="currentColor"></circle><path d="M4 21c1-4 5-6 8-6s7 2 8 6" fill="none" stroke="currentColor" stroke-width="2"></path></svg>266 <div>Account</div>267 </div>268 <div class="nav-item">269 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M7 7h14l-2 10H7L5 4H2" fill="none" stroke="currentColor" stroke-width="2"></path><circle cx="9" cy="20" r="2"></circle><circle cx="18" cy="20" r="2"></circle></svg>270 <div>Cart</div>271 </div>272 </div>273 274</div>275</body>276</html>