From 8ff4f4955e02ceef93b5ff3e53f7e657ad0b8066 Mon Sep 17 00:00:00 2001 From: YellowGreg Date: Wed, 26 Jun 2024 18:34:11 -0400 Subject: [PATCH] Add files via upload --- anime.html | 31 +++++++ anime.js | 91 ++++++++++++++++++++ index.html | 29 +++++++ script.js | 72 ++++++++++++++++ search.html | 22 +++++ search.js | 58 +++++++++++++ style.css | 240 ++++++++++++++++++++++++++++++++++++++++++++++++++++ watch.html | 32 +++++++ watch.js | 117 +++++++++++++++++++++++++ 9 files changed, 692 insertions(+) create mode 100644 anime.html create mode 100644 anime.js create mode 100644 index.html create mode 100644 script.js create mode 100644 search.html create mode 100644 search.js create mode 100644 style.css create mode 100644 watch.html create mode 100644 watch.js diff --git a/anime.html b/anime.html new file mode 100644 index 0000000..b5c4023 --- /dev/null +++ b/anime.html @@ -0,0 +1,31 @@ + + + + + + OtakuNexus - Anime Details + + + +
+ +
+
+
+
+ Anime Image +

+
+

+
+ +
+
+
+
+ + + + diff --git a/anime.js b/anime.js new file mode 100644 index 0000000..6b7bab8 --- /dev/null +++ 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 = ` +

Episode ${episode.number}

+ `; + 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 = `Anime Image${anime.title}`; + 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 new file mode 100644 index 0000000..e2269e0 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + OtakuNexus - Free Anime + + + +
+ +
+
+
+
+

Top Airing Anime

+
+
+
+

Recent Episodes

+
+
+
+ + Made by YellowGreg + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..fcfe6f5 --- /dev/null +++ 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 = ` + ${anime.title} +

${anime.title}

+ `; + 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 = ` + ${anime.title} +

${anime.title}

+ `; + 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 = `Anime Image${anime.title}`; + 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 new file mode 100644 index 0000000..2543432 --- /dev/null +++ b/search.html @@ -0,0 +1,22 @@ + + + + + + OtakuNexus - Search Results + + + +
+ +
+
+
+
+

Search Results

