Skip to content

Commit e288153

Browse files
ChristianHohlfeldChristianHohlfeld
authored
Update index.html
1 parent ff9405b commit e288153

File tree

1 file changed

+8
-76
lines changed

1 file changed

+8
-76
lines changed

‎index.html‎

Lines changed: 8 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
<!DOCTYPE html>
2-
<html lang="de" data-theme="bumblebee">
2+
<html lang="de" data-theme="dark">
33

44
<head>
55
<!-- Inline Script zur sofortigen Anwendung des Themes, um Flickering zu verhindern -->
66
<script>
77
(function() {
8-
const storedTheme = localStorage.getItem('theme');
9-
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
10-
if (storedTheme) {
11-
document.documentElement.setAttribute('data-theme', storedTheme);
12-
} else {
13-
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'bumblebee');
14-
}
8+
// Da wir nur das Dark Theme verwenden, setzen wir es direkt
9+
document.documentElement.setAttribute('data-theme', 'dark');
1510
})();
1611
</script>
1712

@@ -104,38 +99,18 @@
10499
</script>
105100
</head>
106101

107-
<body class="min-h-screen flex flex-col bg-base-100 text-base-content font-inter">
102+
<body class="min-h-screen flex flex-col bg-neutral text-neutral-content font-inter">
108103

109104
<!-- Wrapper mit futuristischem Gradient -->
110105
<div class="flex-grow bg-gradient-to-r from-purple-800 via-purple-900 to-blue-800">
111106
<!-- Header als DaisyUI Navbar -->
112-
<header class="navbar bg-neutral text-neutral-content shadow-md sticky top-0 z-50">
107+
<header class="navbar bg-base-100 shadow-md sticky top-0 z-50">
113108
<div class="container mx-auto flex justify-between items-center">
114109
<!-- Navbar start: Logo -->
115110
<a href="/" class="btn btn-ghost normal-case text-xl font-bold">skillcoins.de</a>
116111

117-
<!-- Navbar end: Dark Mode Toggle und Auth Buttons -->
112+
<!-- Navbar end: Auth Buttons -->
118113
<div class="flex items-center space-x-4">
119-
<!-- Dark Mode Toggle (Swap Component) -->
120-
<label class="swap swap-rotate">
121-
<!-- Hidden Checkbox -->
122-
<input type="checkbox" id="theme-toggle-checkbox" />
123-
124-
<!-- Sun Icon (Light Mode) -->
125-
<svg class="swap-on fill-current w-8 h-8 text-yellow-400" xmlns="http://www.w3.org/2000/svg"
126-
viewBox="0 0 24 24">
127-
<path
128-
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
129-
</svg>
130-
131-
<!-- Moon Icon (Dark Mode) -->
132-
<svg class="swap-off fill-current w-8 h-8 text-purple-600" xmlns="http://www.w3.org/2000/svg"
133-
viewBox="0 0 24 24">
134-
<path
135-
d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
136-
</svg>
137-
</label>
138-
139114
<!-- Login Button (nur sichtbar, wenn nicht eingeloggt) -->
140115
<button id="keycloak-login" class="btn btn-primary">Login</button>
141116

@@ -147,7 +122,7 @@
147122

148123
<!-- Hero Section -->
149124
<main class="container mx-auto my-10">
150-
<div class="hero bg-neutral text-neutral-content shadow-lg p-10 rounded-lg">
125+
<div class="hero bg-base-100 shadow-lg p-10 rounded-lg">
151126
<div class="hero-content text-center">
152127
<div>
153128
<h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
@@ -181,7 +156,6 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
181156
const registerButton = document.getElementById('register-button');
182157
const loginButton = document.getElementById('keycloak-login');
183158
const logoutButton = document.getElementById('keycloak-logout');
184-
const themeToggleCheckbox = document.getElementById('theme-toggle-checkbox');
185159
const statusContainer = document.getElementById('status-container');
186160
const statusText = document.getElementById('status');
187161
const apiUrl = 'https://resourceserver.de/v1/graphql'; // Hasura GraphQL endpoint
@@ -228,49 +202,7 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
228202
console.log("UI aktualisiert: Benutzer ausgeloggt.");
229203
}
230204

231-
// Dark Mode Toggle Funktionalität
232-
function applyTheme(theme) {
233-
document.documentElement.setAttribute('data-theme', theme);
234-
if (theme === 'dark') {
235-
themeToggleCheckbox.checked = true;
236-
console.log("Theme gesetzt auf 'dark'.");
237-
} else {
238-
themeToggleCheckbox.checked = false;
239-
console.log("Theme gesetzt auf 'bumblebee'.");
240-
}
241-
}
242-
243-
// Überprüfen und Anwenden des Themes basierend auf localStorage oder Systempräferenz
244-
function initializeTheme() {
245-
const storedTheme = localStorage.getItem('theme');
246-
if (storedTheme) {
247-
applyTheme(storedTheme);
248-
console.log(`Gespeichertes Theme gefunden: ${storedTheme}`);
249-
} else {
250-
// Falls kein gespeichertes Theme vorhanden ist, das System-Theme verwenden
251-
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
252-
applyTheme(prefersDark ? 'dark' : 'bumblebee');
253-
console.log(`System Theme verwendet: ${prefersDark ? 'dark' : 'bumblebee'}`);
254-
}
255-
}
256-
257-
// Event Listener für den Dark Mode Toggle Button
258-
themeToggleCheckbox.addEventListener('change', function () {
259-
if (this.checked) {
260-
applyTheme('dark');
261-
localStorage.setItem('theme', 'dark');
262-
console.log("Theme geändert zu 'dark' via Toggle.");
263-
} else {
264-
applyTheme('bumblebee');
265-
localStorage.setItem('theme', 'bumblebee');
266-
console.log("Theme geändert zu 'bumblebee' via Toggle.");
267-
}
268-
});
269-
270-
// Initialisieren des Themes beim Laden der Seite
271-
initializeTheme();
272-
273-
// Initialisierung von Keycloak ohne automatische Weiterleitung
205+
// Initialisieren von Keycloak ohne automatische Weiterleitung
274206
keycloak.init({
275207
checkLoginIframe: false,
276208
onLoad: 'check-sso' // Überprüft, ob eine Sitzung besteht, ohne zum Login zu zwingen

0 commit comments

Comments
 (0)