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>Yummiez Green Peas 500G</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    background: #7A7A7A;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 40px;25    box-sizing: border-box;26    font-size: 36px;27  }28  .status-icons {29    margin-left: 30px;30    display: flex;31    gap: 26px;32    align-items: center;33  }34  .status-dot {35    width: 14px; height: 14px; background:#fff; border-radius:50%;36  }37  .status-pill {38    width: 36px; height: 36px; border:2px solid #fff; border-radius:50%;39  }40  .status-shapes {41    margin-left: auto;42    display: flex; gap: 24px; align-items: center;43  }44  .status-shapes .shape {45    width: 36px; height: 24px; background: #fff; border-radius: 4px;46  }47  .status-battery {48    width: 46px; height: 26px; border: 3px solid #fff; border-radius: 4px; position: relative;49  }50  .status-battery::after {51    content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 10px; background: #fff; border-radius: 2px;52  }53 54  /* App bar */55  .app-bar {56    height: 140px;57    border-bottom: 1px solid #E5E5E5;58    display: flex;59    align-items: center;60    padding: 0 36px;61    box-sizing: border-box;62    gap: 24px;63  }64  .app-title {65    font-size: 44px; font-weight: 700; color: #111;66  }67  .app-actions { margin-left: auto; display: flex; gap: 30px; }68  .icon-btn { width: 54px; height: 54px; display: inline-flex; align-items:center; justify-content:center; }69 70  /* Product image card */71  .product-card {72    margin: 28px 40px 0 40px;73    width: 1000px;74    height: 980px;75    background: #fff;76    border: 1px solid #E7E7E7;77    border-radius: 28px;78    position: relative;79    box-shadow: 0 6px 16px rgba(0,0,0,0.06);80    overflow: hidden;81  }82  .product-image {83    position: absolute;84    left: 20px; right: 20px; top: 20px; bottom: 20px;85    background: #E0E0E0;86    border: 1px solid #BDBDBD;87    border-radius: 18px;88    display: flex; align-items: center; justify-content: center;89    color: #757575; font-size: 36px;90  }91  .heart-btn {92    position: absolute; right: 26px; top: 26px; width: 60px; height: 60px;93    display: flex; align-items:center; justify-content:center;94    background: #ffffff; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.12);95  }96  .best-seller {97    position: absolute; right: 0; bottom: 120px;98    width: 420px; height: 110px;99    background: rgba(230,138,74,0.95);100    display: flex; align-items:center; justify-content: center;101    color: #fff; font-weight: 700; font-size: 34px; letter-spacing: 1px;102  }103  .carousel-dot {104    position: absolute;105    left: 50%; transform: translateX(-50%);106    bottom: -28px;107    width: 32px; height: 32px;108    background: #E68A4A; border-radius: 50%;109  }110 111  /* Details below image */112  .content {113    padding: 40px 40px 0 40px; box-sizing: border-box;114  }115  .product-title { font-size: 44px; font-weight: 700; color: #111; }116  .product-sub { font-size: 28px; color: #6A6A6A; margin-top: 8px; }117 118  .price-add {119    display: flex; align-items: center; justify-content: space-between;120    margin-top: 30px;121  }122  .price-block .price {123    font-size: 64px; font-weight: 800; color: #111;124  }125  .price-block .tax {126    font-size: 26px; color: #7A7A7A; margin-top: 6px;127  }128  .add-btn {129    width: 440px; height: 140px; border-radius: 24px;130    background: #0D1B2A; color: #fff; font-size: 44px; font-weight: 700;131    display: flex; align-items: center; justify-content: center;132    box-shadow: 0 8px 16px rgba(13,27,42,0.28);133  }134 135  .section {136    margin-top: 40px;137    display: flex; align-items: center;138  }139  .section-title {140    font-size: 40px; font-weight: 700; color: #111;141  }142  .section-action {143    margin-left: auto;144    width: 60px; height: 60px;145    display: flex; align-items:center; justify-content:center;146    color: #111;147  }148 149  /* Similar products row */150  .cards-row {151    margin-top: 24px;152    display: flex; gap: 30px;153  }154  .product-card-small {155    width: 300px; height: 300px; background: #fff;156    border-radius: 24px; box-shadow: 0 10px 20px rgba(0,0,0,0.08);157    border: 1px solid #ECECEC; position: relative;158    display: flex; align-items:center; justify-content:center;159  }160  .product-card-small .placeholder {161    width: 92%; height: 92%;162    background:#E0E0E0; border:1px solid #BDBDBD; border-radius: 18px;163    display:flex; align-items:center; justify-content:center; color:#757575; font-size: 26px;164  }165  .mini-add {166    position: absolute; right: 16px; bottom: 16px;167    width: 80px; height: 80px; border-radius: 16px;168    background: #0D1B2A; color: #fff; display:flex; align-items:center; justify-content:center;169    box-shadow: 0 6px 12px rgba(13,27,42,0.3);170    font-size: 46px; font-weight: 700;171  }172 173  /* Bottom gesture bar */174  .gesture {175    position: absolute; left: 50%; transform: translateX(-50%);176    bottom: 34px; width: 360px; height: 16px; background:#C9C9C9; border-radius: 12px;177  }178</style>179</head>180<body>181<div id="render-target">182 183  <!-- Status bar -->184  <div class="status-bar">185    <div>10:35</div>186    <div class="status-icons">187      <div class="status-pill"></div>188      <div class="status-pill"></div>189      <div class="status-pill"></div>190      <div class="status-pill"></div>191      <div class="status-dot"></div>192    </div>193    <div class="status-shapes">194      <div class="shape"></div>195      <div class="status-battery"></div>196    </div>197  </div>198 199  <!-- App bar -->200  <div class="app-bar">201    <div class="icon-btn" aria-label="Back">202      <svg width="48" height="48" viewBox="0 0 24 24">203        <path d="M15 6l-6 6 6 6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>204      </svg>205    </div>206    <div class="app-title">Yummiez Green Peas 500G</div>207    <div class="app-actions">208      <div class="icon-btn" aria-label="Share">209        <svg width="48" height="48" viewBox="0 0 24 24">210          <path d="M15 4a3 3 0 1 1 0 6a3 3 0 0 1 0-6Zm-9 5a3 3 0 1 0 0 6a3 3 0 0 0 0-6Zm9 5a3 3 0 1 1 0 6a3 3 0 0 1 0-6Z" fill="none" stroke="#111" stroke-width="2"/>211          <path d="M8 10l6-3M8 14l6 3" fill="none" stroke="#111" stroke-width="2"/>212        </svg>213      </div>214      <div class="icon-btn" aria-label="Search">215        <svg width="48" height="48" viewBox="0 0 24 24">216          <circle cx="11" cy="11" r="7" fill="none" stroke="#111" stroke-width="2"/>217          <path d="M20 20l-4-4" stroke="#111" stroke-width="2" stroke-linecap="round"/>218        </svg>219      </div>220    </div>221  </div>222 223  <!-- Product Image Card -->224  <div class="product-card">225    <div class="product-image">[IMG: Yummiez Green Peas Bag]</div>226    <div class="heart-btn" aria-label="Favorite">227      <svg width="28" height="28" viewBox="0 0 24 24">228        <path d="M12 20s-7-4.4-7-9a4 4 0 0 1 7-2a4 4 0 0 1 7 2c0 4.6-7 9-7 9z" fill="none" stroke="#111" stroke-width="2"/>229      </svg>230    </div>231    <div class="best-seller">BEST SELLER</div>232    <div class="carousel-dot"></div>233  </div>234 235  <!-- Content -->236  <div class="content">237    <div class="product-title">Yummiez Green Peas 500G</div>238    <div class="product-sub">Godrej Yummiez</div>239 240    <div class="price-add">241      <div class="price-block">242        <div class="price">₹160</div>243        <div class="tax">(Inclusive of taxes)</div>244      </div>245      <div class="add-btn">Add to cart</div>246    </div>247 248    <div class="section" style="margin-top: 46px;">249      <div class="section-title">Product Detail</div>250      <div class="section-action" aria-label="Expand">251        <svg width="40" height="40" viewBox="0 0 24 24">252          <path d="M12 5v14M5 12h14" stroke="#111" stroke-width="2" stroke-linecap="round"/>253        </svg>254      </div>255    </div>256 257    <div class="section" style="margin-top: 36px;">258      <div class="section-title">Similar product</div>259      <div class="section-action" aria-label="Next">260        <svg width="40" height="40" viewBox="0 0 24 24">261          <path d="M9 6l6 6-6 6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>262        </svg>263      </div>264    </div>265 266    <div class="cards-row">267      <div class="product-card-small">268        <div class="placeholder">[IMG: Product]</div>269        <div class="mini-add">+</div>270      </div>271      <div class="product-card-small">272        <div class="placeholder">[IMG: Product]</div>273        <div class="mini-add">+</div>274      </div>275      <div class="product-card-small">276        <div class="placeholder">[IMG: Product]</div>277        <div class="mini-add">+</div>278      </div>279    </div>280  </div>281 282  <!-- Bottom gesture bar -->283  <div class="gesture"></div>284</div>285</body>286</html>