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="Sharpen your blackjack skills with the Blackjack Strategy Trainer from BetDiamonds. Practice real in-game scenarios and test your knowledge of basic strategy against the dealer's upcard.">
  <meta name="theme-color" content="#2c3e50" />
  <title>🃏 Blackjack Strategy Trainer | Practice Basic Strategy | BetDiamonds</title>
  <style>
    :root {
      --primary: #2c3e50;
      --secondary: #e74c3c;
      --accent: #3498db;
      --light: #ecf0f1;
      --dark: #2c3e50;
      --success: #27ae60;
      --danger: #e74c3c;
      --warning: #f39c12;
      --info: #6f42c1;
      --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: 600px;
      margin: 0 auto;
    }
    
    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;
    }
    
    .game-area {
      background: white;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      margin-bottom: 1.5rem;
    }
    
    .hand-display {
      background: var(--light);
      padding: 1.5rem;
      border-radius: 8px;
      margin-bottom: 1.5rem;
      text-align: center;
      font-size: 1.1rem;
    }
    
    .hand-display strong {
      color: var(--primary);
    }
    
    .controls {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    
    @media (min-width: 480px) {
      .controls {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    
    .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-hit {
      background: var(--accent);
      color: white;
    }
    
    .btn-hit:hover {
      background: #2980b9;
    }
    
    .btn-stand {
      background: var(--success);
      color: white;
    }
    
    .btn-stand:hover {
      background: #219955;
    }
    
    .btn-double {
      background: var(--warning);
      color: var(--dark);
    }
    
    .btn-double:hover {
      background: #e67e22;
    }
    
    .btn-split {
      background: var(--info);
      color: white;
    }
    
    .btn-split:hover {
      background: #5a32a3;
    }
    
    .feedback {
      padding: 1rem;
      border-radius: 8px;
      margin-bottom: 1rem;
      font-weight: 600;
      text-align: center;
      display: none;
    }
    
    .feedback-correct {
      background: rgba(39, 174, 96, 0.1);
      color: var(--success);
      border-left: 4px solid var(--success);
      display: block;
    }
    
    .feedback-incorrect {
      background: rgba(231, 76, 60, 0.1);
      color: var(--danger);
      border-left: 4px solid var(--danger);
      display: block;
    }
    
    .stats {
      display: flex;
      justify-content: space-between;
      background: white;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      margin-bottom: 1.5rem;
    }
    
    .stat-item {
      text-align: center;
    }
    
    .stat-value {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--primary);
    }
    
    .stat-label {
      font-size: 0.8rem;
      color: var(--text-light);
    }
    
    .info-section {
      background: white;
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    .info-section h2 {
      color: var(--primary);
      font-size: 1.3rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .info-section p {
      margin-bottom: 1rem;
    }
    
    @media (max-width: 480px) {
      body {
        padding: 0.75rem;
      }
      
      .game-area, .info-section {
        padding: 1rem;
      }
      
      h1 {
        font-size: 1.6rem;
      }
    }
  </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-cards"></i> Blackjack Strategy Trainer</h1>
      <p class="description">
        Practice perfect basic strategy against any dealer upcard. Get instant feedback on your decisions
        and track your progress to lower the house edge.
      </p>
    </header>

    <div class="game-area">
      <div class="hand-display" id="handDisplay"></div>
      
      <div class="controls">
        <button class="btn btn-hit" onclick="checkAnswer('H')">
          <i class="fas fa-plus"></i> Hit
        </button>
        <button class="btn btn-stand" onclick="checkAnswer('S')">
          <i class="fas fa-hand-paper"></i> Stand
        </button>
        <button class="btn btn-double" onclick="checkAnswer('D')">
          <i class="fas fa-times"></i> Double
        </button>
        <button class="btn btn-split" onclick="checkAnswer('P')">
          <i class="fas fa-code-branch"></i> Split
        </button>
      </div>
      
      <div id="feedback" class="feedback"></div>
      
      <div class="stats">
        <div class="stat-item">
          <div class="stat-value" id="correctCount">0</div>
          <div class="stat-label">Correct</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" id="totalCount">0</div>
          <div class="stat-label">Total</div>
        </div>
        <div class="stat-item">
          <div class="stat-value" id="accuracy">0%</div>
          <div class="stat-label">Accuracy</div>
        </div>
      </div>
    </div>

    <div class="info-section">
      <h2><i class="fas fa-lightbulb"></i> Basic Strategy Tips</h2>
      <p><strong>Always split</strong> Aces and 8s. <strong>Never split</strong> 10s, 5s, or 4s.</p>
      <p><strong>Double down</strong> on 11 against any dealer card except Ace, and on 10 against dealer 2-9.</p>
      <p><strong>Stand</strong> on hard 17+ and soft 19+ regardless of the dealer's card.</p>
      <p><strong>Hit</strong> on hard 11 or less (you can't bust) and soft 17 or less.</p>
    </div>
  </div>

  <script>
    const hands = [
      { player: "Hard 16", dealer: "10", correct: "S", explanation: "Stand on hard 16 against dealer 10 (even though you'll likely lose, statistically it's better than hitting)" },
      { player: "Hard 12", dealer: "2", correct: "H", explanation: "Hit hard 12 against dealer 2-3 (stand against 4-6)" },
      { player: "Soft 18", dealer: "9", correct: "H", explanation: "Hit soft 18 against dealer 9-10-A (stand against 2-8)" },
      { player: "Pair of 8s", dealer: "10", correct: "P", explanation: "Always split 8s regardless of dealer's card" },
      { player: "Hard 11", dealer: "6", correct: "D", explanation: "Double down on hard 11 against dealer 2-10" },
      { player: "Soft 17", dealer: "3", correct: "D", explanation: "Double down on soft 17-18 against dealer 3-6" },
      { player: "Pair of 9s", dealer: "7", correct: "P", explanation: "Split 9s against dealer 2-9 (stand against 10-A)" },
      { player: "Hard 13", dealer: "6", correct: "S", explanation: "Stand on hard 13-16 against dealer 2-6" },
      { player: "Soft 15", dealer: "4", correct: "D", explanation: "Double down on soft 13-18 against dealer 4-6" },
      { player: "Pair of 5s", dealer: "10", correct: "H", explanation: "Never split 5s - treat as hard 10" },
      { player: "Hard 9", dealer: "3", correct: "D", explanation: "Double down on hard 9 against dealer 3-6" },
      { player: "Pair of Aces", dealer: "5", correct: "P", explanation: "Always split Aces" },
      { player: "Hard 17", dealer: "Ace", correct: "S", explanation: "Always stand on hard 17+" },
      { player: "Soft 19", dealer: "6", correct: "S", explanation: "Stand on soft 19+ against any dealer card" },
      { player: "Pair of 10s", dealer: "5", correct: "S", explanation: "Never split 10s - 20 is too strong to break up" }
    ];

    let current = {};
    let correctCount = 0;
    let totalCount = 0;
    let streak = 0;
    let maxStreak = 0;

    function newHand() {
      current = hands[Math.floor(Math.random() * hands.length)];
      document.getElementById('handDisplay').innerHTML = `
        <strong>Your Hand:</strong> ${current.player}<br>
        <strong>Dealer Shows:</strong> ${current.dealer}
      `;
      document.getElementById('feedback').className = 'feedback';
    }

    function checkAnswer(choice) {
      totalCount++;
      const feedbackEl = document.getElementById('feedback');
      
      if (choice === current.correct) {
        correctCount++;
        streak++;
        if (streak > maxStreak) maxStreak = streak;
        feedbackEl.className = 'feedback feedback-correct';
        feedbackEl.innerHTML = `
          <i class="fas fa-check-circle"></i> Correct! 
          <span style="display:block;font-weight:normal;margin-top:0.5rem;">${current.explanation}</span>
        `;
      } else {
        streak = 0;
        feedbackEl.className = 'feedback feedback-incorrect';
        feedbackEl.innerHTML = `
          <i class="fas fa-times-circle"></i> Incorrect! The correct move was <strong>${decodeMove(current.correct)}</strong>.
          <span style="display:block;font-weight:normal;margin-top:0.5rem;">${current.explanation}</span>
        `;
      }
      
      // Update stats
      document.getElementById('correctCount').textContent = correctCount;
      document.getElementById('totalCount').textContent = totalCount;
      document.getElementById('accuracy').textContent = `${((correctCount / totalCount) * 100).toFixed(0)}%`;
      
      setTimeout(newHand, 2500);
    }

    function decodeMove(code) {
      return {
        H: "Hit",
        S: "Stand",
        D: "Double Down",
        P: "Split"
      }[code];
    }

    // Initialize first hand
    newHand();
  </script>
</body>
</html>

betdiamonds