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>Women Running Shoes</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 color: #222;16 }17 /* Top teal status area */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 110px;24 background: #149aa0; /* teal */25 }26 /* App header */27 .app-header {28 position: absolute;29 top: 110px;30 left: 0;31 width: 1080px;32 height: 150px;33 background: #ffffff;34 display: flex;35 align-items: center;36 padding: 0 40px;37 box-sizing: border-box;38 border-bottom: 1px solid #e5e5e5;39 }40 .header-left {41 display: flex;42 align-items: center;43 gap: 30px;44 flex: 1;45 }46 .back-btn {47 width: 72px;48 height: 72px;49 display: inline-flex;50 align-items: center;51 justify-content: center;52 }53 .title {54 font-weight: 700;55 font-size: 44px;56 letter-spacing: 0.5px;57 }58 .header-actions {59 display: flex;60 gap: 40px;61 align-items: center;62 }63 .icon {64 width: 60px;65 height: 60px;66 }67 .filters-bar {68 position: absolute;69 top: 260px;70 left: 0;71 width: 1080px;72 height: 120px;73 background: #ffffff;74 border-bottom: 1px solid #eaeaea;75 display: flex;76 align-items: center;77 box-sizing: border-box;78 }79 .filter-item {80 flex: 1;81 display: flex;82 align-items: center;83 justify-content: center;84 gap: 14px;85 height: 100%;86 font-size: 34px;87 color: #555;88 border-right: 1px solid #eee;89 }90 .filter-item:last-child { border-right: none; }91 .badge {92 background: #149aa0;93 color: #fff;94 border-radius: 24px;95 width: 48px;96 height: 48px;97 font-size: 28px;98 display: inline-flex;99 align-items: center;100 justify-content: center;101 }102 .chips-row {103 position: absolute;104 top: 380px;105 left: 0;106 width: 1080px;107 padding: 28px 24px;108 box-sizing: border-box;109 background: #f3f3f3;110 display: flex;111 gap: 24px;112 border-bottom: 1px solid #e5e5e5;113 }114 .chip {115 background: #ffffff;116 border: 1px solid #dcdcdc;117 border-radius: 22px;118 padding: 28px 36px;119 font-size: 32px;120 color: #666;121 box-shadow: 0 4px 10px rgba(0,0,0,0.08);122 }123 /* Product grid */124 .product-grid {125 position: absolute;126 top: 480px;127 left: 0;128 width: 1080px;129 box-sizing: border-box;130 padding: 24px;131 display: grid;132 grid-template-columns: 1fr 1fr;133 column-gap: 28px;134 row-gap: 34px;135 }136 .product-card {137 position: relative;138 background: #ffffff;139 border-bottom: 1px solid #eee;140 padding-bottom: 28px;141 }142 .img-wrap {143 width: 100%;144 height: 420px;145 background: #E0E0E0;146 border: 1px solid #BDBDBD;147 display: flex;148 align-items: center;149 justify-content: center;150 color: #757575;151 font-size: 32px;152 }153 .wishlist {154 position: absolute;155 top: 24px;156 right: 24px;157 width: 88px;158 height: 88px;159 border-radius: 44px;160 background: #ffffff;161 box-shadow: 0 2px 10px rgba(0,0,0,0.15);162 display: flex;163 align-items: center; justify-content: center;164 }165 .card-body {166 padding: 24px 8px 0;167 }168 .prod-title {169 font-size: 32px;170 color: #333;171 line-height: 1.3;172 white-space: nowrap;173 overflow: hidden;174 text-overflow: ellipsis;175 margin-bottom: 12px;176 }177 .price-row {178 display: flex;179 align-items: baseline;180 gap: 16px;181 margin-bottom: 10px;182 }183 .price-now {184 font-size: 40px;185 font-weight: 700;186 }187 .price-old {188 font-size: 32px;189 color: #9b9b9b;190 text-decoration: line-through;191 }192 .discount {193 font-size: 32px;194 color: #0d9c8f;195 margin-bottom: 12px;196 }197 .rating {198 display: flex;199 gap: 6px;200 margin-bottom: 18px;201 }202 .shipping {203 display: inline-block;204 padding: 14px 22px;205 border: 2px solid #e3a66a;206 color: #d6863b;207 border-radius: 14px;208 font-size: 30px;209 background: #fff8f0;210 }211 /* Bottom gesture bar */212 .bottom-bar {213 position: absolute;214 bottom: 0;215 left: 0;216 width: 1080px;217 height: 120px;218 background: #000000;219 }220 .home-pill {221 position: absolute;222 bottom: 36px;223 left: 50%;224 transform: translateX(-50%);225 width: 360px;226 height: 14px;227 background: #e0e0e0;228 border-radius: 10px;229 opacity: 0.9;230 }231</style>232</head>233<body>234<div id="render-target">235 236 <div class="status-bar"></div>237 238 <div class="app-header">239 <div class="header-left">240 <div class="back-btn" aria-label="Back">241 <svg class="icon" viewBox="0 0 24 24">242 <path d="M15.5 4l-8 8 8 8" fill="none" stroke="#149aa0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>243 </svg>244 </div>245 <div class="title">WOMEN RUNNING SHOES</div>246 </div>247 <div class="header-actions">248 <svg class="icon" viewBox="0 0 24 24" aria-label="Search">249 <circle cx="10" cy="10" r="7" fill="none" stroke="#149aa0" stroke-width="2"/>250 <path d="M15.5 15.5 L22 22" stroke="#149aa0" stroke-width="2" stroke-linecap="round"/>251 </svg>252 <svg class="icon" viewBox="0 0 24 24" aria-label="Cart">253 <path d="M3 5h2l2 12h10l2-9H7" fill="none" stroke="#149aa0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>254 <circle cx="9" cy="20" r="1.6" fill="#149aa0"/>255 <circle cx="17" cy="20" r="1.6" fill="#149aa0"/>256 </svg>257 </div>258 </div>259 260 <div class="filters-bar">261 <div class="filter-item">Category262 <svg width="28" height="28" viewBox="0 0 24 24">263 <path d="M6 9l6 6 6-6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>264 </svg>265 </div>266 <div class="filter-item">267 <span class="badge">1</span>268 <span>Filter</span>269 </div>270 <div class="filter-item">271 <span>₹</span>272 <svg width="26" height="26" viewBox="0 0 24 24">273 <path d="M12 5v14M8 9l4-4 4 4" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>274 </svg>275 <span>Price</span>276 </div>277 <div class="filter-item">278 <svg width="26" height="26" viewBox="0 0 24 24">279 <path d="M8 6h8M8 12h8M8 18h8" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>280 </svg>281 <span>Sort</span>282 </div>283 </div>284 285 <div class="chips-row">286 <div class="chip">Sports Shoes</div>287 <div class="chip">Sports Shoes</div>288 <div class="chip">Puma</div>289 </div>290 291 <div class="product-grid">292 293 <!-- Card 1 -->294 <div class="product-card">295 <div class="img-wrap">[IMG: Grey women running shoe]</div>296 <div class="wishlist" aria-label="Wishlist">297 <svg width="42" height="42" viewBox="0 0 24 24">298 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="none" stroke="#909090" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>299 </svg>300 </div>301 <div class="card-body">302 <div class="prod-title">Columbus Selena Women's Sports...</div>303 <div class="price-row">304 <div class="price-now">₹1,499</div>305 <div class="price-old">₹2,199</div>306 </div>307 <div class="discount">31% off</div>308 <span class="shipping">Free shipping</span>309 </div>310 </div>311 312 <!-- Card 2 -->313 <div class="product-card">314 <div class="img-wrap">[IMG: Navy slip-on running shoe]</div>315 <div class="wishlist" aria-label="Wishlist">316 <svg width="42" height="42" viewBox="0 0 24 24">317 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="none" stroke="#909090" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>318 </svg>319 </div>320 <div class="card-body">321 <div class="prod-title">Columbus Spade Women's Sports...</div>322 <div class="price-row">323 <div class="price-now">₹859</div>324 <div class="price-old">₹1,299</div>325 </div>326 <div class="discount">33% off</div>327 <div class="rating" aria-label="Rating: 5 stars">328 <svg width="36" height="36" viewBox="0 0 24 24">329 <path d="M12 17.3l-5.2 3 1-5.9-4.2-4.1 5.9-.9L12 3l2.5 6.3 5.9.9-4.2 4.1 1 5.9z" fill="#f6b21a"/>330 </svg>331 <svg width="36" height="36" viewBox="0 0 24 24">332 <path d="M12 17.3l-5.2 3 1-5.9-4.2-4.1 5.9-.9L12 3l2.5 6.3 5.9.9-4.2 4.1 1 5.9z" fill="#f6b21a"/>333 </svg>334 <svg width="36" height="36" viewBox="0 0 24 24">335 <path d="M12 17.3l-5.2 3 1-5.9-4.2-4.1 5.9-.9L12 3l2.5 6.3 5.9.9-4.2 4.1 1 5.9z" fill="#f6b21a"/>336 </svg>337 <svg width="36" height="36" viewBox="0 0 24 24">338 <path d="M12 17.3l-5.2 3 1-5.9-4.2-4.1 5.9-.9L12 3l2.5 6.3 5.9.9-4.2 4.1 1 5.9z" fill="#f6b21a"/>339 </svg>340 <svg width="36" height="36" viewBox="0 0 24 24">341 <path d="M12 17.3l-5.2 3 1-5.9-4.2-4.1 5.9-.9L12 3l2.5 6.3 5.9.9-4.2 4.1 1 5.9z" fill="#f6b21a"/>342 </svg>343 </div>344 <span class="shipping">Free shipping</span>345 </div>346 </div>347 348 <!-- Card 3 -->349 <div class="product-card">350 <div class="img-wrap">[IMG: Mauve slip-on running shoe]</div>351 <div class="wishlist" aria-label="Wishlist">352 <svg width="42" height="42" viewBox="0 0 24 24">353 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="none" stroke="#909090" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>354 </svg>355 </div>356 <div class="card-body">357 <div class="prod-title">Columbus Women's Slip-on...</div>358 <div class="price-row">359 <div class="price-now">₹1,099</div>360 <div class="price-old">₹1,699</div>361 </div>362 <div class="discount">35% off</div>363 <span class="shipping">Free shipping</span>364 </div>365 </div>366 367 <!-- Card 4 -->368 <div class="product-card">369 <div class="img-wrap">[IMG: Purple lace-up running shoe]</div>370 <div class="wishlist" aria-label="Wishlist">371 <svg width="42" height="42" viewBox="0 0 24 24">372 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="none" stroke="#909090" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>373 </svg>374 </div>375 <div class="card-body">376 <div class="prod-title">Columbus Women's Lace-up...</div>377 <div class="price-row">378 <div class="price-now">₹1,249</div>379 <div class="price-old">₹1,799</div>380 </div>381 <div class="discount">30% off</div>382 <span class="shipping">Free shipping</span>383 </div>384 </div>385 386 </div>387 388 <div class="bottom-bar">389 <div class="home-pill"></div>390 </div>391 392</div>393</body>394</html>