===== Index.js =====

let slideIndex = 0;
const sliderContainer = document.getElementById("slider-container");

// Fetch data from the API
import api from './config.js';
async function fetchAnimes() {
    try {
        const response = await fetch(api); 
        const data = await response.json();
        if (data.success) {
            const spotlightAnimes = data.data.spotlightAnimes;
            spotlightAnimes.forEach(anime => {
                const slide = document.createElement("div");
                slide.classList.add("slide");

                // Create overlay
                const overlay = document.createElement("div");
                overlay.classList.add("img-overlay");

                // Create image
                const img = document.createElement("img");
                img.src = anime.poster; // Assuming the poster is in the response
                img.classList.add("slider-image");
                img.alt = anime.name;

                // Create content
                const content = document.createElement("div");
                content.classList.add("content");
                
                const title = document.createElement("h1");
                title.classList.add("title");
                title.textContent = anime.name;

                const description = document.createElement("p");
                description.classList.add("description");
                description.textContent = anime.description.split(" ").slice(0, 10).join(" ") + '...'; // Truncate to 10 words

                const buttons = document.createElement("div");
                buttons.classList.add("buttons");

                const watchButton = document.createElement("a");
                watchButton.href = `details.html?id=${anime.id}` ;
                watchButton.classList.add("watch-button");
                watchButton.textContent = "Watch Now";

                const detailsButton = document.createElement("a");
detailsButton.href = `details.html?id=${anime.id}`; 
detailsButton.classList.add("details-button");
detailsButton.textContent = "Details";


                // Append all elements
                buttons.appendChild(watchButton);
                buttons.appendChild(detailsButton);
                content.appendChild(title);
                content.appendChild(description);
                content.appendChild(buttons);
                slide.appendChild(overlay);
                slide.appendChild(img);
                slide.appendChild(content);
                sliderContainer.appendChild(slide);
            });
            showSlides(); // Call function to start showing slides
        }
    } catch (error) {
        console.error("Error fetching data:", error);
    }
}

function showSlides() {
    const slides = document.getElementsByClassName("slide");
    for (let i = 0; i < slides.length; i++) {
        slides[i].style.opacity = 0; // Reset opacity
    }
    slideIndex++;
    if (slideIndex > slides.length) { slideIndex = 1 }
    slides[slideIndex - 1].style.opacity = 1; // Show current slide
    setTimeout(showSlides, 5000); // Change slide every 5 seconds
}

document.addEventListener("DOMContentLoaded", fetchAnimes);


===== about.html =====



<section class="about-page">
  <h1>About AniTeams</h1>
  <p>AniTeams is your go-to destination for high-quality anime streaming, powered by the AniWatch API. With a vast collection of anime AniTeams offers fans a seamless and immersive experience.</p>

  <h2>Our Mission</h2>
  <p>We aim to bring anime closer to fans worldwide, making it easy to find and enjoy your favorite shows in one place. AniTeams is dedicated to providing a platform that is fast, reliable, and user-friendly.</p>

  <h2>Credits</h2>
  <p>AniTeams is proudly built and maintained with contributions from talented developers. We would like to extend our gratitude to those who have made this project possible.</p>

  <!-- Contributors with GitHub links -->
  <div class="credits">
    <ul>
      <li><a href="https://github.com/YourGithubProfile" target="_blank">YourGithubProfile</a> - Project Maintainer</li>
      <li><a href="https://github.com/Contributor1" target="_blank">Contributor1</a> - Frontend Development</li>
      <li><a href="https://github.com/Contributor2" target="_blank">Contributor2</a> - API Integration</li>
      <!-- Add additional contributors as needed -->
    </ul>
  </div>
</section>


===== card.css =====

.card-container {
    margin-top: 20px; /* Add separation from the filter */
    display: flex; /* Keep flex layout for cards */
    flex-wrap: wrap; /* Ensure cards wrap respons-content: flex-start; /* Align cards to the left */
    position: relative; /* Prevent overlap or positioning issues */
    z-index: 1;
}


.card {
    width: calc(16.66% - 14px);
    margin: 0 7px 14px;
    background: #2a2c31;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}

.poster {
    position: relative;
    width: 100%;
    padding-bottom: 130%;
    overflow: hidden;
}

.image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.poster:hover .overlay {
    opacity: 1;
}

.info-left, .info-right {
    position: absolute;
    bottom: 10px;
    z-index: 3;
}

.info-left {
    left: 10px;
}

.info-right {
    right: 10px;
}

.btn, .btn-episode {
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 5px;
    background: #fff;
    color: #111;
    margin-right: 4px;
    transition: background 0.3s;
}

.btn:hover, .btn-episode:hover {
    background: #e0e0e0;
}

.btn-episode {
    background: #7bfcfc;
}

.details {
    color: #aaa;
    font-size: 12px;
    padding: 10px;
    border-radius: 0 0 10px 10px;
}

.name {
    color: #fff;
    font-size: 14px;
    margin: 0;
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.3em;
}

/* Play button styling */
.play-button {
    position: absolute;
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* Hide initially */
    transition: opacity 0.5s;
}

.overlay:hover .play-button {
    opacity: 1; /* Show on hover */
}

/* Responsive styles */
@media (max-width: 1024px) {
    .card {
        width: calc(25% - 14px);
    }
}

@media (max-width: 760px) {
    .card {
        width: calc(33% - 14px);
    }
}

@media (max-width: 480px) {
    .card {
        width: calc(50% - 6px);
        margin: 0 3px 6px;
    }
}


===== config.js =====

// config.js
const api = "https://aniwatch-api-net.vercel.app/api/v2/hianime/home";  // Your deployed API URL
const search = "https://aniwatch-api-net.vercel.app/api/v2/hianime/search"; // Search API URL
const details = "https://aniwatch-api-net.vercel.app/api/v2/hianime/anime";  // Your additional variable

export default api;  // Change to default export
export { search, details };  // Export search and anotherVariable as named exports


===== desktop.html =====

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   AniTeams Slider
  </title>
  <link href="stylesheet.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com" rel="preconnect"/>
  <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
  <link href="https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap" rel="stylesheet"/>
 <link rel="me" href="https://www.blogger.com/profile/06325194367202392822" />
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>
<!-- --><style type="text/css">@import url(//www.blogger.com/static/v1/v-css/navbar/3334278262-classic.css);
div.b-mobile {display:none;}
</style>

</head>
 <body><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
      gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
        if (gapi.iframes && gapi.iframes.getContext) {
          gapi.iframes.getContext().openChild({
              url: 'https://www.blogger.com/navbar/5775555679284799188?origin\x3dhttps://seanimee.blogspot.com',
              where: document.getElementById("navbar-iframe-container"),
              id: "navbar-iframe"
          });
        }
      });
    </script>


    <!----- Welcome dialogue ---->
  <div id="welcome-dialog" class="dialog">
    <div class="dialog-content">
        <h2 class="dialog-header">🎉 Welcome to AniTeams!</h2>
        <div class="dialog-message">
            <p><strong>What's New:</strong></p>
            <ul>
                <li>✨ Brand-new anime streaming page.</li>
                <li>🎨 Still powered by the trusted ArtPlayer.</li>
                <li>🆕 Completely revamped anime watching page.</li>
                <li>📈 Tons of new features to enhance your experience.</li>
            </ul>
            <p>I hope you enjoy using this site!</p>
        </div>
        <button id="ok-button">Got It!</button>
    </div>
</div>
<script>
    // Check localStorage for the welcome dialog status
    document.addEventListener("DOMContentLoaded", () => {
        const dialog = document.getElementById("welcome-dialog");
        const okButton = document.getElementById("ok-button");

        // Show dialog if not already acknowledged
        if (!localStorage.getItem("welcomeAcknowledged")) {
            dialog.classList.add("active");
        }

        // Handle the 'Got It!' button click
        okButton.addEventListener("click", () => {
            localStorage.setItem("welcomeAcknowledged", "true");
            dialog.classList.remove("active");
        });
    });
</script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

    /* Dialog Styling */
    .dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9); /* Darker semi-transparent black */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
    }

    .dialog.active {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease-in-out;
    }

    .dialog-content {
        background-color: #1b1b1b; /* Sleek dark gray background */
        color: #f2f2f2; /* Light gray text */
        padding: 30px;
        border-radius: 16px;
        text-align: left;
        max-width: 480px;
        width: 90%;
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.7);
        animation: fadeIn 0.5s ease-out;
        font-family: 'Poppins', sans-serif; /* Stylish Google Font */
    }

    .dialog-header {
        font-size: 26px;
        font-weight: 600;
        margin-bottom: 15px;
        border-bottom: 3px solid #9932cc; /* Elegant purple underline */
        padding-bottom: 8px;
        color: #d69df5; /* Light purple */
        text-align: center;
    }

    .dialog-message p {
        margin: 0 0 15px;
        font-size: 16px;
        line-height: 1.8;
    }

    .dialog-message ul {
        margin: 0 0 15px;
        padding-left: 20px;
        font-size: 15px;
        line-height: 1.8;
    }

    .dialog-message ul li {
        margin-bottom: 10px;
    }

    /* Button Styles */
    #ok-button {
        display: block;
        margin: 20px auto 0;
        background-color: #9932cc; /* Purple button */
        color: #fff;
        padding: 12px 30px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        font-family: 'Poppins', sans-serif;
        box-shadow: 0 4px 10px rgba(153, 50, 204, 0.4);
    }

    #ok-button:hover {
        background-color: #a74be7; /* Lighter purple on hover */
        transform: scale(1.05);
    }

    /* Fade-in Animation */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
  <!-- Header Section -->
  <header>
   <!-- Navigation Bar -->
   <nav class="navbar">
    <!-- Toggle Button for Sidebar -->
    <div class="bars" onclick="toggleMenu()">
     <div class="bar1">
     </div>
     <div class="bar2">
     </div>
     <div class="bar3">
     </div>
    </div>
   </nav>
   <!-- Magnifying Glass Icon and Login Button -->
   <div class="header-extras">
    <div class="css-icon-search" onclick="redirectToPage()">
    </div>
   </div>

    <script>
    // Function to redirect the user to a new page
    function redirectToPage() {
      window.location.href = './search.html'; // Change this URL to your desired destination
    }
  </script>
   
  </header>
  <!-- Sidebar / Side Menu -->
  <aside class="side-menu" id="sideMenu">
   <!-- Close Button for Sidebar -->
   <div class="close-button" onclick="toggleMenu()">
    Close
   </div>
   <!-- Sidebar Items -->
 <ul class="nav-list">
  <li class="item">
    <a href="./index.html">Home</a>
  </li>
  <li class="item">
    <a href="./about.html">About</a>
  </li>
  <li class="item">
    <a href="./contact.html">Contact</a>
  </li>
  <li class="item">
    <a href="./bookmarks.html">Bookmarks</a>
  </li>


    <li class="item">
     Genres
    </li>
    <div class="genre-list" id="genreList">
     <!-- Genres will be populated here by JavaScript -->
    </div>
   </ul>
  </aside>
  <script type="module">
   // JavaScript to Toggle Sidebar
        function toggleMenu() {
            document.getElementById("sideMenu").classList.toggle("open");
            document.querySelector(".bars").classList.toggle("open");
        }

        // Fetch Genres from API and Populate Sidebar
   import api from './config.js'
        async function fetchGenres() {
            try {
                const response = await fetch(api); // Replace with your API URL
                const result = await response.json();
                
                if (result.success && result.data.genres) {
                    const genreList = document.getElementById('genreList');
                    genreList.innerHTML = ''; // Clear any existing content

                    result.data.genres.forEach((genre) => {
                        const genreItem = document.createElement('div');
                        genreItem.classList.add('genre-item');
                        genreItem.textContent = genre;
                        genreList.appendChild(genreItem);
                    });
                } else {
                    console.error("Error: Unable to load genres");
                }
            } catch (error) {
                console.error("Error fetching genres:", error);
            }
        }

        // Load genres on page load
        window.onload = fetchGenres;
  </script>
 <section class="spotlight-slideshow">
    <div class="swiper">
        <div class="slideshow-container" id="slideshow-container">
            
        </div>
        <div class="navigation">
            <span class="prev">&#10094;</span>
            <span class="next">&#10095;</span>
        </div>
    </div>
</section>
<script type="module">
 import api from './config.js'
    let currentSlide = 0;
    const slideshowContainer = document.getElementById('slideshow-container');
    
    // Function to truncate the description text
    function truncateDescription(description, length = 100) {
        return description.length > length ? description.substring(0, length) + '...' : description;
    }

    // Fetch anime data from the API
    fetch(api)
        .then(response => response.json())
        .then(data => {
            const spotlightAnimes = data.data.spotlightAnimes;

            spotlightAnimes.forEach(anime => {
                const slide = document.createElement('div');
                slide.classList.add('slide');

                const imgContainer = document.createElement('div');
                imgContainer.classList.add('img-container');
                const img = document.createElement('img');
                img.src = anime.poster;
                img.alt = anime.name;
                img.classList.add('img');
                imgContainer.appendChild(img);

                const content = document.createElement('div');
                content.classList.add('content');

                const rank = document.createElement('div');
                rank.classList.add('rank');
                rank.textContent = `Rank: #${anime.rank}`;

                const title = document.createElement('h3');
                title.classList.add('title');
                title.textContent = anime.name;

                const description = document.createElement('div');
                description.classList.add('description');
                description.textContent = truncateDescription(anime.description, 100);

                const icons = document.createElement('div');
                icons.classList.add('icons');
                if (anime.type) {
                    const icon = document.createElement('div');
                    icon.classList.add('icon');
                    const iconSpan = document.createElement('span');
                    iconSpan.classList.add('icon-span');
                    iconSpan.textContent = anime.type;
                    icon.appendChild(iconSpan);
                    icons.appendChild(icon);
                }

                const watchBtn = document.createElement('div');
                watchBtn.classList.add('watch-btn');
                const watchLink = document.createElement('a');
                watchLink.href = `watch.html?id=${anime.id}`;
                watchLink.classList.add('watch-link');
                watchLink.textContent = 'Watch Now';
                const detailLink = document.createElement('a');
                detailLink.href = `details.html?id=${anime.id}`;
                detailLink.classList.add('detail-link');
                detailLink.textContent = 'More Info';
                watchBtn.appendChild(watchLink);
                watchBtn.appendChild(detailLink);

                content.appendChild(rank);
                content.appendChild(title);
                content.appendChild(description);
                content.appendChild(icons);
                content.appendChild(watchBtn);

                slide.appendChild(imgContainer);
                slide.appendChild(content);

                slideshowContainer.appendChild(slide);
            });

            // Now that all slides are loaded, start the slideshow
            const slides = document.querySelectorAll('.slide');
            const totalSlides = slides.length;

            // Function to update the slide position with fade effect
            function updateSlidePosition() {
                slides.forEach((slide, index) => {
                    if (index === currentSlide) {
                        slide.classList.add('fade-in');
                        slide.classList.remove('fade-out');
                    } else {
                        slide.classList.add('fade-out');
                        slide.classList.remove('fade-in');
                    }
                });
            }

            // Function to move to the next slide
            function nextSlide() {
                currentSlide = (currentSlide + 1) % totalSlides;
                updateSlidePosition();
            }

            // Auto slide every 5 seconds
            setInterval(nextSlide, 5000);

            // Initialize the slideshow
            updateSlidePosition();
        })
        .catch(error => console.error('Error fetching anime data:', error));
