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>Ultraboost Light Running 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 /* Header */19 .app-header {20 position: relative;21 padding: 56px 36px 24px 36px;22 border-bottom: 1px solid #e6e6e6;23 }24 .top-actions {25 display: flex;26 align-items: center;27 justify-content: space-between;28 height: 72px;29 }30 .title-area {31 text-align: center;32 margin-top: 6px;33 }34 .title-area .title {35 font-size: 34px;36 font-weight: 700;37 letter-spacing: 3px;38 text-transform: uppercase;39 }40 .title-area .sub {41 margin-top: 12px;42 font-size: 24px;43 color: #555;44 }45 .icon-btn {46 width: 64px;47 height: 64px;48 display: inline-flex;49 align-items: center;50 justify-content: center;51 cursor: default;52 }53 .icon {54 width: 40px; height: 40px;55 }56 57 /* Filters */58 .filters {59 display: flex;60 align-items: center;61 gap: 24px;62 padding: 26px 36px;63 border-bottom: 1px solid #ececec;64 }65 .filter-chip {66 padding: 18px 26px;67 border: 2px solid #d7d7d7;68 border-radius: 6px;69 color: #777;70 font-weight: 600;71 letter-spacing: 1px;72 background: #f7f7f7;73 font-size: 22px;74 }75 .filter-icon {76 width: 64px;77 height: 64px;78 border: 2px solid #d7d7d7;79 border-radius: 6px;80 display: flex;81 align-items: center;82 justify-content: center;83 color: #777;84 background: #f7f7f7;85 }86 87 /* Product grid */88 .grid {89 display: grid;90 grid-template-columns: 1fr 1fr;91 column-gap: 20px;92 row-gap: 20px;93 padding: 20px 20px 180px 20px;94 }95 .product-card {96 background: #eef1f3;97 border: 1px solid #dadada;98 position: relative;99 }100 .product-image {101 position: relative;102 height: 360px;103 background: #E0E0E0;104 border-bottom: 1px solid #d3d3d3;105 display: flex;106 align-items: center;107 justify-content: center;108 color: #757575;109 font-size: 24px;110 font-weight: 600;111 }112 .heart-icon {113 position: absolute;114 top: 20px;115 right: 20px;116 width: 40px;117 height: 40px;118 }119 .badge-ar {120 position: absolute;121 left: 16px;122 top: 310px;123 background: #111;124 color: #fff;125 font-size: 18px;126 padding: 8px 10px;127 border-radius: 4px;128 letter-spacing: 1px;129 }130 .ribbon {131 position: absolute;132 left: 72px;133 top: 304px;134 background: #fff;135 color: #111;136 font-size: 18px;137 font-weight: 700;138 padding: 10px 14px;139 border-radius: 2px;140 box-shadow: 0 1px 0 rgba(0,0,0,0.08);141 letter-spacing: 3px;142 }143 .details {144 padding: 20px;145 background: #eef1f3;146 }147 .price {148 display: inline-block;149 background: #fff;150 padding: 12px 16px;151 font-size: 22px;152 font-weight: 700;153 border-radius: 2px;154 margin-bottom: 14px;155 }156 .name {157 font-size: 28px;158 font-weight: 800;159 line-height: 1.2;160 margin-top: 6px;161 }162 .meta {163 display: flex;164 align-items: center;165 justify-content: space-between;166 margin-top: 10px;167 color: #444;168 font-size: 22px;169 }170 .colors {171 display: flex;172 align-items: center;173 gap: 8px;174 }175 .dot {176 width: 14px; height: 14px; border-radius: 50%;177 display: inline-block;178 }179 .dot.blue { background: #4285F4; }180 .dot.red { background: #EA4335; }181 .dot.yellow { background: #FBBC05; }182 183 /* Bottom nav */184 .bottom-nav {185 position: absolute;186 left: 0; right: 0; bottom: 0;187 height: 150px;188 border-top: 1px solid #e6e6e6;189 background: #ffffff;190 display: flex;191 align-items: center;192 justify-content: space-around;193 padding: 0 24px;194 }195 .nav-icon-wrap {196 width: 120px; height: 96px;197 display: flex; align-items: center; justify-content: center;198 color: #444;199 }200 .nav-icon { width: 48px; height: 48px; }201 .home-indicator {202 position: absolute;203 bottom: 16px;204 left: 50%;205 transform: translateX(-50%);206 width: 280px;207 height: 10px;208 background: #cfcfcf;209 border-radius: 8px;210 }211</style>212</head>213<body>214<div id="render-target">215 216 <!-- Header -->217 <div class="app-header">218 <div class="top-actions">219 <div class="icon-btn">220 <svg class="icon" viewBox="0 0 64 64">221 <path d="M40 12 L20 32 L40 52" fill="none" stroke="#111" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>222 </svg>223 </div>224 <div class="icon-btn">225 <svg class="icon" viewBox="0 0 64 64">226 <circle cx="28" cy="28" r="16" fill="none" stroke="#111" stroke-width="6"/>227 <line x1="42" y1="42" x2="58" y2="58" stroke="#111" stroke-width="6" stroke-linecap="round"/>228 </svg>229 </div>230 </div>231 <div class="title-area">232 <div class="title">ULTRABOOST LIGHT RUNNING SHOES</div>233 <div class="sub">40 RESULTS</div>234 </div>235 </div>236 237 <!-- Filters -->238 <div class="filters">239 <div class="filter-icon">240 <svg viewBox="0 0 72 72" width="40" height="40">241 <line x1="10" y1="18" x2="62" y2="18" stroke="#333" stroke-width="6" stroke-linecap="round"/>242 <rect x="25" y="12" width="10" height="12" fill="#333"/>243 <line x1="10" y1="36" x2="62" y2="36" stroke="#333" stroke-width="6" stroke-linecap="round"/>244 <rect x="46" y="30" width="10" height="12" fill="#333"/>245 <line x1="10" y1="54" x2="62" y2="54" stroke="#333" stroke-width="6" stroke-linecap="round"/>246 <rect x="16" y="48" width="10" height="12" fill="#333"/>247 </svg>248 </div>249 <div class="filter-chip">WOMEN</div>250 <div class="filter-chip">MEN</div>251 <div class="filter-chip">KIDS</div>252 </div>253 254 <!-- Product Grid -->255 <div class="grid">256 <!-- Card 1 -->257 <div class="product-card">258 <div class="product-image">259 [IMG: White Ultraboot Shoe]260 <svg class="heart-icon" viewBox="0 0 48 48">261 <path d="M24 40 L10 26 C5 21 6 13 12 10 C16 8 20 9 24 13 C28 9 32 8 36 10 C42 13 43 21 38 26 L24 40 Z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>262 </svg>263 <div class="badge-ar">AR</div>264 <div class="ribbon">BEST SELLER</div>265 </div>266 <div class="details">267 <div class="price">$190.00</div>268 <div class="name">Ultraboost Light<br>Running Shoes</div>269 <div class="meta">270 <span>Women's Performance</span>271 <span class="colors">+16272 <span class="dot blue"></span>273 <span class="dot red"></span>274 <span class="dot yellow"></span>275 </span>276 </div>277 </div>278 </div>279 280 <!-- Card 2 -->281 <div class="product-card">282 <div class="product-image">283 [IMG: Black Ultraboot Shoe]284 <svg class="heart-icon" viewBox="0 0 48 48">285 <path d="M24 40 L10 26 C5 21 6 13 12 10 C16 8 20 9 24 13 C28 9 32 8 36 10 C42 13 43 21 38 26 L24 40 Z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>286 </svg>287 <div class="badge-ar">AR</div>288 <div class="ribbon">BEST SELLER</div>289 </div>290 <div class="details">291 <div class="price">$190.00</div>292 <div class="name">Ultraboost Light<br>Running Shoes</div>293 <div class="meta">294 <span>Women's Performance</span>295 <span class="colors">+16296 <span class="dot blue"></span>297 <span class="dot red"></span>298 <span class="dot yellow"></span>299 </span>300 </div>301 </div>302 </div>303 304 <!-- Card 3 -->305 <div class="product-card">306 <div class="product-image">307 [IMG: Black Ultraboot Shoe - White Sole]308 <svg class="heart-icon" viewBox="0 0 48 48">309 <path d="M24 40 L10 26 C5 21 6 13 12 10 C16 8 20 9 24 13 C28 9 32 8 36 10 C42 13 43 21 38 26 L24 40 Z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>310 </svg>311 <div class="badge-ar">AR</div>312 <div class="ribbon">BEST SELLER</div>313 </div>314 <div class="details">315 <div class="price">$190.00</div>316 <div class="name">Ultraboost Light<br>Running Shoes</div>317 <div class="meta">318 <span>Women's Performance</span>319 <span class="colors">+16320 <span class="dot blue"></span>321 <span class="dot red"></span>322 <span class="dot yellow"></span>323 </span>324 </div>325 </div>326 </div>327 328 <!-- Card 4 -->329 <div class="product-card">330 <div class="product-image">331 [IMG: Black & White Ultraboot Shoe]332 <svg class="heart-icon" viewBox="0 0 48 48">333 <path d="M24 40 L10 26 C5 21 6 13 12 10 C16 8 20 9 24 13 C28 9 32 8 36 10 C42 13 43 21 38 26 L24 40 Z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>334 </svg>335 <div class="badge-ar">AR</div>336 <div class="ribbon">BEST SELLER</div>337 </div>338 <div class="details">339 <div class="price">$190.00</div>340 <div class="name">Ultraboost Light<br>Running Shoes</div>341 <div class="meta">342 <span>Women's Performance</span>343 <span class="colors">+16344 <span class="dot blue"></span>345 <span class="dot red"></span>346 <span class="dot yellow"></span>347 </span>348 </div>349 </div>350 </div>351 </div>352 353 <!-- Bottom Navigation -->354 <div class="bottom-nav">355 <div class="nav-icon-wrap">356 <svg class="nav-icon" viewBox="0 0 64 64">357 <path d="M32 8 C28 16 24 18 24 28 C24 38 32 44 32 56 C40 46 44 40 44 30 C44 20 38 16 32 8 Z" fill="none" stroke="#111" stroke-width="5" stroke-linejoin="round"/>358 </svg>359 </div>360 <div class="nav-icon-wrap">361 <svg class="nav-icon" viewBox="0 0 64 64">362 <circle cx="28" cy="28" r="16" fill="none" stroke="#111" stroke-width="5"/>363 <line x1="42" y1="42" x2="58" y2="58" stroke="#111" stroke-width="5" stroke-linecap="round"/>364 </svg>365 </div>366 <div class="nav-icon-wrap">367 <svg class="nav-icon" viewBox="0 0 64 64">368 <path d="M32 54 L16 38 C10 32 10 22 16 18 C22 14 28 16 32 20 C36 16 42 14 48 18 C54 22 54 32 48 38 L32 54 Z" fill="none" stroke="#111" stroke-width="5" stroke-linejoin="round"/>369 </svg>370 </div>371 <div class="nav-icon-wrap">372 <svg class="nav-icon" viewBox="0 0 64 64">373 <rect x="14" y="18" width="36" height="34" rx="4" ry="4" fill="none" stroke="#111" stroke-width="5"/>374 <path d="M18 18 L24 10 L40 10 L46 18" fill="none" stroke="#111" stroke-width="5" stroke-linecap="round"/>375 </svg>376 </div>377 <div class="nav-icon-wrap">378 <svg class="nav-icon" viewBox="0 0 64 64">379 <circle cx="32" cy="32" r="22" fill="none" stroke="#111" stroke-width="5"/>380 <line x1="32" y1="10" x2="32" y2="22" stroke="#111" stroke-width="5" stroke-linecap="round"/>381 <line x1="32" y1="42" x2="32" y2="54" stroke="#111" stroke-width="5" stroke-linecap="round"/>382 <line x1="10" y1="32" x2="22" y2="32" stroke="#111" stroke-width="5" stroke-linecap="round"/>383 <line x1="42" y1="32" x2="54" y2="32" stroke="#111" stroke-width="5" stroke-linecap="round"/>384 </svg>385 </div>386 </div>387 <div class="home-indicator"></div>388 389</div>390</body>391</html>