mirror of
https://github.com/trevor1969/teatracker.git
synced 2026-08-09 18:51:59 +00:00
Compare commits
5 Commits
1263a5238b
...
v1.0.0
| Author | SHA1 | Date | |
|---|---|---|---|
| 58e2a70201 | |||
| b3c1041792 | |||
| 233647be4a | |||
| 990ebb134d | |||
| 142a671016 |
236
README.md
236
README.md
@ -7,14 +7,15 @@
|
||||
[]
|
||||
[]
|
||||
[]
|
||||
[]
|
||||
|
||||
---
|
||||
|
||||
## 📸 Screenshots
|
||||
|
||||
| Dashboard | Tee-Sorten | Tracken | Statistiken |
|
||||
|-----------|------------|---------|-------------|
|
||||
|  |  |  |  |
|
||||
| Dashboard | Tee-Sorten | Tracken | Statistiken | Einstellungen |
|
||||
|-----------|------------|---------|-------------|--------------|
|
||||
|  |  |  |  |  |
|
||||
|
||||
*(Screenshots werden automatisch generiert, sobald die App live ist)*
|
||||
|
||||
@ -33,6 +34,7 @@
|
||||
- **Hinzufügen**: Neue Tee-Sorten mit allen Details anlegen
|
||||
- Name (Pflichtfeld)
|
||||
- Typ (Schwarztee, Grüntee, Weißtee, Oolong, Pu-Erh, Früchtetee, Kräutertee, Sonstiges)
|
||||
- **Bio-Checkbox** 🌱: Kennzeichnung für Bio-Tees
|
||||
- Marke (optional)
|
||||
- Beschreibung (optional)
|
||||
- Farbe (für individuelle Darstellung)
|
||||
@ -48,6 +50,7 @@
|
||||
- **Uhrzeit** angeben (optional)
|
||||
- **Menge** in Tassen (Pflichtfeld, 1-10)
|
||||
- **Notizen** hinzufügen (z.B. "Mit Honig", "besonders stark")
|
||||
- **Letzte 10 Einträge** werden unter dem Formular angezeigt
|
||||
|
||||
### 📈 Statistiken
|
||||
- **Diagramme**: Visuelle Darstellung deines Konsums
|
||||
@ -59,7 +62,22 @@
|
||||
- Aktive Tage
|
||||
- Verschiedene Tees
|
||||
- Meist getrunkener Tee
|
||||
- **Zeitraum-Filter**: Letzte 7 Tage, Monat, Jahr oder Gesamt
|
||||
- **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
|
||||
- **Datenverwaltung**
|
||||
- 📤 **Daten exportieren** (JSON-Datei herunterladen)
|
||||
- 📥 **Daten importieren** (JSON-Datei hochladen)
|
||||
- 🗑️ **Alle Daten löschen** (mit Bestätigung)
|
||||
- **Statistik-Übersicht**
|
||||
- Gesamt Tassen
|
||||
- Anzahl Tee-Sorten
|
||||
- Erster/Letzter Eintrag
|
||||
|
||||
---
|
||||
|
||||
@ -94,11 +112,21 @@
|
||||
- Folder: `/ (root)` auswählen
|
||||
3. Deine App ist dann unter `https://trevor1969.github.io/teatracker/` erreichbar
|
||||
|
||||
### Option 3: Netlify/Vercel
|
||||
### Option 3: Mit Nextcloud-Synchronisation (empfohlen!)
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/trevor1969/teatracker)
|
||||
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
|
||||
|
||||
Einfach auf den Button klicken und deine eigene Instanz deployen!
|
||||
**Hinweis:** Aus Sicherheitsgründen musst du dein Passwort manuell eingeben. Es wird nicht in der App gespeichert (nur temporär in sessionStorage).
|
||||
|
||||
---
|
||||
|
||||
@ -106,7 +134,8 @@ Einfach auf den Button klicken und deine eigene Instanz deployen!
|
||||
|
||||
- **Frontend**: HTML5, CSS3, Vanilla JavaScript (ES6+)
|
||||
- **Charts**: [Chart.js](https://www.chartjs.org/) (über CDN)
|
||||
- **Speicher**: localStorage (Daten bleiben im Browser erhalten)
|
||||
- **Cloud-Speicher**: [Nextcloud WebDAV API](https://docs.nextcloud.com/server/latest/developer_manual/third_party/webdav.html)
|
||||
- **Lokaler Speicher**: localStorage (Fallback)
|
||||
- **Design**: Responsive, Mobile-First, Tee-inspirierte Farben
|
||||
|
||||
---
|
||||
@ -115,14 +144,67 @@ Einfach auf den Button klicken und deine eigene Instanz deployen!
|
||||
|
||||
```
|
||||
teatracker/
|
||||
├── index.html # Haupt-HTML-Datei
|
||||
├── styles.css # Alle Styles und Design
|
||||
├── app.js # gesamte Anwendungslogik
|
||||
└── README.md # Diese Datei
|
||||
├── index.html # Haupt-HTML-Datei mit allen Tabs
|
||||
├── styles.css # Alle Styles und Design
|
||||
├── app.js # gesamte Anwendungslogik + Nextcloud-Integration
|
||||
├── README.md # Diese Datei
|
||||
└── LICENSE # MIT License
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Nextcloud-Integration
|
||||
|
||||
### Wie es funktioniert
|
||||
|
||||
Die App nutzt die **WebDAV-API** von Nextcloud, um Daten als JSON-Dateien zu speichern:
|
||||
|
||||
```
|
||||
/TeeTracker/
|
||||
├── teas.json # Deine Tee-Sorten
|
||||
├── entries.json # Deine Tracking-Einträge
|
||||
└── backup/ # Automatische Backups
|
||||
└── teetracker_backup_2024-06-05T10-30-00.json
|
||||
```
|
||||
|
||||
### 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) |
|
||||
|
||||
### Fallback-Mechanismus
|
||||
|
||||
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**
|
||||
|
||||
### 🔐 Sicherheitshinweise
|
||||
|
||||
**WICHTIG:** Aus Sicherheitsgründen wird dein Passwort **NICHT** im Klartext in der App oder im localStorage gespeichert!
|
||||
|
||||
- **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
|
||||
|
||||
### 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.
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Design
|
||||
|
||||
### Farben
|
||||
@ -132,6 +214,7 @@ teatracker/
|
||||
|  `#4ECDC4` | Sekundärfarbe (Türkis) |
|
||||
|  `#228B22` | Grüntee |
|
||||
|  `#FF6347` | Akzentfarbe |
|
||||
|  `#28a745` | Erfolg (Grün) |
|
||||
|
||||
### Responsive Design
|
||||
- ✅ Desktop (ab 1200px)
|
||||
@ -143,35 +226,93 @@ teatracker/
|
||||
|
||||
## 💡 Tipps & Tricks
|
||||
|
||||
### Daten sichern
|
||||
Da die Daten im localStorage gespeichert werden, sind sie nur in deinem Browser verfügbar. Um ein Backup zu erstellen:
|
||||
### Daten sichern (Backup)
|
||||
|
||||
1. Browser-Konsole öffnen (F12 → Console)
|
||||
2. Folgenden Code ausführen:
|
||||
```javascript
|
||||
const teas = JSON.parse(localStorage.getItem('teatracker_teas'));
|
||||
const entries = JSON.parse(localStorage.getItem('teatracker_entries'));
|
||||
console.log('Teas:', teas);
|
||||
console.log('Entries:', entries);
|
||||
```
|
||||
3. Daten kopieren und in einer Datei speichern
|
||||
**Option 1: Automatisch (Nextcloud)**
|
||||
- Die Daten werden automatisch in deiner Nextcloud gespeichert
|
||||
- Backups werden im `/TeeTracker/backup/` Verzeichnis erstellt
|
||||
|
||||
### Daten wiederherstellen
|
||||
```javascript
|
||||
const backupTeas = [/* deine gesicherten Tees */];
|
||||
const backupEntries = [/* deine gesicherten Einträge */];
|
||||
localStorage.setItem('teatracker_teas', JSON.stringify(backupTeas));
|
||||
localStorage.setItem('teatracker_entries', JSON.stringify(backupEntries));
|
||||
location.reload();
|
||||
```
|
||||
**Option 2: Manuell (Export)**
|
||||
1. Gehe zu **Einstellungen → Datenverwaltung**
|
||||
2. Klicke auf **📤 Daten exportieren**
|
||||
3. Speichere die JSON-Datei an einem sicheren Ort
|
||||
|
||||
### Daten wiederherstellen (Restore)
|
||||
|
||||
**Option 1: Automatisch (Nextcloud)**
|
||||
- Einfach die App auf einem neuen Gerät öffnen
|
||||
- Die Daten werden automatisch von Nextcloud geladen
|
||||
|
||||
**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
|
||||
|
||||
### Daten zurücksetzen
|
||||
|
||||
Falls du von vorne beginnen möchtest:
|
||||
```javascript
|
||||
localStorage.removeItem('teatracker_teas');
|
||||
localStorage.removeItem('teatracker_entries');
|
||||
location.reload();
|
||||
```
|
||||
1. Gehe zu **Einstellungen → Datenverwaltung**
|
||||
2. Klicke auf **🗑️ Alle Daten löschen**
|
||||
3. Bestätige die Aktion
|
||||
|
||||
**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
|
||||
|
||||
**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)
|
||||
|
||||
**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
|
||||
5. Prüfe die Browser-Konsole (F12 → Console) auf Fehler
|
||||
|
||||
### ❌ Daten werden nicht synchronisiert
|
||||
|
||||
**Mögliche Ursachen:**
|
||||
- Nextcloud ist offline
|
||||
- Browser blockiert die Verbindung
|
||||
- Zu viele Anfragen in kurzer Zeit
|
||||
|
||||
**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
|
||||
|
||||
### ❌ Daten sind verschwunden
|
||||
|
||||
**Keine Sorge!** Die Daten sind an mehreren Orten gespeichert:
|
||||
1. **Nextcloud** (falls verbunden)
|
||||
2. **localStorage** (Fallback)
|
||||
|
||||
**Lösungen:**
|
||||
1. Lade die Seite neu
|
||||
2. Prüfe, ob du mit einem anderen Gerät/Browser verbunden bist
|
||||
3. Gehe zu **Einstellungen → Daten exportieren** und sichere deine Daten
|
||||
4. Falls nötig: Importiere deine exportierten Daten
|
||||
|
||||
---
|
||||
|
||||
@ -196,16 +337,37 @@ 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! ☕🍵
|
||||
|
||||
---
|
||||
|
||||
## 📞 Kontakt
|
||||
## 📞 Kontakt & Support
|
||||
|
||||
Fragen oder Feedback? Öffne einfach ein [Issue](https://github.com/trevor1969/teatracker/issues) oder einen [Pull Request](https://github.com/trevor1969/teatracker/pulls).
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Changelog
|
||||
|
||||
### 🆕 Neueste Änderungen
|
||||
|
||||
- **🌐 Nextcloud-Integration** – Plattformübergreifende Synchronisation via WebDAV
|
||||
- **⚙️ Einstellungen-Tab** – Nextcloud-Konfiguration, Daten-Export/Import
|
||||
- **🌱 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
|
||||
|
||||
### 📅 Versionshistorie
|
||||
|
||||
| Version | Datum | Änderungen |
|
||||
|---------|-------|-----------|
|
||||
| 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 |
|
||||
|
||||
---
|
||||
|
||||
**Viel Spaß beim Tee-Tracken!** 🍵✨
|
||||
|
||||
*Made with ❤️ and JavaScript*
|
||||
|
||||
103
index.html
103
index.html
@ -18,6 +18,7 @@
|
||||
<button class="tab-button" data-tab="teas">Tee-Sorten</button>
|
||||
<button class="tab-button" data-tab="track">Tracken</button>
|
||||
<button class="tab-button" data-tab="stats">Statistiken</button>
|
||||
<button class="tab-button" data-tab="settings">⚙️ Einstellungen</button>
|
||||
</nav>
|
||||
|
||||
<main class="tab-content">
|
||||
@ -117,6 +118,90 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Einstellungen Tab -->
|
||||
<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>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Synchronisationsstatus</label>
|
||||
<div id="sync-status" class="status-badge">Lokaler Modus</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<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">
|
||||
<h3>📊 Statistik</h3>
|
||||
<div class="stats-overview">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Gesamt Tassen:</span>
|
||||
<span id="settings-total-cups">0</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Tee-Sorten:</span>
|
||||
<span id="settings-total-teas">0</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Erster Eintrag:</span>
|
||||
<span id="settings-first-entry">-</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Letzter Eintrag:</span>
|
||||
<span id="settings-last-entry">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Statistiken Tab -->
|
||||
<section id="stats" class="tab-pane">
|
||||
<h2>Statistiken</h2>
|
||||
@ -229,6 +314,24 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Modal -->
|
||||
<div id="import-modal" class="modal">
|
||||
<div class="modal-content" style="max-width: 600px;">
|
||||
<div class="modal-header">
|
||||
<h2>Daten importieren</h2>
|
||||
<button id="close-import-modal" class="close-btn">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Füge deine exportierten TeeTracker-Daten hier ein:</p>
|
||||
<textarea id="import-data-textarea" class="modal-textarea" placeholder="{\n \"teas\": [...],\n \"entries\": [...]\n}"></textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="import-data-btn" class="btn btn-primary" onclick="window.app.handleImportData()">📥 Importieren</button>
|
||||
<button id="cancel-import-btn" class="btn btn-secondary" onclick="window.app.closeImportModal()">Abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
121
styles.css
121
styles.css
@ -815,3 +815,124 @@ header p {
|
||||
.organic-badge:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Settings Section */
|
||||
.settings-section {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 20px;
|
||||
box-shadow: var(--box-shadow);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.settings-section h3 {
|
||||
margin-bottom: 15px;
|
||||
color: var(--text-color);
|
||||
border-bottom: 2px solid var(--primary-light);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.settings-section p {
|
||||
color: var(--text-light);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Status Message */
|
||||
.status-message {
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
background-color: rgba(40, 167, 69, 0.1);
|
||||
color: var(--success-color);
|
||||
border: 1px solid var(--success-color);
|
||||
}
|
||||
|
||||
.status-message.error {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
color: var(--danger-color);
|
||||
border: 1px solid var(--danger-color);
|
||||
}
|
||||
|
||||
.status-message.info {
|
||||
background-color: rgba(78, 205, 196, 0.1);
|
||||
color: var(--secondary-color);
|
||||
border: 1px solid var(--secondary-color);
|
||||
}
|
||||
|
||||
/* Status Badge */
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-badge.local {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-badge.connected {
|
||||
background-color: var(--success-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-badge.disconnected {
|
||||
background-color: var(--danger-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-badge.syncing {
|
||||
background-color: var(--warning-color);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Stats Overview */
|
||||
.stats-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--text-light);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Modal for Import/Export */
|
||||
.modal-textarea {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
background-color: #f5f5f5;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 12px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.modal-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user