GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Product Detail - Potato Carisma</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff; border-radius:20px;10 box-shadow: 0 4px 18px rgba(0,0,0,0.15);11 }12 13 /* Top green app bar */14 .app-bar { position:absolute; left:0; top:0; width:100%; height:220px; background:#689F38; color:#fff; }15 .status-bar { height:80px; display:flex; align-items:center; padding:0 30px; font-weight:600; font-size:34px; }16 .status-icons { margin-left:auto; display:flex; gap:26px; align-items:center; }17 .status-dot { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.85); }18 .tool-bar { height:140px; display:flex; align-items:center; padding:0 22px; }19 .tool-left { width:120px; display:flex; align-items:center; justify-content:center; }20 .tool-right { margin-left:auto; display:flex; gap:36px; padding-right:24px; }21 .icon-btn { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.2); }22 23 /* Title and price */24 .title-wrap { position:absolute; left:0; top:220px; width:100%; padding:26px 32px 18px 32px; border-bottom:1px solid #e8e8e8; }25 .product-title { font-size:46px; color:#222; line-height:1.26; font-weight:700; }26 .price-row { margin-top:18px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:34px; }27 .price { color:#1a1a1a; font-weight:700; }28 .perkg { color:#777; }29 .mrp { color:#777; }30 .discount { background:#E57373; color:#fff; padding:6px 14px; border-radius:10px; font-weight:700; font-size:28px; }31 32 /* Main image */33 .image-main { position:absolute; left:0; top:410px; width:100%; height:420px; display:flex; align-items:center; justify-content:center; }34 .img-placeholder { width:980px; height:420px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px; }35 36 /* Thumbnails */37 .thumbs { position:absolute; left:0; top:860px; width:100%; padding:0 24px; display:flex; gap:26px; }38 .thumb { width:160px; height:120px; background:#E0E0E0; border:2px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px; border-radius:12px; }39 .thumb.active { border-color:#6AA34A; }40 41 /* Sections */42 .section { position:absolute; left:0; width:100%; padding:24px 30px; border-top:12px solid #f3f3f3; }43 .sec-header { display:flex; align-items:center; font-size:40px; font-weight:700; color:#222; }44 .chev { margin-left:auto; width:46px; height:46px; }45 .sub-title { margin-top:26px; font-size:36px; font-weight:700; color:#333; }46 .bullet-list { margin-top:14px; color:#444; font-size:32px; line-height:1.6; }47 .bullet-list li { margin-bottom:12px; }48 .info-text { color:#555; font-size:32px; line-height:1.7; margin-top:8px; }49 50 /* Save/Add bar */51 .bottom-bar { position:absolute; left:0; bottom:240px; width:100%; height:120px; background:#444; display:flex; }52 .bar-left, .bar-right { flex:1; display:flex; align-items:center; justify-content:center; gap:20px; color:#fff; font-size:36px; font-weight:700; }53 .bar-right { background:#E57373; }54 .bar-left { background:#3b3b3b; }55 .bar-icon { width:56px; height:56px; }56 57 /* "You may like" */58 .suggest { position:absolute; left:0; bottom:120px; width:100%; padding:24px 30px; font-size:42px; font-weight:700; color:#333; }59 60 /* Bottom gesture bar */61 .gesture { position:absolute; left:420px; bottom:36px; width:240px; height:10px; background:#1a1a1a; border-radius:6px; opacity:0.5; }62</style>63</head>64<body>65<div id="render-target">66 67 <div class="app-bar">68 <div class="status-bar">69 10:2270 <div class="status-icons">71 <div class="status-dot"></div>72 <div class="status-dot"></div>73 <div class="status-dot"></div>74 <div class="status-dot"></div>75 </div>76 </div>77 <div class="tool-bar">78 <div class="tool-left">79 <!-- Back Arrow -->80 <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff">81 <path d="M15.5 19l-7-7 7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>82 </svg>83 </div>84 <div class="tool-right">85 <div class="icon-btn">86 <!-- Search -->87 <svg width="32" height="32" viewBox="0 0 24 24" fill="none">88 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"/>89 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>90 </svg>91 </div>92 <div class="icon-btn">93 <!-- Share -->94 <svg width="32" height="32" viewBox="0 0 24 24" fill="none">95 <circle cx="6" cy="12" r="3" stroke="#fff" stroke-width="2"/>96 <circle cx="18" cy="7" r="3" stroke="#fff" stroke-width="2"/>97 <circle cx="18" cy="17" r="3" stroke="#fff" stroke-width="2"/>98 <path d="M9 11l6-3M9 13l6 3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>99 </svg>100 </div>101 <div class="icon-btn">102 <!-- Cart -->103 <svg width="32" height="32" viewBox="0 0 24 24" fill="none">104 <path d="M5 6h15l-2 9H7L5 6z" stroke="#fff" stroke-width="2" fill="none"/>105 <circle cx="9" cy="19" r="2" fill="#fff"/>106 <circle cx="17" cy="19" r="2" fill="#fff"/>107 </svg>108 </div>109 </div>110 </div>111 </div>112 113 <div class="title-wrap">114 <div class="product-title">Potato Carisma - Lower Glycemic Index, 1 Kg</div>115 <div class="price-row">116 <span class="price">₹60.59</span>117 <span class="perkg">(₹60.59/kg)</span>118 <span class="mrp">MRP: ₹73</span>119 <span class="discount">17% OFF</span>120 </div>121 </div>122 123 <div class="image-main">124 <div class="img-placeholder">[IMG: Carisma Potatoes - Main]</div>125 </div>126 127 <div class="thumbs">128 <div class="thumb active">[IMG: Potatoes]</div>129 <div class="thumb">[IMG: Cut Potato]</div>130 <div class="thumb">[IMG: Pack Front]</div>131 <div class="thumb">[IMG: Pack Side]</div>132 </div>133 134 <!-- Sections -->135 <div class="section" style="top:1020px;">136 <div class="sec-header">About this product137 <svg class="chev" viewBox="0 0 24 24">138 <path d="M6 9l6 6 6-6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>139 </svg>140 </div>141 <div class="sub-title">About the Product</div>142 <ul class="bullet-list">143 <li>It is Non-GMO Potato - Farmed from traditional seed originated in the Netherlands that are not genetically modified.</li>144 </ul>145 </div>146 147 <div class="section" style="top:1260px;">148 <div class="sec-header">Benefits149 <svg class="chev" viewBox="0 0 24 24">150 <path d="M6 9l6 6 6-6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>151 </svg>152 </div>153 <div class="info-text">CARISMA Potatoes are also rich in Vitamin C and Potassium contents.</div>154 </div>155 156 <div class="section" style="top:1470px;">157 <div class="sec-header">Other Product Info158 <svg class="chev" viewBox="0 0 24 24">159 <path d="M6 9l6 6 6-6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>160 </svg>161 </div>162 <div class="info-text">163 EAN Code: 40231072 FSSAI No: 10015042002228 Manufactured & Marketed by: Supermarket Grocery Supplies Pvt. Ltd.164 </div>165 </div>166 167 <div class="section" style="top:1680px; border-top:0;">168 <div class="sec-header">Variable weight policy169 <svg class="chev" viewBox="0 0 24 24">170 <path d="M6 9l6 6 6-6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>171 </svg>172 </div>173 <div class="info-text" style="display:flex; align-items:flex-start; gap:18px; margin-top:18px;">174 <svg width="48" height="48" viewBox="0 0 24 24">175 <path d="M4 20h16M6 16h12l-3-8H9l-3 8z" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>176 </svg>177 <span>Please note that the item(s) in this product may vary slightly in size and weight. Hence, the actual weight of the product delivered can differ marginally.</span>178 </div>179 </div>180 181 <!-- Bottom action bar -->182 <div class="bottom-bar">183 <div class="bar-left">184 <svg class="bar-icon" viewBox="0 0 24 24" fill="none">185 <path d="M6 4h12v18l-6-4-6 4V4z" stroke="#fff" stroke-width="2" fill="none"/>186 </svg>187 Save for later188 </div>189 <div class="bar-right">190 <svg class="bar-icon" viewBox="0 0 24 24" fill="none">191 <path d="M7 8h10v12H7z" stroke="#fff" stroke-width="2"/>192 <path d="M9 8a3 3 0 0 1 6 0" stroke="#fff" stroke-width="2"/>193 </svg>194 Add to Basket195 </div>196 </div>197 198 <div class="suggest">You may like to view more in</div>199 200 <div class="gesture"></div>201</div>202</body>203</html>