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 App 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    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #111;17  }18 19  .statusbar {20    height: 110px;21    padding: 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #8e8e8e;26    font-weight: 700;27    font-size: 44px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 26px;33  }34  .nav-tabs {35    padding: 10px 40px 0 40px;36    display: flex;37    gap: 58px;38    font-size: 36px;39    color: #111;40  }41  .nav-tabs .tab {42    letter-spacing: 1px;43  }44  .nav-tabs .active {45    font-weight: 700;46    position: relative;47  }48  .nav-tabs .active::after {49    content: "";50    position: absolute;51    left: 0;52    bottom: -12px;53    width: 62px;54    height: 5px;55    background: #111;56    border-radius: 2px;57  }58 59  .search-wrap {60    margin: 58px 40px 0 40px;61  }62  .search-input {63    width: 100%;64    border: none;65    border-bottom: 2px solid #e3e3e3;66    outline: none;67    padding: 26px 0 28px 0;68    font-size: 34px;69    letter-spacing: 1px;70    color: #6f6f6f;71  }72 73  .quick-actions {74    display: flex;75    align-items: center;76    gap: 110px;77    padding: 36px 40px 12px 40px;78    color: #2a2a2a;79  }80  .action {81    display: flex;82    align-items: center;83    gap: 22px;84    font-size: 30px;85    letter-spacing: 1px;86  }87  .icon {88    width: 48px;89    height: 48px;90  }91 92  .section-title {93    padding: 40px 40px 20px 40px;94    margin-top: 26px;95    font-size: 34px;96    letter-spacing: 2px;97    font-weight: 700;98  }99 100  .grid {101    display: grid;102    grid-template-columns: 1fr 1fr;103    gap: 34px;104    padding: 0 40px 180px 40px;105  }106  .card {107    background: #fff;108    border: 1px solid #f0f0f0;109  }110  .product-img {111    width: 100%;112    height: 700px;113    background: #E0E0E0;114    border-bottom: 1px solid #BDBDBD;115    display: flex;116    justify-content: center;117    align-items: center;118    color: #757575;119    font-size: 28px;120    text-align: center;121  }122  .plus {123    display: flex;124    align-items: center;125    justify-content: center;126    height: 70px;127    color: #6b6b6b;128    font-size: 42px;129  }130  .details {131    padding: 26px 24px 34px 24px;132  }133  .stock {134    color: #8d8d8d;135    font-size: 24px;136    text-transform: uppercase;137    margin-bottom: 8px;138    letter-spacing: 1px;139  }140  .name {141    font-size: 32px;142    letter-spacing: 0.5px;143    margin-bottom: 16px;144  }145  .old-price {146    color: #8d8d8d;147    text-decoration: line-through;148    font-size: 26px;149    margin-bottom: 10px;150  }151  .price-badge {152    display: inline-block;153    background: #ffea00;154    color: #111;155    font-weight: 700;156    font-size: 28px;157    padding: 8px 12px;158  }159 160  .bottom-nav {161    position: absolute;162    left: 0;163    right: 0;164    bottom: 0;165    height: 170px;166    background: #fff;167    border-top: 1px solid #e9e9e9;168    display: flex;169    align-items: center;170    justify-content: space-around;171    padding: 0 20px;172  }173  .bn-item {174    display: flex;175    flex-direction: column;176    align-items: center;177    gap: 10px;178    font-size: 24px;179    color: #111;180  }181  .center-label {182    font-size: 32px;183    letter-spacing: 2px;184  }185  .bag-count {186    position: absolute;187    top: -6px;188    right: -14px;189    background: #000;190    color: #fff;191    width: 32px;192    height: 32px;193    border-radius: 16px;194    display: flex;195    align-items: center;196    justify-content: center;197    font-size: 18px;198  }199  .home-indicator {200    position: absolute;201    bottom: 10px;202    left: 50%;203    transform: translateX(-50%);204    width: 360px;205    height: 10px;206    background: #bdbdbd;207    border-radius: 6px;208    opacity: 0.7;209  }210</style>211</head>212<body>213<div id="render-target">214  <!-- Status bar -->215  <div class="statusbar">216    <div>12:49</div>217    <div class="status-icons">218      <!-- WiFi icon -->219      <svg class="icon" viewBox="0 0 24 24" fill="#8e8e8e">220        <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-6a10 10 0 0 0-12 0l1.5 1.5a8 8 0 0 1 9 0L18 14zm4-4a16 16 0 0 0-20 0L3.5 11a14 14 0 0 1 17 0L22 10z"/>221      </svg>222      <!-- Battery icon -->223      <svg class="icon" viewBox="0 0 28 24" fill="none" stroke="#8e8e8e" stroke-width="2">224        <rect x="2" y="5" width="20" height="14" rx="2"></rect>225        <rect x="4" y="7" width="16" height="10" fill="#8e8e8e"></rect>226        <rect x="22" y="9" width="4" height="6" rx="1" fill="#8e8e8e" stroke="none"></rect>227      </svg>228    </div>229  </div>230 231  <!-- Top navigation tabs -->232  <div class="nav-tabs">233    <div class="tab active">WOMAN</div>234    <div class="tab">MAN</div>235    <div class="tab">KIDS</div>236    <div class="tab">HOME</div>237    <div class="tab">MASSIMO DUTTI</div>238  </div>239 240  <!-- Search -->241  <div class="search-wrap">242    <input class="search-input" placeholder="SEARCH FOR AN ITEM, COLOR, COLLECTION…" />243  </div>244 245  <!-- Quick actions -->246  <div class="quick-actions">247    <div class="action">248      <!-- Camera -->249      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">250        <path d="M4 7h4l2-2h4l2 2h4v12H4z"></path>251        <circle cx="12" cy="13" r="4"></circle>252      </svg>253      <span>IMAGE</span>254    </div>255    <div class="action">256      <!-- Scan (barcode) -->257      <svg class="icon" viewBox="0 0 24 24" fill="#111">258        <rect x="3" y="4" width="2" height="16"/>259        <rect x="7" y="4" width="1.5" height="16"/>260        <rect x="10" y="4" width="2" height="16"/>261        <rect x="14" y="4" width="1" height="16"/>262        <rect x="17" y="4" width="2" height="16"/>263        <rect x="21" y="8" width="1" height="8"/>264      </svg>265      <span>SCAN</span>266    </div>267    <div class="action">268      <!-- Location pin -->269      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">270        <path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"></path>271        <circle cx="12" cy="10" r="2.5"></circle>272      </svg>273      <span>STORE</span>274    </div>275  </div>276 277  <!-- Section title -->278  <div class="section-title">YOU MIGHT BE INTERESTED IN</div>279 280  <!-- Product grid -->281  <div class="grid">282    <!-- Card 1 -->283    <div class="card">284      <div class="product-img">[IMG: Studded Chelsea ankle boots]</div>285      <div class="plus">+</div>286      <div class="details">287        <div class="stock">Few items left</div>288        <div class="name">STUDDED CHELSEA ANKLE BOOTS</div>289        <div class="old-price">99.90 USD</div>290        <span class="price-badge">-39%  59.99 USD</span>291      </div>292    </div>293 294    <!-- Card 2 -->295    <div class="card">296      <div class="product-img">[IMG: Wide heeled ankle boots]</div>297      <div class="plus">+</div>298      <div class="details">299        <div class="name">WIDE HEELED ANKLE BOOTS</div>300        <div class="old-price">69.90 USD</div>301        <span class="price-badge">-42%  39.99 USD</span>302      </div>303    </div>304 305    <!-- Placeholder lower cards (partial visibility in screenshot) -->306    <div class="card">307      <div class="product-img">[IMG: Ankle boots - variant]</div>308      <div class="plus">+</div>309      <div class="details">310        <div class="name">SOFT LEATHER ANKLE BOOTS</div>311        <div class="old-price">89.90 USD</div>312        <span class="price-badge">-30%  62.99 USD</span>313      </div>314    </div>315 316    <div class="card">317      <div class="product-img">[IMG: Ankle boots - variant]</div>318      <div class="plus">+</div>319      <div class="details">320        <div class="name">PLATFORM CHELSEA BOOTS</div>321        <div class="old-price">79.90 USD</div>322        <span class="price-badge">-25%  59.90 USD</span>323      </div>324    </div>325  </div>326 327  <!-- Bottom navigation -->328  <div class="bottom-nav">329    <div class="bn-item">330      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">331        <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z"></path>332      </svg>333    </div>334    <div class="bn-item">335      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">336        <circle cx="11" cy="11" r="7"></circle>337        <path d="M20 20l-3.5-3.5"></path>338      </svg>339    </div>340    <div class="center-label">MENU</div>341    <div class="bn-item">342      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">343        <circle cx="12" cy="8" r="4"></circle>344        <path d="M4 20c2-4 6-6 8-6s6 2 8 6"></path>345      </svg>346    </div>347    <div class="bn-item" style="position: relative;">348      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">349        <path d="M6 6h14l-2 12H6L4 4H2"></path>350        <circle cx="9" cy="20" r="1.5"></circle>351        <circle cx="17" cy="20" r="1.5"></circle>352      </svg>353      <div class="bag-count">0</div>354    </div>355    <div class="home-indicator"></div>356  </div>357</div>358</body>359</html>