<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kino Nacht Inhaltsverzeichnis</title>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/jpeg" href="img/favicon.jpg">
</head>
<body>
<h1>Kino Nacht Inhaltsverzeichnis</h1>
<div class="container">
<!-- Tabs -->
<div class="tabs">
<div class="tab active" data-category="film">🎬 Film</div>
<div class="tab" data-category="serien">📺 Serien</div>
<div class="tab" data-category="anime">📖 Anime</div>
<div class="tab" data-category="kinderfilme">🧸 Kinderfilme</div>
<div class="tab" data-category="animeSerien">🍥 Anime-Serien</div> <!-- Neue Kategorie -->
<div class="tab" data-category="jahreszeitenZauber">🌸 Jahreszeiten-Zauber</div> <!-- Neue Kategorie -->
</div>
<!-- Inhalt -->
<div class="content active" id="filmContent">
<div id="filmList"></div>
</div>
<div class="content" id="serienContent">
<div id="serienList"></div>
</div>
<div class="content" id="animeContent">
<div id="animeList"></div>
</div>
<div class="content" id="kinderfilmeContent">
<div id="kinderfilmeList"></div>
</div>
<div class="content" id="animeSerienContent">
<div id="animeSerienList"></div>
</div>
<div class="content" id="jahreszeitenZauberContent">
<div id="jahreszeitenZauberList"></div>
</div>
</div>
<!-- Suche Widget -->
<div class="search-widget">
<h3>Suche Alle Kategorien</h3>
<input type="text" id="globalSearch" placeholder="Suche nach Film, Serie, Anime oder Kinderfilm...">
</div>
<!-- Widget für Link zu einem anderen Bot -->
<div class="bot-widget">
<a href="https://kino.viper.ipv64.net" target="_blank">
<div class="widget-content">
<h3>Der Film nicht gefunden?</h3>
<p>Kein Problem! Gehe zu unserem Wunsch-Bot und fordere den Film an.</p>
<button class="widget-button">Zum Wunsch-Bot</button>
</div>
</a>
</div>
<!-- Footer -->
<footer>
<p>© 2024 Kino Nacht. Alle Rechte vorbehalten.</p>
<p><a href="https://kino.viper.ipv64.net">Wunsch Bot</a> | <a href="https://t.me/KinoNacht">Telegram Gruppe</a></p>
</footer>
<!-- JavaScript -->
<script>
let categories = {
film: [],
serien: [],
anime: [],
kinderfilme: [],
animeSerien: [], // Neue Kategorie
jahreszeitenZauber: [] // Neue Kategorie
};
let currentPage = 0;
const itemsPerPage = 8; // Maximale Einträge pro Seite
// Abrufen der Kategorien vom Server
async function loadCategories() {
try {
const response = await fetch('/api/categories');
const data = await response.json();
console.log(data); // Überprüfen, ob die Daten korrekt geladen werden
categories.film = data.film;
categories.serien = data.serien;
categories.anime = data.anime;
categories.kinderfilme = data.kinderfilme;
categories.animeSerien = data.animeSerien;
categories.jahreszeitenZauber = data.jahreszeitenZauber;
createCategoryContent(data.film, 'filmList');
createCategoryContent(data.serien, 'serienList');
createCategoryContent(data.anime, 'animeList');
createCategoryContent(data.kinderfilme, 'kinderfilmeList');
createCategoryContent(data.animeSerien, 'animeSerienList');
createCategoryContent(data.jahreszeitenZauber, 'jahreszeitenZauberList');
} catch (err) {
console.error('Fehler beim Laden der Kategorien:', err);
}
}
// Funktion zum Erstellen der Listen für die Kategorien
function createCategoryContent(categoryData, containerId) {
const container = document.getElementById(containerId);
container.innerHTML = ''; // Leeren des Containers
const totalPages = Math.ceil(categoryData.length / itemsPerPage);
const startIndex = currentPage * itemsPerPage;
const endIndex = Math.min(startIndex + itemsPerPage, categoryData.length);
const pageData = categoryData.slice(startIndex, endIndex);
pageData.forEach(item => {
const card = document.createElement('div');
card.classList.add('card');
card.setAttribute('data-topic', item.topic.toLowerCase());
const title = document.createElement('h3');
title.textContent = item.topic;
const link = document.createElement('a');
link.href = item.link;
link.target = '_blank';
link.textContent = 'Zum Film';
card.appendChild(title);
card.appendChild(link);
container.appendChild(card);
});
// Navigation Buttons
const nav = document.createElement('div');
nav.classList.add('navigation');
if (currentPage > 0) {
const prevButton = document.createElement('button');
prevButton.textContent = 'Vorherige Seite';
prevButton.addEventListener('click', () => {
currentPage--;
createCategoryContent(categoryData, containerId);
});
nav.appendChild(prevButton);
}
// Seitenzahlen anzeigen
const pageNumbers = document.createElement('span');
pageNumbers.classList.add('page-numbers');
pageNumbers.textContent = `Seite ${currentPage + 1} von ${totalPages}`;
nav.appendChild(pageNumbers);
if (currentPage < totalPages - 1) {
const nextButton = document.createElement('button');
nextButton.textContent = 'Nächste Seite';
nextButton.addEventListener('click', () => {
currentPage++;
createCategoryContent(categoryData, containerId);
});
nav.appendChild(nextButton);
}
container.appendChild(nav);
}
// Funktion zum Umschalten der Tabs
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
contents.forEach(c => c.classList.remove('active'));
tab.classList.add('active');
const category = tab.getAttribute('data-category');
document.getElementById(category + 'Content').classList.add('active');
});
});
// Funktion für die globale Suche
document.getElementById('globalSearch').addEventListener('input', function (event) {
const query = event.target.value.toLowerCase();
// Alle Inhalte durchgehen und filtern
filterContent('filmList', query);
filterContent('serienList', query);
filterContent('animeList', query);
filterContent('kinderfilmeList', query);
filterContent('animeSerienList', query); // Neue Kategorie
filterContent('jahreszeitenZauberList', query); // Neue Kategorie
});
// Funktion um die Inhalte zu filtern
function filterContent(containerId, query) {
const container = document.getElementById(containerId);
const items = container.getElementsByClassName('card');
Array.from(items).forEach(item => {
const topic = item.getAttribute('data-topic');
if (topic.includes(query)) {
item.style.display = ''; // Sichtbar machen
} else {
item.style.display = 'none'; // Ausblenden
}
});
}
// Initialisiere die Kategorien beim Laden der Seite
window.onload = loadCategories;
</script>
</body>
</html>