1. Globale Steuerung:
Oben auf der Seite finden Sie vier wichtige globale Funktionen:
– Ausgabe öffnen und Timer starten: Mit diesem Button wird ein neues Fenster (timer_2.html) geöffnet, in dem Sie alle Timer-Ausgaben live verfolgen können. Gleichzeitig werden alle Timer gestartet.
– Zweites Ausgabe: Zusätzlich öffnet dieser Button ein zweites Fenster (timer_3.html), in dem der aktuelle Zustand aller Timer synchron angezeigt wird.
– Alle Timer zurücksetzen: Mit diesem Button setzen Sie alle Timer (Timer 1 und Timer 2) auf die Ausgangswerte zurück. Dabei werden alle eingegebenen Werte gelöscht und die Standardwerte wiederhergestellt.
– Datei-Upload: Zusätzlich können Sie über die beiden Datei-Upload-Felder TXT-Dateien hochladen, die vorgefertigte Überschriften und Endtexte enthalten. Die Inhalte dieser Dateien werden automatisch in die entsprechenden Dropdown-Menüs übernommen, sodass Sie diese schnell auswählen können.
Hinweis: Die hochgeladenen Dateien müssen lokal gespeichert werden, damit sie vom Skript abgerufen werden können.
➤ Beispieldateien:
Beispieldateien für die Überschriften- und Endtexte können hier heruntergeladen werden.

2. Timer-Überschrift festlegen:
Tragen Sie in das Feld „Timer-Überschrift“ einen Namen ein, z. B. „Kaffeepause“.
Die Funktion des Dropdown-Menüs für vorgefertigte Überschriften funktioniert nur, wenn Sie zuvor eine TXT-Datei hochgeladen haben, die diese Überschriften enthält.

3. Endzeit oder Dauer einstellen:
Entscheiden Sie, ob Sie eine feste Uhrzeit oder eine Zeitdauer verwenden möchten:
– Für eine feste Endzeit: Tragen Sie eine Uhrzeit (z. B. 15:30) in das entsprechende Feld ein.
– Für eine Dauer: Füllen Sie die Felder für Stunden, Minuten und Sekunden aus (z. B. 0 Stunden, 30 Minuten, 0 Sekunden).

4. Timer anhalten:
Mit dem Stop-Button können Sie den Timer individuell anhalten (Timer 1 und Timer 2 getrennt voneinander). Auf der Ausgabeseite wird dann angezeigt, dass der Timer gestoppt wurde.

5. Timer starten:
Um den Timer wieder zu starten, verwenden Sie den Start-Button. Die Endzeit wird dann basierend auf der noch verbleibenden Zeit neu berechnet.
Alternativ können Sie den Start-Button dazu verwenden, einen einzelnen Timer zu starten, ohne dass er über die Ausgabeseite angezeigt wird – einfache Anwendung ohne zusätzliches Ausgabefenster.

6. Einzelnen Timer reseten:
Mit dem Reset-Button setzen Sie den einzelnen Timer vollständig zurück. Dabei werden alle Eingabefelder geleert und der Timer kehrt in den Ausgangszustand zurück.

7. Sichtbarkeit der Timer auf der Ausgabeseite:
Mit dem Button Timer Ein-/Ausblenden können Sie entscheiden, ob der jeweilige Timer auf der Ausgabeseite sichtbar sein soll.

8. Audio-Alarm einstellen:
Mit dem Button Audio-Alarm Ein/Aus schalten Sie den akustischen Alarm für den betroffenen Timer ein oder aus.

9. Lautstärke anpassen und testen:
Stellen Sie mit dem Lautstärkeregler die gewünschte Lautstärke des Audio-Alarms ein.
Testen Sie die Lautstärke mit dem Lautstärke testen-Button.

10. Textdateien für Überschriften und Endtexte erstellen:
Öffne einen Texteditor: Verwende beispielsweise Notepad, Visual Studio Code oder einen anderen Texteditor.
Füge den Wunschtext ein: Pro Dropdown-Aufruf eine eigene Zeile.
Speichere die Datei: Speichere die Datei zum Beispiel unter dem Namen Ueberschriften-Datei.txt und stelle sicher, dass sie im UTF-8‑Format gespeichert wird.
Erstelle die zweite Datei: Wiederhole den Vorgang für den Inhalt der Endtexte und speichere diese zum Beispiel unter dem Namen Endtexte-Datei.txt.

11. Schriftart einbinden:
Um eine eigene Schriftart zu verwenden, kopieren Sie die Schriftdatei (z. B. eine .ttf-Datei) in den Ordner fonts in Ihrem Projekt. Anschließend passen Sie im CSS den @font-face-Block an. Beispiel:

/* ========================= */
/* LOKALES EINBINDEN DER SCHRIFTART ROBOTO */
/* ========================= */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

Danach können Sie in Ihren Styles font-family: 'Roboto', sans-serif; verwenden, um die neue Schriftart anzuzeigen.

12. Sound einbinden:
Um eigene Sound-Dateien zu verwenden (z. B. für den Audio-Alarm), kopieren Sie die gewünschte Audiodatei (z. B. .mp3) in einen Ordner, beispielsweise sound in Ihrem Projekt.

Hinweis zu den Audiodateien:
Die hier verwendeten Audiodateien stammen von der Webseite https://www.salamisound.de. Hier möchte ich mich bei den Betreibern für die Nutzung in meinem Projekt bedanken.
Beachten Sie die folgenden Lizenzvorgaben zur Verwendung dieser Audiodateien:
Für den privaten, persönlichen, künstlerischen und pädagogischen Gebrauch ist es gestattet, die MP3-Dateien zu kopieren und weiter zu verarbeiten (siehe auch die Textdatei „Quelle der Sounddateien“ im Ordner sound).
Sollten Sie den Timer in einem anderen Bereich verwenden oder kommerziell einsetzen, müssen Sie entweder die Datei austauschen bzw. eine eigene Audiodatei einfügen oder den Audio-Alarm stummschalten.