add the casino games from known casino games formats

README.md

@@ -1,10 +1,13 @@
 ---
-title: Jackpot Jamboree
-emoji: 🌖
-colorFrom: indigo
+title: Jackpot Jamboree 🎰
+colorFrom: purple
 colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,68 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin-top: 4rem;
+        }
+        footer {
+          background: rgba(17, 24, 39, 0.9);
+          border-top: 1px solid rgba(239, 68, 68, 0.3);
+          padding: 2rem 0;
+          text-align: center;
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        .footer-content {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 1rem;
+        }
+        .footer-links {
+          display: flex;
+          gap: 1.5rem;
+        }
+        .footer-links a {
+          color: #9ca3af;
+          text-decoration: none;
+          transition: color 0.3s;
+        }
+        .footer-links a:hover {
+          color: #ef4444;
+        }
+        .copyright {
+          color: #6b7280;
+          font-size: 0.875rem;
+        }
+        @media (max-width: 768px) {
+          .footer-content {
+            flex-direction: column;
+          }
+        }
+      </style>
+      <footer>
+        <div class="container">
+          <div class="footer-content">
+            <div class="copyright">
+              © 2024 CodeVault Casino. All rights reserved.
+            </div>
+            <div class="footer-links">
+              <a href="#">Terms</a>
+              <a href="#">Privacy</a>
+              <a href="#">Support</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,118 @@
+class CasinoNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        nav {
+          background: rgba(17, 24, 39, 0.9);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(239, 68, 68, 0.3);
+          padding: 1rem 0;
+          position: sticky;
+          top: 0;
+          z-index: 50;
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-size: 1.5rem;
+          font-weight: bold;
+          color: white;
+          text-decoration: none;
+        }
+        .logo-icon {
+          width: 32px;
+          height: 32px;
+          color: #ef4444;
+        }
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+          align-items: center;
+        }
+        .nav-links a {
+          color: white;
+          text-decoration: none;
+          transition: color 0.3s;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .nav-links a:hover {
+          color: #ef4444;
+        }
+        .nav-links a.active {
+          color: #ef4444;
+          font-weight: 600;
+        }
+        .games-badge {
+          background: linear-gradient(45deg, #ef4444, #dc2626);
+          padding: 0.25rem 0.75rem;
+          border-radius: 9999px;
+          font-size: 0.75rem;
+          font-weight: 600;
+          margin-left: 0.5rem;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            gap: 1rem;
+          }
+          .nav-links span {
+            display: none;
+          }
+        }
+      </style>
+      <nav>
+        <div class="container">
+          <a href="/" class="logo">
+            <svg class="logo-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2L2 7v10c0 5.55 3.84 9.74 9 12 5.16-2.26 9-6.45 9-12V7l-10-5z"></path>
+            </svg>
+            CodeVault Casino
+          </a>
+          <div class="nav-links">
+            <a href="/" class="active">
+              <i data-feather="home" class="w-5 h-5"></i>
+              <span>Home</span>
+            </a>
+            <a href="/games.html">
+              <i data-feather="dice" class="w-5 h-5"></i>
+              <span>Games</span>
+              <span class="games-badge">NEW</span>
+            </a>
+            <a href="#" onclick="alert('Admin panel coming soon!')">
+              <i data-feather="user" class="w-5 h-5"></i>
+              <span>Admin</span>
+            </a>
+          </div>
+        </div>
+      </nav>
+    `;
+    
+    // Re-apply feather icons in shadow DOM
+    if (window.feather) {
+      setTimeout(() => {
+        feather.replace({ 
+          'stroke-width': 2,
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round'
+        });
+      }, 10);
+    }
+  }
+}
+
+customElements.define('casino-navbar', CasinoNavbar);

components/redeem-form.js

@@ -0,0 +1,132 @@
+class RedeemForm extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: inherit;
+        }
+        form {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        .form-group {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+        }
+        label {
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: #d1d5db;
+        }
+        input, select {
+          padding: 0.75rem;
+          background: rgba(55, 65, 81, 0.5);
+          border: 1px solid rgba(75, 85, 99, 0.5);
+          border-radius: 0.5rem;
+          color: white;
+          font-size: 1rem;
+          transition: all 0.3s;
+        }
+        input:focus, select:focus {
+          outline: none;
+          border-color: #ef4444;
+          box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+        }
+        button {
+          background: linear-gradient(45deg, #ef4444, #dc2626);
+          color: white;
+          padding: 0.75rem 2rem;
+          border: none;
+          border-radius: 0.5rem;
+          font-size: 1rem;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.3s;
+          margin-top: 1rem;
+        }
+        button:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3);
+        }
+        button:active {
+          transform: translateY(0);
+        }
+        .message {
+          margin-top: 1rem;
+          padding: 0.75rem;
+          border-radius: 0.5rem;
+          font-size: 0.875rem;
+          display: none;
+        }
+        .message.success {
+          background: rgba(34, 197, 94, 0.1);
+          border: 1px solid rgba(34, 197, 94, 0.3);
+          color: #22c55e;
+        }
+        .message.error {
+          background: rgba(239, 68, 68, 0.1);
+          border: 1px solid rgba(239, 68, 68, 0.3);
+          color: #ef4444;
+        }
+      </style>
+      <form id="redeemForm">
+        <div class="form-group">
+          <label for="code">Redemption Code</label>
+          <input type="text" id="code" name="code" placeholder="XXXX-XXXX-XXXX" required>
+        </div>
+        <div class="form-group">
+          <label for="paymentMethod">Payment Method</label>
+          <select id="paymentMethod" name="paymentMethod" required>
+            <option value="">Select method...</option>
+            <option value="crypto">Cryptocurrency</option>
+            <option value="cashapp">Cash App</option>
+            <option value="paypal">PayPal</option>
+            <option value="venmo">Venmo</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="walletAddress">Wallet Address / Phone Number</label>
+          <input type="text" id="walletAddress" name="walletAddress" placeholder="Enter receiving address" required>
+        </div>
+        <button type="submit">Redeem Now</button>
+        <div id="message" class="message"></div>
+      </form>
+    `;
+    
+    this.shadowRoot.getElementById('redeemForm').addEventListener('submit', (e) => {
+      e.preventDefault();
+      this.handleSubmit();
+    });
+  }
+  
+  handleSubmit() {
+    const form = this.shadowRoot.getElementById('redeemForm');
+    const formData = new FormData(form);
+    const code = formData.get('code');
+    const paymentMethod = formData.get('paymentMethod');
+    const walletAddress = formData.get('walletAddress');
+    const messageEl = this.shadowRoot.getElementById('message');
+    
+    // Simulate redemption process
+    messageEl.style.display = 'block';
+    messageEl.className = 'message success';
+    messageEl.textContent = `✅ Processing ${paymentMethod} redemption for code ${code}...`;
+    
+    setTimeout(() => {
+      if (code.length > 8 && walletAddress.length > 5) {
+        messageEl.className = 'message success';
+        messageEl.textContent = `🎉 Success! ${paymentMethod} payment sent to ${walletAddress}`;
+        form.reset();
+      } else {
+        messageEl.className = 'message error';
+        messageEl.textContent = '❌ Invalid code or address. Please try again.';
+      }
+    }, 1500);
+  }
+}
+
+customElements.define('redeem-form', RedeemForm);

