GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>42-size Black sneakers</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 color: #111;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px;19 padding: 0 28px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-size: 34px;24 color: #000;25 }26 .status-left {27 display: flex;28 align-items: center;29 gap: 20px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 18px;35 }36 .dot {37 width: 22px;38 height: 22px;39 background: #000;40 border-radius: 50%;41 }42 .status-right {43 display: flex;44 align-items: center;45 gap: 16px;46 }47 .battery {48 display: flex;49 align-items: center;50 gap: 12px;51 font-size: 28px;52 }53 .battery-icon {54 width: 46px;55 height: 24px;56 border: 3px solid #000;57 border-radius: 5px;58 position: relative;59 }60 .battery-icon::after {61 content: "";62 position: absolute;63 right: -10px;64 top: 6px;65 width: 6px;66 height: 12px;67 background: #000;68 border-radius: 2px;69 }70 .battery-fill {71 width: 32px;72 height: 16px;73 background: #000;74 position: absolute;75 left: 4px;76 top: 4px;77 border-radius: 3px;78 }79 80 /* Header */81 .header {82 height: 120px;83 padding: 0 28px;84 display: flex;85 align-items: center;86 justify-content: space-between;87 border-bottom: 1px solid #eee;88 }89 .header-left {90 display: flex;91 align-items: center;92 gap: 24px;93 }94 .back-btn {95 width: 66px;96 height: 66px;97 display: flex;98 align-items: center;99 justify-content: center;100 }101 .header-title {102 font-size: 44px;103 font-weight: 700;104 }105 .header-actions {106 display: flex;107 align-items: center;108 gap: 34px;109 }110 .icon-btn {111 width: 66px;112 height: 66px;113 display: flex;114 align-items: center;115 justify-content: center;116 }117 .icon {118 width: 40px; height: 40px;119 }120 121 /* Content grid */122 .content {123 padding: 28px;124 }125 .product-grid {126 display: grid;127 grid-template-columns: 504px 504px;128 grid-column-gap: 24px;129 grid-row-gap: 32px;130 }131 .card {132 background: #fff;133 }134 .img-wrap {135 position: relative;136 width: 100%;137 height: 440px;138 background: #F7F7F7;139 border: 1px solid #D0D0D0;140 display: flex;141 align-items: center;142 justify-content: center;143 color: #757575;144 font-size: 28px;145 }146 .heart {147 position: absolute;148 right: 24px;149 top: 24px;150 width: 78px;151 height: 78px;152 border-radius: 50%;153 background: #fff;154 border: 2px solid #e3e3e3;155 display: flex;156 align-items: center;157 justify-content: center;158 }159 .heart svg { width: 40px; height: 40px; }160 161 .card-body {162 padding: 22px 10px 10px;163 }164 .label-orange {165 color: #d14a2f;166 font-weight: 700;167 margin-bottom: 8px;168 font-size: 34px;169 }170 .title {171 font-size: 38px;172 font-weight: 700;173 margin-bottom: 8px;174 }175 .subtitle {176 font-size: 32px;177 color: #777;178 margin-bottom: 20px;179 }180 .price-row {181 display: flex;182 align-items: baseline;183 gap: 20px;184 font-size: 40px;185 font-weight: 700;186 }187 .strike {188 color: #9e9e9e;189 text-decoration: line-through;190 font-weight: 500;191 font-size: 36px;192 }193 .dots {194 margin-top: 24px;195 display: flex;196 gap: 22px;197 }198 .color-dot {199 width: 26px;200 height: 26px;201 background: #111;202 border-radius: 50%;203 }204 205 /* Floating filter button */206 .filter-fab {207 position: absolute;208 right: 40px;209 bottom: 320px;210 width: 132px;211 height: 132px;212 background: #fff;213 border-radius: 50%;214 box-shadow: 0 8px 20px rgba(0,0,0,0.15);215 border: 1px solid #e5e5e5;216 display: flex;217 align-items: center;218 justify-content: center;219 }220 .slider-icon { width: 62px; height: 62px; }221 222 /* Extra heart near bottom-left (preview of next card) */223 .bottom-heart {224 position: absolute;225 left: 320px;226 bottom: 280px;227 width: 78px;228 height: 78px;229 border-radius: 50%;230 background: #fff;231 border: 2px solid #e3e3e3;232 display: flex;233 align-items: center;234 justify-content: center;235 }236 237 /* Home indicator */238 .home-indicator {239 position: absolute;240 left: 50%;241 transform: translateX(-50%);242 bottom: 32px;243 width: 420px;244 height: 16px;245 background: #000;246 border-radius: 10px;247 opacity: 0.9;248 }249</style>250</head>251<body>252<div id="render-target">253 254 <!-- Status Bar -->255 <div class="status-bar">256 <div class="status-left">257 <div style="font-weight:600;">1:26</div>258 <div class="status-icons">259 <div class="dot"></div>260 <div class="dot" style="opacity:.8;"></div>261 <div class="dot" style="opacity:.6;"></div>262 </div>263 </div>264 <div class="status-right">265 <div class="battery">266 <div class="battery-icon"><div class="battery-fill"></div></div>267 <span>100%</span>268 </div>269 </div>270 </div>271 272 <!-- Header -->273 <div class="header">274 <div class="header-left">275 <div class="back-btn">276 <svg class="icon" viewBox="0 0 24 24">277 <path d="M15.5 4.5L6 12l9.5 7.5" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>278 </svg>279 </div>280 <div class="header-title">42-size Black sneakers</div>281 </div>282 <div class="header-actions">283 <div class="icon-btn">284 <svg class="icon" viewBox="0 0 24 24">285 <circle cx="11" cy="11" r="7" fill="none" stroke="#000" stroke-width="2"/>286 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#000" stroke-width="2" stroke-linecap="round"/>287 </svg>288 </div>289 <div class="icon-btn">290 <svg class="icon" viewBox="0 0 24 24">291 <path d="M7 7h10l1 10H6L7 7z" fill="none" stroke="#000" stroke-width="2"/>292 <path d="M9 7V5h6v2" fill="none" stroke="#000" stroke-width="2"/>293 </svg>294 </div>295 </div>296 </div>297 298 <!-- Content -->299 <div class="content">300 <div class="product-grid">301 302 <!-- Card 1 -->303 <div class="card">304 <div class="img-wrap">305 [IMG: Nike Roshe One (Black)]306 <div class="heart">307 <svg viewBox="0 0 24 24">308 <path d="M12 21s-7-4.8-7-10.2C5 7 7.2 5 9.8 5c1.5 0 2.6.7 3.2 1.7C13.6 5.7 14.7 5 16.2 5 18.8 5 21 7 21 10.8 21 16.2 12 21 12 21z" fill="none" stroke="#000" stroke-width="1.6"/>309 </svg>310 </div>311 </div>312 <div class="card-body">313 <div class="title">Nike Roshe One</div>314 <div class="subtitle">Men's Shoe</div>315 <div class="price-row">316 <span>$49.97</span>317 <span class="strike">$75</span>318 </div>319 </div>320 </div>321 322 <!-- Card 2 -->323 <div class="card">324 <div class="img-wrap">325 [IMG: Air Jordan 1 Mid (Black High-Top)]326 <div class="heart">327 <svg viewBox="0 0 24 24">328 <path d="M12 21s-7-4.8-7-10.2C5 7 7.2 5 9.8 5c1.5 0 2.6.7 3.2 1.7C13.6 5.7 14.7 5 16.2 5 18.8 5 21 7 21 10.8 21 16.2 12 21 12 21z" fill="none" stroke="#000" stroke-width="1.6"/>329 </svg>330 </div>331 </div>332 <div class="card-body">333 <div class="title">Air Jordan 1 Mid</div>334 <div class="subtitle">Shoes</div>335 <div class="price-row">336 <span>$125</span>337 </div>338 </div>339 </div>340 341 <!-- Card 3 -->342 <div class="card">343 <div class="img-wrap">344 [IMG: Nike Air Max 270 (All Black)]345 <div class="heart" style="right: 24px; top: 24px;">346 <svg viewBox="0 0 24 24">347 <path d="M12 21s-7-4.8-7-10.2C5 7 7.2 5 9.8 5c1.5 0 2.6.7 3.2 1.7C13.6 5.7 14.7 5 16.2 5 18.8 5 21 7 21 10.8 21 16.2 12 21 12 21z" fill="none" stroke="#000" stroke-width="1.6"/>348 </svg>349 </div>350 </div>351 <div class="card-body">352 <div class="label-orange">Best Seller</div>353 <div class="title">Nike Air Max 270</div>354 <div class="subtitle">Women's Shoes</div>355 <div class="price-row"><span>$160</span></div>356 <div class="dots">357 <div class="color-dot"></div>358 <div class="color-dot"></div>359 </div>360 </div>361 </div>362 363 <!-- Card 4 -->364 <div class="card">365 <div class="img-wrap">366 [IMG: Nike Air Max 270 (Black/White)]367 <div class="heart">368 <svg viewBox="0 0 24 24">369 <path d="M12 21s-7-4.8-7-10.2C5 7 7.2 5 9.8 5c1.5 0 2.6.7 3.2 1.7C13.6 5.7 14.7 5 16.2 5 18.8 5 21 7 21 10.8 21 16.2 12 21 12 21z" fill="none" stroke="#000" stroke-width="1.6"/>370 </svg>371 </div>372 </div>373 <div class="card-body">374 <div class="label-orange">Best Seller</div>375 <div class="title">Nike Air Max 270</div>376 <div class="subtitle">Men's Shoes</div>377 <div class="price-row"><span>$160</span></div>378 <div class="dots">379 <div class="color-dot"></div>380 <div class="color-dot"></div>381 </div>382 </div>383 </div>384 385 </div>386 </div>387 388 <!-- Floating controls -->389 <div class="bottom-heart">390 <svg viewBox="0 0 24 24" style="width:40px;height:40px;">391 <path d="M12 21s-7-4.8-7-10.2C5 7 7.2 5 9.8 5c1.5 0 2.6.7 3.2 1.7C13.6 5.7 14.7 5 16.2 5 18.8 5 21 7 21 10.8 21 16.2 12 21 12 21z" fill="none" stroke="#000" stroke-width="1.6"/>392 </svg>393 </div>394 395 <div class="filter-fab">396 <svg class="slider-icon" viewBox="0 0 24 24">397 <line x1="4" y1="6" x2="20" y2="6" stroke="#000" stroke-width="2" stroke-linecap="round"/>398 <circle cx="9" cy="6" r="2.4" fill="#000"/>399 <line x1="4" y1="12" x2="20" y2="12" stroke="#000" stroke-width="2" stroke-linecap="round"/>400 <circle cx="15" cy="12" r="2.4" fill="#000"/>401 <line x1="4" y1="18" x2="20" y2="18" stroke="#000" stroke-width="2" stroke-linecap="round"/>402 <circle cx="7" cy="18" r="2.4" fill="#000"/>403 </svg>404 </div>405 406 <!-- Home indicator -->407 <div class="home-indicator"></div>408 409</div>410</body>411</html>