</script>

  <p>
   <span class="trending">
    Trending
   </span>
  </p>
  <section class="card-section">
   <div class="anime-cards" id="anime-cards-container">
    <!-- Anime cards will be dynamically inserted here by JavaScript -->
   </div>
  </section>
  <script type="module">
   import api from './config.js'
   document.addEventListener("DOMContentLoaded", function () {
    fetchAndDisplayTrendingAnime();
});

function fetchAndDisplayTrendingAnime() {
    fetch(api)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.data.trendingAnimes) {
                const container = document.getElementById("anime-cards-container");
                container.innerHTML = ""; // Clear any existing content

                data.data.trendingAnimes.forEach(anime => {
                    const card = document.createElement("div");
                    card.classList.add("anime-card");

                    card.innerHTML = `
                        <img src="${anime.poster}" alt="${anime.name}">
                        <div class="description-text">${anime.name}</div>
                    `;

                    container.appendChild(card);
                });
            } else {
                console.error("Trending anime data not found.");
            }
        })
        .catch(error => console.error("Error fetching trending anime:", error));
}
  </script>
  <p>
   <span class="trending">
    Latest Episodes
   </span>
  </p>
  <div class="card-container">
  </div>
  <script type="module">
   import  api from './config.js';
   async function fetchAnimeData() {

            try {
                const response = await fetch(api);
                const data = await response.json();

                if (data.success) {
                    const cardContainer = document.querySelector('.card-container');
                    cardContainer.innerHTML = ''; // Clear previous content

                    data.data.latestEpisodeAnimes.forEach(anime => {
                        const cardHTML = `
                            <div class="card">
                                <div class="poster">
                                    <img src="${anime.poster}" alt="${anime.name} Poster" class="image"/>
                                    <a href="details.html?id=${anime.id}" class="overlay">
                                        <img src="play-buttton.png" alt="Play" class="play-button"/>
                                    </a>
                                    <div class="info-left">
                                        <div class="btn">SUB ${anime.episodes.sub}</div>
                                    </div>
                                    <div class="info-right">
                                        <div class="btn-episode">Ep ${anime.episodes.sub}</div>
                                    </div>
                                </div>
                                <div class="details">
                                    <h3 class="name">${anime.name}</h3>
                                    <p class="jname">${anime.jname}</p>
                                </div>
                            </div>
                        `;
                        cardContainer.insertAdjacentHTML('beforeend', cardHTML);
                    });
                } else {
                    console.error("Failed to fetch anime data:", data.message);
                }
            } catch (error) {
                console.error("Error fetching data:", error);
            }
        }

        fetchAnimeData();
  </script>
 
 <footer class="footer">
    <a href="index.html" class="logo-link">
        <img src="logo.png" alt="AniTeams Logo" class="logo">
    </a>
    <div class="footer-container">
        <div class="pagination">
            <a href="#">A</a>
            <a href="#">B</a>
            <a href="#">C</a>
            <a href="#">D</a>
            <a href="#">E</a>
            <a href="#">F</a>
            <a href="#">G</a>
            <a href="#">H</a>
            <a href="#">I</a>
            <a href="#">J</a>
            <a href="#">K</a>
            <a href="#">L</a>
            <a href="#">M</a>
            <a href="#">N</a>
            <a href="#">O</a>
            <a href="#">P</a>
            <a href="#">Q</a>
            <a href="#">R</a>
            <a href="#">S</a>
            <a href="#">T</a>
            <a href="#">U</a>
            <a href="#">V</a>
            <a href="#">W</a>
            <a href="#">X</a>
            <a href="#">Y</a>
            <a href="#">Z</a>
        </div>
    </div>
    <div class="footer-links">
        
        <a href="/credits">Credits</a> |
        <span>Files not stored on this server.</span>
    </div>
    <div class="footer-bottom">
        <span>&copy; <span id="year"></span> AniTeams. All rights reserved.</span>
    </div>
</footer>

<style>
/* General Footer Styling */
.footer-container { 
    display: flex; 
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0 50px 0 20px;
}

.footer {
    background: url("footer.jpg") no-repeat center center;
    background-size: cover;
    height: 350px; /* Default height for larger screens */
    overflow: hidden; /* Prevent unnecessary scrolling */
    padding-bottom: 30px; /* Adds some space at the bottom */
}

/* Logo Styling */
.logo-link {
    display: inline-block;
}

.logo {
    height: 100px; /* Default logo height for larger screens */
    max-width: 100%; /* Ensure the logo doesn’t exceed its container */
    z-index: 999;
    transition: transform 0.3s ease; /* Animation for hover effect */
}

.logo-link:hover .logo {
    transform: scale(1.05); /* Animation for logo hover */
}

/* Pagination Styling */
.pagination {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: 5px;
}

.pagination a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: background-color 100ms ease-in-out; /* Link hover effect animation */
}

/* Link Hover Effect */
.pagination a:hover {
    background-color: hsl(271, 100%, 65%);
    font-weight: bold;
}

/* Footer Links Styling */
.footer-links {
    text-align: center;
    margin-top: 20px;
}

.footer-links a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Footer Bottom Styling */
.footer-bottom {
    text-align: center;
    margin-top: 20px;
    color: white;
}

/* Copyright Year */
#year {
    font-weight: bold;
}

/* Media Queries for Mobile Devices */
@media screen and (max-width: 768px) {
    .footer-container {
        margin: 0 10px; /* Reduce the margin for smaller screens */
        flex-direction: column;
        align-items: center;
    }

    .footer {
        height: 350px; /* Maintain default footer height */
        background-size: cover; /* Ensure the image scales properly */
    }

    .logo {
        height: 80px; /* Shrink the logo for medium-sized screens */
    }

    .pagination a {
        padding: 6px 10px; /* Reduce padding for pagination links */
        font-size: 14px; /* Adjust font size */
    }

    .footer-links {
        font-size: 14px; 
    }

    .footer-bottom {
        font-size: 12px; /* Adjust footer text size */
    }
}

@media screen and (max-width: 480px) {
    .footer-container {
        margin: 0 5px;
    }

    .footer {
        height: 350px; /* Maintain default footer height */
        background-size: cover; /* Maintain full background image scaling */
    }

    .logo {
        height: 60px; /* Further reduce logo size for small screens */
    }

    .pagination {
        gap: 5px; /* Narrow gap for pagination links */
    }

    .pagination a {
        padding: 5px 8px;
        font-size: 12px;
    }

    .footer-links a {
        margin: 0 5px;
        font-size: 12px;
    }

    .footer-bottom {
        font-size: 10px;
    }
}


</style>
 <script>
    document.getElementById("year").textContent = new Date().getFullYear();
</script>

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
 </body>
</html>


===== details.css =====

/* Body Styles - Full-page blur with background fill */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: blur(30px); /* Stronger blur effect for the entire page */
  background-color: rgba(0, 0, 0, 0.7); /* Subtle overlay for better contrast */
  height: 100%; /* Full-page height */
  width: 100%; /* Full-page width */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
}

/* Poster Styling - Center and refine */
#poster {
  display: block;
  max-width: 300px;
  height: auto;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.8); /* Shadow for better visibility */
  transition: transform 0.3s, box-shadow 0.3s;
}

#poster:hover {
  transform: scale(1.05); /* Slight zoom effect on hover */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 1);
}

/* Title styling */
h1 {
  text-align: center;
  font-size: 2.5rem;
  margin: 20px 0;
}

/* Stats section styling */
.stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}

.icon {
  display: flex;
  align-items: center;
  gap: 5px;
}

.icon i {
  color: #ffcc00;
}

