Spaces:

cheaptoner2016
/

cinemagic-voyager

Running

App Files Files Community

cheaptoner2016 commited on Sep 27, 2025

Commit

0d4b1b9

verified ·

1 Parent(s): cbdb449

make this good

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +651 -19

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Cinemagic Voyager
-emoji: 📚
-colorFrom: green
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CineMagic Voyager 🎬✨
+colorFrom: yellow
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,651 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MovieDB - Full Screen Media Banner</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            height: 100vh;
+            background-color: #0a0a0a;
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: center;
+            position: relative;
+            overflow: hidden;
+            transition: background-image 1.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        body::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+                135deg,
+                rgba(0, 0, 0, 0.85) 0%,
+                rgba(0, 0, 0, 0.7) 30%,
+                rgba(0, 0, 0, 0.4) 60%,
+                rgba(0, 0, 0, 0.2) 100%
+            );
+            z-index: 1;
+        }
+        #movie-container {
+            position: relative;
+            z-index: 2;
+            height: 100%;
+            opacity: 0;
+            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+            display: flex;
+            align-items: center;
+            padding: 0 8%;
+        }
+        .media-content {
+            max-width: 65%;
+            color: white;
+            text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
+        }
+        .media-type-badge {
+            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
+            color: #1a1a1a;
+            padding: 0.5rem 1.2rem;
+            border-radius: 25px;
+            font-size: 0.85rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            display: inline-block;
+            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
+            letter-spacing: 0.5px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .media-title {
+            font-size: clamp(2.5rem, 5vw, 5rem);
+            font-weight: 800;
+            margin-bottom: 1.5rem;
+            line-height: 1.05;
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
+            padding: 1rem 1.5rem;
+            border-radius: 16px;
+            display: inline-block;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+        .text-content {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .text-content.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .media-subtitle {
+            font-size: clamp(1rem, 1.4vw, 1.4rem);
+            margin-bottom: 1.5rem;
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
+            padding: 0.8rem 1.2rem;
+            border-radius: 12px;
+            display: inline-block;
+            backdrop-filter: blur(8px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            line-height: 1.4;
+        }
+        .media-rating {
+            margin-bottom: 2rem;
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
+            padding: 0.8rem 1.2rem;
+            border-radius: 12px;
+            display: inline-block;
+            backdrop-filter: blur(8px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .media-overview-container {
+            position: absolute;
+            bottom: 3rem;
+            right: 3rem;
+            max-width: 550px;
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
+            padding: 2rem;
+            border-radius: 20px;
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            opacity: 0;
+            transform: translateY(30px) scale(0.95);
+            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+        }
+        .media-overview-container.visible {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+        .overview-title {
+            font-size: 1.4rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            color: #ffd700;
+            text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
+            letter-spacing: 0.5px;
+        }
+        .media-overview {
+            font-size: 1.1rem;
+            line-height: 1.6;
+            color: #f0f0f0;
+            max-height: 220px;
+            overflow-y: auto;
+            padding-right: 1rem;
+            font-weight: 400;
+        }
+        .media-overview::-webkit-scrollbar {
+            width: 6px;
+        }
+        .media-overview::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 3px;
+        }
+        .media-overview::-webkit-scrollbar-thumb {
+            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
+            border-radius: 3px;
+        }
+        .media-overview::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
+        }
+        .loading-indicator {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 1.8rem;
+            font-weight: 600;
+            z-index: 3;
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
+            padding: 1.5rem 2.5rem;
+            border-radius: 15px;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+        .progress-bar {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.15);
+            z-index: 4;
+            display: none;
+            overflow: hidden;
+        }
+        .progress-bar-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
+            width: 0%;
+            transition: width 5s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+        }
+        .progress-bar-fill::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+            animation: shimmer 2s infinite;
+        }
+        @keyframes shimmer {
+            0% { left: -100%; }
+            100% { left: 100%; }
+        }
+        .image-loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 1.2rem;
+            font-weight: 500;
+            z-index: 3;
+            display: none;
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
+            padding: 1rem 2rem;
+            border-radius: 12px;
+            backdrop-filter: blur(8px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+@media (max-width: 768px) {
+            .media-content {
+                max-width: 90%;
+            }
+            .media-overview-container {
+                position: relative;
+                bottom: auto;
+                right: auto;
+                max-width: 100%;
+                margin-top: 2rem;
+            }
+            #movie-container {
+                padding: 2rem 5%;
+                align-items: flex-start;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="loading-indicator" id="loading">Loading media...</div>
+    <div class="image-loading" id="image-loading">Loading image...</div>
+    <div class="progress-bar" id="progress-bar">
+        <div class="progress-bar-fill" id="progress-fill"></div>
+    </div>
+    <div id="movie-container">
+        <div class="media-content">
+            <div class="media-type-badge" id="media-type-badge"></div>
+            <h1 id="media-title" class="media-title"></h1>
+            <div class="text-content" id="text-content">
+                <p id="media-subtitle" class="media-subtitle"></p>
+                <div class="media-rating">
+                    <rating-bar id="rating-bar"></rating-bar>
+                </div>
+            </div>
+        </div>
+        <div class="media-overview-container" id="overview-container">
+            <div class="overview-title">Overview</div>
+            <div id="media-overview" class="media-overview"></div>
+        </div>
+    </div>
+    <script>
+        class MediaBanner {
+            constructor() {
+                this.apiKey = '6b8e3eaa1a03ebb45642e9531d8a76d2';
+                this.currentIndex = 0;
+                this.mediaItems = [];
+                this.nextImage = null;
+                this.totalPages = 3;
+                this.currentPage = 1;
+                this.textTimer = null;
+                this.elements = {
+                    container: document.getElementById('movie-container'),
+                    loading: document.getElementById('loading'),
+                    imageLoading: document.getElementById('image-loading'),
+                    mediaTypeBadge: document.getElementById('media-type-badge'),
+                    title: document.getElementById('media-title'),
+                    subtitle: document.getElementById('media-subtitle'),
+                    overview: document.getElementById('media-overview'),
+                    ratingBar: document.getElementById('rating-bar'),
+                    textContent: document.getElementById('text-content'),
+                    overviewContainer: document.getElementById('overview-container'),
+                    progressBar: document.getElementById('progress-bar'),
+                    progressFill: document.getElementById('progress-fill')
+                };
+                this.init();
+            }
+            async init() {
+                try {
+                    await this.fetchMixedMedia();
+                    this.elements.loading.style.display = 'none';
+                    // Start with first media item
+                    await this.updateMediaInfo();
+                    // Set interval for subsequent updates
+                    setInterval(() => this.updateMediaInfo(), 15000);
+                } catch (error) {
+                    console.error('Initialization error:', error);
+                    this.elements.loading.textContent = 'Error loading media';
+                }
+            }
+            async fetchMixedMedia() {
+                // Fetch both movies and TV shows, then mix them together
+                const [movies, tvShows] = await Promise.all([
+                    this.fetchMovies(),
+                    this.fetchTVShows()
+                ]);
+                // Shuffle and mix the arrays
+                this.mediaItems = this.shuffleArray([...movies, ...tvShows]);
+                console.log(`Loaded ${movies.length} movies and ${tvShows.length} TV shows`);
+            }
+            async fetchMovies() {
+                const movies = [];
+                let page = 1;
+                while (page <= this.totalPages) {
+                    try {
+                        const response = await fetch(
+                            `https://api.themoviedb.org/3/trending/movie/week?api_key=${this.apiKey}&page=${page}&sort_by=vote_average.desc&language=en-GB`
+                        );
+                        const data = await response.json();
+                        movies.push(...data.results.map(movie => ({
+                            id: movie.id,
+                            type: 'movie',
+                            title: movie.title,
+                            backdrop_path: movie.backdrop_path,
+                            poster_path: movie.poster_path
+                        })));
+                        page++;
+                    } catch (error) {
+                        console.error('Error fetching movies:', error);
+                        break;
+                    }
+                }
+                return movies;
+            }
+            async fetchTVShows() {
+                const tvShows = [];
+                let page = 1;
+                while (page <= this.totalPages) {
+                    try {
+                        const response = await fetch(
+                            `https://api.themoviedb.org/3/trending/tv/week?api_key=${this.apiKey}&page=${page}&sort_by=vote_average.desc&language=en-GB`
+                        );
+                        const data = await response.json();
+                        tvShows.push(...data.results.map(tv => ({
+                            id: tv.id,
+                            type: 'tv',
+                            title: tv.name,
+                            backdrop_path: tv.backdrop_path,
+                            poster_path: tv.poster_path
+                        })));
+                        page++;
+                    } catch (error) {
+                        console.error('Error fetching TV shows:', error);
+                        break;
+                    }
+                }
+                return tvShows;
+            }
+            async preloadNextImage() {
+                if (this.mediaItems.length === 0) return;
+                const nextIndex = (this.currentIndex + 1) % this.mediaItems.length;
+                const nextMedia = this.mediaItems[nextIndex];
+                try {
+                    const response = await fetch(
+                        `https://api.themoviedb.org/3/${nextMedia.type}/${nextMedia.id}?api_key=${this.apiKey}&language=en-GB`
+                    );
+                    const data = await response.json();
+                    this.nextImage = new Image();
+                    this.nextImage.src = `https://image.tmdb.org/t/p/original${data.backdrop_path || data.poster_path}`;
+                } catch (error) {
+                    console.error('Error preloading next image:', error);
+                }
+            }
+            shuffleArray(array) {
+                for (let i = array.length - 1; i > 0; i--) {
+                    const j = Math.floor(Math.random() * (i + 1));
+                    [array[i], array[j]] = [array[j], array[i]];
+                }
+                return array;
+            }
+            async updateMediaInfo() {
+                if (this.mediaItems.length === 0) return;
+                const mediaItem = this.mediaItems[this.currentIndex];
+                try {
+                    // Hide text content immediately when starting new media
+                    this.hideTextContent();
+                    // Show image loading indicator
+                    this.elements.imageLoading.style.display = 'block';
+                    const response = await fetch(
+                        `https://api.themoviedb.org/3/${mediaItem.type}/${mediaItem.id}?api_key=${this.apiKey}&language=en-GB`
+                    );
+                    const data = await response.json();
+                    // Load the image first and wait for it to load
+                    await this.loadBackgroundImage(data);
+                    // Hide image loading indicator
+                    this.elements.imageLoading.style.display = 'none';
+                    this.elements.container.style.opacity = '0';
+                    setTimeout(() => {
+                        this.updateDOM(data, mediaItem.type);
+                        this.elements.container.style.opacity = '1';
+                        // Start the 5-second delay for text (only after image is loaded)
+                        this.startTextDelay();
+                        this.currentIndex = (this.currentIndex + 1) % this.mediaItems.length;
+                        this.preloadNextImage();
+                    }, 500);
+                } catch (error) {
+                    console.error('Error updating media info:', error);
+                    this.elements.imageLoading.style.display = 'none';
+                }
+            }
+            loadBackgroundImage(mediaData) {
+                return new Promise((resolve, reject) => {
+                    const imagePath = `https://image.tmdb.org/t/p/original${mediaData.backdrop_path || mediaData.poster_path}`;
+                    const img = new Image();
+                    img.onload = () => {
+                        console.log('Background image loaded successfully');
+                        document.body.style.backgroundImage = `url('${imagePath}')`;
+                        resolve();
+                    };
+                    img.onerror = () => {
+                        console.log('Background image failed to load');
+                        reject(new Error('Image loading failed'));
+                    };
+                    img.src = imagePath;
+                });
+            }
+            updateDOM(mediaData, mediaType) {
+                // Background image is already loaded at this point
+                // Update media type badge
+                this.elements.mediaTypeBadge.textContent = mediaType === 'movie' ? '🎬 MOVIE' : '📺 TV SERIES';
+                // Update title with year
+                const releaseYear = mediaType === 'movie'
+                    ? new Date(mediaData.release_date).getFullYear()
+                    : new Date(mediaData.first_air_date).getFullYear();
+                const title = mediaType === 'movie' ? mediaData.title : mediaData.name;
+                this.elements.title.textContent = `${title} (${releaseYear})`;
+                // Update subtitle based on media type
+                const genres = mediaData.genres.map(genre => `🎬 ${genre.name}`).join(' ');
+                let subtitle = '';
+                if (mediaType === 'movie') {
+                    const countries = mediaData.production_companies && mediaData.production_companies.length > 0
+                        ? [...new Set(mediaData.production_companies.map(comp => comp.origin_country).filter(Boolean))].join(', ')
+                        : 'Unknown';
+                    const hours = Math.floor(mediaData.runtime / 60);
+                    const minutes = mediaData.runtime % 60;
+                    subtitle = `📀 ${mediaData.release_date} (${countries}) | ${genres} | 🕝 ${hours}h ${minutes}m`;
+                } else {
+                    const countries = mediaData.production_companies && mediaData.production_companies.length > 0
+                        ? [...new Set(mediaData.production_companies.map(comp => comp.origin_country).filter(Boolean))].join(', ')
+                        : 'Unknown';
+                    const seasons = mediaData.number_of_seasons;
+                    const episodes = mediaData.number_of_episodes;
+                    subtitle = `📺 ${mediaData.first_air_date} (${countries}) | ${genres} | 📊 ${seasons} seasons, ${episodes} episodes`;
+                }
+                this.elements.subtitle.textContent = subtitle;
+                // Update rating
+                this.elements.ratingBar.setAttribute('value', mediaData.vote_average);
+                // Update overview
+                this.elements.overview.textContent = mediaData.overview;
+            }
+            hideTextContent() {
+                // Clear any existing timer
+                if (this.textTimer) {
+                    clearTimeout(this.textTimer);
+                    this.textTimer = null;
+                }
+                // Hide text content and overview
+                this.elements.textContent.classList.remove('visible');
+                this.elements.overviewContainer.classList.remove('visible');
+                // Hide and reset progress bar
+                this.elements.progressBar.style.display = 'none';
+                this.elements.progressFill.style.width = '0%';
+            }
+            startTextDelay() {
+                // Show progress bar (only after image is loaded)
+                this.elements.progressBar.style.display = 'block';
+                // Reset and start progress animation
+                this.elements.progressFill.style.transition = 'none';
+                this.elements.progressFill.style.width = '0%';
+                setTimeout(() => {
+                    this.elements.progressFill.style.transition = 'width 5s linear';
+                    this.elements.progressFill.style.width = '100%';
+                }, 10);
+                // Set timer to show text after 5 seconds
+                this.textTimer = setTimeout(() => {
+                    this.showTextContent();
+                }, 5000);
+            }
+            showTextContent() {
+                this.elements.textContent.classList.add('visible');
+                this.elements.overviewContainer.classList.add('visible');
+                // Hide progress bar after a short delay
+                setTimeout(() => {
+                    this.elements.progressBar.style.display = 'none';
+                }, 500);
+            }
+        }
+        // Custom rating bar element
+        customElements.define("rating-bar", class RatingBar extends HTMLElement {
+            constructor() {
+                super();
+                this.attachShadow({ mode: "open" });
+                this.maxValue = 10;
+            }
+            static get observedAttributes() {
+                return ["value"];
+            }
+            attributeChangedCallback(name, oldValue, newValue) {
+                if (name === "value") {
+                    this.render();
+                }
+            }
+            connectedCallback() {
+                this.render();
+            }
+            render() {
+                const value = parseFloat(this.getAttribute("value")) || 0;
+                const percentage = (value / this.maxValue) * 100;
+                this.shadowRoot.innerHTML = `
+                    <style>
+                        .rating-container {
+                            display: flex;
+                            align-items: center;
+                            gap: 10px;
+                            font-family: Arial, sans-serif;
+                        }
+                        .stars {
+                            display: flex;
+                            position: relative;
+                        }
+                        .stars-background {
+                            color: #666;
+                        }
+                        .stars-foreground {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            color: #ffd700;
+                            overflow: hidden;
+                            width: ${percentage}%;
+                        }
+                        .rating-value {
+                            color: white;
+                            font-weight: bold;
+                            font-size: 1.1rem;
+                        }
+                    </style>
+                    <div class="rating-container">
+                        <div class="stars">
+                            <div class="stars-background">★★★★★★★★★★</div>
+                            <div class="stars-foreground">★★★★★★★★★★</div>
+                        </div>
+                        <span class="rating-value">${value.toFixed(1)}</span>
+                    </div>
+                `;
+            }
+        });
+        // Initialize the media banner when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new MediaBanner();
+        });
+    </script>
+</body>
+</html>