GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Ultra 4D Product Page</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width:1080px;11 height:2400px;12 overflow:hidden;13 background:#ffffff;14 color:#111;15 }16 17 /* Status bar */18 .status-bar {19 height:72px;20 padding:20px 28px 0 28px;21 display:flex;22 align-items:center;23 justify-content:space-between;24 box-sizing:border-box;25 }26 .status-left {27 display:flex;28 gap:22px;29 align-items:center;30 }31 .dot {32 width:16px; height:16px; background:#eaeaea; border-radius:50%; border:2px solid #d0d0d0;33 }34 .status-right {35 display:flex; gap:22px; align-items:center;36 }37 .wifi {38 width:24px; height:18px; border:2px solid #444; border-top-left-radius:18px; border-top-right-radius:18px; border-bottom:none; position:relative;39 }40 .battery {41 width:30px; height:16px; border:2px solid #444; position:relative;42 }43 .battery:after {44 content:""; position:absolute; right:-6px; top:4px; width:6px; height:8px; background:#444;45 }46 47 /* Header */48 .header {49 padding:10px 32px 16px 32px;50 display:flex;51 align-items:center;52 justify-content:space-between;53 }54 .title {55 font-size:44px; font-weight:700; letter-spacing:1px;56 }57 .price-close {58 display:flex; align-items:center; gap:26px;59 }60 .price-tag {61 border:3px solid #111; padding:12px 22px; border-radius:6px; font-weight:700; font-size:36px; letter-spacing:1px;62 }63 .close-btn {64 width:56px; height:56px; border:3px solid #111; border-radius:10px; display:flex; align-items:center; justify-content:center;65 }66 .close-btn svg { width:34px; height:34px; }67 68 /* Carousel preview */69 .carousel {70 margin:8px 16px 0 16px;71 padding:16px;72 display:flex;73 gap:22px;74 overflow:hidden;75 border-top:1px solid #efefef;76 border-bottom:1px solid #efefef;77 }78 .thumb {79 width:180px; height:90px;80 background:#E0E0E0; border:1px solid #BDBDBD;81 display:flex; align-items:center; justify-content:center;82 color:#666; font-size:22px; border-radius:10px;83 }84 .thumb.selected { outline:6px solid #dfe3e6; }85 86 /* Size section */87 .size-section { padding:28px; }88 .size-row { display:flex; align-items:center; gap:18px; margin-bottom:18px; }89 .size-label { font-size:36px; font-weight:700; letter-spacing:1px; }90 .ruler {91 width:96px; height:64px; border:3px solid #111; border-radius:8px; display:flex; align-items:center; justify-content:center;92 }93 .ruler:before { content:"▭"; font-size:42px; color:#111; }94 .chips {95 display:flex; gap:24px; overflow:auto; padding-bottom:6px;96 }97 .chip {98 padding:18px 26px;99 border-radius:30px;100 border:2px solid #cfcfcf;101 font-size:34px;102 white-space:nowrap;103 color:#444;104 }105 .chip.selected {106 border:6px solid #111;107 color:#111;108 font-weight:700;109 padding:14px 22px;110 }111 112 /* Buttons */113 .action-area { padding:16px 28px; }114 .btn-outline {115 width:100%; height:104px; border:3px solid #111; border-radius:10px;116 background:#fff; font-size:38px; font-weight:700; letter-spacing:2px;117 display:flex; align-items:center; justify-content:space-between; padding:0 26px; box-sizing:border-box; margin-bottom:18px;118 }119 .btn-solid {120 width:100%; height:110px; border-radius:10px; background:#111; color:#fff; font-size:40px; font-weight:800; letter-spacing:2px;121 display:flex; align-items:center; justify-content:space-between; padding:0 30px; box-sizing:border-box;122 }123 .btn-icon {124 width:60px; height:60px; border:3px solid currentColor; border-radius:10px; display:flex; align-items:center; justify-content:center;125 }126 127 .payments { padding:18px 28px; display:flex; gap:32px; align-items:center; }128 .pay-badge {129 border:2px solid #d6d6d6; border-radius:12px; padding:18px 26px; font-size:34px; color:#444; background:#fafafa;130 }131 132 .link-row { padding:18px 28px; }133 .link-row a { color:#111; text-decoration:underline; font-size:36px; font-weight:700; letter-spacing:1px; }134 135 /* Free shipping band */136 .band {137 margin-top:10px;138 display:flex; align-items:center; justify-content:space-between;139 padding:26px 28px;140 border-top:1px solid #efefef; border-bottom:1px solid #efefef;141 }142 .band-left { display:flex; gap:34px; align-items:center; }143 .circle-icon, .info-icon {144 width:64px; height:64px; border:3px solid #999; border-radius:50%;145 display:flex; align-items:center; justify-content:center; color:#666; font-weight:700;146 }147 .band-text { font-size:34px; letter-spacing:1px; color:#111; }148 .band-text small { display:block; font-size:30px; color:#666; letter-spacing:0.5px; }149 150 /* Gray fine print */151 .fine-print {152 padding:26px 28px; color:#9a9a9a; font-size:32px; line-height:44px;153 }154 155 /* Headline section */156 .headline {157 padding:30px 28px 8px 28px;158 }159 .headline h1 {160 font-size:64px; line-height:72px; letter-spacing:1px; margin:0 0 12px 0; font-weight:900;161 }162 .desc {163 padding:0 28px;164 font-size:34px; line-height:46px; color:#222;165 }166 167 /* Sticky bottom indicator (visual only) */168 .home-indicator {169 position:absolute;170 bottom:26px; left:50%; transform:translateX(-50%);171 width:420px; height:10px; background:#cfcfcf; border-radius:6px;172 }173</style>174</head>175<body>176<div id="render-target">177 178 <!-- Status Bar -->179 <div class="status-bar">180 <div class="status-left">181 <div style="font-size:30px; color:#777;">8:31</div>182 <div class="dot"></div>183 <div class="dot"></div>184 <div class="dot"></div>185 <div class="dot"></div>186 <div class="dot" style="background:#d7d7d7;"></div>187 </div>188 <div class="status-right">189 <div class="wifi"></div>190 <div class="battery"></div>191 </div>192 </div>193 194 <!-- Header -->195 <div class="header">196 <div class="title">ULTRA 4D</div>197 <div class="price-close">198 <div class="price-tag">$220.00</div>199 <div class="close-btn" aria-label="Close">200 <svg viewBox="0 0 24 24">201 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" stroke-linecap="round"/>202 </svg>203 </div>204 </div>205 </div>206 207 <!-- Carousel Thumbnails -->208 <div class="carousel">209 <div class="thumb">[IMG: Cream Shoe]</div>210 <div class="thumb">[IMG: Black Shoe]</div>211 <div class="thumb">[IMG: Beige/Blue Shoe]</div>212 <div class="thumb">[IMG: Tan Shoe]</div>213 <div class="thumb">[IMG: Grey/Black Shoe]</div>214 <div class="thumb selected">[IMG: Black/Green Shoe]</div>215 </div>216 217 <!-- Size Section -->218 <div class="size-section">219 <div class="size-row">220 <div class="size-label">SIZE</div>221 <div class="ruler" title="Size Guide"></div>222 </div>223 <div class="chips">224 <div class="chip">W 9.5</div>225 <div class="chip">M 9 / W 10</div>226 <div class="chip selected">M 9.5 / W 10.5</div>227 <div class="chip">M 10 / W 11</div>228 <div class="chip">M 11 / W 12</div>229 <div class="chip">M 12 / W 13</div>230 </div>231 </div>232 233 <!-- Buttons -->234 <div class="action-area">235 <button class="btn-outline">236 <span>ADD TO BAG</span>237 <span class="btn-icon">238 <svg viewBox="0 0 24 24">239 <rect x="3" y="8" width="18" height="12" fill="none" stroke="#111" stroke-width="2"/>240 <path d="M8 8 V6 a4 4 0 0 1 8 0 v2" fill="none" stroke="#111" stroke-width="2"/>241 <path d="M12 11 v6 M9 14 h6" stroke="#111" stroke-width="2"/>242 </svg>243 </span>244 </button>245 246 <button class="btn-solid">247 <span>BUY IT NOW</span>248 <span style="display:flex; align-items:center;">249 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">250 <path d="M5 12h12" stroke="#fff" stroke-width="2" stroke-linecap="round"/>251 <path d="M12 6l6 6-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 </span>254 </button>255 </div>256 257 <!-- Payment badges -->258 <div class="payments">259 <div class="pay-badge">G Pay</div>260 <div class="pay-badge">PayPal</div>261 <div class="pay-badge">Klarna.</div>262 </div>263 264 <!-- Link -->265 <div class="link-row"><a href="#">CHECK STORES NEARBY</a></div>266 267 <!-- Free shipping band -->268 <div class="band">269 <div class="band-left">270 <div class="circle-icon">271 <svg width="28" height="28" viewBox="0 0 24 24">272 <path d="M4 12l4 4 12-12" stroke="#777" stroke-width="2" fill="none"/>273 </svg>274 </div>275 <div class="band-text">276 FREE SHIPPING + FREE RETURNS &<br/>277 <small>EXCHANGES</small>278 </div>279 </div>280 <div class="info-icon">i</div>281 </div>282 283 <!-- Fine print -->284 <div class="fine-print">285 This product is excluded from all promotional discounts and offers. Try this shoe for 30 days and return hassle-free with our performance running shoe return guarantee.286 </div>287 288 <!-- Headline and description -->289 <div class="headline">290 <h1>IMPACT-ABSORBING SHOES MADE IN PART WITH RECYCLED MATERIALS.</h1>291 </div>292 <div class="desc">293 Wherever you go, these shoes make sure comfort is along for the ride. Made with a 3D‑printed adidas294 midsole feel, they deliver cushioning with every step.295 </div>296 297 <div class="home-indicator"></div>298</div>299</body>300</html>