/* Buttons styling */
.buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.btn {
  padding: 12px 25px;
  border: none;
  border-radius: 5px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-watch {
  background-color: #6a5acd;
  color: white;
  text-decoration: none;
}

.btn-watch:hover {
  background-color: #7b68ee;
}

.btn-bookmark {
  background-color: #444444;
  color: white;
}

.btn-bookmark:hover {
  background-color: #666666;
}

/* Description container adjustments */
.description-text {
  max-width: 90%;
  margin: 0 auto 20px;
  text-align: center;
  line-height: 1.6;
  font-size: 1rem;
}

.read-toggle {
  color: #cccccc;
  font-weight: bold;
  cursor: pointer;
}

/* More info section styling */
.more-info {
  max-width: 90%;
  margin: 20px auto;
  padding: 15px;
  line-height: 1.8;
  font-size: 1rem;
}

.more-info div {
  margin-bottom: 15px;
}

.more-info span:first-child {
  font-weight: bold;
  color: #cccccc;
  }
  


===== details.html =====

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading...</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <link href="details.css" rel="stylesheet">
  



  
</head>
<body>
 <div id="container">
  <img id="poster" class="poster" alt="Anime Poster">
  <div class="content">
    <!-- Title -->
    <h1 id="animeTitle">Anime Title</h1>
    <!-- Stats -->
    <div class="stats">
      <div class="icon"><i class="fas fa-star"></i><span id="rating"></span></div>
      <div class="icon"><i class="fas fa-closed-captioning"></i><span id="sub"></span></div>
      <div class="icon"><i class="fas fa-microphone"></i><span id="dub"></span></div>
    </div>
    <!-- Buttons -->
    <div class="buttons">
      <a id="watchNow" class="btn btn-watch">Watch Now</a>
      <button id="bookmark" class="btn btn-bookmark">+ Bookmark</button>
    </div>
    <!-- Description -->
    <div class="description-container">
      <div class="description-text" id="descText"></div>
      <div class="read-toggle" id="readToggle"></div>
    </div>
    <!-- More Info -->
    <div class="more-info">
      <div><span>Japanese Title:</span> <span id="japanese"></span></div>
      <div><span>Synonyms:</span> <span id="synonyms"></span></div>
      <div><span>Aired:</span> <span id="aired"></span></div>
      <div><span>Status:</span> <span id="status"></span></div>
      <div><span>Genres:</span> <span id="genres"></span></div>
      <div><span>Studios:</span> <span id="studios"></span></div>
    </div>
  </div>
 </div>
  

  <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
<script type="module" src="details.js"></script>
</body>
</html>



===== details.js =====


import {details} from './config.js'; 

const urlParams = new URLSearchParams(window.location.search);
const animeId = urlParams.get("id") || "defaultAnimeId";
const apiUrl = `${details}/${animeId}`; 


fetch(apiUrl)
  .then((response) => response.json())
  .then((data) => {
    const anime = data?.data?.anime?.info;
    const moreInfo = data?.data?.anime?.moreInfo;

    if (!anime || !moreInfo) {
      console.error("Invalid API response structure:", data);
      alert("Failed to load anime details. Please try again later.");
      return;
    }

    // Set page title
    document.title = anime.name || "Anime Details";

    // Set dynamic background image
    if (anime.poster) {
      document.body.style.backgroundImage = `url('${anime.poster}')`;
    }

    // Populate anime details
    document.getElementById("poster").src = anime.poster || "";
    document.getElementById("animeTitle").textContent = anime.name || "Unknown Title";
    document.getElementById("rating").textContent = anime.stats?.rating || "N/A";
    document.getElementById("sub").textContent = anime.stats?.episodes?.sub
      ? `${anime.stats.episodes.sub} Sub`
      : "N/A";
    document.getElementById("dub").textContent = anime.stats?.episodes?.dub
      ? `${anime.stats.episodes.dub} Dub`
      : "N/A";

    const descText = document.getElementById("descText");
    const readToggle = document.getElementById("readToggle");
    const fullDescription = anime.description || "No description available.";
    let isExpanded = false;

    const truncateText = (text, limit) =>
      text.split(" ").slice(0, limit).join(" ") + "...";

    descText.textContent = truncateText(fullDescription, 10);
    readToggle.textContent = "Read More";

    readToggle.addEventListener("click", () => {
      isExpanded = !isExpanded;
      descText.textContent = isExpanded
        ? fullDescription
        : truncateText(fullDescription, 10);
      readToggle.textContent = isExpanded ? "Read Less" : "Read More";
    });

    // More Info Section
    document.getElementById("japanese").textContent = moreInfo.japanese || "N/A";
    document.getElementById("synonyms").textContent = moreInfo.synonyms || "N/A";
    document.getElementById("aired").textContent = moreInfo.aired || "N/A";
    document.getElementById("status").textContent = moreInfo.status || "N/A";
    document.getElementById("genres").textContent =
      moreInfo.genres?.join(", ") || "N/A";
    document.getElementById("studios").textContent = moreInfo.studios || "N/A";

    // Watch Now Button
    const watchNowButton = document.getElementById("watchNow");
    watchNowButton.href = `watch.html?id=${animeId}`;

    // Bookmark Button
    const bookmarkButton = document.getElementById("bookmark");
    bookmarkButton.addEventListener("click", () => {
      const bookmarks = JSON.parse(localStorage.getItem("bookmarks") || "[]");
      if (!bookmarks.includes(animeId)) {
        bookmarks.push(animeId);
        localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
        alert(`${anime.name || "This anime"} bookmarked!`);
      } else {
        alert("Already bookmarked!");
      }
    });
  })
  .catch((error) => {
    console.error("Error fetching anime details:", error);
    alert("Failed to fetch anime details. Please try again later.");
  });
                                


===== google75e8df58c1460fdc.html =====

google-site-verification: google75e8df58c1460fdc.html

===== index.html =====

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Device Detection</title>
    <style>
        /* Dark background and loading text styles */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #1a1a1a;
        }
        #loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            color: #ffffff;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
        }
        #loadingText {
            font-size: 1.5em;
            margin-top: 20px;
        }
        #content {
            display: none;
        }
        /* Styling for the circular animation */
        .circle {
            border: 4px solid rgba(255, 255, 255, 0.2);
            border-top: 4px solid #ffffff;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
    <!-- Anime.js Library from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</head>
<body>
    <div id="loading">
        <div class="circle"></div>
        <div id="loadingText">Detecting your device…</div>
    </div>
    <div id="content"></div>

    <script>

                document.addEventListener("DOMContentLoaded", function () {
    // Create loading screen
    const loadingDiv = document.createElement("div");
    loadingDiv.id = "loading";
    loadingDiv.style.cssText = `
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        color: #ffffff;
        background-color: #1a1a1a;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
    `;

    const loadingText = document.createElement("div");
    loadingText.textContent = "Detecting your device…";
    loadingText.style.fontSize = "1.5em";
    loadingText.style.marginTop = "20px";

    const circle = document.createElement("div");
    circle.className = "circle";
    circle.style.cssText = `
        border: 4px solid rgba(255, 255, 255, 0.2);
        border-top: 4px solid #ffffff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
    `;

    loadingDiv.appendChild(circle);
    loadingDiv.appendChild(loadingText);
    document.body.appendChild(loadingDiv);

    // Add keyframes for the spinning animation
    const styleSheet = document.createElement("style");
    styleSheet.textContent = `
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    document.head.appendChild(styleSheet);

    // Function to load device-specific content with all styles and scripts
    async function loadDeviceSpecificContent() {
        const isMobile = window.innerWidth <= 768;
        const contentUrl = isMobile 
            ? './mobile.html' 
            : './desktop.html';

        try {
            // Fetch the HTML content based on device
            const response = await fetch(contentUrl);
            if (!response.ok) throw new Error("Network response was not ok");

            const htmlText = await response.text();

            // Replace entire document's HTML with the fetched HTML content
            document.open();
            document.write(htmlText);
            document.close();
        } catch (err) {
            // Handle errors and show error message on loading screen
            loadingText.textContent = "Error loading content.";
            console.error("Failed to load HTML:", err);
        }
    }

    // Trigger content loading after the page loads
    window.onload = loadDeviceSpecificContent;
});

    </script>
</body>
</html>


===== manag.html =====

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Comic Book Reader</title>
  <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: linear-gradient(135deg, #1e1e1e, #2c2c2c);
      color: #fff;
      overflow: hidden;
    }

    #comic-container {
      overflow: auto;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: auto;
      opacity: 0;
      transition: opacity 0.5s;
    }

    img.loaded {
      opacity: 1;
    }

    .spinner {
      width: 50px;
      height: 50px;
      border: 5px solid rgba(255, 255, 255, 0.3);
      border-top: 5px solid #fff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      position: absolute;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    #controls-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.9);
      padding: 10px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: opacity 0.5s;
    }

    button.fullscreen-btn {
      background: #555;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #fff;
      border: none;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    button.fullscreen-btn:hover {
      background: #777;
    }

    #progress-bar {
      display: flex;
      justify-content: center;
      margin: 10px 0;
      width: 80%;
    }

    .progress-chunk {
      flex: 1;
      height: 5px;
      margin: 0 2px;
      background: #444;
      transition: background 0.3s;
    }

    .progress-chunk.completed {
      background: #6a0dad;
    }

    #chapter-sidebar {
      position: fixed;
      top: 0;
      left: -300px;
      width: 300px;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: left 0.3s;
      padding: 20px;
    }

    #chapter-sidebar.open {
      left: 0;
    }

    #chapter-sidebar::-webkit-scrollbar {
      width: 8px;
    }

    #chapter-sidebar::-webkit-scrollbar-thumb {
      background: #555;
      border-radius: 4px;
    }

    #chapter-sidebar::-webkit-scrollbar-thumb:hover {
      background: #777;
    }

    #chapter-sidebar .chapter {
      width: 100%;
      margin: 8px 0;
      cursor: pointer;
      padding: 10px;
      background: #333;
      border-radius: 5px;
      text-align: center;
      transition: background 0.3s;
    }

    #chapter-sidebar .chapter.active {
      background: #6a0dad;
    }

    #toggle-chapter-sidebar {
      position: fixed;
      top: 10px;
      left: 10px;
      width: 50px;
      height: 50px;
      background: #555;
      color: #fff;
      border: none;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    #toggle-chapter-sidebar:hover {
      background: #777;
    }

    #nav-buttons {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }

    .nav-btn {
      background: #555;
      border: none;
      color: white;
      padding: 10px;
      margin: 0 5px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .nav-btn:hover {
      background: #777;
    }
  </style>
</head>
<body>
  <div id="comic-container">
    <div class="spinner" id="loading-spinner"></div>
    <img id="comic-image" data-src="" alt="Comic Page">
  </div>

  <div id="controls-container">
    <div id="progress-bar"></div>
    <button class="fullscreen-btn" id="fullscreen">⛶</button>
    <div id="nav-buttons">
      <button class="nav-btn" id="prev-btn">« Prev</button>
      <button class="nav-btn" id="next-btn">Next »</button>
    </div>
  </div>

  <button id="toggle-chapter-sidebar">☰</button>
  <div id="chapter-sidebar"></div>

  <script>
    const comicId = '259dfd8a-f06a-4825-8fa6-a2dcd7274230'; // Replace with the actual comic ID
    let currentPage = 1;
    let totalPages = 0;
    let currentChapterId = null;
    let pages = [];

    const comicContainer = document.getElementById('comic-container');
    const imageElement = document.getElementById('comic-image');
    const controlsContainer = document.getElementById('controls-container');
    const fullscreenButton = document.getElementById('fullscreen');
    const progressBar = document.getElementById('progress-bar');
    const chapterSidebar = document.getElementById('chapter-sidebar');
    const toggleChapterSidebarButton = document.getElementById('toggle-chapter-sidebar');
    const prevButton = document.getElementById('prev-btn');
    const nextButton = document.getElementById('next-btn');
    const loadingSpinner = document.getElementById('loading-spinner');

    function showLoading() {
      loadingSpinner.style.display = 'block';
      imageElement.classList.remove('loaded');
    }

    function hideLoading() {
      loadingSpinner.style.display = 'none';
      imageElement.classList.add('loaded');
    }

    function preloadImages(pageUrls) {
      pageUrls.forEach((url) => {
        const img = new Image();
        img.src = url;
      });
    }

    async function fetchChapters() {
      try {
        const response = await fetch(`https://api-consumet-org-gamma.vercel.app/manga/mangadex/info/${comicId}`);
        const data = await response.json();

        if (data.chapters && Array.isArray(data.chapters)) {
          displayChapters(data.chapters);
        } else {
          console.error('Error: API response does not contain a "chapters" array.');
        }
      } catch (error) {
        console.error('Error fetching chapters:', error);
      }
    }

    function displayChapters(chapters) {
      chapterSidebar.innerHTML = '';
      chapters.forEach(chapter => {
        const chapterElement = document.createElement('div');
        chapterElement.className = 'chapter';
        chapterElement.textContent = chapter.title;
        chapterElement.addEventListener('click', () => {
          currentChapterId = chapter.id;
          fetchPagesForChapter(currentChapterId);
          setActiveChapter(chapterElement);
          toggleChapterSidebar();
        });
        chapterSidebar.appendChild(chapterElement);
      });
    }

    async function fetchPagesForChapter(chapterId) {
      try {
        const response = await fetch(`https://api-consumet-org-gamma.vercel.app/manga/mangadex/read/${chapterId}`);
        pages = await response.json();
        totalPages = pages.length;
        preloadImages(pages.map(page => page.img));
        displayPages(pages);
      } catch (error) {
        console.error('Error fetching pages:', error);
      }
    }

    function displayPages(pages) {
      comicContainer.scrollTop = 0;
      imageElement.src = '';
      imageElement.dataset.src = pages[0].img;
      currentPage = 1;
      updateReader();
      populateProgressBar(pages.length);
    }

    function updateReader() {
      if (currentPage > 0 && currentPage <= totalPages) {
        showLoading();
        imageElement.onload = hideLoading;
        imageElement.src = pages[currentPage - 1].img;
        updateProgressBar();
      }
    }

    function populateProgressBar(totalPages) {
      progressBar.innerHTML = '';
      for (let i = 0; i < totalPages; i++) {
        const chunk = document.createElement('div');
        chunk.classList.add('progress-chunk');
        progressBar.appendChild(chunk);
      }
    }

    function updateProgressBar() {
      const progressChunks = document.querySelectorAll('.progress-chunk');
      progressChunks.forEach((chunk, index) => {
        chunk.classList.toggle('completed', index < currentPage);
      });
    }

    function setActiveChapter(chapterElement) {
      const activeChapter = document.querySelector('.chapter.active');
      if (activeChapter) activeChapter.classList.remove('active');
      chapterElement.classList.add('active');
    }

    function toggleChapterSidebar() {
      chapterSidebar.classList.toggle('open');
    }

    fullscreenButton.addEventListener('click', () => {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    });

    document.addEventListener('fullscreenchange', () => {
      if (!document.fullscreenElement) {
        controlsContainer.style.opacity = '1';
      }
    });

    prevButton.addEventListener('click', () => {
      if (currentPage > 1) {
        currentPage--;
        updateReader();
      }
    });

    nextButton.addEventListener('click', () => {
      if (currentPage < totalPages) {
        currentPage++;
        updateReader();
      }
    });

    toggleChapterSidebarButton.addEventListener('click', toggleChapterSidebar);

    document.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowLeft' && currentPage > 1) {
        currentPage--;
        updateReader();
      } else if (event.key === 'ArrowRight' && currentPage < totalPages) {
        currentPage++;
        updateReader();
      }
    });

    fetchChapters();
  </script>
  <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
  <script>eruda.init();</script>
</body
</html>


===== mobile.html =====

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   AniTeams Slider
  </title>
  <link href="stylesheet.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com" rel="preconnect"/>
  <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
  <link href="https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap" rel="stylesheet"/>
 </head>
 <body>

  <!----- Welcome dialogue ---->
  <div id="welcome-dialog" class="dialog">
    <div class="dialog-content">
        <h2 class="dialog-header">🎉 Welcome to AniTeams!</h2>
        <div class="dialog-message">
            <p><strong>What's New:</strong></p>
            <ul>
                <li>✨ Brand-new anime streaming page.</li>
                <li>🎨 Still powered by the trusted ArtPlayer.</li>
                <li>🆕 Completely revamped anime watching page.</li>
                <li>📈 Tons of new features to enhance your experience.</li>
            </ul>
            <p>I hope you enjoy using this site!</p>
        </div>
        <button id="ok-button">Got It!</button>
    </div>
</div>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

    /* Dialog Styling */
    .dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9); /* Darker semi-transparent black */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
    }

    .dialog.active {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease-in-out;
    }

    .dialog-content {
        background-color: #1b1b1b; /* Sleek dark gray background */
        color: #f2f2f2; /* Light gray text */
        padding: 30px;
        border-radius: 16px;
        text-align: left;
        max-width: 480px;
        width: 90%;
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.7);
        animation: fadeIn 0.5s ease-out;
        font-family: 'Poppins', sans-serif; /* Stylish Google Font */
    }

    .dialog-header {
        font-size: 26px;
        font-weight: 600;
        margin-bottom: 15px;
        border-bottom: 3px solid #9932cc; /* Elegant purple underline */
        padding-bottom: 8px;
        color: #d69df5; /* Light purple */
        text-align: center;
    }

    .dialog-message p {
        margin: 0 0 15px;
        font-size: 16px;
        line-height: 1.8;
    }

    .dialog-message ul {
        margin: 0 0 15px;
        padding-left: 20px;
        font-size: 15px;
        line-height: 1.8;
    }

    .dialog-message ul li {
        margin-bottom: 10px;
    }

    /* Button Styles */
    #ok-button {
        display: block;
        margin: 20px auto 0;
        background-color: #9932cc; /* Purple button */
        color: #fff;
        padding: 12px 30px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        font-family: 'Poppins', sans-serif;
        box-shadow: 0 4px 10px rgba(153, 50, 204, 0.4);
    }

    #ok-button:hover {
        background-color: #a74be7; /* Lighter purple on hover */
        transform: scale(1.05);
    }

    /* Fade-in Animation */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>

<script>
    // Check localStorage for the welcome dialog status
    document.addEventListener("DOMContentLoaded", () => {
        const dialog = document.getElementById("welcome-dialog");
        const okButton = document.getElementById("ok-button");

        // Show dialog if not already acknowledged
        if (!localStorage.getItem("welcomeAcknowledged")) {
            dialog.classList.add("active");
        }

        // Handle the 'Got It!' button click
        okButton.addEventListener("click", () => {
            localStorage.setItem("welcomeAcknowledged", "true");
            dialog.classList.remove("active");
        });
    });
</script>

  <!-- Header Section -->
   <header>
   <!-- Navigation Bar -->
   <nav class="navbar">
    <!-- Toggle Button for Sidebar -->
    <div class="bars" onclick="toggleMenu()">
     <div class="bar1">
     </div>
     <div class="bar2">
     </div>
     <div class="bar3">
     </div>
    </div>
   </nav>
   <!-- Magnifying Glass Icon and Login Button -->
    <div class="header-extras">
    <div class="css-icon-search" onclick="redirectToPage()">
    </div>
   </div>

    <script>
    // Function to redirect the user to a new page
    function redirectToPage() {
      window.location.href = './search.html'; // Change this URL to your desired destination
    }
  </script>
  </header>
  <!-- Sidebar / Side Menu -->
  <aside class="side-menu" id="sideMenu">
   <!-- Close Button for Sidebar -->
   <div class="close-button" onclick="toggleMenu()">
    Close
   </div>
   <!-- Sidebar Items -->
 <ul class="nav-list">
  <li class="item">
    <a href="./index.html">Home</a>
  </li>
  <li class="item">
    <a href="./about.html">About</a>
  </li>
  <li class="item">
    <a href="./contact.html">Contact</a>
  </li>
  <li class="item">
    <a href="./bookmarks.html">Bookmarks</a>
  </li>


    <li class="item">
     Genres
    </li>
    <div class="genre-list" id="genreList">
     <!-- Genres will be populated here by JavaScript -->
    </div>
   </ul>
  </aside>
  <script type="module">
   // JavaScript to Toggle Sidebar
        function toggleMenu() {
            document.getElementById("sideMenu").classList.toggle("open");
            document.querySelector(".bars").classList.toggle("open");
        }

        // Fetch Genres from API and Populate Sidebar
   import { api } from './config.js';
        async function fetchGenres() {
            try {
                const response = await fetch(api); // Replace with your API URL
                const result = await response.json();
                
                if (result.success && result.data.genres) {
                    const genreList = document.getElementById('genreList');
                    genreList.innerHTML = ''; // Clear any existing content

                    result.data.genres.forEach((genre) => {
                        const genreItem = document.createElement('div');
                        genreItem.classList.add('genre-item');
                        genreItem.textContent = genre;
                        genreList.appendChild(genreItem);
                    });
                } else {
                    console.error("Error: Unable to load genres");
                }
            } catch (error) {
                console.error("Error fetching genres:", error);
            }
        }

        // Load genres on page load
        window.onload = fetchGenres;
  </script>
   <section class="spotlight-slideshow">
    <div class="swiper">
        <div class="slideshow-container" id="slideshow-container">
            
        </div>
        <div class="navigation">
            <span class="prev">&#10094;</span>
            <span class="next">&#10095;</span>
        </div>
    </div>
