Dateien nach "public" hochladen
This commit is contained in:
parent
dea8d92b51
commit
00fe993011
219
public/index.html
Normal file
219
public/index.html
Normal file
@ -0,0 +1,219 @@
|
||||
<!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>
|
||||
Loading…
x
Reference in New Issue
Block a user