Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChristianHohlfeld
ChristianHohlfeld authored Nov 20, 2024
1 parent fee5173 commit 3129936
Showing 1 changed file with 69 additions and 51 deletions.
120 changes: 69 additions & 51 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,27 @@
<html lang="de" data-theme="bumblebee">

<head>
<!-- Inline Script zur sofortigen Anwendung des Themes, um Flickering zu verhindern -->
<script>
(function() {
const storedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (storedTheme) {
document.documentElement.setAttribute('data-theme', storedTheme);
} else {
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'bumblebee');
}
})();
</script>

<title>skillcoins.de – Die Plattform, die Lernen belohnt</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="skillcoins.de – Die Plattform, die Lernen belohnt">
<meta property="og:description"
content="Verdiene V-Bucks, Steam-Guthaben und mehr durch effektives Lernmanagement. Automatisierte Belohnungen, digitale und physische Auszeichnungen, sichere Fortschrittsüberwachung.">
<meta property="og:image" content="https://skillcoins.de/logo.png"> <!-- Deine Bild-URL -->
<meta property="og:image" content="https://skillcoins.de/logo.png"> <!-- Ihre Bild-URL -->
<meta property="og:url" content="https://skillcoins.de">
<meta property="og:type" content="website">
<!-- Call to Action Meta Tag -->
Expand All @@ -22,6 +35,9 @@
<!-- Canonical Tag -->
<link rel="canonical" href="https://skillcoins.de/">

<!-- Google Fonts für 'Inter' -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<!-- DaisyUI und TailwindCSS -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
Expand All @@ -30,65 +46,68 @@
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

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

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

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

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

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

<!-- Login Button (nur sichtbar, wenn nicht eingeloggt) -->
<button id="keycloak-login" class="btn btn-primary">Login</button>

<!-- Logout Button (nur sichtbar, wenn eingeloggt) -->
<button id="keycloak-logout" class="btn btn-secondary hidden">Logout</button>
<!-- Logout Button (nur sichtbar, wenn eingeloggt) -->
<button id="keycloak-logout" class="btn btn-secondary hidden">Logout</button>
</div>
</div>
</header>
</header>

<!-- Hero Section -->
<main class="container mx-auto my-10">
<div class="hero bg-base-100 shadow-lg p-10 rounded-lg">
<div class="hero-content text-center">
<div>
<h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
<p class="py-6 text-lg">Lerne, sammle Punkte und verdiene digitale Belohnungen!</p>
<!-- Hero Section -->
<main class="container mx-auto my-10">
<div class="hero bg-base-100 shadow-lg p-10 rounded-lg">
<div class="hero-content text-center">
<div>
<h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
<p class="py-6 text-lg">Lerne, sammle Punkte und verdiene digitale Belohnungen!</p>

<!-- CTA - Registrieren Button -->
<div id="cta-container">
<button id="register-button" class="btn btn-primary">Registrieren</button>
<!-- CTA - Registrieren Button -->
<div id="cta-container">
<button id="register-button" class="btn btn-primary">Registrieren</button>
</div>
</div>
</div>
</div>
</div>

<!-- Status -->
<div id="status-container" class="alert alert-info mt-6 hidden">
<span id="status" class="text-gray-600">Nicht eingeloggt.</span>
</div>
</main>
<!-- Status -->
<div id="status-container" class="alert alert-info mt-6 hidden">
<span id="status" class="text-gray-600">Nicht eingeloggt.</span>
</div>
</main>
</div>

<!-- Footer -->
<footer class="footer footer-center p-4 bg-gray-800 text-white">
Expand Down Expand Up @@ -135,7 +154,7 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
registerButton.classList.add('hidden');
loginButton.classList.add('hidden');
logoutButton.classList.remove('hidden');
statusContainer.classList.remove('alert-info', 'hidden');
statusContainer.classList.remove('hidden');
statusText.textContent = 'Eingeloggt.';
console.log("UI aktualisiert: Benutzer eingeloggt.");
}
Expand All @@ -145,8 +164,7 @@ <h1 class="text-5xl font-bold">Willkommen bei SkillCoins</h1>
registerButton.classList.remove('hidden');
loginButton.classList.remove('hidden');
logoutButton.classList.add('hidden');
statusContainer.classList.remove('alert-success', 'alert-error', 'hidden');
statusContainer.classList.add('alert-info', 'hidden');
statusContainer.classList.add('hidden');
statusText.textContent = 'Nicht eingeloggt.';
console.log("UI aktualisiert: Benutzer ausgeloggt.");
}
Expand Down

0 comments on commit 3129936

Please sign in to comment.