diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a4d6d9c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vs/ \ No newline at end of file diff --git a/MainPage/stas/WoerterLernen.html b/MainPage/stas/WoerterLernen.html index 217bf2f..4721bb0 100644 --- a/MainPage/stas/WoerterLernen.html +++ b/MainPage/stas/WoerterLernen.html @@ -11,9 +11,9 @@

Flashcards Generator

-
-
- +
+
+
@@ -28,26 +28,31 @@
                 
-
- - +
+
+ + +
- +
+ +
+
- -
-<<<<<<< HEAD:WoerterLernen.html -======= - -
- - -
- ->>>>>>> a18b892e86a6b427b23c2eb100b9986d3c15121c:MainPage/stas/WoerterLernen.html +
+ +
+ +
\ No newline at end of file diff --git a/MainPage/stas/drucker.jfif b/MainPage/stas/drucker.jfif new file mode 100644 index 0000000..2b0d101 Binary files /dev/null and b/MainPage/stas/drucker.jfif differ diff --git a/MainPage/stas/eigenerCode.js b/MainPage/stas/eigenerCode.js index db8e605..ee5a737 100644 --- a/MainPage/stas/eigenerCode.js +++ b/MainPage/stas/eigenerCode.js @@ -78,6 +78,37 @@ button.addEventListener("click", () => { const inputText = document.getElementById("inputText").value; parsedArray = parseWordText(inputText); + if(parsedArray.length === 0) { + alert("Kein gültiges Format erkannt. Bitte überprüfe deine Eingabe."); + return; + } + + alert("Karten erfolgreich erstellt!"); + + document.getElementById("title").style.display = "none"; + button.style.display = "none"; + + + document.getElementById("modusAuswahlSeite").style.display = "block"; + + +}); + +document.querySelectorAll(".modus-btn").forEach(button => { + button.addEventListener("click", () => { + const modus = button.dataset.modus; + + if (modus === "druck") { + createPDFPages(parsedArray); + } else { + console.log("Gewählter Modus:", modus); + } + }); +}); + +function createPDFPages(wordArray) { + const kartenContainer = document.getElementById("kartenContainer"); + kartenContainer.innerHTML = ""; kartenContainer.style.display = "flex"; kartenContainer.style.flexDirection = "column"; @@ -108,5 +139,13 @@ button.addEventListener("click", () => { kartenContainer.appendChild(frontPage); kartenContainer.appendChild(backPage); + document.getElementById("druckenBtn").style.display = "block"; } + alert("PDF-Seiten wurden erstellt! Du kannst sie jetzt druken."); +} + +document.getElementById("druckenBtn").addEventListener("click", () => { + window.print(); }); + + \ No newline at end of file diff --git a/MainPage/stas/flashcards.webp b/MainPage/stas/flashcards.webp new file mode 100644 index 0000000..0baf4c7 Binary files /dev/null and b/MainPage/stas/flashcards.webp differ diff --git a/MainPage/stas/style.css b/MainPage/stas/style.css index 0b74026..f43ab6d 100644 --- a/MainPage/stas/style.css +++ b/MainPage/stas/style.css @@ -16,7 +16,7 @@ h1 { position: relative; top: 0; width: 100%; - background-color: #005b5b; + background-color: #880b75; color: white; padding: 18px 0; text-align: center; @@ -36,7 +36,7 @@ h1 { margin: 0 auto; margin-top: 10px; padding: 20px; - background-color: #ffffff; + background-color: #d9cfe0; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); } @@ -116,16 +116,15 @@ h1 { } .page { - width: 210mm; - height: 297mm; - /* border: px solid #005b5b; */ + width: 190mm; + height: 277mm; padding: 0; box-sizing: border-box; background: white; - display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); + page-break-after: always; } .page-back { @@ -182,7 +181,6 @@ h1 { .card .ipa { font-size: 14px; color: #666; - /* margin-bottom: 80px; */ } .card .example { @@ -190,3 +188,95 @@ h1 { font-size: 14px; color: #333; } + +.button-wrapper { + max-width: 900px; + margin: 20px auto; + padding: 10px 20px; + display: flex; + justify-content: center; +} + +#kartenErstellen { + width: 100%; + height: 100px; + font-size: 46px; + font-weight: 600; + font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; + color: #dc6743; + border: none; + border-radius: 8px; + cursor: pointer; + box-sizing: border-box; + background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), url("flashcards.webp"); + background-size: cover; + background-position: center; +} + +#druckenBtn { + width: 500px; + height: 100px; + font-size: 46px; + font-weight: 600; + font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; + color: #dc6743; + border: none; + border-radius: 8px; + cursor: pointer; + box-sizing: border-box; + background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), url("drucker.jfif"); + background-repeat: repeat; + background-size: 80px; +} + +.erfolgsmeldung, +.modus-auswahl { + display: none; + max-width: 600px; + margin: 20px auto; + text-align: center; +} + +.erfolgsmeldung { + background-color: #e6f4f1; + color: #005b5b; + padding: 12px; + border-radius: 6px; + font-weight: 600; +} + +.modus-auswahl p { + margin-bottom: 12px; + font-weight: 500; +} + +.modus-btn { + margin: 6px; + padding: 10px 16px; + border: none; + border-radius: 6px; + background-color: #005b5b; + color: white; + cursor: pointer; +} + +.modus-btn:hover { + background-color: #007070; +} + +@media print { + body * { + visibility: hidden; + } + #kartenContainer, #kartenContainer * { + visibility: visible; + } + #kartenContainer { + position: absolute; + left: 0; + top: 0; + width: 100%; + margin: 0; + padding: 0; + } +}