GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>PUMA - Collaborations Shop (Mock)</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #FFFFFF;14    font-family: Arial, Helvetica, sans-serif;15    color: #1b1b1b;16  }17 18  /* Status bar */19  .status-bar {20    height: 90px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #222;26    font-weight: 600;27    font-size: 34px;28  }29  .status-left, .status-right {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .dot {35    width: 12px; height: 12px; background:#222; border-radius:50%;36  }37  .icon-20 {38    width: 40px; height: 40px;39  }40  .icon-24 {41    width: 48px; height: 48px;42  }43 44  /* Search row */45  .search-row {46    height: 120px;47    padding: 0 36px;48    display: flex;49    align-items: center;50    justify-content: space-between;51    border-bottom: 1px solid #e9e9e9;52  }53  .search-box {54    flex: 1;55    margin-right: 20px;56    height: 80px;57    border-radius: 40px;58    background: #f5f5f5;59    display: flex;60    align-items: center;61    padding: 0 26px;62    gap: 20px;63    color: #888;64    font-size: 34px;65  }66  .circle-btn {67    width: 72px; height: 72px; border-radius: 50%;68    display: flex; align-items: center; justify-content: center;69    background: #f5f5f5;70  }71 72  /* Title */73  .page-title {74    padding: 32px 36px 18px 36px;75    font-size: 72px;76    font-weight: 800;77    letter-spacing: 1px;78  }79 80  /* Tabs */81  .tabs {82    display: flex;83    gap: 42px;84    padding: 0 36px;85    border-bottom: 2px solid #eaeaea;86  }87  .tab {88    position: relative;89    padding: 26px 4px;90    font-size: 38px;91    color: #4b4b4b;92    letter-spacing: 1px;93    text-transform: uppercase;94    white-space: nowrap;95  }96  .tab.active {97    color: #1d1d1f;98    font-weight: 700;99  }100  .tab.active .underline {101    position: absolute;102    left: 0; right: 0; bottom: -2px;103    height: 8px;104    background: #a8895e;105    border-radius: 4px;106  }107 108  /* List */109  .list {110    padding: 20px 0 200px 0;111  }112  .list-item {113    display: flex;114    align-items: center;115    gap: 36px;116    padding: 24px 36px;117    border-bottom: 1px solid #efefef;118  }119  .thumb {120    width: 210px; height: 210px;121    background: #E0E0E0;122    border: 1px solid #BDBDBD;123    display: flex; justify-content: center; align-items: center;124    color: #757575; font-size: 28px; text-align: center;125  }126  .item-text {127    flex: 1;128    font-size: 44px;129    font-weight: 700;130    color: #1d1d1f;131  }132  .chev {133    width: 48px; height: 48px;134  }135 136  /* Bottom nav */137  .bottom-nav {138    position: absolute;139    left: 0; right: 0; bottom: 0;140    height: 160px;141    border-top: 1px solid #e6e6e6;142    background: #ffffff;143    display: flex;144    justify-content: space-around;145    align-items: center;146    padding-bottom: 10px;147  }148  .nav-item {149    width: 160px;150    display: flex;151    flex-direction: column;152    align-items: center;153    gap: 10px;154    color: #6d6d6d;155    font-size: 30px;156    font-weight: 700;157  }158  .nav-item .ico {159    width: 56px; height: 56px;160  }161  .nav-item.active {162    color: #0f0f0f;163  }164  .nav-item.active .ico {165    width: 72px; height: 72px;166  }167  .badge {168    position: absolute;169    right: 62px;170    bottom: 100px;171    width: 52px; height: 52px; border-radius: 26px;172    background: #caa977;173    color: #fff; font-weight: 800; font-size: 28px;174    display: flex; align-items: center; justify-content: center;175    border: 3px solid #fff;176  }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Status Bar -->183  <div class="status-bar">184    <div class="status-left">185      <div>12:35</div>186      <div class="dot"></div>187      <div class="dot"></div>188      <div class="dot"></div>189    </div>190    <div class="status-right">191      <!-- WiFi -->192      <svg class="icon-24" viewBox="0 0 24 24">193        <path d="M12 18.5a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 12 18.5zm7.5-3.6a12 12 0 0 0-15 0l1.5 1.8a9.5 9.5 0 0 1 12 0l1.5-1.8zm3-4a16 16 0 0 0-21 0l1.6 1.9a13.5 13.5 0 0 1 17.8 0l1.6-1.9z" fill="#222"/>194      </svg>195      <!-- Battery -->196      <svg class="icon-24" viewBox="0 0 24 24">197        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#222" stroke-width="2"/>198        <rect x="4" y="8" width="14" height="8" fill="#222"/>199        <rect x="20" y="10" width="2" height="4" fill="#222"/>200      </svg>201    </div>202  </div>203 204  <!-- Search Row -->205  <div class="search-row">206    <div class="search-box">207      <svg class="icon-20" viewBox="0 0 24 24">208        <path d="M10 2a8 8 0 1 0 5.3 14l4.4 4.4 1.4-1.4-4.4-4.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12A6 6 0 0 1 10 4z" fill="#666"/>209      </svg>210      <div>Search...</div>211    </div>212    <div class="circle-btn">213      <svg class="icon-20" viewBox="0 0 24 24">214        <path d="M4 7h3l1-2h8l1 2h3v12H4V7zm8 10a5 5 0 1 0 0-10 5 5 0 0 0 0 10z" fill="#222"/>215      </svg>216    </div>217  </div>218 219  <!-- Page Title -->220  <div class="page-title">SHOP</div>221 222  <!-- Tabs -->223  <div class="tabs">224    <div class="tab">WOMEN</div>225    <div class="tab">MEN</div>226    <div class="tab">KIDS</div>227    <div class="tab">CLASSICS</div>228    <div class="tab active">COLLABORATIONS229      <div class="underline"></div>230    </div>231  </div>232 233  <!-- List -->234  <div class="list">235    <!-- Item 1 -->236    <div class="list-item">237      <div class="thumb">[IMG: Green outfit collaboration banner]</div>238      <div class="item-text">SHOP ALL COLLABORATIONS</div>239      <svg class="chev" viewBox="0 0 24 24">240        <path d="M8 4l8 8-8 8" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>241      </svg>242    </div>243 244    <!-- Item 2 -->245    <div class="list-item">246      <div class="thumb">[IMG: Streetwear duo in jackets]</div>247      <div class="item-text">SELECT</div>248      <svg class="chev" viewBox="0 0 24 24">249        <path d="M8 4l8 8-8 8" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>250      </svg>251    </div>252 253    <!-- Item 3 -->254    <div class="list-item">255      <div class="thumb">[IMG: Group in pastel apparel]</div>256      <div class="item-text">PARTNERSHIPS</div>257      <svg class="chev" viewBox="0 0 24 24">258        <path d="M8 4l8 8-8 8" fill="none" stroke="#222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>259      </svg>260    </div>261  </div>262 263  <!-- Bottom Navigation -->264  <div class="bottom-nav">265    <div class="nav-item">266      <svg class="ico" viewBox="0 0 24 24">267        <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" fill="#6d6d6d"/>268      </svg>269      <div>HOME</div>270    </div>271 272    <div class="nav-item">273      <svg class="ico" viewBox="0 0 24 24">274        <path d="M7 2h10v4H7V2zm-3 6h16v12H4V8zm4 3h3v3H8v-3zm5 0h3v3h-3v-3z" fill="#6d6d6d"/>275      </svg>276      <div>DROPS</div>277    </div>278 279    <div class="nav-item active">280      <svg class="ico" viewBox="0 0 24 24">281        <path d="M10 2a8 8 0 1 0 5.3 14l4.4 4.4 1.4-1.4-4.4-4.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12A6 6 0 0 1 10 4z" fill="#0f0f0f"/>282      </svg>283      <div>SHOP</div>284    </div>285 286    <div class="nav-item">287      <svg class="ico" viewBox="0 0 24 24">288        <path d="M6 6h14l-2 10H7L5 4H2v2h3l1 6h12" fill="#6d6d6d"/>289      </svg>290      <div>CART</div>291    </div>292 293    <div class="nav-item" style="position: relative;">294      <svg class="ico" viewBox="0 0 24 24">295        <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.6-8 6v2h16v-2c0-3.4-3.6-6-8-6z" fill="#6d6d6d"/>296      </svg>297      <div>ACCOUNT</div>298    </div>299    <div class="badge">1</div>300  </div>301 302</div>303</body>304</html>