${allCards.map((card, index) => {
// Extract the first part of back for the preview (before the explanation)
let previewBack = (card.back || '').split('\n\n**ErklÀrung:**')[0].trim();
if (previewBack.length > 60) previewBack = previewBack.substring(0, 60) + '...';
// Escape quotes and newlines for onclick
const safeFront = card.front.replace(/'/g, "\\'").replace(/"/g, """).replace(/\n/g, "\\n").replace(/\r/g, "\\r");
const safeBack = card.back.replace(/'/g, "\\'").replace(/"/g, """).replace(/\n/g, "\\n").replace(/\r/g, "\\r");
return `
${card.front}
${previewBack}
`}).join('')}
`}
`;
}
async previewCard(cardId, deckId) {
// Fetch fresh card data
const res = db.exec("SELECT * FROM flashcards WHERE id = ?", [cardId]);
if (!res || res.length === 0) return;
const card = res[0];
const formatBack = (text) => {
if (!text) return '';
let t = text;
// Try to center the first line if it's the translation
const lines = t.split(/\n/);
if (lines.length > 0 && lines[0].trim() !== '' && !lines[0].includes('**')) {
lines[0] = `
${lines[0]}
`;
t = lines.join('\n');
}
t = t.replace(/\\n/g, ' ');
t = t.replace(/\n/g, ' ');
t = t.replace(/\*\*(.*?)\*\*/g, '$1');
return t;
};
const overlay = document.createElement('div');
overlay.className = 'custom-modal-overlay';
overlay.style.zIndex = '999999';
overlay.style.backdropFilter = 'blur(10px)';
// We render a standard flashcard inside the modal
overlay.innerHTML = `
`;
backEl.appendChild(loader);
const inner = overlay.querySelector('.flashcard-inner');
if (inner && !inner.classList.contains('flipped')) {
inner.classList.add('flipped');
}
}
try {
const deck = this.decks.find(d => d.id === deckId);
const sourceLang = deck?.source_lang || 'die jeweilige Sprache';
const targetLang = deck?.target_lang || 'die Zielsprache';
const prompt = `Du bist ein KI-Tutor. Generiere die RĂŒckseite fĂŒr eine Vokabelkarte.
Stapel-Sprachen: Wort in ${sourceLang} -> Ăbersetzung/ErklĂ€rung in ${targetLang}.
Wort: "${newFront.trim()}"
WICHTIGE REGELN:
1. "translation" MUSS zwingend die reine, korrekte Ăbersetzung in ${targetLang} sein. NICHT LEER LASSEN!
2. "explanation" MUSS in ${targetLang} sein und extrem kurz (maximal 15 Wörter!).
3. "example" MUSS ein sinnvoller Beispielsatz in ${targetLang} sein.
Gib AUSSCHLIESSLICH ein valides JSON-Objekt zurĂŒck, ohne Markdown-Formatierung wie \`\`\`json. Format:
{
"translation": "Die kurze Ăbersetzung",
"explanation": "Eine sehr kurze ErklÀrung",
"example": "Ein spezifischer Beispielsatz",
"search_query": "Ein simpler englischer Suchbegriff fĂŒr ein passendes Bild"
}`;
const aiResponse = await aiRouter.sendMessage(prompt, { history: [] });
let jsonStr = aiResponse;
if (jsonStr.includes('\`\`\`json')) {
jsonStr = jsonStr.split('\`\`\`json')[1].split('\`\`\`')[0];
} else if (jsonStr.includes('\`\`\`')) {
jsonStr = jsonStr.split('\`\`\`')[1].split('\`\`\`')[0];
}
const data = JSON.parse(jsonStr.trim());
const aiBack = `${data.translation}\n\n**ErklÀrung:** ${data.explanation}\n\n**Beispiel:** ${data.example}`;
let newImageUrl = null;
if (data.search_query) {
const encodedQuery = encodeURIComponent(data.search_query + ' single photo, clear focus, high quality');
newImageUrl = `https://tse1.mm.bing.net/th?q=${encodedQuery}&w=800&h=1000&c=7&rs=1`;
}
db.editFlashcard(card.id, newFront.trim(), aiBack);
if (newImageUrl) {
db.exec("UPDATE flashcards SET image_url = ? WHERE id = ?", [newImageUrl, card.id]);
}
overlay.classList.add('fade-out');
setTimeout(() => {
overlay.remove();
this.renderDeckDetails(deckId);
}, 300);
} catch (e) {
console.error("Failed to regenerate card:", e);
const loader = overlay.querySelector('#ai-regenerate-loader');
if (loader) loader.remove();
const saveBtn = overlay.querySelector('.save');
if (saveBtn) {
saveBtn.disabled = false;
saveBtn.style.opacity = '1';
saveBtn.innerText = 'Speichern';
}
}
}
renameDeck(deckId) {
const deck = this.decks.find(d => d.id === deckId);
if (!deck) return;
const overlay = document.createElement('div');
overlay.className = 'custom-modal-overlay';
overlay.innerHTML = `
Stapel bearbeiten
`;
document.body.appendChild(overlay);
overlay.querySelector('.cancel').onclick = () => {
overlay.classList.add('fade-out');
setTimeout(() => overlay.remove(), 300);
};
overlay.querySelector('.confirm').onclick = () => {
const title = overlay.querySelector('#edit-deck-title').value.trim();
const source = overlay.querySelector('#edit-deck-source').value.trim();
const target = overlay.querySelector('#edit-deck-target').value.trim();
if (title) {
if (title !== deck.title) {
db.updateDeckTitle(deckId, title);
}
db.updateDeckLanguages(deckId, source, target);
this.renderDeckDetails(deckId);
overlay.classList.add('fade-out');
setTimeout(() => overlay.remove(), 300);
}
};
}
async deleteDeck(deckId) {
if (await window.appConfirm("Möchtest du diesen Stapel wirklich löschen? Alle Karten darin gehen unwiderruflich verloren!")) {
db.deleteDeck(deckId);
this.renderOverview();
}
}
async deleteCard(cardId, deckId) {
if (await window.appConfirm("Möchtest du diese Karte wirklich löschen?")) {
db.deleteFlashcard(cardId);
this.renderDeckDetails(deckId);
}
}
async editCard(cardId, deckId, currentFront, currentBack) {
const newFront = await window.appPrompt("Bearbeite die Vorderseite (Frage):", currentFront);
if (newFront === null || newFront.trim() === "") return;
// We only want to edit the raw back, not the HTML/Markdown formatting that was appended (ErklÀrung, Beispiel) if possible.
// But since currentBack might already contain everything, we'll let them edit the whole thing.
// For a better UX in the future, we could split it, but for now we let them edit the text.
let rawBack = currentBack;
if (currentBack.includes('\\n\\n**ErklÀrung:**')) {
// Just extract the raw back for simple editing if we want to be smart, but wait, if they edit it, they lose the explanation?
// No, they might want to edit the explanation too. We just pass the whole string.
// But prompt doesn't support multiline. We should use a custom modal for this.
}
// Custom Modal for editing
return new Promise(resolve => {
const overlay = document.createElement('div');
overlay.className = 'custom-modal-overlay';
const unescapedFront = currentFront.replace(/"/g, '"');
const unescapedBack = currentBack.replace(/"/g, '"').replace(/\\n/g, '\n');
overlay.innerHTML = `
Karte bearbeiten
`;
document.body.appendChild(overlay);
const inputFront = overlay.querySelector('#edit-front');
const inputBack = overlay.querySelector('#edit-back');
inputFront.focus();
const save = () => {
const valF = inputFront.value.trim();
const valB = inputBack.value.trim();
if (valF && valB) {
db.editFlashcard(cardId, valF, valB);
this.renderDeckDetails(deckId);
}
overlay.classList.add('fade-out');
setTimeout(() => { overlay.remove(); resolve(); }, 300);
};
overlay.querySelector('.confirm').onclick = save;
overlay.querySelector('.cancel').onclick = () => {
overlay.classList.add('fade-out');
setTimeout(() => { overlay.remove(); resolve(); }, 300);
};
});
}
async addCard(deckId) {
if (document.activeElement) {
document.activeElement.blur();
}
const frontEl = document.getElementById('new-card-front');
const backEl = document.getElementById('new-card-back');
const addBtn = document.getElementById('add-card-btn');
const front = frontEl.value.trim();
const originalBack = backEl.value.trim();
if (!front || !originalBack) {
this.appAlert('Bitte fĂŒlle Vorder- und RĂŒckseite aus.');
return;
}
// Set Loading State
const originalBtnContent = addBtn.innerHTML;
addBtn.innerHTML = ' Generiere Karte...';
addBtn.disabled = true;
addBtn.style.opacity = '0.7';
// Inject spinner CSS if not exists
if (!document.getElementById('spinner-css')) {
const style = document.createElement('style');
style.id = 'spinner-css';
style.innerHTML = '@keyframes spin { to { transform: rotate(360deg); } }';
document.head.appendChild(style);
}
try {
const systemInstruction = `Du bist ein Flashcard-Assistent. Der User erstellt eine Karteikarte: Vorderseite = "${front}", RĂŒckseite (Lernwort) = "${originalBack}".
Antworte AUSSCHLIESSLICH mit einem validen JSON-Objekt ohne Markdown-Block drumherum, das folgende Felder enthÀlt:
{
"explanation": "1-2 kurze SĂ€tze in der Sprache des LERNWORTS ('${originalBack}'), die genau dieses Wort auf der RĂŒckseite erklĂ€ren. WICHTIG: Markiere das Lernwort (und seine Abwandlungen) IMMER fett mit HTML-Tags (z.B. ${originalBack}).",
"example": "Ein prÀgnanter Beispielsatz mit dem Lernwort ('${originalBack}'). Das Lernwort MUSS auch hier mit ... fett markiert sein.",
"imageQuery": "Ein prĂ€ziser englischer Suchbegriff fĂŒr die Bing-Bildersuche. WICHTIG: Das Bild muss GANZ OFFENSICHTLICH und EINDEUTIG zum Wort passen! Es muss so simpel und klar sein, dass man es SOFORT ohne spezielles Vorwissen erkennt. WĂ€hle bei abstrakten Wörtern ein extrem simples, alltĂ€gliches und leicht verstĂ€ndliches Motiv statt komplexer Kunst oder Metaphern. Das Motiv muss im Zentrum stehen. FĂŒge IMMER 'single photo, clear focus, high quality' am Ende hinzu. ABSOLUT VERBOTEN: Grafiken, Text, Collagen, Cartoons. (Beispiel fĂŒr 'Hund': 'a cute dog sitting on grass single photo clear focus', Beispiel fĂŒr 'Zeit': 'a classic alarm clock single photo clear focus')."
}`;
// We send a short empty prompt because the instruction handles everything
// Wir nutzen Llama 3.3 70B ĂŒber Groq als Sweetspot fĂŒr Kompetenz und Geschwindigkeit
const responseStr = await aiRouter.sendMessage("Generate JSON", {
systemInstruction,
extendedThinking: false,
model: 'groq-llama-3.3-70b-versatile'
});
// Parse JSON
let data;
try {
const jsonMatch = responseStr.match(/\{[\s\S]*\}/);
if (jsonMatch) {
data = JSON.parse(jsonMatch[0]);
} else {
data = JSON.parse(responseStr);
}
} catch (e) {
console.error("AI JSON Parse Error:", e, responseStr);
data = {
explanation: "Fehler bei der KI-Generierung.",
example: "Bitte manuell prĂŒfen.",
imageQuery: encodeURIComponent(front)
};
}
const back = `${originalBack}\n\n**ErklÀrung:** ${data.explanation}\n\n**Beispiel:** ${data.example}`;
const searchTerms = encodeURIComponent(data.imageQuery);
const imageUrl = `https://tse1.mm.bing.net/th?q=${searchTerms}&w=800&h=1000&c=7&rs=1`;
db.addFlashcard(deckId, front, back, imageUrl);
// Clear inputs
frontEl.value = '';
backEl.value = '';
this.renderDeckDetails(deckId); // Refresh stats
} catch (e) {
console.error(e);
this.appAlert('Fehler beim KI-Aufruf: ' + e.message);
// Restore button
addBtn.innerHTML = originalBtnContent;
addBtn.disabled = false;
addBtn.style.opacity = '1';
}
}
startStudyDue(deckId) {
this.dueCards = db.getDueCards(deckId);
if (this.dueCards.length === 0) {
this.appAlert('FĂŒr heute hast du alle Karten in diesem Stapel gelernt!');
return;
}
this.isFreePractice = false;
this.currentCardIndex = 0;
this.renderStudyMode();
}
startStudyAll(deckId) {
this.dueCards = db.getAllCards(deckId);
if (this.dueCards.length === 0) {
this.appAlert('Dieser Stapel ist noch leer.');
return;
}
this.isFreePractice = true;
this.currentCardIndex = 0;
this.renderStudyMode();
}
renderStudyMode() {
if (this.currentCardIndex >= this.dueCards.length) {
this.container.innerHTML = `
đ
Stapel abgeschlossen!
Du hast alle anstehenden Karten gelernt.
`;
return;
}
const card = this.dueCards[this.currentCardIndex];
const hasImage = !!card.image_url && card.image_url !== 'null';
const deck = db.exec("SELECT * FROM flashcard_decks WHERE id = ?", [this.activeDeckId])[0];
const deckName = (deck && deck.title) ? deck.title.toLowerCase() : '';
let lang = 'en-US';
if (deckName.includes('spanisch') || deckName.includes('spanish')) lang = 'es-ES';
else if (deckName.includes('französisch') || deckName.includes('french')) lang = 'fr-FR';
else if (deckName.includes('italienisch') || deckName.includes('italian')) lang = 'it-IT';
else if (deckName.includes('deutsch') || deckName.includes('german')) lang = 'de-DE';
let backgroundHtml = '';
let overlayHtml = '';
if (hasImage) {
backgroundHtml = ``;
overlayHtml = ``;
} else {
// Elegant placeholder for cards without an image
backgroundHtml = ``;
// Still need a slight dark gradient at the bottom for text readability, but no blur
overlayHtml = ``;
}
const cardsLeft = this.dueCards.length - this.currentCardIndex - 1;
let stackHtml = '';
if (cardsLeft > 1) {
stackHtml += `
`;
}
if (cardsLeft > 0) {
stackHtml += `
`;
}
// Disable scrolling globally for study mode
this.container.style.overflow = 'hidden';
this.container.innerHTML = `