+
+
+
+ + + diff --git a/search.js b/search.js new file mode 100644 index 0000000..304bc2c --- /dev/null +++ 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 = ` + ${anime.title} +

${anime.title}

+ `; + 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 = `Anime Image${anime.title}`; + 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/style.css b/style.css new file mode 100644 index 0000000..4340bbe --- /dev/null +++ b/style.css @@ -0,0 +1,240 @@ +body, h1, h2, p, input, button, div, a { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #2d033b, #1c0202); + color: #fff; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + min-height: 100vh; + padding: 20px; +} + +header { + width: 100%; + max-width: 1200px; + display: flex; + justify-content: center; + margin-bottom: 20px; + position: relative; +} + +#search-bar { + width: 100%; + max-width: 600px; + padding: 10px 15px; + border: none; + border-radius: 30px; + outline: none; + font-size: 16px; + color: #fff; + background: rgba(255, 255, 255, 0.1); + transition: background 0.3s ease; +} + +#search-bar:focus { + background: rgba(255, 255, 255, 0.2); +} + +#autocomplete-list { + position: absolute; + top: 50px; + width: 100%; + max-width: 600px; + background: rgba(0, 0, 0, 0.8); + border-radius: 10px; + overflow: hidden; + z-index: 1000; +} + +#autocomplete-list div { + display: flex; + align-items: center; + padding: 10px; + cursor: pointer; + transition: background 0.3s ease; +} + +#autocomplete-list img { + width: 40px; + height: 40px; + object-fit: cover; + border-radius: 5px; + margin-right: 10px; +} + +#autocomplete-list div:hover { + background: rgba(255, 255, 255, 0.2); +} + +main { + width: 100%; + max-width: 1200px; +} + +section { + margin-bottom: 40px; +} + +.anime-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 20px; +} + +.anime-card { + background: rgba(255, 255, 255, 0.1); + border-radius: 10px; + overflow: hidden; + transition: transform 0.3s ease, background 0.3s ease; + cursor: pointer; +} + +.anime-card img { + width: 100%; + height: 200px; + object-fit: cover; +} + +.anime-card p { + padding: 10px; + text-align: center; +} + +.anime-card:hover { + transform: translateY(-10px); + background: rgba(255, 255, 255, 0.2); +} + +#video-section { + display: flex; + flex-direction: column; + align-items: center; +} + +#video-player { + width: 100%; + max-width: 800px; + margin-bottom: 20px; +} + +#server-list { + display: flex; + gap: 10px; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 20px; +} + +#server-list button, #quality-list button { + padding: 10px 20px; + border: none; + border-radius: 20px; + background: rgba(255, 255, 255, 0.1); + color: #fff; + cursor: pointer; + transition: background 0.3s ease; +} + +#server-list button:hover, #quality-list button:hover { + background: rgba(255, 255, 255, 0.2); +} + +#prev-episode, #next-episode { + padding: 10px 20px; + border: none; + border-radius: 20px; + background: rgba(255, 255, 255, 0.1); + color: #fff; + cursor: pointer; + transition: background 0.3s ease; + margin: 0 10px; +} + +#prev-episode:hover, #next-episode:hover { + background: rgba(255, 255, 255, 0.2); +} + +.episode-dropdown { + width: 100%; + max-width: 300px; + padding: 10px 15px; + border: none; + border-radius: 30px; + background: rgba(255, 255, 255, 0.1); + color: #549cb0; + font-size: 16px; + cursor: pointer; + transition: background 0.3s ease; +} + +.episode-dropdown:hover { + background: rgba(255, 255, 255, 0.2); +} + +.anime-details { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.anime-details img { + width: 300px; + height: auto; + border-radius: 20px; + margin-bottom: 20px; +} + +.anime-details h2 { + margin-bottom: 10px; +} + +.anime-details p { + margin-bottom: 10px; + max-width: 800px; +} + +.anime-details .genres { + display: flex; + gap: 10px; + flex-wrap: wrap; + justify-content: center; +} + +.anime-details .genre { + padding: 5px 10px; + background: rgba(255, 255, 255, 0.1); + border-radius: 20px; +} + +.dropdown-container { + display: flex; + justify-content: center; + margin: 20px 0; +} + +#prev-episode { + margin-right: auto; +} + +#next-episode { + margin-left: auto; +} + +footer { + margin-top: auto; + padding: 20px 0; + text-align: center; + width: 100%; + max-width: 1200px; + font-size: 14px; + background: rgba(0, 0, 0, 0.5); + border-radius: 10px; +} diff --git a/watch.html b/watch.html new file mode 100644 index 0000000..45b1852 --- /dev/null +++ b/watch.html @@ -0,0 +1,32 @@ + + + + + + OtakuNexus - Watch Anime + + + +
+ +
+
+
+
+
+
+
+ +
+
+ + +
+
+
+
+ Made by YellowGreg +
+ + + diff --git a/watch.js b/watch.js new file mode 100644 index 0000000..16956e5 --- /dev/null +++ b/watch.js @@ -0,0 +1,117 @@ +document.addEventListener('DOMContentLoaded', function() { + const searchBar = document.getElementById('search-bar'); + const autocompleteList = document.getElementById('autocomplete-list'); + const videoPlayer = document.getElementById('video-player'); + const serverList = document.getElementById('server-list'); + const episodeDropdown = document.getElementById('episode-dropdown'); + const prevEpisodeButton = document.getElementById('prev-episode'); + const nextEpisodeButton = document.getElementById('next-episode'); + + const urlParams = new URLSearchParams(window.location.search); + const episodeId = urlParams.get('episodeId'); + + let currentEpisodeNumber; + + function loadEpisode(episodeId) { + fetch(`https://api-anime-info.vercel.app/anime/gogoanime/servers/${episodeId}`) + .then(response => response.json()) + .then(servers => { + videoPlayer.innerHTML = ''; + const iframe = document.createElement('iframe'); + iframe.src = servers[0].url; + iframe.width = '100%'; + iframe.height = '500px'; + iframe.allowFullscreen = true; + videoPlayer.appendChild(iframe); + + serverList.innerHTML = ''; + servers.forEach(server => { + const button = document.createElement('button'); + button.textContent = server.name; + button.addEventListener('click', () => { + iframe.src = server.url; + }); + serverList.appendChild(button); + }); + + currentEpisodeNumber = parseInt(episodeId.split('-').pop(), 10); + + fetch(`https://api-anime-info.vercel.app/anime/gogoanime/info/${episodeId.split('-').slice(0, -2).join('-')}`) + .then(response => response.json()) + .then(data => { + document.title = `OtakuNexus - Watching ${data.title}`; + + const episodes = data.episodes; + episodeDropdown.innerHTML = ''; + + 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); + if (currentEpisodeNumber < start || currentEpisodeNumber > end) { + window.location.href = `watch.html?episodeId=${episodes[start - 1].id}`; + } + }); + + const currentRange = Math.floor((currentEpisodeNumber - 1) / 100) + 1; + episodeDropdown.value = `${(currentRange - 1) * 100 + 1}-${currentRange * 100}`; + + const currentIndex = episodes.findIndex(ep => ep.id === episodeId); + + prevEpisodeButton.addEventListener('click', () => { + if (currentIndex > 0) { + window.location.href = `watch.html?episodeId=${episodes[currentIndex - 1].id}`; + } + }); + + nextEpisodeButton.addEventListener('click', () => { + if (currentIndex < episodes.length - 1) { + window.location.href = `watch.html?episodeId=${episodes[currentIndex + 1].id}`; + } + }); + }) + .catch(error => console.error('Fetching anime details failed:', error)); + }) + .catch(error => console.error('Fetching streaming links failed:', error)); + } + + loadEpisode(episodeId); + + 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 = `Anime Image${anime.title}`; + 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}`; + } + }); +});