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>Product Detail - Aerolite Shin Guards</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #f4f4f6;15 }16 17 /* Top status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 140px;24 background: #222629;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 40px;29 box-sizing: border-box;30 font-size: 40px;31 }32 .status-left { display: flex; align-items: center; gap: 24px; }33 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }34 .status-dot { width: 16px; height: 16px; background: #cfcfcf; border-radius: 50%; display: inline-block; }35 36 /* Header with search */37 .header {38 position: absolute;39 top: 140px;40 left: 0;41 width: 1080px;42 height: 140px;43 background: #272b2e;44 display: flex;45 align-items: center;46 box-sizing: border-box;47 padding: 0 36px;48 }49 .hamburger {50 width: 72px;51 height: 72px;52 display: inline-flex;53 align-items: center;54 justify-content: center;55 margin-right: 24px;56 }57 .search-wrap {58 flex: 1;59 height: 92px;60 background: #fff;61 border-radius: 46px;62 display: flex;63 align-items: center;64 padding: 0 32px;65 box-shadow: 0 2px 2px rgba(0,0,0,0.14);66 }67 .search-input {68 border: none;69 outline: none;70 font-size: 40px;71 flex: 1;72 color: #545454;73 }74 .scan-icon {75 width: 72px;76 height: 72px;77 border-radius: 18px;78 display: inline-flex;79 align-items: center;80 justify-content: center;81 margin-left: 16px;82 }83 84 /* Content */85 .content {86 position: absolute;87 top: 280px;88 left: 0;89 right: 0;90 bottom: 0;91 overflow-y: auto;92 padding: 0 36px 36px 36px;93 box-sizing: border-box;94 }95 .title {96 font-size: 64px;97 font-weight: 600;98 color: #111;99 margin: 24px 0 8px;100 }101 .rating-row {102 display: flex;103 align-items: center;104 gap: 16px;105 margin: 8px 0 16px;106 }107 .rating-row .count {108 font-size: 36px;109 color: #5b6a7a;110 background: #e9eefc;111 border-radius: 24px;112 padding: 8px 16px;113 }114 115 .price-row {116 display: flex;117 align-items: baseline;118 gap: 24px;119 margin: 8px 0 24px;120 }121 .price-now { color: #e53935; font-size: 56px; font-weight: 700; }122 .price-msrp { color: #8e8e8e; font-size: 44px; text-decoration: line-through; }123 124 .label-line {125 display: flex;126 align-items: baseline;127 gap: 12px;128 margin: 12px 0 20px;129 }130 .label-line .label { font-size: 42px; color: #777; font-weight: 600; }131 .label-line .value { font-size: 42px; color: #111; }132 133 .thumbs {134 display: grid;135 grid-template-columns: repeat(4, 1fr);136 gap: 24px;137 margin: 12px 0 32px;138 }139 .thumb {140 height: 220px;141 background: #E0E0E0;142 border: 2px solid #BDBDBD;143 border-radius: 16px;144 display: flex;145 align-items: center;146 justify-content: center;147 color: #757575;148 font-size: 34px;149 }150 .thumb.selected {151 border-color: #3b6cff;152 box-shadow: 0 0 0 3px rgba(59,108,255,0.2);153 }154 155 .size-header {156 display: flex;157 align-items: center;158 margin: 14px 0 18px;159 }160 .size-header .label { font-size: 44px; color: #777; font-weight: 700; }161 .size-header .guide { margin-left: auto; font-size: 36px; color: #7d7d85; text-decoration: underline; }162 163 .chip-row {164 display: grid;165 grid-template-columns: repeat(3, 1fr);166 gap: 24px;167 margin-bottom: 36px;168 }169 .chip {170 height: 120px;171 background: #fff;172 border: 2px solid #e3e3e7;173 border-radius: 18px;174 display: flex;175 align-items: center;176 justify-content: center;177 font-size: 42px;178 color: #333;179 font-weight: 600;180 }181 182 .cta {183 height: 120px;184 background: #000;185 border-radius: 18px;186 display: flex;187 align-items: center;188 justify-content: center;189 color: #fff;190 font-size: 44px;191 font-weight: 800;192 letter-spacing: 2px;193 margin: 18px 0 32px;194 text-transform: uppercase;195 }196 197 .promo {198 height: 340px;199 background: #E0E0E0;200 border: 1px solid #BDBDBD;201 border-radius: 12px;202 display: flex;203 align-items: center;204 justify-content: center;205 color: #555;206 font-size: 40px;207 margin: 22px 0 28px;208 }209 210 .note {211 text-align: center;212 color: #9a9aa0;213 font-size: 38px;214 margin: 18px 0 12px;215 }216 217 .accordion {218 margin-top: 10px;219 background: #fff;220 border-top: 1px solid #e5e5ea;221 border-bottom: 1px solid #e5e5ea;222 border-radius: 12px;223 overflow: hidden;224 }225 .acc-item {226 height: 140px;227 display: flex;228 align-items: center;229 padding: 0 24px 0 24px;230 font-size: 44px;231 color: #222;232 border-bottom: 1px solid #eeeeef;233 }234 .acc-item:last-child { border-bottom: none; }235 .acc-item .spacer { margin-left: auto; }236 .plus-icon {237 width: 56px;238 height: 56px;239 }240 241 /* Bottom gesture bar mimic */242 .gesture {243 position: absolute;244 bottom: 24px;245 left: 50%;246 transform: translateX(-50%);247 width: 300px;248 height: 16px;249 background: #cfcfd3;250 border-radius: 10px;251 }252 /* SVG colors */253 .icon-blue { fill: #1e88e5; }254 .icon-outline { stroke: #1e88e5; stroke-width: 18; fill: none; }255</style>256</head>257<body>258<div id="render-target">259 260 <!-- Status bar -->261 <div class="status-bar">262 <div class="status-left">263 <div>8:42</div>264 <span class="status-dot"></span>265 <span class="status-dot"></span>266 <span class="status-dot"></span>267 <span class="status-dot"></span>268 </div>269 <div class="status-right">270 <!-- Simple battery and signal shapes -->271 <svg width="46" height="46" viewBox="0 0 24 24">272 <rect x="3" y="7" width="15" height="10" rx="2" ry="2" fill="#fff"></rect>273 <rect x="19" y="10" width="2" height="4" fill="#fff"></rect>274 </svg>275 <svg width="46" height="46" viewBox="0 0 24 24">276 <path d="M3 20h2v-2H3v2zm3 0h2v-4H6v4zm3 0h2v-6H9v6zm3 0h2v-8h-2v8zm3 0h2V8h-2v12z" fill="#fff"></path>277 </svg>278 </div>279 </div>280 281 <!-- Header with search -->282 <div class="header">283 <div class="hamburger">284 <svg width="60" height="60" viewBox="0 0 24 24">285 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="#fff"></path>286 </svg>287 </div>288 <div class="search-wrap">289 <input class="search-input" value="Cycle life guard" />290 <div class="scan-icon">291 <svg width="60" height="60" viewBox="0 0 24 24">292 <rect x="4" y="4" width="16" height="16" rx="3" fill="#7b7b7b"></rect>293 <path d="M7 8h1v8H7V8zm3 0h2v8h-2V8zm5 0h1v8h-1V8z" fill="#fff"></path>294 </svg>295 </div>296 </div>297 </div>298 299 <!-- Main content -->300 <div class="content">301 <div class="title">Aerolite Shin Guards</div>302 303 <div class="rating-row">304 <svg width="44" height="44" viewBox="0 0 24 24" class="icon-blue">305 <path d="M12 .587l3.668 7.431 8.2 1.184-5.934 5.787 1.402 8.011L12 18.896l-7.336 3.999 1.402-8.011L.132 9.202l8.2-1.184L12 .587z"></path>306 </svg>307 <svg width="44" height="44" viewBox="0 0 24 24" class="icon-blue">308 <path d="M12 .587l3.668 7.431 8.2 1.184-5.934 5.787 1.402 8.011L12 18.896l-7.336 3.999 1.402-8.011L.132 9.202l8.2-1.184L12 .587z"></path>309 </svg>310 <svg width="44" height="44" viewBox="0 0 24 24" class="icon-blue">311 <path d="M12 .587l3.668 7.431 8.2 1.184-5.934 5.787 1.402 8.011L12 18.896l-7.336 3.999 1.402-8.011L.132 9.202l8.2-1.184L12 .587z"></path>312 </svg>313 <svg width="44" height="44" viewBox="0 0 24 24" class="icon-blue">314 <path d="M12 .587l3.668 7.431 8.2 1.184-5.934 5.787 1.402 8.011L12 18.896l-7.336 3.999 1.402-8.011L.132 9.202l8.2-1.184L12 .587z"></path>315 </svg>316 <svg width="44" height="44" viewBox="0 0 24 24" class="icon-outline">317 <path d="M12 .587l3.668 7.431 8.2 1.184-5.934 5.787 1.402 8.011L12 18.896l-7.336 3.999 1.402-8.011L.132 9.202l8.2-1.184L12 .587z"></path>318 </svg>319 <span class="count">(10)</span>320 </div>321 322 <div class="price-row">323 <div class="price-now">£7.99</div>324 <div class="price-msrp">MSRP £15.99</div>325 </div>326 327 <div class="label-line">328 <div class="label">Colour:</div>329 <div class="value">Black</div>330 </div>331 332 <div class="thumbs">333 <div class="thumb selected">[IMG: Black Variant]</div>334 <div class="thumb">[IMG: Neon Yellow Variant]</div>335 <div class="thumb">[IMG: Red & Grey Variant]</div>336 <div class="thumb">[IMG: Silver Variant]</div>337 </div>338 339 <div class="size-header">340 <div class="label">Size:</div>341 <div class="guide">Size Guide</div>342 </div>343 344 <div class="chip-row">345 <div class="chip">CHD (XXS)</div>346 <div class="chip">CHD (XS)</div>347 <div class="chip">JUNIOR (S)</div>348 </div>349 <div class="chip-row" style="grid-template-columns: repeat(2, 1fr);">350 <div class="chip">ADULT (M)</div>351 <div class="chip">ADULT (L)</div>352 </div>353 354 <div class="cta">SELECT SIZE</div>355 356 <div class="promo">[IMG: FRASERSPLUS Promo Banner]</div>357 358 <div class="note">In some cases, our online prices may differ from those in-store</div>359 360 <div class="accordion">361 <div class="acc-item">362 <div>Description</div>363 <div class="spacer"></div>364 <svg class="plus-icon" viewBox="0 0 24 24">365 <path d="M11 4h2v16h-2zM4 11h16v2H4z" fill="#777"></path>366 </svg>367 </div>368 <div class="acc-item">369 <div>Delivery Information</div>370 <div class="spacer"></div>371 <svg class="plus-icon" viewBox="0 0 24 24">372 <path d="M11 4h2v16h-2zM4 11h16v2H4z" fill="#777"></path>373 </svg>374 </div>375 <div class="acc-item">376 <div>Returns</div>377 <div class="spacer"></div>378 <svg class="plus-icon" viewBox="0 0 24 24">379 <path d="M11 4h2v16h-2zM4 11h16v2H4z" fill="#777"></path>380 </svg>381 </div>382 </div>383 384 </div>385 386 <div class="gesture"></div>387</div>388</body>389</html>