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 {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11    color: #2b1e02;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19  }20 21  /* Status bar */22  .status-bar {23    height: 120px;24    background: #000000;25    color: #ffffff;26    display: flex;27    align-items: center;28    padding: 0 32px;29    box-sizing: border-box;30  }31  .status-left {32    font-size: 44px;33    letter-spacing: 1px;34  }35  .status-right {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 22px;40  }41  .sb-dot {42    width: 22px;43    height: 22px;44    background: #ffffff;45    border-radius: 50%;46    opacity: 0.9;47  }48  .sb-battery {49    width: 46px;50    height: 24px;51    border: 2px solid #fff;52    border-radius: 4px;53    position: relative;54  }55  .sb-battery::after {56    content: "";57    position: absolute;58    right: -8px;59    top: 6px;60    width: 6px;61    height: 12px;62    background: #fff;63    border-radius: 2px;64  }65 66  /* Header / App bar */67  .app-bar {68    height: 150px;69    display: flex;70    align-items: center;71    padding: 0 30px;72    box-sizing: border-box;73    border-bottom: 1px solid #eee;74  }75  .icon-btn {76    width: 90px;77    height: 90px;78    display: flex;79    align-items: center;80    justify-content: center;81    border-radius: 18px;82  }83  .app-title {84    font-size: 48px;85    font-weight: 600;86    color: #3a2b11;87    margin-left: 16px;88    white-space: nowrap;89    overflow: hidden;90    text-overflow: ellipsis;91    max-width: 600px;92  }93  .app-actions {94    margin-left: auto;95    display: flex;96    align-items: center;97    gap: 24px;98  }99 100  /* Product image area */101  .image-section {102    position: relative;103    padding: 30px 0;104    box-sizing: border-box;105  }106  .product-image {107    width: 700px;108    height: 980px;109    background: #E0E0E0;110    border: 1px solid #BDBDBD;111    margin: 0 auto;112    display: flex;113    align-items: center;114    justify-content: center;115    color: #757575;116    font-size: 34px;117    text-align: center;118    border-radius: 12px;119  }120  .share-btn {121    position: absolute;122    right: 40px;123    top: 40px;124    width: 96px;125    height: 96px;126    display: flex;127    align-items: center;128    justify-content: center;129  }130  .dots {131    display: flex;132    justify-content: center;133    gap: 18px;134    margin-top: 28px;135  }136  .dot {137    width: 22px;138    height: 22px;139    background: #d9d9d9;140    border-radius: 50%;141  }142  .dot.active {143    background: #e05586;144  }145 146  /* Product details */147  .content {148    padding: 0 32px 20px 32px;149    box-sizing: border-box;150  }151  .title-row {152    display: flex;153    align-items: center;154    gap: 12px;155  }156  .prod-title {157    font-size: 56px;158    font-weight: 700;159    color: #3a2b11;160    line-height: 1.2;161    flex: 1;162  }163  .favorite {164    width: 72px;165    height: 72px;166    display: flex;167    align-items: center;168    justify-content: center;169  }170  .sub-info {171    font-size: 42px;172    color: #3a2b11;173    margin-top: 24px;174  }175  .price-row {176    display: flex;177    align-items: baseline;178    gap: 16px;179    margin-top: 28px;180  }181  .mrp-label {182    font-size: 46px;183    color: #2b1e02;184  }185  .mrp-value {186    font-size: 58px;187    font-weight: 700;188    color: #7a2f7a;189  }190  .tax-note {191    font-size: 34px;192    color: #777;193    margin-left: 12px;194  }195  .add-row {196    display: flex;197    align-items: center;198    margin-top: 30px;199  }200  .add-btn {201    margin-left: auto;202    background: #5da049;203    color: #fff;204    font-weight: 800;205    font-size: 46px;206    padding: 28px 48px;207    border-radius: 20px;208    box-shadow: 0 4px 0 rgba(0,0,0,0.12);209  }210  .divider {211    height: 2px;212    background: #eee;213    margin: 34px 0;214  }215  .small-desc {216    font-size: 44px;217    color: #3a2b11;218  }219 220  .section-title {221    display: flex;222    align-items: baseline;223    gap: 18px;224    margin-top: 34px;225    margin-bottom: 18px;226  }227  .section-title .light {228    font-size: 40px;229    letter-spacing: 2px;230    color: #7a6c56;231    font-weight: 700;232  }233  .section-title .highlight {234    font-size: 40px;235    color: #8c357e;236    font-weight: 800;237  }238  .long-text {239    font-size: 44px;240    color: #3a2b11;241    line-height: 1.35;242  }243 244  /* Home indicator */245  .home-indicator {246    position: absolute;247    bottom: 28px;248    left: 50%;249    transform: translateX(-50%);250    width: 520px;251    height: 16px;252    background: #cfcfcf;253    border-radius: 8px;254  }255</style>256</head>257<body>258<div id="render-target">259 260  <!-- Status bar -->261  <div class="status-bar">262    <div class="status-left">11:18</div>263    <div class="status-right">264      <div class="sb-dot"></div>265      <div class="sb-dot"></div>266      <div class="sb-battery"></div>267    </div>268  </div>269 270  <!-- App bar -->271  <div class="app-bar">272    <div class="icon-btn" aria-label="Back">273      <!-- Back Arrow -->274      <svg width="52" height="52" viewBox="0 0 24 24">275        <path d="M15 18l-6-6 6-6" stroke="#5b4b2a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>276      </svg>277    </div>278    <div class="app-title">Fabbox Peri Peri Almonds,...</div>279    <div class="app-actions">280      <div class="icon-btn" aria-label="Search">281        <svg width="52" height="52" viewBox="0 0 24 24">282          <circle cx="11" cy="11" r="6.5" stroke="#5b4b2a" stroke-width="2.2" fill="none"/>283          <path d="M20 20l-4.3-4.3" stroke="#5b4b2a" stroke-width="2.2" stroke-linecap="round"/>284        </svg>285      </div>286      <div class="icon-btn" aria-label="Cart">287        <svg width="56" height="56" viewBox="0 0 24 24">288          <path d="M3 4h2l2 12h10l2-8H7" stroke="#5b4b2a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>289          <circle cx="9" cy="20" r="1.8" fill="#5b4b2a"/>290          <circle cx="17" cy="20" r="1.8" fill="#5b4b2a"/>291        </svg>292      </div>293      <div class="icon-btn" aria-label="More">294        <svg width="36" height="36" viewBox="0 0 24 24">295          <circle cx="12" cy="5" r="2.2" fill="#5b4b2a"/>296          <circle cx="12" cy="12" r="2.2" fill="#5b4b2a"/>297          <circle cx="12" cy="19" r="2.2" fill="#5b4b2a"/>298        </svg>299      </div>300    </div>301  </div>302 303  <!-- Image Section -->304  <div class="image-section">305    <div class="product-image">[IMG: Fabbox Peri Peri Almonds Pack]</div>306 307    <div class="share-btn" aria-label="Share">308      <svg width="80" height="80" viewBox="0 0 24 24">309        <circle cx="12" cy="12" r="10.5" stroke="#8a8a8a" stroke-width="1.5" fill="#ffffff"/>310        <path d="M16 8l-8 4 8 4" stroke="#7a2f7a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>311      </svg>312    </div>313 314    <div class="dots">315      <div class="dot"></div>316      <div class="dot"></div>317      <div class="dot active"></div>318      <div class="dot"></div>319      <div class="dot"></div>320      <div class="dot"></div>321    </div>322  </div>323 324  <!-- Content -->325  <div class="content">326    <div class="title-row">327      <div class="prod-title">Fabbox Per Peri Almonds, 120G Pack</div>328      <div class="favorite" aria-label="Save">329        <svg width="60" height="60" viewBox="0 0 24 24">330          <path d="M12 17.3l-6.5 3.4 1.2-7.2L1 8.9l7.3-1.1L12 1.8l3.7 6 7.3 1.1-5.7 4.6 1.2 7.2z"331                stroke="#a78c5a" stroke-width="1.4" fill="none"/>332        </svg>333      </div>334    </div>335 336    <div class="sub-info">1 Pc</div>337 338    <div class="price-row">339      <div class="mrp-label">MRP</div>340      <div class="mrp-value">₹336</div>341      <div class="tax-note">(Inclusive of all taxes)</div>342    </div>343 344    <div class="add-row">345      <div style="flex:1;"></div>346      <div class="add-btn">ADD</div>347    </div>348 349    <div class="divider"></div>350 351    <div class="small-desc">Peri peri flavoured Almonds</div>352 353    <div class="section-title">354      <div class="light">PRODUCT</div>355      <div class="highlight">DESCRIPTION</div>356    </div>357 358    <div class="long-text">359      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!360    </div>361  </div>362 363  <!-- Home indicator -->364  <div class="home-indicator"></div>365</div>366</body>367</html>