GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>PUMA Shop UI Mock</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #FFFFFF;18    color: #111;19  }20 21  /* Top status bar */22  .status-bar {23    height: 110px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    font-weight: 600;29    font-size: 36px;30    color: #222;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .icon {38    width: 42px;39    height: 42px;40    display: inline-flex;41    align-items: center;42    justify-content: center;43  }44 45  /* Search row */46  .search-row {47    padding: 20px 36px 28px;48    border-bottom: 1px solid #e6e6e6;49  }50  .search-box {51    display: flex;52    align-items: center;53    gap: 20px;54    border: 1px solid #D8D8D8;55    border-radius: 40px;56    padding: 22px 28px;57    height: 88px;58    width: 880px;59    color: #777;60    font-size: 34px;61  }62  .barcode {63    margin-left: auto;64    width: 60px;65    height: 60px;66  }67 68  /* Title */69  .title {70    font-size: 64px;71    font-weight: 800;72    padding: 40px 36px 24px;73  }74 75  /* Tabs */76  .tabs {77    display: flex;78    gap: 52px;79    padding: 0 36px 24px;80    border-bottom: 1px solid #eee;81    font-size: 38px;82    font-weight: 700;83  }84  .tab {85    color: #666;86    padding-bottom: 18px;87  }88  .tab.active {89    color: #111;90    border-bottom: 8px solid #C8A56A;91  }92 93  /* List sections */94  .list {95    padding-top: 12px;96  }97  .list-item {98    display: flex;99    align-items: center;100    padding: 34px 36px;101    border-bottom: 1px solid #eee;102  }103  .thumb {104    width: 180px;105    height: 180px;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    display: flex;109    align-items: center;110    justify-content: center;111    color: #757575;112    font-size: 26px;113    text-align: center;114  }115  .item-text {116    font-size: 44px;117    font-weight: 800;118    margin-left: 28px;119    letter-spacing: 0.3px;120  }121  .chevron {122    margin-left: auto;123    width: 44px;124    height: 44px;125  }126 127  /* Featured row (logo only) */128  .logo-box {129    width: 170px;130    height: 90px;131    background: #F5F5F5;132    border: 1px solid #D0D0D0;133    display: flex;134    align-items: center;135    justify-content: center;136    color: #555;137    font-weight: 700;138    font-size: 28px;139  }140 141  /* Bottom navigation */142  .bottom-nav {143    position: absolute;144    bottom: 120px;145    left: 0;146    right: 0;147    height: 200px;148    border-top: 1px solid #e6e6e6;149    background: #fff;150    display: flex;151    align-items: center;152    justify-content: space-around;153    padding-bottom: 8px;154  }155  .nav-item {156    width: 180px;157    display: flex;158    align-items: center;159    justify-content: center;160    flex-direction: column;161    gap: 16px;162    color: #7a7a7a;163    font-size: 30px;164    font-weight: 700;165  }166  .nav-item.active {167    color: #111;168  }169  .nav-icon {170    width: 64px; height: 64px;171  }172  .badge {173    position: absolute;174    right: 36px;175    bottom: 178px;176    width: 60px;177    height: 60px;178    background: #C8A56A;179    color: #fff;180    border-radius: 50%;181    display: flex;182    align-items: center;183    justify-content: center;184    font-weight: 800;185    font-size: 30px;186    box-shadow: 0 2px 6px rgba(0,0,0,0.15);187  }188 189  /* Gesture bar */190  .gesture {191    position: absolute;192    bottom: 48px;193    left: 50%;194    transform: translateX(-50%);195    width: 320px;196    height: 14px;197    background: #222;198    border-radius: 14px;199    opacity: 0.7;200  }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Status bar -->207  <div class="status-bar">208    <div>8:20</div>209    <div class="status-right">210      <!-- simple dots mimicking indicators -->211      <svg class="icon" viewBox="0 0 24 24">212        <circle cx="12" cy="12" r="8" fill="#444"/>213      </svg>214      <svg class="icon" viewBox="0 0 24 24">215        <rect x="3" y="6" width="4" height="12" fill="#444"/>216        <rect x="9" y="4" width="4" height="14" fill="#444"/>217        <rect x="15" y="2" width="4" height="16" fill="#444"/>218      </svg>219      <!-- wifi -->220      <svg class="icon" viewBox="0 0 24 24">221        <path d="M2 9c4-3 16-3 20 0" stroke="#444" stroke-width="2" fill="none"/>222        <path d="M5 12c3-2 11-2 14 0" stroke="#444" stroke-width="2" fill="none"/>223        <path d="M8 15c2-1 6-1 8 0" stroke="#444" stroke-width="2" fill="none"/>224        <circle cx="12" cy="18" r="2" fill="#444"/>225      </svg>226      <!-- battery -->227      <svg class="icon" viewBox="0 0 36 24">228        <rect x="2" y="6" width="28" height="12" rx="2" ry="2" stroke="#444" stroke-width="2" fill="none"/>229        <rect x="31" y="9" width="3" height="6" fill="#444"/>230        <rect x="4" y="8" width="22" height="8" fill="#444"/>231      </svg>232    </div>233  </div>234 235  <!-- Search bar row -->236  <div class="search-row">237    <div style="display:flex; align-items:center;">238      <div class="search-box">239        <!-- magnifier -->240        <svg class="icon" viewBox="0 0 24 24">241          <circle cx="10" cy="10" r="7" stroke="#777" stroke-width="2" fill="none"/>242          <line x1="16" y1="16" x2="22" y2="22" stroke="#777" stroke-width="2"/>243        </svg>244        <div>Search...</div>245      </div>246      <!-- barcode icon -->247      <svg class="barcode" viewBox="0 0 24 24">248        <rect x="2" y="2" width="3" height="20" fill="#333"/>249        <rect x="7" y="2" width="2" height="20" fill="#777"/>250        <rect x="11" y="2" width="3" height="20" fill="#333"/>251        <rect x="16" y="2" width="2" height="20" fill="#777"/>252        <rect x="20" y="2" width="2" height="20" fill="#333"/>253      </svg>254    </div>255  </div>256 257  <!-- Title -->258  <div class="title">SHOP</div>259 260  <!-- Tabs -->261  <div class="tabs">262    <div class="tab active">WOMEN</div>263    <div class="tab">MEN</div>264    <div class="tab">KIDS</div>265    <div class="tab">FENTY X PUMA</div>266    <div class="tab">COLLECTIONS</div>267  </div>268 269  <!-- List -->270  <div class="list">271 272    <!-- Featured -->273    <div class="list-item">274      <div class="logo-box">PUMA</div>275      <div class="item-text">FEATURED</div>276      <svg class="chevron" viewBox="0 0 24 24">277        <polyline points="8,4 16,12 8,20" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>278      </svg>279    </div>280 281    <div class="list-item">282      <div class="thumb">[IMG: Woman Jacket]</div>283      <div class="item-text">SHOP ALL WOMEN</div>284      <svg class="chevron" viewBox="0 0 24 24">285        <polyline points="8,4 16,12 8,20" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>286      </svg>287    </div>288 289    <div class="list-item">290      <div class="thumb">[IMG: Sneakers]</div>291      <div class="item-text">SHOES</div>292      <svg class="chevron" viewBox="0 0 24 24">293        <polyline points="8,4 16,12 8,20" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>294      </svg>295    </div>296 297    <div class="list-item">298      <div class="thumb">[IMG: White Tee]</div>299      <div class="item-text">CLOTHING</div>300      <svg class="chevron" viewBox="0 0 24 24">301        <polyline points="8,4 16,12 8,20" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>302      </svg>303    </div>304 305    <div class="list-item">306      <div class="thumb">[IMG: Accessories - Beanie]</div>307      <div class="item-text">ACCESSORIES</div>308      <svg class="chevron" viewBox="0 0 24 24">309        <polyline points="8,4 16,12 8,20" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>310      </svg>311    </div>312 313    <div class="list-item">314      <div class="thumb">[IMG: Sportswear]</div>315      <div class="item-text">SPORTS</div>316      <svg class="chevron" viewBox="0 0 24 24">317        <polyline points="8,4 16,12 8,20" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>318      </svg>319    </div>320 321  </div>322 323  <!-- Bottom navigation -->324  <div class="bottom-nav">325    <div class="nav-item">326      <svg class="nav-icon" viewBox="0 0 24 24">327        <path d="M3 11l9-8 9 8v9H15v-6H9v6H3z" fill="#666"/>328      </svg>329      <div>HOME</div>330    </div>331    <div class="nav-item">332      <svg class="nav-icon" viewBox="0 0 24 24">333        <rect x="3" y="4" width="18" height="16" rx="2" fill="#666"/>334        <rect x="6" y="8" width="12" height="9" fill="#fff"/>335        <rect x="6" y="4" width="3" height="3" fill="#444"/>336        <rect x="15" y="4" width="3" height="3" fill="#444"/>337      </svg>338      <div>DROPS</div>339    </div>340    <div class="nav-item active">341      <svg class="nav-icon" viewBox="0 0 24 24">342        <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2" fill="none"/>343        <line x1="16" y1="16" x2="22" y2="22" stroke="#111" stroke-width="2"/>344      </svg>345      <div>SHOP</div>346    </div>347    <div class="nav-item">348      <svg class="nav-icon" viewBox="0 0 24 24">349        <path d="M3 6h18l-2 12H7L3 6z" fill="#666"/>350        <circle cx="9" cy="20" r="2" fill="#666"/>351        <circle cx="17" cy="20" r="2" fill="#666"/>352      </svg>353      <div>CART</div>354    </div>355    <div class="nav-item">356      <svg class="nav-icon" viewBox="0 0 24 24">357        <circle cx="12" cy="7" r="4" fill="#666"/>358        <path d="M4 22c0-4.418 3.582-8 8-8s8 3.582 8 8" fill="#666"/>359      </svg>360      <div>ACCOUNT</div>361    </div>362  </div>363 364  <!-- Notification badge -->365  <div class="badge">9</div>366 367  <!-- Gesture bar -->368  <div class="gesture"></div>369 370</div>371</body>372</html>