</section>
<script type="module">
 import { api } from './config.js';
    let currentSlide = 0;
    const slideshowContainer = document.getElementById('slideshow-container');
    
    // Function to truncate the description text
    function truncateDescription(description, length = 100) {
        return description.length > length ? description.substring(0, length) + '...' : description;
    }

    // Fetch anime data from the API
    fetch(api)
        .then(response => response.json())
        .then(data => {
            const spotlightAnimes = data.data.spotlightAnimes;

            spotlightAnimes.forEach(anime => {
                const slide = document.createElement('div');
                slide.classList.add('slide');

                const imgContainer = document.createElement('div');
                imgContainer.classList.add('img-container');
                const img = document.createElement('img');
                img.src = anime.poster;
                img.alt = anime.name;
                img.classList.add('img');
                imgContainer.appendChild(img);

                const content = document.createElement('div');
                content.classList.add('content');

                const rank = document.createElement('div');
                rank.classList.add('rank');
                rank.textContent = `Rank: #${anime.rank}`;

                const title = document.createElement('h3');
                title.classList.add('title');
                title.textContent = anime.name;

                const description = document.createElement('div');
                description.classList.add('description');
                description.textContent = truncateDescription(anime.description, 100);

                const icons = document.createElement('div');
                icons.classList.add('icons');
                if (anime.type) {
                    const icon = document.createElement('div');
                    icon.classList.add('icon');
                    const iconSpan = document.createElement('span');
                    iconSpan.classList.add('icon-span');
                    iconSpan.textContent = anime.type;
                    icon.appendChild(iconSpan);
                    icons.appendChild(icon);
                }

                const watchBtn = document.createElement('div');
                watchBtn.classList.add('watch-btn');
                const watchLink = document.createElement('a');
                watchLink.href = `watch.html?id=${anime.id}`;
                watchLink.classList.add('watch-link');
                watchLink.textContent = 'Watch Now';
                const detailLink = document.createElement('a');
                detailLink.href = `details.html?id=${anime.id}`;
                detailLink.classList.add('detail-link');
                detailLink.textContent = 'More Info';
                watchBtn.appendChild(watchLink);
                watchBtn.appendChild(detailLink);

                content.appendChild(rank);
                content.appendChild(title);
                content.appendChild(description);
                content.appendChild(icons);
                content.appendChild(watchBtn);

                slide.appendChild(imgContainer);
                slide.appendChild(content);

                slideshowContainer.appendChild(slide);
            });

            // Now that all slides are loaded, start the slideshow
            const slides = document.querySelectorAll('.slide');
            const totalSlides = slides.length;

            // Function to update the slide position with fade effect
            function updateSlidePosition() {
                slides.forEach((slide, index) => {
                    if (index === currentSlide) {
                        slide.classList.add('fade-in');
                        slide.classList.remove('fade-out');
                    } else {
                        slide.classList.add('fade-out');
                        slide.classList.remove('fade-in');
                    }
                });
            }

            // Function to move to the next slide
            function nextSlide() {
                currentSlide = (currentSlide + 1) % totalSlides;
                updateSlidePosition();
            }

            // Auto slide every 5 seconds
            setInterval(nextSlide, 5000);

            // Initialize the slideshow
            updateSlidePosition();
        })
        .catch(error => console.error('Error fetching anime data:', error));
</script>

<div class="animecard">
    <div class="cardhead">
        <div class="bar"></div>
        <h2 class="headtitle">Trending Anime</h2>
    </div>
    <div class="cardcontainer" id="cardContainer"></div>
</div>


    <div class="cardcontainer" id="cardContainer"></div>
</div>
<script type="module">
import { api } from './config.js';;
async function fetchTrendingAnimes() {
    try {
        const response = await fetch(api);
        const data = await response.json();
        
        // Assume the trending anime data is within `data.trendingAnimes`
        const trendingAnimes = data.data.trendingAnimes;

        // Select the card container element
        const cardContainer = document.getElementById('cardContainer');
        
        // Loop through each anime and create card elements
        trendingAnimes.forEach(anime => {
            // Create a card item element
            const cardItem = document.createElement('div');
            cardItem.classList.add('carditem');
            
            // Create an image container and image element
            const imgContainer = document.createElement('div');
            imgContainer.classList.add('cardimgcontainer');
            
            const img = document.createElement('img');
            img.classList.add('cardimage');
            img.src = anime.poster;
            img.alt = anime.name;
            
            // Append the image to the container
            imgContainer.appendChild(img);

            // Create the title element
            const title = document.createElement('p');
            title.classList.add('cardtitle');
            title.textContent = anime.name;

            // Append the image container and title to the card item
            cardItem.appendChild(imgContainer);
            cardItem.appendChild(title);
            
            // Append the card item to the card container
            cardContainer.appendChild(cardItem);
        });
    } catch (error) {
        console.error('Error fetching trending animes:', error);
    }
}

// Call the function to fetch and display the animes
fetchTrendingAnimes();

</script>
  <p>
   <span class="trending">
    Latest Episodes
   </span>
  </p>
  <div class="card-container">
  </div>
  <script type="module">
   // Import the API URL from config.js
import { api } from './config.js';; 
   async function fetchAnimeData() {
            try {
                const response = await fetch(api);
                const data = await response.json();

                if (data.success) {
                    const cardContainer = document.querySelector('.card-container');
                    cardContainer.innerHTML = ''; // Clear previous content

                    data.data.latestEpisodeAnimes.forEach(anime => {
                        const cardHTML = `
                            <div class="card">
                                <div class="poster">
                                    <img src="${anime.poster}" alt="${anime.name} Poster" class="image"/>
                                    <a href="details.html?id=${anime.id}" class="overlay">
                                        <img src="play-buttton.png" alt="Play" class="play-button"/>
                                    </a>
                                    <div class="info-left">
                                        <div class="btn">SUB ${anime.episodes.sub}</div>
                                    </div>
                                    <div class="info-right">
                                        <div class="btn-episode">Ep ${anime.episodes.sub}</div>
                                    </div>
                                </div>
                                <div class="details">
                                    <h3 class="name">${anime.name}</h3>
                                    <p class="jname">${anime.jname}</p>
                                </div>
                            </div>
                        `;
                        cardContainer.insertAdjacentHTML('beforeend', cardHTML);
                    });
                } else {
                    console.error("Failed to fetch anime data:", data.message);
                }
            } catch (error) {
                console.error("Error fetching data:", error);
            }
        }

        fetchAnimeData();
  </script>
 <style>.animecard {
    display: flex;
    flex-direction: column;
    margin: 0px auto;
    scroll-behavior: smooth;
}
.cardhead{
    display: flex;
    gap: 8px;
    align-items: center;
}
.bar{
    width: 0.3rem;
    height: 2rem;
    border-radius: 0.375rem;
    background-color: white;
}
.headtitle {
    font-size: 24px;
    font-weight: 500;
    margin: 15px 0;
    color: white;
}

.animeitems{
    position: relative;
}

.leftarrow{
    position: absolute;
    display: flex;
    align-items: center;
    height: 97%;
    z-index: 9;
    background: linear-gradient(to right,#000000,rgba(0, 0, 0, 0.02));
    transition: all 300ms ease-out!important;
    cursor: pointer;
}
.notactive{
    opacity: 0.5;
}

.rightarrow{
    position: absolute;
    display: flex;
    align-items: center;
    height: 98%;
    right: -0.6px;
    z-index: 9;
    background: linear-gradient(to left,#000000,rgba(0, 0, 0, 0.02));
    transition: all 300ms ease-out!important;
    cursor: pointer;
}

.cardcontainer {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: scroll;
    overflow-y: none;
    gap: 10px;
}

.cardcontainer::-webkit-scrollbar {
    display: none;
}

.carditem {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 300px;
    width: 175px;
    margin: 0 3px 0 0;
    /* border: 1px solid white; */
    /* align-items: center; */
}

.carditem:hover .cardinfo {
    opacity: 1;
}

.cardimgcontainer {
    width: inherit;
    height: 250px;
    background-color: #1e1e24;
    border-radius: 8px;
    overflow: hidden;
}

.pulse {
    animation: pulse 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 1.5s;
}

.pulseodd {
    animation: pulse 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: 0.5s;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.cardimage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: all 300ms ease;
}

.cardimgcontainer:hover .cardimage{
    transform: scale(1.03);
    object-fit: cover;
}

.cardtitle {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    color: #d1d7e0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    padding: 0 6px;
    margin: 5px 1px 0px 1px;
    cursor: pointer;
    /* border: 1px solid white; */
}

@media(max-width:1280px){
    .cardcontainer{
        padding:0 0 0 0.75rem;
    }
    .leftarrow svg{
        margin:0 5px;
    }
    .cardhead{
        padding:0 0.75rem;
    }
    .headtitle{
        font-size: 21px;
    }
    .carditem{
        width: 155px;
        height: 280px;
    }
    .cardimgcontainer{
        height: 230px;
    }
}
@media(max-width:768px) {
    .cardimgcontainer {
        height: 190px;
        margin: 0 3px 0 0;
    }

    .leftarrow{
        width: 10px;
    }

    .leftarrow svg{
        display: none;
    }

    .carditem {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 240px;
        width: 135px;
        /* align-items: center; */
        /* border: 1px solid white; */
    }
    .animecard{
        margin: 5px auto;
    }
    .headtitle{
        margin: 8px 0;
    }
    .bar{
        width: 0.35rem;
        height: 1.5rem;
        border-radius: 0.375rem;
        background-color: white;
    }
    .cardtitle{
        padding: 0 3px;
    }
}

@media(max-width:600px) {
    .cardcontainer {
        gap: 8px;
    }

    .cardimgcontainer {
        height: 160px;
        margin:0 0 0 0px;
    }

    .carditem {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 205px;
        width: 105px;
        /* align-items: center; */
        /* border: 1px solid white; */
    }

    .rightarrow{
        height: 90%;
        right: 0px;
    }

    .rightarrow svg{
        width: 25px;
        height: 25px;
    }
    .cardtitle {
        font-size: 12px;
        padding: 0 3px;
        margin: 3px 0;
    }
    .headtitle{
        font-size: 19px;
    }
}</style>
  
  </script>
 </body>
</html>


===== player.html =====

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AniTeams -Watch</title>
  
  <!-- Artplayer CSS -->
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .container {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      background: #000; /* Background color if needed */
    }

    .artplayer-app {
      width: 100%;
      height: 100%;
      max-width: 1240px; /* Maximum width of the player */
      max-height: 605px; /* Maximum height of the player */
      background: #000; /* Background color */
      box-sizing: border-box; /* Include padding and border in element's total width and height */
    }

    /* Media queries for different screen sizes */

    @media (max-width: 768px) {
      .container {
        padding: 10px; /* Optional padding for smaller screens */
      }

      .artplayer-app {
        max-width: 100%;
        max-height: 100%;
      }
    }

    @media (max-width: 1024px) {
      .container {
        padding: 10px; /* Optional padding for medium screens */
      }

      .artplayer-app {
        max-width: 100%;
        max-height: 100%;
      }
    }
  </style>
  
  
  <!-- Artplayer Script -->
  <script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
  
  <!-- HLS.js Script -->
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  
  <!-- Chromecast Plugin Script -->
  <script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-chromecast/dist/artplayer-plugin-chromecast.js"></script>
  
  
  <!-- VTT Thumbnail Plugin Script -->
  <script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-vtt-thumbnail/dist/artplayer-plugin-vtt-thumbnail.js"></script>
  
</head>
<body>
  <!-- Container for the Artplayer -->
  <div class="artplayer-app"></div>

  <script>
document.addEventListener('DOMContentLoaded', () => {
  const baseApiUrl = 'https://aniwatch-api-net.vercel.app/api/v2/hianime/episode/sources';
  let category = 'dub';
  let art = null;

  const getQueryParam = (param) => {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
  };

  const id = getQueryParam('id');
  if (!id) {
    console.error('No ID provided in URL');
    return;
  }

  const fetchVideoData = (category) => {
    const apiUrl = `${baseApiUrl}?animeEpisodeId=${id}&server=hd-1&category=${category}`;
    console.log(`Fetching video data from: ${apiUrl}`);
    return fetch(apiUrl)
      .then(response => {
        if (!response.ok) throw new Error('Network response was not ok');
        return response.json();
      })
      .then(data => {
        if (data.status === 502) return null;
        return {
          sources: data.data.sources,
          tracks: data.data.tracks,
        };
      })
      .catch(error => console.error('Error fetching API data:', error));
  };

  const convertVTTFormat = async (url) => {
    try {
      const response = await fetch(url);
      const text = await response.text();
      const lines = text.split('\n');
      let converted = ['WEBVTT', ''];
      const baseUrl = url.substring(0, url.lastIndexOf('/') + 1);
      for (let line of lines) {
        line = line.trim();
        if (!line || line === 'WEBVTT') continue;
        if (/^\d+$/.test(line)) continue;
        if (line.includes('-->')) {
          const [start, end] = line.split('-->').map(time => {
            const match = time.trim().match(/(\d{2}):(\d{2}):(\d{2})\.(\d{3})/);
            if (match) {
              const [_, hh, mm, ss, ms] = match;
              const totalSeconds = parseInt(hh) * 3600 + parseInt(mm) * 60 + parseInt(ss);
              const minutes = Math.floor(totalSeconds / 60);
              const seconds = totalSeconds % 60;
              return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${ms}`;
            }
            return time.trim();
          });
          converted.push(`${start} --> ${end}`);
        } else if (line.includes('#xywh=')) {
          const [imageName, coordinates] = line.split('#');
          converted.push(`${baseUrl}${imageName}#${coordinates}`);
        }
      }
      const blob = new Blob([converted.join('\n')], { type: 'text/vtt' });
      return URL.createObjectURL(blob);
    } catch (error) {
      console.error('Error converting VTT format:', error);
      return null;
    }
  };

  const initializePlayer = async (data) => {
    if (!data || !data.sources) {
      console.error('Invalid data received from API:', data);
      return;
    }

    const videoSource = data.sources[0].url;
    const subtitleTracks = data.tracks.filter(track => track.kind === 'captions');
    const thumbnailTrack = data.tracks.find(track => track.kind === 'thumbnails');

    if (art) art.destroy();

    art = new Artplayer({
      container: '.artplayer-app',
      url: videoSource,
      type: 'm3u8',
      screenshot: true,
      setting: true,
      autoplay: true,
      fullscreen: true,
      fullscreenWeb: true,
      airplay: true,
      playsInline: true,
      miniProgressBar: true,
      pip:true,
      plugins: [artplayerPluginChromecast({})],
      settings: [
        {
          html: 'Speed',
          selector: [
            { html: '1.0x', playbackRate: 1.0, default: true },
            { html: '1.5x', playbackRate: 1.5 },
            { html: '2.0x', playbackRate: 2.0 },
          ],
          onSelect: (item) => {
            art.playbackRate = item.playbackRate;
            return item.html;
          },
        },
        {
          html: 'Subtitles',
          selector: subtitleTracks.map(track => ({
            html: track.label,
            url: track.file,
            default: track.default || false,
          })),
          onSelect: (item) => {
            art.subtitle.switch(item.url, item.html);
            return item.html;
          },
        },
        {
          html: 'Audio',
          selector: [
            { html: 'Sub', category: 'sub', default: category === 'sub' },
            { html: 'Dub', category: 'dub', default: category === 'dub' },
          ],
          onSelect: (item) => {
            category = item.category;
            fetchVideoData(category).then(data => {
              if (!data) {
                const otherCategory = category === 'sub' ? 'dub' : 'sub';
                fetchVideoData(otherCategory).then(data => {
                  if (!data) {
                    alert(`Error loading both ${category} and ${otherCategory}`);
                  } else {
                    initializePlayer(data);
                  }
                });
              } else {
                initializePlayer(data);
              }
            });
            return item.html;
          },
        },
      ],
      customType: {
        m3u8: (video, url) => {
          if (Hls.isSupported()) {
            const hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, () => video.play());
          } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = url;
            video.addEventListener('loadedmetadata', () => video.play());
          } else {
            art.notice.show('Does not support playback of m3u8');
          }
        },
      },
      moreVideoAttr: {
        'webkit-playsinline': true,
        'playsinline': true,
      },
    });

    if (thumbnailTrack) {
      const thumbnailVTT = await convertVTTFormat(thumbnailTrack.file);
      if (thumbnailVTT) {
        art.plugins.add(artplayerPluginVttThumbnail({ vtt: thumbnailVTT }));
      }
    }

    const saveKey = `video-progress-${id}`;
    const savedTime = localStorage.getItem(saveKey);

    if (savedTime) {
      art.currentTime = parseFloat(savedTime);
      art.notice.show(`Resuming from ${savedTime} seconds`);
    }

    art.on('video:timeupdate', () => {
      const currentTime = art.currentTime;
      localStorage.setItem(saveKey, currentTime);
    });

    art.on('video:ended', () => {
      localStorage.removeItem(saveKey);
    });
  };

  fetchVideoData(category).then(data => {
    if (!data) {
      const otherCategory = category === 'sub' ? 'dub' : 'sub';
      fetchVideoData(otherCategory).then(data => {
        if (!data) {
          alert(`Error loading both ${category} and ${otherCategory}`);
        } else {
          initializePlayer(data);
        }
      });
    } else {
      initializePlayer(data);
    }
  });
});
</script>

          

           
  
</body>
</html> 
 
      


===== search.css =====

* {
    box-sizing: border-box;
}
body, html {
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: auto;
    font-family: "Poppins", sans-serif;
    background-color: black;
    color: #FFBADE;
}

/* Header and Button Styling */
.bars {
    margin-left: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 101;
    display: flex;
    flex-direction: column;
}

.login{
    background-color: blueviolet;
    padding: 12px 20px 12px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    margin-left: 30px;
    font-size: 18px;
}

.login:hover{
    opacity: 0.8;
}
.login:active{
    opacity: 0.4;
}

/* Responsive Container */
.container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    max-width: 100%;
    padding: 10px;
    flex-wrap: wrap;
    color: white;
}


/* Search Bar */
#search-bar {
    padding: 10px;
    width: 100%;
    max-width: 300px; /* Restrict max-width for better responsiveness */
    border-radius: 10px;
    outline: none;
    border: 1px solid black;
    font-family: 'Poppins', sans-serif;
}
#search-bar::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Navigation Links */
.nav-links {
    text-decoration: none;
    position: relative;
    color: white;
}

.nav-links::after {
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    bottom: -3px;
    width: 0;
    background-color: white;
    transition: width 200ms ease-in-out;
}

.nav-links:hover::after {
    width: 70%;
}

/* Menu Items */
.menu ul li a {
    text-decoration: none;
    font-size: 16px;
    color: #FFFF;
    margin-left: 10px;
    cursor: pointer;
}
.menu ul li a:hover {
    color: blue;
}

.menu ul li a{
    text-decoration: none;
    font-size: 16px;
    color: #FFFF;
    margin-left: 10px;
    margin-left: -20px;
}
.menu ul li a:hover{
    color: blue;
}
.sidebar{
    position: fixed;
    list-style: none;
    gap: 20px;
    top: 0;
    left: 0;
    height: 100vh;
    width: 40vh;
    z-index: 999;
    background-color: rgba(128, 0, 128, 0.347);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    backdrop-filter: blur(10px);
   
}
.closemenu{
    background-color: transparent;
    border: none;
    font-size: 15px;
    color: #FFFF;
    margin-top: 20px;
    cursor: pointer;
    margin-top: 30px;
    margin-left: 10px;
    margin-left: -20px;
}
@media (max-width: 412px){
    .nav-links{
        display: none;
    
    } 
    .container {
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
    }

      h2 span{
            position: absolute;
            left: 130px;
            top: 80px;
            font-size: 30px;
      }
         
      .category-filter{
        max-width: 412px;
        overflow-x: hidden;
    }
    #search-bar{
        transform: translateX(60px);
        width: 260px !important;
    }
    .login{
        transform: translateY(-200px) translateX(320px);
        margin-right: 10px;
        padding: 12px !important;
        font-size: 13px !important;}
    
}
@media (max-width: 570px){
    .container{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .category-filter{
        max-width: 570px;
        overflow-x: hidden;
    }
    .bars{
        margin-top: 20px;
        margin-right: 10px;
    }
    #search-bar{
        display: flex;
        flex-grow: 1;
        margin-top: 10px;
    }
    .login{
        margin-top: 20px;
    }
}
/* Responsive Styling */
@media (max-width: 768px) {
    .container {
        gap: 20px;
        flex-wrap: wrap;
    }

    .login {
        font-size: 13px;
        padding: 8px 12px;
    }

    #search-bar {
        max-width: 200px;
    }
    .category-filter{
        max-width: 768px;
        overflow-x: hidden;
    }
}

