Skip to content

Commit 3129936

Browse files
ChristianHohlfeldChristianHohlfeld
authored
Update index.html
1 parent fee5173 commit 3129936

File tree

1 file changed

+69
-51
lines changed

1 file changed

+69
-51
lines changed

‎index.html‎

Lines changed: 69 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,27 @@
22
<html lang="de" data-theme="bumblebee">
33

44
<head>
5+
<!-- Inline Script zur sofortigen Anwendung des Themes, um Flickering zu verhindern -->
6+
<script>
7+
(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+
}
15+
})();
16+
</script>
17+
518
<title>skillcoins.de – Die Plattform, die Lernen belohnt</title>
619
<meta charset="UTF-8">
720
<meta name="viewport" content="width=device-width, initial-scale=1.0">
821
<!-- Open Graph Meta Tags -->
922
<meta property="og:title" content="skillcoins.de – Die Plattform, die Lernen belohnt">
1023
<meta property="og:description"
1124
content="Verdiene V-Bucks, Steam-Guthaben und mehr durch effektives Lernmanagement. Automatisierte Belohnungen, digitale und physische Auszeichnungen, sichere Fortschrittsüberwachung.">
12-
<meta property="og:image" content="https://skillcoins.de/logo.png"> <!-- Deine Bild-URL -->
25+
<meta property="og:image" content="https://skillcoins.de/logo.png"> <!-- Ihre Bild-URL -->
1326
<meta property="og:url" content="https://skillcoins.de">
1427
<meta property="og:type" content="website">
1528
<!-- Call to Action Meta Tag -->
@@ -22,6 +35,9 @@
2235
<!-- Canonical Tag -->
2336
<link rel="canonical" href="https://skillcoins.de/">
2437

38+
<!-- Google Fonts für 'Inter' -->
39+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
40+
2541
<!-- DaisyUI und TailwindCSS -->
2642
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
2743
<script src="https://cdn.tailwindcss.com"></script>
@@ -30,65 +46,68 @@
3046
<link rel="icon" href="favicon.ico" type="image/x-icon">
3147
</head>
3248

33-
<body class="min-h-screen flex flex-col bg-base-100 text-base-content">
49+
<body class="min-h-screen flex flex-col">
50+
<!-- Wrapper mit futuristischem Gradient -->
51+
<div class="flex-grow bg-gradient-to-r from-pink-500 via-purple-600 to-pink-500">
52+
<!-- Header als DaisyUI Navbar -->
53+
<header class="navbar bg-transparent backdrop-blur-md shadow-md sticky top-0 z-50">
54+
<div class="container mx-auto flex justify-between items-center">
55+
<!-- Navbar start: Logo -->
56+
<a href="/" class="btn btn-ghost normal-case text-xl font-bold">skillcoins.de</a>
3457

35-
<!-- Header als DaisyUI Navbar -->
36-
<header class="navbar bg-base-100 shadow-md sticky top-0 z-50">
37-
<div class="container mx-auto flex justify-between items-center">
38-
<!-- Navbar start: Logo -->
39-
<a href="/" class="btn btn-ghost normal-case text-xl">skillcoins.de</a>
58+
<!-- Navbar end: Dark Mode Toggle und Auth Buttons -->
59+
<div class="flex items-center space-x-4">
60+
<!-- Dark Mode Toggle (Swap Component) -->
61+
<label class="swap swap-rotate">
62+
<!-- Hidden Checkbox -->
63+
<input type="checkbox" id="theme-toggle-checkbox" />
4064

41-
<!-- Navbar end: Dark Mode Toggle und Auth Buttons -->
42-
<div class="flex items-center space-x-4">
43-
<!-- Dark Mode Toggle (Swap Component) -->
44-
<label class="swap swap-rotate">
45-
<!-- Hidden Checkbox -->
46-
<input type="checkbox" id="theme-toggle-checkbox" />
65+
<!-- Sun Icon (Light Mode) -->
66+
<svg class="swap-on fill-current w-8 h-8 text-yellow-400" xmlns="http://www.w3.org/2000/svg"
67+
viewBox="0 0 24 24">
68+
<path
69+
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" />
70+
</svg>
4771

