diff --git a/WoerterLernen.html b/WoerterLernen.html index 7eb97bf..dacfbb9 100644 --- a/WoerterLernen.html +++ b/WoerterLernen.html @@ -7,29 +7,38 @@ -

Flashcards Generator

+
+

Flashcards Generator

+
+
+
+
+ +
+
+ 
+                Bitte formatiere meine Wortliste exakt nach folgendem Schema.
+                Jeder Eintrag muss durch eine Leerzeile getrennt sein.
 
-    
+                Englisches Wort
+                [IPA-Transkription]
+                Beispielsatz auf Englisch
+                Deutsche Übersetzung des Wortes
+                Beispielsatz auf Deutsch
+
+ +
+
+ + +
+
+ -
- 
-    Bitte formatiere meine Wortliste exakt nach folgendem Schema.
-    Jeder Eintrag muss durch eine Leerzeile getrennt sein.
+        

 
-    Englisches Wort
-    [IPA-Transkription]
-    Beispielsatz auf Englisch
-    Deutsche Übersetzung des Wortes
-    Beispielsatz auf Deutsch
-
-
- +
+
- -
- - -
- \ No newline at end of file diff --git a/css/style.css b/css/style.css index a8138c5..0b74026 100644 --- a/css/style.css +++ b/css/style.css @@ -1,31 +1,192 @@ -#aufgabe_fuer_gpt { - position: relative; - border: 1px solid #ccc; - padding: 10px; - border-radius: 5px; - width: 500px; - background: #f9f9f9; +body { + margin: 0; + padding: 0; + font-family: "Arial", sans-serif; + background-color: #f4f6fb; + color: #333; +} + +h1 { + text-align: center; + margin-top: 30px; + margin-bottom: 20px; +} + +.main-header { + position: relative; + top: 0; + width: 100%; + background-color: #005b5b; + color: white; + padding: 18px 0; + text-align: center; + z-index: 1000; +} + +.main-header h1 { + margin: 0; + font-size: 46px; + font-weight: 600; + font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; + line-height: 1.5; +} + +.main-wrapper { + max-width: 900px; + margin: 0 auto; + margin-top: 10px; + padding: 20px; + background-color: #ffffff; + border-radius: 12px; + box-shadow: 0 10px 30px rgba(0,0,0,0.08); +} + +.input-section { + margin-bottom: 30px; +} + +.input-section h2 { + margin-bottom: 10px; +} + +.hint-text { + font-size: 14px; + color: #666; + margin-bottom: 10px; +} + +#aufgabe_fuer_gpt { + position: relative; + background-color: #f0f3ff; + border: 1px dashed #9aa5ff; + border-radius: 8px; + padding: 12px; + margin: 20px; + margin-top: 0; +} + +#aufgabe_fuer_gpt pre { + margin: 0; + font-size: 13px; + white-space: pre-wrap; +} + +#copyButton { + position: absolute; + top: 8px; + right: 8px; + background: white; + border: 1px solid #ccc; + border-radius: 6px; + cursor: pointer; + padding: 4px 6px; +} + +.content { + max-width: 900px; + margin: 0 auto; + padding: 30px 20px; +} + +.section-title { + display: block; + font-size: 18px; + font-weight: 600; + margin-bottom: 10px; +} + +#inputText { + width: 100%; + min-height: 220px; + padding: 14px; + font-size: 16px; + line-height: 1.5; + border-radius: 6px; + border: 1px solid #ccc; + resize: vertical; + box-sizing: border-box; } #kartenContainer { - display: flex; - gap: 15px; - flex-wrap: wrap; - justify-content: center; + margin-top: 30px; + display: none; + flex-direction: column; + gap: 40px; + align-items: center; } -.karte { - width: 120px; - height: 180px; - border: 2px solid #333; - border-radius: 10px; - background-color: white; - box-shadow: 2px 2px 8px rgba(0,0,0,0.1); - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - cursor: pointer; - user-select: none; - transition: transform 0.2s; +.page { + width: 210mm; + height: 297mm; + /* border: px solid #005b5b; */ + padding: 0; + box-sizing: border-box; + background: white; + + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(4, 1fr); +} + +.page-back { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(4, 1fr); + + direction: rtl; +} + +.page-back .card { + direction: ltr; +} + + +.card { + position: relative; + overflow: hidden; + border: 1px dashed #333; + border-radius: 0; + padding: 25px; + box-sizing: border-box; + + display: flex; + flex-direction: column; + justify-content: center; + + font-family: Arial, sans-serif; +} + +.card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 10mm; +} + +.card-en::before { + background-color: #f4c430; +} + +.card-de::before { + background-color: #ccc; +} + +.card h2 { + margin: 0; + margin-bottom: 6px; + font-size: 22px; +} + +.card .ipa { + font-size: 14px; + color: #666; + /* margin-bottom: 80px; */ +} + +.card .example { + margin-top: 80px; + font-size: 14px; + color: #333; } diff --git a/js/eigenerCode.js b/js/eigenerCode.js index cb37ed4..db8e605 100644 --- a/js/eigenerCode.js +++ b/js/eigenerCode.js @@ -1,4 +1,6 @@ -document.getElementById('copyButton').addEventListener('click', () => { +let parsedArray = []; + +document.getElementById('copyButton').addEventListener('click', () => { const text = document.getElementById('formatText').innerText; navigator.clipboard.writeText(text).then(() => { @@ -6,10 +8,31 @@ }).catch(err => { console.error('Konnte nicht kopieren: ', err); }); + + for (let i = 0; i < parsedArray.length; i += 8) { + const pageFront = document.createElement("div"); + pageFront.className = "page_front"; + const pageBack = document.createElement("div"); + pageBack.className = "page_back"; + + const currentSlice = parsedArray.slice(i, i + 8); + currentSlice.forEach(karte => { + const frontCard = document.createElement("div"); + frontCard.className = "card"; + frontCard.innerHTML = `

