<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latein Karteikarten - Einfach</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      background: linear-gradient(145deg, #93c5fd 0%, #60a5fa 30%, #4a94e8 60%, #7db8f5 100%),
                  repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(30, 80, 140, 0.1) 39px, rgba(30, 80, 140, 0.1) 40px),
                  repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(30, 80, 140, 0.1) 39px, rgba(30, 80, 140, 0.1) 40px);
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .container {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .progress-section {
      width: 100%;
      margin-bottom: 16px;
    }

    .progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .progress-text {
      font-size: 14px;
      color: #64748b;
    }

    .progress-stats {
      display: flex;
      gap: 12px;
      font-size: 14px;
    }

    .stat-correct {
      color: #16a34a;
    }

    .stat-incorrect {
      color: #dc2626;
    }

    .progress-bar {
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: #3b82f6;
      border-radius: 2px;
      transition: width 0.4s;
    }

    /* Card styles */
    .card-outer {
      perspective: 800px;
      width: 100%;
      max-width: 420px;
      height: 260px;
      cursor: pointer;
      margin-bottom: 24px;
    }

    .card-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.5s ease;
    }

    .card-inner.flipped {
      transform: rotateY(180deg);
    }

    .card-face {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
      box-sizing: border-box;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    }

    .card-front {
      background: white;
    }

    .card-back {
      transform: rotateY(180deg);
    }

    .card-label {
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 20px;
      border: 1px solid;
    }

    .card-text-main {
      font-size: 36px;
      font-weight: 700;
      color: #1e293b;
      letter-spacing: 0.5px;
    }

    .card-back .card-text-main {
      font-size: 32px;
    }

    .card-hint {
      font-size: 13px;
      color: #94a3b8;
      margin-top: 20px;
    }

    .card-back .card-hint {
      font-size: 14px;
      opacity: 0.6;
    }

    /* Buttons */
    .button-group {
      display: flex;
      gap: 12px;
      width: 100%;
    }

    .button {
      border: none;
      border-radius: 10px;
      padding: 12px 28px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      flex: 1;
    }

    .btn-wrong {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .btn-wrong:hover {
      background: #fee2e2;
    }

    .btn-correct {
      background: #f0fdf4;
      color: #16a34a;
      border: 1px solid #bbf7d0;
    }

    .btn-correct:hover {
      background: #dcfce7;
    }

    .btn-shuffle {
      background: transparent;
      color: #94a3b8;
      font-size: 13px;
      padding: 12px 28px;
      border: none;
      cursor: pointer;
      transition: all 0.15s;
    }

    .btn-shuffle:hover {
      color: #64748b;
    }

    .single-button-wrapper {
      width: 100%;
      text-align: center;
    }

    /* End screen */
    .end-screen {
      text-align: center;
      max-width: 420px;
      width: 100%;
    }

    .end-title {
      font-size: 24px;
      color: #1e293b;
      margin: 0 0 8px;
    }

    .end-subtitle {
      color: #64748b;
      margin: 0 0 24px;
      font-size: 15px;
    }

    .end-stats {
      display: flex;
      gap: 16px;
      justify-content: center;
      margin-bottom: 32px;
    }

    .stat-box {
      border-radius: 12px;
      padding: 20px 32px;
      text-align: center;
    }

    .stat-box-correct {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
    }

    .stat-box-incorrect {
      background: #fef2f2;
      border: 1px solid #fecaca;
    }

    .stat-number {
      font-size: 32px;
      font-weight: 800;
    }

    .stat-number-correct {
      color: #16a34a;
    }

    .stat-number-incorrect {
      color: #dc2626;
    }

    .stat-label {
      font-size: 13px;
      margin-top: 4px;
    }

    .stat-label-correct {
      color: #4ade80;
    }

    .stat-label-incorrect {
      color: #f87171;
    }

    .btn-restart {
      background: #3b82f6;
      color: white;
      font-size: 16px;
      padding: 14px 36px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s;
      font-weight: 600;
    }

    .btn-restart:hover {
      background: #2563eb;
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    const KARTEN = [
      { vorderseite: "vocare", rueckseite: "rufen", konjugation: "a-Konjugation" },
      { vorderseite: "clamare", rueckseite: "schreien, rufen", konjugation: "a-Konjugation" },
      { vorderseite: "properare", rueckseite: "eilen", konjugation: "a-Konjugation" },
      { vorderseite: "sedere", rueckseite: "sitzen", konjugation: "e-Konjugation" },
      { vorderseite: "gaudere", rueckseite: "sich freuen", konjugation: "e-Konjugation" },
      { vorderseite: "monere", rueckseite: "mahnen, ermahnen", konjugation: "e-Konjugation" },
      { vorderseite: "audire", rueckseite: "hören", konjugation: "i-Konjugation" },
      { vorderseite: "venire", rueckseite: "kommen", konjugation: "i-Konjugation" },
      { vorderseite: "parere", rueckseite: "gehorchen", konjugation: "e-Konjugation" },
      { vorderseite: "aperire", rueckseite: "öffnen", konjugation: "i-Konjugation" },
    ];

    const KONJ_FARBEN = {
      "a-Konjugation": { bg: "#fef3c7", text: "#92400e", border: "#f59e0b" },
      "e-Konjugation": { bg: "#dbeafe", text: "#1e40af", border: "#3b82f6" },
      "i-Konjugation": { bg: "#ede9fe", text: "#5b21b6", border: "#8b5cf6" },
    };

    class KarteikartenApp {
      constructor() {
        this.karten = this.shuffleArray([...KARTEN]);
        this.index = 0;
        this.umgedreht = false;
        this.gewusst = 0;
        this.nichtGewusst = 0;
        this.fertig = false;
        this.render();
      }

      shuffleArray(arr) {
        const a = [...arr];
        for (let i = a.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [a[i], a[j]] = [a[j], a[i]];
        }
        return a;
      }

      naechste(richtig) {
        if (richtig) {
          this.gewusst++;
        } else {
          this.nichtGewusst++;
        }

        if (this.index < this.karten.length - 1) {
          this.index++;
          this.umgedreht = false;
        } else {
          this.fertig = true;
        }
        this.render();
      }

      neustart() {
        this.karten = this.shuffleArray([...KARTEN]);
        this.index = 0;
        this.umgedreht = false;
        this.gewusst = 0;
        this.nichtGewusst = 0;
        this.fertig = false;
        this.render();
      }

      mischen() {
        this.karten = this.shuffleArray([...KARTEN]);
        this.index = 0;
        this.umgedreht = false;
        this.gewusst = 0;
        this.nichtGewusst = 0;
        this.fertig = false;
        this.render();
      }

      toggleCard() {
        this.umgedreht = !this.umgedreht;
        this.render();
      }

      render() {
        const app = document.getElementById('app');
        if (this.fertig) {
          app.innerHTML = this.renderEndScreen();
        } else {
          app.innerHTML = this.renderGame();
        }
        this.attachEventListeners();
      }

      renderEndScreen() {
        return `
          <div class="container end-screen">
            <h2 class="end-title">Geschafft!</h2>
            <p class="end-subtitle">Du hast alle ${this.karten.length} Karten durchgearbeitet.</p>

            <div class="end-stats">
              <div class="stat-box stat-box-correct">
                <div class="stat-number stat-number-correct">${this.gewusst}</div>
                <div class="stat-label stat-label-correct">Gewusst</div>
              </div>
              <div class="stat-box stat-box-incorrect">
                <div class="stat-number stat-number-incorrect">${this.nichtGewusst}</div>
                <div class="stat-label stat-label-incorrect">Nicht gewusst</div>
              </div>
            </div>

            <button class="btn-restart" data-action="restart">Nochmal üben</button>
          </div>
        `;
      }

      renderGame() {
        const karte = this.karten[this.index];
        const farben = KONJ_FARBEN[karte.konjugation];
        const progressPercent = (this.index / this.karten.length) * 100;

        return `
          <div class="container">
            <div class="progress-section">
              <div class="progress-header">
                <span class="progress-text">Karte ${this.index + 1} von ${this.karten.length}</span>
                <div class="progress-stats">
                  <span class="stat-correct">${this.gewusst} richtig</span>
                  <span class="stat-incorrect">${this.nichtGewusst} falsch</span>
                </div>
              </div>
              <div class="progress-bar">
                <div class="progress-fill" style="width: ${progressPercent}%"></div>
              </div>
            </div>

            <div class="card-outer" data-action="toggle-card">
              <div class="card-inner ${this.umgedreht ? 'flipped' : ''}">
                <!-- Vorderseite -->
                <div class="card-face card-front" style="border: 2px solid ${farben.border}">
                  <span class="card-label" style="background: ${farben.bg}; color: ${farben.text}; border-color: ${farben.border}">
                    ${karte.konjugation}
                  </span>
                  <div class="card-text-main">${karte.vorderseite}</div>
                  <div class="card-hint">Zum Umdrehen klicken</div>
                </div>

                <!-- Rückseite -->
                <div class="card-face card-back" style="background: ${farben.bg}; border: 2px solid ${farben.border}; color: ${farben.text}">
                  <span class="card-label" style="background: white; color: ${farben.text}; border-color: ${farben.border}">
                    ${karte.konjugation}
                  </span>
                  <div class="card-text-main">${karte.rueckseite}</div>
                  <div class="card-hint">${karte.vorderseite}</div>
                </div>
              </div>
            </div>

            ${this.umgedreht ? `
              <div class="button-group">
                <button class="button btn-wrong" data-action="wrong">Nicht gewusst</button>
                <button class="button btn-correct" data-action="correct">Gewusst!</button>
              </div>
            ` : `
              <div class="single-button-wrapper">
                <button class="btn-shuffle" data-action="shuffle">Karten mischen</button>
              </div>
            `}
          </div>
        `;
      }

      attachEventListeners() {
        document.querySelectorAll('[data-action]').forEach(el => {
          const action = el.getAttribute('data-action');
          el.addEventListener('click', (e) => {
            e.stopPropagation();
            switch (action) {
              case 'toggle-card':
                this.toggleCard();
                break;
              case 'correct':
                this.naechste(true);
                break;
              case 'wrong':
                this.naechste(false);
                break;
              case 'shuffle':
                this.mischen();
                break;
              case 'restart':
                this.neustart();
                break;
            }
          });
        });
      }
    }

    // Initialize app
    new KarteikartenApp();
  </script>
</body>
</html>
