GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Shopping UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #cfcfcf;25    color: #000;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    box-sizing: border-box;31    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;32    font-size: 40px;33  }34  .status-icons { display: flex; gap: 28px; align-items: center; }35 36  /* Navigation bar */37  .nav-bar {38    position: absolute;39    top: 120px;40    left: 0;41    width: 1080px;42    height: 150px;43    background: #fff;44    display: flex;45    align-items: center;46    justify-content: space-between;47    padding: 0 36px;48    box-sizing: border-box;49    border-bottom: 1px solid #eee;50  }51  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }52 53  /* Section rows */54  .section-row {55    position: absolute;56    left: 0;57    width: 1080px;58    padding: 34px 36px;59    box-sizing: border-box;60    display: flex;61    align-items: center;62    justify-content: space-between;63    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;64    color: #222;65    border-bottom: 1px solid #eee;66  }67  .section-row h3 {68    margin: 0;69    font-size: 44px;70    font-weight: 700;71    letter-spacing: 0.2px;72  }73 74  /* Content area */75  .content {76    position: absolute;77    top: 420px; /* below status + nav + two section rows */78    left: 0;79    right: 0;80    bottom: 0;81    padding: 0 36px;82    box-sizing: border-box;83    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;84    overflow: hidden;85  }86  .title {87    font-size: 56px;88    font-weight: 700;89    color: #222;90    margin: 20px 0 36px 0;91  }92 93  .card-row {94    display: flex;95    gap: 36px;96  }97  .product-card {98    width: 324px;99  }100  .img-box {101    width: 324px;102    height: 460px;103    background: #E0E0E0;104    border: 1px solid #BDBDBD;105    display: flex;106    align-items: center;107    justify-content: center;108    color: #757575;109    font-size: 32px;110    position: relative;111  }112  .heart-overlay {113    position: absolute;114    right: 20px;115    bottom: 20px;116    width: 72px;117    height: 72px;118  }119  .product-name {120    margin-top: 30px;121    font-size: 42px;122    color: #222;123    font-weight: 600;124  }125  .price-line {126    margin-top: 10px;127    font-size: 42px;128    display: flex;129    gap: 16px;130    align-items: baseline;131  }132  .sale { color: #e53935; font-weight: 700; }133  .strike { color: #666; text-decoration: line-through; }134 135  .subtitle {136    margin-top: 60px;137    font-size: 52px;138    font-weight: 700;139    color: #222;140  }141  .thumb-row {142    margin-top: 24px;143    display: flex;144    gap: 36px;145  }146  .thumb {147    width: 324px;148    height: 380px;149    background: #E0E0E0;150    border: 1px solid #BDBDBD;151    display: flex;152    align-items: center;153    justify-content: center;154    color: #757575;155    font-size: 30px;156  }157 158  /* Bottom CTA */159  .cta-area {160    position: absolute;161    left: 0;162    bottom: 120px;163    width: 100%;164    padding: 0 36px;165    box-sizing: border-box;166  }167  .cta-button {168    height: 140px;169    background: #111;170    border-radius: 8px;171    display: flex;172    align-items: center;173    justify-content: center;174    gap: 20px;175    color: #fff;176    font-size: 48px;177    font-weight: 600;178  }179 180  /* Home indicator */181  .home-indicator {182    position: absolute;183    bottom: 32px;184    left: 50%;185    transform: translateX(-50%);186    width: 380px;187    height: 16px;188    background: #d7d7d7;189    border-radius: 10px;190  }191</style>192</head>193<body>194<div id="render-target">195 196  <!-- Status Bar -->197  <div class="status-bar">198    <div>8:01</div>199    <div class="status-icons">200      <!-- Simple Wi-Fi icon -->201      <svg width="48" height="48" viewBox="0 0 48 48">202        <path d="M8 18c8-8 24-8 32 0" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round"/>203        <path d="M14 24c6-6 14-6 20 0" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round"/>204        <circle cx="24" cy="30" r="3" fill="#000"/>205      </svg>206      <!-- Battery icon -->207      <svg width="48" height="48" viewBox="0 0 48 48">208        <rect x="6" y="12" width="32" height="24" rx="4" fill="none" stroke="#000" stroke-width="3"/>209        <rect x="10" y="16" width="24" height="16" rx="2" fill="#000"/>210        <rect x="40" y="18" width="4" height="12" rx="1" fill="#000"/>211      </svg>212    </div>213  </div>214 215  <!-- Navigation Bar -->216  <div class="nav-bar">217    <!-- Back Arrow -->218    <div class="icon-btn">219      <svg width="56" height="56" viewBox="0 0 48 48">220        <path d="M28 10 L14 24 L28 38" fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>221      </svg>222    </div>223    <!-- Bag Icon -->224    <div class="icon-btn">225      <svg width="56" height="56" viewBox="0 0 48 48">226        <path d="M12 18h24v22H12z" fill="none" stroke="#000" stroke-width="3" />227        <path d="M16 18c0-6 16-6 16 0" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round"/>228      </svg>229    </div>230  </div>231 232  <!-- Section: Materials & Suppliers -->233  <div class="section-row" style="top: 270px;">234    <h3>Materials &amp; Suppliers</h3>235    <svg width="56" height="56" viewBox="0 0 48 48">236      <path d="M24 42 L10 28 C6 24 6 18 10 14 C14 10 20 10 24 14 C28 10 34 10 38 14 C42 18 42 24 38 28 L24 42" fill="none" stroke="#000" stroke-width="3"/>237    </svg>238  </div>239 240  <!-- Section: Care guide -->241  <div class="section-row" style="top: 360px;">242    <h3>Care guide</h3>243    <svg width="56" height="56" viewBox="0 0 48 48">244      <path d="M12 18 L24 30 L36 18" fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>245    </svg>246  </div>247 248  <!-- Content -->249  <div class="content">250    <div class="title">Select favorites</div>251 252    <div class="card-row">253      <!-- Card 1 -->254      <div class="product-card">255        <div class="img-box">256          [IMG: Chunky Sneakers]257          <div class="heart-overlay">258            <svg width="72" height="72" viewBox="0 0 48 48">259              <path d="M24 42 L10 28 C6 24 6 18 10 14 C14 10 20 10 24 14 C28 10 34 10 38 14 C42 18 42 24 38 28 L24 42" fill="none" stroke="#000" stroke-width="3"/>260            </svg>261          </div>262        </div>263        <div class="product-name">Chunky Sneakers</div>264        <div class="price-line">265          <span class="sale">$34.99</span>266          <span class="strike">$49.99</span>267        </div>268      </div>269 270      <!-- Card 2 -->271      <div class="product-card">272        <div class="img-box">273          [IMG: Oversized Jacket]274          <div class="heart-overlay">275            <svg width="72" height="72" viewBox="0 0 48 48">276              <path d="M24 42 L10 28 C6 24 6 18 10 14 C14 10 20 10 24 14 C28 10 34 10 38 14 C42 18 42 24 38 28 L24 42" fill="none" stroke="#000" stroke-width="3"/>277            </svg>278          </div>279        </div>280        <div class="product-name">Oversized Jacket</div>281        <div class="price-line">282          <span class="sale">$39.99</span>283          <span class="strike">$49.99</span>284        </div>285      </div>286 287      <!-- Card 3 -->288      <div class="product-card">289        <div class="img-box">290          [IMG: Chunky Sneakers]291          <div class="heart-overlay">292            <svg width="72" height="72" viewBox="0 0 48 48">293              <path d="M24 42 L10 28 C6 24 6 18 10 14 C14 10 20 10 24 14 C28 10 34 10 38 14 C42 18 42 24 38 28 L24 42" fill="none" stroke="#000" stroke-width="3"/>294            </svg>295          </div>296        </div>297        <div class="product-name">Chunky Sneakers</div>298        <div class="price-line">299          <span>$49.99</span>300        </div>301      </div>302    </div>303 304    <div class="subtitle">Others also bought</div>305    <div class="thumb-row">306      <div class="thumb">[IMG: Blue Pants]</div>307      <div class="thumb">[IMG: Black Cardigan]</div>308      <div class="thumb">[IMG: Gray Hoodie]</div>309    </div>310  </div>311 312  <!-- Bottom CTA -->313  <div class="cta-area">314    <div class="cta-button">315      <svg width="52" height="52" viewBox="0 0 48 48">316        <path d="M12 18h24v22H12z" fill="none" stroke="#fff" stroke-width="3" />317        <path d="M16 18c0-6 16-6 16 0" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/>318      </svg>319      <span>Add</span>320    </div>321  </div>322 323  <!-- Home Indicator -->324  <div class="home-indicator"></div>325</div>326</body>327</html>