GD-ML/AndroidCode

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>Yonex Badminton Racket - UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #F6F7F9;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14    color: #222;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; right: 0;20    height: 140px; background: #24292E; color: #fff;21    display: flex; align-items: center; padding: 0 36px;22    box-sizing: border-box;23  }24  .status-left { font-weight: 600; font-size: 46px; }25  .status-right { margin-left: auto; display: flex; gap: 26px; align-items: center; }26  .status-dot { width: 14px; height: 14px; background: #fff; border-radius: 50%; opacity: 0.8; }27  .status-icon {28    width: 38px; height: 38px; border: 2px solid #fff; border-radius: 6px; opacity: 0.9;29  }30 31  /* Header with back, menu, search pill */32  .header {33    position: absolute; top: 140px; left: 0; right: 0;34    height: 160px; background: #24292E; display: flex; align-items: center;35    padding: 0 36px; box-sizing: border-box;36  }37  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 16px; }38  .search-pill {39    flex: 1;40    height: 96px; border-radius: 20px;41    background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,0.08);42    display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;43  }44  .search-pill .label { flex: 1; color: #4A4A4A; font-size: 40px; font-weight: 600; }45  .pill-addon {46    width: 72px; height: 72px; border-radius: 14px; display: flex; align-items: center; justify-content: center;47  }48 49  /* Subtle info line */50  .subtle-note {51    position: absolute; top: 320px; left: 0; right: 0;52    text-align: center; color: #B8BDC3; font-size: 34px;53  }54 55  /* Accordion items */56  .accordion {57    position: absolute; top: 420px; left: 0; right: 0;58  }59  .accordion-item {60    background: #fff; height: 160px;61    border-top: 1px solid #E6E8EB;62    border-bottom: 1px solid #E6E8EB;63    display: flex; align-items: center; justify-content: space-between;64    padding: 0 36px; box-sizing: border-box;65  }66  .accordion-item .title { font-size: 48px; font-weight: 700; color: #111; }67  .accordion-item .plus {68    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; color: #444;69  }70 71  /* Viewed Together section */72  .vt-section {73    position: absolute; top: 900px; left: 0; right: 0;74    background: #E9F0F7; padding: 36px; box-sizing: border-box;75  }76  .vt-title { font-size: 60px; font-weight: 800; letter-spacing: 1px; color: #0E0E0E; margin-bottom: 22px; }77  .vt-dots {78    height: 24px; margin: 20px 0 36px;79    display: flex; gap: 16px; align-items: center;80  }81  .vt-dots span {82    width: 12px; height: 12px; background: #9AA6B2; border-radius: 50%; opacity: 0.5;83  }84 85  .cards-wrap {86    display: flex; gap: 24px;87  }88  .card {89    width: 500px; background: #fff; border: 1px solid #D5D9DE;90    box-shadow: 0 2px 0 rgba(0,0,0,0.06);91    display: flex; flex-direction: column;92  }93  .product-img {94    margin: 20px; height: 620px;95    background: #E0E0E0; border: 1px solid #BDBDBD;96    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px; text-align: center;97  }98  .card-body { padding: 30px 24px 18px; box-sizing: border-box; }99  .brand { font-weight: 800; font-size: 44px; margin-bottom: 16px; }100  .name { font-size: 40px; color: #333; line-height: 1.25; margin-bottom: 18px; }101  .pricing { display: flex; gap: 18px; align-items: baseline; margin-bottom: 24px; }102  .price { color: #E52020; font-weight: 800; font-size: 48px; }103  .rrp { color: #9AA1A8; font-size: 38px; text-decoration: line-through; }104  .card-footer {105    margin-top: auto; background: #0B0B0B; color: #fff; text-align: center; font-weight: 800;106    height: 110px; display: flex; align-items: center; justify-content: center; font-size: 42px;107  }108 109  /* Navigation arrows under cards */110  .carousel-nav {111    display: flex; justify-content: space-between; align-items: center;112    margin-top: 28px; padding: 0 12px 20px;113  }114  .arrow-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; color: #2F3337; }115 116  /* Bottom gesture bar */117  .gesture-bar {118    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);119    width: 380px; height: 16px; background: #000; opacity: 0.2; border-radius: 12px;120  }121 122  /* SVG defaults */123  svg { display: block; }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Status bar -->130  <div class="status-bar">131    <div class="status-left">11:49</div>132    <div class="status-right">133      <div class="status-dot"></div>134      <div class="status-dot"></div>135      <div class="status-icon"></div>136      <div class="status-icon" style="border-radius:50%"></div>137    </div>138  </div>139 140  <!-- Header with back, menu and search pill -->141  <div class="header">142    <div class="icon-btn">143      <svg width="48" height="48" viewBox="0 0 24 24">144        <path d="M15 6L9 12l6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>145      </svg>146    </div>147    <div class="icon-btn">148      <svg width="48" height="48" viewBox="0 0 24 24">149        <path d="M3 6h18M3 12h14M3 18h10" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>150      </svg>151    </div>152    <div class="search-pill">153      <div class="label">Yonex Badminton Racket</div>154      <div class="pill-addon">155        <svg width="40" height="40" viewBox="0 0 24 24">156          <rect x="3" y="5" width="18" height="14" rx="2" ry="2" stroke="#24292E" fill="none" stroke-width="2"/>157          <path d="M7 5v14M17 5v14" stroke="#24292E" stroke-width="2"/>158        </svg>159      </div>160    </div>161  </div>162 163  <!-- Subtle note text -->164  <div class="subtle-note">in some cases, our online prices may differ from those in-store</div>165 166  <!-- Accordion items -->167  <div class="accordion">168    <div class="accordion-item">169      <div class="title">Description</div>170      <div class="plus">171        <svg width="44" height="44" viewBox="0 0 24 24">172          <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2" stroke-linecap="round"/>173        </svg>174      </div>175    </div>176    <div class="accordion-item">177      <div class="title">Delivery Information</div>178      <div class="plus">179        <svg width="44" height="44" viewBox="0 0 24 24">180          <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2" stroke-linecap="round"/>181        </svg>182      </div>183    </div>184    <div class="accordion-item">185      <div class="title">Returns</div>186      <div class="plus">187        <svg width="44" height="44" viewBox="0 0 24 24">188          <path d="M12 5v14M5 12h14" stroke="#333" stroke-width="2" stroke-linecap="round"/>189        </svg>190      </div>191    </div>192  </div>193 194  <!-- Viewed Together Section -->195  <div class="vt-section">196    <div class="vt-title">VIEWED TOGETHER</div>197    <div class="vt-dots">198      <!-- dotted indicator -->199      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>200      <span></span><span></span><span></span><span></span><span></span><span></span><span></span>201      <span></span><span></span><span></span><span></span><span></span>202    </div>203 204    <div class="cards-wrap">205      <!-- Card 1 -->206      <div class="card">207        <div class="product-img">[IMG: Yonex Badminton Racket]</div>208        <div class="card-body">209          <div class="brand">Yonex</div>210          <div class="name">Nanoflare Drive Badminton Racket</div>211          <div class="pricing">212            <div class="price">£28.00</div>213            <div class="rrp">RRP £42.99</div>214          </div>215        </div>216        <div class="card-footer">VIEW PRODUCT</div>217      </div>218 219      <!-- Card 2 -->220      <div class="card">221        <div class="product-img">[IMG: Yonex Badminton Racket]</div>222        <div class="card-body">223          <div class="brand">Yonex</div>224          <div class="name">Nanoflare 500 Badminton Racket</div>225          <div class="pricing">226            <div class="price">£32.99</div>227            <div class="rrp">RRP £49.99</div>228          </div>229        </div>230        <div class="card-footer">VIEW PRODUCT</div>231      </div>232    </div>233 234    <div class="carousel-nav">235      <div class="arrow-btn" style="opacity:0.6">236        <svg width="64" height="64" viewBox="0 0 24 24">237          <path d="M15 6L9 12l6 6" stroke="#2F3337" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>238        </svg>239      </div>240      <div class="arrow-btn">241        <svg width="64" height="64" viewBox="0 0 24 24">242          <path d="M9 6l6 6-6 6" stroke="#2F3337" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>243        </svg>244      </div>245    </div>246  </div>247 248  <!-- Bottom gesture bar -->249  <div class="gesture-bar"></div>250 251</div>252</body>253</html>