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>Nike Basketball - Product Grid</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    height: 120px;19    background: #000;20    color: #fff;21    display: flex;22    align-items: center;23    justify-content: space-between;24    padding: 0 40px;25    font-size: 36px;26    letter-spacing: 0.5px;27  }28  .status-right {29    display: flex;30    align-items: center;31    gap: 24px;32  }33  .dot {34    width: 16px; height: 16px; background: #fff; border-radius: 50%;35    opacity: 0.85;36  }37 38  /* Header */39  .header {40    height: 140px;41    display: flex;42    align-items: center;43    padding: 0 40px;44    border-bottom: 1px solid #e9e9e9;45    background: #fff;46  }47  .title {48    font-size: 54px;49    font-weight: 700;50    color: #222;51    margin-left: 24px;52  }53  .header-actions {54    margin-left: auto;55    display: flex;56    align-items: center;57    gap: 32px;58  }59  .icon-btn {60    width: 60px; height: 60px;61    display: inline-flex;62    align-items: center; justify-content: center;63    border-radius: 12px;64  }65  .cart {66    position: relative;67  }68  .badge {69    position: absolute;70    top: -8px; right: -8px;71    background: #fff;72    color: #000;73    border: 2px solid #000;74    font-size: 26px;75    width: 40px; height: 40px;76    display: flex; align-items: center; justify-content: center;77    border-radius: 10px;78    font-weight: 700;79  }80 81  /* Tabs */82  .tabs {83    display: flex;84    align-items: center;85    gap: 60px;86    padding: 20px 40px 0 40px;87    height: 110px;88    border-bottom: 1px solid #eee;89    background: #fff;90  }91  .tab {92    font-size: 42px;93    color: #707070;94    padding-bottom: 24px;95  }96  .tab.active {97    color: #111;98    border-bottom: 6px solid #111;99    font-weight: 700;100  }101 102  /* Product grid */103  .content {104    padding: 24px 24px 0 24px;105  }106  .product-grid {107    display: grid;108    grid-template-columns: 1fr 1fr;109    gap: 32px;110    padding: 0 16px;111  }112  .card {113    background: #fff;114  }115  .img {116    width: 100%;117    height: 380px;118    background: #E0E0E0;119    border: 1px solid #BDBDBD;120    display: flex;121    align-items: center; justify-content: center;122    color: #757575;123    font-size: 34px;124  }125  .meta {126    padding: 20px 10px 0 10px;127  }128  .customize {129    color: #d75a2c;130    font-size: 38px;131    font-weight: 700;132    margin-bottom: 8px;133  }134  .name {135    font-size: 44px;136    font-weight: 700;137    color: #222;138    margin-top: 6px;139  }140  .sub {141    font-size: 36px;142    color: #777;143    margin-top: 6px;144  }145  .price {146    font-size: 40px;147    font-weight: 700;148    color: #111;149    margin-top: 20px;150    margin-bottom: 32px;151  }152 153  /* Floating filter button */154  .floating {155    position: absolute;156    right: 40px;157    bottom: 260px;158    width: 160px; height: 160px;159    background: #fff;160    border-radius: 50%;161    box-shadow: 0 12px 24px rgba(0,0,0,0.15);162    display: flex;163    align-items: center; justify-content: center;164  }165 166  /* Bottom home indicator */167  .home-indicator {168    position: absolute;169    bottom: 24px;170    left: 50%;171    transform: translateX(-50%);172    width: 400px;173    height: 20px;174    background: #dcdcdc;175    border-radius: 12px;176  }177 178  /* SVG baseline */179  svg { display: block; }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status Bar -->186  <div class="status-bar">187    <div>12:09</div>188    <div class="status-right">189      <div class="dot"></div>190      <div class="dot"></div>191      <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">192        <path d="M12 4a8 8 0 0 1 8 8h2A10 10 0 0 0 12 2v2zm0 4a4 4 0 0 1 4 4h2a6 6 0 0 0-6-6v2z"/>193      </svg>194      <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">195        <path d="M5 6h14v12H5z" opacity="0.3"/>196        <path d="M17 8h2v8h-2z"/>197      </svg>198    </div>199  </div>200 201  <!-- Header -->202  <div class="header">203    <div class="icon-btn">204      <svg width="48" height="48" viewBox="0 0 24 24" fill="#111">205        <path d="M15.5 5l-8 7 8 7V5z"/>206      </svg>207    </div>208    <div class="title">Basketball</div>209    <div class="header-actions">210      <div class="icon-btn">211        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">212          <circle cx="11" cy="11" r="7"></circle>213          <path d="M21 21l-4.3-4.3"></path>214        </svg>215      </div>216      <div class="icon-btn cart">217        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">218          <path d="M7 8h10v10H7z"></path>219          <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>220        </svg>221        <div class="badge">1</div>222      </div>223    </div>224  </div>225 226  <!-- Tabs -->227  <div class="tabs">228    <div class="tab active">All</div>229    <div class="tab">Lifestyle</div>230    <div class="tab">Running</div>231    <div class="tab">Football</div>232    <div class="tab">Training</div>233  </div>234 235  <!-- Content / Products -->236  <div class="content">237    <div class="product-grid">238 239      <!-- Card 1 -->240      <div class="card">241        <div class="img">[IMG: Pink Sabrina 1 Shoe]</div>242        <div class="meta">243          <div class="customize">Customize</div>244          <div class="name">Sabrina 1 By You</div>245          <div class="sub">Custom Basketball Shoes</div>246          <div class="price">MRP : ₹ 13 995.00</div>247        </div>248      </div>249 250      <!-- Card 2 -->251      <div class="card">252        <div class="img">[IMG: Green Sabrina 1 Shoe]</div>253        <div class="meta">254          <div class="customize">Customize</div>255          <div class="name">Sabrina 1 By You</div>256          <div class="sub">Custom Basketball Shoes</div>257          <div class="price">MRP : ₹ 13 995.00</div>258        </div>259      </div>260 261      <!-- Card 3 -->262      <div class="card">263        <div class="img">[IMG: Teal/White Sabrina 1 Shoe]</div>264        <div class="meta">265          <div class="customize">Customize</div>266          <div class="name">Sabrina 1 By Sabrina</div>267          <div class="sub">Custom Basketball Shoes</div>268          <div class="price">MRP : ₹ 13 995.00</div>269        </div>270      </div>271 272      <!-- Card 4 -->273      <div class="card">274        <div class="img">[IMG: Red Sabrina 1 Shoe]</div>275        <div class="meta">276          <div class="customize">Customize</div>277          <div class="name">Sabrina 1 By You</div>278          <div class="sub">Custom Basketball Shoes</div>279          <div class="price">MRP : ₹ 13 995.00</div>280        </div>281      </div>282 283    </div>284  </div>285 286  <!-- Floating filter button -->287  <div class="floating">288    <svg width="80" height="80" viewBox="0 0 24 24" fill="#111">289      <path d="M4 7h16v2H4zM8 11h8v2H8zM10 15h4v2h-4z"></path>290      <path d="M12 3v18" opacity="0"/>291    </svg>292  </div>293 294  <!-- Bottom indicator -->295  <div class="home-indicator"></div>296 297</div>298</body>299</html>