GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Product Detail - Yonex Badminton Racket</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F3F4F6;14  }15 16  /* Top status bar */17  .status-bar {18    height: 110px;19    background: #1f2326;20    color: #fff;21    display: flex;22    align-items: center;23    padding: 0 40px;24    font-size: 34px;25  }26  .status-bar .right { margin-left: auto; opacity: 0.9; }27  .status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #B9C0C7; margin: 0 14px; }28 29  /* App header with search */30  .app-header {31    background: #24292d;32    height: 160px;33    display: flex;34    align-items: center;35    padding: 0 30px;36    color: #fff;37    gap: 26px;38  }39  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }40  .search-pill {41    flex: 1;42    background: #ffffff;43    border-radius: 34px;44    height: 96px;45    display: flex;46    align-items: center;47    padding: 0 32px;48    box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;49    color: #555;50    font-size: 40px;51  }52  .pill-text { margin-left: 16px; }53  .barcode { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }54 55  /* Product image area */56  .image-wrap {57    margin: 18px 20px 0 20px;58    background: #ffffff;59    border-radius: 8px;60    padding: 24px;61  }62  .image-ph {63    width: 100%;64    height: 980px;65    background: #E0E0E0;66    border: 1px solid #BDBDBD;67    display: flex;68    align-items: center;69    justify-content: center;70    color: #757575;71    font-size: 42px;72  }73 74  /* Pager line */75  .pager {76    height: 20px;77    margin: 24px 80px 0 80px;78    position: relative;79  }80  .pager .line {81    position: absolute;82    left: 0; right: 0; top: 9px; height: 4px; background: #E3E3E3; border-radius: 2px;83  }84  .pager .active {85    position: absolute; left: 240px; right: 520px; top: 7px; height: 6px; background: #333; border-radius: 3px;86  }87 88  /* Details section */89  .details {90    background: #fff;91    margin: 10px 20px 0 20px;92    border-radius: 8px;93    padding: 36px 32px 40px 32px;94    position: relative;95  }96  .brand { font-size: 38px; color: #6b6b6b; margin-bottom: 10px; }97  .title { font-size: 52px; font-weight: 700; color: #111; margin: 6px 0 22px 0; line-height: 1.2; }98  .fav {99    position: absolute; right: 28px; top: 36px;100    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;101  }102  .rating { display: flex; align-items: center; gap: 16px; margin: 6px 0 24px 0; }103  .stars { color: #0d5cf3; font-size: 46px; letter-spacing: 6px; }104  .count {105    font-size: 34px; color: #7c8894; border: 1px solid #cbd3da; border-radius: 16px; padding: 6px 16px;106  }107  .price-row { display: flex; align-items: baseline; gap: 28px; margin-bottom: 24px; }108  .price { color: #ff2e2e; font-size: 48px; font-weight: 700; }109  .rrp { color: #9aa1a7; font-size: 40px; text-decoration: line-through; }110  .meta { font-size: 40px; color: #111; margin-top: 16px; }111  .meta span { color: #6b6b6b; }112  .size-row { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }113  .size-label { font-size: 40px; color: #111; }114  .size-guide { font-size: 36px; color: #7b8b97; text-decoration: underline; }115  .size-options { margin-top: 24px; }116  .chip {117    width: 360px; height: 120px; background: #DCEBFF; border: 2px solid #1f58ff; border-radius: 18px;118    display: flex; align-items: center; justify-content: center; color: #1241c9; font-size: 40px; font-weight: 700;119  }120 121  /* Add to bag */122  .bag-cta {123    position: absolute;124    left: 32px; right: 32px; bottom: 120px;125    height: 140px; background: #75E1A3; border-radius: 16px;126    display: flex; align-items: center; justify-content: center;127    color: #0b3d22; font-size: 46px; font-weight: 800; letter-spacing: 1px;128    box-shadow: 0 6px 0 rgba(0,0,0,0.08);129  }130 131  /* Simple bottom gesture indicator */132  .gesture {133    position: absolute; left: 420px; right: 420px; bottom: 40px; height: 10px; background: #dddddd; border-radius: 6px;134  }135 136  /* SVG icon styling */137  svg { display: block; }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status bar -->144  <div class="status-bar">145    <div>11:48</div>146    <div class="right">147      <span class="status-dot"></span>148      <span class="status-dot"></span>149      <span class="status-dot"></span>150    </div>151  </div>152 153  <!-- App header with back/menu and search pill -->154  <div class="app-header">155    <div class="icon-btn">156      <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">157        <path d="M15.5 3.5L7 12l8.5 8.5-1.8 1.8L3.5 12 13.7 1.7z"/>158      </svg>159    </div>160    <div class="icon-btn">161      <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">162        <path d="M3 5h18v2H3zm0 6h18v2H3zm0 6h18v2H3z"/>163      </svg>164    </div>165    <div class="search-pill">166      <svg width="42" height="42" viewBox="0 0 24 24" fill="#7B8794">167        <path d="M10 3a7 7 0 105.3 12.1l4.3 4.3-1.4 1.4-4.3-4.3A7 7 0 1010 3z"/>168      </svg>169      <div class="pill-text">Yonex Badminton Racket</div>170      <div style="margin-left:auto;" class="barcode">171        <svg width="44" height="44" viewBox="0 0 24 24" fill="#7B8794">172          <path d="M3 4h3v16H3zm4 0h1v16H7zm3 0h2v16h-2zm4 0h1v16h-1zm3 0h3v16h-3z"/>173        </svg>174      </div>175    </div>176  </div>177 178  <!-- Product image -->179  <div class="image-wrap">180    <div class="image-ph">[IMG: Yonex Badminton Racket]</div>181  </div>182 183  <!-- Pager indicator -->184  <div class="pager">185    <div class="line"></div>186    <div class="active"></div>187  </div>188 189  <!-- Details section -->190  <div class="details">191    <div class="fav">192      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">193        <path d="M12 21s-6.5-4.4-9.2-7.1A5.5 5.5 0 116.9 4.3L12 7.5l5.1-3.2a5.5 5.5 0 118.1 9.2C18.5 16.6 12 21 12 21z"/>194      </svg>195    </div>196    <div class="brand">Yonex</div>197    <div class="title">Astrox Star B/R 00</div>198 199    <div class="rating">200      <div class="stars">★★★★★</div>201      <div class="count">(1)</div>202    </div>203 204    <div class="price-row">205      <div class="price">£39.99</div>206      <div class="rrp">RRP £49.99</div>207    </div>208 209    <div class="meta">Colour: <span>Black/ Gray</span></div>210 211    <div class="size-row">212      <div class="size-label">Size:</div>213      <div class="size-guide">Size Guide</div>214    </div>215 216    <div class="size-options">217      <div class="chip">ONE SIZE</div>218    </div>219  </div>220 221  <!-- Add to bag button -->222  <div class="bag-cta">ADD TO BAG</div>223 224  <!-- Bottom gesture indicator -->225  <div class="gesture"></div>226 227</div>228</body>229</html>