GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Fabbox Peri Peri Almonds</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #ffffff;13    color: #2c240e;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #000;24  }25 26  /* Top App Bar */27  .top-bar {28    position: absolute;29    top: 120px;30    left: 0;31    width: 1080px;32    height: 140px;33    background: #fff;34    display: flex;35    align-items: center;36    padding: 0 28px;37    box-sizing: border-box;38    box-shadow: 0 1px 0 rgba(0,0,0,0.08);39  }40  .top-left {41    display: flex;42    align-items: center;43    gap: 20px;44    flex: 1;45    min-width: 0;46  }47  .title {48    font-size: 44px;49    font-weight: 700;50    color: #3b2f19;51    white-space: nowrap;52    overflow: hidden;53    text-overflow: ellipsis;54  }55  .icon-btn {56    width: 70px;57    height: 70px;58    border-radius: 50%;59    display: inline-flex;60    align-items: center;61    justify-content: center;62    color: #5a513c;63  }64 65  /* Product image area */66  .image-wrap {67    position: absolute;68    top: 260px;69    left: 0;70    width: 1080px;71    height: 600px;72    background: #E0E0E0;73    border-top: 1px solid #BDBDBD;74    border-bottom: 1px solid #BDBDBD;75    display: flex;76    align-items: center;77    justify-content: center;78    color: #6b6b6b;79    font-size: 36px;80    text-align: center;81    padding: 20px;82    box-sizing: border-box;83  }84 85  .share-fab {86    position: absolute;87    top: 300px;88    right: 36px;89    width: 90px;90    height: 90px;91    background: #fff;92    border-radius: 20px;93    box-shadow: 0 2px 6px rgba(0,0,0,0.18);94    display: flex;95    align-items: center;96    justify-content: center;97  }98 99  /* dots */100  .dots {101    position: absolute;102    top: 880px;103    left: 0;104    width: 1080px;105    height: 40px;106    display: flex;107    justify-content: center;108    gap: 20px;109  }110  .dot {111    width: 18px;112    height: 18px;113    border-radius: 50%;114    background: #d8d8d8;115  }116  .dot.active { background: #9b1f4e; }117 118  /* Product title and meta */119  .content {120    position: absolute;121    top: 940px;122    left: 0;123    width: 1080px;124    padding: 0 32px;125    box-sizing: border-box;126  }127  .prod-title-row {128    display: flex;129    align-items: flex-start;130    gap: 20px;131  }132  .prod-title {133    font-size: 58px;134    font-weight: 800;135    line-height: 1.2;136    color: #3a2c12;137    flex: 1;138  }139  .star {140    width: 80px;141    height: 80px;142    color: #8a8262;143  }144  .qty {145    margin-top: 22px;146    font-size: 44px;147    color: #373017;148  }149  .price-row {150    margin-top: 36px;151    display: flex;152    align-items: center;153  }154  .mrp {155    font-size: 44px;156    color: #2d2d2d;157  }158  .price {159    font-size: 60px;160    font-weight: 800;161    color: #a0173f;162    margin-left: 16px;163  }164  .tax-note {165    font-size: 30px;166    color: #77725d;167    margin-left: 16px;168  }169  .add-btn {170    margin-left: auto;171    background: #6da43b;172    color: #fff;173    font-size: 48px;174    font-weight: 800;175    border-radius: 24px;176    padding: 28px 60px;177  }178 179  .small-heading {180    margin-top: 56px;181    font-size: 42px;182    color: #564b2c;183  }184 185  .section-title {186    margin-top: 36px;187    font-size: 40px;188    font-weight: 800;189    color: #6a5a2a;190  }191  .section-title .accent {192    color: #8b2460;193    margin-left: 16px;194  }195 196  .desc {197    margin-top: 24px;198    font-size: 38px;199    line-height: 1.5;200    color: #433a22;201  }202 203  /* gesture bar */204  .gesture {205    position: absolute;206    bottom: 24px;207    left: 50%;208    transform: translateX(-50%);209    width: 460px;210    height: 12px;211    background: #BDBDBD;212    border-radius: 12px;213  }214</style>215</head>216<body>217<div id="render-target">218 219  <div class="status-bar"></div>220 221  <div class="top-bar">222    <div class="icon-btn" aria-label="Back">223      <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#3d3422" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">224        <polyline points="15 18 9 12 15 6"></polyline>225      </svg>226    </div>227    <div class="top-left">228      <div class="title">Fabbox Peri Peri Almonds,...</div>229    </div>230    <div class="icon-btn" aria-label="Search">231      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#3d3422" stroke-width="2">232        <circle cx="11" cy="11" r="7"></circle>233        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>234      </svg>235    </div>236    <div class="icon-btn" aria-label="Cart">237      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#3d3422" stroke-width="2">238        <circle cx="9" cy="21" r="1.5"></circle>239        <circle cx="18" cy="21" r="1.5"></circle>240        <path d="M3 3h2l2 12h11l2-8H6"></path>241      </svg>242    </div>243    <div class="icon-btn" aria-label="More">244      <svg width="44" height="44" viewBox="0 0 24 24" fill="#3d3422">245        <circle cx="12" cy="5" r="2"></circle>246        <circle cx="12" cy="12" r="2"></circle>247        <circle cx="12" cy="19" r="2"></circle>248      </svg>249    </div>250  </div>251 252  <div class="image-wrap">[IMG: Product photo with labels and almonds]</div>253 254  <div class="share-fab" aria-label="Share">255    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">256      <circle cx="18" cy="5" r="3"></circle>257      <circle cx="6" cy="12" r="3"></circle>258      <circle cx="18" cy="19" r="3"></circle>259      <path d="M8.6 11.1l6.8-3.9M8.6 12.9l6.8 3.9"></path>260    </svg>261  </div>262 263  <div class="dots">264    <div class="dot"></div>265    <div class="dot active"></div>266    <div class="dot"></div>267    <div class="dot"></div>268    <div class="dot"></div>269    <div class="dot"></div>270  </div>271 272  <div class="content">273    <div class="prod-title-row">274      <div class="prod-title">Fabbox Peri Peri Almonds, 120G Pack</div>275      <div class="star">276        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#8a8262" stroke-width="2">277          <path d="M12 3l3.09 6.26L22 10.27l-5 4.87L18.18 22 12 18.77 5.82 22 7 15.14l-5-4.87 6.91-1.01L12 3z"></path>278        </svg>279      </div>280    </div>281 282    <div class="qty">1 Pc</div>283 284    <div class="price-row">285      <div class="mrp">MRP</div>286      <div class="price">₹336</div>287      <div class="tax-note">(Inclusive of all taxes)</div>288      <div class="add-btn">ADD</div>289    </div>290 291    <div class="small-heading">Peri peri flavoured Almonds</div>292 293    <div class="section-title">PRODUCT <span class="accent">DESCRIPTION</span></div>294 295    <div class="desc">296      Who knew the humble almond could be made the hottest party snack of the decade? Well, we had a vision and we did it! We have combined the tastiest zingy Peri Peri flavour and some top quality Californian to bring you a spicefest like none before. Several customers even tell us that they love the hot flavour even though they generally do not like Spicy food. Need we say more? One of our best sellers of all times, grab a pack now for those wine parties or tasty casual afternoon munching!297    </div>298  </div>299 300  <div class="gesture"></div>301</div>302</body>303</html>