AkuMantap – Flashcards

Deutsch Flashcards

Verbessere dein Deutsch mit unseren interaktiven Flashcards. Klicke auf die Karte, um sie umzudrehen und die Übersetzung zu sehen.

Deutsch Flashcards

Verbessere dein Deutsch mit unseren interaktiven Flashcards. Klicke auf die Karte, um sie umzudrehen und die Übersetzung zu sehen.

]; let currentIndex = 0; let isFlipped = false; const flashcard = document.getElementById('flashcard'); const frontText = document.getElementById('front-text'); const backText = document.getElementById('back-text'); const cardCounter = document.getElementById('card-counter'); const progressBar = document.getElementById('progress-bar'); const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const flipBtn = document.getElementById('flip-btn'); // Initialize flashcard function loadCard(index) { frontText.innerHTML = cards[index].front; backText.innerHTML = cards[index].back; cardCounter.textContent = `${index + 1}/${cards.length}`; progressBar.style.width = `${((index + 1) / cards.length) * 100}%`; // Reset flip state isFlipped = false; flashcard.classList.remove('flipped'); } // Flip card function flipCard() { flashcard.classList.toggle('flipped'); isFlipped = !isFlipped; } // Next card with animation function nextCard() { // First unflip if needed if (isFlipped) { flashcard.classList.remove('flipped'); isFlipped = false; // Wait for flip animation to complete setTimeout(() => { currentIndex = (currentIndex + 1) % cards.length; loadCard(currentIndex); }, 400); } else { currentIndex = (currentIndex + 1) % cards.length; loadCard(currentIndex); } } // Previous card with animation function prevCard() { // First unflip if needed if (isFlipped) { flashcard.classList.remove('flipped'); isFlipped = false; // Wait for flip animation to complete setTimeout(() => { currentIndex = (currentIndex - 1 + cards.length) % cards.length; loadCard(currentIndex); }, 400); } else { currentIndex = (currentIndex - 1 + cards.length) % cards.length; loadCard(currentIndex); } } // Event listeners flashcard.addEventListener('click', flipCard); flipBtn.addEventListener('click', flipCard); prevBtn.addEventListener('click', prevCard); nextBtn.addEventListener('click', nextCard); // Create stars function createStars() { const spaceContainer = document.querySelector('.space-container'); const containerWidth = spaceContainer.offsetWidth; const containerHeight = spaceContainer.offsetHeight; for (let i = 0; i < 100; i++) { const star = document.createElement('div'); star.classList.add('star'); // Random position const left = Math.random() * containerWidth; const top = Math.random() * containerHeight; // Random size const size = Math.random() * 3; // Random animation delay const delay = Math.random() * 4; star.style.left = `${left}px`; star.style.top = `${top}px`; star.style.width = `${size}px`; star.style.height = `${size}px`; star.style.animationDelay = `${delay}s`; spaceContainer.appendChild(star); } } // Create shooting stars function createShootingStars() { const spaceContainer = document.querySelector('.space-container'); for (let i = 0; i < 3; i++) { const shootingStar = document.createElement('div'); shootingStar.classList.add('shooting-star'); // Random position const top = Math.random() * 60; // Random animation delay const delay = Math.random() * 15; shootingStar.style.top = `${top}%`; shootingStar.style.animationDelay = `${delay}s`; spaceContainer.appendChild(shootingStar); } } // Initialize loadCard(currentIndex); createStars(); createShootingStars(); // Header scroll effect with debounce const header = document.getElementById('header'); let scrollTimeout; const handleScroll = () => { if (scrollTimeout) { window.cancelAnimationFrame(scrollTimeout); } scrollTimeout = window.requestAnimationFrame(() => { if (window.scrollY > 50) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); }; window.addEventListener('scroll', handleScroll); // Mobile menu functionality const menuToggle = document.getElementById('menu-toggle'); const nav = document.getElementById('nav'); const overlay = document.getElementById('overlay'); const body = document.body; menuToggle.addEventListener('click', () => { const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true'; menuToggle.setAttribute('aria-expanded', !isExpanded); menuToggle.classList.toggle('active'); nav.classList.toggle('active'); overlay.classList.toggle('active'); body.classList.toggle('menu-open'); }); overlay.addEventListener('click', () => { menuToggle.setAttribute('aria-expanded', 'false'); menuToggle.classList.remove('active'); nav.classList.remove('active'); overlay.classList.remove('active'); body.classList.remove('menu-open'); // Reset all dropdowns when closing menu dropdowns.forEach(dropdown => { const toggle = dropdown.querySelector('.dropdown-toggle'); if (toggle) toggle.setAttribute('aria-expanded', 'false'); dropdown.classList.remove('active'); }); }); // Mobile dropdown functionality const dropdowns = document.querySelectorAll('.dropdown'); dropdowns.forEach(dropdown => { const dropdownToggle = dropdown.querySelector('.dropdown-toggle'); if (dropdownToggle) { dropdownToggle.addEventListener('click', (e) => { // Only prevent default on mobile if (window.innerWidth <= 992) { e.preventDefault(); const isExpanded = dropdownToggle.getAttribute('aria-expanded') === 'true'; dropdownToggle.setAttribute('aria-expanded', !isExpanded); dropdown.classList.toggle('active'); // Close other dropdowns dropdowns.forEach(otherDropdown => { if (otherDropdown !== dropdown) { const otherToggle = otherDropdown.querySelector('.dropdown-toggle'); if (otherToggle) otherToggle.setAttribute('aria-expanded', 'false'); otherDropdown.classList.remove('active'); } }); } }); } }); // Handle window resize let resizeTimeout; const handleResize = () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { if (window.innerWidth > 992) { // Reset mobile menu when resizing to desktop menuToggle.setAttribute('aria-expanded', 'false'); menuToggle.classList.remove('active'); nav.classList.remove('active'); overlay.classList.remove('active'); body.classList.remove('menu-open'); // Reset dropdowns dropdowns.forEach(dropdown => { const toggle = dropdown.querySelector('.dropdown-toggle'); if (toggle) toggle.setAttribute('aria-expanded', 'false'); dropdown.classList.remove('active'); }); } }, 100); }; window.addEventListener('resize', handleResize); // Keyboard navigation for accessibility document.addEventListener('keydown', function(e) { // Close menu on Escape key if (e.key === 'Escape') { if (nav.classList.contains('active')) { menuToggle.setAttribute('aria-expanded', 'false'); menuToggle.classList.remove('active'); nav.classList.remove('active'); overlay.classList.remove('active'); body.classList.remove('menu-open'); // Reset all dropdowns dropdowns.forEach(dropdown => { const toggle = dropdown.querySelector('.dropdown-toggle'); if (toggle) toggle.setAttribute('aria-expanded', 'false'); dropdown.classList.remove('active'); }); // Return focus to menu toggle menuToggle.focus(); } } }); // Check for touch device const isTouchDevice = () => { return 'ontouchstart' in window || navigator.maxTouchPoints > 0; }; // Add touch-specific class if needed if (isTouchDevice()) { document.body.classList.add('touch-device'); } // Keyboard navigation document.addEventListener('keydown', function(e) { if (e.key === 'ArrowLeft') { prevCard(); } else if (e.key === 'ArrowRight') { nextCard(); } else if (e.key === ' ' || e.key === 'Enter') { flipCard(); } }); });