feat: BreakPilot PWA - Full codebase (clean push without large binaries)

All services: admin-v2, studio-v2, website, ai-compliance-sdk, consent-service, klausur-service, voice-service, and infrastructure. Large PDFs and compiled binaries excluded via .gitignore.
2026-02-11 13:25:58 +01:00
commit 19855efacc
2512 changed files with 933814 additions and 0 deletions
--- a/h5p-service/players/memory-player.html
+++ b/h5p-service/players/memory-player.html
@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Memory Game - BreakPilot H5P</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      padding: 20px;
+      min-height: 100vh;
+    }
+    .container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    .header {
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      margin-bottom: 20px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+    h1 {
+      color: #333;
+      margin-bottom: 8px;
+      font-size: 28px;
+    }
+    .stats {
+      display: flex;
+      gap: 24px;
+      margin-top: 16px;
+    }
+    .stat {
+      flex: 1;
+      background: #f9fafb;
+      padding: 12px 16px;
+      border-radius: 8px;
+      text-align: center;
+    }
+    .stat-label {
+      color: #6b7280;
+      font-size: 12px;
+      text-transform: uppercase;
+      margin-bottom: 4px;
+    }
+    .stat-value {
+      color: #1f2937;
+      font-size: 24px;
+      font-weight: 700;
+    }
+    .game-board {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+    .card {
+      aspect-ratio: 1;
+      background: white;
+      border-radius: 12px;
+      cursor: pointer;
+      position: relative;
+      transform-style: preserve-3d;
+      transition: transform 0.6s;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+    .card.flipped {
+      transform: rotateY(180deg);
+    }
+    .card.matched {
+      opacity: 0.5;
+      cursor: default;
+    }
+    .card-face {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      backface-visibility: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      border-radius: 12px;
+      font-size: 16px;
+      font-weight: 600;
+      text-align: center;
+      word-wrap: break-word;
+    }
+    .card-front {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      font-size: 48px;
+    }
+    .card-back {
+      background: white;
+      color: #1f2937;
+      transform: rotateY(180deg);
+      border: 3px solid #e5e7eb;
+    }
+    .card.matched .card-back {
+      background: #d1fae5;
+      border-color: #10b981;
+      color: #065f46;
+    }
+    .results {
+      background: white;
+      border-radius: 12px;
+      padding: 32px;
+      text-align: center;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      display: none;
+    }
+    .results h2 {
+      color: #333;
+      font-size: 32px;
+      margin-bottom: 16px;
+    }
+    .results .trophy {
+      font-size: 80px;
+      margin: 20px 0;
+    }
+    .results .time {
+      font-size: 48px;
+      font-weight: 700;
+      color: #667eea;
+      margin: 20px 0;
+    }
+    .btn {
+      padding: 12px 24px;
+      border: none;
+      border-radius: 8px;
+      font-weight: 600;
+      cursor: pointer;
+      font-size: 14px;
+      transition: all 0.2s;
+      background: #667eea;
+      color: white;
+      margin-top: 20px;
+    }
+    .btn:hover {
+      background: #5568d3;
+      transform: translateY(-2px);
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1 id="title"></h1>
+      <p id="description" style="color: #6b7280; margin-top: 8px;"></p>
+      <div class="stats">
+        <div class="stat">
+          <div class="stat-label">Züge</div>
+          <div class="stat-value" id="moves">0</div>
+        </div>
+        <div class="stat">
+          <div class="stat-label">Gefunden</div>
+          <div class="stat-value"><span id="matched">0</span> / <span id="total">0</span></div>
+        </div>
+        <div class="stat">
+          <div class="stat-label">Zeit</div>
+          <div class="stat-value" id="time">0:00</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="game-board" id="gameBoard"></div>
+
+    <div class="results" id="results">
+      <div class="trophy">🏆</div>
+      <h2>Geschafft!</h2>
+      <p style="color: #6b7280; margin: 12px 0;">Du hast alle Paare gefunden!</p>
+      <div class="time" id="finalTime"></div>
+      <p style="color: #6b7280;"><span id="finalMoves"></span> Züge</p>
+      <button class="btn" onclick="restart()">🔄 Nochmal spielen</button>
+    </div>
+  </div>
+
+  <script>
+    let data = null;
+    let cards = [];
+    let flippedCards = [];
+    let matchedPairs = 0;
+    let moves = 0;
+    let startTime = null;
+    let timerInterval = null;
+    let canFlip = true;
+
+    function loadGame() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const dataParam = urlParams.get('data');
+
+      if (dataParam) {
+        try {
+          data = JSON.parse(decodeURIComponent(dataParam));
+        } catch (e) {
+          alert('Fehler beim Laden!');
+          return;
+        }
+      }
+
+      if (!data) {
+        alert('Keine Daten gefunden!');
+        return;
+      }
+
+      document.getElementById('title').textContent = data.title;
+      document.getElementById('description').textContent = data.description || '';
+      document.getElementById('total').textContent = data.pairs.length;
+
+      createCards();
+      renderBoard();
+      startTimer();
+    }
+
+    function createCards() {
+      // Create card array (2 cards per pair)
+      cards = [];
+      data.pairs.forEach((pair, index) => {
+        cards.push({ id: `${index}-1`, pairId: index, text: pair.card1 });
+        cards.push({ id: `${index}-2`, pairId: index, text: pair.card2 });
+      });
+
+      // Shuffle cards
+      cards = cards.sort(() => Math.random() - 0.5);
+    }
+
+    function renderBoard() {
+      const board = document.getElementById('gameBoard');
+      board.innerHTML = '';
+
+      cards.forEach((card, index) => {
+        const cardEl = document.createElement('div');
+        cardEl.className = 'card';
+        cardEl.dataset.cardId = card.id;
+        cardEl.dataset.pairId = card.pairId;
+        cardEl.innerHTML = `
+          <div class="card-face card-front">🧠</div>
+          <div class="card-face card-back">${card.text}</div>
+        `;
+        cardEl.addEventListener('click', () => flipCard(cardEl, card));
+        board.appendChild(cardEl);
+      });
+    }
+
+    function flipCard(cardEl, card) {
+      if (!canFlip) return;
+      if (cardEl.classList.contains('flipped')) return;
+      if (cardEl.classList.contains('matched')) return;
+
+      cardEl.classList.add('flipped');
+      flippedCards.push({ element: cardEl, card });
+
+      if (flippedCards.length === 2) {
+        canFlip = false;
+        moves++;
+        document.getElementById('moves').textContent = moves;
+        checkMatch();
+      }
+    }
+
+    function checkMatch() {
+      const [first, second] = flippedCards;
+
+      if (first.card.pairId === second.card.pairId) {
+        // Match!
+        setTimeout(() => {
+          first.element.classList.add('matched');
+          second.element.classList.add('matched');
+          flippedCards = [];
+          canFlip = true;
+          matchedPairs++;
+          document.getElementById('matched').textContent = matchedPairs;
+
+          if (matchedPairs === data.pairs.length) {
+            endGame();
+          }
+        }, 500);
+      } else {
+        // No match
+        setTimeout(() => {
+          first.element.classList.remove('flipped');
+          second.element.classList.remove('flipped');
+          flippedCards = [];
+          canFlip = true;
+        }, 1000);
+      }
+    }
+
+    function startTimer() {
+      startTime = Date.now();
+      timerInterval = setInterval(updateTimer, 1000);
+    }
+
+    function updateTimer() {
+      const elapsed = Math.floor((Date.now() - startTime) / 1000);
+      const minutes = Math.floor(elapsed / 60);
+      const seconds = elapsed % 60;
+      document.getElementById('time').textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    }
+
+    function endGame() {
+      clearInterval(timerInterval);
+      const elapsed = Math.floor((Date.now() - startTime) / 1000);
+      const minutes = Math.floor(elapsed / 60);
+      const seconds = elapsed % 60;
+
+      document.getElementById('finalTime').textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+      document.getElementById('finalMoves').textContent = moves;
+
+      setTimeout(() => {
+        document.getElementById('results').style.display = 'block';
+        document.querySelector('.game-board').style.display = 'none';
+      }, 1000);
+    }
+
+    function restart() {
+      matchedPairs = 0;
+      moves = 0;
+      flippedCards = [];
+      canFlip = true;
+
+      document.getElementById('moves').textContent = 0;
+      document.getElementById('matched').textContent = 0;
+      document.getElementById('results').style.display = 'none';
+      document.querySelector('.game-board').style.display = 'grid';
+
+      createCards();
+      renderBoard();
+      clearInterval(timerInterval);
+      startTimer();
+    }
+
+    loadGame();
+  </script>
+</body>
+</html>