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 Page - Quinoa</title>7<style>8  :root{9    --teal:#0a9fb2;10    --teal-dark:#068596;11    --brand-yellow:#ffd814;12    --brand-orange:#ffa41c;13    --text:#111;14    --muted:#6b6b6b;15    --link:#007185;16    --green:#107d10;17    --border:#e2e2e2;18  }19  html, body { margin:0; padding:0; background:transparent; }20  #render-target{21    width:1080px; height:2400px;22    position:relative; overflow:hidden;23    background:#fff;24    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;25    color:var(--text);26  }27  /* Header */28  .gradient-header{29    position:absolute; left:0; top:0; right:0; height:230px;30    background: linear-gradient(180deg, #8ee6de 0%, #a6e8d9 100%);31    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;32  }33  .status-bar{34    height:52px; padding:18px 24px 0 24px; font-weight:600; color:#223; font-size:30px;35    display:flex; align-items:center; justify-content:space-between;36    opacity:.9;37  }38  .hdr-row{39    margin-top:18px; padding:0 24px; display:flex; align-items:center; gap:20px;40  }41  .back-btn{42    width:70px; height:70px; display:flex; align-items:center; justify-content:center; cursor:pointer;43  }44  .search-bar{45    flex:1; background:#fff; height:84px; border-radius:20px;46    box-shadow: 0 4px 10px rgba(0,0,0,0.08);47    display:flex; align-items:center; padding:0 26px; gap:20px;48  }49  .search-input{ flex:1; font-size:34px; color:#333; }50  .divider{51    position:absolute; left:0; right:0; bottom:0; height:10px; background:#efefef;52    border-top:1px solid #d9d9d9;53  }54 55  /* Content */56  .content{57    position:absolute; left:0; top:230px; right:0; bottom:140px; overflow:auto;58    padding:30px 36px 160px;59  }60  .price{ font-size:44px; font-weight:700; margin:8px 0 18px; }61  .delivery{62    font-size:32px; line-height:1.4; margin-bottom:22px;63  }64  .delivery .free{ color:var(--link); font-weight:700; }65  .delivery .time{ color:#058b1a; font-weight:700; }66  .row{67    display:flex; align-items:center; gap:16px;68  }69  .loc-text{ color:var(--link); font-size:34px; }70  .instock{ color:var(--green); font-size:40px; font-weight:700; margin:26px 0; }71 72  .qty{73    display:inline-flex; align-items:center; gap:16px;74    background:#f3f3f3; border:1px solid #d8d8d8; color:#222;75    height:96px; border-radius:18px; padding:0 26px; font-size:34px;76    box-shadow:0 6px 14px rgba(0,0,0,0.08);77  }78 79  /* CTA buttons */80  .cta-wrap{ margin:26px 0 10px; }81  .btn-outline-ring{82    padding:12px; border-radius:60px; border:6px solid #bfe9ff; background:#e5faff;83  }84  .btn{85    width:100%; height:120px; border-radius:60px; border:none; font-size:40px; font-weight:700;86    cursor:pointer;87  }88  .btn.add{ background:var(--brand-yellow); }89  .btn.buy{ background:linear-gradient(180deg, #ffb53b 0%, var(--brand-orange) 100%); margin-top:24px; }90 91  .secure{92    margin:28px 0 12px; color:var(--link); font-size:34px; display:flex; align-items:center; gap:16px;93  }94  .soldby, .wishlist{95    font-size:34px; margin:10px 0; color:#333;96  }97  .soldby a, .wishlist a{ color:var(--link); text-decoration:none; }98  .soldby a:hover, .wishlist a:hover{ text-decoration:underline; }99 100  .section{101    margin:36px 0; padding-top:24px; border-top:10px solid #efefef;102  }103  .section h3{ margin:0 0 20px; font-size:40px; }104  .gift-card{105    background:#fff; border:1px solid var(--border); border-radius:22px; padding:20px; display:flex; gap:24px; align-items:center;106  }107  .img-ph{108    width:160px; height:160px; background:#E0E0E0; border:1px solid #BDBDBD;109    display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; text-align:center; border-radius:12px;110  }111  .gift-text{ flex:1; color:#333; font-size:32px; line-height:1.35; }112  .gift-btn{113    margin-top:22px; background:#fff; border:2px solid #e5e5e5; height:100px; border-radius:22px;114    font-size:36px; font-weight:600; color:#222;115  }116 117  .subtitle{118    font-size:36px; font-weight:700; padding:28px 0; border-top:10px solid #efefef;119  }120 121  /* Bottom nav */122  .bottom-bar{123    position:absolute; left:0; right:0; bottom:0; height:140px; background:#fff; border-top:1px solid #e6e6e6;124    display:flex; align-items:center; justify-content:space-around;125  }126  .nav-item{127    width:160px; display:flex; flex-direction:column; align-items:center; gap:10px; color:#6d6d6d; font-size:28px;128  }129  .nav-item.active{ color:var(--teal-dark); }130  .gesture{131    position:absolute; left:50%; transform:translateX(-50%); bottom:10px; width:380px; height:10px; background:#c9c9c9; border-radius:6px;132  }133 134  /* Helpers */135  .spacer-8{ height:8px; }136  .spacer-16{ height:16px; }137  .spacer-24{ height:24px; }138</style>139</head>140<body>141<div id="render-target">142  <!-- Header -->143  <div class="gradient-header">144    <div class="status-bar">145      <div>11:54</div>146      <div style="display:flex; gap:18px; align-items:center;">147        <span style="width:22px; height:22px; background:#2e2e2e; border-radius:50%; display:inline-block;"></span>148        <span style="width:22px; height:22px; background:#2e2e2e; border-radius:50%; display:inline-block;"></span>149        <span style="width:22px; height:22px; background:#2e2e2e; border-radius:50%; display:inline-block;"></span>150        <span style="width:32px; height:18px; border:2px solid #2e2e2e; border-radius:3px; position:relative; display:inline-block;">151          <span style="position:absolute; right:-6px; top:50%; transform:translateY(-50%); width:4px; height:8px; background:#2e2e2e;"></span>152        </span>153      </div>154    </div>155    <div class="hdr-row">156      <div class="back-btn">157        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">158          <path d="M15 5L8 12l7 7" stroke="#1d1d1d" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>159        </svg>160      </div>161      <div class="search-bar">162        <svg width="38" height="38" viewBox="0 0 24 24" fill="none">163          <circle cx="11" cy="11" r="7" stroke="#5f5f5f" stroke-width="2"/>164          <path d="M20 20l-4.2-4.2" stroke="#5f5f5f" stroke-width="2" stroke-linecap="round"/>165        </svg>166        <div class="search-input">quinoa</div>167        <svg width="42" height="42" viewBox="0 0 24 24" fill="none">168          <rect x="4" y="4" width="16" height="16" rx="3" stroke="#6b6b6b" stroke-width="2"/>169          <path d="M8 4v3M16 4v3M8 20v-3M16 20v-3" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/>170        </svg>171      </div>172    </div>173    <div class="divider"></div>174  </div>175 176  <!-- Content -->177  <div class="content">178    <div class="price">Total: ₹819</div>179 180    <div class="delivery">181      <span class="free">FREE delivery</span> Tuesday, 12 December. Order within <span class="time">3 hrs 4 mins</span>. Details182    </div>183 184    <div class="row" style="margin-bottom:26px;">185      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">186        <path d="M12 22s7-5.2 7-11a7 7 0 10-14 0c0 5.8 7 11 7 11z" stroke="#4c707a" stroke-width="2"/>187        <circle cx="12" cy="11" r="2.5" fill="#4c707a"/>188      </svg>189      <div class="loc-text">Delivering to Chandigarh 160015 - Update location</div>190    </div>191 192    <div class="instock">In stock</div>193 194    <div class="qty">Qty: 1195      <svg width="28" height="28" viewBox="0 0 24 24" fill="none">196        <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>197      </svg>198    </div>199 200    <div class="cta-wrap">201      <div class="btn-outline-ring">202        <button class="btn add">Add to Cart</button>203      </div>204      <button class="btn buy">Buy Now</button>205    </div>206 207    <div class="secure">208      <svg width="30" height="30" viewBox="0 0 24 24" fill="none">209        <rect x="4" y="10" width="16" height="10" rx="2" stroke="#888" stroke-width="2"/>210        <path d="M8 10V8a4 4 0 118 0v2" stroke="#888" stroke-width="2"/>211      </svg>212      Secure transaction213    </div>214 215    <div class="soldby">216      Sold by <a href="#">TrueElements</a> and <a href="#">Fulfilled by Amazon</a>.217    </div>218    <div class="wishlist"><a href="#">Add to Wish List</a></div>219 220    <div class="section">221      <h3>Buying this as a gift?</h3>222      <div class="gift-card">223        <div class="img-ph">[IMG: Gift product]</div>224        <div class="gift-text">225          Add a custom message, gift wrap, and a gift receipt for Easy Returns.226          <button class="gift-btn">Buy as a gift</button>227        </div>228      </div>229    </div>230 231    <div class="subtitle">Similar item with fast delivery</div>232 233    <!-- Placeholder area for similar items -->234    <div style="display:flex; gap:24px;">235      <div class="img-ph" style="width:220px; height:220px;">[IMG: Similar Item 1]</div>236      <div class="img-ph" style="width:220px; height:220px;">[IMG: Similar Item 2]</div>237      <div class="img-ph" style="width:220px; height:220px;">[IMG: Similar Item 3]</div>238    </div>239 240    <div style="height:260px;"></div>241  </div>242 243  <!-- Bottom Navigation -->244  <div class="bottom-bar">245    <div class="nav-item active">246      <svg width="38" height="38" viewBox="0 0 24 24" fill="none">247        <path d="M3 11l9-7 9 7v9a1 1 0 01-1 1h-5v-6H9v6H4a1 1 0 01-1-1v-9z" stroke="#0a7e8d" stroke-width="2" fill="none"/>248      </svg>249      <div>Home</div>250    </div>251    <div class="nav-item">252      <svg width="38" height="38" viewBox="0 0 24 24" fill="none">253        <circle cx="12" cy="8" r="4" stroke="#777" stroke-width="2"/>254        <path d="M4 20c1.5-4 6.5-4 8-4s6.5 0 8 4" stroke="#777" stroke-width="2" fill="none"/>255      </svg>256      <div>You</div>257    </div>258    <div class="nav-item">259      <svg width="38" height="38" viewBox="0 0 24 24" fill="none">260        <rect x="3" y="4" width="8" height="7" stroke="#777" stroke-width="2"/>261        <rect x="13" y="4" width="8" height="7" stroke="#777" stroke-width="2"/>262        <rect x="3" y="13" width="8" height="7" stroke="#777" stroke-width="2"/>263        <rect x="13" y="13" width="8" height="7" stroke="#777" stroke-width="2"/>264      </svg>265      <div>More</div>266    </div>267    <div class="nav-item">268      <svg width="38" height="38" viewBox="0 0 24 24" fill="none">269        <path d="M6 7h12l-1.5 9h-9L6 7z" stroke="#777" stroke-width="2"/>270        <circle cx="9" cy="20" r="1.5" fill="#777"/>271        <circle cx="16" cy="20" r="1.5" fill="#777"/>272      </svg>273      <div>Cart</div>274    </div>275    <div class="nav-item">276      <svg width="38" height="38" viewBox="0 0 24 24" fill="none">277        <path d="M4 7h16M4 12h16M4 17h16" stroke="#777" stroke-width="2" stroke-linecap="round"/>278      </svg>279      <div>Menu</div>280    </div>281    <div class="gesture"></div>282  </div>283</div>284</body>285</html>