@media (max-width: 612px) {
    .container {
     /* Stack items vertically */
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
    }
    .nav-links{
        display: none;
    }
    .login {
        font-size: 12px;
        padding: 6px 10px;
        margin-left: 0; /* Align centrally */
    }

    #search-bar {
        max-width: 100%;
        width: auto;
    }

    .bars {
        margin-left: 0;
        align-self: flex-start;
    }
    .category-filter{
        max-width: 612px;
        overflow-x: hidden;
    }
}


@media screen and (max-width: 360px) {
    .container{
        flex-wrap: wrap;
    }
    .category-filter{
        max-width: 360px;
        overflow-x: hidden;
    }
    h2 span{
        transform: translateX(-25px);
        font-size: 30px;
    }
    #search-bar{
        transform: translateX(30px);
        width: 270px !important;
    }
    .login{
        transform: translateY(-200px) translateX(278px);
        margin-right: 10px;
        padding: 12px !important;
        font-size: 13px !important;
    }
}
.category-filter {
    display: block; /* Ensures it occupies the full width and aligns vertically */
    margin-bottom: 20px; /* Adds space below the filter */
    position: relative; /* Ensures it stays in the natural document flow */
    width: 100%; /* Makes the filter take up the full width of its container */
    height: auto; /* Allows the height to adjust automatically based on content */
    top: auto; /* Removes any top alignment (if previously set) */
    translate: none; /* Removes translate positioning (if previously set) */
    z-index: 2;
}



select{
    appearance: none; /* Removes default styling */
    background-color: transparent;
    color: #ffb6c1;
    padding: 5px;
    border: none;
    cursor: pointer;
    margin-left: 5px;
    outline: none;
    font-size: 13px;
  }
  select:active{
    border: none;
  }
div p{
    font-size: 20px;
    color: white;
}
.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between the filter items */
    color: white;
    margin-top: 10px;
}

.filter-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px 15px 10px 10px;
    border: 1px solid #ffb6c1;
    border-radius: 5px;
    margin-top: 10px;
    
}

.filter-item label {
    font-size: 14px; /* Adjust label font size if needed */
    color: white; /* Match your theme color */
    margin-bottom: 1px;
    font-size: 15px;
}
option {
    background-color: #3c3b51; /* Dark option background */
    color: #f5f5f5; /* Light text color */
    padding: 8px;
    font-size: 13px;
    text-align: center;
}

.start-month{
    margin-left: 3px;
    text-align: center;
}

