Spaces:
Running
Running
app must be setup for master wallet ,owner of app takes 10 percent of total pots won
db7ca93 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EtherBingo Blitz</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 400: '#60a5fa', | |
| 500: '#3b82f6', | |
| 600: '#2563eb', | |
| }, | |
| secondary: { | |
| 500: '#6b7280', | |
| 700: '#374151', | |
| 900: '#111827', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @keyframes pulse-blue { | |
| 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } | |
| 50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } | |
| } | |
| .animate-pulse-blue { | |
| animation: pulse-blue 2s infinite; | |
| background-color: #93c5fd; | |
| } | |
| .bingo-cell { | |
| transition: all 0.3s ease; | |
| } | |
| .bingo-cell:hover { | |
| transform: scale(1.05); | |
| } | |
| .bingo-cell.selected { | |
| background-color: rgba(59, 130, 246, 0.2); | |
| border-color: #3b82f6; | |
| } | |
| #vanta-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.15; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-secondary-900 text-gray-100 min-h-screen"> | |
| <div id="vanta-bg"></div> | |
| <!-- Header --> | |
| <header class="bg-secondary-900 border-b border-secondary-700 py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center"> | |
| <i data-feather="grid" class="text-white"></i> | |
| </div> | |
| <h1 class="text-xl font-bold bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent">EtherBingo Blitz</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="wallet-btn" class="flex items-center space-x-2 bg-primary-600 hover:bg-primary-500 text-white px-4 py-2 rounded-lg transition"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| <span>Connect Wallet</span> | |
| </button> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-secondary-700 transition"> | |
| <i data-feather="moon" class="w-5 h-5 text-primary-400"></i> | |
| </button> | |
| <button id="settings-btn" class="p-2 rounded-full hover:bg-secondary-700 transition"> | |
| <i data-feather="settings" class="w-5 h-5 text-gray-400"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Wallet Info (Hidden by default) --> | |
| <div id="wallet-info" class="hidden bg-secondary-700 rounded-xl p-6 mb-8 border border-secondary-600"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-primary-400">Wallet Connected</h3> | |
| <p id="wallet-address" class="text-sm text-gray-300 font-mono truncate">0x000...0000</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-xs text-gray-400">Balance</p> | |
| <p id="wallet-balance" class="text-lg font-bold text-primary-400">0 ETH</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Area --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Bingo Card --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-secondary-800 rounded-xl p-6 border border-secondary-700"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-primary-400">Your Bingo Card</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-400 hover:bg-blue-300 text-white px-4 py-2 rounded-lg transition flex items-center space-x-2"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| <span>New Card</span> | |
| </button> | |
| <button class="bg-blue-200 hover:bg-blue-100 text-blue-800 px-4 py-2 rounded-lg transition flex items-center space-x-2"> | |
| <i data-feather="dollar-sign" class="w-4 h-4"></i> | |
| <span>Buy Tickets</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <!-- B I N G O Header --> | |
| <div class="text-center font-bold py-2 bg-primary-600 rounded-t-lg">B</div> | |
| <div class="text-center font-bold py-2 bg-primary-600">I</div> | |
| <div class="text-center font-bold py-2 bg-primary-600">N</div> | |
| <div class="text-center font-bold py-2 bg-primary-600">G</div> | |
| <div class="text-center font-bold py-2 bg-primary-600 rounded-t-lg">O</div> | |
| <!-- Bingo Cells --> | |
| <template id="bingo-cell-template"> | |
| <div class="bingo-cell aspect-square flex items-center justify-center border-2 border-secondary-600 rounded-lg cursor-pointer text-lg font-medium hover:border-primary-400 transition"> | |
| <span class="number">1</span> | |
| </div> | |
| </template> | |
| <!-- Generated cells will go here --> | |
| <div id="bingo-grid" class="col-span-5 grid grid-cols-5 gap-2"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Info --> | |
| <div class="space-y-6"> | |
| <!-- Current Game --> | |
| <div class="bg-secondary-800 rounded-xl p-6 border border-secondary-700"> | |
| <h2 class="text-xl font-bold text-primary-400 mb-4">Current Game</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Game ID</p> | |
| <p class="font-mono">#B-2837-ETH</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Prize Pool</p> | |
| <p class="text-2xl font-bold text-primary-400">1.25 ETH</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Numbers Called</p> | |
| <div id="called-numbers" class="flex flex-wrap gap-2 mt-2"> | |
| <!-- Numbers will be added here --> | |
| </div> | |
| </div> | |
| <button class="w-full bg-blue-400 hover:bg-blue-300 text-white py-3 rounded-lg font-bold transition animate-pulse-blue"> | |
| CALL NEXT NUMBER | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Winners --> | |
| <div class="bg-secondary-800 rounded-xl p-6 border border-secondary-700"> | |
| <h2 class="text-xl font-bold text-primary-400 mb-4">Recent Winners</h2> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center py-2 border-b border-secondary-700"> | |
| <div> | |
| <p class="font-medium">0x3f...5c2d</p> | |
| <p class="text-xs text-gray-400">2 minutes ago</p> | |
| </div> | |
| <p class="text-blue-400 font-bold">0.25 ETH</p> | |
| </div> | |
| <div class="flex justify-between items-center py-2 border-b border-secondary-700"> | |
| <div> | |
| <p class="font-medium">0x7a...9e1f</p> | |
| <p class="text-xs text-gray-400">15 minutes ago</p> | |
| </div> | |
| <p class="text-blue-400 font-bold">0.15 ETH</p> | |
| </div> | |
| <div class="flex justify-between items-center py-2"> | |
| <div> | |
| <p class="font-medium">0x1b...4d6c</p> | |
| <p class="text-xs text-gray-400">1 hour ago</p> | |
| </div> | |
| <p class="text-blue-400 font-bold">0.35 ETH</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Notification --> | |
| <div id="notification" class="fixed bottom-4 right-4 bg-primary-600 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 hidden"> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="bell" class="w-5 h-5"></i> | |
| <p id="notification-message">Notification message goes here</p> | |
| </div> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-secondary-800 rounded-xl p-6 w-full max-w-md border border-secondary-700"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-primary-400">Settings</h2> | |
| <button id="close-settings" class="p-2 rounded-full hover:bg-secondary-700 transition"> | |
| <i data-feather="x" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="font-medium mb-3">Theme</h3> | |
| <div class="flex space-x-4"> | |
| <button id="dark-theme" class="px-4 py-2 rounded-lg bg-secondary-700 border border-blue-400 text-blue-400"> | |
| Dark Mode | |
| </button> | |
| <button id="light-theme" class="px-4 py-2 rounded-lg bg-gray-100 border border-gray-300 text-gray-800"> | |
| Light Mode | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-3">Primary Color Intensity</h3> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="px-3 py-2 rounded-lg bg-blue-200 text-blue-800">Light</button> | |
| <button class="px-3 py-2 rounded-lg bg-blue-300 text-white border border-blue-200">Default</button> | |
| <button class="px-3 py-2 rounded-lg bg-blue-400 text-white">Dark</button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-3">Auto-daub</h3> | |
| <label class="inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" checked class="sr-only peer"> | |
| <div class="relative w-11 h-6 bg-secondary-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-400"></div> | |
| <span class="ml-3 text-sm">Automatically mark called numbers</span> | |
| </label> | |
| </div> | |
| <div> | |
| <h3 class="font-medium mb-3">Sound Effects</h3> | |
| <label class="inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" checked class="sr-only peer"> | |
| <div class="relative w-11 h-6 bg-secondary-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-400"></div> | |
| <span class="ml-3 text-sm">Enable game sounds</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/web3@1.5.2/dist/web3.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/ethers@5.6.9/dist/ethers.umd.min.js"></script> | |
| <script> | |
| // Global variables | |
| let web3; | |
| let userWallet; | |
| let contract; | |
| const contractAddress = "0x123..."; // Replace with your contract address | |
| const contractABI = []; // Replace with your contract ABI | |
| const MASTER_WALLET = "0xYourMasterWalletAddress"; // Replace with your master wallet | |
| const COMMISSION_RATE = 0.1; // 10% commission | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: '#3b82f6', | |
| backgroundColor: '#111827', | |
| points: 10.00, | |
| maxDistance: 20.00, | |
| spacing: 15.00 | |
| }); | |
| // Initialize Feather Icons | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Generate Bingo Card | |
| const bingoGrid = document.getElementById('bingo-grid'); | |
| const cellTemplate = document.getElementById('bingo-cell-template'); | |
| // Bingo number ranges for each column | |
| const ranges = [ | |
| [1, 15], // B | |
| [16, 30], // I | |
| [31, 45], // N | |
| [46, 60], // G | |
| [61, 75] // O | |
| ]; | |
| // Free space in the middle | |
| const freeSpaceIndex = 12; // 3rd row, 3rd column (0-based index) | |
| for (let i = 0; i < 25; i++) { | |
| const cell = cellTemplate.content.cloneNode(true); | |
| const cellDiv = cell.querySelector('.bingo-cell'); | |
| const numberSpan = cell.querySelector('.number'); | |
| if (i === freeSpaceIndex) { | |
| numberSpan.textContent = 'FREE'; | |
| cellDiv.classList.add('bg-secondary-700', 'font-bold', 'text-primary-400'); | |
| } else { | |
| const col = i % 5; | |
| const [min, max] = ranges[col]; | |
| const randomNum = Math.floor(Math.random() * (max - min + 1)) + min; | |
| numberSpan.textContent = randomNum; | |
| } | |
| cellDiv.addEventListener('click', function() { | |
| this.classList.toggle('selected'); | |
| }); | |
| bingoGrid.appendChild(cell); | |
| } | |
| // Wallet connection | |
| const walletBtn = document.getElementById('wallet-btn'); | |
| const walletInfo = document.getElementById('wallet-info'); | |
| walletBtn.addEventListener('click', async function() { | |
| try { | |
| if (window.ethereum) { | |
| web3 = new Web3(window.ethereum); | |
| await window.ethereum.request({ method: 'eth_requestAccounts' }); | |
| const accounts = await web3.eth.getAccounts(); | |
| userWallet = accounts[0]; | |
| const balance = await web3.eth.getBalance(userWallet); | |
| const ethBalance = web3.utils.fromWei(balance, 'ether'); | |
| document.getElementById('wallet-address').textContent = | |
| `${userWallet.substring(0, 6)}...${userWallet.substring(38)}`; | |
| document.getElementById('wallet-balance').textContent = | |
| `${parseFloat(ethBalance).toFixed(4)} ETH`; | |
| // Check if connected wallet is master wallet | |
| if (userWallet.toLowerCase() === MASTER_WALLET.toLowerCase()) { | |
| document.getElementById('wallet-btn').innerHTML = | |
| '<i data-feather="shield" class="w-5 h-5"></i><span>Master Wallet</span>'; | |
| feather.replace(); | |
| } | |
| walletInfo.classList.remove('hidden'); | |
| walletBtn.innerHTML = '<i data-feather="check-circle" class="w-5 h-5"></i><span>Connected</span>'; | |
| feather.replace(); | |
| // Initialize contract | |
| contract = new web3.eth.Contract(contractABI, contractAddress); | |
| showNotification('Wallet connected successfully!'); | |
| // For demo purposes - in production this would be handled by smart contract | |
| if (userWallet.toLowerCase() === MASTER_WALLET.toLowerCase()) { | |
| showNotification('Master wallet connected - 10% commission enabled'); | |
| } | |
| } else { | |
| showNotification('Please install MetaMask!'); | |
| } | |
| } catch (error) { | |
| console.error(error); | |
| showNotification('Wallet connection failed'); | |
| } | |
| }); | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| themeToggle.addEventListener('click', function() { | |
| document.documentElement.classList.toggle('dark'); | |
| const icon = themeToggle.querySelector('i'); | |
| if (document.documentElement.classList.contains('dark')) { | |
| icon.setAttribute('data-feather', 'moon'); | |
| } else { | |
| icon.setAttribute('data-feather', 'sun'); | |
| } | |
| feather.replace(); | |
| }); | |
| // Settings modal | |
| const settingsBtn = document.getElementById('settings-btn'); | |
| const settingsModal = document.getElementById('settings-modal'); | |
| const closeSettings = document.getElementById('close-settings'); | |
| settingsBtn.addEventListener('click', function() { | |
| settingsModal.classList.remove('hidden'); | |
| }); | |
| closeSettings.addEventListener('click', function() { | |
| settingsModal.classList.add('hidden'); | |
| }); | |
| // Theme buttons in settings | |
| document.getElementById('dark-theme').addEventListener('click', function() { | |
| document.documentElement.classList.add('dark'); | |
| settingsModal.classList.add('hidden'); | |
| showNotification('Dark mode activated'); | |
| }); | |
| document.getElementById('light-theme').addEventListener('click', function() { | |
| document.documentElement.classList.remove('dark'); | |
| settingsModal.classList.add('hidden'); | |
| showNotification('Light mode activated'); | |
| }); | |
| // Notification function | |
| function showNotification(message) { | |
| const notification = document.getElementById('notification'); | |
| const notificationMsg = document.getElementById('notification-message'); | |
| notificationMsg.textContent = message; | |
| notification.classList.remove('hidden'); | |
| notification.classList.remove('translate-y-20', 'opacity-0'); | |
| notification.classList.add | |
| </body> | |
| </html> |