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 5ceb2ea commit 63e4714
Showing 1 changed file with 78 additions and 58 deletions.
136 changes: 78 additions & 58 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"name": "skillcoins.de",
"url": "https://skillcoins.de",
"logo": "https://skillcoins.de/logo.png",
"description": "Die Plattform, die Lernen belohnt. Verdiene V-Bucks, Steam-Guthaben und mehr durch effektives Lernmanagement.",
"description": "Effizientes Rechnungsmanagement für Unternehmen. Einfach und sicher Rechnungen erstellen und versenden. Mahnungserinnerungen, digitale und postalische Zustellung, sichere Zahlungseingänge.",
"founder": {
"@type": "Person",
"name": "Christian Heinrich Hohlfeld"
Expand All @@ -27,7 +27,7 @@
},
"service": {
"@type": "Service",
"serviceType": "Lernmanagement und Belohnungssystem",
"serviceType": "Rechnungsmanagement",
"provider": {
"@type": "Organization",
"name": "skillcoins.de"
Expand All @@ -36,19 +36,19 @@
"@type": "Place",
"name": "Deutschland"
},
"description": "Erstellen, versenden und verwalten Sie Lernaufgaben einfach und effizient. Automatisierte Belohnungszuordnung, Benachrichtigungen und Überwachung von Lernfortschritten."
"description": "Erstellen, versenden und verwalten Sie Rechnungen einfach und effizient. Automatisierte Zahlungszuordnung, Mahnungen und Überwachung von Zahlungseingängen."
},
"offers": {
"@type": "Offer",
"priceCurrency": "EUR",
"price": "30.00",
"description": "Monatlicher Service für Lernmanagement, Belohnungen und Fortschrittszuordnung",
"description": "Monatlicher Service für Rechnungsmanagement, Mahnungen und Zahlungszuordnung",
"url": "https://skillcoins.de"
},
"product": {
"@type": "Product",
"name": "Lernmanagement Service",
"description": "Effizientes Lernmanagement für Unternehmen und Einzelpersonen",
"name": "Rechnungsmanagement Service",
"description": "Effizientes Rechnungsmanagement für Unternehmen",
"offers": {
"@type": "Offer",
"priceCurrency": "EUR",
Expand All @@ -58,48 +58,49 @@
}
}
</script>
<title>skillcoins.de – Die Plattform, die Lernen belohnt</title>
<title>skillcoins.de – Effizientes Rechnungsmanagement für Unternehmen</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:title" content="skillcoins.de – Effizientes Rechnungsmanagement">
<meta property="og:description"
content="Verdiene V-Bucks, Steam-Guthaben und mehr durch effektives Lernmanagement. Automatisierte Belohnungen, digitale und physische Auszeichnungen, sichere Fortschrittsüberwachung.">
content="Erstellen und verwalten Sie Rechnungen einfach und sicher. Automatisierte Mahnungen, digitale und postalische Rechnungszustellung, sichere Zahlungseingänge.">
<meta property="og:image" content="https://skillcoins.de/logo.png"> <!-- Deine Bild-URL -->
<meta property="og:url" content="https://skillcoins.de">
<meta property="og:type" content="website">
<!-- Call to Action Meta Tag -->
<meta property="og:site_name" content="skillcoins.de">
<meta property="og:locale" content="de_DE">
<meta name="description"
content="skillcoins.de macht das Erstellen, Versenden und Verfolgen von Lernaufgaben einfach – mit automatischer Belohnungszuordnung.">
content="skillcoins.de macht das Erstellen, Versenden und Verfolgen von Rechnungen einfach – mit automatischer Zahlungszuordnung.">
<!-- Robots Meta Tag (Optional) -->
<meta name="robots" content="index,follow">
<!-- Canonical Tag -->
<link rel="canonical" href="https://skillcoins.de/">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" />

<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>
<script src="preact.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/keycloak-js@latest/dist/keycloak.min.js"></script>

<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
/* Dein CSS bleibt unverändert */
html,
body {
font-family: 'Inter', sans-serif;
}

/* DaisyUI Overrides oder Custom Styles falls benötigt */
/* Weitere benutzerdefinierte Styles können hier hinzugefügt werden */
</style>
</head>

<body class="bg-base-100 min-h-screen flex flex-col">
<body class="static-gradient min-h-screen flex flex-col">

