Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"/>
  <meta name="description" content="Track your slot sessions with BetDiamonds' Slot Session Tracker. Log spins, bets, wins, and calculate profit/loss and ROI instantly. Stay in control and play smarter.">
  <meta name="theme-color" content="#2c3e50" />
  <title>📊 Slot Session Tracker | Track Spins, Bets & ROI | BetDiamonds</title>
  <style>
    :root {
      --primary: #2c3e50;
      --secondary: #e74c3c;
      --accent: #3498db;
      --light: #ecf0f1;
      --dark: #2c3e50;
      --success: #27ae60;
      --danger: #e74c3c;
      --text: #34495e;
      --text-light: #7f8c8d;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      padding: 1rem;
      background: #f5f7fa;
      color: var(--text);
      line-height: 1.5;
    }
    
    .container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    
    header {
      text-align: center;
      margin-bottom: 1.5rem;
    }
    
    h1 {
      color: var(--primary);
      font-size: clamp(1.8rem, 4vw, 2.2rem);
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }
    
    .description {
      color: var(--text-light);
      max-width: 800px;
      margin: 0 auto 1.5rem;
      font-size: clamp(0.95rem, 2vw, 1.05rem);
      text-align: center;
    }
    
    .form-card {
      background: white;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      margin-bottom: 2rem;
    }
    
    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem;
    }
    
    .form-group {
      margin-bottom: 0.5rem;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 600;
      color: var(--dark);
      font-size: 0.95rem;
    }
    
    .form-control {
      width: 100%;
      padding: 0.75rem;
      font-size: 1rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      transition: border-color 0.2s;
    }
    
    .form-control:focus {
      outline: none;
      border-color: var(--accent);
    }
    
    .btn {
      padding: 0.85rem;
      font-size: 1rem;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }
    
    .btn-primary {
      background: var(--accent);
      color: white;
      margin-top: 0.5rem;
    }
    
    .btn-primary:hover {
      background: #2980b9;
    }
    
    .stats-card {
      background: white;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      margin-bottom: 2rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
      text-align: center;
    }
    
    .stat-item h3 {
      font-size: 1.5rem;
      color: var(--primary);
      margin-bottom: 0.25rem;
    }
    
    .stat-item p {
      color: var(--text-light);
      font-size: 0.9rem;
    }
    
    .profit {
      color: var(--success);
      font-weight: 600;
    }
    
    .loss {
      color: var(--danger);
      font-weight: 600;
    }
    
    .table-container {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 2rem;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.95rem;
      min-width: 600px;
    }
    
    th {
      background: var(--primary);
      color: white;
      text-align: left;
      padding: 1rem;
      font-weight: 600;
    }
    
    td {
      padding: 1rem;
      border-bottom: 1px solid #eee;
    }
    
    tr:last-child td {
      border-bottom: none;
    }
    
    tr:hover {
      background: #f9f9f9;
    }
    
    .action-btn {
      background: none;
      border: none;
      color: var(--danger);
      cursor: pointer;
      font-size: 1rem;
      padding: 0.25rem;
    }
    
    .empty-state {
      text-align: center;
      padding: 2rem;
      color: var(--text-light);
    }
    
    @media (max-width: 768px) {
      .form-grid {
        grid-template-columns: 1fr;
      }
      
      .stats-card {
        grid-template-columns: 1fr 1fr;
      }
      
      th, td {
        padding: 0.75rem;
      }
    }
    
    @media (max-width: 480px) {
      body {
        padding: 0.75rem;
      }
      
      .form-card, .stats-card, .table-container {
        padding: 1rem;
      }
      
      .stats-card {
        grid-template-columns: 1fr;
      }
      
      .stat-item h3 {
        font-size: 1.25rem;
      }
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <div class="container">
    <header>
      <h1><i class="fas fa-chart-line"></i> Slot Session Tracker</h1>
      <p class="description">
        Track your slot sessions in real time. Log spins, bets, and wins to calculate profit/loss and ROI instantly. 
        Stay in control and play smarter with BetDiamonds.
      </p>
    </header>

    <div class="form-card">
      <form id="sessionForm">
        <div class="form-grid">
          <div class="form-group">
            <label for="slotName">Slot Name</label>
            <input type="text" id="slotName" class="form-control" placeholder="e.g. Book of Dead" required />
          </div>
          
          <div class="form-group">
            <label for="spins">Number of Spins</label>
            <input type="number" id="spins" class="form-control" min="1" placeholder="e.g. 100" required />
          </div>
          
          <div class="form-group">
            <label for="bet">Total Bet (€)</label>
            <input type="number" id="bet" class="form-control" step="0.01" min="0" placeholder="e.g. 50.00" required />
          </div>
          
          <div class="form-group">
            <label for="win">Total Win (€)</label>
            <input type="number" id="win" class="form-control" step="0.01" min="0" placeholder="e.g. 75.00" required />
          </div>
        </div>
        
        <button type="submit" class="btn btn-primary">
          <i class="fas fa-plus-circle"></i> Add Session
        </button>
      </form>
    </div>

    <div class="stats-card" id="statsCard" style="display: none;">
      <div class="stat-item">
        <h3 id="totalSessions">0</h3>
        <p>Total Sessions</p>
      </div>
      <div class="stat-item">
        <h3 id="totalSpins">0</h3>
        <p>Total Spins</p>
      </div>
      <div class="stat-item">
        <h3 id="totalBet">€0.00</h3>
        <p>Total Bet</p>
      </div>
      <div class="stat-item">
        <h3 id="totalProfit" class="profit">€0.00</h3>
        <p>Net Profit</p>
      </div>
    </div>

    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>Slot</th>
            <th>Spins</th>
            <th>Bet (€)</th>
            <th>Win (€)</th>
            <th>Profit/Loss</th>
            <th>ROI</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="sessionTable">
          <tr class="empty-state">
            <td colspan="7">No sessions recorded yet. Add your first session above!</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script>
    const form = document.getElementById('sessionForm');
    const table = document.getElementById('sessionTable');
    const statsCard = document.getElementById('statsCard');
    let sessions = [];
    
    // Load saved sessions from localStorage
    if (localStorage.getItem('slotSessions')) {
      sessions = JSON.parse(localStorage.getItem('slotSessions'));
      renderSessions();
    }

    form.addEventListener('submit', function (e) {
      e.preventDefault();

      const slot = document.getElementById('slotName').value.trim();
      const spins = parseInt(document.getElementById('spins').value);
      const bet = parseFloat(document.getElementById('bet').value);
      const win = parseFloat(document.getElementById('win').value);

      if (!slot || isNaN(spins) || isNaN(bet) || isNaN(win)) return;

      const session = {
        id: Date.now(),
        slot,
        spins,
        bet,
        win,
        profit: win - bet,
        roi: bet > 0 ? ((win - bet) / bet) * 100 : 0
      };

      sessions.push(session);
      saveSessions();
      renderSessions();
      form.reset();
      document.getElementById('slotName').focus();
    });

    function renderSessions() {
      if (sessions.length === 0) {
        table.innerHTML = `
          <tr class="empty-state">
            <td colspan="7">No sessions recorded yet. Add your first session above!</td>
          </tr>
        `;
        statsCard.style.display = 'none';
        return;
      }

      // Show stats card
      statsCard.style.display = 'grid';
      
      // Calculate totals
      const totalSessions = sessions.length;
      const totalSpins = sessions.reduce((sum, session) => sum + session.spins, 0);
      const totalBet = sessions.reduce((sum, session) => sum + session.bet, 0);
      const totalWin = sessions.reduce((sum, session) => sum + session.win, 0);
      const totalProfit = totalWin - totalBet;
      
      // Update stats
      document.getElementById('totalSessions').textContent = totalSessions;
      document.getElementById('totalSpins').textContent = totalSpins.toLocaleString();
      document.getElementById('totalBet').textContent = `€${totalBet.toFixed(2)}`;
      
      const totalProfitEl = document.getElementById('totalProfit');
      totalProfitEl.textContent = `€${Math.abs(totalProfit).toFixed(2)}`;
      totalProfitEl.className = totalProfit >= 0 ? 'profit' : 'loss';
      
      // Render sessions table
      table.innerHTML = sessions.map(session => `
        <tr data-id="${session.id}">
          <td>${session.slot}</td>
          <td>${session.spins}</td>
          <td>€${session.bet.toFixed(2)}</td>
          <td>€${session.win.toFixed(2)}</td>
          <td class="${session.profit >= 0 ? 'profit' : 'loss'}">
            €${Math.abs(session.profit).toFixed(2)}
          </td>
          <td class="${session.profit >= 0 ? 'profit' : 'loss'}">
            ${session.roi.toFixed(2)}%
          </td>
          <td>
            <button class="action-btn" onclick="deleteSession(${session.id})">
              <i class="fas fa-trash-alt"></i>
            </button>
          </td>
        </tr>
      `).join('');
    }
    
    function deleteSession(id) {
      sessions = sessions.filter(session => session.id !== id);
      saveSessions();
      renderSessions();
    }
    
    function saveSessions() {
      localStorage.setItem('slotSessions', JSON.stringify(sessions));
    }
  </script>
</body>
</html>

betdiamonds