components/slot-machine.js

@@ -0,0 +1,305 @@
+```javascript
+class SlotMachine extends HTMLElement {
+  constructor() {
+    super();
+    this.balance = 1000;
+    this.bet = 10;
+    this.isSpinning = false;
+    this.symbols = ['🍒', '🍋', '🍊', '🍉', '⭐', '💎', '7️⃣'];
+    this.symbolValues = {
+      '🍒': 2,
+      '🍋': 3,
+      '🍊': 4,
+      '🍉': 5,
+      '⭐': 10,
+      '💎': 20,
+      '7️⃣': 50
+    };
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+    this.setupEventListeners();
+    this.updateDisplay();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          max-width: 500px;
+          margin: 0 auto;
+        }
+        .slot-container {
+          background: linear-gradient(135deg, #1e293b, #334155);
+          border: 2px solid #ef4444;
+          border-radius: 1rem;
+          padding: 2rem;
+          box-shadow: 0 10px 30px rgba(239, 68, 68, 0.2);
+        }
+        .balance-display {
+          text-align: center;
+          margin-bottom: 1rem;
+          font-size: 1.25rem;
+          font-weight: bold;
+        }
+        .reels {
+          display: flex;
+          gap: 0.5rem;
+          justify-content: center;
+          margin: 2rem 0;
+          background: #000;
+          padding: 1.5rem;
+          border-radius: 0.5rem;
+          border: 3px solid #374151;
+        }
+        .reel {
+          width: 80px;
+          height: 80px;
+          background: linear-gradient(to bottom, #fbbf24, #f59e0b);
+          border: 2px solid #92400e;
+          border-radius: 0.5rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 2.5rem;
+          font-weight: bold;
+          transition: transform 0.1s;
+        }
+        .reel.spinning {
+          animation: spin 0.3s linear infinite;
+        }
+        @keyframes spin {
+          0% { transform: translateY(-20px); opacity: 0.5; }
+          100% { transform: translateY(20px); opacity: 1; }
+        }
+        .controls {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        .bet-controls {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 1rem;
+        }
+        .bet-btn {
+          width: 40px;
+          height: 40px;
+          border: none;
+          border-radius: 50%;
+          background: #ef4444;
+          color: white;
+          font-weight: bold;
+          cursor: pointer;
+          transition: all 0.3s;
+        }
+        .bet-btn:hover {
+          background: #dc2626;
+          transform: scale(1.1);
+        }
+        .bet-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        .spin-btn {
+          background: linear-gradient(45deg, #ef4444, #dc2626);
+          color: white;
+          border: none;
+          padding: 1rem 3rem;
+          border-radius: 0.5rem;
+          font-size: 1.25rem;
+          font-weight: bold;
+          cursor: pointer;
+          transition: all 0.3s;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+        }
+        .spin-btn:hover:not(:disabled) {
+          transform: translateY(-2px);
+          box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3);
+        }
+        .spin-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        .message {
+          text-align: center;
+          margin-top: 1rem;
+          font-size: 1.125rem;
+          font-weight: 600;
+          min-height: 1.5rem;
+        }
+        .win {
+          color: #22c55e;
+          animation: pulse 0.5s;
+        }
+        .lose {
+          color: #ef4444;
+        }
+        @keyframes pulse {
+          0%, 100% { transform: scale(1); }
+          50% { transform: scale(1.1); }
+        }
+        .payout-table {
+          margin-top: 1.5rem;
+          background: rgba(55, 65, 81, 0.5);
+          border-radius: 0.5rem;
+          padding: 1rem;
+        }
+        .payout-table h4 {
+          margin: 0 0 0.5rem 0;
+          text-align: center;
+          color: #ef4444;
+        }
+        .payout-row {
+          display: flex;
+          justify-content: space-between;
+          font-size: 0.875rem;
+          padding: 0.25rem 0;
+        }
+      </style>
+      <div class="slot-container">
+        <div class="balance-display">💰 Balance: $<span id="balance">1000</span></div>
+        <div class="reels">
+          <div class="reel" id="reel1">🍒</div>
+          <div class="reel" id="reel2">🍋</div>
+          <div class="reel" id="reel3">🍊</div>
+        </div>
+        <div class="controls">
+          <div class="bet-controls">
+            <button class="bet-btn" id="decreaseBet">-</button>
+            <span>Bet: $<span id="betAmount">10</span></span>
+            <button class="bet-btn" id="increaseBet">+</button>
+          </div>
+          <button class="spin-btn" id="spinBtn">SPIN</button>
+        </div>
+        <div class="message" id="message"></div>
+        <div class="payout-table">
+          <h4>Payouts (x bet)</h4>
+          <div class="payout-row"><span>🍒 3x</span><span>2x</span></div>
+          <div class="payout-row"><span>🍋 3x</span><span>3x</span></div>
+          <div class="payout-row"><span>🍊 3x</span><span>4x</span></div>
+          <div class="payout-row"><span>🍉 3x</span><span>5x</span></div>
+          <div class="payout-row"><span>⭐ 3x</span><span>10x</span></div>
+          <div class="payout-row"><span>💎 3x</span><span>20x</span></div>
+          <div class="payout-row"><span>7️⃣ 3x</span><span>50x JACKPOT!</span></div>
+        </div>
+      </div>
+    `;
+  }
+
+  setupEventListeners() {
+    this.shadowRoot.getElementById('spinBtn').addEventListener('click', () => this.spin());
+    this.shadowRoot.getElementById('increaseBet').addEventListener('click', () => this.changeBet(5));
+    this.shadowRoot.getElementById('decreaseBet').addEventListener('click', () => this.changeBet(-5));
+  }
+
+  changeBet(amount) {
+    if (this.isSpinning) return;
+    this.bet = Math.max(5, Math.min(100, this.bet + amount));
+    this.updateDisplay();
+  }
+
+  async spin() {
+    if (this.isSpinning || this.balance < this.bet) {
+      if (this.balance < this.bet) {
+        this.showMessage('❌ Insufficient balance!', 'lose');
+      }
+      return;
+    }
+
+    this.isSpinning = true;
+    this.balance -= this.bet;
+    this.updateDisplay();
+
+    const reel1 = this.shadowRoot.getElementById('reel1');
+    const reel2 = this.shadowRoot.getElementById('reel2');
+    const reel3 = this.shadowRoot.getElementById('reel3');
+    const spinBtn = this.shadowRoot.getElementById('spinBtn');
+
+    spinBtn.textContent = 'SPINNING...';
+    spinBtn.disabled = true;
+    reel1.classList.add('spinning');
+    reel2.classList.add('spinning');
+    reel3.classList.add('spinning');
+
+    // Simulate spinning
+    const spinDuration = 2000;
+    const spinInterval = 100;
+    const startTime = Date.now();
+
+    const spinReels = setInterval(() => {
+      reel1.textContent = this.symbols[Math.floor(Math.random() * this.symbols.length)];
+      reel2.textContent = this.symbols[Math.floor(Math.random() * this.symbols.length)];
+      reel3.textContent = this.symbols[Math.floor(Math.random() * this.symbols.length)];
+
+      if (Date.now() - startTime > spinDuration) {
+        clearInterval(spinReels);
+        this.stopSpin();
+      }
+    }, spinInterval);
+  }
+
+  stopSpin() {
+    const reel1 = this.shadowRoot.getElementById('reel1');
+    const reel2 = this.shadowRoot.getElementById('reel2');
+    const reel3 = this.shadowRoot.getElementById('reel3');
+    const spinBtn = this.shadowRoot.getElementById('spinBtn');
+
+    reel1.classList.remove('spinning');
+    reel2.classList.remove('spinning');
+    reel3.classList.remove('spinning');
+
+    // Final results
+    const result1 = this.symbols[Math.floor(Math.random() * this.symbols.length)];
+    const result2 = this.symbols[Math.floor(Math.random() * this.symbols.length)];
+    const result3 = this.symbols[Math.floor(Math.random() * this.symbols.length)];
+
+    reel1.textContent = result1;
+    reel2.textContent = result2;
+    reel3.textContent = result3;
+
+    this.calculateWinnings(result1, result2, result3);
+    
+    spinBtn.textContent = 'SPIN';
+    spinBtn.disabled = false;
+    this.isSpinning = false;
+  }
+
+  calculateWinnings(r1, r2, r3) {
+    if (r1 === r2 && r2 === r3) {
+      const multiplier = this.symbolValues[r1];
+      const winnings = this.bet * multiplier;
+      this.balance += winnings;
+      this.showMessage(`🎉 JACKPOT! You won $${winnings}!`, 'win');
+      
+      // Generate redemption code for big wins
+      if (winnings >= 100) {
+        setTimeout(() => {
+          alert(`🏆 CONGRATULATIONS! You've earned a redemption code: WIN-${Math.random().toString(36).substr(2, 9).toUpperCase()}`);
+        }, 1000);
+      }
+    } else if (r1 === r2 || r2 === r3 || r1 === r3) {
+      const smallWin = this.bet * 0.5;
+      this.balance += smallWin;
+      this.showMessage(`💰 Small win! $${smallWin}`, 'win');
+    } else {
+      this.showMessage('😔 Try again!', 'lose');
+    }
+
+    this.updateDisplay();
+  }
+
+  showMessage(text, type) {
+    const messageEl = this.shadowRoot.getElementById('message');
+    messageEl.textContent = text;
+    messageEl.className = `message ${type}`;
+  }
+
+  updateDisplay() {
+    this.shadowRoot.getElementById('balance').textContent = this.balance;
+    this.shadowRoot.getElementById('betAmount').textContent = this.bet;

games.html

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Casino Games - CodeVault Casino</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#ffffff',
+                        secondary: '#ef4444'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <casino-navbar></casino-navbar>
+    
+    <main class="container mx-auto px-4 py-8 max-w-7xl">
+        <!-- Header -->
+        <section class="text-center mb-12">
+            <h1 class="text-5xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                Casino Games
+            </h1>
+            <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-6">
+                Play classic casino games and win exclusive redemption codes!
+            </p>
+            <div class="flex justify-center gap-4">
+                <div class="px-4 py-2 bg-red-500/20 border border-red-500/30 rounded-full text-sm flex items-center gap-2">
+                    <i data-feather="trending-up" class="w-4 h-4"></i>
+                    Win Codes
+                </div>
+                <div class="px-4 py-2 bg-red-500/20 border border-red-500/30 rounded-full text-sm flex items-center gap-2">
+                    <i data-feather="award" class="w-4 h-4"></i>
+                    Daily Bonuses
+                </div>
+            </div>
+        </section>
+
+        <!-- Game Selection -->
+        <section class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
+            <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-6 hover:border-red-500/50 transition-all hover:shadow-2xl hover:shadow-red-500/20 game-card" data-game="slots">
+                <div class="w-16 h-16 bg-red-500 rounded-xl flex items-center justify-center mx-auto mb-4">
+                    <i data-feather="box" class="w-8 h-8"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-center mb-2">Slot Machine</h3>
+                <p class="text-gray-400 text-center mb-4">Spin the reels and match symbols to win big!</p>
+                <button class="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-semibold transition-all">
+                    Play Now
+                </button>
+            </div>
+
+            <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-6 hover:border-red-500/50 transition-all hover:shadow-2xl hover:shadow-red-500/20 game-card" data-game="roulette">
+                <div class="w-16 h-16 bg-red-500 rounded-xl flex items-center justify-center mx-auto mb-4">
+                    <i data-feather="target" class="w-8 h-8"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-center mb-2">Roulette</h3>
+                <p class="text-gray-400 text-center mb-4">Place your bets and watch the wheel spin!</p>
+                <button class="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-semibold transition-all">
+                    Play Now
+                </button>
+            </div>
+
+            <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-6 hover:border-red-500/50 transition-all hover:shadow-2xl hover:shadow-red-500/20 game-card" data-game="blackjack">
+                <div class="w-16 h-16 bg-red-500 rounded-xl flex items-center justify-center mx-auto mb-4">
+                    <i data-feather="layers" class="w-8 h-8"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-center mb-2">Blackjack</h3>
+                <p class="text-gray-400 text-center mb-4">Beat the dealer in this classic card game!</p>
+                <button class="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-semibold transition-all">
+                    Play Now
+                </button>
+            </div>
+        </section>
+
+        <!-- Game Area (Hidden by default) -->
+        <section id="gameArea" class="hidden">
+            <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-8 shadow-2xl">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 id="gameTitle" class="text-3xl font-bold"></h2>
+                    <button id="closeGame" class="text-gray-400 hover:text-white transition-colors">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                <div id="gameContainer">
+                    <!-- Games will be loaded here -->
+                </div>
+            </div>
+        </section>
+
+        <!-- Leaderboard -->
+        <section class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-8">
+            <h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
+                <i data-feather="trophy" class="w-6 h-6 text-yellow-500"></i>
+                Daily Leaderboard
+            </h2>
+            <div class="grid md:grid-cols-2 gap-6">
+                <div>
+                    <h3 class="text-lg font-semibold mb-3 text-red-400">Top Winners</h3>
+                    <div class="space-y-2">
+                        <div class="flex justify-between items-center p-3 bg-gray-700/30 rounded-lg">
+                            <span class="flex items-center gap-2">
+                                <span class="text-yellow-500">🥇</span> Player_7X2
+                            </span>
+                            <span class="text-green-400 font-semibold">+2,450</span>
+                        </div>
+                        <div class="flex justify-between items-center p-3 bg-gray-700/30 rounded-lg">
+                            <span class="flex items-center gap-2">
+                                <span class="text-gray-400">🥈</span> LuckyStar
+                            </span>
+                            <span class="text-green-400 font-semibold">+1,890</span>
+                        </div>
+                        <div class="flex justify-between items-center p-3 bg-gray-700/30 rounded-lg">
+                            <span class="flex items-center gap-2">
+                                <span class="text-orange-600">🥉</span> HighRoller
+                            </span>
+                            <span class="text-green-400 font-semibold">+1,620</span>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-3 text-red-400">Recent Wins</h3>
+                    <div class="space-y-2">
+                        <div class="flex justify-between items-center p-3 bg-gray-700/30 rounded-lg text-sm">
+                            <span>Slots - JACKPOT!</span>
+                            <span class="text-green-400">+$500</span>
+                        </div>
+                        <div class="flex justify-between items-center p-3 bg-gray-700/30 rounded-lg text-sm">
+                            <span>Roulette - Red 21</span>
+                            <span class="text-green-400">+$250</span>
+                        </div>
+                        <div class="flex justify-between items-center p-3 bg-gray-700/30 rounded-lg text-sm">
+                            <span>Blackjack - Natural</span>
+                            <span class="text-green-400">+$150</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+    
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/slot-machine.js"></script>
+    <script src="components/roulette.js"></script>
+    <script src="components/blackjack.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>

index.html

@@ -1,19 +1,113 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeVault Casino - Redeem Codes</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#ffffff',
+                        secondary: '#ef4444'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <casino-navbar></casino-navbar>
+    
+    <main class="container mx-auto px-4 py-8 max-w-6xl">
+        <!-- Hero Section -->
+        <section class="text-center mb-12">
+            <h1 class="text-5xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                CodeVault Casino
+            </h1>
+            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+                Redeem exclusive payment codes for instant crypto & cash rewards
+            </p>
+            <div class="mt-6 flex justify-center gap-4">
+                <span class="px-4 py-2 bg-red-500/20 border border-red-500/30 rounded-full text-sm flex items-center gap-2">
+                    <i data-feather="shield" class="w-4 h-4"></i>
+                    Secure & Verified
+                </span>
+                <span class="px-4 py-2 bg-red-500/20 border border-red-500/30 rounded-full text-sm flex items-center gap-2">
+                    <i data-feather="zap" class="w-4 h-4"></i>
+                    Instant Payout
+                </span>
+                <span class="px-4 py-2 bg-red-500/20 border border-red-500/30 rounded-full text-sm flex items-center gap-2">
+                    <i data-feather="clock" class="w-4 h-4"></i>
+                    24/7 Available
+                </span>
+            </div>
+        </section>
+
+        <!-- Redeem Section -->
+        <section class="grid md:grid-cols-2 gap-8 mb-12">
+            <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-8 shadow-2xl">
+                <div class="flex items-center gap-3 mb-6">
+                    <div class="w-12 h-12 bg-red-500 rounded-xl flex items-center justify-center">
+                        <i data-feather="gift" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold">Redeem Code</h2>
+                </div>
+                <redeem-form></redeem-form>
+            </div>
+
+            <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-8 shadow-2xl">
+                <div class="flex items-center gap-3 mb-6">
+                    <div class="w-12 h-12 bg-red-500 rounded-xl flex items-center justify-center">
+                        <i data-feather="info" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold">How It Works</h2>
+                </div>
+                <div class="space-y-4">
+                    <div class="flex gap-4">
+                        <div class="w-8 h-8 bg-red-500 rounded-full flex-shrink-0 flex items-center justify-center font-bold">1</div>
+                        <div>
+                            <h3 class="font-semibold mb-1">Get Your Code</h3>
+                            <p class="text-gray-400 text-sm">Receive exclusive payment codes from our admin team</p>
+                        </div>
+                    </div>
+                    <div class="flex gap-4">
+                        <div class="w-8 h-8 bg-red-500 rounded-full flex-shrink-0 flex items-center justify-center font-bold">2</div>
+                        <div>
+                            <h3 class="font-semibold mb-1">Enter Details</h3>
+                            <p class="text-gray-400 text-sm">Provide your wallet address or phone number</p>
+                        </div>
+                    </div>
+                    <div class="flex gap-4">
+                        <div class="w-8 h-8 bg-red-500 rounded-full flex-shrink-0 flex items-center justify-center font-bold">3</div>
+                        <div>
+                            <h3 class="font-semibold mb-1">Instant Redemption</h3>
+                            <p class="text-gray-400 text-sm">Get your funds transferred within seconds</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Stats Section -->
+        <section class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
+            <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 text-center">
+                <div class="text-3xl font-bold text-red-500 mb-2" id="totalCodes">0</div>
+                <div class="text-sm text-gray-400">Codes Generated</div>
+            </div>
+            <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 text-center">
+                <div class="text-3xl font-bold text-red-500 mb-2" id="totalRedeemed">0</div>
+                <div class="text-sm text-gray-400">Codes Redeemed</div>
+            </div>
+            <div class="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 text-center">
+                <div class="text-3xl font-bold text-red-500 mb-2" id="total
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>