Files
SWE/TeacherDashboard/components/topicModal.html
Kelvi Yawo Jules Agbessi Awuklu 5096106835 Update 13 files
- /TeacherDashboard/index.html
- /TeacherDashboard/TeacherDashboard.code-workspace
- /TeacherDashboard/components/resourceModal.html
- /TeacherDashboard/components/subjectModal.html
- /TeacherDashboard/components/topicModal.html
- /TeacherDashboard/js/main.js
- /TeacherDashboard/js/subjects/colors.js
- /TeacherDashboard/js/subjects/subjectManager.js
- /TeacherDashboard/js/subjects/SubjectModel.js
- /TeacherDashboard/js/subjects/SubjectStorage.js
- /TeacherDashboard/js/topics/TopicModel.js
- /TeacherDashboard/js/topics/topicManager.js
- /TeacherDashboard/styles/main.css
2024-12-22 17:41:21 +01:00

75 lines
4.3 KiB
HTML

<!-- Topic Modal -->
<div id="topicModal" class="modal hidden fixed inset-0 bg-black/30 flex items-center justify-center">
<div class="bg-white rounded-2xl p-8 w-full max-w-[90vw] h-[95vh] shadow-2xl border-2 border-gray-100 overflow-y-auto">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold">Neues Thema erstellen</h3>
<button onclick="closeModal('topicModal')" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<form id="topicForm" class="space-y-8">
<div class="grid grid-cols-2 gap-8">
<!-- Left column - Topic details -->
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700">Themenname</label>
<input type="text" name="displayName" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Fach</label>
<select id="topicSubjectSelect" name="subject" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required>
<option value="">Fach auswählen...</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Kurzbeschreibung</label>
<textarea name="description" rows="2" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm"></textarea>
</div>
</div>
<!-- Right column - Content and preview -->
<div>
<div class="mb-6">
<div class="flex justify-between items-center mb-2">
<label class="block text-sm font-medium text-gray-700">Bildungsinhalt</label>
<div class="flex gap-2">
<button type="button" onclick="topicManager.undo()"
class="text-gray-500 hover:text-gray-700 p-1" title="Rückgängig (Ctrl+Z)">
<i class="fas fa-undo"></i>
</button>
<button type="button" onclick="topicManager.redo()"
class="text-gray-500 hover:text-gray-700 p-1" title="Wiederholen (Ctrl+Shift+Z)">
<i class="fas fa-redo"></i>
</button>
<button type="button" onclick="topicManager.deleteSelected()"
class="text-red-500 hover:text-red-700 p-1" title="Ausgewählten Inhalt löschen">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<div id="quillEditor" class="h-[400px] mt-1"></div>
<input type="hidden" name="content" id="quillContent">
</div>
</div>
</div>
<!-- Preview section -->
<div class="border rounded-lg p-8 mt-8 bg-gray-50">
<h4 class="text-lg font-medium text-gray-700 mb-6">Vorschau</h4>
<div id="contentPreview" class="prose prose-lg max-w-none min-h-[300px] bg-white p-6 rounded-lg shadow-sm quill-content"></div>
</div>
<div class="flex justify-end gap-4">
<button type="button" onclick="closeModal('topicModal')"
class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">
Abbrechen
</button>
<button type="submit"
class="px-6 py-3 text-white bg-[var(--primary-color)] rounded-xl hover:bg-[var(--secondary-color)] shadow-lg hover:shadow-xl transition">
Speichern
</button>
</div>
</form>
</div>
</div>