GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Detail - Yummiez Green Peas 500G</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; border-radius: 28px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);12  }13  /* Status bar */14  .status-bar {15    height: 120px; background: #707070; color: #fff; display: flex; align-items: center; padding: 0 32px; font-weight: 600;16  }17  .status-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }18  .status-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.8; }19  .status-icon-pill { width: 40px; height: 24px; border-radius: 12px; background: rgba(255,255,255,0.9); }20  /* App bar */21  .app-bar {22    height: 140px; display: flex; align-items: center; padding: 0 28px; background: #fff; border-bottom: 1px solid #e9e9e9;23  }24  .app-title { font-size: 44px; font-weight: 700; color: #111; margin-left: 16px; }25  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }26  .icon-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; }27  .icon { width: 40px; height: 40px; }28  /* Content */29  .content { padding: 24px 32px 0 32px; }30  .card {31    width: 1016px; height: 1040px; border: 1px solid #e5e5e5; border-radius: 24px; position: relative; background: #fff;32    box-shadow: 0 2px 8px rgba(0,0,0,0.04);33  }34  .img-placeholder {35    position: absolute; inset: 12px; border: 1px dashed #BDBDBD; background: #E0E0E0; border-radius: 18px;36    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600; font-size: 30px; text-align: center;37  }38  .favorite {39    position: absolute; right: 24px; top: 24px; width: 64px; height: 64px; border-radius: 32px; background: rgba(255,255,255,0.95);40    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.12);41  }42  .ribbon {43    position: absolute; right: 0; bottom: 140px; background: #E68646; color: #fff; padding: 22px 30px; font-weight: 800; font-size: 34px;44  }45  .page-dot {46    position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px; width: 28px; height: 28px; background: #E59A43; border-radius: 50%;47    box-shadow: 0 0 0 4px rgba(229,154,67,0.25);48  }49  .title { margin-top: 28px; font-size: 44px; font-weight: 800; color: #111; }50  .subtitle { font-size: 28px; color: #6b6b6b; margin-top: 8px; }51  .price-row { display: flex; align-items: center; margin-top: 28px; }52  .price { font-size: 64px; font-weight: 800; color: #0c0c0c; }53  .tax { font-size: 26px; color: #7b7b7b; margin-top: 8px; }54  .qty-box {55    margin-left: auto; width: 420px; height: 120px; background: #0E1D3D; border-radius: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px;56    box-shadow: 0 6px 16px rgba(13,28,62,0.3);57  }58  .qty-text { color: #fff; font-size: 42px; font-weight: 700; }59  .section-title { margin-top: 40px; font-size: 40px; font-weight: 800; color: #131313; display: flex; align-items: center; }60  .section-title .expand { margin-left: auto; width: 48px; height: 48px; border-radius: 12px; border: 2px solid #9aa5b1; display: flex; align-items: center; justify-content: center; color: #0E1D3D; }61  .similar-row { margin-top: 24px; display: flex; gap: 28px; }62  .similar-card {63    width: 300px; height: 340px; background: #fff; border-radius: 28px; border: 1px solid #e6e6e6; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,0.06);64    display: flex; align-items: center; justify-content: center;65  }66  .similar-card .center-dot { width: 14px; height: 14px; background: #E59A43; border-radius: 50%; opacity: 0.8; }67  .add-overlay {68    position: absolute; right: 16px; bottom: 16px; width: 72px; height: 72px; border-radius: 16px; background: #0E1D3D; display: flex; align-items: center; justify-content: center;69    box-shadow: 0 6px 16px rgba(13,28,62,0.35);70  }71  /* Bottom bar */72  .bottom-bar {73    position: absolute; left: 24px; right: 24px; bottom: 120px; height: 140px; background: #0E1D3D; border-radius: 24px;74    display: flex; align-items: center; padding: 0 32px; color: #fff; box-shadow: 0 8px 24px rgba(13,28,62,0.35);75  }76  .bb-left { display: flex; align-items: center; gap: 18px; font-size: 36px; font-weight: 700; }77  .bb-right { margin-left: auto; font-size: 40px; font-weight: 800; display: flex; align-items: center; gap: 12px; }78  .gesture {79    position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; width: 360px; height: 16px; background: #d6d6d6; border-radius: 10px;80  }81  /* Simple helpers */82  .muted { color: #9aa5b1; font-weight: 600; }83  /* SVG styles */84  svg { display: block; }85</style>86</head>87<body>88<div id="render-target">89  <!-- Status bar -->90  <div class="status-bar">91    <div>10:35</div>92    <div class="status-right">93      <!-- simple indicators to mimic OS icons -->94      <div class="status-dot"></div>95      <div class="status-dot"></div>96      <div class="status-dot"></div>97      <div class="status-dot"></div>98      <div class="status-icon-pill"></div>99    </div>100  </div>101 102  <!-- App bar -->103  <div class="app-bar">104    <div class="icon-btn" aria-label="Back">105      <svg class="icon" viewBox="0 0 48 48">106        <path d="M30 8 L14 24 L30 40" stroke="#111" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>107      </svg>108    </div>109    <div class="app-title">Yummiez Green Peas 500G</div>110    <div class="app-actions">111      <div class="icon-btn" aria-label="Share">112        <svg class="icon" viewBox="0 0 48 48">113          <circle cx="10" cy="24" r="6" fill="none" stroke="#111" stroke-width="4"></circle>114          <circle cx="38" cy="10" r="6" fill="none" stroke="#111" stroke-width="4"></circle>115          <circle cx="38" cy="38" r="6" fill="none" stroke="#111" stroke-width="4"></circle>116          <path d="M15 22 L32 14 M15 26 L32 34" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"></path>117        </svg>118      </div>119      <div class="icon-btn" aria-label="Search">120        <svg class="icon" viewBox="0 0 48 48">121          <circle cx="22" cy="22" r="12" stroke="#111" stroke-width="4" fill="none"></circle>122          <path d="M32 32 L44 44" stroke="#111" stroke-width="4" stroke-linecap="round"></path>123        </svg>124      </div>125    </div>126  </div>127 128  <!-- Content -->129  <div class="content">130    <div class="card">131      <div class="img-placeholder">[IMG: Yummiez Green Peas Pack]</div>132      <div class="favorite">133        <svg viewBox="0 0 48 48" width="36" height="36">134          <path d="M24 40 C10 30 6 26 6 18 C6 12 10 8 16 8 C19 8 22 10 24 12 C26 10 29 8 32 8 C38 8 42 12 42 18 C42 26 38 30 24 40 Z"135                fill="none" stroke="#111" stroke-width="3"></path>136        </svg>137      </div>138      <div class="ribbon">BEST SELLER</div>139      <div class="page-dot"></div>140    </div>141 142    <div class="title">Yummiez Green Peas 500G</div>143    <div class="subtitle">Godrej Yummiez</div>144 145    <div class="price-row">146      <div>147        <div class="price">₹160</div>148        <div class="tax">(Inclusive of taxes)</div>149      </div>150      <div class="qty-box" aria-label="Quantity">151        <svg viewBox="0 0 48 48" width="48" height="48">152          <path d="M10 24 H38" stroke="#fff" stroke-width="6" stroke-linecap="round"></path>153        </svg>154        <div class="qty-text">1</div>155        <svg viewBox="0 0 48 48" width="48" height="48">156          <path d="M24 10 V38 M10 24 H38" stroke="#fff" stroke-width="6" stroke-linecap="round"></path>157        </svg>158      </div>159    </div>160 161    <div class="section-title">162      Product Detail163      <div class="expand">164        <svg viewBox="0 0 48 48" width="28" height="28">165          <path d="M10 24 H38" stroke="#0E1D3D" stroke-width="4" stroke-linecap="round"></path>166          <path d="M24 10 V38" stroke="#0E1D3D" stroke-width="4" stroke-linecap="round"></path>167        </svg>168      </div>169    </div>170 171    <div class="section-title" style="margin-top: 36px;">172      Similar product173      <div style="margin-left:auto;"></div>174    </div>175 176    <div class="similar-row">177      <div class="similar-card">178        <div class="center-dot"></div>179        <div class="add-overlay">180          <svg viewBox="0 0 48 48" width="36" height="36">181            <path d="M24 10 V38 M10 24 H38" stroke="#fff" stroke-width="6" stroke-linecap="round"></path>182          </svg>183        </div>184      </div>185      <div class="similar-card">186        <div class="center-dot"></div>187        <div class="add-overlay">188          <svg viewBox="0 0 48 48" width="36" height="36">189            <path d="M24 10 V38 M10 24 H38" stroke="#fff" stroke-width="6" stroke-linecap="round"></path>190          </svg>191        </div>192      </div>193      <div class="similar-card">194        <div class="center-dot"></div>195        <div class="add-overlay">196          <svg viewBox="0 0 48 48" width="36" height="36">197            <path d="M24 10 V38 M10 24 H38" stroke="#fff" stroke-width="6" stroke-linecap="round"></path>198          </svg>199        </div>200      </div>201    </div>202  </div>203 204  <!-- Bottom bar -->205  <div class="bottom-bar">206    <div class="bb-left">207      <svg viewBox="0 0 48 48" width="40" height="40">208        <path d="M8 18 H40 L36 40 H12 Z" fill="none" stroke="#fff" stroke-width="3" stroke-linejoin="round"></path>209        <path d="M18 18 C18 12 22 8 24 8 C26 8 30 12 30 18" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"></path>210      </svg>211      <div>1 Item ₹160</div>212    </div>213    <div class="bb-right">214      <div>Proceed</div>215      <svg viewBox="0 0 48 48" width="36" height="36">216        <path d="M18 10 L34 24 L18 38" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>217      </svg>218    </div>219  </div>220 221  <!-- Gesture bar -->222  <div class="gesture"></div>223</div>224</body>225</html>