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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "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  /* Top system status bar */18  .status-bar {19    height: 110px;20    background: #212121;21    color: #ffffff;22    display: flex;23    align-items: center;24    padding: 0 36px;25    font-weight: 600;26    font-size: 42px;27    letter-spacing: 0.3px;28  }29  .status-bar .right {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 28px;34  }35  .dot { width: 18px; height: 18px; background: #bdbdbd; border-radius: 50%; display: inline-block; }36 37  /* Promo banner */38  .promo-banner {39    height: 120px;40    background: #93d7e7;41    color: #11343f;42    display: flex;43    align-items: center;44    padding: 0 36px;45    font-size: 36px;46    font-weight: 600;47    box-shadow: inset 0 -6px 0 rgba(0,0,0,0.08);48  }49  .promo-banner .chevrons { margin-left: auto; color: #0b2c36; font-weight: 700; }50 51  /* App bar */52  .appbar {53    height: 160px;54    background: #c9142c;55    color: #ffffff;56    display: flex;57    align-items: center;58    padding: 0 32px;59    gap: 24px;60  }61  .appbar .title {62    font-size: 44px;63    font-weight: 800;64    line-height: 1.2;65    white-space: nowrap;66    overflow: hidden;67    text-overflow: ellipsis;68  }69  .appbar .spacer { flex: 1; }70  .appbar .icon-btn {71    width: 88px;72    height: 88px;73    display: inline-flex;74    align-items: center;75    justify-content: center;76    border-radius: 44px;77  }78 79  /* Hero image area */80  .hero {81    height: 980px;82    background: #c9142c;83    position: relative;84  }85  .hero .img-placeholder {86    width: 92%;87    height: 84%;88    margin: 80px auto 0;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    display: flex;92    align-items: center;93    justify-content: center;94    color: #757575;95    font-size: 40px;96    border-radius: 12px;97  }98 99  /* Floating action buttons */100  .fab {101    position: absolute;102    right: 36px;103    width: 130px;104    height: 130px;105    background: #ffffff;106    border-radius: 50%;107    display: flex;108    align-items: center;109    justify-content: center;110    box-shadow: 16px 16px 0 rgba(0,0,0,0.9);111  }112  .fab.share { top: 140px; }113  .fab.like { top: 310px; }114 115  /* Page indicator below hero */116  .indicator-bar {117    height: 100px;118    background: #e6e6e6;119    display: flex;120    align-items: center;121    justify-content: center;122  }123  .indicator-dot {124    width: 40px;125    height: 40px;126    background: #c9142c;127    border-radius: 50%;128  }129 130  /* Content card */131  .content {132    background: #ffffff;133    padding: 36px;134    border-top-left-radius: 24px;135    border-top-right-radius: 24px;136    box-shadow: 0 -2px 0 rgba(0,0,0,0.06);137  }138  .brand {139    color: #b49754;140    font-size: 36px;141    font-weight: 700;142    margin-bottom: 12px;143  }144  .product-title {145    font-size: 52px;146    font-weight: 900;147    color: #1d1d1d;148    line-height: 1.25;149    margin-bottom: 20px;150  }151  .meta {152    font-size: 34px;153    color: #666666;154    margin-bottom: 24px;155  }156  .rating-row {157    display: flex;158    align-items: center;159    gap: 16px;160    margin-bottom: 24px;161  }162  .stars { display: flex; gap: 6px; }163  .rating-row .reviews { font-size: 34px; color: #9e9e9e; }164 165  .price-row {166    font-size: 40px;167    display: flex;168    align-items: baseline;169    gap: 20px;170    margin-bottom: 12px;171  }172  .mrp { color: #9e9e9e; text-decoration: line-through; }173  .sale { color: #1d1d1d; font-weight: 800; }174  .save { color: #1da852; font-weight: 800; font-size: 40px; }175 176  .tax-note { color: #9e9e9e; font-size: 32px; margin-bottom: 24px; }177 178  .stock-row {179    display: flex;180    align-items: center;181    gap: 24px;182    margin-bottom: 32px;183  }184  .pill {185    background: #2e7d32;186    color: #ffffff;187    padding: 18px 28px;188    border-radius: 12px;189    font-size: 34px;190    font-weight: 700;191  }192  .stock-warn { color: #e53935; font-size: 34px; font-weight: 700; }193 194  .section-title {195    font-size: 44px;196    font-weight: 800;197    color: #222;198    margin: 28px 0 16px;199  }200  .availability-placeholder {201    height: 280px;202    background: #f2f2f2;203    border: 1px solid #dedede;204    border-radius: 18px;205    display: flex;206    align-items: center;207    justify-content: center;208    color: #757575;209    font-size: 36px;210  }211 212  /* Sticky bottom action bar */213  .sticky-actions {214    position: absolute;215    left: 0;216    bottom: 0;217    width: 100%;218    height: 180px;219    background: #f5f5f5;220    border-top: 1px solid #e0e0e0;221    display: flex;222    align-items: center;223    padding: 0 28px;224    gap: 28px;225  }226  .action-btn {227    flex: 1;228    height: 120px;229    background: #ffffff;230    border: 2px solid #d9d9d9;231    border-radius: 20px;232    display: flex;233    align-items: center;234    justify-content: center;235    gap: 18px;236    font-size: 40px;237    font-weight: 800;238    color: #333333;239  }240  .action-btn.buy {241    border-color: #cfcfcf;242  }243 244  /* Simple icon styling */245  svg { display: block; }246</style>247</head>248<body>249<div id="render-target">250 251  <!-- Status bar -->252  <div class="status-bar">253    <div>3:31</div>254    <div class="right">255      <span class="dot"></span>256      <span class="dot"></span>257      <span class="dot"></span>258      <span class="dot"></span>259    </div>260  </div>261 262  <!-- Promo banner -->263  <div class="promo-banner">264    <div style="margin-right:18px;">265      <svg width="40" height="40" viewBox="0 0 24 24">266        <path d="M15 18l-6-6 6-6" fill="none" stroke="#0b2c36" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>267      </svg>268    </div>269    <div>Connect with our customer service to get your order before Christmas directly from stores @8080847847</div>270    <div class="chevrons">271      <svg width="40" height="40" viewBox="0 0 24 24">272        <path d="M9 6l6 6-6 6" fill="none" stroke="#0b2c36" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>273      </svg>274    </div>275  </div>276 277  <!-- App bar -->278  <div class="appbar">279    <div class="icon-btn">280      <svg width="64" height="64" viewBox="0 0 24 24">281        <path d="M15 18l-6-6 6-6" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>282      </svg>283    </div>284    <div class="title">Ralleyz Magic Movement Car, Remote Control Toys for Kids, 5Y+</div>285    <div class="spacer"></div>286    <div class="icon-btn">287      <svg width="64" height="64" viewBox="0 0 24 24">288        <circle cx="11" cy="11" r="7" fill="none" stroke="#fff" stroke-width="2"/>289        <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>290      </svg>291    </div>292    <div class="icon-btn">293      <svg width="64" height="64" viewBox="0 0 24 24">294        <path d="M12 21s6-4.35 6-9a6 6 0 00-12 0c0 4.65 6 9 6 9z" fill="none" stroke="#fff" stroke-width="2"/>295      </svg>296    </div>297    <div class="icon-btn">298      <svg width="64" height="64" viewBox="0 0 24 24">299        <path d="M7 7h10l-1 12H8L7 7z" fill="none" stroke="#fff" stroke-width="2"/>300        <path d="M9 7V5a3 3 0 013-3 3 3 0 013 3v2" stroke="#fff" stroke-width="2" fill="none"/>301      </svg>302    </div>303  </div>304 305  <!-- Hero area -->306  <div class="hero">307    <div class="img-placeholder">[IMG: Toy Car]</div>308 309    <div class="fab share">310      <svg width="60" height="60" viewBox="0 0 24 24">311        <circle cx="18" cy="5" r="3" fill="none" stroke="#222" stroke-width="2"/>312        <circle cx="6" cy="12" r="3" fill="none" stroke="#222" stroke-width="2"/>313        <circle cx="18" cy="19" r="3" fill="none" stroke="#222" stroke-width="2"/>314        <path d="M9 12l7-5M9 12l7 7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>315      </svg>316    </div>317    <div class="fab like">318      <svg width="60" height="60" viewBox="0 0 24 24">319        <path d="M12 21s7-5.1 7-10a5 5 0 00-10 0 5 5 0 00-4 5c0 4.9 7 10 7 10z" fill="none" stroke="#222" stroke-width="2"/>320      </svg>321    </div>322  </div>323 324  <!-- Indicator -->325  <div class="indicator-bar">326    <div class="indicator-dot"></div>327  </div>328 329  <!-- Product content -->330  <div class="content">331    <div class="brand">Ralleyz</div>332    <div class="product-title">Ralleyz Magic Movement Car, Remote Control Toys for Kids, 5Y+, Red</div>333    <div class="meta">5Y+ | Unisex | 5</div>334 335    <div class="rating-row">336      <div class="stars">337        <svg width="40" height="40" viewBox="0 0 24 24">338          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="none" stroke="#bdbdbd" stroke-width="1.6"/>339        </svg>340        <svg width="40" height="40" viewBox="0 0 24 24">341          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="none" stroke="#bdbdbd" stroke-width="1.6"/>342        </svg>343        <svg width="40" height="40" viewBox="0 0 24 24">344          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="none" stroke="#bdbdbd" stroke-width="1.6"/>345        </svg>346        <svg width="40" height="40" viewBox="0 0 24 24">347          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="none" stroke="#bdbdbd" stroke-width="1.6"/>348        </svg>349        <svg width="40" height="40" viewBox="0 0 24 24">350          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="none" stroke="#bdbdbd" stroke-width="1.6"/>351        </svg>352      </div>353      <div class="reviews">0 Reviews</div>354    </div>355 356    <div class="price-row">357      <div class="mrp">MRP ₹3999</div>358      <div class="sale">₹2999</div>359      <div class="save">Save 25%</div>360    </div>361 362    <div class="tax-note">Price inclusive of all taxes</div>363 364    <div class="stock-row">365      <div class="pill">In Stock</div>366      <div class="stock-warn">Only 0 in stock</div>367    </div>368 369    <div class="section-title">Check Availability</div>370    <div class="availability-placeholder">[Availability Checker Placeholder]</div>371  </div>372 373  <!-- Sticky actions -->374  <div class="sticky-actions">375    <div class="action-btn">376      <svg width="50" height="50" viewBox="0 0 24 24">377        <path d="M7 7h10l-1 12H8L7 7z" fill="none" stroke="#333" stroke-width="2"/>378        <path d="M9 7V5a3 3 0 013-3 3 3 0 013 3v2" stroke="#333" stroke-width="2" fill="none"/>379      </svg>380      <span>Add to Cart</span>381    </div>382    <div class="action-btn buy">383      <svg width="50" height="50" viewBox="0 0 24 24">384        <path d="M7 7h10l-1 12H8L7 7z" fill="none" stroke="#333" stroke-width="2"/>385        <path d="M9 7V5a3 3 0 013-3 3 3 0 013 3v2" stroke="#333" stroke-width="2" fill="none"/>386      </svg>387      <span>Buy Now</span>388    </div>389  </div>390 391</div>392</body>393</html>