${karte.englisch}

${karte.ipa}

${karte.beispielEN}

`; + pageFront.appendChild(frontCard); + + const backCard = document.createElement("div"); + backCard.className = "card"; + backCard.innerHTML = `

${karte.deutsch}

${karte.beispielDE}

`; + pageBack.appendChild(backCard); + }); + + container.appendChild(pageFront); + container.appendChild(pageBack); + } }); -const inputText = document.getElementById("inputText").value; -const cards = parseWordText(inputText); function parseWordText(inputText) { const wortBlocks = inputText.trim().split("\n\n"); const wortListe = []; @@ -31,35 +54,59 @@ function parseWordText(inputText) { }; wortListe.push(wortObj); - console.log(wortObj); } return wortListe; } +function createPagePair() { + const frontPage = document.createElement("div"); + frontPage.className = "page page-front"; + + const backPage = document.createElement("div"); + backPage.className = "page page-back"; + + return { frontPage, backPage }; +} + const button = document.getElementById("kartenErstellen"); -const container = document.getElementById("kartenContainer"); +const onlineContainer = document.getElementById("kartenContainer"); +const frontPage = document.querySelector(".page_front"); +const backPage = document.querySelector(".page_back"); button.addEventListener("click", () => { - container.innerHTML = ""; - parsedArray.forEach((karte, index) => { - const karteDiv = document.createElement("div"); - karteDiv.classList.add("karte"); + const inputText = document.getElementById("inputText").value; + parsedArray = parseWordText(inputText); - karteDiv.innerHTML = ` -
-
-

${karte.englisch}

-

${karte.ipa}

-

Beispiel: ${karte.beispielEN}

-
-
-

${karte.deutsch}

-

Beispiel: ${karte.beispielDE}

-
-
- `; - container.appendChild(karteDiv); + kartenContainer.innerHTML = ""; + kartenContainer.style.display = "flex"; + kartenContainer.style.flexDirection = "column"; - }); + for (let i = 0; i < parsedArray.length; i += 8) { + + const { frontPage, backPage } = createPagePair(); + + parsedArray.slice(i, i + 8).forEach((karte) => { + + const frontCard = document.createElement("div"); + frontCard.className = "card card-en"; + frontCard.innerHTML = ` +

${karte.englisch}

+
${karte.ipa}
+
${karte.beispielEN}
+ `; + frontPage.appendChild(frontCard); + + const backCard = document.createElement("div"); + backCard.className = "card card-de"; + backCard.innerHTML = ` +

${karte.deutsch}

+
${karte.beispielDE}
+ `; + backPage.appendChild(backCard); + }); + + kartenContainer.appendChild(frontPage); + kartenContainer.appendChild(backPage); + } });