GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Overview Mock</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;color:#222;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#f7f7f7;12  }13 14  /* Header */15  .appbar{16    position:absolute;left:0;top:0;width:100%;height:190px;background:#2d2e36;color:#fff;17    box-sizing:border-box;padding:40px 36px 0 36px;18  }19  .appbar .top-row{display:flex;align-items:center;justify-content:space-between;height:80px;}20  .appbar .left{display:flex;align-items:center;gap:22px;}21  .appbar .right{display:flex;align-items:center;gap:34px;}22  .icon-btn{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:12px;}23  .icon-btn svg{width:40px;height:40px;fill:#fff;}24  .tabbar{25    position:absolute;top:190px;left:0;width:100%;height:102px;background:#fff;border-bottom:1px solid #ececec;26    display:flex;align-items:flex-end;gap:50px;padding:0 36px 0 36px;box-sizing:border-box;27  }28  .tab{height:100%;display:flex;align-items:center;color:#666;font-size:36px;}29  .tab.active{color:#111;position:relative;font-weight:600;}30  .tab.active::after{31    content:"";position:absolute;bottom:0;left:0;width:120px;height:8px;background:#ff7a00;border-radius:6px;32  }33 34  .content{position:absolute;left:0;top:292px;right:0;bottom:0;overflow:auto;padding:30px 30px 260px 30px;box-sizing:border-box;}35  .card{background:#fff;border-radius:22px;border:1px solid #eee;padding:30px;box-sizing:border-box;}36  .row{display:flex;align-items:center;justify-content:space-between;}37  .chev{width:36px;height:36px;fill:#bbb;}38 39  .label{color:#8c8c8c;font-size:34px;margin-bottom:10px;}40  .big{font-size:64px;font-weight:700;color:#111;}41 42  .section{background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee;padding:36px 30px;margin-top:28px;}43  .section .title{font-size:42px;font-weight:700;margin-bottom:16px;}44  .muted{color:#8b8b8b;}45  .accent{color:#ff6a00;}46 47  .meta{display:flex;gap:24px;flex-wrap:wrap;margin-top:26px;}48  .meta .item{display:flex;align-items:center;gap:14px;color:#232323;font-size:34px;padding:12px 14px;border-radius:12px;}49  .meta .ico{width:40px;height:40px;border-radius:10px;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;color:#666;}50  .meta .ico svg{width:26px;height:26px;fill:#666;}51 52  .list-row{background:#fff;padding:34px 30px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;}53  .link{display:flex;align-items:center;gap:12px;font-size:40px;}54  .subtle{color:#8a8a8a;font-size:36px;font-weight:500;}55 56  .reviews{background:#fff;padding:30px;margin-top:28px;border-top:1px solid #eee;border-bottom:1px solid #eee;}57  .reviews .hdr{display:flex;align-items:center;justify-content:space-between;}58  .rating{display:flex;align-items:center;gap:10px;color:#f59e0b;}59  .stars svg{width:34px;height:34px;fill:#f59e0b;}60  .chip{display:inline-flex;align-items:center;padding:18px 28px;background:#f1f1f1;border-radius:40px;margin:26px 0 8px 0;color:#444;font-size:34px;}61 62  .review{padding:26px 0;border-bottom:1px solid #f0f0f0;}63  .rev-head{display:flex;align-items:center;gap:20px;margin-bottom:8px;}64  .avatar{65    width:92px;height:92px;border-radius:50%;66    background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#757575;font-size:24px;67    flex:0 0 auto;68  }69  .name{font-size:40px;font-weight:700;}70  .vip{background:#f6d681;color:#6b4d00;border-radius:10px;padding:8px 14px;font-size:28px;margin-left:14px;}71  .starline{display:flex;gap:6px;margin:8px 0 10px 112px;}72  .starline svg{width:36px;height:36px;fill:#f59e0b;}73  .rev-text{font-size:36px;color:#333;margin-left:112px;line-height:1.45;}74 75  /* Bottom purchase bar */76  .buybar{77    position:absolute;left:0;bottom:120px;width:100%;padding:22px 26px;box-sizing:border-box;background:#fff;border-top:1px solid #eee;display:flex;gap:24px;78  }79  .btn{flex:1;height:126px;border-radius:18px;font-size:44px;font-weight:700;color:#fff;border:none;cursor:pointer;}80  .btn-buy{background:linear-gradient(180deg,#ffb11b,#ff8c00);}81  .btn-cart{background:linear-gradient(180deg,#ff6a00,#ff3d00);}82 83  /* OS navbar placeholder */84  .osbar{position:absolute;left:0;bottom:0;width:100%;height:120px;background:#222;}85  .home-pill{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:240px;height:12px;background:#e5e5e5;border-radius:10px;opacity:.9;}86</style>87</head>88<body>89<div id="render-target">90 91  <!-- App header -->92  <div class="appbar">93    <div class="top-row">94      <div class="left">95        <div class="icon-btn" title="Back">96          <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.6 1.9L3.5 12 13.9 2.6z"/></svg>97        </div>98      </div>99      <div class="right">100        <div class="icon-btn" title="Cart">101          <svg viewBox="0 0 24 24"><path d="M7 21a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm10 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM7.2 6l.6 3h9.9l-1.2 6.2H8.3L6.9 6.8 5 6V4h3.1L9 6z"/></svg>102        </div>103        <div class="icon-btn" title="Share">104          <svg viewBox="0 0 24 24"><path d="M12 3l5 5h-3v6h-4V8H7l5-5zM5 19h14v2H5z"/></svg>105        </div>106        <div class="icon-btn" title="More">107          <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>108        </div>109      </div>110    </div>111  </div>112 113  <!-- Tabs -->114  <div class="tabbar">115    <div class="tab active">Overview</div>116    <div class="tab">Reviews</div>117    <div class="tab">Description</div>118    <div class="tab">You May Also Like</div>119  </div>120 121  <!-- Scrollable content -->122  <div class="content">123 124    <div class="card">125      <div class="row">126        <div>127          <div class="label">Ship From</div>128          <div class="big">CN</div>129        </div>130        <svg class="chev" viewBox="0 0 24 24"><path d="M9 4l8 8-8 8" stroke="#bbb" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>131      </div>132    </div>133 134    <div class="section">135      <div class="title">Shipping: ₹64.78</div>136      <div class="muted" style="font-size:36px;line-height:1.45;">137        To India via Standard Shipping, Estimated Delivery on Jan 26th–Feb 10th, 2024138      </div>139      <div style="font-size:36px;margin-top:8px;">140        <span class="accent">In stock.</span> Ships in 24 hours141      </div>142 143      <div class="meta">144        <div class="item">145          <div class="ico">146            <svg viewBox="0 0 24 24"><path d="M12 2l7 4v6c0 5-7 10-7 10S5 17 5 12V6l7-4z"/></svg>147          </div>148          DOA Guarantee149        </div>150        <div class="item">151          <div class="ico">152            <svg viewBox="0 0 24 24"><path d="M4 7l8-4 8 4v10l-8 4-8-4V7z"/></svg>153          </div>154          Missing/Wrong Items Guarantee155        </div>156        <div class="item">157          <div class="ico">158            <svg viewBox="0 0 24 24"><path d="M12 17l-5 3 2-5-4-4 6-.5L12 5l1 5.5 6 .5-4 4 2 5z"/></svg>159          </div>160          Quality Guarantee161        </div>162        <div class="item">163          <div class="ico">164            <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2"/><path d="M8 9h8v2H8z" fill="#666"/></svg>165          </div>166          No Reason Returns167        </div>168      </div>169    </div>170 171    <div class="list-row">172      <div class="link">173        <span class="title" style="font-size:44px;font-weight:800;">Ranking</span>174        <span class="subtle">Top 3 on Camp Kitchen</span>175      </div>176      <svg class="chev" viewBox="0 0 24 24"><path d="M9 4l8 8-8 8" stroke="#bbb" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>177    </div>178 179    <div class="reviews">180      <div class="hdr">181        <div class="title">Reviews (14)</div>182        <div class="rating">183          <div class="stars">184            <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>185            <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>186            <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>187            <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>188            <svg viewBox="0 0 24 24"><defs><clipPath id="half"><rect x="0" y="0" width="12" height="24"/></clipPath></defs><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z" fill="#f59e0b" clip-path="url(#half)"/><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z" fill="none" stroke="#f59e0b"/></svg>189          </div>190          <div style="color:#333;font-size:36px;">4.6</div>191          <svg class="chev" viewBox="0 0 24 24"><path d="M9 4l8 8-8 8" stroke="#bbb" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>192        </div>193      </div>194 195      <div class="chip">Positive 13</div>196 197      <div class="review">198        <div class="rev-head">199          <div class="avatar">[IMG: Avatar]</div>200          <div class="name">Bertalan Kucsora <span class="vip">VIP4</span></div>201        </div>202        <div class="starline">203          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>204          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>205          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>206          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>207          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>208        </div>209        <div class="rev-text">210          Very good product, I am satisfied. Shipping was fast.211        </div>212      </div>213 214      <div class="review">215        <div class="rev-head">216          <div class="avatar">[IMG: Avatar]</div>217          <div class="name">BG688573201 <span class="vip">VIP3</span></div>218        </div>219        <div class="starline">220          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>221          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>222          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>223          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>224          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.5-6.1L3 9.8l6.2-.5L12 3.5l2.8 5.8 6.2.5-4 4.4 1.5 6.1z"/></svg>225        </div>226        <div class="rev-text">227          Good quality, good product,228        </div>229      </div>230 231    </div>232  </div>233 234  <!-- Bottom buttons -->235  <div class="buybar">236    <button class="btn btn-buy">Buy Now</button>237    <button class="btn btn-cart">Add to Cart</button>238  </div>239 240  <!-- OS bottom bar -->241  <div class="osbar"><div class="home-pill"></div></div>242</div>243</body>244</html>