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>Guns, blasters & accessories</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    border-radius: 0;15  }16 17  /* Header / Status bar */18  .app-header {19    position: relative;20    width: 100%;21    height: 240px;22    background: #1f4ea3;23    color: #fff;24  }25  .status-bar {26    height: 72px;27    display: flex;28    align-items: center;29    padding: 0 40px;30    font-weight: bold;31    font-size: 34px;32    letter-spacing: 1px;33  }34  .status-icons {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 28px;39  }40  .status-icon svg { width: 40px; height: 40px; fill: #fff; }41  .header-title {42    position: absolute;43    left: 40px;44    right: 40px;45    bottom: 24px;46    font-size: 54px;47    font-weight: 700;48  }49  .back-btn {50    position: absolute;51    left: 24px;52    top: 96px;53    width: 64px;54    height: 64px;55    display: flex;56    align-items: center;57    justify-content: center;58  }59  .back-btn svg { width: 44px; height: 44px; fill: #fff; }60 61  /* Filter / Sort row */62  .controls {63    display: flex;64    gap: 28px;65    padding: 34px 40px;66    background: #ffffff;67  }68  .pill-btn {69    flex: 1;70    max-width: 460px;71    background: #fff;72    border: 2px solid #e3e6eb;73    border-radius: 24px;74    height: 100px;75    display: flex;76    align-items: center;77    padding: 0 32px;78    font-size: 42px;79    font-weight: 700;80    color: #222;81    box-shadow: 0 0 0 rgba(0,0,0,0);82  }83  .pill-btn svg { width: 48px; height: 48px; margin-left: auto; fill: #1f4ea3; }84 85  /* Product grid */86  .products {87    padding: 0 24px 24px;88  }89  .row {90    display: flex;91    gap: 24px;92    margin-bottom: 54px;93  }94  .card {95    position: relative;96    flex: 1;97    min-width: 0;98    background: #fff;99    border-radius: 20px;100    padding: 24px;101  }102  .discount {103    position: absolute;104    top: 12px;105    left: 12px;106    background: #d53a46;107    color: #fff;108    font-weight: 800;109    font-size: 36px;110    padding: 16px 26px;111    border-radius: 20px;112    z-index: 2;113  }114  .product-img {115    width: 100%;116    height: 360px;117    background: #E0E0E0;118    border: 1px solid #BDBDBD;119    display: flex;120    align-items: center;121    justify-content: center;122    color: #606060;123    font-size: 38px;124    border-radius: 10px;125    margin-top: 40px;126  }127  .new-in {128    margin-top: 26px;129    background: #7fd6c7;130    color: #fff;131    font-weight: 800;132    font-size: 40px;133    padding: 18px 0;134    text-align: center;135    border-radius: 18px;136  }137  .title {138    margin-top: 18px;139    font-size: 44px;140    font-weight: 700;141    line-height: 1.22;142    color: #222;143  }144  .price-row {145    margin-top: 12px;146    display: flex;147    align-items: baseline;148    gap: 16px;149  }150  .old-price {151    font-size: 38px;152    color: #666;153    text-decoration: line-through;154  }155  .new-price {156    font-size: 48px;157    font-weight: 800;158    color: #f59b2a;159  }160 161  /* Bottom navigation */162  .bottom-nav {163    position: absolute;164    left: 0;165    right: 0;166    bottom: 0;167    height: 212px;168    background: #1f4ea3;169    border-top-left-radius: 0;170    border-top-right-radius: 0;171    display: flex;172    flex-direction: column;173    align-items: center;174    padding-top: 20px;175  }176  .nav-icons {177    width: 100%;178    display: flex;179    justify-content: space-around;180    align-items: center;181    padding: 20px 60px;182  }183  .nav-item {184    width: 120px;185    height: 96px;186    display: flex;187    align-items: center;188    justify-content: center;189  }190  .nav-item svg { width: 72px; height: 72px; stroke: #fff; fill: none; stroke-width: 6; }191  .grabber {192    width: 420px;193    height: 12px;194    background: #d9e1f1;195    border-radius: 8px;196    margin-top: 28px;197  }198 199  /* Small helpers */200  .mt-8 { margin-top: 8px; }201  .mt-16 { margin-top: 16px; }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Header -->208  <div class="app-header">209    <div class="status-bar">210      11:16211      <div class="status-icons">212        <span class="status-icon">213          <!-- message icon -->214          <svg viewBox="0 0 24 24"><path d="M3 5h18v12H7l-4 4V5z"/></svg>215        </span>216        <span class="status-icon">217          <!-- signal icon -->218          <svg viewBox="0 0 24 24"><path d="M3 20h2v-3H3v3zm4 0h2v-6H7v6zm4 0h2v-9h-2v9zm4 0h2v-12h-2v12zm4 0h2V5h-2v15z"/></svg>219        </span>220        <span class="status-icon">221          <!-- cloud icon -->222          <svg viewBox="0 0 24 24"><path d="M6 18h11a4 4 0 0 0 0-8h-.4A6 6 0 0 0 6 7a5 5 0 0 0 0 11z"/></svg>223        </span>224        <span class="status-icon">225          <!-- wifi -->226          <svg viewBox="0 0 24 24"><path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-6.5-6.5a9 9 0 0 1 13 0l-1.5 1.5a7 7 0 0 0-10 0L5.5 13.5zm-3-3a13 13 0 0 1 19 0L20 12a11 11 0 0 0-16 0L2.5 10.5z"/></svg>227        </span>228        <span class="status-icon">229          <!-- battery -->230          <svg viewBox="0 0 24 24"><path d="M2 7h18v10H2V7zm20 3v4h-2v-4h2z"/></svg>231        </span>232      </div>233    </div>234    <div class="back-btn">235      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>236    </div>237    <div class="header-title">Guns, blasters & accessories</div>238  </div>239 240  <!-- Controls -->241  <div class="controls">242    <div class="pill-btn">243      Filter by244      <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm3 5h10v2H7v-2zm4 5h2v2h-2v-2z"/></svg>245    </div>246    <div class="pill-btn" style="max-width:480px;">247      Sort by248      <svg viewBox="0 0 24 24"><path d="M12 16l4-4H8l4 4zm0-8l-4 4h8l-4-4z"/></svg>249    </div>250  </div>251 252  <!-- Products -->253  <div class="products">254    <!-- Row 1 -->255    <div class="row">256      <div class="card">257        <div class="discount">20% off</div>258        <div class="product-img">[IMG: Fast Pioneer Electric Foam Blaster with 48X]</div>259        <div class="new-in">New In</div>260        <div class="title">Fast Pioneer Electric Gun - Foam Bullet Blaster with 48X</div>261        <div class="price-row">262          <div class="old-price">159 AED</div>263        </div>264        <div class="new-price">127 AED</div>265      </div>266 267      <div class="card">268        <div class="discount">20% off</div>269        <div class="product-img">[IMG: Fast Pioneer Electric Foam Blaster with 36X]</div>270        <div class="new-in">New In</div>271        <div class="title">Fast Pioneer Electric Gun - Foam Bullet Blaster with 36X</div>272        <div class="price-row">273          <div class="old-price">109 AED</div>274        </div>275        <div class="new-price">87 AED</div>276      </div>277    </div>278 279    <!-- Row 2 -->280    <div class="row">281      <div class="card">282        <div class="discount">20% off</div>283        <div class="product-img">[IMG: Attack X Force Manual Soft Bullet Gun]</div>284        <div class="new-in">New In</div>285        <div class="title">Attack X Force - Manual Soft Bullet Gun with 12X Soft Shells</div>286        <div class="price-row">287          <div class="old-price">49 AED</div>288        </div>289        <div class="new-price">39 AED</div>290      </div>291 292      <div class="card">293        <div class="discount">20% off</div>294        <div class="product-img">[IMG: Attack X Force Manual Soft Bullet Gun]</div>295        <div class="new-in">New In</div>296        <div class="title">Attack X Force - Manual Soft Bullet Gun with 24X Soft Shells</div>297        <div class="price-row">298          <div class="old-price">89 AED</div>299        </div>300        <div class="new-price">71 AED</div>301      </div>302    </div>303 304    <!-- Row 3 (partial preview like screenshot bottom thumbnails) -->305    <div class="row">306      <div class="card">307        <div class="discount" style="background:#d94c00;">40% off</div>308        <div class="product-img" style="height:240px;">[IMG: Foam Bullets Pack]</div>309      </div>310      <div class="card">311        <div class="product-img" style="height:240px;">[IMG: Toy Bow Accessory]</div>312      </div>313    </div>314  </div>315 316  <!-- Bottom Navigation -->317  <div class="bottom-nav">318    <div class="nav-icons">319      <div class="nav-item">320        <!-- home -->321        <svg viewBox="0 0 24 24"><path d="M4 10l8-6 8 6v10H4V10z"/><path d="M9 20v-6h6v6" /></svg>322      </div>323      <div class="nav-item">324        <!-- search -->325        <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M21 21l-6-6"/></svg>326      </div>327      <div class="nav-item">328        <!-- bag -->329        <svg viewBox="0 0 24 24"><path d="M6 8h12l-1 12H7L6 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>330      </div>331      <div class="nav-item">332        <!-- heart -->333        <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.5-7-9a4.5 4.5 0 0 1 8-2 4.5 4.5 0 0 1 8 2c0 4.5-7 9-7 9z"/></svg>334      </div>335      <div class="nav-item">336        <!-- user -->337        <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20a8 8 0 0 1 16 0"/></svg>338      </div>339    </div>340    <div class="grabber"></div>341  </div>342 343</div>344</body>345</html>