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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 88px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #606060;25    font-size: 36px;26  }27  .status-left { display: flex; align-items: center; gap: 18px; }28  .status-right { display: flex; align-items: center; gap: 26px; }29  .status-icon { width: 40px; height: 40px; opacity: 0.8; }30 31  /* Header search row */32  .header {33    padding: 20px 32px 12px 32px;34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .back-btn {39    width: 72px;40    height: 72px;41    display: flex;42    align-items: center;43    justify-content: center;44  }45  .search-box {46    flex: 1;47    height: 96px;48    background: #F3F3F3;49    border-radius: 20px;50    box-shadow: 0 2px 0 rgba(0,0,0,0.06);51    display: flex;52    align-items: center;53    padding: 0 28px;54    color: #9E9E9E;55    font-size: 38px;56    gap: 18px;57  }58  .search-placeholder { flex: 1; }59  .cart-area {60    position: relative;61    width: 80px;62    height: 80px;63    display: flex; align-items: center; justify-content: center;64  }65  .cart-badge {66    position: absolute;67    right: 6px; top: 4px;68    background: #E53935;69    color: #fff;70    font-size: 28px;71    line-height: 28px;72    padding: 6px 12px;73    border-radius: 999px;74    box-shadow: 0 2px 6px rgba(0,0,0,0.2);75  }76 77  /* Product image area */78  .product-hero {79    position: relative;80    margin-top: 12px;81    padding: 0 24px;82  }83  .product-img {84    width: 1032px;85    height: 1450px;86    background: #E0E0E0;87    border: 1px solid #BDBDBD;88    border-radius: 24px;89    display: flex; align-items: center; justify-content: center;90    color: #757575;91    font-size: 42px;92    text-align: center;93  }94  .overlay-btn {95    position: absolute;96    right: 38px;97    width: 92px; height: 92px;98    background: #FFFFFF;99    border: 1px solid #D0D0D0;100    border-radius: 50%;101    display: flex; align-items: center; justify-content: center;102    box-shadow: 0 6px 12px rgba(0,0,0,0.08);103  }104  .overlay-btn.like { top: 140px; }105  .overlay-btn.share { top: 260px; }106 107  /* Carousel dots */108  .dots {109    height: 80px;110    display: flex;111    align-items: center;112    justify-content: center;113    gap: 22px;114  }115  .dot {116    width: 26px; height: 26px; border-radius: 50%;117    background: #CFCFCF;118  }119  .dot.active { background: #6D6D6D; width: 40px; border-radius: 14px; }120 121  /* Variant section */122  .section {123    padding: 24px 32px 0 32px;124  }125  .section-title {126    font-size: 52px; font-weight: 700; color: #1A1A1A; margin: 18px 0 8px;127  }128  .variant-row {129    display: flex; align-items: center; justify-content: space-between;130    padding: 34px 0;131    border-bottom: 1px solid #EFEFEF;132    font-size: 44px; color: #444;133  }134  .variant-row .value { color: #0D47A1; font-weight: 600; }135  .variant-row .right {136    display: flex; align-items: center; gap: 16px; color: #888; font-size: 40px;137  }138 139  .link-more {140    padding: 34px 0;141    color: #1976D2; font-size: 44px; font-weight: 600;142  }143 144  /* Bottom CTA */145  .cta-bar {146    position: absolute;147    left: 0; right: 0; bottom: 90px;148    padding: 24px 28px;149    background: #FFFFFF;150    box-shadow: 0 -8px 20px rgba(0,0,0,0.08);151    display: flex; gap: 24px; align-items: stretch;152  }153  .btn {154    height: 140px;155    border-radius: 18px;156    display: flex; align-items: center; justify-content: center;157    font-size: 42px; font-weight: 600;158  }159  .btn-outline {160    flex: 0 0 300px;161    background: #FFFFFF;162    border: 2px solid #E0E0E0;163    gap: 16px;164    color: #333;165  }166  .btn-light {167    flex: 1;168    background: #FFFFFF;169    border: 2px solid #E0E0E0;170    color: #333;171  }172  .btn-primary {173    flex: 0 0 380px;174    background: #FFC107;175    border: 2px solid #F0A000;176    color: #1A1A1A;177  }178 179  /* Floating badge */180  .floating-badge {181    position: absolute;182    right: 40px; bottom: 270px;183    width: 148px; height: 148px;184    background: #1565C0;185    border-radius: 50%;186    box-shadow: 0 14px 24px rgba(0,0,0,0.25);187    display: flex; align-items: center; justify-content: center;188  }189  .floating-badge-inner {190    width: 110px; height: 110px; border-radius: 50%; background: #FFEB3B;191    display: flex; align-items: center; justify-content: center;192    color: #1565C0; font-size: 70px; font-weight: 800;193  }194 195  /* Home indicator */196  .home-indicator {197    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);198    width: 420px; height: 16px; background: #1F1F1F; border-radius: 10px; opacity: 0.9;199  }200</style>201</head>202<body>203<div id="render-target">204 205  <!-- Status bar -->206  <div class="status-bar">207    <div class="status-left">208      <div>10:33</div>209      <!-- tiny user glyph -->210      <svg class="status-icon" viewBox="0 0 24 24">211        <circle cx="12" cy="8" r="4" fill="#808080"></circle>212        <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#808080" stroke-width="2" stroke-linecap="round"></path>213      </svg>214    </div>215    <div class="status-right">216      <!-- wifi -->217      <svg class="status-icon" viewBox="0 0 24 24">218        <path d="M2 8c5-4 15-4 20 0" stroke="#606060" stroke-width="2" fill="none" stroke-linecap="round"></path>219        <path d="M5 12c3-3 11-3 14 0" stroke="#606060" stroke-width="2" fill="none" stroke-linecap="round"></path>220        <circle cx="12" cy="16" r="2" fill="#606060"></circle>221      </svg>222      <!-- battery -->223      <svg class="status-icon" viewBox="0 0 28 18">224        <rect x="1" y="3" width="22" height="12" rx="2" stroke="#606060" fill="none" stroke-width="2"></rect>225        <rect x="3" y="5" width="16" height="8" rx="1" fill="#606060"></rect>226        <rect x="23" y="7" width="4" height="4" rx="1" fill="#606060"></rect>227      </svg>228    </div>229  </div>230 231  <!-- Header with search -->232  <div class="header">233    <div class="back-btn">234      <svg width="52" height="52" viewBox="0 0 24 24">235        <path d="M15 18l-6-6 6-6" stroke="#1A1A1A" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>236      </svg>237    </div>238    <div class="search-box">239      <svg width="44" height="44" viewBox="0 0 24 24">240        <circle cx="11" cy="11" r="7" stroke="#9E9E9E" stroke-width="2" fill="none"></circle>241        <path d="M21 21l-5-5" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round"></path>242      </svg>243      <div class="search-placeholder">Search for products</div>244      <svg width="44" height="44" viewBox="0 0 24 24">245        <path d="M12 3v7m0 0l-3-3m3 3l3-3M6 21h12" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>246      </svg>247    </div>248    <div class="cart-area">249      <svg width="48" height="48" viewBox="0 0 24 24">250        <path d="M3 4h3l2 12h9l2-8H7" stroke="#1A1A1A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>251        <circle cx="9" cy="20" r="1.5" fill="#1A1A1A"></circle>252        <circle cx="17" cy="20" r="1.5" fill="#1A1A1A"></circle>253      </svg>254      <div class="cart-badge">1</div>255    </div>256  </div>257 258  <!-- Product hero -->259  <div class="product-hero">260    <div class="product-img">[IMG: Smartphone Product Photo]</div>261 262    <div class="overlay-btn like">263      <svg width="42" height="42" viewBox="0 0 24 24">264        <path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>265      </svg>266    </div>267    <div class="overlay-btn share">268      <svg width="42" height="42" viewBox="0 0 24 24">269        <circle cx="18" cy="5" r="3" stroke="#444" fill="none" stroke-width="2"></circle>270        <circle cx="6" cy="12" r="3" stroke="#444" fill="none" stroke-width="2"></circle>271        <circle cx="18" cy="19" r="3" stroke="#444" fill="none" stroke-width="2"></circle>272        <path d="M8.7 11l6-3.5M8.7 13l6 3.5" stroke="#444" stroke-width="2" stroke-linecap="round"></path>273      </svg>274    </div>275  </div>276 277  <!-- Carousel 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>286 287  <!-- Variant section -->288  <div class="section">289    <div class="section-title">Select Variant</div>290 291    <div class="variant-row">292      <div>Color: <span class="value">Blue</span></div>293      <div class="right">294        <span>5 more</span>295        <svg width="36" height="36" viewBox="0 0 24 24">296          <path d="M9 6l6 6-6 6" stroke="#888" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>297        </svg>298      </div>299    </div>300 301    <div class="variant-row">302      <div>Storage: <span class="value">256 GB</span></div>303      <div class="right">304        <span>3 more</span>305        <svg width="36" height="36" viewBox="0 0 24 24">306          <path d="M9 6l6 6-6 6" stroke="#888" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>307        </svg>308      </div>309    </div>310 311    <div class="link-more">View more from APPLE</div>312  </div>313 314  <!-- Bottom CTA bar -->315  <div class="cta-bar">316    <div class="btn btn-outline">317      <svg width="44" height="44" viewBox="0 0 24 24">318        <path d="M3 4h3l2 12h9l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>319        <path d="M18 5v4M16 7h4" stroke="#333" stroke-width="2" stroke-linecap="round"></path>320      </svg>321      <span>Add</span>322    </div>323    <div class="btn btn-light">Pay with EMI</div>324    <div class="btn btn-primary">Buy now</div>325  </div>326 327  <!-- Floating badge -->328  <div class="floating-badge">329    <div class="floating-badge-inner">f</div>330  </div>331 332  <!-- Home indicator -->333  <div class="home-indicator"></div>334</div>335</body>336</html>