niks

.lh/adhan-webapp/static/README-KLEUREN.md.json

@@ -0,0 +1,18 @@
+{
+    "sourceFile": "adhan-webapp/static/README-KLEUREN.md",
+    "activeCommit": 0,
+    "commits": [
+        {
+            "activePatchIndex": 0,
+            "patches": [
+                {
+                    "date": 1748410011936,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n"
+                }
+            ],
+            "date": 1748410011936,
+            "name": "Commit-0",
+            "content": "# Kleurenschema Adhan App\n\n## Overzicht\nAlle kleuren in de Adhan app worden nu centraal beheerd via het bestand `colors.css`. Dit maakt het gemakkelijk om het hele kleurenschema van de app aan te passen door slechts één bestand te wijzigen.\n\n## Hoofdkleuren\nDe app gebruikt vier hoofdkleuren die je kunt aanpassen:\n\n### 1. Blauw (Primair)\n- `--primary-blue: #1e3c72` - Donkerblauw voor achtergronden\n- `--secondary-blue: #2a5298` - Lichterblauw voor gradiënten\n- `--accent-blue: #2563eb` - Helderblauw voor accenten\n\n### 2. Goud\n- `--gold: #d4af37` - Goudkleur voor speciale accenten\n\n### 3. Basis kleuren\n- `--white: #ffffff` - Wit\n- `--black: #000000` - Zwart\n- `--dark-gray: #111111` - Donkergrijs\n- `--light-gray: #f7fafc` - Lichtgrijs\n\n## Hoe kleuren aanpassen?\n\n### Stap 1: Open colors.css\nBewerk het bestand: `adhan-webapp/static/colors.css`\n\n### Stap 2: Wijzig de hoofdkleuren\nVerander de waarden in de `:root` sectie:\n\n```css\n:root {\n  /* Hoofdkleuren - PAS DEZE AAN */\n  --primary-blue: #1e3c72;      /* Verander naar jouw donkere kleur */\n  --secondary-blue: #2a5298;    /* Verander naar jouw lichte kleur */\n  --accent-blue: #2563eb;       /* Verander naar jouw accent kleur */\n  --gold: #d4af37;              /* Verander naar jouw goud/accent kleur */\n  \n  /* Basis kleuren - meestal niet nodig om aan te passen */\n  --white: #ffffff;\n  --black: #000000;\n  --dark-gray: #111111;\n  --light-gray: #f7fafc;\n}\n```\n\n### Stap 3: Sla op en herlaad\nNa het opslaan van `colors.css` worden alle kleuren automatisch bijgewerkt in:\n- Hoofdpagina (`index.html`)\n- Adzkaar pagina (`adzkaar.html`)\n- Quran speler (`quran.html`)\n- Instellingen (`settings.html`)\n- Debug pagina (`debug.html`)\n\n## Voorbeelden van kleurenschema's\n\n### Groen thema\n```css\n--primary-blue: #1e4d3c;\n--secondary-blue: #2a8052;\n--accent-blue: #25eb63;\n--gold: #d4af37;\n```\n\n### Paars thema\n```css\n--primary-blue: #4c1e72;\n--secondary-blue: #6a2a98;\n--accent-blue: #8b25eb;\n--gold: #d4af37;\n```\n\n### Rood thema\n```css\n--primary-blue: #721e1e;\n--secondary-blue: #982a2a;\n--accent-blue: #eb2525;\n--gold: #d4af37;\n```\n\n## Geavanceerde aanpassingen\n\n### Transparante varianten\nDe app gebruikt automatisch transparante versies van de kleuren. Deze worden automatisch gegenereerd, maar je kunt ze ook handmatig aanpassen:\n\n```css\n--white-10: rgba(255, 255, 255, 0.1);   /* 10% transparant wit */\n--white-20: rgba(255, 255, 255, 0.2);   /* 20% transparant wit */\n--black-30: rgba(0, 0, 0, 0.3);         /* 30% transparant zwart */\n```\n\n### Gradiënten\nDe hoofdgradiënt wordt automatisch gegenereerd uit de primaire kleuren:\n\n```css\n--primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);\n```\n\n## Bestanden die het kleurenschema gebruiken\n\n1. **colors.css** - Centraal kleurenbestand (HOOFDBESTAND OM AAN TE PASSEN)\n2. **style.css** - Importeert colors.css en gebruikt de variabelen\n3. **quran.css** - Importeert colors.css voor Quran specifieke styling\n4. **adzkaar.html** - Gebruikt de kleurvariabelen in inline CSS\n\n## Tips\n\n1. **Test altijd beide thema's**: Controleer zowel de lichte als donkere modus na wijzigingen\n2. **Gebruik kleurcontrast tools**: Zorg ervoor dat tekst goed leesbaar blijft\n3. **Maak een backup**: Kopieer `colors.css` voordat je grote wijzigingen maakt\n4. **Consistentie**: Gebruik dezelfde kleurfamilie voor een professionele uitstraling\n\n## Problemen oplossen\n\nAls kleuren niet worden bijgewerkt:\n1. Controleer of `colors.css` correct wordt geïmporteerd\n2. Ververs de browser cache (Ctrl+F5 of Cmd+Shift+R)\n3. Controleer de browser console voor CSS fouten\n4. Zorg ervoor dat CSS variabelen correct zijn geschreven (met `--` prefix) "
+        }
+    ]
+}

