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>Drops UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15    font-family: "Helvetica Neue", Arial, sans-serif;16    color: #111;17  }18 19  /* Header */20  .header {21    position: relative;22    height: 260px;23    padding: 70px 40px 0 40px;24    box-sizing: border-box;25    background: #fff;26  }27  .title {28    font-size: 72px;29    font-weight: 800;30    letter-spacing: 2px;31  }32  .actions {33    position: absolute;34    right: 40px;35    top: 80px;36    display: flex;37    gap: 48px;38    align-items: center;39  }40  .icon {41    width: 72px;42    height: 72px;43  }44  .icon svg { width: 100%; height: 100%; }45 46  /* Filters */47  .filter-row {48    display: flex;49    align-items: center;50    padding: 24px 40px;51    border-top: 1px solid #eee;52    border-bottom: 1px solid #eee;53    gap: 28px;54  }55  .dropdown {56    border: 3px solid #111;57    padding: 24px 30px;58    font-size: 34px;59    letter-spacing: 2px;60    text-transform: uppercase;61    font-weight: 700;62    display: flex;63    align-items: center;64    gap: 16px;65  }66  .divider {67    width: 1px;68    height: 86px;69    background: #E5E5E5;70  }71  .tabs {72    display: flex;73    gap: 24px;74  }75  .tab {76    padding: 20px 34px;77    font-size: 30px;78    letter-spacing: 3px;79    text-transform: uppercase;80    border: 2px solid #D6D6D6;81    background: #F4F4F4;82    color: #9A9A9A;83  }84 85  /* Hero section */86  .hero {87    position: relative;88    background: #171717;89    height: 1540px;90  }91  .chip {92    position: absolute;93    top: 34px;94    left: 40px;95    background: #000;96    color: #fff;97    padding: 18px 26px;98    font-size: 32px;99    font-weight: 800;100    letter-spacing: 2px;101  }102  .promo .label {103    position: absolute;104    left: 100px;105    bottom: 360px;106    background: #fff;107    padding: 26px 30px;108    font-size: 54px;109    letter-spacing: 3px;110    font-weight: 700;111    color: #111;112    box-shadow: 0 0 0 0 #000;113  }114  .cta-wrapper {115    position: absolute;116    left: 100px;117    bottom: 210px;118    width: 880px;119    height: 150px;120  }121  .cta {122    position: absolute;123    left: 0;124    top: 0;125    width: 880px;126    height: 150px;127    background: #fff;128    border: 3px solid #111;129    display: flex;130    align-items: center;131    padding-left: 34px;132    box-sizing: border-box;133    font-size: 40px;134    font-weight: 800;135    letter-spacing: 6px;136  }137  .cta-outline {138    position: absolute;139    width: 880px;140    height: 150px;141    border: 3px solid #111;142    background: transparent;143    pointer-events: none;144  }145  .cta-outline.one { left: 14px; top: 16px; }146  .cta-outline.two { left: 28px; top: 32px; }147 148  /* Bottom navigation */149  .bottom-nav {150    position: absolute;151    left: 0;152    bottom: 0;153    width: 1080px;154    height: 180px;155    background: #F9F9F9;156    border-top: 1px solid #E5E5E5;157    display: flex;158    justify-content: space-around;159    align-items: center;160  }161  .nav-item { width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; }162  .nav-item svg { width: 88px; height: 88px; }163  .stroke-muted { stroke: #C4C4C4; }164  .stroke-bold { stroke: #000000; }165 166  /* Gesture bar */167  .gesture {168    position: absolute;169    left: 50%;170    transform: translateX(-50%);171    bottom: 24px;172    width: 240px;173    height: 10px;174    background: #CFCFCF;175    border-radius: 8px;176  }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Header -->183  <div class="header">184    <div class="title">DROPS</div>185    <div class="actions">186      <!-- Search icon -->187      <div class="icon">188        <svg viewBox="0 0 24 24" fill="none">189          <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2"></circle>190          <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#111" stroke-width="2" stroke-linecap="round"></line>191        </svg>192      </div>193      <!-- Profile icon -->194      <div class="icon">195        <svg viewBox="0 0 24 24" fill="none">196          <circle cx="12" cy="8" r="4" stroke="#111" stroke-width="2"></circle>197          <path d="M3 22c2.5-5 7.5-5 9-5s6.5 0 9 5" stroke="#111" stroke-width="2" stroke-linecap="round"></path>198        </svg>199      </div>200    </div>201  </div>202 203  <!-- Filters -->204  <div class="filter-row">205    <div class="dropdown">WOMEN'S206      <svg width="28" height="28" viewBox="0 0 24 24" style="margin-left:8px">207        <path d="M6 9l6 6 6-6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>208      </svg>209    </div>210    <div class="divider"></div>211    <div class="tabs">212      <div class="tab">IVY PARK</div>213      <div class="tab">FEATURED</div>214      <div class="tab">SPORTSWEAR</div>215    </div>216  </div>217 218  <!-- Hero -->219  <div class="hero">220    <div class="chip">IVY PARK</div>221 222    <div class="promo">223      <div class="label">ADIDAS X IVY PARK</div>224 225      <div class="cta-wrapper">226        <div class="cta">SHOP NOW</div>227        <div class="cta-outline one"></div>228        <div class="cta-outline two"></div>229      </div>230    </div>231  </div>232 233  <!-- Bottom Navigation -->234  <div class="bottom-nav">235    <!-- Flame (active) -->236    <div class="nav-item">237      <svg viewBox="0 0 24 24" fill="none">238        <path class="stroke-bold" stroke-width="2" d="M12 2c-1 2-1 3-3 5-1.5 1.5-3 3-3 6a6 6 0 0012 0c0-2.5-1.5-4.5-3-6-2-2-2-3-3-5z"></path>239      </svg>240    </div>241    <!-- Search -->242    <div class="nav-item">243      <svg viewBox="0 0 24 24" fill="none">244        <circle cx="10" cy="10" r="6.5" class="stroke-muted" stroke-width="2"></circle>245        <line x1="15.2" y1="15.2" x2="22" y2="22" class="stroke-muted" stroke-width="2" stroke-linecap="round"></line>246      </svg>247    </div>248    <!-- Heart -->249    <div class="nav-item">250      <svg viewBox="0 0 24 24" fill="none">251        <path d="M12 21s-7-4.7-9.5-8C1 11 2 7.5 5.5 7.5c2 0 3.2 1.1 4.5 2.5 1.3-1.4 2.5-2.5 4.5-2.5C18 7.5 19 11 21.5 13c-2.5 3.3-9.5 8-9.5 8z" class="stroke-muted" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path>252      </svg>253    </div>254    <!-- Bag -->255    <div class="nav-item">256      <svg viewBox="0 0 24 24" fill="none">257        <rect x="4" y="8" width="16" height="12" rx="1.5" class="stroke-muted" stroke-width="2"></rect>258        <path d="M8 8V6a4 4 0 018 0v2" class="stroke-muted" stroke-width="2" stroke-linecap="round"></path>259      </svg>260    </div>261    <!-- Target -->262    <div class="nav-item">263      <svg viewBox="0 0 24 24" fill="none">264        <circle cx="12" cy="12" r="8" class="stroke-muted" stroke-width="2"></circle>265        <circle cx="12" cy="12" r="4" class="stroke-muted" stroke-width="2"></circle>266        <circle cx="12" cy="12" r="1.5" fill="#C4C4C4"></circle>267      </svg>268    </div>269  </div>270 271  <!-- Gesture bar -->272  <div class="gesture"></div>273 274</div>275</body>276</html>