GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product - Aerolite Shin Guards</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #f5f6f7; border-radius: 32px; box-shadow: 0 8px 24px rgba(0,0,0,0.16);12  }13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; right: 0;16    height: 120px; background: #1f2427; color: #fff;17    display: flex; align-items: center; padding: 0 40px; font-weight: 600; font-size: 40px;18  }19  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }20  /* App bar */21  .app-bar {22    position: absolute; top: 120px; left: 0; right: 0;23    height: 200px; background: #262b2f; color: #fff; padding: 28px 36px 24px 36px;24  }25  .app-row { display: flex; align-items: center; gap: 24px; }26  .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }27  .search-wrap {28    margin-top: 24px;29  }30  .search-field {31    height: 110px; border-radius: 24px; background: #ffffff; display: flex; align-items: center;32    padding: 0 28px; box-shadow: 0 2px 0 rgba(0,0,0,0.05);33  }34  .search-field input {35    border: none; outline: none; font-size: 40px; flex: 1; color: #333; background: transparent;36  }37  .search-placeholder { color: #7a7a7a; }38  /* Image section */39  .image-hero {40    position: absolute; top: 320px; left: 0; right: 0;41    height: 820px; padding: 32px; background: #f0f0f0;42  }43  .img-box {44    width: 100%; height: 100%; background: #E0E0E0; border: 1px solid #BDBDBD;45    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px; text-align: center;46  }47  /* Details sheet */48  .details {49    position: absolute; top: 1120px; left: 0; right: 0;50    background: #ffffff; border-top-left-radius: 36px; border-top-right-radius: 36px;51    box-shadow: 0 -6px 20px rgba(0,0,0,0.06);52    padding: 48px;53  }54  .title-row { display: flex; align-items: flex-start; }55  .brand { color: #5b5b5b; font-size: 42px; }56  .product-title { font-size: 56px; font-weight: 700; margin-top: 8px; margin-bottom: 24px; color: #222; }57  .fav { margin-left: auto; margin-top: 8px; }58  .rating { display: flex; align-items: center; gap: 14px; margin: 10px 0 24px 0; }59  .rating .count { color: #6c6c6c; font-size: 36px; }60  .price-row { display: flex; align-items: baseline; gap: 24px; margin: 12px 0 28px 0; }61  .price { color: #e53935; font-weight: 800; font-size: 56px; }62  .msrp { color: #9aa0a6; font-size: 40px; text-decoration: line-through; }63  .section-label { font-size: 42px; font-weight: 700; color: #333; margin-top: 12px; }64  .value-text { font-size: 42px; color: #333; font-weight: 500; }65  .thumbs { display: flex; gap: 24px; margin: 28px 0 8px 0; }66  .thumb {67    width: 210px; height: 170px; background: #E0E0E0; border: 2px solid #BDBDBD;68    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 16px;69  }70  .thumb.selected { border-color: #2a74ff; box-shadow: 0 0 0 3px rgba(42,116,255,0.25) inset; }71  .size-row { display: flex; align-items: center; justify-content: space-between; }72  .size-guide { color: #2a74ff; font-size: 36px; }73  .size-grid { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; }74  .size-chip {75    width: 312px; height: 120px; border: 2px solid #d5d9dc; border-radius: 24px; background: #fafafa;76    display: flex; align-items: center; justify-content: center; font-size: 40px; color: #34393d; font-weight: 700;77  }78  /* divider */79  .divider { height: 2px; background: #e6e6e6; margin: 28px 0; }80  /* Home indicator */81  .home-indicator {82    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);83    width: 300px; height: 14px; background: #d0d3d6; border-radius: 10px;84  }85  /* SVG colors */86  .white-fill { fill: #ffffff; }87  .icon-white { stroke: #ffffff; }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status Bar -->94  <div class="status-bar">95    <div>8:41</div>96    <div class="status-right">97      <!-- small dots/icons mimicking app indicators -->98      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#cfd8dc"/></svg>99      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#cfd8dc"/></svg>100      <svg width="28" height="28"><circle cx="14" cy="14" r="6" fill="#cfd8dc"/></svg>101      <!-- Lock -->102      <svg width="36" height="36" viewBox="0 0 24 24">103        <path d="M6 10V7a6 6 0 0112 0v3h2v10H4V10h2zm2 0h8V7a4 4 0 10-8 0v3z" fill="#cfd8dc"/>104      </svg>105      <svg width="10" height="10"><circle cx="5" cy="5" r="4" fill="#cfd8dc"/></svg>106      <!-- Wifi -->107      <svg width="48" height="32" viewBox="0 0 24 24">108        <path d="M2 8a14 14 0 0120 0l-2 2a10 10 0 00-16 0L2 8zm4 4a8 8 0 0112 0l-2 2a5 5 0 00-8 0l-2-2zm6 6l2 2-2 2-2-2 2-2z" fill="#cfd8dc"/>109      </svg>110      <!-- Battery -->111      <svg width="56" height="32" viewBox="0 0 28 14">112        <rect x="1" y="1" width="22" height="12" rx="2" fill="none" stroke="#cfd8dc" stroke-width="2"/>113        <rect x="3" y="3" width="16" height="8" rx="1" fill="#cfd8dc"/>114        <rect x="24" y="4" width="3" height="6" rx="1" fill="#cfd8dc"/>115      </svg>116    </div>117  </div>118 119  <!-- App Bar -->120  <div class="app-bar">121    <div class="app-row">122      <!-- Back -->123      <div class="icon-btn">124        <svg width="56" height="56" viewBox="0 0 24 24">125          <path d="M15 18l-6-6 6-6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>126        </svg>127      </div>128      <!-- Hamburger -->129      <div class="icon-btn">130        <svg width="56" height="56" viewBox="0 0 24 24">131          <path d="M3 6h18M3 12h18M3 18h18" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>132        </svg>133      </div>134    </div>135    <div class="search-wrap">136      <div class="search-field">137        <svg width="56" height="56" viewBox="0 0 24 24" style="margin-right:16px;">138          <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>139          <path d="M20 20l-4-4" stroke="#777" stroke-width="2" stroke-linecap="round"/>140        </svg>141        <input type="text" value="Cycle life guard">142        <!-- Scan icon -->143        <svg width="56" height="56" viewBox="0 0 24 24" style="margin-left:16px;">144          <path d="M3 7V5h4M17 5h4v2M3 17v2h4M17 19h4v-2M7 9h10v6H7z" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>145        </svg>146      </div>147    </div>148  </div>149 150  <!-- Product Image -->151  <div class="image-hero">152    <div class="img-box">[IMG: Aerolite Shin Guards - Product Hero]</div>153  </div>154 155  <!-- Details Sheet -->156  <div class="details">157    <div class="title-row">158      <div style="flex:1;">159        <div class="brand">Sondico</div>160        <div class="product-title">Aerolite Shin Guards</div>161      </div>162      <div class="fav">163        <svg width="72" height="72" viewBox="0 0 24 24">164          <path d="M12 21s-6-4.35-9-7.35A5.4 5.4 0 016 3a5.9 5.9 0 016 3 5.9 5.9 0 016-3 5.4 5.4 0 013 10.65C18 16.65 12 21 12 21z" fill="none" stroke="#444" stroke-width="1.8" />165        </svg>166      </div>167    </div>168 169    <div class="rating">170      <!-- 4 blue stars and 1 grey -->171      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.2-.61L12 2 9.2 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#1E88E5"/></svg>172      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.2-.61L12 2 9.2 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#1E88E5"/></svg>173      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.2-.61L12 2 9.2 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#1E88E5"/></svg>174      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.2-.61L12 2 9.2 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#1E88E5"/></svg>175      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 17.3l6.18 3.7-1.64-7.03L22 9.24l-7.2-.61L12 2 9.2 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#c7c7c7"/></svg>176      <div class="count">(10)</div>177    </div>178 179    <div class="price-row">180      <div class="price">£7.99</div>181      <div class="msrp">MSRP £15.99</div>182    </div>183 184    <div style="display:flex; align-items:center; gap:12px;">185      <div class="section-label">Colour:</div>186      <div class="value-text">Black</div>187    </div>188 189    <div class="thumbs">190      <div class="thumb selected">[IMG]</div>191      <div class="thumb">[IMG]</div>192      <div class="thumb">[IMG]</div>193      <div class="thumb">[IMG]</div>194    </div>195 196    <div class="size-row">197      <div class="section-label">Size:</div>198      <div class="size-guide">Size Guide</div>199    </div>200    <div class="size-grid">201      <div class="size-chip">CHD (XXS)</div>202      <div class="size-chip">CHD (XS)</div>203      <div class="size-chip">JUNIOR (S)</div>204      <div class="size-chip">ADULT (M)</div>205      <div class="size-chip">ADULT (L)</div>206      <div class="size-chip">ADULT (XL)</div>207    </div>208 209    <div class="divider"></div>210    <!-- Additional space to mimic scrollable content -->211    <div style="height: 520px;"></div>212  </div>213 214  <!-- Home indicator -->215  <div class="home-indicator"></div>216</div>217</body>218</html>