.lh/adhan-webapp/static/colors.css.json

@@ -0,0 +1,18 @@
+{
+    "sourceFile": "adhan-webapp/static/colors.css",
+    "activeCommit": 0,
+    "commits": [
+        {
+            "activePatchIndex": 0,
+            "patches": [
+                {
+                    "date": 1748409896896,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n"
+                }
+            ],
+            "date": 1748409896896,
+            "name": "Commit-0",
+            "content": "/* Centraal Kleurenschema voor Adhan App */\n:root {\n  /* Hoofdkleuren */\n  --primary-blue: #1e3c72;\n  --secondary-blue: #2a5298;\n  --accent-blue: #2563eb;\n  --gold: #d4af37;\n  --white: #ffffff;\n  --black: #000000;\n  --dark-gray: #111111;\n  --light-gray: #f7fafc;\n  \n  /* Gradient achtergronden */\n  --primary-gradient: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);\n  --gold-gradient: linear-gradient(135deg, var(--gold) 0%, #f4e17a 100%);\n  \n  /* Transparante varianten */\n  --white-10: rgba(255, 255, 255, 0.1);\n  --white-15: rgba(255, 255, 255, 0.15);\n  --white-20: rgba(255, 255, 255, 0.2);\n  --white-30: rgba(255, 255, 255, 0.3);\n  --black-30: rgba(0, 0, 0, 0.3);\n  --black-50: rgba(0, 0, 0, 0.5);\n  \n  /* Tekst kleuren */\n  --text-primary-light: #222222;\n  --text-primary-dark: #ffffff;\n  --text-secondary-light: #666666;\n  --text-secondary-dark: #bbbbbb;\n  --text-muted-light: #c0c6d0;\n  --text-muted-dark: #e0e6ed;\n  \n  /* Achtergrond kleuren */\n  --bg-light: var(--light-gray);\n  --bg-dark: var(--dark-gray);\n  --panel-bg-light: var(--white);\n  --panel-bg-dark: rgba(24, 24, 24, 0.8);\n  \n  /* Border kleuren */\n  --border-light: #e0e6ed;\n  --border-dark: var(--white-20);\n  \n  /* Accent kleuren voor verschillende states */\n  --active-bg-light: #fffbe6;\n  --active-bg-dark: rgba(234, 179, 8, 0.08);\n  --hover-bg-light: rgba(212, 175, 55, 0.1);\n  --hover-bg-dark: var(--white-10);\n  \n  /* Schaduwen */\n  --shadow-light: 0 8px 32px 0 rgba(0, 0, 0, 0.25);\n  --shadow-dark: 0 8px 32px 0 rgba(0, 0, 0, 0.5);\n  --text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);\n  --text-shadow-strong: 2px 2px 8px var(--black);\n}\n\n/* Light theme variabelen */\nhtml.light {\n  --bg: var(--bg-light);\n  --text: var(--text-primary-light);\n  --text-secondary: var(--text-secondary-light);\n  --text-muted: var(--text-muted-light);\n  --panel-bg: var(--panel-bg-light);\n  --panel-text: var(--text-primary-light);\n  --accent: var(--accent-blue);\n  --accent-color: var(--gold);\n  --border-color: var(--border-light);\n  --active-bg: var(--active-bg-light);\n  --hover-bg: var(--hover-bg-light);\n  --shadow: var(--shadow-light);\n}\n\n/* Dark theme variabelen */\nhtml.dark, body.dark {\n  --bg: var(--bg-dark);\n  --text: var(--text-primary-dark);\n  --text-secondary: var(--text-secondary-dark);\n  --text-muted: var(--text-muted-dark);\n  --panel-bg: var(--panel-bg-dark);\n  --panel-text: var(--text-primary-dark);\n  --accent: var(--white);\n  --accent-color: var(--gold);\n  --border-color: var(--border-dark);\n  --active-bg: var(--active-bg-dark);\n  --hover-bg: var(--hover-bg-dark);\n  --shadow: var(--shadow-dark);\n} "
+        }
+    ]
+}