<!-- Header -->
<header class="navbar bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto flex-1 flex justify-between items-center px-4">
<header class="sticky-header bg-white shadow-md">
<div class="container mx-auto flex justify-between items-center py-2 px-4">
<!-- Logo Text -->
<a href="/" class="text-2xl font-bold text-gray-800">skillcoins.de</a>
<div class="logo-text text-2xl font-bold text-gray-800">skillcoins.de</div>
<div class="flex items-center space-x-4">
<!-- Dark Mode Toggle -->
<button id="theme-toggle" class="btn btn-ghost">
Expand All @@ -120,16 +121,25 @@
</header>

<!-- Hero Section -->
<main class="flex-grow container mx-auto px-4 mt-10">
<section class="hero min-h-screen bg-base-200">
<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 class="max-w-md">
<h1 class="text-5xl font-bold">Willkommen bei skillcoins.de</h1>
<p class="py-6">Die Plattform, die Lernen belohnt. Verdiene V-Bucks, Steam-Guthaben und mehr durch effektives Lernmanagement.</p>
<button id="register-button" class="btn btn-primary">Registrieren</button>
<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>
</div>
</div>
</div>
</section>
</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>

<!-- Footer -->
Expand All @@ -147,6 +157,8 @@ <h1 class="text-5xl font-bold">Willkommen bei skillcoins.de</h1>
const themeToggle = document.getElementById('theme-toggle');
const lightIcon = document.getElementById('theme-toggle-light-icon');
const darkIcon = document.getElementById('theme-toggle-dark-icon');
const statusContainer = document.getElementById('status-container');
const statusText = document.getElementById('status');
const apiUrl = 'https://resourceserver.de/v1/graphql'; // Hasura GraphQL endpoint

// Initialize Keycloak
Expand All @@ -173,47 +185,19 @@ <h1 class="text-5xl font-bold">Willkommen bei skillcoins.de</h1>
function updateUIOnLogin() {
registerButton.classList.add('hidden');
logoutButton.classList.remove('hidden');
statusContainer.classList.remove('alert-info', 'hidden');
statusText.textContent = 'Eingeloggt.';
}

// UI aktualisieren für ausgeloggt Zustand
function updateUIOnLogout() {
registerButton.classList.remove('hidden');
logoutButton.classList.add('hidden');
statusContainer.classList.remove('alert-success', 'alert-error');
statusContainer.classList.add('alert-info', 'hidden');
statusText.textContent = 'Nicht eingeloggt.';
}

// Initialisierung von Keycloak ohne automatische Weiterleitung
keycloak.init({
checkLoginIframe: false,
onLoad: 'check-sso' // Überprüft, ob eine Sitzung besteht, ohne zum Login zu zwingen
}).then(function (authenticated) {
if (authenticated) {
localStorage.setItem('keycloak-token', keycloak.token);
updateUIOnLogin();
} else {
checkToken();
}

// Event Listener für den Registrieren-Button
registerButton.addEventListener('click', function () {
if (!keycloak.authenticated) {
keycloak.register();
}
});

// Event Listener für den Logout-Button
logoutButton.addEventListener('click', function () {
if (keycloak.authenticated) {
keycloak.logout().then(() => {
localStorage.removeItem('keycloak-token');
keycloak.authenticated = false;
updateUIOnLogout();
});
}
});
}).catch(function (err) {
console.error('Failed to initialize Keycloak:', err);
});

// Dark Mode Toggle Funktionalität
function applyTheme(theme) {
if (theme === 'dark') {
Expand Down Expand Up @@ -253,6 +237,42 @@ <h1 class="text-5xl font-bold">Willkommen bei skillcoins.de</h1>

// Initialisieren des Themes beim Laden der Seite
initializeTheme();

// Initialisierung von Keycloak ohne automatische Weiterleitung
keycloak.init({
checkLoginIframe: false,
onLoad: 'check-sso' // Überprüft, ob eine Sitzung besteht, ohne zum Login zu zwingen
}).then(function (authenticated) {
if (authenticated) {
localStorage.setItem('keycloak-token', keycloak.token);
updateUIOnLogin();
} else {
checkToken();
}

// Event Listener für den Registrieren-Button
registerButton.addEventListener('click', function () {
if (!keycloak.authenticated) {
keycloak.register();
}
});

// Event Listener für den Logout-Button
logoutButton.addEventListener('click', function () {
if (keycloak.authenticated) {
keycloak.logout().then(() => {
localStorage.removeItem('keycloak-token');
keycloak.authenticated = false;
updateUIOnLogout();
});
}
});
}).catch(function (err) {
console.error('Fehler bei der Initialisierung von Keycloak:', err);
});

// Überprüfen des Tokens beim Laden der Seite
checkToken();
});
</script>

Expand Down

0 comments on commit 63e4714

Please sign in to comment.