GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Product Page - Fabbbox Peri Peri Almonds</title>5<style>6  body { margin:0; padding:0; background:transparent; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff; font-family: Arial, Helvetica, sans-serif;11    color:#2d2d2d;12  }13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:84px; background:#000000; color:#ffffff;17    display:flex; align-items:center; padding:0 32px;18    font-size:34px; letter-spacing:1px;19  }20  .status-right { margin-left:auto; display:flex; gap:28px; align-items:center; }21  .icon { width:48px; height:48px; display:inline-block; }22  /* App bar */23  .app-bar {24    position:absolute; top:84px; left:0; right:0;25    height:120px; background:#ffffff; border-bottom:1px solid #e6e6e6;26    display:flex; align-items:center; padding:0 28px;27  }28  .app-title {29    font-size:48px; font-weight:600; color:#3a2a00;30    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;31    margin:0 20px;32  }33  .app-actions { margin-left:auto; display:flex; gap:34px; align-items:center; }34  /* Content */35  .content {36    position:absolute; top:204px; left:0; right:0; bottom:0;37    overflow:hidden;38  }39  .image-wrap {40    margin:24px 28px 16px 28px;41    position:relative;42  }43  .product-image {44    width:1024px; height:680px;45    background:#E0E0E0; border:1px solid #BDBDBD;46    display:flex; align-items:center; justify-content:center;47    color:#757575; font-size:34px;48  }49  .share-btn {50    position:absolute; right:24px; top:24px;51    width:90px; height:90px; background:#ffffff; border:1px solid #d0d0d0; border-radius:16px;52    display:flex; align-items:center; justify-content:center;53    box-shadow:0 2px 6px rgba(0,0,0,0.12);54  }55  .dots { display:flex; gap:18px; justify-content:center; margin-top:18px; }56  .dot { width:18px; height:18px; border-radius:50%; background:#d6d6d6; }57  .dot.active { background:#bd506f; }58  /* Title and star */59  .title-row { display:flex; align-items:flex-start; padding:18px 28px; }60  .product-title { font-size:54px; font-weight:700; color:#3a2a00; line-height:1.2; flex:1; }61  .star {62    width:72px; height:72px; margin-left:18px;63    border:2px solid #bfbfbf; border-radius:50%; display:flex; align-items:center; justify-content:center;64  }65  .star svg { width:42px; height:42px; }66  /* Price and Add */67  .price-add-row {68    display:flex; align-items:center; justify-content:space-between;69    padding:10px 28px 24px 28px;70  }71  .price-block { display:flex; align-items:flex-end; gap:16px; }72  .mrp-label { font-size:40px; color:#2d2d2d; }73  .price { font-size:56px; font-weight:700; color:#c2185b; }74  .tax { font-size:30px; color:#7a7a7a; margin-left:8px; }75  .add-btn {76    background:#6db640; color:#ffffff; font-size:46px; font-weight:700;77    border:none; border-radius:18px; padding:26px 44px; box-shadow:0 3px 8px rgba(0,0,0,0.15);78  }79  /* Section text */80  .section {81    padding:24px 28px;82    border-top:1px solid #efefef;83  }84  .section h3 { margin:0 0 8px 0; font-size:40px; color:#2d2d2d; font-weight:600; }85  .desc-title { font-size:40px; color:#9c5e00; font-weight:800; letter-spacing:0.5px; }86  .desc-text {87    margin-top:14px; font-size:38px; line-height:1.42; color:#3a2a00;88  }89</style>90</head>91<body>92<div id="render-target">93  <!-- Status Bar -->94  <div class="status-bar">95    11:1896    <div class="status-right">97      <!-- simple status icons -->98      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" fill="#fff"/><rect x="4" y="8" width="14" height="8" fill="#000"/></svg>99      <svg class="icon" viewBox="0 0 24 24"><path d="M2 18h3V6h-3v12zm5 0h3V10H7v8zm5 0h3V8h-3v10zm5 0h3V4h-3v14z" fill="#fff"/></svg>100    </div>101  </div>102 103  <!-- App Bar -->104  <div class="app-bar">105    <!-- Back icon -->106    <svg class="icon" viewBox="0 0 24 24">107      <path d="M15 18l-6-6 6-6" stroke="#3a2a00" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>108    </svg>109    <div class="app-title">Fabbbox Peri Peri Almonds,...</div>110    <div class="app-actions">111      <!-- Search -->112      <svg class="icon" viewBox="0 0 24 24">113        <circle cx="10" cy="10" r="7" stroke="#3a2a00" stroke-width="2" fill="none"/>114        <path d="M21 21l-5-5" stroke="#3a2a00" stroke-width="2" fill="none" stroke-linecap="round"/>115      </svg>116      <!-- Cart -->117      <svg class="icon" viewBox="0 0 24 24">118        <path d="M3 6h2l2 12h10l2-10H7" stroke="#3a2a00" stroke-width="2" fill="none" stroke-linejoin="round"/>119        <circle cx="10" cy="20" r="2" fill="#3a2a00"/>120        <circle cx="17" cy="20" r="2" fill="#3a2a00"/>121      </svg>122      <!-- More -->123      <svg class="icon" viewBox="0 0 24 24">124        <circle cx="12" cy="5" r="2" fill="#3a2a00"/>125        <circle cx="12" cy="12" r="2" fill="#3a2a00"/>126        <circle cx="12" cy="19" r="2" fill="#3a2a00"/>127      </svg>128    </div>129  </div>130 131  <!-- Content -->132  <div class="content">133    <div class="image-wrap">134      <div class="product-image">[IMG: Product with badges - Fabbbox Peri Peri Almonds]</div>135      <div class="share-btn">136        <svg viewBox="0 0 24 24" width="44" height="44">137          <circle cx="6" cy="12" r="3" fill="#888"/>138          <circle cx="18" cy="5" r="3" fill="#888"/>139          <circle cx="18" cy="19" r="3" fill="#888"/>140          <path d="M8.7 10.8l6-3.6M8.7 13.2l6 3.6" stroke="#888" stroke-width="2" fill="none"/>141        </svg>142      </div>143      <div class="dots">144        <div class="dot"></div>145        <div class="dot active"></div>146        <div class="dot"></div>147        <div class="dot"></div>148        <div class="dot"></div>149        <div class="dot"></div>150      </div>151    </div>152 153    <div class="title-row">154      <div class="product-title">Fabbbox Peri Peri Almonds, 120G Pack</div>155      <div class="star">156        <svg viewBox="0 0 24 24">157          <path d="M12 2l3 6 6 .9-4.5 4.4L18 20l-6-3.2L6 20l1.5-6.7L3 8.9 9 8l3-6z" fill="none" stroke="#bfbfbf" stroke-width="1.6"/>158        </svg>159      </div>160    </div>161 162    <div class="price-add-row">163      <div>164        <div class="price-block">165          <div class="mrp-label">MRP</div>166          <div class="price">₹336</div>167        </div>168        <div class="tax">(Inclusive of all taxes)</div>169      </div>170      <button class="add-btn">ADD</button>171    </div>172 173    <div class="section">174      <h3>Peri peri flavoured Almonds</h3>175    </div>176 177    <div class="section">178      <div class="desc-title">PRODUCT DESCRIPTION</div>179      <div class="desc-text">180        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!181      </div>182    </div>183  </div>184</div>185</body>186</html>