mirror of
https://github.com/trevor1969/teatracker.git
synced 2026-08-09 10:41:59 +00:00
Compare commits
3 Commits
v2.5
...
vibe/versi
| Author | SHA1 | Date | |
|---|---|---|---|
| 3f228b6007 | |||
| 24336b9711 | |||
| daf742e309 |
178
README.md
178
README.md
@ -7,7 +7,7 @@
|
||||
[]
|
||||
[]
|
||||
[]
|
||||
[]
|
||||
|
||||
|
||||
---
|
||||
|
||||
@ -65,11 +65,10 @@
|
||||
- **Zeitraum-Filter**: **Heute**, Letzte 7 Tage, Monat, Jahr oder Gesamt
|
||||
|
||||
### ⚙️ Einstellungen (NEU!)
|
||||
- **Nextcloud-Synchronisation** 🌐
|
||||
- Verbindung zu deiner Nextcloud-Instanz herstellen
|
||||
- Automatische Synchronisation zwischen Geräten
|
||||
- Verbindungstest
|
||||
- Synchronisationsstatus-Anzeige
|
||||
- **Lokale Dateispeicherung** 💾
|
||||
- Daten werden im `data/`-Verzeichnis gespeichert (falls ein lokaler Server läuft)
|
||||
- Automatischer Fallback auf Browser-Speicher (localStorage)
|
||||
- Export/Import-Funktionen für Datensicherung
|
||||
- **Datenverwaltung**
|
||||
- 📤 **Daten exportieren** (JSON-Datei herunterladen)
|
||||
- 📥 **Daten importieren** (JSON-Datei hochladen)
|
||||
@ -112,21 +111,27 @@
|
||||
- Folder: `/ (root)` auswählen
|
||||
3. Deine App ist dann unter `https://trevor1969.github.io/teatracker/` erreichbar
|
||||
|
||||
### Option 3: Mit Nextcloud-Synchronisation (empfohlen!)
|
||||
### Option 2: Mit lokalem Server (empfohlen für Dateispeicherung)
|
||||
|
||||
1. **App öffnen** (lokal oder über GitHub Pages)
|
||||
2. Gehe zum Tab **⚙️ Einstellungen**
|
||||
3. Aktiviere **Nextcloud-Synchronisation**
|
||||
4. Trage deine Nextcloud-Daten ein:
|
||||
- **URL**: `https://wralto.org/nextcloud3`
|
||||
- **Benutzername**: `teetracker`
|
||||
- **App-Passwort**: (dein App-Passwort aus Nextcloud)
|
||||
- **Speicherpfad**: `/TeeTracker/` (Standard)
|
||||
5. Klicke auf **🔍 Verbindung testen**
|
||||
6. Speichere die Konfiguration mit **💾 Speichern**
|
||||
7. **Fertig!** 🎉 Deine Daten werden jetzt automatisch synchronisiert
|
||||
1. **Repository klonen** (oder Dateien herunterladen):
|
||||
```bash
|
||||
git clone https://github.com/trevor1969/teatracker.git
|
||||
cd teatracker
|
||||
```
|
||||
|
||||
**Hinweis:** Aus Sicherheitsgründen musst du dein Passwort manuell eingeben. Es wird nicht in der App gespeichert (nur temporär in sessionStorage).
|
||||
2. **Lokalen Server starten**:
|
||||
```bash
|
||||
# Mit Python 3
|
||||
python -m http.server 8000
|
||||
|
||||
# Mit Node.js (npx)
|
||||
npx serve
|
||||
```
|
||||
|
||||
3. **App öffnen** im Browser: `http://localhost:8000`
|
||||
4. **Fertig!** 🎉 Deine Daten werden automatisch im `data/`-Verzeichnis gespeichert
|
||||
|
||||
**Hinweis:** Die App versucht zunächst, Dateien im `data/`-Verzeichnis zu speichern. Falls das nicht funktioniert (z.B. bei direkter Datei-Öffnung ohne Server), fällt sie automatisch auf localStorage zurück.
|
||||
|
||||
---
|
||||
|
||||
@ -134,7 +139,7 @@
|
||||
|
||||
- **Frontend**: HTML5, CSS3, Vanilla JavaScript (ES6+)
|
||||
- **Charts**: [Chart.js](https://www.chartjs.org/) (über CDN)
|
||||
- **Cloud-Speicher**: [Nextcloud WebDAV API](https://docs.nextcloud.com/server/latest/developer_manual/third_party/webdav.html)
|
||||
- **Lokale Speicherung**: Dateisystem (data/-Verzeichnis) oder Browser localStorage
|
||||
- **Lokaler Speicher**: localStorage (Fallback)
|
||||
- **Design**: Responsive, Mobile-First, Tee-inspirierte Farben
|
||||
|
||||
@ -146,62 +151,67 @@
|
||||
teatracker/
|
||||
├── index.html # Haupt-HTML-Datei mit allen Tabs
|
||||
├── styles.css # Alle Styles und Design
|
||||
├── app.js # gesamte Anwendungslogik + Nextcloud-Integration
|
||||
├── app.js # gesamte Anwendungslogik + lokale Dateispeicherung
|
||||
├── README.md # Diese Datei
|
||||
└── LICENSE # MIT License
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Nextcloud-Integration
|
||||
## 💾 Lokale Dateispeicherung (Version 4.0)
|
||||
|
||||
Ab Version 4.0 werden die Daten lokal im `data/`-Verzeichnis gespeichert, das sich im selben Verzeichnis wie die Programmdateien befindet.
|
||||
|
||||
### Wie es funktioniert
|
||||
|
||||
Die App nutzt die **WebDAV-API** von Nextcloud, um Daten als JSON-Dateien zu speichern:
|
||||
Die App speichert Daten als JSON-Dateien im lokalen Dateisystem:
|
||||
|
||||
```
|
||||
/TeeTracker/
|
||||
data/
|
||||
├── teas.json # Deine Tee-Sorten
|
||||
├── entries.json # Deine Tracking-Einträge
|
||||
└── backup/ # Automatische Backups
|
||||
└── backup/ # Manuelle Backups (optional)
|
||||
└── teetracker_backup_2024-06-05T10-30-00.json
|
||||
```
|
||||
|
||||
### Speichermechanismus
|
||||
|
||||
1. **Mit lokalem Server**: Wenn die App über einen lokalen Server (z.B. `python -m http.server`) geöffnet wird, werden die Daten im `data/`-Verzeichnis gespeichert
|
||||
2. **Ohne Server**: Falls die App direkt als Datei geöffnet wird, fällt sie automatisch auf Browser-Speicher (localStorage) zurück
|
||||
3. **Export/Import**: Daten können jederzeit als JSON-Datei exportiert und importiert werden
|
||||
|
||||
### Vorteile
|
||||
|
||||
| Vorteil | Beschreibung |
|
||||
|---------|--------------|
|
||||
| **🌍 Plattformübergreifend** | Zugriff von allen Geräten mit Internetverbindung |
|
||||
| **🔄 Echtzeit-Sync** | Änderungen werden sofort synchronisiert |
|
||||
| **💾 Automatische Backups** | Daten bleiben in Nextcloud erhalten |
|
||||
| **⚡ Schnell** | Keine Datenbank nötig, einfache Dateispeicherung |
|
||||
| **🔒 Sicher** | HTTPS-Verschlüsselung, App-Passwort (nicht Hauptpasswort) |
|
||||
| **📁 Einfache Dateispeicherung** | Daten liegen direkt bei den Programmdateien |
|
||||
| **🔄 Automatische Erkennung** | Erkennt automatisch, ob Dateispeicherung möglich ist |
|
||||
| **💾 Fallback auf localStorage** | Funktioniert auch ohne Server |
|
||||
| **⚡ Schnell** | Keine externe Abhängigkeiten, einfache JSON-Dateien |
|
||||
| **🔒 Privatsphäre** | Alle Daten bleiben lokal auf deinem Gerät |
|
||||
|
||||
### Fallback-Mechanismus
|
||||
### Daten sichern (Backup)
|
||||
|
||||
Falls Nextcloud nicht erreichbar ist:
|
||||
1. Die App **funktioniert weiter** mit lokalen Daten (localStorage)
|
||||
2. Änderungen werden **lokal gespeichert**
|
||||
3. Beim nächsten erfolgreichen Verbindungsaufbau werden die Daten **automatisch synchronisiert**
|
||||
**Option 1: Automatisch (Dateisystem)**
|
||||
- Die Daten werden automatisch im `data/`-Verzeichnis gespeichert
|
||||
- Einfach das gesamte `data/`-Verzeichnis sichern
|
||||
|
||||
### 🔐 Sicherheitshinweise
|
||||
**Option 2: Manuell (Export)**
|
||||
1. Gehe zu **Einstellungen → Datenverwaltung**
|
||||
2. Klicke auf **📤 Daten exportieren**
|
||||
3. Speichere die JSON-Datei an einem sicheren Ort
|
||||
|
||||
**WICHTIG:** Aus Sicherheitsgründen wird dein Passwort **NICHT** im Klartext in der App oder im localStorage gespeichert!
|
||||
### Daten wiederherstellen (Restore)
|
||||
|
||||
- **sessionStorage**: Das Passwort wird nur in `sessionStorage` gespeichert (wird beim Schließen des Browsers gelöscht)
|
||||
- **Keine Vorbefüllung**: Du musst dein Passwort manuell eingeben
|
||||
- **Kein Klartext in Dateien**: Das Passwort erscheint nirgends im Code
|
||||
**Option 1: Automatisch (Dateisystem)**
|
||||
- Kopiere die gesicherten Dateien zurück in das `data/`-Verzeichnis
|
||||
- Starte die App neu
|
||||
|
||||
### App-Passwort erstellen
|
||||
|
||||
Falls du ein neues Passwort brauchst:
|
||||
1. Logge dich in deine Nextcloud ein (`https://wralto.org/nextcloud3`)
|
||||
2. Gehe zu **Einstellungen → Sicherheit**
|
||||
3. Suche nach **"App-Passwörter"**
|
||||
4. Erstelle ein neues Passwort mit dem Namen **"TeeTracker"**
|
||||
5. Kopiere das Passwort und trage es in den Einstellungen ein
|
||||
|
||||
**Tipp:** Speichere das App-Passwort in einem Passwort-Manager, da es nach dem Erstellen nicht mehr angezeigt wird.
|
||||
**Option 2: Manuell (Import)**
|
||||
1. Gehe zu **Einstellungen → Datenverwaltung**
|
||||
2. Klicke auf **📥 Daten importieren**
|
||||
3. Füge deine exportierten Daten ein oder lade die JSON-Datei hoch
|
||||
4. Wähle, ob du die Daten **ersetzen** oder **zusammenführen** möchtest
|
||||
|
||||
---
|
||||
|
||||
@ -228,9 +238,9 @@ Falls du ein neues Passwort brauchst:
|
||||
|
||||
### Daten sichern (Backup)
|
||||
|
||||
**Option 1: Automatisch (Nextcloud)**
|
||||
- Die Daten werden automatisch in deiner Nextcloud gespeichert
|
||||
- Backups werden im `/TeeTracker/backup/` Verzeichnis erstellt
|
||||
**Option 1: Automatisch (Dateisystem)**
|
||||
- Die Daten werden automatisch im `data/`-Verzeichnis gespeichert
|
||||
- Einfach das gesamte `data/`-Verzeichnis kopieren
|
||||
|
||||
**Option 2: Manuell (Export)**
|
||||
1. Gehe zu **Einstellungen → Datenverwaltung**
|
||||
@ -239,9 +249,9 @@ Falls du ein neues Passwort brauchst:
|
||||
|
||||
### Daten wiederherstellen (Restore)
|
||||
|
||||
**Option 1: Automatisch (Nextcloud)**
|
||||
- Einfach die App auf einem neuen Gerät öffnen
|
||||
- Die Daten werden automatisch von Nextcloud geladen
|
||||
**Option 1: Automatisch (Dateisystem)**
|
||||
- Kopiere die gesicherten Dateien zurück in das `data/`-Verzeichnis
|
||||
- Starte die App neu
|
||||
|
||||
**Option 2: Manuell (Import)**
|
||||
1. Gehe zu **Einstellungen → Datenverwaltung**
|
||||
@ -258,59 +268,46 @@ Falls du von vorne beginnen möchtest:
|
||||
|
||||
**Achtung:** Dieser Vorgang kann nicht rückgängig gemacht werden!
|
||||
|
||||
### Nextcloud-Verbindung prüfen
|
||||
|
||||
Falls die Synchronisation nicht funktioniert:
|
||||
1. Gehe zu **Einstellungen → Nextcloud-Synchronisation**
|
||||
2. Klicke auf **🔍 Verbindung testen**
|
||||
3. Prüfe die Fehlermeldung und korrigiere deine Eingaben
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Problembehebung
|
||||
|
||||
### ❌ Verbindung zu Nextcloud fehlgeschlagen
|
||||
### ❌ Dateispeicherung funktioniert nicht
|
||||
|
||||
**Mögliche Ursachen:**
|
||||
- Falsche URL (muss mit `https://` beginnen)
|
||||
- Falscher Benutzername oder Passwort
|
||||
- Nextcloud ist nicht erreichbar
|
||||
- WebDAV ist deaktiviert (standardmäßig aktiv)
|
||||
- CORS-Probleme (Browser-Beschränkungen)
|
||||
- App wird direkt als Datei geöffnet (ohne lokalen Server)
|
||||
- Keine Schreibrechte im Verzeichnis
|
||||
- Browser-Beschränkungen für Fetch-API
|
||||
|
||||
**Lösungen:**
|
||||
1. Prüfe, ob du dich manuell in Nextcloud einloggen kannst
|
||||
2. Teste die WebDAV-URL direkt im Browser:
|
||||
```
|
||||
https://wralto.org/nextcloud3/remote.php/dav/
|
||||
```
|
||||
3. Erstelle ein neues App-Passwort in Nextcloud
|
||||
4. Versuche einen anderen Browser
|
||||
1. Starte einen lokalen Server (z.B. `python -m http.server 8000`)
|
||||
2. Öffne die App über `http://localhost:8000`
|
||||
3. Prüfe, ob das `data/`-Verzeichnis existiert und beschreibbar ist
|
||||
4. Falls nötig: Nutze die Export/Import-Funktionen für manuelles Speichern
|
||||
5. Prüfe die Browser-Konsole (F12 → Console) auf Fehler
|
||||
|
||||
### ❌ Daten werden nicht synchronisiert
|
||||
### ❌ Daten werden nicht gespeichert
|
||||
|
||||
**Mögliche Ursachen:**
|
||||
- Nextcloud ist offline
|
||||
- Browser blockiert die Verbindung
|
||||
- Zu viele Anfragen in kurzer Zeit
|
||||
- App wird direkt als Datei geöffnet (ohne lokalen Server)
|
||||
- Keine Schreibrechte im `data/`-Verzeichnis
|
||||
- Browser blockiert Fetch-Anfragen
|
||||
|
||||
**Lösungen:**
|
||||
1. Prüfe deine Internetverbindung
|
||||
2. Lade die Seite neu
|
||||
3. Warte einige Minuten und versuche es erneut
|
||||
4. Prüfe die Browser-Konsole auf Fehler
|
||||
5. Versuche, die Daten manuell zu exportieren/importieren
|
||||
1. Starte einen lokalen Server (z.B. `python -m http.server 8000`)
|
||||
2. Öffne die App über `http://localhost:8000`
|
||||
3. Prüfe die Browser-Konsole auf Fehler
|
||||
4. Nutze die Export/Import-Funktionen als Alternative
|
||||
|
||||
### ❌ Daten sind verschwunden
|
||||
|
||||
**Keine Sorge!** Die Daten sind an mehreren Orten gespeichert:
|
||||
1. **Nextcloud** (falls verbunden)
|
||||
1. **Dateisystem** (`data/`-Verzeichnis, falls Server läuft)
|
||||
2. **localStorage** (Fallback)
|
||||
|
||||
**Lösungen:**
|
||||
1. Lade die Seite neu
|
||||
2. Prüfe, ob du mit einem anderen Gerät/Browser verbunden bist
|
||||
2. Prüfe, ob das `data/`-Verzeichnis existiert
|
||||
3. Gehe zu **Einstellungen → Daten exportieren** und sichere deine Daten
|
||||
4. Falls nötig: Importiere deine exportierten Daten
|
||||
|
||||
@ -337,7 +334,7 @@ Dieses Projekt steht unter der **MIT License** – sieh die [LICENSE](LICENSE) D
|
||||
## 🙏 Danksagung
|
||||
|
||||
- [Chart.js](https://www.chartjs.org/) – Für die tollen Diagramme
|
||||
- [Nextcloud](https://nextcloud.com/) – Für die sichere Cloud-Speicherung
|
||||
|
||||
- Alle Tee-Liebhaber da draußen! ☕🍵
|
||||
|
||||
---
|
||||
@ -352,8 +349,8 @@ Fragen oder Feedback? Öffne einfach ein [Issue](https://github.com/trevor1969/t
|
||||
|
||||
### 🆕 Neueste Änderungen
|
||||
|
||||
- **🌐 Nextcloud-Integration** – Plattformübergreifende Synchronisation via WebDAV
|
||||
- **⚙️ Einstellungen-Tab** – Nextcloud-Konfiguration, Daten-Export/Import
|
||||
- **💾 Lokale Dateispeicherung** – Daten werden im `data/`-Verzeichnis gespeichert (Version 4.0)
|
||||
- **⚙️ Einstellungen-Tab** – Datenverwaltung, Export/Import, Hintergrundbild
|
||||
- **🌱 Bio-Checkbox** – Kennzeichnung für Bio-Tees
|
||||
- **📅 Zeitraum "Heute"** – Filter für aktuelle Tagesdaten in Statistiken
|
||||
- **📝 Letzte 10 Einträge** – Anzeige auf der Tracken-Seite
|
||||
@ -362,6 +359,7 @@ Fragen oder Feedback? Öffne einfach ein [Issue](https://github.com/trevor1969/t
|
||||
|
||||
| Version | Datum | Änderungen |
|
||||
|---------|-------|-----------|
|
||||
| 4.0.0 | Juni 2025 | Lokale Dateispeicherung im data/-Verzeichnis, Nextcloud-Integration entfernt |
|
||||
| 1.2.0 | Juni 2024 | Nextcloud-Integration, Einstellungen-Tab, Bio-Checkbox, "Heute"-Filter, letzte Einträge |
|
||||
| 1.1.0 | Juni 2024 | Bio-Checkbox, "Heute"-Zeitraum, letzte 10 Einträge auf Tracken-Seite |
|
||||
| 1.0.0 | Juni 2024 | Erste Version mit Dashboard, Tee-Verwaltung, Tracking, Statistiken |
|
||||
|
||||
71
index.html
71
index.html
@ -43,6 +43,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tea Timer -->
|
||||
<div class="timer-section">
|
||||
<h3>⏱️ Tee-Timer</h3>
|
||||
<div class="timer-controls">
|
||||
<div class="timer-display" id="timer-display">03:00</div>
|
||||
<div class="timer-input-group">
|
||||
<button id="timer-decrease" class="timer-btn">-</button>
|
||||
<input type="number" id="timer-input" min="1" max="15" value="3" class="timer-input">
|
||||
<button id="timer-increase" class="timer-btn">+</button>
|
||||
<span class="timer-unit">Minuten</span>
|
||||
</div>
|
||||
<div class="timer-actions">
|
||||
<button id="timer-start" class="btn btn-primary">Start</button>
|
||||
<button id="timer-pause" class="btn btn-secondary" disabled>Pause</button>
|
||||
<button id="timer-reset" class="btn btn-secondary">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="timer-notification" class="timer-notification" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<div class="recent-activity">
|
||||
<h3>Letzte Aktivitäten</h3>
|
||||
<div id="recent-entries" class="activity-list"></div>
|
||||
@ -127,53 +147,12 @@
|
||||
<section id="settings" class="tab-pane">
|
||||
<h2>⚙️ Einstellungen</h2>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3>🌐 Nextcloud-Synchronisation</h3>
|
||||
<p>Verbinde TeeTracker mit deiner Nextcloud-Instanz für plattformübergreifende Synchronisation.</p>
|
||||
|
||||
<div class="form-group checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" id="nc-enabled">
|
||||
<span class="checkmark"></span>
|
||||
Nextcloud-Synchronisation aktivieren
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="nc-config" style="display: none;">
|
||||
<div class="form-group">
|
||||
<label for="nc-url">Nextcloud-URL *</label>
|
||||
<input type="url" id="nc-url" placeholder="https://deine-nextcloud.de">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="nc-username">Benutzername *</label>
|
||||
<input type="text" id="nc-username" placeholder="Dein Nextcloud-Benutzername">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="nc-password">App-Passwort *</label>
|
||||
<input type="password" id="nc-password" placeholder="App-Passwort aus Nextcloud" autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="nc-path">Speicherpfad</label>
|
||||
<input type="text" id="nc-path" placeholder="/TeeTracker/" value="/TeeTracker/">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button id="test-nc-connection" class="btn btn-secondary">🔍 Verbindung testen</button>
|
||||
<button id="save-nc-config" class="btn btn-primary">💾 Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="nc-status" class="status-message"></div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3>💾 Datenverwaltung</h3>
|
||||
<p>Daten werden im <code>data/</code>-Verzeichnis gespeichert (falls ein lokaler Server läuft) oder im Browser-Speicher (localStorage).</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Synchronisationsstatus</label>
|
||||
<label>Speicherstatus</label>
|
||||
<div id="sync-status" class="status-badge">Lokaler Modus</div>
|
||||
</div>
|
||||
|
||||
@ -181,7 +160,7 @@
|
||||
<button id="export-data" class="btn btn-secondary">📤 Daten exportieren</button>
|
||||
<button id="import-data" class="btn btn-secondary">📥 Daten importieren</button>
|
||||
<button id="clear-data" class="btn btn-danger">🗑️ Alle Daten löschen</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
@ -215,7 +194,6 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3>📊 Statistik</h3>
|
||||
@ -393,6 +371,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast Container -->
|
||||
<div id="toast-container" class="toast-container"></div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
|
||||
99
styles.css
99
styles.css
@ -1036,3 +1036,102 @@ header p {
|
||||
box-shadow: var(--box-shadow);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Tea Timer Styles */
|
||||
.timer-section {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.timer-section h3 {
|
||||
margin-bottom: 15px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.timer-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.timer-display {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.timer-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.timer-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.timer-btn:hover {
|
||||
background-color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.timer-btn:disabled {
|
||||
background-color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.timer-input {
|
||||
width: 60px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--card-bg);
|
||||
}
|
||||
|
||||
.timer-unit {
|
||||
color: var(--text-light);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.timer-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.timer-notification {
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
border-radius: var(--border-radius);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
.timer-notification.success {
|
||||
background-color: rgba(40, 167, 69, 0.2);
|
||||
color: var(--success-color);
|
||||
border: 1px solid var(--success-color);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user