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 - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1f1f1f; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .statusbar {19    height: 110px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #555;25    font-size: 44px;26    letter-spacing: 1px;27  }28  .status-left, .status-right { display: flex; align-items: center; gap: 28px; }29  .status-icon svg { width: 40px; height: 40px; fill: #8a8a8a; }30 31  /* Product hero */32  .hero {33    position: relative;34    width: 100%;35    height: 1120px;36    display: flex;37    align-items: center;38    justify-content: center;39  }40  .hero .img {41    width: 880px;42    height: 1060px;43    background: #E0E0E0;44    border: 1px solid #BDBDBD;45    border-radius: 6px;46    display: flex;47    align-items: center;48    justify-content: center;49    color: #666;50    text-align: center;51    font-size: 36px;52    line-height: 1.3;53  }54  .side-actions {55    position: absolute;56    right: 36px;57    top: 220px;58    display: flex;59    flex-direction: column;60    gap: 46px;61  }62  .icon-btn {63    width: 82px;64    height: 82px;65    border-radius: 50%;66    background: #fff;67    box-shadow: 0 2px 10px rgba(0,0,0,0.08);68    display: flex;69    align-items: center;70    justify-content: center;71  }72  .icon-btn svg { width: 42px; height: 42px; stroke: #7b7b7b; stroke-width: 2.5; fill: none; }73 74  .cta-360 {75    position: absolute;76    bottom: 38px;77    left: 50%;78    transform: translateX(-50%);79    background: #ffffff;80    border: 2px solid #e5e5e5;81    color: #4b4b4b;82    height: 110px;83    padding: 0 44px;84    border-radius: 60px;85    display: flex;86    align-items: center;87    font-size: 42px;88    box-shadow: 0 6px 18px rgba(0,0,0,0.08);89  }90 91  /* Dots */92  .dots {93    height: 60px;94    display: flex;95    align-items: center;96    justify-content: center;97    gap: 20px;98  }99  .dot {100    width: 16px; height: 16px; border-radius: 50%;101    background: #d0d0d0;102  }103  .dot.active { background: #6a6a6a; width: 18px; height: 18px; }104 105  /* Attribute rows */106  .section-divider { height: 1px; background: #e9e9e9; margin: 8px 0; }107  .attr {108    padding: 42px 36px;109    display: flex;110    align-items: center;111    justify-content: space-between;112    border-bottom: 1px solid #ececec;113    font-size: 46px;114  }115  .attr .label { color: #6a6a6a; }116  .attr .value { font-weight: 700; color: #1f1f1f; }117  .chev {118    width: 34px; height: 34px; margin-left: 18px;119  }120 121  /* Info block */122  .info {123    padding: 40px 36px 20px 36px;124  }125  .brand-link {126    font-size: 46px;127    color: #1a73e8;128    font-weight: 700;129    margin-bottom: 22px;130  }131  .title {132    font-size: 44px;133    line-height: 1.35;134  }135  .title .brand { font-weight: 800; }136  .tagline {137    font-size: 38px;138    color: #6c6c6c;139    margin-top: 18px;140  }141 142  /* Action buttons */143  .actions {144    padding: 26px 36px 24px 36px;145    display: flex;146    gap: 26px;147    align-items: stretch;148  }149  .btn-card {150    width: 200px;151    border: 2px solid #e5e5e5;152    border-radius: 20px;153    background: #fff;154    display: flex;155    flex-direction: column;156    justify-content: center;157    align-items: center;158    gap: 12px;159    padding: 24px;160  }161  .btn-card span { font-size: 34px; color: #333; }162  .btn-outline {163    flex: 1.1;164    border: 2px solid #e5e5e5;165    border-radius: 20px;166    background: #fff;167    font-size: 44px;168    font-weight: 600;169    color: #1f1f1f;170    display: flex; align-items: center; justify-content: center;171  }172  .btn-primary {173    flex: 1.1;174    background: #ffc107;175    border: none;176    border-radius: 20px;177    font-size: 46px;178    font-weight: 700;179    color: #1f1f1f;180    display: flex; align-items: center; justify-content: center;181  }182 183  /* Floating help button (generic) */184  .fab {185    position: absolute;186    right: 48px;187    bottom: 420px;188    width: 140px;189    height: 140px;190    border-radius: 50%;191    background: radial-gradient(circle at 35% 35%, #ffe13a, #ffd000 60%);192    box-shadow: 0 10px 24px rgba(0,0,0,0.2);193    display: flex; align-items: center; justify-content: center;194    color: #1b4fd6;195    font-weight: 900;196    font-size: 80px;197  }198 199  /* Gesture bar */200  .gesture {201    position: absolute;202    bottom: 26px;203    left: 50%;204    transform: translateX(-50%);205    width: 340px;206    height: 16px;207    background: #1f1f1f;208    opacity: 0.9;209    border-radius: 12px;210  }211</style>212</head>213<body>214<div id="render-target">215 216  <!-- Status Bar -->217  <div class="statusbar">218    <div class="status-left">219      <div>12:57</div>220      <div class="status-icon">221        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>222      </div>223      <div class="status-icon">224        <svg viewBox="0 0 24 24"><path d="M4 12h16M4 6h10M4 18h7" stroke="#8a8a8a" stroke-width="2" fill="none"/></svg>225      </div>226      <div class="status-icon">227        <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>228      </div>229      <div class="status-icon">230        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>231      </div>232    </div>233    <div class="status-right">234      <div class="status-icon">235        <!-- WiFi -->236        <svg viewBox="0 0 24 24">237          <path d="M2 8a15 15 0 0 1 20 0" stroke="#8a8a8a" stroke-width="2" fill="none"/>238          <path d="M5 12a10 10 0 0 1 14 0" stroke="#8a8a8a" stroke-width="2" fill="none"/>239          <path d="M8 16a5 5 0 0 1 8 0" stroke="#8a8a8a" stroke-width="2" fill="none"/>240          <circle cx="12" cy="19" r="1.5" fill="#8a8a8a"/>241        </svg>242      </div>243      <div class="status-icon">244        <!-- Battery -->245        <svg viewBox="0 0 24 24">246          <rect x="2" y="7" width="18" height="10" rx="2" fill="none" stroke="#8a8a8a" stroke-width="2"/>247          <rect x="4" y="9" width="12" height="6" fill="#8a8a8a"/>248          <rect x="20" y="10" width="2" height="4" fill="#8a8a8a"/>249        </svg>250      </div>251    </div>252  </div>253 254  <!-- Product Hero -->255  <div class="hero">256    <div class="img">[IMG: Stainless steel refrigerator]</div>257 258    <div class="side-actions">259      <div class="icon-btn" title="Wishlist">260        <svg viewBox="0 0 24 24">261          <path d="M12 21s-7-4.3-9.5-7.8C.6 11 .8 7.4 3.6 6 5.3 5.1 7.4 5.6 8.7 7c.6.7 1 1.2 1.3 1.8.3-.6.7-1.1 1.3-1.8 1.3-1.4 3.4-1.9 5.1-1 2.8 1.4 3 5 .1 7.2C19 16.7 12 21 12 21z"/>262        </svg>263      </div>264      <div class="icon-btn" title="Share">265        <svg viewBox="0 0 24 24">266          <path d="M16 6l-8 5 8 5" />267          <circle cx="18" cy="6" r="2"/>268          <circle cx="18" cy="18" r="2"/>269          <circle cx="6" cy="12" r="2"/>270        </svg>271      </div>272    </div>273 274    <div class="cta-360">Tap to see in 360°</div>275  </div>276 277  <!-- Dots -->278  <div class="dots">279    <div class="dot active"></div>280    <div class="dot"></div>281    <div class="dot"></div>282    <div class="dot"></div>283    <div class="dot"></div>284    <div class="dot"></div>285    <div class="dot"></div>286  </div>287 288  <!-- Attributes -->289  <div class="attr">290    <div><span class="label">Color: </span><span class="value">Magnum Steel</span></div>291    <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>292  </div>293  <div class="attr">294    <div><span class="label">BEE Year: </span><span class="value">Not Rated</span></div>295    <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>296  </div>297 298  <div class="section-divider"></div>299 300  <!-- Info -->301  <div class="info">302    <div class="brand-link">View more from Whirlpool</div>303    <div class="title"><span class="brand">Whirlpool</span> 240 L Frost Free Triple Door Refrigerator (Magnum Steel, FP 263D PROTTON ROY MAGNUM STEEL(N))</div>304    <div class="tagline">#JustHere</div>305  </div>306 307  <!-- Actions -->308  <div class="actions">309    <div class="btn-card">310      <svg width="64" height="64" viewBox="0 0 24 24">311        <path d="M3 6h2l2 10h10l2-7H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>312        <circle cx="10" cy="20" r="1.6" fill="#333"/>313        <circle cx="17" cy="20" r="1.6" fill="#333"/>314        <path d="M12 3v6M9 6h6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>315      </svg>316      <span>Add</span>317    </div>318    <button class="btn-outline">Pay with EMI</button>319    <button class="btn-primary">Buy now</button>320  </div>321 322  <!-- Floating button -->323  <div class="fab">f</div>324 325  <!-- Bottom gesture bar -->326  <div class="gesture"></div>327 328</div>329</body>330</html>