GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Ultra 4D Product Page</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #F4F4F4;19  }20 21  /* Top header */22  .top-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 180px;28    background: #EDEDED;29    box-shadow: inset 0 -1px 0 #DADADA;30  }31  .title {32    position: absolute;33    left: 60px;34    top: 120px;35    font-weight: 700;36    letter-spacing: 3px;37    font-size: 48px;38    color: #111;39  }40  .price-pill {41    position: absolute;42    right: 200px;43    top: 90px;44    padding: 20px 28px;45    border: 3px solid #111;46    border-radius: 14px;47    font-weight: 700;48    font-size: 38px;49    background: #fff;50  }51  .close-btn {52    position: absolute;53    right: 60px;54    top: 96px;55    width: 56px;56    height: 56px;57    cursor: pointer;58  }59  .close-btn svg {60    width: 56px;61    height: 56px;62  }63 64  /* Carousel */65  .carousel {66    position: absolute;67    top: 220px;68    left: 0;69    width: 1080px;70    height: 140px;71    display: flex;72    gap: 28px;73    padding: 0 40px;74    align-items: center;75  }76  .thumb {77    width: 150px;78    height: 90px;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    display: flex;82    justify-content: center;83    align-items: center;84    color: #757575;85    font-size: 22px;86    border-radius: 8px;87  }88  .thumb.active {89    outline: 4px solid #111;90  }91 92  /* Main panel */93  .panel {94    position: absolute;95    top: 360px;96    left: 0;97    width: 1080px;98    height: 2040px;99    background: #FFFFFF;100    border-top: 1px solid #E2E2E2;101    padding: 60px;102    box-sizing: border-box;103  }104 105  .metrics {106    display: grid;107    grid-template-columns: 1fr 1fr;108    column-gap: 40px;109    align-items: start;110  }111  .score-left, .score-right {112    position: relative;113  }114  .big-number {115    font-size: 170px;116    font-weight: 800;117    letter-spacing: 6px;118    line-height: 1;119    color: #111;120  }121  .big-percent {122    font-size: 170px;123    font-weight: 800;124    letter-spacing: 10px;125    line-height: 1;126    color: #111;127  }128  .stars {129    margin-top: 24px;130    display: flex;131    gap: 12px;132  }133  .stars svg {134    width: 40px;135    height: 40px;136    fill: #111;137  }138  .recommend-copy {139    margin-top: 36px;140    font-size: 36px;141    line-height: 1.2;142    color: #222;143    max-width: 420px;144  }145  .reviews-count {146    margin-top: 30px;147    font-weight: 800;148    font-size: 36px;149    letter-spacing: 3px;150  }151  .reviews-count::after {152    content: "";153    display: block;154    width: 220px;155    height: 6px;156    background: #111;157    margin-top: 16px;158  }159 160  /* Bars */161  .bar-section {162    margin-top: 60px;163  }164  .bar-label {165    font-weight: 800;166    font-size: 36px;167    letter-spacing: 3px;168    margin-bottom: 24px;169  }170  .scale {171    position: relative;172    margin-bottom: 48px;173  }174  .track {175    position: relative;176    width: 900px;177    height: 10px;178    background: #E7E7E7;179    border-radius: 6px;180  }181  .knob {182    position: absolute;183    top: -8px;184    width: 90px;185    height: 26px;186    background: #111;187    border-radius: 6px;188  }189  .scale-labels {190    font-size: 28px;191    color: #444;192    display: flex;193    justify-content: space-between;194    width: 900px;195    margin-top: 16px;196  }197 198  /* Complete the look */199  .ctl-title {200    margin-top: 90px;201    font-size: 72px;202    font-weight: 800;203    letter-spacing: 2px;204  }205  .cards {206    margin-top: 40px;207    display: grid;208    grid-template-columns: repeat(3, 1fr);209    gap: 30px;210  }211  .card {212    width: 300px;213    height: 460px;214    border: 1px solid #E1E1E1;215    border-radius: 12px;216    overflow: hidden;217    background: #FAFAFA;218    display: flex;219    flex-direction: column;220    justify-content: space-between;221  }222  .card-img {223    height: 360px;224    background: #E0E0E0;225    border-bottom: 1px solid #BDBDBD;226    display: flex;227    justify-content: center;228    align-items: center;229    color: #757575;230    font-size: 26px;231  }232  .card-info {233    padding: 16px 18px 22px;234    font-size: 28px;235    color: #222;236    display: flex;237    justify-content: space-between;238    align-items: center;239  }240  .price-old {241    color: #888;242    text-decoration: line-through;243    margin-left: 10px;244    font-size: 26px;245  }246  .price-new {247    color: #D7372F;248    font-weight: 800;249    font-size: 32px;250  }251</style>252</head>253<body>254<div id="render-target">255 256  <!-- Top header -->257  <div class="top-bar"></div>258  <div class="title">ULTRA 4D</div>259  <div class="price-pill">$220.00</div>260  <div class="close-btn">261    <svg viewBox="0 0 24 24">262      <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>263    </svg>264  </div>265 266  <!-- Carousel -->267  <div class="carousel">268    <div class="thumb">[IMG: Ultra 4D - Cream]</div>269    <div class="thumb">[IMG: Ultra 4D - Black]</div>270    <div class="thumb">[IMG: Ultra 4D - Pastel]</div>271    <div class="thumb">[IMG: Ultra 4D - Beige]</div>272    <div class="thumb active">[IMG: Ultra 4D - Grey/Black]</div>273    <div class="thumb">[IMG: Ultra 4D - Green/Black]</div>274  </div>275 276  <!-- Main content panel -->277  <div class="panel">278 279    <div class="metrics">280      <div class="score-left">281        <div class="big-number">4.8</div>282        <div class="stars">283          <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.4-6.3 3.4 1.3-7-5.1-5 7-1z"/></svg>284          <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.4-6.3 3.4 1.3-7-5.1-5 7-1z"/></svg>285          <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.4-6.3 3.4 1.3-7-5.1-5 7-1z"/></svg>286          <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.4-6.3 3.4 1.3-7-5.1-5 7-1z"/></svg>287          <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5.1 5 1.3 7-6.3-3.4-6.3 3.4 1.3-7-5.1-5 7-1z"/></svg>288        </div>289        <div class="reviews-count">534 REVIEWS</div>290      </div>291 292      <div class="score-right">293        <div class="big-percent">96 %</div>294        <div class="recommend-copy">of customers recommend<br>this product</div>295      </div>296    </div>297 298    <!-- SIZE -->299    <div class="bar-section">300      <div class="bar-label">SIZE</div>301      <div class="scale">302        <div class="track"></div>303        <div class="knob" style="left: 405px;"></div>304        <div class="scale-labels">305          <span>Too small</span>306          <span>Perfect</span>307          <span>Too large</span>308        </div>309      </div>310 311      <!-- WIDTH -->312      <div class="bar-label" style="margin-top: 30px;">WIDTH</div>313      <div class="scale">314        <div class="track"></div>315        <div class="knob" style="left: 330px;"></div>316        <div class="scale-labels">317          <span>Too narrow</span>318          <span>Perfect</span>319          <span>Too wide</span>320        </div>321      </div>322 323      <!-- COMFORT -->324      <div class="bar-label" style="margin-top: 30px;">COMFORT</div>325      <div class="scale">326        <div class="track" style="height: 12px;"></div>327        <div class="knob" style="left: 760px; width: 120px;"></div>328        <div class="scale-labels">329          <span>Uncomfortable</span>330          <span style="visibility:hidden">.</span>331          <span>Comfortable</span>332        </div>333      </div>334 335      <!-- QUALITY -->336      <div class="bar-label" style="margin-top: 30px;">QUALITY</div>337      <div class="scale">338        <div class="track" style="height: 12px;"></div>339        <div class="knob" style="left: 840px; width: 120px;"></div>340        <div class="scale-labels">341          <span>Poor</span>342          <span style="visibility:hidden">.</span>343          <span>Perfect</span>344        </div>345      </div>346    </div>347 348    <!-- Complete the look -->349    <div class="ctl-title">COMPLETE THE LOOK</div>350    <div class="cards">351      <div class="card">352        <div class="card-img">[IMG: Headbands Set]</div>353        <div class="card-info">354          <div>3-Pack Headbands</div>355          <div>356            <span class="price-new">$29.99</span>357            <span class="price-old">$39.99</span>358          </div>359        </div>360      </div>361 362      <div class="card">363        <div class="card-img">[IMG: Black/Grey Shirt on model]</div>364        <div class="card-info">365          <div>Training Tee</div>366          <div>367            <span class="price-new">$36.99</span>368            <span class="price-old">$45.00</span>369          </div>370        </div>371      </div>372 373      <div class="card">374        <div class="card-img">[IMG: Long Sleeve Training Top]</div>375        <div class="card-info">376          <div>Long Sleeve Top</div>377          <div>378            <span class="price-new">$59.99</span>379            <span class="price-old">$75.00</span>380          </div>381        </div>382      </div>383    </div>384 385  </div>386 387</div>388</body>389</html>