GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Women • Running • Shoes</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;10 position: relative; overflow: hidden;11 background: #ffffff;12 }13 /* Header */14 .header {15 height: 180px;16 border-bottom: 1px solid #e5e5e5;17 position: relative;18 padding: 40px 40px 0 40px;19 }20 .header .title {21 text-align: center;22 font-size: 34px;23 font-weight: 700;24 letter-spacing: 4px;25 color: #111;26 margin-top: 10px;27 }28 .header .results {29 text-align: center;30 font-size: 24px;31 color: #666;32 margin-top: 8px;33 }34 .icon-btn {35 position: absolute;36 top: 60px;37 width: 60px; height: 60px;38 display: flex; align-items: center; justify-content: center;39 cursor: default;40 }41 .icon-left { left: 20px; }42 .icon-right { right: 20px; }43 .icon-btn svg { width: 36px; height: 36px; stroke: #111; fill: none; stroke-width: 2.5; }44 45 /* Filter chips */46 .filters {47 padding: 30px 40px;48 display: flex; align-items: center; gap: 24px;49 border-bottom: 1px solid #eee;50 }51 .filter-icon {52 width: 80px; height: 64px;53 border: 1px solid #d0d0d0; border-radius: 8px;54 display: flex; align-items: center; justify-content: center;55 }56 .chip {57 padding: 14px 26px;58 border: 2px solid #cfcfcf;59 color: #9a9a9a;60 border-radius: 6px;61 font-size: 24px;62 letter-spacing: 1px;63 background: #f7f7f7;64 }65 66 /* Promo section */67 .promo {68 padding: 60px 60px 40px 60px;69 }70 .promo h2 {71 margin: 0;72 font-size: 32px;73 letter-spacing: 3px;74 font-weight: 800;75 color: #222;76 }77 .promo p {78 margin: 18px 0 0 0;79 font-size: 26px;80 color: #555;81 }82 83 /* Product grid */84 .grid {85 display: grid;86 grid-template-columns: 540px 540px;87 width: 1080px;88 border-top: 1px solid #e6e6e6;89 }90 .product {91 padding: 0;92 border-right: 1px solid #e6e6e6;93 border-bottom: 1px solid #e6e6e6;94 position: relative;95 background: #eef2f4;96 }97 .product:nth-child(2n) { border-right: none; }98 .img-wrap {99 position: relative;100 height: 370px;101 margin: 30px;102 background: #E0E0E0;103 border: 1px solid #BDBDBD;104 display: flex; align-items: center; justify-content: center;105 color: #757575; font-size: 22px;106 }107 .heart {108 position: absolute; top: 26px; right: 26px;109 width: 44px; height: 44px;110 display: flex; align-items: center; justify-content: center;111 }112 .heart svg { width: 34px; height: 34px; stroke: #111; fill: none; stroke-width: 2.5; }113 114 .labels {115 position: absolute; left: 30px; top: 350px;116 display: flex; gap: 10px; align-items: center;117 }118 .tag-ar {119 background: #111; color: #fff; font-weight: 700;120 font-size: 18px; padding: 8px 10px; border-radius: 6px;121 }122 .tag-new {123 background: #fff; color: #111; font-weight: 700;124 border: 1px solid #111; font-size: 18px; padding: 6px 10px; border-radius: 4px;125 }126 .price {127 display: inline-block;128 background: #fff; color: #111; font-size: 22px; font-weight: 700;129 padding: 10px 14px; border-radius: 4px; border: 1px solid #ddd;130 margin-left: 10px;131 }132 133 .details {134 padding: 10px 30px 36px 30px;135 background: transparent;136 }137 .title {138 font-size: 30px; font-weight: 800; color: #111; margin-top: 16px;139 }140 .sub {141 font-size: 24px; color: #333; margin-top: 8px;142 }143 .meta {144 margin-top: 14px; display: flex; align-items: center; gap: 10px; color: #333; font-size: 22px;145 }146 .dots { display: inline-flex; gap: 4px; margin-left: 6px; }147 .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }148 .dot.red { background: #e74c3c; }149 .dot.blue { background: #3498db; }150 .dot.yellow { background: #f1c40f; }151 152 /* Bottom nav */153 .bottom-nav {154 position: absolute; left: 0; bottom: 60px; width: 100%; height: 150px;155 background: #fff; border-top: 1px solid #e6e6e6;156 display: flex; align-items: center; justify-content: space-around;157 }158 .nav-item { position: relative; width: 120px; height: 100px; display: flex; align-items: center; justify-content: center; }159 .nav-item svg { width: 56px; height: 56px; stroke: #111; fill: none; stroke-width: 2.5; }160 .badge {161 position: absolute; bottom: 18px; right: 26px;162 background: #f0f0f0; border: 1px solid #cfcfcf; color: #111;163 font-size: 22px; width: 40px; height: 36px; border-radius: 6px;164 display: flex; align-items: center; justify-content: center;165 font-weight: 700;166 }167 .home-indicator {168 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);169 width: 320px; height: 12px; background: #000; border-radius: 6px;170 }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Header -->177 <div class="header">178 <div class="icon-btn icon-left" aria-label="Back">179 <svg viewBox="0 0 24 24">180 <path d="M15 4 L7 12 L15 20" />181 </svg>182 </div>183 <div class="icon-btn icon-right" aria-label="Search">184 <svg viewBox="0 0 24 24">185 <circle cx="10" cy="10" r="6"></circle>186 <line x1="15" y1="15" x2="22" y2="22"></line>187 </svg>188 </div>189 <div class="title">WOMEN • RUNNING • SHOES</div>190 <div class="results">151 RESULTS</div>191 </div>192 193 <!-- Filters -->194 <div class="filters">195 <div class="filter-icon">196 <svg viewBox="0 0 48 48">197 <line x1="6" y1="12" x2="42" y2="12" stroke="#111" stroke-width="3"></line>198 <circle cx="18" cy="12" r="4" fill="#111"></circle>199 <line x1="6" y1="24" x2="42" y2="24" stroke="#111" stroke-width="3"></line>200 <circle cx="30" cy="24" r="4" fill="#111"></circle>201 <line x1="6" y1="36" x2="42" y2="36" stroke="#111" stroke-width="3"></line>202 <circle cx="24" cy="36" r="4" fill="#111"></circle>203 </svg>204 </div>205 <div class="chip">ULTRABOOST</div>206 <div class="chip">ADIZERO</div>207 <div class="chip">DURAMO</div>208 <div class="chip">RUNFALCON</div>209 </div>210 211 <!-- Promo -->212 <div class="promo">213 <h2>ADIDAS TRAINING PLANS</h2>214 <p>Discover our new plans that adapt to your level.</p>215 </div>216 217 <!-- Product Grid -->218 <div class="grid">219 <!-- Product 1 -->220 <div class="product">221 <div class="heart">222 <svg viewBox="0 0 24 24">223 <path d="M12 20 C12 20 4 14 4 9 A5 5 0 0 1 12 8 A5 5 0 0 1 20 9 C20 14 12 20 12 20" />224 </svg>225 </div>226 <div class="img-wrap">[IMG: Pink Running Shoe]</div>227 <div class="labels">228 <span class="tag-ar">AR</span>229 <span class="price">$140.00</span>230 </div>231 <div class="details">232 <div class="title">Switch FWD Running Shoes</div>233 <div class="sub">Women's Performance</div>234 <div class="meta">235 +4236 <span class="dots">237 <span class="dot.red dot"></span>238 <span class="dot.blue dot"></span>239 <span class="dot.yellow dot"></span>240 </span>241 </div>242 </div>243 </div>244 245 <!-- Product 2 -->246 <div class="product">247 <div class="heart">248 <svg viewBox="0 0 24 24">249 <path d="M12 20 C12 20 4 14 4 9 A5 5 0 0 1 12 8 A5 5 0 0 1 20 9 C20 14 12 20 12 20" />250 </svg>251 </div>252 <div class="img-wrap">[IMG: Purple Running Shoe]</div>253 <div class="labels">254 <span class="tag-ar">AR</span>255 <span class="tag-new">NEW</span>256 <span class="price">$190.00</span>257 </div>258 <div class="details">259 <div class="title">Ultraboost Light Running Shoes</div>260 <div class="sub">Women's Performance</div>261 <div class="meta">262 +21263 <span class="dots">264 <span class="dot.red dot"></span>265 <span class="dot.blue dot"></span>266 <span class="dot.yellow dot"></span>267 </span>268 </div>269 </div>270 </div>271 272 <!-- Product 3 -->273 <div class="product">274 <div class="heart">275 <svg viewBox="0 0 24 24">276 <path d="M12 20 C12 20 4 14 4 9 A5 5 0 0 1 12 8 A5 5 0 0 1 20 9 C20 14 12 20 12 20" />277 </svg>278 </div>279 <div class="img-wrap">[IMG: Teal Racing Shoe]</div>280 <div class="labels">281 <span class="tag-ar">AR</span>282 <span class="price">$160.00</span>283 </div>284 <div class="details">285 <div class="title">Adizero Boston Running Shoes</div>286 <div class="sub">Women's Performance</div>287 <div class="meta">288 +8289 <span class="dots">290 <span class="dot.red dot"></span>291 <span class="dot.blue dot"></span>292 <span class="dot.yellow dot"></span>293 </span>294 </div>295 </div>296 </div>297 298 <!-- Product 4 -->299 <div class="product">300 <div class="heart">301 <svg viewBox="0 0 24 24">302 <path d="M12 20 C12 20 4 14 4 9 A5 5 0 0 1 12 8 A5 5 0 0 1 20 9 C20 14 12 20 12 20" />303 </svg>304 </div>305 <div class="img-wrap">[IMG: Olive Knit Running Shoe]</div>306 <div class="labels">307 <span class="tag-ar">AR</span>308 <span class="price">$200.00</span>309 </div>310 <div class="details">311 <div class="title">4D Fusio Running Shoes</div>312 <div class="sub">Women's Performance</div>313 <div class="meta">314 +12315 <span class="dots">316 <span class="dot.red dot"></span>317 <span class="dot.blue dot"></span>318 <span class="dot.yellow dot"></span>319 </span>320 </div>321 </div>322 </div>323 </div>324 325 <!-- Bottom Navigation -->326 <div class="bottom-nav">327 <div class="nav-item" aria-label="Explore">328 <svg viewBox="0 0 24 24">329 <path d="M12 22 C10 16 15 14 12 8 C9 12 6 10 6 6 C9 8 10 5 12 3 C15 6 18 8 18 12 C18 16 15 18 12 22" />330 </svg>331 </div>332 <div class="nav-item" aria-label="Search">333 <svg viewBox="0 0 24 24">334 <circle cx="10" cy="10" r="6"></circle>335 <line x1="15" y1="15" x2="22" y2="22"></line>336 </svg>337 </div>338 <div class="nav-item" aria-label="Wishlist">339 <svg viewBox="0 0 24 24">340 <path d="M12 20 C12 20 4 14 4 9 A5 5 0 0 1 12 8 A5 5 0 0 1 20 9 C20 14 12 20 12 20" />341 </svg>342 <div class="badge">1</div>343 </div>344 <div class="nav-item" aria-label="Compare">345 <svg viewBox="0 0 24 24">346 <rect x="4" y="6" width="14" height="14" rx="2"></rect>347 <line x1="8" y1="6" x2="8" y2="2"></line>348 <line x1="12" y1="6" x2="12" y2="2"></line>349 </svg>350 <div class="badge">7</div>351 </div>352 <div class="nav-item" aria-label="Target">353 <svg viewBox="0 0 24 24">354 <circle cx="12" cy="12" r="8"></circle>355 <circle cx="12" cy="12" r="4"></circle>356 <circle cx="12" cy="12" r="1" fill="#111"></circle>357 </svg>358 </div>359 </div>360 361 <div class="home-indicator"></div>362</div>363</body>364</html>