Sign up

soumyadeepdas/tbl_WebBotPublic · Community Store Listing

Demo WebApp

ProfileTelegram
14 commands0 envUpdated 19d agoCreated Oct 27, 2025
Back to folder

commands/product.html.js

javascript · 109 lines · click line # to share

1/**#command2name: product.html3answer: 4keyboard: 5parse_mode: 6aliases: 7allow_only_group: false8need_reply: false9is_web: 010#command**/11 12<!DOCTYPE html>13<html lang="en">14<head>15  <meta charset="UTF-8">16  <meta name="viewport" content="width=device-width, initial-scale=1.0">17  <title>Product List</title>18  <style>19    body {20      font-family: "Poppins", sans-serif;21      background-color: #0d0d0d;22      color: #f0f0f0;23      margin: 0;24      padding: 20px;25    }26    h1 {27      text-align: center;28      font-size: 1.8em;29      color: #fff;30      margin-bottom: 25px;31    }32    .products {33      display: grid;34      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));35      gap: 20px;36    }37    .card {38      background: #1a1a1a;39      border-radius: 12px;40      padding: 20px;41      transition: 0.3s;42      box-shadow: 0 4px 10px rgba(0,0,0,0.4);43    }44    .card:hover {45      transform: translateY(-5px);46      box-shadow: 0 8px 20px rgba(0,0,0,0.5);47    }48    .name {49      font-size: 1.2em;50      font-weight: bold;51      color: #00c8ff;52      margin-bottom: 8px;53    }54    .category {55      color: #aaa;56      font-size: 0.9em;57      margin-bottom: 12px;58    }59    .price {60      font-size: 1.1em;61      margin-bottom: 10px;62    }63    .available {64      color: #00ff88;65      font-weight: bold;66    }67    .unavailable {68      color: #ff5555;69      font-weight: bold;70    }71  </style>72</head>73<body>74  <h1>🛍️ Available Products</h1>75  <div class="products" id="productList">76    <p style="text-align:center;">Loading products...</p>77  </div>78 79  <script>80    async function loadProducts() {81      const container = document.getElementById("productList");82      try {83        const res = await fetch("<%= product_api_url %>");84        const data = await res.json();85 86        if (data.status === "success" && data.products.length > 0) {87          container.innerHTML = data.products.map(p => `88            <div class="card">89              <div class="name">${p.name}</div>90              <div class="category">Category: ${p.category}</div>91              <div class="price">💰 ${p.price} ${p.currency}</div>92              <div class="${p.available ? 'available' : 'unavailable'}">93                ${p.available ? 'In Stock' : 'Out of Stock'}94              </div>95            </div>96          `).join("");97        } else {98          container.innerHTML = "<p style='text-align:center;'>No products found.</p>";99        }100      } catch (error) {101        container.innerHTML = "<p style='text-align:center;color:red;'>Failed to load products.</p>";102        console.error(error);103      }104    }105 106    loadProducts();107  </script>108</body>109</html>