Erste Kommit von Stas

2026-01-14 15:07:28 +01:00
parent 609cc9be8b
commit 3d87d2a765
5 changed files with 131 additions and 0 deletions
--- a/WoerterLernen.html
+++ b/WoerterLernen.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meine Website</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <h1>Flashcards Generator</h1>
+
+    <label for="inputText">Sende deine Wortliste an ChatGPT mit folgender Anweisung:</label>
+
+    <div id="aufgabe_fuer_gpt">
+        <pre id="formatText">
+    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
+
+    </pre>
+        <button id="copyButton" style="position: absolute; top: 5px; right: 5px; cursor: pointer;">📋</button>
+    </div>
+    <textarea id="inputText" rows="10" cols="50" placeholder="Hier Text einfügen..."></textarea>
+    <div id="kartenContainer"></div>
+    <button id="kartenErstellen">Karten erstellen</button>
+
+    <div id="flashcards-container"></div>
+    <script src="js/eigenerCode.js"></script>
+</body>
+</html>
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,31 @@
+#aufgabe_fuer_gpt {
+    position: relative; 
+    border: 1px solid #ccc; 
+    padding: 10px; 
+    border-radius: 5px; 
+    width: 500px; 
+    background: #f9f9f9;
+}
+
+#kartenContainer {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+    justify-content: 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;
+}
--- a/img/shared
+++ b/img/shared
--- a/img/shared
+++ b/img/shared
--- a/js/eigenerCode.js
+++ b/js/eigenerCode.js
@@ -0,0 +1,65 @@
+document.getElementById('copyButton').addEventListener('click', () => {
+    const text = document.getElementById('formatText').innerText;
+
+    navigator.clipboard.writeText(text).then(() => {
+        alert('Format wurde in die Zwischenablage kopiert!');
+    }).catch(err => {
+        console.error('Konnte nicht kopieren: ', err);
+    });
+});
+
+const inputText = document.getElementById("inputText").value;
+const cards = parseWordText(inputText);
+function parseWordText(inputText) {
+    const wortBlocks = inputText.trim().split("\n\n");
+    const wortListe = [];
+
+    for (let block of wortBlocks) {
+        const lines = block.trim().split("\n").map(line => line.trim());
+
+        if (lines.length !== 5) {
+            console.warn("Block übersprungen (falsches Format):", block);
+            continue;
+        }
+
+        const wortObj = {
+            englisch: lines[0],
+            ipa: lines[1],
+            beispielEN: lines[2],
+            deutsch: lines[3],
+            beispielDE: lines[4]
+        };
+
+        wortListe.push(wortObj);
+        console.log(wortObj);
+    }
+
+    return wortListe;
+}
+
+const button = document.getElementById("kartenErstellen");
+const container = document.getElementById("kartenContainer");
+
+button.addEventListener("click", () => {
+    container.innerHTML = "";
+    parsedArray.forEach((karte, index) => {
+        const karteDiv = document.createElement("div");
+        karteDiv.classList.add("karte");
+
+        karteDiv.innerHTML = `
+            <div class="karte-inhalt">
+                <div class="karte-vorderseite">
+                    <h2>${karte.englisch}</h2>
+                    <p><em>${karte.ipa}</em></p>
+                    <p>Beispiel: ${karte.beispielEN}</p>
+                </div>
+                <div class="karte-rückseite">
+                    <h2>${karte.deutsch}</h2>
+                    <p>Beispiel: ${karte.beispielDE}</p>
+                </div>
+            </div>
+        `;
+        container.appendChild(karteDiv);
+
+    });
+});