GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Product Page Mock</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: #f3f3f3;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16    color: #222;17  }18 19  /* Top bars */20  .status-bar {21    height: 110px;22    background: #1f1f1f;23    color: #eaeaea;24    display: flex;25    align-items: center;26    padding: 0 36px;27    font-size: 40px;28    letter-spacing: 0.2px;29  }30  .status-bar .icons {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 26px;35  }36  .dot { width: 12px; height: 12px; background: #cfcfcf; border-radius: 50%; opacity: 0.85; }37 38  .app-header {39    height: 160px;40    background: #1f1f1f;41    display: flex;42    align-items: center;43    padding: 0 28px;44    gap: 26px;45  }46  .icon-btn {47    width: 80px; height: 80px;48    display: flex; align-items: center; justify-content: center;49    border-radius: 12px;50  }51  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #eaeaea; stroke-width: 6; }52 53  .search-pill {54    flex: 1;55    background: #ffffff;56    height: 96px;57    border-radius: 22px;58    display: flex;59    align-items: center;60    padding: 0 28px;61    box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;62  }63  .search-pill svg { width: 40px; height: 40px; stroke: #5f5f5f; stroke-width: 6; margin-right: 20px; }64  .search-pill .text {65    font-size: 44px; color: #4a4a4a;66  }67  .scanner {68    width: 90px; height: 90px; border-radius: 18px;69    background: #ffffff; display: flex; align-items: center; justify-content: center;70    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;71  }72  .scanner svg { width: 52px; height: 52px; stroke: #222; stroke-width: 6; }73 74  /* Content area */75  .content {76    background: #f6f6f6;77    padding: 18px 0 0;78  }79  .card {80    background: #ffffff;81    border-top-left-radius: 28px;82    border-top-right-radius: 28px;83    padding: 40px 40px 0 40px;84    box-shadow: 0 -1px 0 rgba(0,0,0,0.06) inset;85  }86 87  .label-row {88    display: flex;89    align-items: baseline;90    gap: 12px;91    font-size: 48px;92    margin-bottom: 30px;93  }94  .label-row .label { font-weight: 700; }95  .label-row .value { color: #777; font-weight: 500; }96 97  .size-row {98    display: flex;99    align-items: center;100    justify-content: space-between;101    margin-top: 12px;102    margin-bottom: 28px;103  }104  .size-row .title { font-size: 44px; font-weight: 700; color: #333; }105  .size-row .guide { font-size: 40px; color: #7a7a7a; text-decoration: underline; }106 107  .size-button {108    width: 320px; height: 140px;109    border: 4px solid #2f6bed;110    border-radius: 22px;111    display: flex; align-items: center; justify-content: center;112    color: #2f6bed; font-size: 42px; font-weight: 800; letter-spacing: 1px;113    background: #fff;114    margin-bottom: 40px;115  }116 117  .add-bag {118    width: 100%;119    height: 140px;120    background: #8ee09b;121    border-radius: 24px;122    display: flex; align-items: center; justify-content: center;123    color: #083b12;124    font-size: 52px; font-weight: 800; font-style: italic;125    margin: 22px 0 46px;126  }127 128  /* Image placeholder rule */129  .img-placeholder {130    background: #E0E0E0;131    border: 1px solid #BDBDBD;132    color: #757575;133    display: flex; align-items: center; justify-content: center;134  }135 136  .promo {137    width: 100%;138    height: 360px;139    border-radius: 8px;140    margin: 0 0 38px 0;141  }142 143  .note {144    text-align: center;145    color: #9aa0a6;146    font-size: 38px;147    line-height: 1.4;148    padding: 28px 40px 18px;149  }150 151  .accordion {152    background: #fff;153    margin-top: 8px;154    border-top: 1px solid #e8e8e8;155    border-bottom: 1px solid #e8e8e8;156  }157  .acc-item {158    display: flex; align-items: center; justify-content: space-between;159    padding: 40px;160    border-top: 1px solid #ececec;161    font-size: 48px; color: #222;162  }163  .acc-item:first-child { border-top: none; }164  .acc-item .plus {165    width: 40px; height: 40px; position: relative;166  }167  .acc-item .plus::before, .acc-item .plus::after {168    content: ""; position: absolute; background: #333;169  }170  .acc-item .plus::before { width: 40px; height: 6px; top: 17px; left: 0; border-radius: 3px; }171  .acc-item .plus::after { width: 6px; height: 40px; top: 0; left: 17px; border-radius: 3px; }172 173  .viewed {174    background: #e9f1fa;175    padding: 40px;176    margin-top: 18px;177  }178  .viewed h3 {179    margin: 0 0 20px 0; font-size: 56px; letter-spacing: 1px; font-weight: 800;180  }181  .dots {182    display: flex; gap: 20px; padding: 10px 0 30px 10px;183  }184  .dots .mini-dot {185    width: 14px; height: 14px; border-radius: 50%;186    background: #9ea7b1; opacity: 0.7;187  }188 189  .product-cards {190    display: flex; gap: 28px;191    padding-bottom: 40px;192  }193  .card-item {194    width: 480px;195    background: #fff;196    border: 1px solid #e5e5e5;197    border-radius: 16px;198    overflow: hidden;199  }200  .card-item .img {201    height: 520px;202  }203  .card-item .info {204    padding: 24px;205    font-size: 38px; color: #333;206  }207  .card-item .price { font-weight: 700; margin-top: 8px; }208 209  /* Bottom system nav bar */210  .sys-nav {211    position: absolute;212    left: 0; right: 0; bottom: 0;213    height: 140px;214    background: #0d0d0d;215    display: flex; align-items: center; justify-content: center;216  }217  .home-pill {218    width: 220px; height: 18px; background: #eaeaea; border-radius: 9px;219    opacity: 0.9;220  }221</style>222</head>223<body>224<div id="render-target">225 226  <!-- Status bar -->227  <div class="status-bar">228    <div>11:49</div>229    <div class="icons">230      <div class="dot"></div>231      <div class="dot"></div>232      <div class="dot"></div>233      <div class="dot"></div>234    </div>235  </div>236 237  <!-- App header with search -->238  <div class="app-header">239    <div class="icon-btn" aria-label="Back">240      <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>241    </div>242    <div class="icon-btn" aria-label="Menu">243      <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>244    </div>245 246    <div class="search-pill">247      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M21 21l-6-6"/></svg>248      <div class="text">Yonex Badminton Racket</div>249    </div>250 251    <div class="scanner" aria-label="Scan">252      <svg viewBox="0 0 24 24">253        <path d="M4 6h16M4 12h16M4 18h16"/>254        <path d="M6 4v16M12 4v16M18 4v16"/>255      </svg>256    </div>257  </div>258 259  <!-- Main content -->260  <div class="content">261    <div class="card">262      <div class="label-row">263        <div class="label">Colour:</div>264        <div class="value">Black/ Gray</div>265      </div>266 267      <div class="size-row">268        <div class="title">Size:</div>269        <div class="guide">Size Guide</div>270      </div>271 272      <div class="size-button">ONE SIZE</div>273 274      <div class="add-bag">ADD TO BAG</div>275 276      <div class="img-placeholder promo">[IMG: FrasersPlus promotional banner]</div>277 278      <div class="note">In some cases, our online prices may differ from those in-store</div>279    </div>280 281    <div class="accordion">282      <div class="acc-item">283        <div>Description</div>284        <div class="plus" aria-hidden="true"></div>285      </div>286      <div class="acc-item">287        <div>Delivery Information</div>288        <div class="plus" aria-hidden="true"></div>289      </div>290      <div class="acc-item">291        <div>Returns</div>292        <div class="plus" aria-hidden="true"></div>293      </div>294    </div>295 296    <div class="viewed">297      <h3>VIEWED TOGETHER</h3>298      <div class="dots">299        <span class="mini-dot"></span><span class="mini-dot"></span><span class="mini-dot"></span>300        <span class="mini-dot"></span><span class="mini-dot"></span><span class="mini-dot"></span>301        <span class="mini-dot"></span><span class="mini-dot"></span><span class="mini-dot"></span>302        <span class="mini-dot"></span><span class="mini-dot"></span><span class="mini-dot"></span>303        <span class="mini-dot"></span><span class="mini-dot"></span><span class="mini-dot"></span>304      </div>305 306      <div class="product-cards">307        <div class="card-item">308          <div class="img img-placeholder">[IMG: Yonex racket product]</div>309          <div class="info">310            Yonex Badminton Racket311            <div class="price">£89.99</div>312          </div>313        </div>314        <div class="card-item">315          <div class="img img-placeholder">[IMG: Alternative racket]</div>316          <div class="info">317            Lightweight Badminton Racket318            <div class="price">£74.99</div>319          </div>320        </div>321      </div>322    </div>323  </div>324 325  <!-- Bottom system navigation pill -->326  <div class="sys-nav">327    <div class="home-pill"></div>328  </div>329 330</div>331</body>332</html>