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 Detail Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; color: #111;12  }13 14  /* Status bar */15  .statusbar {16    height: 110px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; color: #555;17    font-size: 36px;18  }19  .status-right { display: flex; align-items: center; gap: 26px; }20 21  /* Top navigation overlay */22  .navbar {23    height: 120px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; color: #222;24  }25  .nav-left, .nav-right { display: flex; align-items: center; gap: 28px; }26  .icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }27  .icon svg { width: 56px; height: 56px; }28 29  /* Hero image area */30  .hero {31    position: relative;32    height: 950px;33    background: #ffffff;34  }35  .product-img {36    width: 940px; height: 760px; margin: 40px auto 0 auto;37    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;38    display: flex; align-items: center; justify-content: center; font-size: 36px; border-radius: 18px;39  }40  .blue-sticker {41    position: absolute; right: 26px; top: 20px;42    width: 180px; height: 180px; background: #4FA5FF; color: #fff; border-radius: 32px;43    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 38px;44    box-shadow: 0 6px 14px rgba(0,0,0,0.15);45  }46  .hero-pills {47    position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%);48    display: flex; gap: 24px;49  }50  .pill {51    background: rgba(0,0,0,0.85); color: #fff; padding: 18px 42px; border-radius: 40px; font-size: 34px;52  }53  .count-badge {54    position: absolute; right: 26px; bottom: 26px; background: rgba(0,0,0,0.15);55    color: #333; padding: 14px 26px; border-radius: 28px; font-size: 34px;56  }57 58  /* Options thumbs */59  .options-block { padding: 20px 36px 0 36px; }60  .options-title { font-size: 40px; color: #333; margin-bottom: 16px; }61  .thumbs { display: flex; gap: 22px; }62  .thumb {63    width: 220px; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;64    display: flex; align-items: center; justify-content: center; color: #757575; position: relative; font-size: 28px;65  }66  .thumb .corner {67    position: absolute; right: 8px; top: 8px; background: #4FA5FF; color: #fff; font-size: 26px;68    padding: 6px 12px; border-radius: 20px;69  }70 71  .divider { height: 18px; background: #F2F2F2; margin: 26px 0; }72 73  /* Coupon banner */74  .coupon {75    margin: 0 0 0 0; padding: 26px 36px;76    background: linear-gradient(90deg, #ffd3d6 0%, #ffe1e3 100%);77  }78  .coupon-inner {79    background: #ffdee1; border-radius: 24px; padding: 28px 28px; display: flex; align-items: center; justify-content: space-between;80  }81  .coupon-left { display: flex; align-items: center; gap: 20px; }82  .coupon-title { color: #e54b5e; font-weight: 700; font-size: 36px; }83  .coupon-sub { color: #e54b5e; font-weight: 800; font-size: 44px; }84  .claim-btn {85    background: #ff5959; color: #fff; border: none; border-radius: 40px; padding: 18px 38px; font-size: 34px; font-weight: 700;86  }87 88  /* Price & title */89  .content { padding: 24px 36px; }90  .price { font-size: 66px; font-weight: 800; margin: 12px 0 18px 0; }91  .title-row { display: flex; align-items: flex-start; gap: 20px; }92  .title {93    font-size: 36px; color: #333; line-height: 1.35; flex: 1;94  }95  .heart { width: 64px; height: 64px; }96  .rank {97    margin-top: 22px; background: #FFF3CC; border: 1px solid #FFE59A; color: #B07A00;98    border-radius: 18px; padding: 22px 26px; display: flex; align-items: center; gap: 14px; font-size: 32px;99  }100 101  .section-row {102    margin-top: 20px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;103    padding: 26px 36px; display: flex; align-items: center; justify-content: space-between; font-size: 40px;104  }105  .section-row .sub { color: #888; font-size: 36px; margin-left: 8px; }106 107  /* Sticky purchase bar */108  .sticky-bar {109    position: absolute; left: 0; right: 0; bottom: 70px; padding: 16px 24px;110    background: #ffffff; box-shadow: 0 -6px 16px rgba(0,0,0,0.06);111    display: grid; grid-template-columns: 160px 160px 1fr 1fr; gap: 20px; align-items: center;112  }113  .mini { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #333; font-size: 26px; }114  .mini .icon svg { width: 44px; height: 44px; }115  .btn-outline {116    height: 120px; border-radius: 60px; border: 3px solid #FFD54F; color: #111; font-size: 40px; font-weight: 700;117    display: flex; align-items: center; justify-content: center; background: #fff; position: relative;118  }119  .btn-solid {120    height: 120px; border-radius: 60px; background: linear-gradient(180deg, #FFD54F, #FFC107);121    color: #111; font-size: 42px; font-weight: 800; display: flex; align-items: center; justify-content: center;122  }123  .coin-dot {124    position: absolute; right: 28px; top: -16px; width: 44px; height: 44px; border-radius: 50%; background: #FFC107; border: 2px solid #fff;125    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 28px; color: #8A5F00;126  }127 128  /* Home indicator */129  .home-indicator {130    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);131    width: 360px; height: 12px; background: rgba(0,0,0,0.12); border-radius: 10px;132  }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Status bar -->139  <div class="statusbar">140    <div>9:46</div>141    <div class="status-right">142      <span>◌</span>143      <span>▦</span>144      <span>S</span>145      <span>•</span>146      <span>▾</span>147      <span>🔋</span>148    </div>149  </div>150 151  <!-- Top navigation -->152  <div class="navbar">153    <div class="nav-left">154      <div class="icon">155        <svg viewBox="0 0 48 48"><path d="M30 8 L14 24 L30 40" fill="none" stroke="#111" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></svg>156      </div>157    </div>158    <div class="nav-right">159      <div class="icon">160        <svg viewBox="0 0 48 48"><circle cx="20" cy="20" r="12" fill="none" stroke="#111" stroke-width="4"/><path d="M32 32 L44 44" stroke="#111" stroke-width="4" stroke-linecap="round"/></svg>161      </div>162      <div class="icon">163        <svg viewBox="0 0 48 48">164          <circle cx="24" cy="24" r="20" fill="#FFD54F" stroke="#F4B400" stroke-width="3"></circle>165          <text x="24" y="30" text-anchor="middle" font-size="22" font-weight="800" fill="#885C00">S</text>166        </svg>167      </div>168      <div class="icon">169        <svg viewBox="0 0 48 48"><path d="M6 10 H42 L39 28 H13 L10 16" fill="none" stroke="#111" stroke-width="4" stroke-linejoin="round"/><circle cx="16" cy="36" r="3.5" fill="#111"/><circle cx="34" cy="36" r="3.5" fill="#111"/></svg>170      </div>171      <div class="icon">172        <svg viewBox="0 0 48 48"><circle cx="12" cy="24" r="3" fill="#111"/><circle cx="24" cy="24" r="3" fill="#111"/><circle cx="36" cy="24" r="3" fill="#111"/></svg>173      </div>174    </div>175  </div>176 177  <!-- Hero / product image -->178  <div class="hero">179    <div class="product-img">[IMG: Top-Loading Washing Machine]</div>180 181    <div class="blue-sticker">182      10V 8KG183    </div>184 185    <div class="hero-pills">186      <div class="pill">Images</div>187      <div class="pill" style="background: rgba(0,0,0,0.6);">Options</div>188    </div>189 190    <div class="count-badge">1 of 8</div>191  </div>192 193  <!-- Options thumbnails -->194  <div class="options-block">195    <div class="options-title">2 options</div>196    <div class="thumbs">197      <div class="thumb">198        [IMG: Washer Option A]199        <div class="corner">8KG</div>200      </div>201      <div class="thumb">202        [IMG: Washer Option B]203        <div class="corner">8KG</div>204      </div>205    </div>206  </div>207 208  <div class="divider"></div>209 210  <!-- Coupon banner -->211  <div class="coupon">212    <div class="coupon-inner">213      <div class="coupon-left">214        <div class="icon" style="width:60px;height:60px;">215          <svg viewBox="0 0 48 48">216            <rect x="6" y="16" width="36" height="24" rx="4" fill="#ff7a85"/>217            <path d="M24 16 V40" stroke="#ffffff" stroke-width="4"/>218            <path d="M14 16 C14 10, 22 10, 24 16 C26 10, 34 10, 34 16" fill="none" stroke="#ffffff" stroke-width="4"/>219          </svg>220        </div>221        <div>222          <div class="coupon-title">New Buyer Coupon Pack</div>223          <div class="coupon-sub">30,95 € OFF</div>224        </div>225      </div>226      <button class="claim-btn">Claim</button>227    </div>228  </div>229 230  <!-- Price and title -->231  <div class="content">232    <div class="price">958,75 €</div>233    <div class="title-row">234      <div class="title">235        Free shipping 380w Power Washer Can Wash 8kg Clothes Top Loading Washer Automatic Top ...236      </div>237      <div class="heart">238        <svg viewBox="0 0 48 48">239          <path d="M24 40 C10 30,6 26,6 18 C6 12,10 8,16 8 C20 8,22.5 10.5,24 13 C25.5 10.5,28 8,32 8 C38 8,42 12,42 18 C42 26,38 30,24 40 Z" fill="none" stroke="#111" stroke-width="3"/>240        </svg>241      </div>242    </div>243 244    <div class="rank">245      <svg width="44" height="44" viewBox="0 0 48 48">246        <path d="M12 18 H36 V36 H12 Z" fill="#FFD54F" stroke="#E6B800" stroke-width="3"/>247        <path d="M18 36 V42 H30 V36" stroke="#E6B800" stroke-width="3"/>248        <circle cx="24" cy="27" r="6" fill="#fff"/>249        <path d="M24 22 L26 28 L20 25 H28 L22 28 Z" fill="#FFD54F" stroke="#E6B800" stroke-width="1.5"/>250      </svg>251      NO.61 in Washing Machines 7 days Top Ranking list >252    </div>253  </div>254 255  <div class="section-row">256    <div>257      Please Select <span class="sub">Options</span>258    </div>259    <div class="icon" style="width:44px;height:44px;">260      <svg viewBox="0 0 48 48"><path d="M18 10 L34 24 L18 38" fill="none" stroke="#999" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>261    </div>262  </div>263 264  <!-- Sticky action bar -->265  <div class="sticky-bar">266    <div class="mini">267      <div class="icon">268        <svg viewBox="0 0 48 48">269          <path d="M8 20 L24 8 L40 20 V40 H8 Z" fill="none" stroke="#111" stroke-width="3" />270          <path d="M20 40 V28 H28 V40" fill="none" stroke="#111" stroke-width="3"/>271        </svg>272      </div>273      <div>Store</div>274    </div>275 276    <div class="mini">277      <div class="icon">278        <svg viewBox="0 0 48 48">279          <path d="M8 12 H40 V30 H26 L18 38 V30 H8 Z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"/>280        </svg>281      </div>282      <div>Chat</div>283    </div>284 285    <div class="btn-outline">286      Add to Cart287      <div class="coin-dot">S</div>288    </div>289 290    <div class="btn-solid">Buy Now</div>291  </div>292 293  <div class="home-indicator"></div>294</div>295</body>296</html>