GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Details UI</title>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: #ffffff;19  }20 21  /* Header / Status */22  .header {23    position: relative;24    width: 100%;25    height: 320px;26    background: linear-gradient(90deg, #8edfd5, #b5f0d6);27  }28  .statusbar {29    height: 72px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #1d1d1d;35    font-size: 34px;36    letter-spacing: 0.5px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 28px;42    color: #3a3a3a;43  }44  /* simple dots */45  .dot {46    width: 10px;47    height: 10px;48    background: #3a3a3a;49    border-radius: 50%;50    display: inline-block;51  }52 53  .top-row {54    display: flex;55    align-items: center;56    gap: 24px;57    padding: 18px 28px;58  }59  .back-btn {60    width: 80px;61    height: 80px;62    border-radius: 40px;63    display: flex;64    align-items: center;65    justify-content: center;66  }67  .search-bar {68    flex: 1;69    height: 100px;70    background: #ffffff;71    border-radius: 22px;72    box-shadow: 0 4px 10px rgba(0,0,0,0.15);73    display: flex;74    align-items: center;75    padding: 0 28px;76    gap: 20px;77  }78  .search-input {79    flex: 1;80    font-size: 40px;81    color: #444;82  }83  .scan-btn {84    width: 72px;85    height: 72px;86    border-radius: 16px;87    border: 1px solid #d0d0d0;88    display: flex;89    align-items: center;90    justify-content: center;91  }92 93  /* Tabs */94  .tabs {95    position: absolute;96    bottom: 0;97    left: 0;98    right: 0;99    height: 120px;100    display: flex;101    background: #ffffff;102    border-top-left-radius: 24px;103  }104  .tab {105    flex: 1;106    display: flex;107    align-items: center;108    justify-content: center;109    font-size: 42px;110    color: #3a3a3a;111    position: relative;112  }113  .tab.active {114    color: #f06f0d;115    font-weight: 700;116  }117  .tab.active::after {118    content: "";119    position: absolute;120    bottom: 0;121    height: 10px;122    width: 140px;123    background: #f06f0d;124    border-radius: 6px;125  }126  .tab-right {127    width: 140px;128    background: linear-gradient(90deg, #eafff6, #bdf2dd);129    border-left: 1px solid #e5e5e5;130    display: flex;131    align-items: center;132    justify-content: center;133  }134 135  /* Content */136  .content {137    position: absolute;138    top: 320px;139    left: 0;140    right: 0;141    bottom: 200px;142    padding: 36px;143    overflow: hidden;144    color: #2b2b2b;145  }146  .section {147    margin-bottom: 18px;148  }149  .label {150    font-size: 40px;151    font-weight: 700;152    margin-top: 28px;153  }154  .value {155    font-size: 38px;156    color: #5a5a5a;157    margin-top: 10px;158  }159 160  .h-title {161    font-size: 60px;162    font-weight: 800;163    margin: 36px 0 16px 0;164  }165  .bullets {166    margin: 0 0 10px 32px;167    padding-left: 28px;168    color: #5e5e5e;169  }170  .bullets li {171    font-size: 36px;172    line-height: 1.6;173    margin-bottom: 20px;174  }175 176  .paragraph {177    font-size: 38px;178    color: #5a5a5a;179    line-height: 1.55;180    margin-bottom: 24px;181  }182 183  .kv {184    margin-top: 22px;185  }186  .kv .k {187    font-size: 40px;188    font-weight: 700;189    margin-top: 22px;190  }191  .kv .v {192    font-size: 38px;193    color: #6a6a6a;194    margin-top: 10px;195  }196 197  /* Bottom Nav */198  .bottom-nav {199    position: absolute;200    left: 0;201    right: 0;202    bottom: 60px;203    height: 160px;204    border-top: 1px solid #e0e0e0;205    background: #ffffff;206    display: flex;207    padding: 0 30px;208  }209  .nav-item {210    flex: 1;211    display: flex;212    flex-direction: column;213    align-items: center;214    justify-content: center;215    gap: 12px;216    color: #444;217    font-size: 30px;218  }219  .nav-item.active {220    color: #22b3a8;221    font-weight: 700;222  }223  .icon {224    width: 64px;225    height: 64px;226  }227  .badge {228    position: absolute;229    top: 18px;230    right: 180px;231    width: 38px;232    height: 38px;233    background: #ff6b6b;234    color: #fff;235    border-radius: 19px;236    display: flex;237    align-items: center;238    justify-content: center;239    font-size: 24px;240    font-weight: 700;241    border: 2px solid #ffffff;242  }243  /* Gesture pill */244  .gesture {245    position: absolute;246    bottom: 16px;247    left: 50%;248    transform: translateX(-50%);249    width: 340px;250    height: 18px;251    background: #bdbdbd;252    border-radius: 10px;253    opacity: 0.6;254  }255</style>256</head>257<body>258<div id="render-target">259 260  <div class="header">261    <div class="statusbar">262      <div>10:40</div>263      <div class="status-right">264        <span>⦿</span>265        <span>📶</span>266        <span>🔋 100%</span>267      </div>268    </div>269 270    <div class="top-row">271      <div class="back-btn">272        <svg class="icon" viewBox="0 0 24 24">273          <path d="M15 18l-6-6 6-6" fill="none" stroke="#1d1d1d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>274        </svg>275      </div>276      <div class="search-bar">277        <svg class="icon" viewBox="0 0 24 24">278          <circle cx="11" cy="11" r="7" fill="none" stroke="#444" stroke-width="2"></circle>279          <path d="M20 20l-4-4" stroke="#444" stroke-width="2" stroke-linecap="round"></path>280        </svg>281        <div class="search-input">sports shoes for men</div>282        <div class="scan-btn">283          <svg class="icon" viewBox="0 0 24 24">284            <rect x="5" y="5" width="14" height="14" rx="2" fill="none" stroke="#666" stroke-width="2"></rect>285            <circle cx="12" cy="12" r="2" fill="#666"></circle>286          </svg>287        </div>288      </div>289    </div>290 291    <div class="tabs">292      <div class="tab active">Details</div>293      <div class="tab">Reviews</div>294      <div class="tab-right">295        <svg class="icon" viewBox="0 0 24 24">296          <path d="M6 14l6-6 6 6" fill="none" stroke="#2b6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>297        </svg>298      </div>299    </div>300  </div>301 302  <div class="content">303    <div class="section">304      <div class="label">Style</div>305      <div class="value">Running Shoes</div>306    </div>307 308    <div class="section">309      <div class="label">Country of Origin</div>310      <div class="value">Vietnam</div>311    </div>312 313    <div class="section">314      <div class="h-title">About this item</div>315      <ul class="bullets">316        <li>Mesh throughout the upper has a lightweight, breathable feel. The mesh was placed in key zones based on runner feedback, providing you with cooling where it counts.</li>317        <li>All Nike products are meant to deliver high performance, durability and great comfort.</li>318        <li>Warranty details: Contact seller for warranty.</li>319      </ul>320    </div>321 322    <div class="section">323      <div class="h-title">Description</div>324      <div class="paragraph">Nike running shoes are made with premium quality material and provide ultimate comfort and durability. You can pair the shoes with trackpant, shorts or denim.</div>325    </div>326 327    <div class="kv">328      <div class="k">Manufacturer</div>329      <div class="v">NIKE INDIA PVT. LTD., NIKE INDIA PVT. LTD.</div>330 331      <div class="k">Packer</div>332      <div class="v">NIKE INDIA PVT. LTD.</div>333 334      <div class="k">Importer</div>335      <div class="v">NIKE INDIA PVT. LTD.</div>336 337      <div class="k">Item Weight</div>338      <div class="v">800 g</div>339 340      <div class="k">Item Dimensions LxWxH</div>341      <div class="v">33 x 22 x 12 Centimeters</div>342    </div>343  </div>344 345  <div class="bottom-nav">346    <div class="nav-item active">347      <svg class="icon" viewBox="0 0 24 24">348        <path d="M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" fill="none" stroke="#22b3a8" stroke-width="2"></path>349      </svg>350      <div>Home</div>351    </div>352    <div class="nav-item">353      <svg class="icon" viewBox="0 0 24 24">354        <circle cx="12" cy="8" r="4" fill="none" stroke="#444" stroke-width="2"></circle>355        <path d="M4 20c2-4 6-4 8-4s6 0 8 4" fill="none" stroke="#444" stroke-width="2"></path>356      </svg>357      <div>You</div>358    </div>359    <div class="nav-item">360      <svg class="icon" viewBox="0 0 24 24">361        <rect x="4" y="4" width="7" height="7" fill="none" stroke="#444" stroke-width="2"></rect>362        <rect x="13" y="4" width="7" height="7" fill="none" stroke="#444" stroke-width="2"></rect>363        <rect x="4" y="13" width="7" height="7" fill="none" stroke="#444" stroke-width="2"></rect>364        <rect x="13" y="13" width="7" height="7" fill="none" stroke="#444" stroke-width="2"></rect>365      </svg>366      <div>More</div>367    </div>368    <div class="nav-item" style="position: relative;">369      <svg class="icon" viewBox="0 0 24 24">370        <path d="M6 6h15l-2 7H7L6 6z" fill="none" stroke="#444" stroke-width="2"></path>371        <circle cx="9" cy="19" r="2" fill="#444"></circle>372        <circle cx="17" cy="19" r="2" fill="#444"></circle>373      </svg>374      <div>Cart</div>375      <div class="badge">1</div>376    </div>377    <div class="nav-item">378      <svg class="icon" viewBox="0 0 24 24">379        <path d="M4 7h16M4 12h16M4 17h16" stroke="#444" stroke-width="2" stroke-linecap="round"></path>380      </svg>381      <div>Menu</div>382    </div>383  </div>384 385  <div class="gesture"></div>386</div>387</body>388</html>