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>Mayze Classic Women's Sneakers - Listing</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: Arial, Helvetica, sans-serif;16 color: #111;17 }18 19 /* Status bar */20 .status-bar {21 height: 88px;22 padding: 0 30px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-size: 30px;27 color: #555;28 }29 .status-right {30 display: flex;31 gap: 24px;32 align-items: center;33 }34 .dot {35 width: 32px; height: 32px; background:#9e9e9e; border-radius:6px;36 }37 38 /* App bar with actions */39 .appbar {40 height: 96px;41 display: flex;42 align-items: center;43 padding: 0 32px;44 justify-content: space-between;45 }46 .left-actions, .right-actions { display: flex; align-items: center; gap: 28px; }47 .icon-btn {48 width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;49 }50 .title {51 padding: 16px 32px 8px 32px;52 }53 .title h1 {54 margin: 0;55 font-size: 64px;56 line-height: 1.1;57 letter-spacing: 0.5px;58 font-weight: 800;59 }60 61 .meta-row {62 padding: 8px 32px 8px 32px;63 display: flex;64 align-items: center;65 justify-content: space-between;66 }67 .meta-row .left {68 font-size: 28px;69 font-weight: 700;70 color: #222;71 }72 .meta-row .right {73 display: inline-flex; align-items: center; gap: 10px;74 font-size: 28px; font-weight: 700;75 }76 .grid {77 padding: 20px 32px 200px 32px;78 display: grid;79 grid-template-columns: repeat(2, 1fr);80 gap: 36px;81 }82 .product-card {83 display: flex;84 flex-direction: column;85 }86 .img-box {87 position: relative;88 width: 100%;89 height: 420px;90 background: #E0E0E0;91 border: 1px solid #BDBDBD;92 border-radius: 8px;93 display: flex;94 align-items: center;95 justify-content: center;96 color: #757575;97 font-size: 28px;98 }99 .badge {100 position: absolute;101 top: 16px;102 left: 16px;103 background: #bfa77d;104 color: #fff;105 font-weight: 800;106 font-size: 24px;107 padding: 8px 14px;108 border-radius: 4px;109 }110 .badge.exclusive { top: 16px; left: 16px; }111 .heart {112 position: absolute;113 top: 16px;114 right: 16px;115 width: 56px; height: 56px;116 display: inline-flex; align-items: center; justify-content: center;117 }118 119 .colors {120 margin-top: 18px;121 font-size: 26px;122 color: #666;123 display: flex; align-items: center; gap: 10px;124 }125 .name {126 margin-top: 10px;127 font-size: 34px;128 font-weight: 800;129 line-height: 1.2;130 }131 .price {132 margin-top: 14px;133 font-size: 36px;134 font-weight: 800;135 }136 137 /* Bottom navigation */138 .bottom-nav {139 position: absolute;140 left: 0; right: 0; bottom: 0;141 height: 180px;142 border-top: 1px solid #e5e5e5;143 background: #fff;144 display: flex;145 align-items: center;146 justify-content: space-around;147 padding-bottom: 24px;148 }149 .nav-item {150 width: 20%;151 display: flex;152 flex-direction: column;153 align-items: center;154 gap: 6px;155 color: #8d8d8d;156 font-size: 24px;157 font-weight: 700;158 }159 .nav-item .icon-wrap {160 width: 56px; height: 56px; display:flex; align-items:center; justify-content:center;161 }162 .nav-item.active { color: #111; }163 .badge-dot {164 position: absolute;165 top: -6px; right: -8px;166 background: #c7b388; color: #fff; border-radius: 12px;167 font-size: 20px; font-weight: 800; padding: 2px 8px;168 }169 .handle {170 position: absolute;171 left: 50%;172 transform: translateX(-50%);173 bottom: 12px;174 width: 360px; height: 10px;175 background: #000;176 opacity: 0.15;177 border-radius: 8px;178 }179 180 /* Utility */181 .caret-down {182 width: 14px; height: 14px; border-left: 2px solid #666; border-bottom: 2px solid #666;183 transform: rotate(-45deg); margin-top: -6px;184 }185</style>186</head>187<body>188<div id="render-target">189 190 <!-- Status bar -->191 <div class="status-bar">192 <div>10:23</div>193 <div class="status-right">194 <div>14°</div>195 <div class="dot"></div>196 <div class="dot" style="width:44px;"></div>197 <div class="dot" style="border-radius:50%;"></div>198 </div>199 </div>200 201 <!-- App bar -->202 <div class="appbar">203 <div class="left-actions">204 <div class="icon-btn" aria-label="Back">205 <svg width="44" height="44" viewBox="0 0 48 48">206 <path d="M28 10 L14 24 L28 38" fill="none" stroke="#111" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>207 </svg>208 </div>209 </div>210 <div class="right-actions">211 <div class="icon-btn" aria-label="Filter">212 <svg width="44" height="44" viewBox="0 0 48 48">213 <path d="M8 12h22M36 12h4M8 24h14M26 24h14M8 36h26M38 36h2" stroke="#111" stroke-width="4" stroke-linecap="round" fill="none"/>214 <circle cx="30" cy="12" r="3" fill="#111"/>215 <circle cx="22" cy="24" r="3" fill="#111"/>216 <circle cx="34" cy="36" r="3" fill="#111"/>217 </svg>218 </div>219 <div class="icon-btn" aria-label="Search">220 <svg width="44" height="44" viewBox="0 0 48 48">221 <circle cx="20" cy="20" r="12" stroke="#111" stroke-width="4" fill="none"/>222 <path d="M31 31 L42 42" stroke="#111" stroke-width="4" stroke-linecap="round"/>223 </svg>224 </div>225 </div>226 </div>227 228 <!-- Title -->229 <div class="title">230 <h1>MAYZE CLASSIC WOMEN'S SNEAKERS</h1>231 </div>232 233 <!-- Meta -->234 <div class="meta-row">235 <div class="left">32 PRODUCTS</div>236 <div class="right">237 <span>SORT</span>238 <svg width="30" height="30" viewBox="0 0 24 24">239 <path d="M8 4v14M8 18l-3-3m3 3l3-3M16 20V6m0 0l-3 3m3-3l3 3" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240 </svg>241 </div>242 </div>243 244 <!-- Grid -->245 <div class="grid">246 247 <!-- Card 1 -->248 <div class="product-card">249 <div class="img-box">250 <div class="badge">AR</div>251 <div class="heart">252 <svg width="44" height="44" viewBox="0 0 48 48">253 <path d="M24 42s-12-7.3-18-15C2 20 4 12 11 10c4-1 8 1 10 5 2-4 6-6 10-5 7 2 9 10 5 17-6 8-18 15-18 15z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>254 </svg>255 </div>256 [IMG: White Sneaker]257 </div>258 <div class="colors">2 Colors <span class="caret-down"></span></div>259 <div class="name">Mayze Classic Women's Sneakers</div>260 <div class="price">$90.00</div>261 </div>262 263 <!-- Card 2 -->264 <div class="product-card">265 <div class="img-box">266 <div class="badge">AR</div>267 <div class="heart">268 <svg width="44" height="44" viewBox="0 0 48 48">269 <path d="M24 42s-12-7.3-18-15C2 20 4 12 11 10c4-1 8 1 10 5 2-4 6-6 10-5 7 2 9 10 5 17-6 8-18 15-18 15z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>270 </svg>271 </div>272 [IMG: Black Sneaker]273 </div>274 <div class="colors">2 Colors <span class="caret-down"></span></div>275 <div class="name">Mayze Classic Women's Sneakers</div>276 <div class="price">$90.00</div>277 </div>278 279 <!-- Card 3 -->280 <div class="product-card">281 <div class="img-box">282 <div class="badge exclusive">EXCLUSIVE</div>283 <div class="heart">284 <svg width="44" height="44" viewBox="0 0 48 48">285 <path d="M24 42s-12-7.3-18-15C2 20 4 12 11 10c4-1 8 1 10 5 2-4 6-6 10-5 7 2 9 10 5 17-6 8-18 15-18 15z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>286 </svg>287 </div>288 [IMG: White/Beige Sneaker]289 </div>290 <div class="colors">2 Colors <span class="caret-down"></span></div>291 <div class="name">Mayze Women's Sneakers</div>292 <div class="price">$90.00</div>293 </div>294 295 <!-- Card 4 -->296 <div class="product-card">297 <div class="img-box">298 <div class="heart">299 <svg width="44" height="44" viewBox="0 0 48 48">300 <path d="M24 42s-12-7.3-18-15C2 20 4 12 11 10c4-1 8 1 10 5 2-4 6-6 10-5 7 2 9 10 5 17-6 8-18 15-18 15z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>301 </svg>302 </div>303 [IMG: White Sneaker Black Heel]304 </div>305 <div class="colors">1 Color</div>306 <div class="name">Mayze Stack Women's Sneakers</div>307 <div class="price">$90.00</div>308 </div>309 310 </div>311 312 <!-- Bottom navigation -->313 <div class="bottom-nav">314 <div class="nav-item">315 <div class="icon-wrap">316 <svg width="44" height="44" viewBox="0 0 48 48">317 <path d="M8 22l16-12 16 12v16a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V22z" fill="none" stroke="#8d8d8d" stroke-width="3" stroke-linejoin="round"/>318 </svg>319 </div>320 <div>HOME</div>321 </div>322 <div class="nav-item">323 <div class="icon-wrap">324 <svg width="44" height="44" viewBox="0 0 48 48">325 <rect x="8" y="10" width="32" height="26" rx="2" ry="2" fill="none" stroke="#8d8d8d" stroke-width="3"/>326 <path d="M8 18h32M18 10v8" stroke="#8d8d8d" stroke-width="3"/>327 </svg>328 </div>329 <div>DROPS</div>330 </div>331 <div class="nav-item active">332 <div class="icon-wrap">333 <svg width="44" height="44" viewBox="0 0 48 48">334 <circle cx="20" cy="20" r="12" stroke="#111" stroke-width="3" fill="none"/>335 <path d="M30 30l10 10" stroke="#111" stroke-width="3" stroke-linecap="round"/>336 </svg>337 </div>338 <div>SHOP</div>339 </div>340 <div class="nav-item">341 <div class="icon-wrap">342 <svg width="44" height="44" viewBox="0 0 48 48">343 <path d="M6 10h6l4 24h20l4-16H14" fill="none" stroke="#8d8d8d" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>344 <circle cx="22" cy="40" r="2.5" fill="#8d8d8d"/>345 <circle cx="36" cy="40" r="2.5" fill="#8d8d8d"/>346 </svg>347 </div>348 <div>CART</div>349 </div>350 <div class="nav-item">351 <div class="icon-wrap" style="position:relative;">352 <svg width="44" height="44" viewBox="0 0 48 48">353 <circle cx="24" cy="16" r="8" fill="none" stroke="#8d8d8d" stroke-width="3"/>354 <path d="M8 40c2-8 12-10 16-10s14 2 16 10" fill="none" stroke="#8d8d8d" stroke-width="3" stroke-linecap="round"/>355 </svg>356 <span class="badge-dot">3</span>357 </div>358 <div>ACCOUNT</div>359 </div>360 <div class="handle"></div>361 </div>362 363</div>364</body>365</html>