GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Shop - Men</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #111; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 30px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #222;24    font-weight: 600;25    font-size: 34px;26  }27  .status-right {28    display: flex; align-items: center; gap: 26px;29  }30  .icon { width: 44px; height: 44px; }31 32  /* Search header */33  .search-row {34    height: 120px;35    padding: 0 30px;36    display: flex;37    align-items: center;38    gap: 24px;39    border-bottom: 1px solid #eee;40  }41  .search-box {42    flex: 1;43    height: 86px;44    border-radius: 18px;45    background: #F5F5F5;46    display: flex;47    align-items: center;48    padding: 0 24px;49    gap: 18px;50    color: #777;51    font-size: 36px;52  }53  .camera-btn {54    width: 86px; height: 86px; border-radius: 18px; background: #F5F5F5;55    display: flex; align-items: center; justify-content: center;56  }57 58  /* Title */59  .page-title {60    padding: 36px 36px 18px;61    font-size: 84px; font-weight: 800; letter-spacing: 1px;62  }63 64  /* Tabs */65  .tabs {66    display: flex; gap: 42px; padding: 0 36px 8px; overflow: hidden; align-items: center;67    border-bottom: 2px solid #EFEFEF;68  }69  .tab {70    font-size: 40px; color: #444; padding: 28px 6px 26px;71    white-space: nowrap;72  }73  .tab.active {74    color: #111; font-weight: 700; position: relative;75  }76  .tab.active::after {77    content: ""; position: absolute; left: 0; right: 0; bottom: 0;78    height: 10px; background: #b8945f; border-radius: 6px;79  }80 81  /* List items */82  .list { }83  .row {84    display: flex; align-items: center; padding: 34px 24px;85    border-bottom: 1px solid #eee;86  }87  .thumb {88    width: 220px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;89    border-radius: 10px; display: flex; align-items: center; justify-content: center;90    color: #757575; font-size: 28px; text-align: center; padding: 10px;91    margin-right: 34px;92  }93  .row-text {94    flex: 1; font-size: 48px; font-weight: 700; color: #1a1a1a;95  }96  .chev {97    width: 40px; height: 40px; margin-left: 18px;98  }99 100  /* Bottom navigation */101  .bottom-nav {102    position: absolute; bottom: 48px; left: 0; right: 0;103    height: 160px; border-top: 1px solid #eaeaea;104    display: flex; align-items: center; justify-content: space-around;105    background: #fff;106  }107  .nav-item {108    width: 180px; height: 130px; display: flex; flex-direction: column;109    align-items: center; justify-content: center; gap: 12px; color: #666;110    font-size: 30px; font-weight: 700;111  }112  .nav-item.active { color: #111; }113  .badge {114    position: absolute; right: 110px; bottom: 130px;115    width: 56px; height: 56px; background: #d2bb8a; color: #fff;116    border-radius: 50%; display: flex; align-items: center; justify-content: center;117    font-size: 30px; font-weight: 800;118  }119 120  /* Gesture bar */121  .gesture {122    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);123    width: 320px; height: 10px; background: #C8C8C8; border-radius: 6px;124  }125</style>126</head>127<body>128<div id="render-target">129  <!-- Status Bar -->130  <div class="status-bar">131    <div class="left">12:35</div>132    <div class="status-right">133      <!-- simple notification dots -->134      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#444"/></svg>135      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#444"/></svg>136      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#444"/></svg>137      <!-- WiFi -->138      <svg class="icon" viewBox="0 0 24 24">139        <path d="M2 8c5-5 15-5 20 0" stroke="#444" stroke-width="2" fill="none"/>140        <path d="M6 12c3-3 9-3 12 0" stroke="#444" stroke-width="2" fill="none"/>141        <path d="M10 16c2-2 4-2 6 0" stroke="#444" stroke-width="2" fill="none"/>142        <circle cx="16" cy="19" r="1.5" fill="#444"/>143      </svg>144      <!-- Battery -->145      <svg class="icon" viewBox="0 0 24 24">146        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" stroke="#444" fill="none" stroke-width="2"/>147        <rect x="4" y="9" width="14" height="6" fill="#444"/>148        <rect x="21" y="10" width="2" height="4" fill="#444"/>149      </svg>150    </div>151  </div>152 153  <!-- Search Row -->154  <div class="search-row">155    <div class="search-box">156      <svg class="icon" viewBox="0 0 24 24">157        <circle cx="10" cy="10" r="7" stroke="#777" stroke-width="2" fill="none"/>158        <line x1="15" y1="15" x2="22" y2="22" stroke="#777" stroke-width="2"/>159      </svg>160      <div>Search...</div>161    </div>162    <div class="camera-btn">163      <svg class="icon" viewBox="0 0 24 24">164        <rect x="3" y="7" width="18" height="12" rx="2" ry="2" stroke="#444" fill="none" stroke-width="2"/>165        <path d="M8 7l2-3h4l2 3" stroke="#444" stroke-width="2" fill="none"/>166        <circle cx="12" cy="13" r="3" stroke="#444" stroke-width="2" fill="none"/>167      </svg>168    </div>169  </div>170 171  <!-- Title -->172  <div class="page-title">SHOP</div>173 174  <!-- Tabs -->175  <div class="tabs">176    <div class="tab">WOMEN</div>177    <div class="tab active">MEN</div>178    <div class="tab">KIDS</div>179    <div class="tab">CLASSICS</div>180    <div class="tab">COLLABORATIONS</div>181  </div>182 183  <!-- List -->184  <div class="list">185    <div class="row">186      <div class="thumb">[IMG: Featured sneaker & skyline]</div>187      <div class="row-text">FEATURED</div>188      <svg class="chev" viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>189    </div>190 191    <div class="row">192      <div class="thumb">[IMG: Men lifestyle apparel]</div>193      <div class="row-text">SHOP ALL MEN</div>194      <svg class="chev" viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>195    </div>196 197    <div class="row">198      <div class="thumb">[IMG: Cream sneaker close-up]</div>199      <div class="row-text">SHOES</div>200      <svg class="chev" viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>201    </div>202 203    <div class="row">204      <div class="thumb">[IMG: Men summer outfits]</div>205      <div class="row-text">CLOTHING</div>206      <svg class="chev" viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>207    </div>208 209    <div class="row">210      <div class="thumb">[IMG: Model with accessories]</div>211      <div class="row-text">ACCESSORIES</div>212      <svg class="chev" viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>213    </div>214 215    <div class="row" style="border-bottom: none;">216      <div class="thumb">[IMG: Basketball player on court]</div>217      <div class="row-text">SPORTS</div>218      <svg class="chev" viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>219    </div>220  </div>221 222  <!-- Bottom Navigation -->223  <div class="bottom-nav">224    <div class="nav-item">225      <svg class="icon" viewBox="0 0 24 24">226        <path d="M3 11l9-7 9 7v9H3z" fill="none" stroke="#666" stroke-width="2"/>227      </svg>228      <div>HOME</div>229    </div>230    <div class="nav-item">231      <svg class="icon" viewBox="0 0 24 24">232        <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="#666" stroke-width="2"/>233        <line x1="3" y1="9" x2="21" y2="9" stroke="#666" stroke-width="2"/>234        <rect x="7" y="12" width="4" height="4" fill="#666"/>235      </svg>236      <div>DROPS</div>237    </div>238    <div class="nav-item active">239      <svg class="icon" viewBox="0 0 24 24">240        <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2" fill="none"/>241        <line x1="15" y1="15" x2="22" y2="22" stroke="#111" stroke-width="2"/>242      </svg>243      <div>SHOP</div>244    </div>245    <div class="nav-item">246      <svg class="icon" viewBox="0 0 24 24">247        <path d="M3 6h18l-2 12H5L3 6z" fill="none" stroke="#666" stroke-width="2"/>248        <circle cx="9" cy="20" r="1.5" fill="#666"/>249        <circle cx="17" cy="20" r="1.5" fill="#666"/>250      </svg>251      <div>CART</div>252    </div>253    <div class="nav-item" style="position: relative;">254      <svg class="icon" viewBox="0 0 24 24">255        <circle cx="12" cy="8" r="4" stroke="#666" fill="none" stroke-width="2"/>256        <path d="M4 21c2-4 14-4 16 0" stroke="#666" fill="none" stroke-width="2"/>257      </svg>258      <div>ACCOUNT</div>259    </div>260  </div>261  <div class="badge">1</div>262 263  <!-- Gesture Bar -->264  <div class="gesture"></div>265</div>266</body>267</html>