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>E-commerce Product Page Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #2b2b2b;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 40px;29 box-sizing: border-box;30 font-weight: 600;31 }32 .status-left { font-size: 40px; }33 .status-right {34 margin-left: auto;35 display: flex;36 align-items: center;37 gap: 28px;38 }39 .dot { width: 14px; height: 14px; background: #bfbfbf; border-radius: 50%; display: inline-block; }40 41 /* App bar with search */42 .app-bar {43 position: absolute;44 top: 120px;45 left: 0;46 width: 1080px;47 height: 140px;48 background: #1f1f1f;49 display: flex;50 align-items: center;51 gap: 24px;52 padding: 0 30px;53 box-sizing: border-box;54 }55 .icon-btn {56 width: 72px;57 height: 72px;58 display: flex;59 align-items: center;60 justify-content: center;61 color: #fff;62 }63 .search-pill {64 flex: 1;65 height: 96px;66 background: #ffffff;67 border-radius: 48px;68 display: flex;69 align-items: center;70 padding: 0 28px;71 box-shadow: 0 2px 0 rgba(0,0,0,0.06);72 box-sizing: border-box;73 }74 .search-icon { margin-right: 16px; }75 .search-text {76 color: #333;77 font-size: 36px;78 flex: 1;79 }80 .scan-btn {81 width: 84px;82 height: 84px;83 border-radius: 24px;84 background: #f3f3f3;85 display: flex;86 align-items: center;87 justify-content: center;88 margin-left: 16px;89 }90 91 /* Promo banner */92 .promo {93 position: absolute;94 top: 260px;95 left: 0;96 width: 1080px;97 height: 300px;98 background: #0f0f1f;99 padding: 30px;100 box-sizing: border-box;101 display: flex;102 align-items: center;103 color: #fff;104 }105 .promo-content { flex: 1; }106 .promo-title {107 font-size: 34px;108 line-height: 44px;109 font-weight: 700;110 margin-bottom: 26px;111 }112 .promo-btn {113 width: 340px;114 height: 90px;115 background: #9e63ff;116 color: #fff;117 border-radius: 6px;118 display: flex;119 align-items: center;120 justify-content: center;121 font-weight: 700;122 letter-spacing: 0.5px;123 font-size: 34px;124 }125 .promo-art {126 width: 300px;127 height: 220px;128 margin-left: 20px;129 background: #E0E0E0;130 border: 1px solid #BDBDBD;131 display: flex;132 align-items: center;133 justify-content: center;134 color: #757575;135 font-size: 28px;136 }137 138 /* Info text */139 .info-note {140 position: absolute;141 top: 580px;142 left: 0;143 width: 1080px;144 text-align: center;145 color: #9E9E9E;146 font-size: 34px;147 line-height: 46px;148 padding: 26px 80px;149 box-sizing: border-box;150 }151 152 /* Accordion */153 .accordion {154 position: absolute;155 top: 720px;156 left: 0;157 width: 1080px;158 background: #fff;159 border-top: 1px solid #e5e5e5;160 }161 .acc-item {162 height: 130px;163 border-bottom: 1px solid #e5e5e5;164 display: flex;165 align-items: center;166 justify-content: space-between;167 padding: 0 40px;168 box-sizing: border-box;169 }170 .acc-title { font-size: 42px; color: #222; }171 .plus {172 width: 48px; height: 48px; color: #444;173 display: flex; align-items: center; justify-content: center;174 }175 176 /* Viewed Together header & indicator */177 .viewed-section {178 position: absolute;179 top: 1110px;180 left: 0;181 width: 1080px;182 background: #eef4f9;183 padding: 40px 36px 24px;184 box-sizing: border-box;185 }186 .viewed-title {187 font-size: 54px;188 font-weight: 800;189 color: #111;190 margin-bottom: 22px;191 }192 .dots {193 display: flex;194 align-items: center;195 gap: 18px;196 margin-bottom: 34px;197 }198 .dot-big { width: 14px; height: 14px; background: #333; border-radius: 50%; }199 .dot-small { width: 14px; height: 14px; background: #bfbfbf; border-radius: 2px; }200 201 /* Product grid */202 .products {203 display: flex;204 gap: 30px;205 padding-bottom: 30px;206 }207 .card {208 width: 500px;209 background: #fff;210 border: 1px solid #d5dbe2;211 box-sizing: border-box;212 }213 .card-image {214 width: 100%;215 height: 540px;216 background: #E0E0E0;217 border-bottom: 1px solid #BDBDBD;218 display: flex;219 align-items: center;220 justify-content: center;221 color: #757575;222 font-size: 32px;223 }224 .card-body {225 padding: 26px 26px 40px;226 }227 .brand {228 font-size: 44px;229 font-weight: 700;230 color: #111;231 margin-bottom: 14px;232 }233 .name {234 font-size: 38px;235 color: #333;236 margin-bottom: 22px;237 }238 .price-row {239 display: flex;240 align-items: baseline;241 gap: 16px;242 }243 .price {244 font-size: 44px;245 color: #e53935;246 font-weight: 800;247 }248 .rrp {249 font-size: 36px;250 color: #9E9E9E;251 text-decoration: line-through;252 }253 254 /* Gesture bar */255 .gesture {256 position: absolute;257 bottom: 24px;258 left: 50%;259 transform: translateX(-50%);260 width: 300px;261 height: 18px;262 background: #111;263 border-radius: 12px;264 opacity: 0.9;265 }266</style>267</head>268<body>269<div id="render-target">270 271 <!-- Status bar -->272 <div class="status-bar">273 <div class="status-left">8:42</div>274 <div class="status-right">275 <!-- Simple placeholders for app icons -->276 <span class="dot"></span>277 <span class="dot"></span>278 <span class="dot"></span>279 <span class="dot"></span>280 <span class="dot"></span>281 <!-- Wifi icon -->282 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">283 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>284 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>285 <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>286 <circle cx="12" cy="19" r="1.5" fill="#fff"/>287 </svg>288 <!-- Battery icon -->289 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">290 <rect x="3" y="6" width="16" height="12" rx="2" stroke="#fff" stroke-width="2"/>291 <rect x="5" y="8" width="10" height="8" fill="#fff"/>292 <rect x="20" y="9" width="2" height="6" rx="1" fill="#fff"/>293 </svg>294 </div>295 </div>296 297 <!-- App bar -->298 <div class="app-bar">299 <div class="icon-btn">300 <!-- Back arrow -->301 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">302 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>303 </svg>304 </div>305 <div class="icon-btn">306 <!-- Hamburger -->307 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">308 <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>309 </svg>310 </div>311 312 <div class="search-pill">313 <div class="search-icon">314 <svg width="42" height="42" viewBox="0 0 24 24" fill="none">315 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2"/>316 <path d="M20 20l-4-4" stroke="#777" stroke-width="2" stroke-linecap="round"/>317 </svg>318 </div>319 <div class="search-text">Cycle life guard</div>320 <div class="scan-btn">321 <!-- Scan icon -->322 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">323 <rect x="4" y="4" width="16" height="16" rx="3" stroke="#444" stroke-width="2"/>324 <path d="M8 8h8v8H8z" stroke="#444" stroke-width="1.5" stroke-dasharray="2 2"/>325 </svg>326 </div>327 </div>328 </div>329 330 <!-- Promo banner -->331 <div class="promo">332 <div class="promo-content">333 <div class="promo-title">334 Credit subject to status<br>335 Representative APR: 39.9% (variable)336 </div>337 <div class="promo-btn">LEARN MORE</div>338 </div>339 <div class="promo-art">[IMG: Finance Promo Artwork]</div>340 </div>341 342 <!-- Info note -->343 <div class="info-note">344 In some cases, our online prices may differ from those in-store345 </div>346 347 <!-- Accordion items -->348 <div class="accordion">349 <div class="acc-item">350 <div class="acc-title">Description</div>351 <div class="plus">352 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">353 <path d="M12 5v14M5 12h14" stroke="#444" stroke-width="2" stroke-linecap="round"/>354 </svg>355 </div>356 </div>357 <div class="acc-item">358 <div class="acc-title">Delivery Information</div>359 <div class="plus">360 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">361 <path d="M12 5v14M5 12h14" stroke="#444" stroke-width="2" stroke-linecap="round"/>362 </svg>363 </div>364 </div>365 <div class="acc-item">366 <div class="acc-title">Returns</div>367 <div class="plus">368 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">369 <path d="M12 5v14M5 12h14" stroke="#444" stroke-width="2" stroke-linecap="round"/>370 </svg>371 </div>372 </div>373 </div>374 375 <!-- Viewed Together section -->376 <div class="viewed-section">377 <div class="viewed-title">VIEWED TOGETHER</div>378 <div class="dots">379 <span class="dot-big"></span>380 <!-- row of mini squares -->381 <span class="dot-small"></span><span class="dot-small"></span><span class="dot-small"></span><span class="dot-small"></span>382 <span class="dot-small"></span><span class="dot-small"></span><span class="dot-small"></span><span class="dot-small"></span>383 <span class="dot-small"></span><span class="dot-small"></span><span class="dot-small"></span><span class="dot-small"></span>384 <span class="dot-small"></span><span class="dot-small"></span><span class="dot-small"></span><span class="dot-small"></span>385 <span class="dot-small"></span><span class="dot-small"></span>386 </div>387 388 <div class="products">389 <!-- Nike card -->390 <div class="card">391 <div class="card-image">[IMG: Nike White Shin Guard Set]</div>392 <div class="card-body">393 <div class="brand">Nike</div>394 <div class="name">Academy Shin Guard</div>395 <div class="price-row">396 <div class="price">£9.99</div>397 <div class="rrp">RRP £10.99</div>398 </div>399 </div>400 </div>401 402 <!-- Puma card (partial) -->403 <div class="card">404 <div class="card-image">[IMG: Puma Shin Guard]</div>405 <div class="card-body">406 <div class="brand">Puma</div>407 <div class="name">Stndalone Guard</div>408 <div class="price-row">409 <div class="price">£7.00</div>410 <div class="rrp">RRP £9.99</div>411 </div>412 </div>413 </div>414 </div>415 </div>416 417 <!-- Gesture bar -->418 <div class="gesture"></div>419</div>420</body>421</html>