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>Product Detail</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; border-radius: 18px;13    box-shadow: 0 4px 20px rgba(0,0,0,0.08);14  }15  .header {16    height: 160px;17    padding: 36px 40px 20px 40px;18    display: flex; align-items: center; justify-content: space-between;19    box-sizing: border-box;20  }21  .left-actions, .right-actions { display: flex; align-items: center; gap: 28px; }22  .icon-btn {23    width: 64px; height: 64px; border-radius: 32px;24    display: flex; justify-content: center; align-items: center;25    color: #1976D2;26  }27  .title-area { text-align: center; line-height: 1.2; margin-top: -10px; }28  .store-title { font-size: 44px; font-weight: 600; color: #222; }29  .store-sub { font-size: 30px; color: #7a7a7a; margin-top: 8px; }30  .cart-wrap { position: relative; }31  .badge {32    position: absolute; right: -2px; top: -2px;33    width: 36px; height: 36px; border-radius: 18px;34    background: #1976D2; color: #fff; font-size: 22px; font-weight: 700;35    display: flex; align-items: center; justify-content: center;36    box-shadow: 0 2px 6px rgba(0,0,0,0.2);37  }38 39  .hero {40    width: 100%; box-sizing: border-box;41    padding: 10px 60px 0 60px;42  }43  .product-image {44    width: 960px; height: 580px; margin: 0 auto; border-radius: 24px;45    background: #E0E0E0; border: 1px solid #BDBDBD;46    display: flex; align-items: center; justify-content: center;47    color: #757575; font-size: 32px; text-align: center;48    box-shadow: 0 8px 24px rgba(0,0,0,0.12);49  }50  .floating-add {51    position: absolute; right: 56px; top: 720px;52    width: 88px; height: 88px; border-radius: 24px;53    background: #ffffff; border: 2px solid #1976D2;54    display: flex; align-items: center; justify-content: center;55    box-shadow: 0 4px 12px rgba(0,0,0,0.12);56  }57 58  .content { padding: 40px 60px 0 60px; }59  .product-title {60    font-size: 54px; font-weight: 700; color: #222; letter-spacing: 0.2px;61    line-height: 1.25; margin-top: 34px;62  }63 64  .rating-row {65    display: flex; align-items: center; gap: 18px; margin-top: 28px;66    font-size: 34px; color: #555;67  }68  .rating-row a { color: #1976D2; text-decoration: underline; }69 70  .member-note {71    margin-top: 34px; font-size: 34px; color: #1976D2;72  }73 74  .price-row {75    margin-top: 18px; display: flex; align-items: baseline; gap: 18px;76  }77  .approx { font-size: 30px; color: #7a7a7a; }78  .price { font-size: 72px; font-weight: 800; color: #1976D2; }79  .old-price { font-size: 40px; color: #9e9e9e; text-decoration: line-through; }80  .per-lb { font-size: 32px; color: #7a7a7a; }81 82  .pill {83    margin-top: 42px; width: 960px; height: 120px; border-radius: 60px;84    background: #1976D2; color: #fff;85    display: flex; align-items: center; justify-content: space-between;86    padding: 0 30px; box-sizing: border-box;87    box-shadow: 0 6px 16px rgba(25,118,210,0.3);88  }89  .pill .center { font-size: 40px; font-weight: 700; }90  .circle-btn {91    width: 96px; height: 96px; border-radius: 48px;92    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.4);93    display: flex; align-items: center; justify-content: center;94  }95 96  .section-header {97    margin-top: 70px; padding: 0 10px;98    display: flex; align-items: center; justify-content: space-between;99  }100  .section-title { font-size: 46px; font-weight: 700; color: #222; }101  .view-all { font-size: 36px; color: #1976D2; }102 103  .cards {104    margin-top: 24px; display: flex; gap: 28px;105    padding-right: 60px;106  }107  .card {108    width: 320px; border: 1px solid #e6e6e6; border-radius: 28px;109    padding: 20px; box-sizing: border-box; background: #fff; position: relative;110  }111  .card .image {112    width: 280px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD;113    display: flex; align-items: center; justify-content: center; color: #757575;114    border-radius: 12px;115  }116  .card .add-mini {117    position: absolute; right: 26px; top: 26px;118    width: 56px; height: 56px; border-radius: 16px; border: 2px solid #1976D2; background: #fff;119    display: flex; align-items: center; justify-content: center;120  }121  .card .approx-label { margin-top: 16px; font-size: 26px; color: #9e9e9e; letter-spacing: 0.3px; }122  .card .rating-badge {123    position: absolute; right: 30px; bottom: 26px; display: flex; align-items: center; gap: 6px;124    font-size: 28px; color: #555;125  }126 127  /* Simple helpers for SVG icons */128  svg { display: block; }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Header -->135  <div class="header">136    <div class="left-actions">137      <div class="icon-btn" aria-label="Back">138        <svg width="36" height="36" viewBox="0 0 24 24">139          <path d="M15 18l-6-6 6-6" fill="none" stroke="#1976D2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>140        </svg>141      </div>142    </div>143 144    <div class="title-area">145      <div class="store-title">9960 Bluebonnet Blvd</div>146      <div class="store-sub">Ask associate</div>147    </div>148 149    <div class="right-actions">150      <div class="icon-btn" aria-label="Search">151        <svg width="36" height="36" viewBox="0 0 24 24">152          <circle cx="11" cy="11" r="6.5" fill="none" stroke="#1976D2" stroke-width="2"/>153          <path d="M20 20l-3.5-3.5" fill="none" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>154        </svg>155      </div>156      <div class="icon-btn cart-wrap" aria-label="Cart">157        <svg width="36" height="36" viewBox="0 0 24 24">158          <path d="M3 5h2l2 12h10l2-8H7" fill="none" stroke="#1976D2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>159          <circle cx="9" cy="20" r="1.8" fill="#1976D2"/>160          <circle cx="17" cy="20" r="1.8" fill="#1976D2"/>161        </svg>162        <div class="badge">1</div>163      </div>164    </div>165  </div>166 167  <!-- Hero image -->168  <div class="hero">169    <div class="product-image">[IMG: Beef Top Loin New York Strip Steak on Tray]</div>170  </div>171 172  <!-- Floating add icon -->173  <div class="floating-add" title="Add">174    <svg width="40" height="40" viewBox="0 0 24 24">175      <rect x="4" y="4" width="16" height="12" rx="2" ry="2" fill="none" stroke="#1976D2" stroke-width="2"/>176      <path d="M12 7v6M9 10h6" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>177    </svg>178  </div>179 180  <!-- Content -->181  <div class="content">182    <div class="product-title">Beef Top Loin New York Strip Steak Bone In Value Pack - 3.75 Lb</div>183 184    <div class="rating-row">185      <svg width="34" height="34" viewBox="0 0 24 24">186        <path d="M12 3l3 6 6 .9-4.5 4.2 1.1 6-5.6-3.1-5.6 3.1 1.1-6L3 9.9 9 9z" fill="#FFC107"/>187      </svg>188      <span>5.0</span>189      <a href="#">4 reviews</a>190    </div>191 192    <div class="member-note">Member Price (valid until 11/23/23)</div>193 194    <div class="price-row">195      <div class="approx">approx</div>196      <div class="price">$18.71 ea</div>197      <div class="old-price">$37.46</div>198      <div class="per-lb">($4.99 /lb)</div>199    </div>200 201    <div class="pill">202      <div class="circle-btn" aria-label="Decrease">203        <svg width="36" height="36" viewBox="0 0 24 24">204          <path d="M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"/>205        </svg>206      </div>207      <div class="center">1 in cart</div>208      <div class="circle-btn" aria-label="Increase">209        <svg width="36" height="36" viewBox="0 0 24 24">210          <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"/>211        </svg>212      </div>213    </div>214 215    <div class="section-header">216      <div class="section-title">Related products</div>217      <a class="view-all" href="#">View all</a>218    </div>219 220    <div class="cards">221      <div class="card">222        <div class="add-mini">223          <svg width="28" height="28" viewBox="0 0 24 24">224            <circle cx="12" cy="12" r="9" fill="none" stroke="#1976D2" stroke-width="2"/>225            <path d="M12 8v8M8 12h8" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>226          </svg>227        </div>228        <div class="image">[IMG: Beef Cut]</div>229        <div class="approx-label">APPROX.</div>230      </div>231 232      <div class="card">233        <div class="add-mini">234          <svg width="28" height="28" viewBox="0 0 24 24">235            <circle cx="12" cy="12" r="9" fill="none" stroke="#1976D2" stroke-width="2"/>236            <path d="M12 8v8M8 12h8" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>237          </svg>238        </div>239        <div class="image">[IMG: 4 Pack Steaks]</div>240        <div class="approx-label">APPROX.</div>241        <div class="rating-badge">242          <svg width="26" height="26" viewBox="0 0 24 24">243            <path d="M12 3l3 6 6 .9-4.5 4.2 1.1 6-5.6-3.1-5.6 3.1 1.1-6L3 9.9 9 9z" fill="#FFC107"/>244          </svg>245          <span>4.5</span>246        </div>247      </div>248 249      <div class="card">250        <div class="add-mini">251          <svg width="28" height="28" viewBox="0 0 24 24">252            <circle cx="12" cy="12" r="9" fill="none" stroke="#1976D2" stroke-width="2"/>253            <path d="M12 8v8M8 12h8" stroke="#1976D2" stroke-width="2" stroke-linecap="round"/>254          </svg>255        </div>256        <div class="image">[IMG: Beef Value Pack]</div>257        <div class="approx-label">APPROX.</div>258      </div>259    </div>260  </div>261 262</div>263</body>264</html>