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 - Oats</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-radius: 24px;12  }13 14  /* Status bar */15  .status-bar {16    height: 70px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;17    color: #4A4A4A; font-size: 30px; background: #ffffff;18  }19  .status-icons { display: flex; gap: 20px; align-items: center; }20 21  /* Header */22  .header {23    height: 120px; display: flex; align-items: center; justify-content: space-between;24    padding: 0 28px; background: #ffffff; box-shadow: 0 2px 6px rgba(0,0,0,0.08);25  }26  .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; color: #616161; }27  .icon-btn svg { width: 38px; height: 38px; stroke: #616161; }28 29  /* Content */30  .content { padding: 24px 28px 0 28px; }31  .title { font-size: 40px; line-height: 1.3; color: #333333; margin-bottom: 18px; }32  .price-row { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid #e5e5e5; }33  .price { font-size: 48px; font-weight: 700; color: #222; }34  .perkg { font-size: 32px; color: #757575; }35  .old-price { font-size: 32px; color: #9E9E9E; text-decoration: line-through; }36  .offer { font-size: 32px; color: #D32F2F; font-weight: 700; }37 38  .section-wrap { background: #f4f4f4; padding: 20px 0; margin-top: 10px; }39  .card {40    background: #fff; border: 1px solid #e7e7e7; border-radius: 12px;41    padding: 28px; margin: 0 18px 18px 18px;42  }43  .card-header { display: flex; align-items: center; justify-content: space-between; }44  .card-title { font-size: 38px; color: #7a7a7a; }45  .plus-icon svg { width: 40px; height: 40px; stroke: #9E9E9E; }46  .subtext { font-size: 30px; color: #9E9E9E; margin-top: 20px; }47  .divider { height: 1px; background: #eeeeee; margin: 22px 0; }48  .view-more { font-size: 30px; color: #1a73e8; text-align: right; }49 50  .know-more {51    margin: 10px 18px 0 18px; background: #fff; border: 1px solid #e7e7e7; border-radius: 12px;52    padding: 30px; text-align: center; color: #1a73e8; font-size: 32px;53  }54  .know-more span { color: #7a7a7a; }55 56  /* CTA bar */57  .cta-bar {58    width: 100%; height: 140px; display: flex; position: relative;59    margin-top: 10px;60  }61  .cta-once {62    flex: 1; background: #2f3b3b; color: #ffffff; display: flex; align-items: center; justify-content: center;63    font-size: 40px; font-weight: 700;64  }65  .cta-sub {66    flex: 1; background: #d56b71; color: #ffffff; display: flex; align-items: center; justify-content: center;67    font-size: 40px; font-weight: 700;68  }69 70  /* Ratings */71  .ratings-section { padding: 28px; background: #fff; }72  .section-title { font-size: 42px; color: #222; margin: 18px 0 20px 0; }73  .rating-summary { display: flex; align-items: center; gap: 24px; margin-bottom: 22px; }74  .rating-score { font-size: 80px; color: #4CAF50; font-weight: 700; }75  .star svg { width: 40px; height: 40px; fill: #4CAF50; }76  .rating-count { font-size: 30px; color: #757575; }77 78  .review { border-top: 1px solid #eeeeee; padding: 26px 0; position: relative; }79  .badge { display: inline-flex; align-items: center; gap: 12px; background: #e8f5e9; color: #4CAF50; border-radius: 8px; padding: 6px 14px; font-size: 30px; }80  .review-title { font-size: 36px; color: #333; font-weight: 700; margin: 16px 0 8px 0; }81  .review-text { font-size: 34px; color: #444; }82  .review-meta { font-size: 28px; color: #9E9E9E; margin-top: 16px; }83  .review-actions { position: absolute; right: 10px; bottom: 26px; display: flex; align-items: center; gap: 22px; color: #8f8f8f; font-size: 32px; }84  .review-actions .count { color: #616161; }85 86  /* Bottom gesture bar */87  .gesture {88    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);89    width: 360px; height: 14px; background: #d9d9d9; border-radius: 10px;90  }91</style>92</head>93<body>94<div id="render-target">95 96  <!-- Status bar -->97  <div class="status-bar">98    <div>11:50</div>99    <div class="status-icons">100      <span>🔕</span>101      <span>📶</span>102      <span>🔋</span>103    </div>104  </div>105 106  <!-- Header -->107  <div class="header">108    <div class="icon-btn">109      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">110        <path d="M14 6 L8 12 L14 18" stroke="#616161" stroke-linecap="round" stroke-linejoin="round"></path>111      </svg>112    </div>113    <div class="icon-btn">114      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">115        <circle cx="10" cy="10" r="7" stroke="#616161"></circle>116        <path d="M15 15 L22 22" stroke="#616161" stroke-linecap="round"></path>117      </svg>118    </div>119  </div>120 121  <!-- Content -->122  <div class="content">123    <div class="title">Oats - Tasty Evening Snack, Fibre Rich, Classic Masala, 1 kg - Pouch</div>124 125    <div class="price-row">126      <div class="price">₹368.18</div>127      <div class="perkg">(₹368.18/kg)</div>128      <div class="old-price">₹449</div>129      <div class="offer">18% OFF</div>130    </div>131  </div>132 133  <!-- Info cards -->134  <div class="section-wrap">135    <div class="card">136      <div class="card-header">137        <div class="card-title">Nutritional Facts</div>138        <div class="plus-icon">139          <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2">140            <path d="M12 5 L12 19 M5 12 L19 12" stroke-linecap="round"></path>141          </svg>142        </div>143      </div>144      <div class="subtext">Per (100 g) Approximate value:</div>145      <div class="divider"></div>146      <div class="view-more">View More</div>147    </div>148 149    <div class="card">150      <div class="card-header">151        <div class="card-title">Other Product Info</div>152        <div class="plus-icon">153          <svg viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2">154            <path d="M12 5 L12 19 M5 12 L19 12" stroke-linecap="round"></path>155          </svg>156        </div>157      </div>158      <div class="subtext">159        EAN Code: 40220361<br>160        Country Of Origin: India161      </div>162      <div class="divider"></div>163      <div class="view-more">View More</div>164    </div>165 166    <div class="know-more">Know more about this product <span>▾</span></div>167  </div>168 169  <!-- CTA -->170  <div class="cta-bar">171    <div class="cta-once">BUY ONCE</div>172    <div class="cta-sub">SUBSCRIBE @ ₹368.18</div>173  </div>174 175  <!-- Ratings & Reviews -->176  <div class="ratings-section">177    <div class="section-title">Ratings & Reviews</div>178 179    <div class="rating-summary">180      <div class="rating-score">4.2</div>181      <div class="star">182        <svg viewBox="0 0 24 24">183          <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>184        </svg>185      </div>186      <div class="rating-count">2392 ratings & 26 reviews</div>187    </div>188 189    <div class="review">190      <span class="badge">5 ★</span>191      <div class="review-text" style="margin-top:16px;">tasty and easy to make</div>192      <div class="review-meta">Shweta (7 months ago)</div>193      <div class="review-actions">194        <span class="count">1</span>195        <span>👍</span>196        <span>⚑</span>197      </div>198    </div>199 200    <div class="review">201      <span class="badge">5 ★</span>202      <div class="review-title">Good BF</div>203      <div class="review-text">good food ... my breakfast...healthy one ... having almost daily</div>204      <div class="review-meta">Abhijit Das , Kolkata (1 year ago)</div>205      <div class="review-actions">206        <span class="count">1</span>207        <span>👍</span>208        <span>⚑</span>209      </div>210    </div>211 212    <div class="review">213      <span class="badge" style="background:#f1f8e9;">4 ★</span>214      <div class="review-title">Tasty! Definitely buying it again!</div>215      <div class="review-text">It tastes like masala maggi but it's good really good.</div>216      <div class="review-actions">217        <span class="count">1</span>218        <span>👍</span>219        <span>⚑</span>220      </div>221    </div>222  </div>223 224  <!-- Bottom gesture bar -->225  <div class="gesture"></div>226</div>227</body>228</html>