body { box-sizing: border-box; margin: 0; padding: 0; font-family: ‚Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow-x: hidden; } .game-container { width: 100%; max-width: 900px; padding: 2rem; text-align: center; } .header { margin-bottom: 2rem; } h1 { color: #ffffff; font-size: 2.5rem; margin: 0 0 1rem 0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .subtitle { color: #f0f0f0; font-size: 1.1rem; margin: 0; } .stats { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; } .stat-item { background: rgba(255, 255, 255, 0.2); padding: 1rem 1.5rem; border-radius: 12px; backdrop-filter: blur(10px); color: white; font-size: 1rem; font-weight: 600; } .stat-value { font-size: 1.5rem; display: block; margin-top: 0.3rem; } .game-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .card { aspect-ratio: 1; background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 3rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); user-select: none; position: relative; transform-style: preserve-3d; } .card:hover:not(.flipped):not(.matched) { transform: translateY(-5px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); } .card.flipped, .card.matched { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } .card.matched { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); cursor: default; opacity: 0.8; } .card-back { font-size: 2.5rem; } .question-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; justify-content: center; align-items: center; padding: 1rem; } .question-modal.active { display: flex; } .question-content { background: white; padding: 2.5rem; border-radius: 20px; max-width: 500px; width: 100%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); animation: slideIn 0.3s ease; } @keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .question-header { font-size: 3rem; margin-bottom: 1rem; } .question-label { color: #667eea; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; margin-bottom: 1rem; } .question-text { font-size: 1.3rem; color: #333; margin-bottom: 2rem; line-height: 1.5; } .question-button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 1rem 2rem; font-size: 1.1rem; border-radius: 12px; cursor: pointer; font-weight: 600; transition: transform 0.2s ease; width: 100%; } .question-button:hover { transform: scale(1.05); } .reset-button { background: rgba(255, 255, 255, 0.3); color: white; border: 2px solid white; padding: 1rem 2.5rem; font-size: 1.1rem; border-radius: 12px; cursor: pointer; font-weight: 600; transition: all 0.2s ease; backdrop-filter: blur(10px); } .reset-button:hover { background: rgba(255, 255, 255, 0.5); transform: scale(1.05); } .win-message { display: none; background: rgba(255, 255, 255, 0.95); padding: 2rem; border-radius: 20px; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .win-message.active { display: block; animation: slideIn 0.5s ease; } .win-message h2 { color: #667eea; font-size: 2rem; margin: 0 0 1rem 0; } .win-message p { color: #333; font-size: 1.1rem; margin: 0; } @media (max-width: 768px) { .game-board { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .card { font-size: 2.5rem; } h1 { font-size: 2rem; } .question-content { padding: 2rem; } .question-text { font-size: 1.1rem; } } @media (max-width: 480px) { .game-container { padding: 1rem; } .stats { gap: 1rem; } .stat-item { padding: 0.75rem 1rem; font-size: 0.9rem; } } @view-transition { navigation: auto; } const defaultConfig = { game_title: „Team Connect“, welcome_message: „Finde alle Emoji-Paare und beantworte die Fragen!“, card_found_message: „Super! Diskutiert diese Frage im Team:“ }; const emojis = [‚🎯‘, ‚🚀‘, ‚💡‘, ‚⭐‘, ‚🎨‘, ‚🌟‘]; const questions = [ „Welches Emoji beschreibt deinen Morgen am besten?“, „Was ist eine Arbeitskompetenz, auf die du stolz bist?“, „Wenn du ein Superheld wärst, welche Kraft hättest du?“, „Was ist dein Lieblingsort zum Nachdenken?“, „Welche drei Wörter beschreiben dich am besten?“, „Was motiviert dich bei der Arbeit am meisten?“, „Erzähle von einem kürzlichen Erfolg, den du gefeiert hast.“, „Was ist eine Sache, die du in diesem Team schätzt?“, „Wenn du ein neues Hobby lernen könntest, was wäre es?“, „Was ist dein bester Produktivitätstipp?“ ]; let cards = []; let flippedCards = []; let matchedPairs = 0; let moves = 0; let canFlip = true; function shuffleArray(array) { const shuffled = […array]; for (let i = shuffled.length – 1; i > 0; i–) { const j = Math.floor(Math.random() * (i + 1)); [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; } return shuffled; } function initializeGame() { const gameBoard = document.getElementById(‚game-board‘); gameBoard.innerHTML = “; const cardEmojis = […emojis, …emojis]; cards = shuffleArray(cardEmojis).map((emoji, index) => ({ id: index, emoji: emoji, isFlipped: false, isMatched: false })); cards.forEach(card => { const cardElement = document.createElement(‚div‘); cardElement.className = ‚card‘; cardElement.dataset.id = card.id; cardElement.innerHTML = ‚❓‚; cardElement.addEventListener(‚click‘, () => flipCard(card.id)); gameBoard.appendChild(cardElement); }); flippedCards = []; matchedPairs = 0; moves = 0; canFlip = true; updateStats(); const winMessage = document.getElementById(‚win-message‘); winMessage.classList.remove(‚active‘); } function flipCard(cardId) { if (!canFlip) return; const card = cards.find(c => c.id === cardId); if (card.isFlipped || card.isMatched) return; if (flippedCards.length >= 2) return; card.isFlipped = true; flippedCards.push(card); const cardElement = document.querySelector(`[data-id=“${cardId}“]`); cardElement.classList.add(‚flipped‘); cardElement.innerHTML = card.emoji; if (flippedCards.length === 2) { moves++; updateStats(); canFlip = false; setTimeout(() => { checkMatch(); }, 800); } } function checkMatch() { const [card1, card2] = flippedCards; if (card1.emoji === card2.emoji) { card1.isMatched = true; card2.isMatched = true; const cardElement1 = document.querySelector(`[data-id=“${card1.id}“]`); const cardElement2 = document.querySelector(`[data-id=“${card2.id}“]`); cardElement1.classList.add(‚matched‘); cardElement2.classList.add(‚matched‘); matchedPairs++; updateStats(); const randomQuestion = questions[Math.floor(Math.random() * questions.length)]; showQuestion(card1.emoji, randomQuestion); if (matchedPairs === emojis.length) { setTimeout(() => { const winMessage = document.getElementById(‚win-message‘); winMessage.classList.add(‚active‘); }, 500); } } else { setTimeout(() => { card1.isFlipped = false; card2.isFlipped = false; const cardElement1 = document.querySelector(`[data-id=“${card1.id}“]`); const cardElement2 = document.querySelector(`[data-id=“${card2.id}“]`); cardElement1.classList.remove(‚flipped‘); cardElement2.classList.remove(‚flipped‘); cardElement1.innerHTML = ‚❓‚; cardElement2.innerHTML = ‚❓‚; canFlip = true; }, 600); } flippedCards = []; if (card1.emoji === card2.emoji) { canFlip = true; } } function showQuestion(emoji, question) { const modal = document.getElementById(‚question-modal‘); const modalEmoji = document.getElementById(‚modal-emoji‘); const modalQuestion = document.getElementById(‚modal-question‘); modalEmoji.textContent = emoji; modalQuestion.textContent = question; modal.classList.add(‚active‘); } function updateStats() { document.getElementById(‚moves-count‘).textContent = moves; document.getElementById(‚pairs-count‘).textContent = `${matchedPairs} / ${emojis.length}`; } async function onConfigChange(config) { document.getElementById(‚game-title‘).textContent = config.game_title || defaultConfig.game_title; document.getElementById(‚welcome-message‘).textContent = config.welcome_message || defaultConfig.welcome_message; document.getElementById(‚card-found-message‘).textContent = config.card_found_message || defaultConfig.card_found_message; } if (window.elementSdk) { window.elementSdk.init({ defaultConfig: defaultConfig, onConfigChange: onConfigChange, mapToCapabilities: (config) => ({ recolorables: [], borderables: [], fontEditable: undefined, fontSizeable: undefined }), mapToEditPanelValues: (config) => new Map([ [„game_title“, config.game_title || defaultConfig.game_title], [„welcome_message“, config.welcome_message || defaultConfig.welcome_message], [„card_found_message“, config.card_found_message || defaultConfig.card_found_message] ]) }); } document.getElementById(‚close-modal‘).addEventListener(‚click‘, () => { const modal = document.getElementById(‚question-modal‘); modal.classList.remove(‚active‘); }); document.getElementById(‚reset-button‘).addEventListener(‚click‘, () => { initializeGame(); }); initializeGame(); (function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement(’script‘);d.innerHTML=“window.__CF$cv$params={r:’9a716fcc10cc57e0′,t:’MTc2NDU4MDA3Mi4wMDAwMDA=‘};var a=document.createElement(’script‘);a.nonce=“;a.src=’/cdn-cgi/challenge-platform/scripts/jsd/main.js‘;document.getElementsByTagName(‚head‘)[0].appendChild(a);“;b.getElementsByTagName(‚head‘)[0].appendChild(d)}}if(document.body){var a=document.createElement(‚iframe‘);a.height=1;a.width=1;a.style.position=’absolute‘;a.style.top=0;a.style.left=0;a.style.border=’none‘;a.style.visibility=’hidden‘;document.body.appendChild(a);if(‚loading‘!==document.readyState)c();else if(window.addEventListener)document.addEventListener(‚DOMContentLoaded‘,c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);’loading‘!==document.readyState&&(document.onreadystatechange=e,c())}}}})();