GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Basketball - UI Render</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    background: #000000;23    color: #ffffff;24  }25  .status-bar .time {26    position: absolute;27    left: 32px;28    top: 36px;29    font-size: 40px;30    font-weight: 600;31    letter-spacing: 1px;32  }33  .status-icons {34    position: absolute;35    right: 32px;36    top: 38px;37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .status-dot {42    width: 16px;43    height: 16px;44    background: #ffffff;45    border-radius: 50%;46    opacity: 0.85;47  }48 49  /* App bar */50  .app-bar {51    position: absolute;52    top: 120px;53    left: 0;54    width: 1080px;55    height: 150px;56    background: #ffffff;57    border-bottom: 1px solid #e6e6e6;58  }59  .app-title {60    position: absolute;61    left: 120px;62    top: 50%;63    transform: translateY(-50%);64    font-size: 50px;65    font-weight: 700;66    color: #1a1a1a;67  }68  .app-back {69    position: absolute;70    left: 32px;71    top: 50%;72    transform: translateY(-50%);73    width: 60px;74    height: 60px;75  }76  .app-actions {77    position: absolute;78    right: 32px;79    top: 50%;80    transform: translateY(-50%);81    display: flex;82    align-items: center;83    gap: 36px;84  }85  .icon {86    width: 60px;87    height: 60px;88  }89  .cart-wrap {90    position: relative;91  }92  .cart-badge {93    position: absolute;94    right: -4px;95    top: -6px;96    width: 42px;97    height: 42px;98    border-radius: 10px;99    background: #ffffff;100    border: 2px solid #111;101    display: flex;102    align-items: center;103    justify-content: center;104    font-size: 28px;105    font-weight: 700;106    color: #111;107  }108 109  /* Tabs */110  .tabs {111    position: absolute;112    top: 270px;113    left: 0;114    width: 1080px;115    height: 110px;116    display: flex;117    align-items: center;118    gap: 48px;119    padding: 0 32px;120    border-bottom: 1px solid #eeeeee;121    background: #ffffff;122  }123  .tab {124    font-size: 40px;125    color: #777777;126    padding-bottom: 16px;127  }128  .tab.active {129    color: #111111;130    font-weight: 700;131    border-bottom: 6px solid #111111;132  }133 134  /* Product grid */135  .cards {136    position: absolute;137    top: 380px;138    left: 0;139    width: 1080px;140    padding: 0 24px;141    display: flex;142    flex-wrap: wrap;143    gap: 24px;144  }145  .card {146    width: 516px; /* two columns with gap */147    background: #ffffff;148  }149  .img {150    width: 516px;151    height: 360px;152    background: #E0E0E0;153    border: 1px solid #BDBDBD;154    display: flex;155    align-items: center;156    justify-content: center;157    color: #757575;158    font-size: 28px;159  }160  .label-customize {161    margin-top: 22px;162    font-size: 36px;163    color: #e85d2a;164    font-weight: 700;165  }166  .prod-title {167    margin-top: 12px;168    font-size: 42px;169    color: #111111;170    font-weight: 700;171  }172  .prod-sub {173    margin-top: 6px;174    font-size: 34px;175    color: #666666;176  }177  .price {178    margin-top: 28px;179    font-size: 40px;180    color: #111111;181    font-weight: 700;182  }183 184  /* Floating filter button */185  .filter-fab {186    position: absolute;187    right: 48px;188    bottom: 220px;189    width: 150px;190    height: 150px;191    background: #ffffff;192    border-radius: 50%;193    box-shadow: 0 14px 28px rgba(0,0,0,0.16);194    display: flex;195    align-items: center;196    justify-content: center;197    border: 1px solid #f0f0f0;198  }199  .home-indicator {200    position: absolute;201    bottom: 40px;202    left: 50%;203    transform: translateX(-50%);204    width: 600px;205    height: 16px;206    background: #dddddd;207    border-radius: 10px;208  }209</style>210</head>211<body>212<div id="render-target">213 214  <!-- Status Bar -->215  <div class="status-bar">216    <div class="time">12:10</div>217    <div class="status-icons">218      <div class="status-dot"></div>219      <div class="status-dot"></div>220      <div class="status-dot"></div>221      <div class="status-dot"></div>222      <!-- Wi-Fi icon -->223      <svg class="icon" viewBox="0 0 48 48">224        <path d="M4 18c10-10 30-10 40 0" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/>225        <path d="M10 24c7-7 21-7 28 0" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/>226        <path d="M18 30c4-4 8-4 12 0" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/>227        <circle cx="24" cy="36" r="3" fill="#fff"/>228      </svg>229      <!-- Battery icon -->230      <svg class="icon" viewBox="0 0 48 48">231        <rect x="6" y="10" width="32" height="20" rx="4" ry="4" fill="none" stroke="#fff" stroke-width="3"/>232        <rect x="9" y="13" width="26" height="14" rx="2" ry="2" fill="#fff"/>233        <rect x="38" y="15" width="4" height="10" fill="#fff"/>234      </svg>235    </div>236  </div>237 238  <!-- App Bar -->239  <div class="app-bar">240    <svg class="app-back" viewBox="0 0 48 48">241      <path d="M30 10 L14 24 L30 38" fill="none" stroke="#111" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>242    </svg>243    <div class="app-title">Basketball</div>244    <div class="app-actions">245      <!-- Search -->246      <svg class="icon" viewBox="0 0 48 48">247        <circle cx="22" cy="22" r="12" fill="none" stroke="#111" stroke-width="4"/>248        <line x1="34" y1="34" x2="44" y2="44" stroke="#111" stroke-width="4" stroke-linecap="round"/>249      </svg>250      <!-- Cart -->251      <div class="cart-wrap">252        <svg class="icon" viewBox="0 0 48 48">253          <path d="M12 16 h24 v20 h-24 z" fill="none" stroke="#111" stroke-width="4"/>254          <path d="M16 16 c0-6 16-6 16 0" fill="none" stroke="#111" stroke-width="4" stroke-linecap="round"/>255        </svg>256        <div class="cart-badge">1</div>257      </div>258    </div>259  </div>260 261  <!-- Tabs -->262  <div class="tabs">263    <div class="tab active">All</div>264    <div class="tab">Lifestyle</div>265    <div class="tab">Running</div>266    <div class="tab">Football</div>267    <div class="tab">Training</div>268  </div>269 270  <!-- Product Grid -->271  <div class="cards">272    <!-- Card 1 -->273    <div class="card">274      <div class="img">[IMG: Pink Nike Sabrina 1 Shoe]</div>275      <div class="label-customize">Customize</div>276      <div class="prod-title">Sabrina 1 By You</div>277      <div class="prod-sub">Custom Basketball Shoes</div>278      <div class="price">MRP : ₹ 13 995.00</div>279    </div>280 281    <!-- Card 2 -->282    <div class="card">283      <div class="img">[IMG: Green Nike Sabrina 1 Shoe]</div>284      <div class="label-customize">Customize</div>285      <div class="prod-title">Sabrina 1 By You</div>286      <div class="prod-sub">Custom Basketball Shoes</div>287      <div class="price">MRP : ₹ 13 995.00</div>288    </div>289 290    <!-- Card 3 -->291    <div class="card">292      <div class="img">[IMG: Teal/Grey Nike Sabrina 1 Shoe]</div>293      <div class="label-customize">Customize</div>294      <div class="prod-title">Sabrina 1 By Sabrina</div>295      <div class="prod-sub">Custom Basketball Shoes</div>296      <div class="price">MRP : ₹ 13 995.00</div>297    </div>298 299    <!-- Card 4 -->300    <div class="card">301      <div class="img">[IMG: Red Nike Sabrina 1 Shoe]</div>302      <div class="label-customize">Customize</div>303      <div class="prod-title">Sabrina 1 By You</div>304      <div class="prod-sub">Custom Basketball Shoes</div>305      <div class="price">MRP : ₹ 13 995.00</div>306    </div>307  </div>308 309  <!-- Floating Filter Button -->310  <div class="filter-fab">311    <svg viewBox="0 0 100 100" width="70" height="70">312      <!-- Three slider lines -->313      <line x1="20" y1="30" x2="80" y2="30" stroke="#111" stroke-width="8" stroke-linecap="round"/>314      <circle cx="40" cy="30" r="10" fill="#111"/>315      <line x1="20" y1="50" x2="80" y2="50" stroke="#111" stroke-width="8" stroke-linecap="round"/>316      <circle cx="60" cy="50" r="10" fill="#111"/>317      <line x1="20" y1="70" x2="80" y2="70" stroke="#111" stroke-width="8" stroke-linecap="round"/>318      <circle cx="30" cy="70" r="10" fill="#111"/>319    </svg>320  </div>321 322  <!-- Home Indicator -->323  <div class="home-indicator"></div>324 325</div>326</body>327</html>