90 lines
3.8 KiB
HTML
90 lines
3.8 KiB
HTML
<!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="style.css">
|
|
</head>
|
|
<body>
|
|
<header class="main-header">
|
|
<h1>Flashcards Generator</h1>
|
|
</header>
|
|
<div class="main-wrapper">
|
|
<div id="startScreen">
|
|
<div class="section-title" id="title">
|
|
<div class="content">
|
|
<label for="inputText" class="inputText">Sende deine Wortliste an ChatGPT mit folgender Anweisung:</label>
|
|
</div>
|
|
<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>
|
|
<div id="inputHinweis">
|
|
<div class="content">
|
|
<label for="inputText" class="section-title">Füge deinen Text hier ein:</label>
|
|
<textarea id="inputText" placeholder="Hier Text einfügen..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="button-wrapper">
|
|
<button id="kartenErstellen">Karten erstellen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modusAuswahlSeite" style="display:none;">
|
|
<h2>Wählt einen Modus:</h2>
|
|
<button class="modus-btn" data-modus="druck">📄 PDF erstellen</button>
|
|
<button class="modus-btn" data-modus="training_einfach">🃏 Online-Training</button>
|
|
<button class="modus-btn" data-modus="statistik">📊 Statistik</button>
|
|
</div>
|
|
|
|
<div id="pdfPages">
|
|
<div id="kartenContainer"></div>
|
|
<div class="button-wrapper">
|
|
<button id="druckenBtn" style="display:none;">Drucken</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="onlineTraining">
|
|
|
|
<div id="trainingLevels" class="training-view">
|
|
<h3 class="training-title">Wählt eine Trainingsart:</h3>
|
|
|
|
<div class="buttons-row">
|
|
<button class="level-btn" data-level="flip">Karte umdrehen</button>
|
|
<button class="level-btn" data-level="multiple">Multiple Choice</button>
|
|
<button class="level-btn" data-level="matching">Zuordnen</button>
|
|
<button class="level-btn" data-level="hint">Mit Hinweis schreiben</button>
|
|
<button class="level-btn" data-level="write">Frei schreiben</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="trainingFlip" class="training-view hidden"></div>
|
|
<div id="trainingMatching" class="training-view hidden"></div>
|
|
<div id="trainingMultiple" class="training-view hidden"></div>
|
|
<div id="trainingHint" class="training-view hidden"></div>
|
|
<div id="trainingWrite" class="training-view hidden"></div>
|
|
|
|
<div class="button-wrapper">
|
|
<button id="checkBtn" style="display:none;" onclick="pruefeRunde()">Überprüfen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="trainingContainer" style="display:none; text-align:center; margin-top:30px;"></div>
|
|
|
|
<div id="flashcards-container"></div>
|
|
|
|
<script src="eigenerCode.js"></script>
|
|
</div>
|
|
</body>
|
|
</html> |