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>Co-Axial Cables</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    background: #000;21    color: #fff;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 40px;26    font-size: 42px;27  }28  .status-right { display: flex; gap: 30px; align-items: center; }29  .status-pill {30    width: 20px; height: 20px; border-radius: 50%; background: #fff; opacity: 0.9;31  }32 33  /* App bar */34  .app-bar {35    height: 170px;36    background: linear-gradient(90deg, #f6a25b, #ff9a40);37    display: flex;38    align-items: center;39    padding: 0 32px;40    color: #4a4a4a;41    box-shadow: 0 2px 0 rgba(0,0,0,0.06);42  }43  .app-left { display: flex; align-items: center; gap: 24px; }44  .back-icon { width: 64px; height: 64px; }45  .title { font-size: 56px; font-weight: 600; }46  .app-right {47    margin-left: auto;48    display: flex;49    align-items: center;50    gap: 36px;51  }52  .app-icon { width: 64px; height: 64px; }53 54  /* Toolbar */55  .toolbar {56    height: 130px;57    background: #fff;58    display: flex;59    align-items: center;60    padding: 0 40px;61    border-bottom: 1px solid #e6e6e6;62    gap: 60px;63  }64  .tool-item {65    display: flex;66    align-items: center;67    gap: 18px;68    color: #f07c2b;69    font-size: 40px;70    font-weight: 600;71  }72  .tool-icon { width: 56px; height: 56px; }73 74  /* Products grid */75  .products {76    display: grid;77    grid-template-columns: repeat(2, 1fr);78    width: 100%;79  }80  .card {81    border-right: 1px solid #e5e5e5;82    border-bottom: 1px solid #e5e5e5;83    padding-bottom: 24px;84  }85  .card:nth-child(2n) { border-right: none; }86  .prod-img {87    width: calc(100% - 0px);88    height: 430px;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    display: flex;92    justify-content: center;93    align-items: center;94    color: #757575;95    font-size: 36px;96    margin: 20px;97    border-radius: 4px;98  }99  .details { padding: 0 26px 10px 26px; }100  .name {101    font-size: 42px;102    color: #333;103    font-weight: 600;104    line-height: 1.25;105    margin-top: 8px;106  }107  .byline {108    font-size: 36px;109    color: #7a7a7a;110    margin-top: 6px;111  }112  .byline b { color: #222; }113  .price-row {114    margin-top: 22px;115    display: flex;116    align-items: baseline;117    gap: 10px;118  }119  .price {120    font-size: 48px;121    color: #ff7c22;122    font-weight: 700;123    letter-spacing: 0.2px;124  }125  .per {126    font-size: 38px;127    color: #9b9b9b;128  }129  .old-price {130    margin-top: 16px;131    font-size: 40px;132    color: #b6b6b6;133    text-decoration: line-through;134  }135 136  /* Floating WhatsApp */137  .wa-fab {138    position: absolute;139    right: 40px;140    bottom: 190px;141    width: 132px;142    height: 132px;143    background: #25D366;144    border-radius: 50%;145    box-shadow: 0 10px 20px rgba(0,0,0,0.25);146    display: flex;147    align-items: center;148    justify-content: center;149  }150  .wa-icon { width: 72px; height: 72px; }151 152  /* Bottom navigation bar */153  .bottom-bar {154    position: absolute;155    left: 0; right: 0; bottom: 0;156    height: 120px;157    background: #000;158  }159  .home-pill {160    position: absolute;161    left: 50%; transform: translateX(-50%);162    bottom: 36px;163    width: 300px; height: 10px;164    background: #ffffff;165    border-radius: 10px;166    opacity: 0.8;167  }168</style>169</head>170<body>171<div id="render-target">172 173  <!-- Status bar -->174  <div class="status-bar">175    <div>1:27</div>176    <div class="status-right">177      <div>⛅</div>178      <div>📶</div>179      <div class="status-pill"></div>180    </div>181  </div>182 183  <!-- App bar -->184  <div class="app-bar">185    <div class="app-left">186      <svg class="back-icon" viewBox="0 0 24 24">187        <path d="M15 6l-6 6 6 6" fill="none" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>188      </svg>189      <div class="title">Co-Axial Cables</div>190    </div>191    <div class="app-right">192      <!-- Search -->193      <svg class="app-icon" viewBox="0 0 24 24">194        <circle cx="11" cy="11" r="6" fill="none" stroke="#5a5a5a" stroke-width="2"/>195        <path d="M20 20l-4-4" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"/>196      </svg>197      <!-- Document with plus -->198      <svg class="app-icon" viewBox="0 0 24 24">199        <path d="M7 3h8l4 4v14H7z" fill="none" stroke="#5a5a5a" stroke-width="2"/>200        <path d="M15 7V3l6 6h-4" fill="none" stroke="#5a5a5a" stroke-width="2"/>201        <path d="M10 12h6M13 9v6" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"/>202      </svg>203      <!-- Cart -->204      <svg class="app-icon" viewBox="0 0 24 24">205        <path d="M3 5h2l2 12h10l2-8H7" fill="none" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>206        <circle cx="9" cy="19" r="1.5" fill="#5a5a5a"/>207        <circle cx="17" cy="19" r="1.5" fill="#5a5a5a"/>208      </svg>209      <!-- More -->210      <svg class="app-icon" viewBox="0 0 24 24">211        <circle cx="12" cy="5" r="2" fill="#5a5a5a"/>212        <circle cx="12" cy="12" r="2" fill="#5a5a5a"/>213        <circle cx="12" cy="19" r="2" fill="#5a5a5a"/>214      </svg>215    </div>216  </div>217 218  <!-- Toolbar -->219  <div class="toolbar">220    <div class="tool-item">221      <svg class="tool-icon" viewBox="0 0 24 24">222        <path d="M3 5h18l-6 7v7l-6-3v-4z" fill="none" stroke="#f07c2b" stroke-width="2" stroke-linejoin="round"/>223      </svg>224      <span>Filter</span>225    </div>226    <div class="tool-item">227      <svg class="tool-icon" viewBox="0 0 24 24">228        <path d="M8 6l4-4 4 4M16 18l-4 4-4-4" fill="none" stroke="#f07c2b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>229      </svg>230      <span>Sort By</span>231    </div>232    <div class="tool-item" style="margin-left:auto">233      <svg class="tool-icon" viewBox="0 0 24 24">234        <path d="M4 6h16M4 12h16M4 18h16" stroke="#f07c2b" stroke-width="2" stroke-linecap="round"/>235      </svg>236    </div>237  </div>238 239  <!-- Products Grid -->240  <div class="products">241    <!-- Card 1 -->242    <div class="card">243      <div class="prod-img">[IMG: Co-axial cable - black]</div>244      <div class="details">245        <div class="name">SUPER GEC CCS RG-6 Coa...</div>246        <div class="byline">By <b>SUPER GEC</b></div>247        <div class="price-row">248          <div class="price">₹ 799</div>249          <div class="per">/ Piece</div>250        </div>251        <div class="old-price">₹ 805</div>252      </div>253    </div>254 255    <!-- Card 2 -->256    <div class="card">257      <div class="prod-img">[IMG: Co-axial cable - copper core]</div>258      <div class="details">259        <div class="name">SUPER GEC Pure Copper ...</div>260        <div class="byline">By <b>SUPER GEC</b></div>261        <div class="price-row">262          <div class="price">₹ 1890</div>263          <div class="per">/ Piece</div>264        </div>265      </div>266    </div>267 268    <!-- Card 3 -->269    <div class="card">270      <div class="prod-img">[IMG: Full copper RG-6 cable]</div>271      <div class="details">272        <div class="name">SUPER GEC Full Copper R...</div>273        <div class="byline">By <b>SUPER GEC</b></div>274        <div class="price-row">275          <div class="price">₹ 1690</div>276          <div class="per">/ Piece</div>277        </div>278        <div class="old-price">₹ 1695</div>279      </div>280    </div>281 282    <!-- Card 4 -->283    <div class="card">284      <div class="prod-img">[IMG: Co-axial cable - white jacket]</div>285      <div class="details">286        <div class="name">SUPER GEC CCS RG-6 Coa...</div>287        <div class="byline">By <b>SUPER GEC</b></div>288        <div class="price-row">289          <div class="price">₹ 848</div>290          <div class="per">/ Piece</div>291        </div>292      </div>293    </div>294  </div>295 296  <!-- WhatsApp FAB -->297  <div class="wa-fab">298    <svg class="wa-icon" viewBox="0 0 24 24">299      <path d="M12 3a9 9 0 0 0-7.7 13.5L3 21l4.7-1.3A9 9 0 1 0 12 3z" fill="#fff"/>300      <path d="M8.5 9.5c0 3 3.5 5.5 5.5 5.5 1 0 1.6-.6 2-1l-2-1c-.3.4-.8.4-1 .3-1.2-.5-2.2-1.5-2.7-2.7-.1-.2 0-.7.3-1l-1.1-2c-.5.4-1 .9-1 .9-.4.3-.7.9-.7 1z" fill="#25D366"/>301    </svg>302  </div>303 304  <!-- Bottom nav bar -->305  <div class="bottom-bar">306    <div class="home-pill"></div>307  </div>308 309</div>310</body>311</html>