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>All Shoes - Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 color: #111;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #000;26 color: #fff;27 padding: 0 36px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 box-sizing: border-box;32 font-size: 40px;33 letter-spacing: 0.5px;34 }35 .status-icons {36 display: flex;37 gap: 22px;38 align-items: center;39 }40 .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.7; }41 42 /* Header */43 .header {44 position: absolute;45 top: 120px;46 left: 0;47 width: 1080px;48 height: 150px;49 background: #fff;50 display: flex;51 align-items: center;52 padding: 0 36px;53 box-sizing: border-box;54 border-bottom: 1px solid #eee;55 }56 .header-left, .header-right {57 display: flex; align-items: center;58 }59 .header-title {60 font-size: 52px;61 font-weight: 700;62 margin-left: 28px;63 }64 .header-right { margin-left: auto; gap: 36px; }65 .icon-btn {66 width: 72px; height: 72px; border-radius: 36px;67 display: flex; align-items: center; justify-content: center;68 }69 .icon { width: 48px; height: 48px; }70 71 /* Tabs */72 .tabs {73 position: absolute;74 top: 270px;75 left: 0;76 width: 1080px;77 height: 120px;78 background: #fff;79 display: flex;80 align-items: center;81 padding: 0 36px;82 box-sizing: border-box;83 border-bottom: 1px solid #e6e6e6;84 gap: 38px;85 }86 .tab {87 font-size: 42px; color: #888; padding-bottom: 24px;88 }89 .tab.active {90 color: #111; font-weight: 700; border-bottom: 6px solid #111;91 }92 93 /* Product grid */94 .content {95 position: absolute;96 top: 390px;97 left: 0;98 width: 1080px;99 height: 1760px;100 overflow: hidden;101 padding: 36px;102 box-sizing: border-box;103 }104 .grid {105 display: grid;106 grid-template-columns: 1fr 1fr;107 grid-gap: 28px 28px;108 }109 .product-card {110 background: #fff;111 border-radius: 8px;112 }113 .product-image {114 position: relative;115 width: 100%;116 height: 420px;117 background: #F5F5F5;118 border: 1px solid #E0E0E0;119 display: flex; align-items: center; justify-content: center;120 color: #757575; font-size: 36px;121 }122 .fav {123 position: absolute;124 top: 24px; right: 24px;125 width: 88px; height: 88px; border-radius: 44px;126 background: #fff; border: 1px solid #e6e6e6;127 display: flex; align-items: center; justify-content: center;128 box-shadow: 0 2px 6px rgba(0,0,0,0.06);129 }130 .info { padding: 26px 18px 36px 18px; }131 .badge {132 color: #ff6f00; font-weight: 700; font-size: 34px; margin-bottom: 12px;133 }134 .name {135 font-size: 44px; font-weight: 700; margin-bottom: 12px;136 }137 .sub {138 font-size: 36px; color: #777; margin-bottom: 20px;139 }140 .price {141 font-size: 40px; margin-bottom: 24px;142 }143 .colors {144 display: flex; gap: 18px;145 }146 .dot {147 width: 34px; height: 34px; border-radius: 50%; border: 2px solid #cfcfcf; background: #fff;148 }149 .dot.filled { background: #444; border-color: #444; }150 .dot.gray { background: #ddd; }151 .dot.light { background: #eee; }152 153 /* Floating filter button */154 .fab {155 position: absolute;156 right: 42px;157 bottom: 210px;158 width: 132px; height: 132px; border-radius: 66px;159 background: #fff;160 box-shadow: 0 8px 24px rgba(0,0,0,0.15);161 display: flex; align-items: center; justify-content: center;162 border: 1px solid #f2f2f2;163 }164 165 /* Home indicator bar */166 .home-indicator {167 position: absolute;168 bottom: 22px; left: 50%;169 transform: translateX(-50%);170 width: 420px; height: 16px; background: #000; border-radius: 10px;171 }172</style>173</head>174<body>175<div id="render-target">176 177 <!-- Status bar -->178 <div class="status-bar">179 <div>9:18</div>180 <div class="status-icons">181 <div class="status-dot"></div>182 <div class="status-dot"></div>183 <div class="status-dot"></div>184 <div class="status-dot"></div>185 <div class="status-dot"></div>186 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M2 8h20v8H2z"/></svg>187 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M3 8h18v8H3z"/><path d="M21 10v4"/></svg>188 </div>189 </div>190 191 <!-- Header -->192 <div class="header">193 <div class="header-left">194 <div class="icon-btn">195 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">196 <path d="M15 18l-6-6 6-6"/>197 </svg>198 </div>199 <div class="header-title">All Shoes</div>200 </div>201 <div class="header-right">202 <div class="icon-btn">203 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round">204 <circle cx="11" cy="11" r="7"/>205 <path d="M21 21l-4.3-4.3"/>206 </svg>207 </div>208 <div class="icon-btn">209 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">210 <path d="M6 6h15l-2 10H7L6 6z"/>211 <path d="M6 6l-2-2"/>212 <circle cx="9" cy="20" r="1.8"/>213 <circle cx="18" cy="20" r="1.8"/>214 </svg>215 </div>216 </div>217 </div>218 219 <!-- Tabs -->220 <div class="tabs">221 <div class="tab active">All</div>222 <div class="tab">Lifestyle</div>223 <div class="tab">Running</div>224 <div class="tab">Basketball</div>225 <div class="tab">Football</div>226 </div>227 228 <!-- Content Grid -->229 <div class="content">230 <div class="grid">231 <!-- Product 1 -->232 <div class="product-card">233 <div class="product-image">234 [IMG: Nike Air Force 1 '07 with Mint Swoosh]235 <div class="fav">236 <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#222" stroke-width="2">237 <path d="M12 21s-7-4.6-9.2-8.3C1.2 10.5 2.4 7.8 5.4 7.2c1.8-.3 3.6.6 4.6 2.1 1-1.5 2.8-2.4 4.6-2.1 3 .6 4.2 3.3 2.6 5.5C19 16.4 12 21 12 21z"/>238 </svg>239 </div>240 </div>241 <div class="info">242 <div class="badge">Just In</div>243 <div class="name">Nike Air Force 1 '07</div>244 <div class="sub">Women's Shoe</div>245 <div class="price">MRP : ₹ 8 195.00</div>246 <div class="colors">247 <div class="dot"></div>248 <div class="dot"></div>249 <div class="dot filled"></div>250 <div class="dot"></div>251 <div class="dot"></div>252 </div>253 </div>254 </div>255 256 <!-- Product 2 -->257 <div class="product-card">258 <div class="product-image">259 [IMG: Nike Air Force 1 Shadow - Pastel]260 <div class="fav">261 <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#222" stroke-width="2">262 <path d="M12 21s-7-4.6-9.2-8.3C1.2 10.5 2.4 7.8 5.4 7.2c1.8-.3 3.6.6 4.6 2.1 1-1.5 2.8-2.4 4.6-2.1 3 .6 4.2 3.3 2.6 5.5C19 16.4 12 21 12 21z"/>263 </svg>264 </div>265 </div>266 <div class="info">267 <div class="name">Nike Air Force 1 Shadow</div>268 <div class="sub">Women's Shoes</div>269 <div class="price">MRP : ₹ 8 995.00</div>270 <div class="colors">271 <div class="dot"></div>272 <div class="dot gray"></div>273 <div class="dot light"></div>274 </div>275 </div>276 </div>277 278 <!-- Product 3 -->279 <div class="product-card">280 <div class="product-image">281 [IMG: Nike Air Force 1 '07 FlyEase - White]282 <div class="fav">283 <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#222" stroke-width="2">284 <path d="M12 21s-7-4.6-9.2-8.3C1.2 10.5 2.4 7.8 5.4 7.2c1.8-.3 3.6.6 4.6 2.1 1-1.5 2.8-2.4 4.6-2.1 3 .6 4.2 3.3 2.6 5.5C19 16.4 12 21 12 21z"/>285 </svg>286 </div>287 </div>288 <div class="info">289 <div class="badge">Best Seller</div>290 <div class="name">Nike Air Force 1 '07 FlyEase</div>291 <div class="sub">Women's Shoes</div>292 <div class="price">MRP : ₹ 9 695.00</div>293 <div class="colors">294 <div class="dot"></div>295 <div class="dot filled"></div>296 </div>297 </div>298 </div>299 300 <!-- Product 4 -->301 <div class="product-card">302 <div class="product-image">303 [IMG: Nike Gamma Force - Olive Swoosh]304 <div class="fav">305 <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#222" stroke-width="2">306 <path d="M12 21s-7-4.6-9.2-8.3C1.2 10.5 2.4 7.8 5.4 7.2c1.8-.3 3.6.6 4.6 2.1 1-1.5 2.8-2.4 4.6-2.1 3 .6 4.2 3.3 2.6 5.5C19 16.4 12 21 12 21z"/>307 </svg>308 </div>309 </div>310 <div class="info">311 <div class="badge">Just In</div>312 <div class="name">Nike Gamma Force</div>313 <div class="sub">Women's Shoes</div>314 <div class="price">MRP : ₹ 8 495.00</div>315 <div class="colors">316 <div class="dot"></div>317 <div class="dot light"></div>318 <div class="dot"></div>319 </div>320 </div>321 </div>322 </div>323 </div>324 325 <!-- Floating filter action button -->326 <div class="fab">327 <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="#111" stroke-width="2.2" stroke-linecap="round">328 <path d="M4 7h12M18 7h2"/>329 <circle cx="12" cy="7" r="2.2" fill="#111"/>330 <path d="M4 12h8M14 12h6"/>331 <circle cx="8" cy="12" r="2.2" fill="#111"/>332 <path d="M4 17h4M10 17h10"/>333 <circle cx="6" cy="17" r="2.2" fill="#111"/>334 </svg>335 </div>336 337 <!-- Home indicator -->338 <div class="home-indicator"></div>339</div>340</body>341</html>