220 lines
7.8 KiB
HTML
220 lines
7.8 KiB
HTML
<!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>
|