-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
217 lines (194 loc) · 10.5 KB
/
Copy pathindex.html
File metadata and controls
217 lines (194 loc) · 10.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DiRueLei Web App</title>
<link rel="stylesheet" href="style.css">
<!-- Cross-Origin Isolation Headers for SharedArrayBuffer support -->
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin">
<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
</head>
<body>
<div class="container">
<h1>DiRueLei</h1>
<!-- Main Application -->
<div id="main-app">
<!-- Main Page -->
<div id="main-page">
<div class="numbered-box">
<div class="circle">1</div>
<div class="box-content">
<div class="box-title">Abgabe im Mebis-Kurs erstellen</div>
<div class="box-description">Bitte mit den Einstellungen aus der Anleitung eine Abgabe im Mebis-Kurs einrichten.</div>
</div>
<button id ="open-instructions-btn" class="btn">Anleitung</button>
</div>
<div class="numbered-box">
<div class="circle">2</div>
<div class="box-content">
<div class="box-title">QR-Codes erzeugen</div>
<div class="box-description">Bitte CSV-Datei gemäß der Anleitung auswählen. QR-Codes werden dann als PDF-Datei erzeugt.</div>
</div>
<button class="btn" onclick="showQRGeneration()">CSV auswählen</button>
</div>
<div class="numbered-box">
<div class="circle">3</div>
<div class="box-content">
<div class="box-title">LN bekleben und scannen</div>
<div class="box-description">QR-Codes auf den Seiten anbringen. Empfehlung für Standardeinstellungen: nur auf Vorderseite (A4) bzw. erster Seite (A3-Bogen).</div>
</div>
</div>
<div class="numbered-box">
<div class="circle">4</div>
<div class="box-content">
<div class="box-title">Scan</div>
<div class="box-description">Gescannte Datei(en) auswählen</div>
</div>
<button class="btn" onclick="showPDFScan()">Scan(s) auswählen</button>
</div>
</div>
<!-- QR Generation Page -->
<div id="qr-generation-page" class="hidden">
<h2>QR-Code Generierung</h2>
<div class="file-upload-area">
<div class="file-upload-dropzone" id="csv-dropzone">
<input type="file" id="csv-file" accept=".csv" class="file-input-hidden" />
<div class="upload-content">
<div class="upload-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7,10 12,15 17,10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
</div>
<div class="upload-text">
<div class="upload-primary">Bewegen Sie CSV-Datei in dieses Feld (Drag&Drop)</div>
<div class="upload-secondary">oder klicken Sie hier zum Durchsuchen</div>
</div>
<div class="file-info">
<span class="file-type">CSV-Dateien</span>
</div>
</div>
</div>
</div>
<div class="settings-separator">
<hr class="settings-divider">
<h3 class="settings-title">Einstellungen</h3>
</div>
<div id="qr-settings" class="qr-generation-settings hidden">
<div class="setting-group">
<label class="setting-label">Anzahl QR-Codes pro Schüler/-in:</label>
<input type="number" id="copies" value="1" min="1" max="10">
</div>
<div class="setting-group">
<label>
<input type="checkbox" id="checkbox-use-offset">
Ersten QR-Code an bestimmter Position setzen
</label>
<div id="offset-settings" class="hidden">
<label>Zeile: <input type="number" id="offset-row" value="1" min="1"></label>
<label>Spalte: <input type="number" id="offset-col" value="1" min="1"></label>
</div>
</div>
<div class="setting-group">
<label>
<input type="checkbox" id="checkbox-select-students">
Nur für bestimmte Schüler/-innen QR-Codes erstellen
</label>
<div id="student-selection" class="student-list hidden">
<label><input type="checkbox" id="select-all" checked> Alle an-/abwählen</label>
<div id="student-checkboxes"></div>
</div>
</div>
</div>
<div class="button-group">
<button class="btn btn-secondary" onclick="showMainPage();">Zurück zur Hauptseite</button>
<button class="btn" id="generate-qr-btn" disabled>QR-Codes erzeugen</button>
</div>
</div>
<!-- PDF Scan Page -->
<div id="pdf-scan-page" class="hidden">
<h2>PDF Scan Einstellungen</h2>
<div class="file-upload-area">
<div class="file-upload-dropzone" id="pdf-dropzone">
<input type="file" id="pdf-files" accept=".pdf" multiple class="file-input-hidden" />
<div class="upload-content">
<div class="upload-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7,10 12,15 17,10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
</div>
<div class="upload-text">
<div class="upload-primary">Bewegen Sie PDF-Datei(en) in dieses Feld (Drag&Drop)</div>
<div class="upload-secondary">oder klicken Sie hier zum Durchsuchen</div>
</div>
<div class="file-info">
<span class="file-type">PDF-Dateien</span>
</div>
</div>
</div>
</div>
<button id="clear-pdf-files-btn" class="btn-link hidden" style="margin-top: 10px;">
<span style="font-size: 14px; margin-right: 5px;">×</span>
Alle Dateien entfernen
</button>
<div id="scan-settings" class="scan-options hidden">
<div class="checkbox-group">
<label>
<input type="checkbox" id="two-page-scan">
Zweiseitiger Scan
</label>
<div class="checkbox-explanation">
Das bedeutet: Es genügt, dass sich jeweils auf der ersten von zwei Seiten ein QR-Code befindet.
Die folgende Seite ohne QR-Code wird automatisch demselben Schüler zugeordnet.
</div>
</div>
<div class="checkbox-group">
<label>
<input type="checkbox" id="split-a3">
A3-Bögen teilen
</label>
<div class="checkbox-explanation">
Das bedeutet: A3 Seiten werden in zwei A4 Seiten geteilt. Der QR-Code muss dabei außen angebracht sein.
</div>
</div>
<div class="checkbox-group">
<label>
<input type="checkbox" id="quick-and-dirty" checked>
Quick and dirty
</label>
<div class="checkbox-explanation">
Das bedeutet: Auf der Folgeseite einer Seite mit QR-Code wird nur oberflächlich nach einem neuen Code gesucht.
</div>
</div>
</div>
<div class="progress">
<div id="scan-progress-bar" class="progress-bar hidden"></div>
</div>
<div class="output-area hidden" id="scan-output"></div>
<div class="button-group">
<button class="btn btn-secondary" onclick="showMainPage()">Zurück zur Hauptseite</button>
<button class="btn btn-secondary" id="download-results-btn">Zusammenfassung öffnen</button>
<button class="btn" id="process-pdf-btn">PDFs einlesen</button>
</div>
</div>
</div>
</div>
<!-- Footer with Version -->
<footer class="footer">
<div class="footer-content">
<span class="version">DiRueLei v2.0.1</span>
<span class="upload-time"></span>
<span class="footer-separator">•</span>
<span class="author">(c) Hannes Funk, 2025</span>
<span class="footer-separator">•</span>
<a href="datenschutz.html" target="_blank" class="footer-link">Datenschutzhinweise</a>
</div>
</footer>
<!-- Pyodide is now loaded only in the Web Worker -->
<script src="app.js"></script>
</body>
</html>