.genre-filter p{
    display: block;
    position: relative;
    top: 20%;
    margin-right: 50em;
}
.ni-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;  /* Allows the items to wrap to the next line if necessary */
    gap: 10px;  /* Adds space between the genre items */
}
.f-genre-item{
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
   row-gap: 6px;
    flex-direction: row;
    flex-wrap: wrap;
    cursor: pointer;
    padding: 10px 10px 10px 10px;
    border: 1px solid #ffb6c1;
    border-radius: 6px;
    text-align: center;
}
.f-genre-item.active {
    /* or any other styling to indicate selection */
    color: white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ffb6c1;
    border-radius: 6px;
   background-color: transparent;
}
.f-genre-item.active::after{
    content: "";
    border: none;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom right, rgb(126, 27, 218), #e100ff);
    border-radius: 6px;
    z-index: -999;
}
.f-genre-item.active:active::after{
    border: none;
    display: flex;
}
.f-genre-item.active:active{
    z-index: 5;
    border: none;
}
.f-genre-item:active:not(.f-genre-item.active:active){
    background-image:  linear-gradient(to bottom right, rgb(126, 27, 218), #e100ff);
    border: none;
}
.filter-button-con{
    display: inline-flex;
}
.filter-button{
    padding: 13px 13px 13px 13px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: none;
    background-color: #3c3b51;
    color: white;
    font-size: 15px;
    top: -10px;
    margin-right: 1em;
    margin-top: 1em;
    margin-left: 1em;
    cursor: pointer;
}
.filter-button::after{
    content: "";
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom right, rgb(126, 27, 218), #e100ff);
    border-radius: 6px;
    z-index: -1;
}
.filter-button:hover{
    z-index: 0; 
}
.filter-button:active{
    opacity: 0.4;
}
.f-genre-item.selected {
    background-color: #e100ff; /* Persistent highlight color */
    color: white; /* Ensure text remains visible */
    border-color: #e100ff; /* Optional: Update border color */
}



===== search.html =====

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="search.css">
    <link rel="stylesheet" href="card.css"> 
    <title>Aniteams-Filter</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
        </style>
</head>
<body>
    <header>
        <nav class="navbar">
         <div class="container">
             <i class="fa-solid fa-bars fa-2x bars"></i>
             <h2><span>Aniteams</span></h2>
             <input type="search" name="Search" id="search-bar" placeholder="Search">
             <a class="nav-links" href="animeindex.html">Home</a>
             <a class="nav-links" href="">Subbed Anime</a>
             <a class="nav-links" href="">Dubbed Anime</a>
             <button class="login" onclick="onFilterButtonClick()">Search</button>
         </div>


         <div class="menu" id="menu">
            <ul class="sidebar">
            <button class="closemenu" id="closemenu"> <i class="fa-solid fa-angle-left" fa--1x close></i> Close Menu </button>
            <li><a href="animeindex.html">Home</a></li>
            <li><a href="">Subbed Anime</a></li>
            <li><a href="">Dubbed Anime</a></li>
            <li><a href="">Most Popular</a></li>
            <li><a href="">TV Series</a></li>
            <li><a href="">Specials</a></li>
            <li><a href="">Movies</a></li>
            <li><a href=""">Top Rated</a></li>
        </ul>
        </div>
     </nav>
     <main>
        <section> <!-- Filter box Sectiom-->
            <div class="category-filter">
                <form method="get" id="filter-form"> 
                    <input type="hidden" name="keyword" value="">
                    
                    <div>
                        <p>Filter</p>
                        <div class="filter-options">
                            <div class="filter-item">
                                <label for="type">Type</label>
                                <select id="type" name="type">
                                    <option value="all">All</option>
                                    <option value="Movie">Movie</option>
                                    <option value="TV">TV</option>
                                    <option value="ONA">ONA</option>
                                    <option value="OVA">OVA</option>
                                    <option value="Specials">Specials</option>
                                    <option value="Season">Season</option>
                                    
                                </select>
                            </div>
                            <div class="filter-item">
                                <label for="status">Status</label>
                                <select id="status" name="status">
                                    <option value="all">All</option>
                                    <option value="Current Airing">Current Airing</option>
                                    <option value="Finished Airing">Finished Airing</option>
                                    <option value="Not Yet Aired">Not Yet Aired</option>
                                    <!-- Other options -->
                                </select>
                            </div>
                            <div class="filter-item">
                                <label for="Rated">Rated</label>
                                <select id="Rated" name="Rated">
                                    <option value="all">All</option>
                                    <option value="G">G</option>
                                    <option value="PG">PG</option>
                                    <option value="R">R</option>
                                    <option value="R+">R+</option>
                                    <option value="Rx">Rx</option>
                                    <!-- Other options -->
                                </select>
                        </div>
                        <div class="filter-item">
                            <label for="Season">Season</label>
                            <select id="Season" name="Season">
                                <option value="all">All</option>
                                <option value="Spring">Spring</option>
                                <option value="Summer">Summer</option>
                                <option value="Fall">Fall</option>
                                <option value="Winter">Winter</option>
                                <option value=""></option>
                            </select>
                    </div>
                    
                    <div class="filter-item">
                        <label for="Score">Score</label>
                        <select id="Score" name="Score">
                            <option value="all">All</option>
                            <option value="(1)">(1) Disgusting</option>
                            <option value="(2)">(2) Horrible</option>
                            <option value="(3)">(3) Very Bad</option>
                            <option value="(4)">(4) Bad</option>
                            <option value="(5)">(5) Mid</option>
                            <option value="(6)">(6) Fine</option>
                            <option value="(7)">(7) Good</option>
                            <option value="(8)">(8) Very Good</option>
                            <option value="(9)">(9) Great</option>
                            <option value="(10)">(10) Goated</option>
                        </select>
                </div>

                <div class="filter-item">
                    <label for="Language">Language</label>
                    <select id="Language" name="Language">
                        <option value="all">All</option>
                        <option value="SUB">SUB</option>
                        <option value="DUB">DUB</option>
                        <option value="SUB & DUB">SUB & DUB</option>
                    </select>
            </div>
            <div class="filter-item">
                <label for="start-date">Start Date</label>
                <select class="start-year" name="Start-date-year">
                    <option value="Year">Year</option>
                </select>
                <select class="start-month" name="Start-date-month">
                    <option value="Month">Month</option>
                </select>
                <select class="start-day" name="Start-date-day">
                    <option value="Day">Day</option>
                </select>
            </div>

            <div class="filter-item">
                <label for="end-date">End Date</label>
                <select class="start-year-2" name="Start-date-year">
                    <option value="Year">Year</option>
                </select>
                <select class="start-month-2" name="Start-date-month">
                    <option value="Month">Month</option>
                </select>
                <select class="start-day-2" name="Start-date-day">
                    <option value="Day">Day</option>
                </select>
            </div>
            
            <div class="filter-item">
                <label for="sort">Sort</label>
                <select id="sort" name="sort">
                    <option value=">Default">Default</option>
                    <option value="Recently Updated">Recently Updated</option>
                    <option value="Recently Added">Recently Added</option>
                    <option value="Score">Score</option>
                    <option value="Named A-Z">Named A-Z</option>
                    <option value=">Relaease Date">Relaease Date</option>
                    <option value="Most Watched">Most Watched</option>
                </select>
                </div>
                 <script>
                     
document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('filter-form'); // Form element

    if (!form) {
        console.error('Form not found in DOM.');
        return;
    }

    // Event Listener: Update URL parameters whenever a form field changes
    form.addEventListener('input', () => {
        const formData = new FormData(form); // Collect form data
        const queryParams = new URLSearchParams();

        // Loop through form data and append valid parameters
        for (const [key, value] of formData.entries()) {
            if (value !== '' && value !== 'all') { // Ignore empty or default "all" values
                queryParams.append(key, value);
                console.log(`Captured: ${key} = ${value}`); // Debug log
            }
        }

        // Update the URL without refreshing the page
        const baseUrl = window.location.origin + window.location.pathname;
        const newUrl = queryParams.toString() 
            ? `${baseUrl}?${queryParams.toString()}`
            : baseUrl;
        window.history.replaceState({}, '', newUrl); // Update URL
        console.log(`Updated URL to: ${newUrl}`); // Debug log
    });

    // Function: Pre-fill form values from URL on page load
    function prefillFormFromURL() {
        const urlParams = new URLSearchParams(window.location.search);

        if (urlParams.toString()) {
            console.log('URL parameters detected:', urlParams.toString()); // Debug log
        }

        // Loop through each form element and set the value
        for (const [key, value] of urlParams.entries()) {
            const formElement = form.querySelector(`[name="${key}"]`);
            if (formElement) {
                formElement.value = value; // Set the value from the URL
                console.log(`Pre-filling: ${key} = ${value}`); // Debug log
            }
        }
    }

    // Execute pre-filling on page load
    prefillFormFromURL();
});
                    


</script>           
            
                <div class="genre-filter">
                    <p>Genre</p>
                    </div>
                    <div class="ni-list" id="genre-list">
    <input type="hidden" id="genre-ids" name="genres" value="1">
    <!-- Genre items will be populated here dynamically -->
</div>
   <script type="module">
       import  api  from './config.js';

    document.addEventListener("DOMContentLoaded", () => {
       
        const selectedGenres = new Set();
        const genreList = document.getElementById('genre-list');

        // Fetch genres from the API
        fetch(api)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log("API Response:", data);
                if (data.success && data.data && data.data.genres) {
                    const genres = data.data.genres;

                    genres.forEach((genre) => {
                        const genreItem = document.createElement('div');
                        genreItem.classList.add('f-genre-item');
                        genreItem.setAttribute('data-id', genre);
                        genreItem.textContent = genre;
                        genreList.appendChild(genreItem);
                    });

                    // Load selected genres from URL on page load
                    loadSelectedGenresFromUrl();

                    // Add click listeners after genre are loaded
                    addGenreClickListeners();
                } else {
                    console.error('Invalid API response structure', data);
                }
            })
            .catch(error => {
                console.error('Error during fetch:', error);
                console.log('Using fallback genres for testing');
                const fallbackGenres = ['Action', 'Comedy', 'Drama', 'Fantasy'];
                fallbackGenres.forEach((genre) => {
                    const genreItem = document.createElement('div');
                    genreItem.classList.add('f-genre-item');
                    genreItem.setAttribute('data-id', genre);
                    genreItem.textContent = genre;
                    genreList.appendChild(genreItem);
                });

                // Load selected genres from URL on page load
                loadSelectedGenresFromUrl();

                addGenreClickListeners();
            });

        function addGenreClickListeners() {
            const genreItems = document.querySelectorAll('.f-genre-item');
            genreItems.forEach(item => {
                item.addEventListener('click', () => {
                    const genre = item.getAttribute('data-id');

                    if (selectedGenres.has(genre)) {
                        selectedGenres.delete(genre);
                        item.classList.remove('selected');
                    } else {
                        selectedGenres.add(genre);
                        item.classList.add('selected');
                    }

                    updateUrlParams(selectedGenres);
                });
            });

        // Add click listener for the Filter button
            const filterButton = document.querySelector('.filter-button');
            filterButton.addEventListener('click', (event) => {
                event.preventDefault(); // Prevent the default form submission
                updateUrlParams(selectedGenres); // Ensure genres are updated in URL
                // Optionally: Submit form or trigger search logic
                // This can be adapted based on your specific needs
            });
        }

        function updateUrlParams(genresSet) {
            const url = new URL(window.location.href);
            if (genresSet.size > 0) {
                url.searchParams.set('genres', Array.from(genresSet).join(',')); // Use join ',' to separate
            } else {
                url.searchParams.delete('genres');
            }
            window.history.replaceState(null, '', url);
        }

        function loadSelectedGenresFromUrl() {
            const urlParams = new URLSearchParams(window.location.search);
            const genresFromUrl = urlParams.get('genres');

            if (genresFromUrl) {
                const genresArray = genresFromUrl.split(',');
                genresArray.forEach(genre => {
                    selectedGenres.add(genre.trim());

                    // Highlight the genres in the UI
                    const genreItem = Array.from(genreList.children).find(item => item.getAttribute('data-id') === genre.trim());
                    if (genreItem) {
                        genreItem.classList.add('selected');
                    }
                });
            }
        }
    });
</script>
<div class="filter-button-con">
    <button type="button" class="filter-button" onclick="search()">Filter</button>
</div>
                            
            <script>document.getElementById('search-bar').addEventListener('keypress', function(event) {
    // Check if the Enter key is pressed
    if (event.key === 'Enter') {
        updateQueryParam(this.value); // Update the query parameter in the URL
    }
});

function updateQueryParam(query) {
    // Get the current value of the search input
    const encodedQuery = encodeURIComponent(query);
    
    // Create a new URL object based on the current URL
    const url = new URL(window.location.href);
    
    // Update or add the query parameter
    url.searchParams.set('query', encodedQuery);
    
    // Update the URL without reloading the page
    window.history.pushState({ path: url.href }, '', url.href);
}

function onFilterButtonClick() {
    // Get the value from the search bar
    const searchBar = document.getElementById('search-bar');
    if (searchBar) {
        updateQueryParam(searchBar.value); // Update the query parameter
    }

    // Call the existing script
    onFetchAnimeButtonClick();
}
</script>                
                            
                                                 

                        </div>
                    </div>
        </form>
                         

            </div>
        
        </section>
       <div id="loader" class="loading">Loading</div>
    <div id="anime-list" class="card-container"></div>
<!------ styles for the loading animations ------> 
         <style>  
         .loading {
            font-size: 1.5em;
            animation: dots 1s steps(5, end) infinite;
        }
        @keyframes dots {
            0%, 20% { content: ''; }
            20% { content: '.'; }
            40% { content: '..'; }
            60% { content: '...'; }
            80%, 100% { content: ''; }
        }</style>
  <script>
 <script type="module">
    import api from './config.js'; // Import default export
    import { search } from './config.js'; // Import named export

    const fetchParamsFromUrl = () => {
        const urlParams = new URLSearchParams(window.location.search);
        return {
            query: urlParams.get('query') || '',
            page: urlParams.get('page') || 1,
            genres: urlParams.get('genres') || '',
            type: urlParams.get('type') || '',
            sort: urlParams.get('sort') || '',
            season: urlParams.get('season') || '',
            sub_or_dub: urlParams.get('language') || 'sub',
            status urlParams.get('status') || '',
            rating: urlParams.get('rated') || '',
            score: urlParams.get('score') || '',
            start_date: `${urlParams.get('start-date-year')}-${urlParams.get('start-date-month')}-${urlParams.get('start-date-day')}`
        };
    }

    const fetchAnimeData = async () => {
        const params = fetchParamsFromUrl();
        const url = `${search}?q=${params.query}&page=${params.page}&gen=${params.genres}&type=${params.type}&sort=${params.sort}&season=${params.season}&language=${params.sub_or_dub}&status=${params.status}&rated=${params.rating}&score=${params.score}&start_date=${params.start_date}`;
        
        const loader = document.getElementById('loader');
        const animeList = document.getElementById('anime-list');
        loader.style.display = 'block';
        animeList.innerHTML = ''; // Clear previous results

        try {
            const response = await fetch(url);
            const data = await response.json();
            loader.style.display = 'none';

            if (data.success && data.data.animes.length > 0) {
                data.data.animes.forEach(anime => {
                    const card = document.createElement('div');
                    card.className = 'card';
                    card.innerHTML = `
                        <div class="poster">
                            <img src="${anime.poster}" alt="${anime.name} Poster" class="image" />
                            <a href="details.html?id=${anime.id}"="overlay">
                                <img src="play-buttton.png" alt="Play" class="play-button" />
                            </a>
                            <div class="info-left">
                                <div class="btn">SUB ${anime.episodes.sub}</div>
                            </div>
                            <div class="info-right">
                                <div class="btn-episode">DUB ${anime.episodes.dub}</div>
                            </div>
                        </div>
                        <div class="details">
                            <h3 class="name">${anime.name}</h3>
                            <p class="jname">${anime.jname}</p>
                        </div>
                    `;
                    animeList.appendChild(card);
                });
            } else {
                animeList.innerHTML = '<p>No results found.</p>';
            }
        } catch (error) {
            loader.style.display = 'none';
            animeList.innerHTML = '<p>Error fetching data.</p>';
            console.error('Error fetching data:', error);
        }
    }

    // A function to be called on button click
    function search() {
        fetchAnimeData();
    }
</script>


</div>
    </main>
        
              <footer class="footer">
    <a href="index.html" class="logo-link">
        <img src="logo.png" alt="AniTeams Logo" class="logo">
    </a>
    <div class="footer-container">
        <div class="pagination">
            <a href="#">A</a>
            <a href="#">B</a>
            <a href="#">C</a>
            <a href="#">D</a>
            <a href="#">E</a>
            <a href="#">F</a>
            <a href="#">G</a>
            <a href="#">H</a>
            <a href="#">I</a>
            <a href="#">J</a>
            <a href="#">K</a>
            <a href="#">L</a>
            <a href="#">M</a>
            <a href="#">N</a>
            <a href="#">O</a>
            <a href="#">P</a>
            <a href="#">Q</a>
            <a href="#">R</a>
            <a href="#">S</a>
            <a href="#">T</a>
            <a href="#">U</a>
            <a href="#">V</a>
            <a href="#">W</a>
            <a href="#">X</a>
            <a href="#">Y</a>
            <a href="#">Z</a>
        </div>
    </div>
    <div class="footer-links">
        
        <a href="/credits">Credits</a> |
        <span>Files not stored on this server.</span>
    </div>
    <div class="footer-bottom">
        <span>&copy; <span id="year"></span> AniTeams. All rights reserved.</span>
    </div>
</footer>

<style>/* General Footer Styling */
.footer-container { 
    display: flex; 
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0 50px 0 20px;
}

.footer {
    background: url("footer.jpg") no-repeat center center;
    background-size: cover;
    height: 350px;
    overflow: auto;
    padding-bottom: 30px; /* Adds some space at the bottom */
}

/* Logo Styling */
.logo-link {
    display: inline-block;
}

.logo {
    height: 100px; /* Adjust the size of the logo */
    z-index: 999;
    transition: transform 0.3s ease; /* Animation for hover effect */
}

.logo-link:hover .logo {
    transform: scale(1.05); /* Animation for logo hover */
}

/* Pagination Styling */
.pagination {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: 5px;
}

.pagination a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    transition: background-color 100ms ease-in-out; /* Link hover effect animation */
}

/* Link Hover Effect */
.pagination a:hover {
    background-color: hsl(271, 100%, 65%);
    font-weight: bold;
}

/* Footer Links Styling */
.footer-links {
    text-align: center;
    margin-top: 20px;
}

.footer-links a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Footer Bottom Styling */
.footer-bottom {
    text-align: center;
    margin-top: 20px;
    color: white;
}

/* Copyright Year */
#year {
    font-weight: bold;
}
</style>
 <script>
    document.getElementById("year").textContent = new Date().getFullYear();
</script>
         
        <script>
        const bars = document.querySelector('.bars');
document.getElementById("closemenu").onclick = function(){
    document.getElementById("menu").style.display = "none";
}

// Toggle menu and icon animation
bars.onclick = function(){
    document.getElementById("menu").style.display = "flex";
}
document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("menu").style.display = "none";
});
// Select all elements with the given class names
const startYearSelects = document.querySelectorAll('.start-year, .start-year-2');
startYearSelects.forEach(startYearSelect => {
    for (let year = 2024; year >= 1917; year--) {
        const option = document.createElement('option');
        option.value = year;
        option.textContent = year;
        startYearSelect.appendChild(option);
    }
});
// Month dropdown menu javascript for the filter search
const startMonthSelects = document.querySelectorAll('.start-month, .start-month-2');
const months = [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
];
startMonthSelects.forEach(startMonthSelect => {
    for (let month = 0; month < months.length; month++) {
        const option = document.createElement('option');
        option.value = month + 1;  // Month as numeric value (1-12)
        option.textContent = months[month]; // Month name as text
        startMonthSelect.appendChild(option);
    }
});

const startDaySelects = document.querySelectorAll('.start-day, .start-day-2');
const days = [
    '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
    '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'
];
startDaySelects.forEach(startDaySelect => {
    for (let day = 0; day < days.length; day++) {
        const option = document.createElement('option');
        option.value = days[day];  // Use the day directly
        option.textContent = days[day]; // Display day as text
        startDaySelect.appendChild(option);
    }
});


     </script>
        
  
     <script src="https://kit.fontawesome.com/54a003e4f7.js" crossorigin="anonymous"></script>
                        <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
        
</body>
</html>


===== stylesheet.css =====

/* General Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #000000;
}

}

/* Header Styling */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
}

/* Navbar (contains sidebar toggle) */
.navbar {
    background-color: transparent;
    display: flex;
    align-items: center;
}

/* Sidebar Toggle (Hamburger) */
.bars {
    margin-left: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 101; /* Ensure it’s on top */
    display: flex;
    flex-direction: column;
}

.bar1, .bar2, .bar3 {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: 0.4s;
}

/* Bars transform to X when open */
.bars.open .bar1 {
    transform: rotate(45deg) translate(5px, 5px);
}

.bars.open .bar2 {
    opacity: 0;
}

.bars.open .bar3 {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Header Extras (Magnifying Glass & Login Button) */
.header-extras {
    display: flex;
    align-items: center;
    gap: 15px;
    position: absolute;
    top: 1em;
    right: 1em;
}

/* Magnifying Glass Icon */
.css-icon-search {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid white;
    position: relative;
    border-radius: 100%;
    cursor: pointer;
}

.css-icon-search::before {
    content: "";
    display: inline-block;
    position: absolute;
    right: -7px;
    bottom: -3px;
    background: white;
    width: 10px;
    height: 2px;
    transform: rotate(45deg);
}

/* Login Button */
.login {
    background-color: blue;
    padding: 12px 20px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-size: 15px;
    transition: opacity 0.3s ease;
}

.login:hover {
    opacity: 0.8;
}

.login:active {
    opacity: 0.4;
}

/* Sidebar / Side Menu */
.side-menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    background-color: #2a2c31;
    transform: translateX(-350px); /* Default: hidden */
    overflow-y: auto;
    gap: 1em;
    z-index: 5;
    transition: transform 500ms ease;
    padding: 1em;
}

.side-menu.open {
    transform: translateX(0); /* Visible when open */
}

@media only screen and (max-width: 860px) {
    .side-menu {
        width: 300px;
    }
}

/* Close Button */
.close-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4a4b51;
    border-radius: 20px;
    width: 110px;
    padding: 0.8em 0;
    margin: 2em 0 0 1em;
    line-height: 12px;
    color: #fff;
    font-weight: 500;
    gap: 0.3em;
    cursor: pointer;
}

/* Link Styling */
.nav-list .item a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Maintain the item's original color */
    transition: color 0.3s ease; /* Smooth color transition */
}

.nav-list .item a:hover {
    color: #f0f0f0; /* Hover effect for a slight lightening */
}

/* Sidebar List Styling */
.nav-list {
    display: flex;
    flex-direction: column;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.item {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    padding: 1em;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* Sidebar Item Hover Effect */
.item:hover {
    background255, 255, 255, 0.1); /* Add a subtle background color on hover */
    border-radius: 8px;
}


/* Genre List */
.genre-list {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
}

.genre-item {
    padding: 6px 15px;
    width: 49%;
    margin-right: 1%;
    cursor: pointer;
}

.genre-item:nth-of-type(7n + 1) { color: #d0e6a5; }
.genre-item:nth-of-type(7n + 2) { color: #ffdd95; }
.genre-item:nth-of-type(7n + 3) { color: #fc887b; }
.genre-item:nth-of-type(7n + 4) { color: #ccabda; }
.genre-item:nth-of-type(7n + 5) { color: #abccd8; }
.genre-item:nth-of-type(7n + 6) { color: #d8b2ab; }
.genre-item:nth-of-type(7n) { color: #86e3ce; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .nav-links, .login {
        display: none;
    }

    /* Hide search bar in mobile */
    #search-bar {
        display: none;
    }

    /* Sidebar Menu on Mobile */
    .menu {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 250px;
        background-color: rgba(0, 0, 0, 0.9);
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
    }

    .menu.show {
        transform: translateX(0);
    }
    
    .menu a,
    .menu .login {
        padding: 10px 0;
        font-size: 20px;
        color: white;
        text-align: left;
    }
    
    .menu a:hover {
        color: lightblue;
    }
}


/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Slide section beign */
body {
    background: #000000;
    font-family: 'Montserrat', Arial, sans-serif;
    color: #fff;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
}

/* Global Swiper Styles */
.swiper {
    position: relative;
    display: flex;
    width: 100%;
    height: 600px;
    overflow: hidden;
    z-index: 1;
}

@media screen and (max-width: 1400px) {
    .swiper {
        height: 570px;
    }
}

@media screen and (max-width: 1299px) {
    .swiper {
        height: 500px;
    }
}

@media screen and (max-width: 759px) {
    .swiper {
        height: 350px;
    }
}

/* Ensure all slides are positioned and use opacity for the fade effect */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

/* The currently active slide */
.fade-in {
    opacity: 1;
    z-index: 1;
}

/* The transitioning-out slide */
.fade-out {
    opacity: 0;
    z-index: 0;
}


/* Image Container Styles */
.img-container::before {
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #202125 0, rgba(32, 33, 37, 0.6) 40%, rgba(32, 33, 37, 0) 60%, rgba(32, 33, 37, 0) 80%, #202125 100%);
}

.img-container::after {
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -1px;
    background: linear-gradient(0deg, #202125 0, rgba(32, 33, 37, 0) 50%, #202125 100%);
}

@media screen and (max-width: 759px) {
    .img-container::after {
        background: linear-gradient(0deg, #202125 0, rgba(32, 33, 37, 0) 82%);
    }

    .img-container::before {
        opacity: 0;
    }
}

/* Image Styles */
.img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
}

@media screen and (max-width: 759px) {
    .img {
        opacity: 0.5;
    }
}

/* Content Container Styles */
.content {
    z-index: 1;
    width: 600px;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    color: #cae962;
    left: 2em;
    bottom: 2em;
    padding-bottom: 3em;
    bottom: 0 !important;
}

@media screen and (max-width: 1200px) {
    .content {
        width 50%;
    }
}

@media screen and (max-width: 759px) {
    .content {
        width: 100%;
        padding-right: 100px;
        box-shadow: none;
        background: rgb(0, 0, 0, 0);
    }
}

@media screen and (max-width: 480px) {
    .content {
        padding-right: 10px;
        left: 10px;
    }
}

/* Rank Styles */
.rank {
    color: #cae962;
    font-size: 14px;
    font-family: "Ubuntu", sans-serif;
    font-weight: bolder;
    text-transform: uppercase;
}

@media screen and (max-width: 1200px) {
    .rank {
        font-size: 1px;
    }
}

@media screen and (max-width: 480px) {
    .rank {
        font-size: 10px;
    }
}

/* Title Styles */
.title {
    font-family: "Ubuntu", sans-serif;
    color: #fff;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-size: 50px;
}

@media screen and (max-width: 1200px) {
    .title {
        font-size: 30px;
        line-height: 1.1em;
        -webkit-line-clamp: 2;
    }
}

@media screen and (max-width: 759px) {
    .title {
        font-size: 30px;
        line-height: 1.1em;
        -webkit-line-clamp: 2;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 480px) {
    .title {
        font-size: 25px;
        margin-bottom: 0px;
    }
}

/* Icons Styles */
.icons {
    display: flex;
    gap: 1em;
    font-size: 14px;
    align-items: center;
    margin: 0 1em; /* Add margin to ensure icons do not touch the screen edges */
}

@media screen and (max-width: 759px) {
    .icons {
        display: none;
    }
}

.icon {
    display: flex;
    align-items: center;
    gap: 0.3em;
    color: #fff;
    white-space: nowrap; /* Prevent text from wrapping */
}

.icon-span {
    display: inline-block;
    padding: 3px 4px;
    background: #cae962;
    color: #111;
    border-radius: 5px;
    line-height: 1em;
    font-weight: 600;
    font-size: 12px;
}

/* Description Styles */
.description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "Poppins", sans-serif;
    color: #fff;
    font-size: 16px;
    margin: 2em 0;
}

@media screen and (max-width: 1299px) {
    .description {
        line-height: 1.1em;
        -webkit-line-clamp: 2;
    }
}

@media screen and (max-width: 480px) {
    .description {
        font-size: 13px;
        width: 80%;
    }
}

/* Watch Button Styles */
.watch-btn {
    display: flex;
    align-items: center;
    gap: 1em;
}

@media screen (max-width: 320px) {
    .watch-btn {
        flex-wrap: wrap;
    }
}

.watch-link {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.7rem 1em;
    background-color: #cae962;
    color: #111;
    font-size: 18px;
    border-radius: 30px;
    font-family: "Ubuntu", sans-serif;
    text-decoration: none;
}

@media screen and (max-width: 1200px) {
    .watch-link {
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    .watch-link {
        font-size: 12px;
        padding-inline: 1.2rem;
    }
}

.detail-link {
    display: flex;
    align-items: center;
    padding: 0.7rem 1em;
    background-color: #4a4b51;
    color: #fff;
    gap: 0.3em;
    font-size: 18px;
    border-radius: 30px;
    font-family: "Ubuntu", sans-serif;
    text-decoration: none;
}

@media screen and (max-width: 1200px) {
    .detail-link {
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    .detail-link {
        font-size: 12px;
        padding-inline: 1.2rem;
    }
}

/* Fade In/Out Effects */
.fade {
    display: none;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}


/* Slide section end */
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Trending */ 

.trending {
    display: inline-block;
    font-size: 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: bolder;
}

/* Trending cards */
/* General Styles for the Trending Section */
.card-section {
    width: 100%;
    overflow-x: auto; /* Allow horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scrollbar */
    padding: 20px 0; /* Adjust padding as needed */
}

/* Anime Cards Container */
.anime-cards {
    display: flex;
    width: max-content; /* Allow the width to grow with content */
    gap: 20px; /* Space between cards */
    scroll-behavior: smooth; /* Smooth scrolling */
    flex-wrap: nowrap; /* Prevent wrapping of cards */
    justify-content: flex-start; /* Align cards to the start */
    position: relative; /* Ensure correct positioning */
}

/* Individual Card Styling */
.anime-card {
    background-color: #202125; /* Card background color */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Prevent overflow of content */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Card shadow */
    transition: transform 0.3s ease; /* Transition effect on hover */
    width: 200px; /* Fixed width of each card */
    flex-shrink: 0; /* Prevent cards from shrinking */
    position: relative; /* Relative positioning for inner elements */
    text-align: center; /* Center text in card */
}

/* Hover Effect for Cards */
.anime-card:hover {
    transform: scale(1.05); /* Scale up on hover */
}

/* Card Image Styling */
.anime-card img {
    width: 100%; /* Full width image */
    border-bottom: 2px solid #7354e7; /* Bottom border for the image */
}

/* Description Text Styling */
.description-text {
    color: #FFBADE; /* Description text color */
    font-family: "Poppins", sans-serif; /* Font family */
    font-size: 16px; /* Font size */
    margin: 10px 0; /* Margin above and below text */
}

/* Mobile Responsiveness */
@media screen and (max-width: 480px) {
    .anime-cards {
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
        justify-content: center; /* Center cards */
        gap: 10px; /* Reduce the gap between cards */
    }

    .anime-card {
        width: 40%; /* Make cards smaller on mobile */
        margin-bottom: 10px; /* Margin below each card */
    }

    .description-text {
        font-size: 14px; /* Slightly smaller font for descriptions */
    }
}

/* Scrollbar Styling */
.card-section::-webkit-scrollbar {
    height: 8px; /* Height of the scrollbar */
}

.card-section::-webkit-scrollbar-thumb {
    background-color: #7354e7; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded edges for the thumb */
}

.card-section::-webkit-scrollbar-track {
    background: #121212; /* Color of the scrollbar track */
}

/* Firefox Scrollbar Styling */
.card-section {
    scrollbar-width: thin; /* For Firefox, make scrollbar thin */
    scrollbar-color: #7354e7 #121212; /* Thumb color and track color */
}

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Latest Episodes */
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    width: calc(16.66% - 14px);
    margin: 0 7px 14px;
    background: #2a2c31;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}

.poster {
    position: relative;
    width: 100%;
    padding-bottom: 130%;
    overflow: hidden;
}

.image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.poster:hover .overlay {
    opacity: 1;
}

.info-left, .info-right {
    position: absolute;
    bottom: 10px;
    z-index: 3;
}

.info-left {
    left: 10px;
}

.info-right {
    right: 10px;
}

.btn, .btn-episode {
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 5px;
    background: #fff;
    color: #111;
    margin-right: 4px;
    transition: background 0.3s;
}

.btn:hover, .btn-episode:hover {
    background: #e0e0e0;
}

.btn-episode {
    background: #7bfcfc;
}

.details {
    color: #aaa;
    font-size: 12px;
    padding: 10px;
    border-radius: 0 0 10px 10px;
}

.name {
    color: #fff;
    font-size: 14px;
    margin: 0;
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.3em;
}

/* Play button styling */
.play-button {
    position: absolute;
    width: 40px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* Hide initially */
    transition: opacity 0.5s;
}

.overlay:hover .play-button {
    opacity: 1; /* Show on hover */
}

/* Responsive styles */
@media (max-width: 1024px) {
    .card {
        width: calc(25% - 14px);
    }
}

@media (max-width: 760px) {
    .card {
        width: calc(33% - 14px);
    }
}

@media (max-width: 480px) {
    .card {
        width: calc(50% - 6px);
        margin: 0 3px 6px;
    }
}


===== watch.html =====

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anime Watching Page</title>
  <style>
    /* Dark Theme and Reset */
    body {
      margin: 0;
      font-family: "Poppins", Arial, sans-serif;
      background-color: #121212;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    /* Container Styling */
    #container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 1200px;
      padding: 20px;
    }

    /* Responsive Iframe Container */
    .iframe-container {
      position: relative;
      width: 100%;
      max-width: 1000px;
      padding-top: 56.25%;
      margin-bottom: 30px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    /* Episodes Section */
    #episodes {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 400px;
      max-height: 400px;
      overflow-y: auto;
      padding: 10px;
      border-radius: 10px;
      background-color: #1e1e1e;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    }

    #episodes::-webkit-scrollbar {
      width: 8px;
    }

    #episodes::-webkit-scrollbar-track {
      background-color: #1e1e1e;
    }

    #episodes::-webkit-scrollbar-thumb {
      background-color: #3f3f3f;
      border-radius: 10px;
    }

    .episode-card {
      display: flex;
      align-items: center;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      background-color: #1e1e1e;
      color: #ffffff;
      transition: background-color 0.3s ease;
    }

    .episode-card:nth-child(odd) {
      background-color: #1e1e1e;
    }

    .episode-card:nth-child(even) {
      background-color: #2a2a2a;
    }

    .episode-card:hover {
      background-color: #333333;
    }

    .episode-number {
      font-size: 16px;
      font-weight: bold;
      color:  #2d2d4f;
      margin-right: 10px;
    }

    .episode-title {
      font-size: 14px;
      color: #b3b3b3;
    }

    .filler {
      color: #ff6b6b;
    }

    /* Active Class with Vertical Line */
    .episode-card.active {
      background-color: #2d2d4f;
      border-left: 4px solid #7354e7;
    }
  </style>
    <header>
   <!-- Navigation Bar -->
   <nav class="navbar">
    <!-- Toggle Button for Sidebar -->
    <div class="bars" onclick="toggleMenu()">
     <div class="bar1">
     </div>
     <div class="bar2">
     </div>
     <div class="bar3">
     </div>
    </div>
   </nav>
   <!-- Magnifying Glass Icon and Login Button -->
   <div class="header-extras">
    <div class="css-icon-search" onclick="redirectToPage()">
    </div>
   </div>
<style>/* Header Styling */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
}

/* Navbar (contains sidebar toggle) */
.navbar {
    background-color: transparent;
    display: flex;
    align-items: center;
}

/* Sidebar Toggle (Hamburger) */
.bars {
    margin-left: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 101; /* Ensure it’s on top */
    display: flex;
    flex-direction: column;
}

.bar1, .bar2, .bar3 {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: 0.4s;
}

/* Bars transform to X when open */
.bars.open .bar1 {
    transform: rotate(45deg) translate(5px, 5px);
}

.bars.open .bar2 {
    opacity: 0;
}

.bars.open .bar3 {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Header Extras (Magnifying Glass & Login Button) */
.header-extras {
    display: flex;
    align-items: center;
    gap: 15px;
    position: absolute;
    top: 1em;
    right: 1em;
}

/* Magnifying Glass Icon */
.css-icon-search {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid white;
    position: relative;
    border-radius: 100%;
    cursor: pointer;
}

.css-icon-search::before {
    content: "";
    display: inline-block;
    position: absolute;
    right: -7px;
    bottom: -3px;
    background: white;
    width: 10px;
    height: 2px;
    transform: rotate(45deg);
}

/* Login Button */
.login {
    background-color: blue;
    padding: 12px 20px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-size: 15px;
    transition: opacity 0.3s ease;
}

.login:hover {
    opacity: 0.8;
}

.login:active {
    opacity: 0.4;
}

/* Sidebar / Side Menu */
.side-menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    background-color: #2a2c31;
    transform: translateX(-350px); /* Default: hidden */
    overflow-y: auto;
    gap: 1em;
    z-index: 5;
    transition: transform 500ms ease;
    padding: 1em;
}

.side-menu.open {
    transform: translateX(0); /* Visible when open */
}

@media only screen and (max-width: 860px) {
    .side-menu {
        width: 300px;
    }
}

/* Close Button */
.close-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4a4b51;
    border-radius: 20px;
    width: 110px;
    padding: 0.8em 0;
    margin: 2em 0 0 1em;
    line-height: 12px;
    color: #fff;
    font-weight: 500;
    gap: 0.3em;
    cursor: pointer;
}

/* Link Styling */
.nav-list .item a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Maintain the item's original color */
    transition: color 0.3s ease; /* Smooth color transition */
}

.nav-list .item a:hover {
    color: #f0f0f0; /* Hover effect for a slight lightening */
}

/* Sidebar List Styling */
.nav-list {
    display: flex;
    flex-direction: column;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.item {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    padding: 1em;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* Sidebar Item Hover Effect */
.item:hover {
    background255, 255, 255, 0.1); /* Add a subtle background color on hover */
    border-radius: 8px;
}


/* Genre List */
.genre-list {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
}

.genre-item {
    padding: 6px 15px;
    width: 49%;
    margin-right: 1%;
    cursor: pointer;
}

.genre-item:nth-of-type(7n + 1) { color: #d0e6a5; }
.genre-item:nth-of-type(7n + 2) { color: #ffdd95; }
.genre-item:nth-of-type(7n + 3) { color: #fc887b; }
.genre-item:nth-of-type(7n + 4) { color: #ccabda; }
.genre-item:nth-of-type(7n + 5) { color: #abccd8; }
.genre-item:nth-of-type(7n + 6) { color: #d8b2ab; }
.genre-item:nth-of-type(7n) { color: #86e3ce; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .nav-links, .login {
        display: none;
    }

    /* Hide search bar in mobile */
    #search-bar {
        display: none;
    }

    /* Sidebar Menu on Mobile */
    .menu {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 250px;
        background-color: rgba(0, 0, 0, 0.9);
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 100;
    }

    .menu.show {
        transform: translateX(0);
    }
    
    .menu a,
    .menu .login {
        padding: 10px 0;
        font-size: 20px;
        color: white;
        text-align: left;
    }
    
    .menu a:hover {
        color: lightblue;
    }
}
</style>
    <script>
    // Function to redirect the user to a new page
    function redirectToPage() {
      window.location.href = './search.html'; // Change this URL to your desired destination
    }
  </script>
   
  </header>
  <!-- Sidebar / Side Menu -->
  <aside class="side-menu" id="sideMenu">
   <!-- Close Button for Sidebar -->
   <div class="close-button" onclick="toggleMenu()">
    Close
   </div>
   <!-- Sidebar Items -->
 <ul class="nav-list">
  <li class="item">
    <a href="./index.html">Home</a>
  </li>
  <li class="item">
    <a href="./about.html">About</a>
  </li>
  <li class="item">
    <a href="./contact.html">Contact</a>
  </li>
  <li class="item">
    <a href="./bookmarks.html">Bookmarks</a>
  </li>


    <li class="item">
     Genres
    </li>
    <div class="genre-list" id="genreList">
     <!-- Genres will be populated here by JavaScript -->
    </div>
   </ul>
  </aside>
  <script type="module">
    import api from './config.js';
   // JavaScript to Toggle Sidebar
        function toggleMenu() {
            document.getElementById("sideMenu").classList.toggle("open");
            document.querySelector(".bars").classList.toggle("open");
        }

        // Fetch Genres from API and Populate Sidebar
        async function fetchGenres() {
            try {
                const response = await fetch(api); // Replace with your API URL
                const result = await response.json();
                
                if (result.success && result.data.genres) {
                    const genreList = document.getElementById('genreList');
                    genreList.innerHTML = ''; // Clear any existing content

                    result.data.genres.forEach((genre) => {
                        const genreItem = document.createElement('div');
                        genreItem.classList.add('genre-item');
                        genreItem.textContent = genre;
                        genreList.appendChild(genreItem);
                    });
                } else {
                    console.error("Error: Unable to load genres");
                }
            } catch (error) {
                console.error("Error fetching genres:", error);
            }
        }

        // Load genres on page load
        window.onload = fetchGenres;
  </script>
</head>
<body>
  <div id="container">
    <!-- Anime Viewing Section -->
    <div class="iframe-container">
      <iframe id="animeIframe" src="about:blank" title="Anime Viewer"></iframe>
    </div>
    <div id="episodes"></div>
  </div>

 <script type="module">
        import {details} from './config.js';
        
        // Extract the anime ID from the URL
        const urlParams = new URLSearchParams(window.location.search);
        const animeId = urlParams.get("id") || "defaultAnimeId";

        // Correct API URL for fetching episodes
        const apiUrl = `${details}/${animeId}/episodes`; // Adjust based on your API structure

        // Fetch and populate episodes
        fetch(apiUrl)
           .then((response) => {
                if (!response.ok) {
                    throw new Error("Network response was not ok");
                }
                return response.json();
            })
            .then((data) => {
                if (data.success && data.data && Array.isArray(data.data.episodes)) {
                    const episodesContainer = document.getElementById("episodes");
                    data.data.episodes.forEach((episode, index) => {
                        const episodeCard = document.createElement("div");
                        episodeCard.className = "episode-card";
                        episodeCard.innerHTML = `
                            <div class="episode-number">${episode.number}</div>
                            <div class="episode-title">${episode.title} ${episode.isFiller ? '<span class="filler">(Filler)</span>' : ""}</div>
                        `;

                        // Set active class on click
                        episodeCard.onclick = () => {
                            const iframe = document.getElementById("animeIframe");
                            iframe.src = `./player.html?id=${episode.episodeId}`;
                            document.querySelectorAll(".episode-card").forEach(card => card.classList.remove("active"));
                            episodeCard.classList.add("active");
                        };

                        episodesContainer.appendChild(episodeCard);

                        // Automatically set the first episode as active
                        if (index === 0) {
                            episodeCard.click();
                        }
                    });
                } else {
                    console.error("Failed to load episo: Invalid data format", data);
                }
            })
            .catch((error) => console.error("Error fetching data:", error));
    </script>
  <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
</body>
</html>


===== read.html =====

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Comic Book Reader</title>
  <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #1e1e1e;
      color: #fff;
      overflow: hidden;
    }

    #comic-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

    img {
      max-width: 100%;
      max-height: 80%;
      margin: auto;
      opacity: 0;
      transition: opacity 0.5s;
    }

    img.loaded {
      opacity: 1;
    }

    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-top: 4px solid #fff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      position: absolute;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    #controls-container {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.8);
      padding: 10px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      transition: opacity 0.5s;
      z-index: 100;
    }

    button {
      background: #555;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: background 0.3s;
    }

    button:hover {
      background: #777;
    }

    #progress-bar {
      display: flex;
      margin: 10px 0;
      width: 90%;
      height: 5px;
      background: #444;
      border-radius: 3px;
      overflow: hidden;
    }

    .progress-chunk {
      height: 100%;
      background: #6a0dad;
      transition: width 0.3s;
    }

    #floating-menu {
      position: fixed;
      top: 10px;
      right: 10px;
      background: rgba(0, 0, 0, 0.8);
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      z-index: 100;
    }

    #chapter-list {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: rgba(0, 0, 0, 0.9);
      padding: 10px;
      border-radius: 10px;
      max-height: 300px;
      overflow-y: auto;
    }

    #chapter-list button {
      background: #333;
      color: #fff;
      padding: 8px;
      border-radius: 5px;
      text-align: left;
    }

    #chapter-list button:hover {
      background: #555;
    }

    @media (max-width: 768px) {
      button {
        font-size: 14px;
        padding: 8px 16px;
      }

      #floating-menu button {
        padding: 8px;
      }
    }
  </style>
</head>
<body>
  <div id="comic-container">
    <div class="spinner" id="loading-spinner"></div>
    <img id="comic-image" data-src="" alt="Comic Page">
  </div>

  <div id="controls-container">
    <button id="prev-btn">« Prev</button>
    <div id="progress-bar">
      <div class="progress-chunk" style="width: 0%;"></div>
    </div>
    <button id="next-btn">Next »</button>
  </div>

  <div id="floating-menu">
    <button id="fullscreen-btn">Fullscreen</button>
    <button id="toggle-menu">Chapters</button>
    <div id="chapter-list"></div>
  </div>

  <script src="read.js">           
  </script>
</body>
  </html>
      


===== read.js =====

// Fetch the comicId from the URL parameters
const urlParams = new URLSearchParams(window.location.search);
const comicId = urlParams.get('id'); // Get the 'id' parameter from the URL

let currentPage = 1;
let totalPages = 0;
let pages = [];

const imageElement = document.getElementById('comic-image');
const loadingSpinner = document.getElementById('loading-spinner');
const progressBarChunk = document.querySelector('.progress-chunk');
const chapterList = document.getElementById('chapter-list');
const floatingMenu = document.getElementById('floating-menu');

document.getElementById('toggle-menu').addEventListener('click', (event) => {
  const isVisible = chapterList.style.display === 'flex';
  chapterList.style.display = isVisible ? 'none' : 'flex';
  event.stopPropagation(); // Prevent the click from propagating to the body
});

document.body.addEventListener('click', (event) => {
  if (!floatingMenu.contains(event.target)) {
    chapterList.style.display = 'none';
  }
});

const fullscreenButton = document.getElementById('fullscreen-btn');
fullscreenButton.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

function showLoading() {
  loadingSpinner.style.display = 'block';
  imageElement.classList.remove('loaded');
}

function hideLoading() {
  loadingSpinner.style.display = 'none';
  imageElement.classList.add('loaded');
}

async function fetchChapters() {
  try {
    const response = await fetch(`https://api-consumet-org-gamma.vercel.app/manga/mangadex/info/${comicId}`);
    const data = await response.json();

    if (data.chapters && Array.isArray(data.chapters)) {
      console.log('Chapters fetched successfully');
      populateChapters(data.chapters);
    } else {
      console.error('Error: API response does not contain a "chapters" array.');
    }
  } catch (error) {
    console.error('Error fetching chapters:', error);
  }
}

function populateChapters(chapters) {
  chapters.forEach((chapter, index) => {
    const chapterButton = document.createElement('button');
    chapterButton.textContent = `Chapter ${index + 1}`;
    chapterButton.addEventListener('click', () => fetchPagesForChapter(chapter.id));
    chapterList.appendChild(chapterButton);
  });
}

async function fetchPagesForChapter(chapterId) {
  try {
    const response = await fetch(`https://api-consumet-org-gamma.vercel.app/manga/mangadex/read/${chapterId}`);
    pages = await response.json();
    totalPages = pages.length;
    preloadImages(pages.map(page => page.img));
    displayPages(pages);
  } catch (error) {
    console.error('Error fetching pages:', error);
  }
}

function displayPages(pages) {
  currentPage = 1;
  updateReader();
}

function updateReader() {
  if (currentPage > 0 && currentPage <= totalPages) {
    showLoading();
    imageElement.onload = hideLoading;
    imageElement.src = pages[currentPage - 1].img;
    updateProgressBar();
  }
}

function updateProgressBar() {
  const progress = (currentPage / totalPages) * 100;
  progressBarChunk.style.width = `${progress}%`;
}

function preloadImages(pageUrls) {
  pageUrls.forEach((url) => {
    const img = new Image();
    img.src = url;
  });
}

document.getElementById('prev-btn').addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    updateReader();
  }
});

document.getElementById('next-btn').addEventListener('click', () => {
  if (currentPage < totalPages) {
    currentPage++;
    updateReader();
  }
});

// Call fetchChapters to load chapters based on the comicId from the URL
if (comicId) {
  fetchChapters();
} else {
  console.error('Error: comicId is not provided in the URL parameters.');
}