GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Atom Men Blue Casual Sneaker - Listing</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 110px;22 background: #202124;23 color: #ffffff;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 font-size: 34px;29 }30 .status-left { display: flex; align-items: center; gap: 24px; }31 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }32 .status-icon {33 width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.25);34 }35 36 /* Header */37 .header {38 position: absolute;39 top: 110px;40 left: 0;41 width: 1080px;42 height: 150px;43 background: #ffffff;44 display: flex;45 align-items: center;46 box-sizing: border-box;47 padding: 0 28px;48 border-bottom: 1px solid #e6e6e6;49 }50 .back-btn {51 width: 80px;52 height: 80px;53 display: flex;54 align-items: center;55 justify-content: center;56 margin-right: 12px;57 }58 .header-title {59 font-size: 44px;60 font-weight: 700;61 color: #111111;62 }63 .header-actions {64 margin-left: auto;65 display: flex; align-items: center; gap: 36px;66 }67 .icon-btn svg { width: 60px; height: 60px; }68 69 /* Scroll area */70 .content-scroll {71 position: absolute;72 top: 260px; /* status + header */73 left: 0;74 width: 1080px;75 height: 2140px;76 overflow-y: auto;77 box-sizing: border-box;78 padding: 24px;79 }80 81 /* Product grid */82 .grid {83 display: grid;84 grid-template-columns: 1fr 1fr;85 gap: 28px;86 }87 .card {88 background: #ffffff;89 border-radius: 24px;90 }91 .img-wrap {92 position: relative;93 width: 100%;94 height: 500px;95 border-radius: 24px;96 overflow: hidden;97 }98 .img-ph {99 width: 100%; height: 100%;100 background: #E0E0E0; border: 1px solid #BDBDBD;101 display: flex; align-items: center; justify-content: center;102 color: #757575; font-size: 34px; text-align: center; padding: 10px; box-sizing: border-box;103 }104 .premium-tag {105 position: absolute;106 top: 16px; left: 16px;107 background: #FFD54F;108 color: #3b2f00;109 font-weight: 700;110 font-size: 30px;111 padding: 8px 22px;112 border-radius: 14px;113 }114 .card-body {115 padding: 18px 6px 10px 6px;116 }117 .title {118 font-size: 36px;119 color: #222;120 line-height: 1.25;121 min-height: 90px;122 }123 .price-row {124 display: flex; align-items: center; gap: 14px;125 margin-top: 8px; margin-bottom: 10px;126 }127 .price {128 font-size: 42px; font-weight: 800; color: #222;129 }130 .strike {131 font-size: 34px; color: #9e9e9e; text-decoration: line-through;132 }133 .discount {134 font-size: 34px; color: #1E88E5; font-weight: 700;135 }136 .wish {137 margin-left: auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;138 }139 .rating-row {140 display: flex; align-items: center; gap: 10px;141 color: #333; font-size: 34px; font-weight: 700;142 }143 .star { width: 40px; height: 40px; }144 .left-alert {145 margin-left: 18px; color: #d32f2f; font-size: 32px; font-weight: 700;146 }147</style>148</head>149<body>150<div id="render-target">151 152 <!-- Status Bar -->153 <div class="status-bar">154 <div class="status-left">155 <div>11:54</div>156 <div class="status-icon"></div>157 <div class="status-icon"></div>158 <div class="status-icon"></div>159 <div class="status-icon"></div>160 </div>161 <div class="status-right">162 <!-- Wifi -->163 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">164 <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/>165 </svg>166 <!-- Battery -->167 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">168 <rect x="3" y="6" width="16" height="12" rx="2" ry="2"></rect>169 <rect x="20" y="10" width="2" height="4"></rect>170 </svg>171 </div>172 </div>173 174 <!-- Header -->175 <div class="header">176 <div class="back-btn">177 <svg viewBox="0 0 48 48" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round">178 <path d="M30 12 L16 24 L30 36"></path>179 </svg>180 </div>181 <div class="header-title">Atom Men Blue Casual Sneaker</div>182 <div class="header-actions">183 <div class="icon-btn">184 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">185 <circle cx="11" cy="11" r="7"></circle>186 <path d="M21 21 L16.5 16.5"></path>187 </svg>188 </div>189 <div class="icon-btn">190 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">191 <path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z"></path>192 </svg>193 </div>194 <div class="icon-btn">195 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">196 <path d="M6 6h15l-2 9H7L6 6z"></path>197 <circle cx="9" cy="20" r="1.8"></circle>198 <circle cx="17" cy="20" r="1.8"></circle>199 </svg>200 </div>201 </div>202 </div>203 204 <!-- Scrollable Content -->205 <div class="content-scroll">206 <div class="grid">207 208 <!-- Card 1 -->209 <div class="card">210 <div class="img-wrap">211 <div class="img-ph">[IMG: Dark Blue Mid Ankle Sneaker]</div>212 <div class="premium-tag">Premium</div>213 </div>214 <div class="card-body">215 <div class="title">Atom Men Blue Mid Ankle Sne...</div>216 <div class="price-row">217 <div class="price">₹2595</div>218 <div class="strike">₹2895</div>219 <div class="discount">10%</div>220 <div class="wish">221 <svg viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">222 <path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z"></path>223 </svg>224 </div>225 </div>226 <div class="rating-row">227 <svg class="star" viewBox="0 0 24 24" fill="#FBC02D">228 <path d="M12 2l3.1 6.5 7 1-5.1 4.7 1.6 7-6.6-3.7-6.6 3.7 1.6-7L1.9 9.5l7-1z"/>229 </svg>230 <div>3.3</div>231 </div>232 </div>233 </div>234 235 <!-- Card 2 -->236 <div class="card">237 <div class="img-wrap">238 <div class="img-ph">[IMG: Blue-Green Low Sneakers]</div>239 </div>240 <div class="card-body">241 <div class="title">RapidBox Blue-Green Sneakers</div>242 <div class="price-row">243 <div class="price">₹595</div>244 <div class="strike">₹999</div>245 <div class="discount">40%</div>246 <div class="wish">247 <svg viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">248 <path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z"></path>249 </svg>250 </div>251 </div>252 <div class="rating-row">253 <svg class="star" viewBox="0 0 24 24" fill="#FBC02D">254 <path d="M12 2l3.1 6.5 7 1-5.1 4.7 1.6 7-6.6-3.7-6.6 3.7 1.6-7L1.9 9.5l7-1z"/>255 </svg>256 <div>3.8</div>257 <div class="left-alert">1 units left!</div>258 </div>259 </div>260 </div>261 262 <!-- Card 3 -->263 <div class="card">264 <div class="img-wrap" style="height: 620px;">265 <div class="img-ph">[IMG: Mesh Blue Casual Shoes Pair - Left]</div>266 </div>267 <div class="card-body">268 <div class="title">RapidBox Men Blue Casual Sh...</div>269 <div class="price-row">270 <div class="price">₹895</div>271 <div class="strike">₹999</div>272 <div class="discount">10%</div>273 <div class="wish">274 <svg viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">275 <path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z"></path>276 </svg>277 </div>278 </div>279 <div class="rating-row">280 <svg class="star" viewBox="0 0 24 24" fill="#FBC02D">281 <path d="M12 2l3.1 6.5 7 1-5.1 4.7 1.6 7-6.6-3.7-6.6 3.7 1.6-7L1.9 9.5l7-1z"/>282 </svg>283 <div>3.9</div>284 <div class="left-alert">1 units left!</div>285 </div>286 </div>287 </div>288 289 <!-- Card 4 -->290 <div class="card">291 <div class="img-wrap" style="height: 620px;">292 <div class="img-ph">[IMG: Blue Casual Shoe with Neon Sole]</div>293 </div>294 <div class="card-body">295 <div class="title">RapidBox Men Casual Blue Sne...</div>296 <div class="price-row">297 <div class="price">₹930</div>298 <div class="strike">₹999</div>299 <div class="discount">7%</div>300 <div class="wish">301 <svg viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">302 <path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z"></path>303 </svg>304 </div>305 </div>306 <div class="rating-row">307 <svg class="star" viewBox="0 0 24 24" fill="#FBC02D">308 <path d="M12 2l3.1 6.5 7 1-5.1 4.7 1.6 7-6.6-3.7-6.6 3.7 1.6-7L1.9 9.5l7-1z"/>309 </svg>310 <div>3.8</div>311 </div>312 </div>313 </div>314 315 <!-- Bottom image preview with Premium tags (as seen partially) -->316 <div class="card">317 <div class="img-wrap" style="height: 520px;">318 <div class="img-ph">[IMG: Premium Blue Sneaker - Left Bottom]</div>319 <div class="premium-tag">Premium</div>320 </div>321 </div>322 323 <div class="card">324 <div class="img-wrap" style="height: 520px;">325 <div class="img-ph">[IMG: Premium Blue-Green Sneaker - Right Bottom]</div>326 <div class="premium-tag">Premium</div>327 </div>328 </div>329 330 </div>331 </div>332 333</div>334</body>335</html>