48-
<!-- Sun Icon (Light Mode) -->
49-
<svg class="swap-on fill-current w-8 h-8 text-yellow-400" xmlns="http://www.w3.org/2000/svg"
50-
viewBox="0 0 24 24">
51-
<path
52-
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" />
53-
</svg>
72+
<!-- Moon Icon (Dark Mode) -->
73+
<svg class="swap-off fill-current w-8 h-8 text-purple-600" xmlns="http://www.w3.org/2000/svg"
74+
viewBox="0 0 24 24">
75+
<path
76+
d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
77+
</svg>
78+
</label>
5479

55-
<!-- Moon Icon (Dark Mode) -->
56-
<svg class="swap-off fill-current w-8 h-8 text-purple-600" xmlns="http://www.w3.org/2000/svg"
57-
viewBox="0 0 24 24">
58-
<path
59-
d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
60-
</svg>
61-
</label>
80+
<!-- Login Button (nur sichtbar, wenn nicht eingeloggt) -->
81+
<button id="keycloak-login" class="btn btn-primary">Login</button>
6282

63-
<!-- Login Button (nur sichtbar, wenn nicht eingeloggt) -->
64-
<button id="keycloak-login" class="btn btn-primary">Login</button>
65-
66-
<!-- Logout Button (nur sichtbar, wenn eingeloggt) -->
67-
<button id="keycloak-logout" class="btn btn-secondary hidden">Logout</button>
83+
<!-- Logout Button (nur sichtbar, wenn eingeloggt) -->
84+
<button id="keycloak-logout" class="btn btn-secondary hidden">Logout</button>
85+
</div>
6886
</div>
69-
</header>
87+
</header>
7088

71-
<!-- Hero Section -->
72-
<main class="container mx-auto my-10">
73-
<div class="hero bg-base-100 shadow-lg p-10 rounded-lg">
74-
<div class="hero-content text-center">
75-
<div>
76-
<h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
77-
<p class="py-6 text-lg">Lerne, sammle Punkte und verdiene digitale Belohnungen!</p>
89+
<!-- Hero Section -->
90+
<main class="container mx-auto my-10">
91+
<div class="hero bg-base-100 shadow-lg p-10 rounded-lg">
92+
<div class="hero-content text-center">
93+
<div>
94+
<h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
95+
<p class="py-6 text-lg">Lerne, sammle Punkte und verdiene digitale Belohnungen!</p>
7896

79-
<!-- CTA - Registrieren Button -->
80-
<div id="cta-container">
81-
<button id="register-button" class="btn btn-primary">Registrieren</button>
97+
<!-- CTA - Registrieren Button -->
98+
<div id="cta-container">
99+
<button id="register-button" class="btn btn-primary">Registrieren</button>
100+
</div>
82101
</div>
83102
</div>
84103
</div>
85-
</div>
86104

87-
<!-- Status -->
88-
<div id="status-container" class="alert alert-info mt-6 hidden">
89-
<span id="status" class="text-gray-600">Nicht eingeloggt.</span>
90-
</div>
91-
</main>
105+
<!-- Status -->
106+
<div id="status-container" class="alert alert-info mt-6 hidden">
107+
<span id="status" class="text-gray-600">Nicht eingeloggt.</span>
108+
</div>
109+
</main>
110+
</div>
92111

93112
<!-- Footer -->
94113
<footer class="footer footer-center p-4 bg-gray-800 text-white">
@@ -135,7 +154,7 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
135154
registerButton.classList.add('hidden');
136155
loginButton.classList.add('hidden');
137156
logoutButton.classList.remove('hidden');
138-
statusContainer.classList.remove('alert-info', 'hidden');
157+
statusContainer.classList.remove('hidden');
139158
statusText.textContent = 'Eingeloggt.';
140159
console.log("UI aktualisiert: Benutzer eingeloggt.");
141160
}
@@ -145,8 +164,7 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
145164
registerButton.classList.remove('hidden');
146165
loginButton.classList.remove('hidden');
147166
logoutButton.classList.add('hidden');
148-
statusContainer.classList.remove('alert-success', 'alert-error', 'hidden');
149-
statusContainer.classList.add('alert-info', 'hidden');
167+
statusContainer.classList.add('hidden');
150168
statusText.textContent = 'Nicht eingeloggt.';
151169
console.log("UI aktualisiert: Benutzer ausgeloggt.");
152170
}

0 commit comments

Comments
 (0)