GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Product UI - Samba OG Shoes</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#f7f7f8; color:#111;10  }11  /* Status bar */12  .status-bar {13    height:80px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;14    color:#111; font-weight:600; font-size:30px;15  }16  .status-icons { display:flex; gap:22px; align-items:center; }17  .icon { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; }18  .thin { stroke:#111; stroke-width:3; fill:none; }19  /* Top nav + title */20  .topbar {21    padding:18px 28px 0 28px; display:flex; align-items:center; justify-content:space-between;22  }23  .title-wrap { text-align:center; margin-top:8px; }24  .product-title {25    font-size:44px; letter-spacing:3px; font-weight:700; text-transform:uppercase;26  }27  .price { margin-top:8px; font-size:40px; color:#111; }28  /* Carousel */29  .carousel {30    margin:26px 0; padding:0 28px; display:flex; gap:26px; overflow:hidden;31  }32  .thumb {33    width:180px; height:88px; background:#E0E0E0; border:1px solid #BDBDBD;34    display:flex; align-items:center; justify-content:center; color:#666; font-size:26px; border-radius:8px;35  }36  /* Size section */37  .section { padding:0 28px; }38  .size-head { display:flex; align-items:center; gap:16px; }39  .size-label { font-size:34px; font-weight:700; letter-spacing:2px; }40  .ruler {41    width:88px; height:80px; border:2px solid #BDBDBD; border-radius:6px; display:flex; align-items:center; justify-content:center;42  }43  .size-row {44    margin-top:18px; display:flex; gap:22px; overflow:hidden;45  }46  .chip {47    padding:20px 28px; border-radius:12px; border:2px solid #d6d6d6; font-size:34px; color:#444; background:#fff;48    white-space:nowrap;49  }50  .chip.active {51    border-color:#111; color:#111; font-weight:700;52  }53  /* Buttons */54  .btn {55    margin:26px 28px 0 28px; height:110px; border-radius:10px; border:2px solid #111;56    display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:700; background:#fff; position:relative;57  }58  .btn .right-icon { position:absolute; right:26px; }59  .btn.primary { background:#111; color:#fff; border-color:#111; }60  /* Payments row */61  .payments { display:flex; gap:30px; padding:26px 28px 0 28px; align-items:center; }62  .pill {63    padding:22px 28px; border:2px solid #cfcfcf; border-radius:12px; background:#fff; color:#333; font-size:30px;64  }65  /* Link */66  .link {67    margin:34px 28px 0 28px; font-size:34px; font-weight:700; letter-spacing:2px; text-decoration:underline;68  }69  /* Free shipping row */70  .info-row {71    margin:22px 0 0 0; padding:24px 28px; display:flex; align-items:center; justify-content:space-between;72  }73  .info-left { display:flex; gap:18px; align-items:flex-start; }74  .circle {75    width:52px; height:52px; border-radius:26px; border:2px solid #111; display:flex; align-items:center; justify-content:center;76  }77  .muted { color:#444; font-size:30px; line-height:40px; }78  .info-btn {79    width:52px; height:52px; border:2px solid #bdbdbd; border-radius:26px; display:flex; align-items:center; justify-content:center; color:#555; font-weight:700;80  }81  /* Bottom sheet */82  .sheet {83    position:absolute; left:0; right:0; bottom:0; height:560px; background:#fff; border-top-left-radius:18px; border-top-right-radius:18px;84    box-shadow:0 -4px 18px rgba(0,0,0,0.15);85  }86  .sheet-head {87    padding:24px 28px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #eee; position:relative;88    font-size:34px; font-weight:700; letter-spacing:1px;89  }90  .sheet-close { position:absolute; right:28px; top:20px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; }91  .sheet-body { display:flex; gap:28px; padding:28px; background:#f1f3f5; align-items:center; }92  .prod-img {93    width:220px; height:160px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#666; font-size:24px;94  }95  .prod-info { display:flex; flex-direction:column; gap:12px; }96  .prod-title { font-size:42px; font-weight:800; }97  .prod-sub { font-size:34px; color:#333; }98  .sheet-cta { position:absolute; left:28px; right:28px; bottom:26px; height:110px; background:#111; color:#fff; border-radius:10px;99    display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:700;100  }101</style>102</head>103<body>104<div id="render-target">105  <!-- Status bar -->106  <div class="status-bar">107    <div>5:43</div>108    <div class="status-icons">109      <div class="icon">◔</div>110      <div class="icon">✉️</div>111      <div class="icon">⚠️</div>112      <div class="icon">📶</div>113      <div class="icon">🔋</div>114      <div style="font-weight:800;">100%</div>115    </div>116  </div>117 118  <!-- Top bar with back / share / heart -->119  <div class="topbar">120    <div class="icon">121      <svg width="42" height="42" viewBox="0 0 24 24" class="thin"><path d="M15 5l-7 7 7 7"/></svg>122    </div>123    <div style="display:flex; gap:26px;">124      <div class="icon">125        <svg width="42" height="42" viewBox="0 0 24 24" class="thin"><path d="M4 12v7a2 2 0 002 2h12a2 2 0 002-2v-7"/><path d="M16 6l-4-4-4 4"/><path d="M12 2v14"/></svg>126      </div>127      <div class="icon">128        <svg width="42" height="42" viewBox="0 0 24 24" class="thin"><path d="M12 21s-7-4.35-7-10a4 4 0 018 0 4 4 0 018 0c0 5.65-7 10-7 10z"/></svg>129      </div>130    </div>131  </div>132 133  <!-- Title and price -->134  <div class="title-wrap">135    <div class="product-title">SAMBA OG SHOES</div>136    <div class="price">$100.00</div>137  </div>138 139  <!-- Carousel thumbnails -->140  <div class="carousel">141    <div class="thumb">[IMG: White/Gray Samba]</div>142    <div class="thumb">[IMG: Navy Samba]</div>143    <div class="thumb">[IMG: Green Stripe Samba]</div>144    <div class="thumb">[IMG: Red Stripe Samba]</div>145    <div class="thumb">[IMG: White/Black Samba]</div>146    <div class="thumb">[IMG: Black Samba]</div>147  </div>148 149  <!-- Size selector -->150  <div class="section">151    <div class="size-head">152      <div class="size-label">SIZE</div>153      <div class="ruler">154        <svg width="64" height="36" viewBox="0 0 64 36" class="thin"><rect x="2" y="6" width="60" height="24" rx="4" ry="4"></rect><path d="M12 30V18M20 30V22M28 30V18M36 30V22M44 30V18M52 30V22"/></svg>155      </div>156    </div>157    <div class="size-row">158      <div class="chip">M 7 / W 8</div>159      <div class="chip active">M 7.5 / W 8.5</div>160      <div class="chip">M 8 / W 9</div>161      <div class="chip">M 8.5 / W 9.5</div>162    </div>163  </div>164 165  <!-- Add to bag -->166  <div class="btn">167    ADD TO BAG168    <div class="right-icon">169      <svg width="64" height="64" viewBox="0 0 24 24" class="thin">170        <path d="M6 7h12l-1 12H7L6 7z"></path>171        <path d="M9 7V5a3 3 0 016 0v2"></path>172        <path d="M12 11v6M9 14h6"></path>173      </svg>174    </div>175  </div>176 177  <!-- Buy it now -->178  <div class="btn primary">179    BUY IT NOW180    <div class="right-icon">181      <svg width="64" height="64" viewBox="0 0 24 24" style="fill:none;stroke:#fff;stroke-width:3">182        <path d="M5 12h14M13 5l7 7-7 7"/>183      </svg>184    </div>185  </div>186 187  <!-- Payments row -->188  <div class="payments">189    <div class="pill">G Pay</div>190    <div class="pill">Card</div>191    <div class="pill">PayPal</div>192    <div class="pill">Klarna.</div>193  </div>194 195  <!-- Link -->196  <div class="link">CHECK STORES NEARBY</div>197 198  <!-- Info row -->199  <div class="info-row">200    <div class="info-left">201      <div class="circle">202        <svg width="30" height="30" viewBox="0 0 24 24" style="stroke:#111; stroke-width:3; fill:none;">203          <path d="M20 6L9 17l-5-5"/>204        </svg>205      </div>206      <div class="muted">207        FREE STANDARD SHIPPING + FREE RETURNS &amp;<br/>EXCHANGES208      </div>209    </div>210    <div class="info-btn">i</div>211  </div>212 213  <!-- Bottom sheet: Added to bag -->214  <div class="sheet">215    <div class="sheet-head">216      ADDED TO BAG217      <div class="sheet-close">218        <svg width="40" height="40" viewBox="0 0 24 24" class="thin"><path d="M5 5l14 14M19 5L5 19"/></svg>219      </div>220    </div>221    <div class="sheet-body">222      <div class="prod-img">[IMG: Black Samba Shoe]</div>223      <div class="prod-info">224        <div class="prod-title">Samba OG Shoes</div>225        <div class="prod-sub">Size: M 7.5 / W 8.5</div>226      </div>227    </div>228    <div class="sheet-cta">229      VIEW BAG230      <div style="position:absolute; right:28px;">231        <svg width="64" height="64" viewBox="0 0 24 24" style="fill:none;stroke:#fff;stroke-width:3">232          <path d="M5 12h14M13 5l7 7-7 7"/>233        </svg>234      </div>235    </div>236  </div>237</div>238</body>239</html>