GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Oats Cookies</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#111; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#ffffff; border-radius:32px;12    box-shadow: 0 6px 24px rgba(0,0,0,0.08);13  }14 15  /* Status bar (mock) */16  .status-bar {17    height:110px; padding:0 36px;18    background:#f2f2f2; color:#333;19    display:flex; align-items:center; justify-content:space-between;20    font-size:38px;21  }22  .status-right { display:flex; align-items:center; gap:26px; color:#666; font-size:32px; }23 24  /* Search header */25  .search-header { padding:20px 28px 24px; background:#e9ecea; }26  .search-row { display:flex; align-items:center; gap:24px; }27  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }28  .search-input {29    flex:1; height:112px; border:2px solid #6a8a5c;30    background:#eef1ee; border-radius:24px;31    display:flex; align-items:center; padding:0 28px; gap:22px;32    color:#2F5E2C; font-size:44px;33  }34  .search-input .placeholder { flex:1; color:#2F5E2C; }35  .search-input .mic { margin-left:auto; }36 37  /* Content card area */38  .content-card {39    position:relative; background:#fff;40    border-top-left-radius:48px; border-top-right-radius:48px;41    margin-top:18px; padding-bottom:280px; /* space for sticky bar */42  }43  .top-actions {44    display:flex; align-items:center; justify-content:space-between;45    padding:34px 40px 16px;46  }47  .product-image {48    width:920px; height:500px; margin:20px auto 22px;49    background:#E0E0E0; border:1px solid #BDBDBD;50    display:flex; align-items:center; justify-content:center;51    color:#757575; font-size:40px; border-radius:8px;52  }53  .title {54    padding:0 48px; margin-top:34px;55    font-size:44px; letter-spacing:2.2px; line-height:1.4;56  }57  .price {58    padding:18px 48px 8px; font-size:88px; font-weight:700;59  }60  .bullet { display:flex; align-items:center; gap:20px; padding:12px 48px; font-size:40px; color:#222; }61  .ebt-row { display:flex; align-items:center; gap:20px; padding:18px 48px; font-size:38px; }62  .ebt-badge {63    background:#2F5E2C; color:#fff; font-weight:700;64    border-radius:10px; width:100px; height:56px;65    display:flex; align-items:center; justify-content:center;66    letter-spacing:1px;67  }68  .best-row { display:flex; align-items:center; gap:20px; padding:22px 48px; font-size:38px; color:#333; }69 70  .section-title { padding:34px 48px 8px; font-size:54px; font-weight:700; }71  .disclaimer { padding:8px 48px; font-size:36px; line-height:1.6; color:#333; }72 73  /* Sticky add to cart bar */74  .sticky-bar {75    position:absolute; left:0; right:0; bottom:72px;76    height:160px; background:#ffffff; padding:24px 40px;77    display:flex; align-items:center; justify-content:space-between;78    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);79    z-index:10;80  }81  .qty-box {82    width:470px; height:112px; background:#f4f4f4; border-radius:20px;83    display:flex; align-items:center; justify-content:space-between;84    padding:0 34px; color:#8a8a8a;85  }86  .qty-btn {87    width:72px; height:72px; border-radius:16px;88    display:flex; align-items:center; justify-content:center; font-size:58px; color:#8a8a8a;89  }90  .qty-value { font-size:46px; color:#333; }91  .cta {92    width:500px; height:112px; background:#4A7B35; border-radius:20px;93    display:flex; align-items:center; justify-content:center;94    color:#fff; font-size:46px; font-weight:700;95  }96 97  /* Gesture pill */98  .gesture {99    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);100    width:300px; height:14px; background:#1e1e1e; border-radius:8px; opacity:0.85;101  }102 103  /* Simple SVG helper */104  .icon { display:inline-block; }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Mock status bar -->111  <div class="status-bar">112    <div>1:17</div>113    <div class="status-right">114      <span>⦿</span>115      <span>▴</span>116      <span>100%</span>117    </div>118  </div>119 120  <!-- Search header -->121  <div class="search-header">122    <div class="search-row">123      <div class="icon-btn">124        <svg class="icon" width="56" height="56" viewBox="0 0 24 24">125          <path d="M15 18l-6-6 6-6" stroke="#2F5E2C" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>126        </svg>127      </div>128      <div class="search-input">129        <svg class="icon" width="56" height="56" viewBox="0 0 24 24">130          <circle cx="11" cy="11" r="7" stroke="#2F5E2C" stroke-width="2.5" fill="none"/>131          <line x1="21" y1="21" x2="16.5" y2="16.5" stroke="#2F5E2C" stroke-width="2.5"/>132        </svg>133        <div class="placeholder">Oats</div>134        <div class="mic">135          <svg class="icon" width="56" height="56" viewBox="0 0 24 24">136            <rect x="8" y="4" width="8" height="10" rx="3" fill="none" stroke="#2F5E2C" stroke-width="2.5"/>137            <path d="M5 10a7 7 0 0 0 14 0" stroke="#2F5E2C" stroke-width="2.5" fill="none"/>138            <line x1="12" y1="20" x2="12" y2="22" stroke="#2F5E2C" stroke-width="2.5"/>139          </svg>140        </div>141      </div>142    </div>143  </div>144 145  <!-- Content -->146  <div class="content-card">147    <div class="top-actions">148      <div class="icon-btn">149        <svg width="64" height="64" viewBox="0 0 24 24">150          <path d="M6 6l12 12M18 6L6 18" stroke="#000" stroke-width="2.5" stroke-linecap="round"/>151        </svg>152      </div>153      <div style="display:flex; align-items:center; gap:24px;">154        <div class="icon-btn">155          <svg width="64" height="64" viewBox="0 0 24 24">156            <path d="M4 12v7h16v-7" stroke="#000" stroke-width="2.2" fill="none" stroke-linecap="round"/>157            <path d="M12 5l6 6M12 5L6 11" stroke="#000" stroke-width="2.2" fill="none" stroke-linecap="round"/>158          </svg>159        </div>160        <div class="icon-btn">161          <svg width="64" height="64" viewBox="0 0 24 24">162            <path d="M12 21s-7-4.35-9-8.5C1 9 3.5 6 6.5 6c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3C20.5 6 23 9 21 12.5 19 16.65 12 21 12 21z" fill="none" stroke="#000" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>163          </svg>164        </div>165      </div>166    </div>167 168    <div class="product-image">[IMG: Oats Cookies Pack]</div>169 170    <div class="title">171      Britannia Nutri Choice Oats Choco & Almond Cookies, 75 g172    </div>173 174    <div class="price">$0.89</div>175 176    <div class="bullet">177      <svg width="40" height="40" viewBox="0 0 24 24">178        <path d="M5 12l4 4 10-10" fill="none" stroke="#2F5E2C" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>179      </svg>180      <span>Pickup: Tomorrow 9am - 5pm</span>181    </div>182    <div class="bullet">183      <svg width="40" height="40" viewBox="0 0 24 24">184        <path d="M5 12l4 4 10-10" fill="none" stroke="#2F5E2C" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>185      </svg>186      <span>Delivery: Tomorrow 1pm - 8pm</span>187    </div>188 189    <div class="ebt-row">190      <div class="ebt-badge">EBT</div>191      <div>SNAP EBT eligible</div>192    </div>193 194    <div class="best-row">195      <svg width="48" height="48" viewBox="0 0 24 24">196        <circle cx="12" cy="12" r="9" fill="none" stroke="#111" stroke-width="2"/>197        <path d="M12 6v6l4 2" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>198      </svg>199      <span>Best Before: 03/30/2024</span>200    </div>201 202    <div class="section-title">Grocery Disclaimer:</div>203    <div class="disclaimer">204      Content on this App is for reference purposes only. Product information or packaging displayed on our App may not be accurate or complete. Always refer to the physical product for the most accurate information and warnings before using or consuming a product.205    </div>206 207    <!-- Spacer to allow scroll under sticky bar -->208    <div style="height:280px;"></div>209 210    <!-- Sticky Add To Cart -->211    <div class="sticky-bar">212      <div class="qty-box">213        <div class="qty-btn">−</div>214        <div class="qty-value">1</div>215        <div class="qty-btn">+</div>216      </div>217      <div class="cta">Add To Cart</div>218    </div>219 220  </div>221 222  <!-- Gesture indicator -->223  <div class="gesture"></div>224</div>225</body>226</html>