GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Shop - Collaborations</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#ffffff;10  }11 12  /* Status bar */13  .status-bar {14    height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;15    color:#222; font-weight:600; font-size:36px;16  }17  .status-right { display:flex; align-items:center; gap:22px; }18  .dot { width:10px; height:10px; background:#666; border-radius:50%; display:inline-block; }19 20  /* Top search/header row */21  .top-search {22    height:120px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;23    border-bottom:1px solid #eee;24  }25  .search-left { display:flex; align-items:center; gap:24px; color:#777; font-size:38px; }26  .camera-btn { width:70px; height:70px; border-radius:12px; display:flex; align-items:center; justify-content:center; }27  .icon { width:48px; height:48px; }28  .icon svg { width:100%; height:100%; }29 30  /* Page title */31  .page-title {32    font-size:86px; font-weight:800; color:#111;33    padding:32px; padding-top:28px;34  }35 36  /* Tabs */37  .tabs {38    display:flex; gap:48px; padding:0 32px; border-bottom:1px solid #e9e9e9;39  }40  .tab { padding:24px 0; font-size:40px; color:#6f6f76; font-weight:700; }41  .tab.active { color:#111; position:relative; }42  .tab.active::after {43    content:""; position:absolute; left:0; bottom:-1px; width:100%; height:8px; background:#b68b3f; border-radius:4px;44  }45 46  /* List */47  .list { padding:24px 0; }48  .item {49    display:flex; align-items:center; padding:24px 32px; border-bottom:1px solid #ededed;50  }51  .thumb {52    width:210px; height:210px; background:#E0E0E0; border:1px solid #BDBDBD;53    display:flex; justify-content:center; align-items:center; color:#757575; font-size:30px; text-align:center; border-radius:8px;54  }55  .item-content { flex:1; padding:0 28px; }56  .item-title { font-size:52px; font-weight:800; color:#1a1a1a; }57  .chevron { width:50px; height:50px; color:#777; }58 59  /* Bottom nav */60  .bottom-nav {61    position:absolute; bottom:0; left:0; right:0; height:170px;62    border-top:1px solid #e6e6e6; background:#fff;63    display:flex; align-items:center; justify-content:space-around;64  }65  .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#80808a; font-size:34px; }66  .nav-item .nav-icon { width:64px; height:64px; }67  .nav-item.active { color:#111; font-weight:800; }68  .badge {69    position:absolute; right:42px; bottom:112px;70    background:#c9a16a; color:#fff; font-size:32px; font-weight:700;71    width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center;72    box-shadow:0 2px 4px rgba(0,0,0,0.15);73  }74</style>75</head>76<body>77<div id="render-target">78 79  <!-- Status bar -->80  <div class="status-bar">81    <div>12:33</div>82    <div class="status-right">83      <span class="dot"></span>84      <span class="dot"></span>85      <span class="dot"></span>86      <!-- WiFi icon -->87      <div class="icon">88        <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">89          <path d="M2 9c5-4 15-4 20 0"></path>90          <path d="M5 12c4-3 10-3 14 0"></path>91          <path d="M8 15c3-2 5-2 8 0"></path>92          <circle cx="12" cy="18" r="1.6" fill="#333"></circle>93        </svg>94      </div>95      <!-- Battery icon -->96      <div class="icon">97        <svg viewBox="0 0 28 24" fill="none" stroke="#333" stroke-width="2">98          <rect x="2" y="6" width="20" height="12" rx="2"></rect>99          <rect x="22.5" y="9" width="3" height="6" rx="1" fill="#333"></rect>100          <rect x="4" y="8" width="14" height="8" fill="#333"></rect>101        </svg>102      </div>103    </div>104  </div>105 106  <!-- Search row -->107  <div class="top-search">108    <div class="search-left">109      <div class="icon">110        <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">111          <circle cx="11" cy="11" r="7"></circle>112          <path d="M21 21l-5-5"></path>113        </svg>114      </div>115      <div>Search...</div>116    </div>117    <div class="camera-btn">118      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">119        <rect x="3" y="6" width="18" height="13" rx="2"></rect>120        <path d="M8 6l2-2h4l2 2"></path>121        <circle cx="12" cy="12" r="3.5"></circle>122      </svg>123    </div>124  </div>125 126  <!-- Title -->127  <div class="page-title">SHOP</div>128 129  <!-- Tabs -->130  <div class="tabs">131    <div class="tab">NEW</div>132    <div class="tab">CLASSICS</div>133    <div class="tab active">COLLABORATIONS</div>134    <div class="tab">SPORT</div>135    <div class="tab">SALE</div>136  </div>137 138  <!-- List of collaborations -->139  <div class="list">140 141    <div class="item">142      <div class="thumb">[IMG: Model in green outfit outdoors]</div>143      <div class="item-content">144        <div class="item-title">SHOP ALL COLLABORATIONS</div>145      </div>146      <div class="chevron">147        <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">148          <path d="M9 6l6 6-6 6"></path>149        </svg>150      </div>151    </div>152 153    <div class="item">154      <div class="thumb">[IMG: Streetwear duo]</div>155      <div class="item-content">156        <div class="item-title">SELECT</div>157      </div>158      <div class="chevron">159        <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">160          <path d="M9 6l6 6-6 6"></path>161        </svg>162      </div>163    </div>164 165    <div class="item">166      <div class="thumb">[IMG: Group in pastel outfits]</div>167      <div class="item-content">168        <div class="item-title">PARTNERSHIPS</div>169      </div>170      <div class="chevron">171        <svg viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2">172          <path d="M9 6l6 6-6 6"></path>173        </svg>174      </div>175    </div>176 177    <!-- Spacer to allow scroll feeling -->178    <div style="height:820px;"></div>179  </div>180 181  <!-- Bottom navigation -->182  <div class="bottom-nav">183    <div class="nav-item">184      <div class="nav-icon">185        <svg viewBox="0 0 24 24" fill="none" stroke="#80808a" stroke-width="2">186          <path d="M3 11l9-7 9 7"></path>187          <path d="M5 10v10h14V10"></path>188        </svg>189      </div>190      <div>HOME</div>191    </div>192    <div class="nav-item">193      <div class="nav-icon">194        <svg viewBox="0 0 24 24" fill="none" stroke="#80808a" stroke-width="2">195          <path d="M5 4h14v5H5z"></path>196          <path d="M5 13h14v7H5z"></path>197        </svg>198      </div>199      <div>DROPS</div>200    </div>201    <div class="nav-item active">202      <div class="nav-icon">203        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">204          <circle cx="12" cy="12" r="9"></circle>205          <path d="M8 11h8M8 15h6"></path>206        </svg>207      </div>208      <div>SHOP</div>209    </div>210    <div class="nav-item">211      <div class="nav-icon">212        <svg viewBox="0 0 24 24" fill="none" stroke="#80808a" stroke-width="2">213          <path d="M6 6h15l-2 10H8L6 6z"></path>214          <circle cx="9" cy="20" r="1.5"></circle>215          <circle cx="17" cy="20" r="1.5"></circle>216        </svg>217      </div>218      <div>CART</div>219    </div>220    <div class="nav-item">221      <div class="nav-icon">222        <svg viewBox="0 0 24 24" fill="none" stroke="#80808a" stroke-width="2">223          <circle cx="12" cy="8" r="4"></circle>224          <path d="M4 20c2-4 14-4 16 0"></path>225        </svg>226      </div>227      <div>ACCOUNT</div>228    </div>229    <div class="badge">1</div>230  </div>231 232</div>233</body>234</html>