Add files via upload

YellowGregs · Jun 26, 2024 · 8ff4f49 · 8ff4f49
1 parent dd19e52
commit 8ff4f49
Show file tree

Hide file tree

Showing 9 changed files with 692 additions and 0 deletions.
diff --git a/anime.html b/anime.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OtakuNexus - Anime Details</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <input type="text" id="search-bar" placeholder="Search for anime...">
+        <div id="autocomplete-list"></div>
+    </header>
+    <main>
+        <section class="anime-details">
+            <img id="anime-image" src="" alt="Anime Image">
+            <h2 id="anime-title"></h2>
+            <div class="genres" id="anime-genres"></div>
+            <p id="anime-description"></p>
+            <div class="dropdown-container">
+                <select id="episode-dropdown" class="episode-dropdown"></select>
+            </div>
+        </section>
+        <section class="anime-list" id="episode-list"></section>
+    </main>
+    <footer>
+        Made by YellowGreg
+    </footer>
+    <script src="anime.js"></script>
+</body>
+</html>
diff --git a/anime.js b/anime.js
@@ -0,0 +1,91 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const searchBar = document.getElementById('search-bar');
+    const autocompleteList = document.getElementById('autocomplete-list');
+    const animeImage = document.getElementById('anime-image');
+    const animeTitle = document.getElementById('anime-title');
+    const animeGenres = document.getElementById('anime-genres');
+    const animeDescription = document.getElementById('anime-description');
+    const episodeDropdown = document.getElementById('episode-dropdown');
+    const episodeList = document.getElementById('episode-list');
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const animeId = urlParams.get('id');
+
+    fetch(`https://api-anime-info.vercel.app/anime/gogoanime/info/${animeId}`)
+        .then(response => response.json())
+        .then(data => {
+            document.title = `OtakuNexus - ${data.title} Detail`;
+
+            animeImage.src = data.image;
+            animeTitle.textContent = data.title;
+            animeDescription.textContent = data.description;
+
+            data.genres.forEach(genre => {
+                const genreElement = document.createElement('span');
+                genreElement.textContent = genre;
+                genreElement.classList.add('genre');
+                animeGenres.appendChild(genreElement);
+            });
+
+            const episodes = data.episodes;
+            let currentRangeStart = 1;
+            while (currentRangeStart <= episodes.length) {
+                const option = document.createElement('option');
+                const currentRangeEnd = Math.min(currentRangeStart + 99, episodes.length);
+                option.value = `${currentRangeStart}-${currentRangeEnd}`;
+                option.textContent = `${currentRangeStart}-${currentRangeEnd}`;
+                episodeDropdown.appendChild(option);
+                currentRangeStart = currentRangeEnd + 1;
+            }
+
+            episodeDropdown.addEventListener('change', () => {
+                const [start, end] = episodeDropdown.value.split('-').map(Number);
+                episodeList.innerHTML = '';
+                for (let i = start - 1; i < end; i++) {
+                    const episode = episodes[i];
+                    const episodeCard = document.createElement('div');
+                    episodeCard.classList.add('anime-card');
+                    episodeCard.innerHTML = `
+                        <p>Episode ${episode.number}</p>
+                    `;
+                    episodeCard.addEventListener('click', () => {
+                        window.location.href = `watch.html?episodeId=${episode.id}`;
+                    });
+                    episodeList.appendChild(episodeCard);
+                }
+            });
+
+            episodeDropdown.dispatchEvent(new Event('change'));
+        })
+        .catch(error => console.error('Fetching anime details failed:', error));
+
+    searchBar.addEventListener('input', function() {
+        const query = searchBar.value;
+        if (query.length < 3) {
+            autocompleteList.innerHTML = '';
+            return;
+        }
+        fetch(`https://api-anime-info.vercel.app/anime/gogoanime/${query}`)
+            .then(response => response.json())
+            .then(data => {
+                autocompleteList.innerHTML = '';
+                data.results.forEach(anime => {
+                    const item = document.createElement('div');
+                    item.innerHTML = `<img src="${anime.image}" alt="Anime Image"><span>${anime.title}</span>`;
+                    item.addEventListener('click', () => {
+                        window.location.href = `anime.html?id=${anime.id}`;
+                    });
+                    autocompleteList.appendChild(item);
+                });
+            })
+            .catch(error => console.error('Autocomplete search failed:', error));
+    });
+
+    searchBar.addEventListener('keypress', function(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const query = searchBar.value;
+            window.location.href = `search.html?query=${query}`;
+        }
+    });
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OtakuNexus - Free Anime</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <input type="text" id="search-bar" placeholder="Search for anime...">
+        <div id="autocomplete-list"></div>
+    </header>
+    <main>
+        <section id="top-airing">
+            <h2>Top Airing Anime</h2>
+            <div id="top-airing-list" class="anime-list"></div>
+        </section>
+        <section id="recent-episodes">
+            <h2>Recent Episodes</h2>
+            <div id="recent-episodes-list" class="anime-list"></div>
+        </section>
+    </main>
+    <footer">
+        Made by YellowGreg
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,72 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const searchBar = document.getElementById('search-bar');
+    const autocompleteList = document.getElementById('autocomplete-list');
+    const topAiringList = document.getElementById('top-airing-list');
+    const recentEpisodesList = document.getElementById('recent-episodes-list');
+
+    fetch('https://api-anime-info.vercel.app/anime/gogoanime/top-airing')
+        .then(response => response.json())
+        .then(data => {
+            data.results.forEach(anime => {
+                const card = document.createElement('div');
+                card.classList.add('anime-card');
+                card.innerHTML = `
+                    <img src="${anime.image}" alt="${anime.title}">
+                    <p>${anime.title}</p>
+                `;
+                card.addEventListener('click', () => {
+                    window.location.href = `anime.html?id=${anime.id}`;
+                });
+                topAiringList.appendChild(card);
+            });
+        })
+        .catch(error => console.error('Fetching top airing anime failed:', error));
+
+    fetch('https://api-anime-info.vercel.app/anime/gogoanime/recent-episodes')
+        .then(response => response.json())
+        .then(data => {
+            data.results.forEach(anime => {
+                const card = document.createElement('div');
+                card.classList.add('anime-card');
+                card.innerHTML = `
+                    <img src="${anime.image}" alt="${anime.title}">
+                    <p>${anime.title}</p>
+                `;
+                card.addEventListener('click', () => {
+                    window.location.href = `watch.html?episodeId=${anime.episodeId}`;
+                });
+                recentEpisodesList.appendChild(card);
+            });
+        })
+        .catch(error => console.error('Fetching recent episodes failed:', error));
+
+    searchBar.addEventListener('input', function() {
+        const query = searchBar.value;
+        if (query.length < 3) {
+            autocompleteList.innerHTML = '';
+            return;
+        }
+        fetch(`https://api-anime-info.vercel.app/anime/gogoanime/${query}`)
+            .then(response => response.json())
+            .then(data => {
+                autocompleteList.innerHTML = '';
+                data.results.forEach(anime => {
+                    const item = document.createElement('div');
+                    item.innerHTML = `<img src="${anime.image}" alt="Anime Image"><span>${anime.title}</span>`;
+                    item.addEventListener('click', () => {
+                        window.location.href = `anime.html?id=${anime.id}`;
+                    });
+                    autocompleteList.appendChild(item);
+                });
+            })
+            .catch(error => console.error('Autocomplete search failed:', error));
+    });
+
+    searchBar.addEventListener('keypress', function(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const query = searchBar.value;
+            window.location.href = `search.html?query=${query}`;
+        }
+    });
+});
diff --git a/search.html b/search.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OtakuNexus - Search Results</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <input type="text" id="search-bar" placeholder="Search for anime...">
+        <div id="autocomplete-list"></div>
+    </header>
+    <main>
+        <section>
+            <h2>Search Results</h2>
+            <div class="anime-list" id="search-results-list"></div>
+        </section>
+    </main>
+    <script src="search.js"></script>
+</body>
+</html>
diff --git a/search.js b/search.js
@@ -0,0 +1,58 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const searchBar = document.getElementById('search-bar');
+    const autocompleteList = document.getElementById('autocomplete-list');
+    const searchResultsList = document.getElementById('search-results-list');
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const query = urlParams.get('query');
+
+    document.title = `OtakuNexus - Searching "${query}"`;
+
+    fetch(`https://api-anime-info.vercel.app/anime/gogoanime/${query}`)
+        .then(response => response.json())
+        .then(data => {
+            data.results.forEach(anime => {
+                const card = document.createElement('div');
+                card.classList.add('anime-card');
+                card.innerHTML = `
+                    <img src="${anime.image}" alt="${anime.title}">
+                    <p>${anime.title}</p>
+                `;
+                card.addEventListener('click', () => {
+                    window.location.href = `anime.html?id=${anime.id}`;
+                });
+                searchResultsList.appendChild(card);
+            });
+        })
+        .catch(error => console.error('Fetching search results failed:', error));
+
+    searchBar.addEventListener('input', function() {
+        const query = searchBar.value;
+        if (query.length < 3) {
+            autocompleteList.innerHTML = '';
+            return;
+        }
+        fetch(`https://api-anime-info.vercel.app/anime/gogoanime/${query}`)
+            .then(response => response.json())
+            .then(data => {
+                autocompleteList.innerHTML = '';
+                data.results.forEach(anime => {
+                    const item = document.createElement('div');
+                    item.innerHTML = `<img src="${anime.image}" alt="Anime Image"><span>${anime.title}</span>`;
+                    item.addEventListener('click', () => {
+                        window.location.href = `anime.html?id=${anime.id}`;
+                    });
+                    autocompleteList.appendChild(item);
+                });
+            })
+            .catch(error => console.error('Autocomplete search failed:', error));
+    });
+
+    searchBar.addEventListener('keypress', function(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const query = searchBar.value;
+            window.location.href = `search.html?query=${query}`;
+        }
+    });
+});