GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Product Page - Fabbox Peri Peri Almonds</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    color: #2f250c;14  }15 16  /* Status bar */17  .statusbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #0d0d0d;24    color: #ffffff;25  }26  .status-content {27    position: absolute;28    top: 32px;29    left: 40px;30    right: 40px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    font-weight: 600;35    font-size: 42px;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 28px;41  }42  .icon {43    width: 48px; height: 48px;44  }45 46  /* App bar */47  .appbar {48    position: absolute;49    top: 120px;50    left: 0;51    width: 1080px;52    height: 120px;53    background: #ffffff;54    border-bottom: 1px solid #ececec;55    display: flex;56    align-items: center;57    padding: 0 30px;58    box-sizing: border-box;59  }60  .app-left {61    display: flex;62    align-items: center;63    gap: 24px;64  }65  .app-title {66    font-size: 46px;67    font-weight: 600;68    color: #3a2b10;69    white-space: nowrap;70    overflow: hidden;71    text-overflow: ellipsis;72    max-width: 650px;73  }74  .app-right {75    margin-left: auto;76    display: flex;77    align-items: center;78    gap: 42px;79  }80 81  /* Content Area */82  .content {83    position: absolute;84    top: 240px;85    left: 0;86    right: 0;87    padding: 0 40px;88    box-sizing: border-box;89  }90 91  .product-image {92    position: relative;93    width: 100%;94    height: 860px;95    background: #E0E0E0;96    border: 1px solid #BDBDBD;97    display: flex;98    align-items: center;99    justify-content: center;100    color: #757575;101    font-size: 40px;102  }103  .share-btn {104    position: absolute;105    top: 24px;106    right: 24px;107    width: 90px;108    height: 90px;109    border-radius: 20px;110    background: #ffffff;111    box-shadow: 0 2px 8px rgba(0,0,0,0.15);112    display: flex;113    align-items: center;114    justify-content: center;115  }116 117  .slider-dots {118    margin: 28px 0 34px;119    display: flex;120    justify-content: center;121    gap: 22px;122  }123  .dot {124    width: 22px; height: 22px; border-radius: 50%;125    background: #cfcfcf;126  }127  .dot.active { background: #d56a86; }128 129  .title-row {130    display: flex;131    align-items: center;132    gap: 18px;133  }134  .product-title {135    font-size: 50px;136    font-weight: 700;137    line-height: 1.2;138    color: #3a2b10;139    flex: 1;140  }141  .fav-star {142    width: 84px;143    height: 84px;144    border-radius: 22px;145    border: 1px solid #d1d1d1;146    display: flex;147    align-items: center;148    justify-content: center;149    color: #b0b0b0;150    background: #ffffff;151  }152 153  .qty-row {154    margin-top: 24px;155    font-size: 44px;156  }157 158  .price-row {159    margin-top: 18px;160    display: flex;161    align-items: center;162    justify-content: space-between;163  }164  .price-left {165    display: flex;166    align-items: baseline;167    gap: 14px;168  }169  .mrp-label { font-size: 42px; color: #2f250c; }170  .price {171    font-size: 54px;172    font-weight: 700;173    color: #b1002b;174  }175  .inclusive {176    font-size: 32px;177    color: #6f6f6f;178  }179  .add-btn {180    width: 240px;181    height: 110px;182    border-radius: 16px;183    background: #66b24b;184    color: #ffffff;185    display: flex;186    align-items: center;187    justify-content: center;188    font-size: 46px;189    font-weight: 700;190    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);191  }192 193  .section {194    margin-top: 36px;195    font-size: 42px;196    color: #3a2b10;197  }198 199  .heading {200    margin-top: 40px;201    font-size: 44px;202    font-weight: 700;203    letter-spacing: 0.5px;204  }205  .heading .muted { color: #7a6d9b; font-weight: 800; }206 207  .description {208    margin-top: 24px;209    font-size: 40px;210    line-height: 1.6;211    color: #3a2b10;212  }213 214  /* bottom home pill */215  .home-pill {216    position: absolute;217    bottom: 24px;218    left: 50%;219    transform: translateX(-50%);220    width: 420px;221    height: 18px;222    border-radius: 12px;223    background: #cfcfcf;224  }225</style>226</head>227<body>228<div id="render-target">229 230  <!-- Status bar -->231  <div class="statusbar">232    <div class="status-content">233      <div>11:17</div>234      <div class="status-icons">235        <!-- simple triangle icon -->236        <svg class="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 3l9 18H3z"/></svg>237        <!-- wifi icon -->238        <svg class="icon" viewBox="0 0 24 24">239          <path fill="#ffffff" d="M12 20a2 2 0 1 0 0.001 0z"/>240          <path fill="#ffffff" d="M2 9c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 9z"/>241          <path fill="#ffffff" d="M5 12c3-2 11-2 14 0l-2 2c-2-1-8-1-10 0l-2-2z"/>242        </svg>243        <!-- battery icon -->244        <svg class="icon" viewBox="0 0 24 24">245          <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#ffffff" stroke-width="2"/>246          <rect x="4" y="8" width="12" height="8" fill="#ffffff"/>247          <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>248        </svg>249      </div>250    </div>251  </div>252 253  <!-- App bar -->254  <div class="appbar">255    <div class="app-left">256      <svg class="icon" viewBox="0 0 24 24">257        <path d="M15 4L5 12l10 8" fill="none" stroke="#4a3a18" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>258      </svg>259      <div class="app-title">Fabbox Peri Peri Almonds,...</div>260    </div>261    <div class="app-right">262      <!-- search -->263      <svg class="icon" viewBox="0 0 24 24">264        <circle cx="11" cy="11" r="7" fill="none" stroke="#4a3a18" stroke-width="3"/>265        <path d="M21 21l-4.5-4.5" stroke="#4a3a18" stroke-width="3" stroke-linecap="round"/>266      </svg>267      <!-- cart -->268      <svg class="icon" viewBox="0 0 24 24">269        <path d="M3 5h2l2 12h10l2-9H7" fill="none" stroke="#4a3a18" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>270        <circle cx="9" cy="20" r="2" fill="#4a3a18"/>271        <circle cx="17" cy="20" r="2" fill="#4a3a18"/>272      </svg>273      <!-- menu -->274      <svg class="icon" viewBox="0 0 24 24">275        <circle cx="12" cy="5" r="2" fill="#4a3a18"/>276        <circle cx="12" cy="12" r="2" fill="#4a3a18"/>277        <circle cx="12" cy="19" r="2" fill="#4a3a18"/>278      </svg>279    </div>280  </div>281 282  <!-- Main content -->283  <div class="content">284    <div class="product-image">285      [IMG: Fabbox Peri Peri Almonds pack]286      <div class="share-btn">287        <svg width="48" height="48" viewBox="0 0 24 24">288          <path d="M18 8a3 3 0 1 0-0.1 0h0M6 12a3 3 0 1 0-0.1 0h0M18 16a3 3 0 1 0-0.1 0h0" fill="none" stroke="#7a7a7a" stroke-width="2"/>289          <path d="M8 12l6-3M8 12l6 3" fill="none" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"/>290        </svg>291      </div>292    </div>293 294    <div class="slider-dots">295      <span class="dot active"></span>296      <span class="dot"></span>297      <span class="dot"></span>298      <span class="dot"></span>299      <span class="dot"></span>300      <span class="dot"></span>301      <span class="dot"></span>302      <span class="dot"></span>303      <span class="dot"></span>304    </div>305 306    <div class="title-row">307      <div class="product-title">Fabbox Peri Peri Almonds, 120G Pack</div>308      <div class="fav-star">309        <svg width="48" height="48" viewBox="0 0 24 24">310          <path d="M12 3l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1 3-6z" fill="#b0b0b0"/>311        </svg>312      </div>313    </div>314 315    <div class="qty-row">1 Pc</div>316 317    <div class="price-row">318      <div class="price-left">319        <span class="mrp-label">MRP</span>320        <span class="price">₹336</span>321        <span class="inclusive">(Inclusive of all taxes)</span>322      </div>323      <div class="add-btn">ADD</div>324    </div>325 326    <div class="section">Peri peri flavoured Almonds</div>327 328    <div class="heading">329      PRODUCT <span class="muted">DESCRIPTION</span>330    </div>331 332    <div class="description">333      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!334    </div>335  </div>336 337  <div class="home-pill"></div>338</div>339</body>340</html>