GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Shoe Rack</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #25323a; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar (mock) */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    height: 90px;23    width: 100%;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    color: #ffffff;29    z-index: 5;30    pointer-events: none;31  }32  .status-bar .time { font-weight: 600; font-size: 34px; letter-spacing: 0.5px; }33  .status-icons { display: flex; gap: 22px; align-items: center; }34  .status-dot { width: 12px; height: 12px; background: rgba(255,255,255,0.9); border-radius: 50%; }35 36  /* Hero */37  .hero {38    position: relative;39    width: 100%;40    height: 900px;41  }42  .hero .img {43    position: absolute;44    top: 0; left: 0;45    width: 100%; height: 100%;46    background: #E0E0E0;47    border: 1px solid #BDBDBD;48    display: flex; align-items: center; justify-content: center;49    color: #757575; font-size: 36px;50  }51  .hero .overlay {52    position: absolute; inset: 0;53    pointer-events: none;54  }55  .circle-btn {56    position: absolute;57    width: 120px; height: 120px;58    border-radius: 60px;59    background: rgba(255,255,255,0.35);60    backdrop-filter: blur(2px);61    display: flex; align-items: center; justify-content: center;62    pointer-events: auto;63  }64  .circle-btn svg { width: 56px; height: 56px; }65  .btn-close { left: 42px; top: 300px; }66  .btn-heart { right: 170px; top: 360px; }67  .btn-share { right: 42px; top: 510px; }68 69  /* Content */70  .content {71    position: relative;72    padding: 40px 44px 160px;73    background: #ffffff;74  }75  .title {76    font-size: 56px; font-weight: 700; letter-spacing: 0.5px;77    margin: 36px 0 16px;78  }79  .price {80    font-size: 54px; font-weight: 700; margin: 0 0 22px; color: #23323a;81  }82 83  /* Rating */84  .rating-row { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }85  .stars { display: flex; gap: 6px; }86  .stars svg { width: 36px; height: 36px; }87  .rating-count { color: #7b8a96; font-size: 32px; }88 89  /* Availability */90  .availability { font-size: 34px; color: #54626f; margin-bottom: 26px; }91  .availability .status { color: #d19b2b; font-weight: 700; text-decoration: none; }92 93  /* Features card */94  .features {95    background: #f2f4f6;96    border-radius: 24px;97    padding: 26px 28px;98    margin: 24px 0 36px;99    border: 1px solid #e6eaee;100    color: #3c4a54;101    font-size: 34px;102    line-height: 1.6;103  }104 105  /* Quantity */106  .qty-block { margin-top: 10px; }107  .qty-label { font-size: 36px; font-weight: 600; margin-bottom: 20px; }108  .qty-row { display: flex; align-items: center; gap: 20px; }109  .qty-box {110    width: 120px; height: 96px;111    border: 1px solid #dfe4ea;112    border-radius: 16px;113    display: flex; align-items: center; justify-content: center;114    font-size: 44px; color: #46525c; background: #ffffff;115  }116  .qty-value {117    width: 160px;118    font-weight: 700;119  }120 121  /* CTA buttons */122  .cta-row { display: flex; gap: 24px; margin-top: 36px; }123  .btn {124    flex: 1;125    height: 120px;126    border-radius: 18px;127    font-size: 40px;128    font-weight: 700;129    border: none;130    cursor: pointer;131  }132  .btn-primary {133    background: #d74c4c; color: #ffffff;134  }135  .btn-secondary {136    background: #eef2f4; color: #5d6b76; border: 1px solid #dfe4ea;137  }138 139  /* Banner card */140  .banner-card {141    margin-top: 36px;142    border-radius: 28px;143    background: #ffffff;144    box-shadow: 0 10px 30px rgba(0,0,0,0.08);145    padding: 16px;146    border: 1px solid #e8edf1;147  }148  .banner-card .img {149    width: 100%;150    height: 380px;151    background: #E0E0E0;152    border: 1px solid #BDBDBD;153    display: flex; align-items: center; justify-content: center;154    color: #757575; font-size: 34px;155    border-radius: 22px;156  }157 158  /* Floating cart bubble */159  .floating-cart {160    position: absolute;161    right: 30px;162    bottom: 190px;163    width: 160px; height: 160px;164    background: #f6d9de;165    border-radius: 38px;166    box-shadow: 0 10px 24px rgba(0,0,0,0.12);167    display: flex; align-items: center; justify-content: center;168  }169  .floating-cart svg { width: 62px; height: 62px; fill: #7a4c55; }170 171  /* Home indicator */172  .home-indicator {173    position: absolute;174    bottom: 36px;175    left: 50%;176    transform: translateX(-50%);177    width: 300px; height: 12px;178    background: #cfd6dc; border-radius: 8px;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status bar (mock) -->186  <div class="status-bar">187    <div class="time">7:22</div>188    <div class="status-icons">189      <div class="status-dot"></div>190      <div class="status-dot"></div>191      <div class="status-dot"></div>192      <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">193        <path d="M3 10h18l-3 4H6l-3-4z"/>194      </svg>195      <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">196        <rect x="3" y="6" width="18" height="12" rx="2"/>197      </svg>198    </div>199  </div>200 201  <!-- Hero image -->202  <section class="hero">203    <div class="img">[IMG: Shoe Rack Product]</div>204    <div class="overlay">205      <!-- Close -->206      <div class="circle-btn btn-close">207        <svg viewBox="0 0 24 24">208          <path d="M6 6l12 12M18 6L6 18" stroke="#6e7a85" stroke-width="2" stroke-linecap="round"/>209        </svg>210      </div>211      <!-- Heart -->212      <div class="circle-btn btn-heart">213        <svg viewBox="0 0 24 24">214          <path d="M12 21s-7-4.7-7-10a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5.3-7 10-7 10z" fill="#e57373"/>215        </svg>216      </div>217      <!-- Share -->218      <div class="circle-btn btn-share">219        <svg viewBox="0 0 24 24">220          <path d="M18 8a3 3 0 10-3-3 3 3 0 003 3zM6 14a3 3 0 10-3-3 3 3 0 003 3zM18 20a3 3 0 10-3-3 3 3 0 003 3z"/>221          <path d="M7.5 11.5l8-4M7.5 12.5l8 4" stroke="#7f8c99" stroke-width="2" fill="none" stroke-linecap="round"/>222        </svg>223      </div>224    </div>225  </section>226 227  <!-- Content area -->228  <section class="content">229    <div class="title">SHOE RACK SR-2001</div>230    <div class="price">5,500.00</div>231 232    <!-- Rating -->233    <div class="rating-row">234      <div class="stars">235        <svg viewBox="0 0 24 24">236          <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1L12 2z" fill="#f5a623"/>237        </svg>238        <svg viewBox="0 0 24 24">239          <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1L12 2z" fill="#f5a623"/>240        </svg>241        <svg viewBox="0 0 24 24">242          <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1L12 2z" fill="#f5a623"/>243        </svg>244        <svg viewBox="0 0 24 24">245          <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1L12 2z" fill="#f5a623"/>246        </svg>247        <svg viewBox="0 0 24 24">248          <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1L12 2z" fill="#f5a623"/>249        </svg>250      </div>251      <div class="rating-count">(0)</div>252    </div>253 254    <!-- Availability -->255    <div class="availability">256      Availability:257      <a href="#" class="status">On backorder</a>258    </div>259 260    <!-- Features -->261    <div class="features">262      – High Quality<br>263      – Heavy Duty Material264    </div>265 266    <!-- Quantity -->267    <div class="qty-block">268      <div class="qty-label">Select the quantity:</div>269      <div class="qty-row">270        <div class="qty-box">−</div>271        <div class="qty-box qty-value">1</div>272        <div class="qty-box">+</div>273      </div>274    </div>275 276    <!-- CTAs -->277    <div class="cta-row">278      <button class="btn btn-primary">Buy Now</button>279      <button class="btn btn-secondary">ADD TO CART</button>280    </div>281 282    <!-- Banner -->283    <div class="banner-card">284      <div class="img">[IMG: Builder Product Banner]</div>285    </div>286  </section>287 288  <!-- Floating cart bubble -->289  <div class="floating-cart">290    <svg viewBox="0 0 24 24">291      <path d="M7 6h14l-2 8H9L7 6zM9 18a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4z"/>292    </svg>293  </div>294 295  <!-- Home indicator -->296  <div class="home-indicator"></div>297</div>298</body>299</html>