Spaces:

docto41
/

cin

Running

App Files Files Community

docto41 commited on May 21, 2025

Commit

a52bb2d

verified ·

1 Parent(s): 2a5a077

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +518 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Cin
-emoji: 😻
-colorFrom: green
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: cin
+emoji: 🐳
+colorFrom: red
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,518 @@
-<!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="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tableau de Bord Cinéma</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .movie-card:hover .movie-overlay {
+            opacity: 1;
+        }
+        .movie-overlay {
+            transition: opacity 0.3s ease;
+        }
+        .skeleton {
+            animation: pulse 2s infinite ease-in-out;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 0.6; }
+            50% { opacity: 0.3; }
+        }
+        .server-btn {
+            transition: all 0.3s ease;
+        }
+        .server-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .player-container {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.9);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        .player-wrapper {
+            width: 80%;
+            max-width: 1200px;
+            position: relative;
+        }
+        .close-player {
+            position: absolute;
+            top: -40px;
+            right: 0;
+            color: white;
+            font-size: 24px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-10">
+            <div>
+                <h1 class="text-3xl font-bold text-indigo-400">CinéDashboard</h1>
+                <p class="text-gray-400">Votre tableau de bord cinématographique</p>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="relative">
+                    <input type="text" placeholder="Rechercher un film..." class="bg-gray-800 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-64">
+                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+                </div>
+                <div class="h-10 w-10 rounded-full bg-indigo-600 flex items-center justify-center">
+                    <i class="fas fa-user"></i>
+                </div>
+            </div>
+        </header>
+        <!-- Stats -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-10">
+            <div class="bg-gray-800 rounded-lg p-6 flex items-center">
+                <div class="bg-indigo-600 p-3 rounded-full mr-4">
+                    <i class="fas fa-film text-white"></i>
+                </div>
+                <div>
+                    <p class="text-gray-400">Films chargés</p>
+                    <h3 class="text-2xl font-bold" id="movies-count">0</h3>
+                </div>
+            </div>
+            <div class="bg-gray-800 rounded-lg p-6 flex items-center">
+                <div class="bg-purple-600 p-3 rounded-full mr-4">
+                    <i class="fas fa-star text-white"></i>
+                </div>
+                <div>
+                    <p class="text-gray-400">Note moyenne</p>
+                    <h3 class="text-2xl font-bold" id="avg-rating">0</h3>
+                </div>
+            </div>
+            <div class="bg-gray-800 rounded-lg p-6 flex items-center">
+                <div class="bg-green-600 p-3 rounded-full mr-4">
+                    <i class="fas fa-calendar text-white"></i>
+                </div>
+                <div>
+                    <p class="text-gray-400">Dernière MAJ</p>
+                    <h3 class="text-2xl font-bold" id="last-update">Aujourd'hui</h3>
+                </div>
+            </div>
+            <div class="bg-gray-800 rounded-lg p-6 flex items-center">
+                <div class="bg-red-600 p-3 rounded-full mr-4">
+                    <i class="fas fa-fire text-white"></i>
+                </div>
+                <div>
+                    <p class="text-gray-400">Tendance</p>
+                    <h3 class="text-2xl font-bold" id="trending">0</h3>
+                </div>
+            </div>
+        </div>
+        <!-- Filters -->
+        <div class="flex flex-wrap items-center justify-between mb-8 bg-gray-800 p-4 rounded-lg">
+            <div class="flex space-x-4 mb-4 md:mb-0">
+                <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition" id="filter-popular">
+                    Populaires
+                </button>
+                <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg transition" id="filter-top">
+                    Top Rated
+                </button>
+                <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg transition" id="filter-upcoming">
+                    Prochainement
+                </button>
+            </div>
+            <div class="flex items-center">
+                <label for="year-filter" class="mr-2 text-gray-400">Année:</label>
+                <select id="year-filter" class="bg-gray-700 rounded px-3 py-2 focus:outline-none">
+                    <option value="all">Toutes</option>
+                    <!-- Years will be populated by JS -->
+                </select>
+            </div>
+        </div>
+        <!-- Movies Grid -->
+        <div class="mb-10">
+            <h2 class="text-2xl font-bold mb-6 flex items-center">
+                <i class="fas fa-fire text-red-500 mr-2"></i>
+                <span id="section-title">Films populaires</span>
+            </h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6" id="movies-grid">
+                <!-- Skeleton loading -->
+                <div class="skeleton bg-gray-800 rounded-lg h-96"></div>
+                <div class="skeleton bg-gray-800 rounded-lg h-96"></div>
+                <div class="skeleton bg-gray-800 rounded-lg h-96"></div>
+                <div class="skeleton bg-gray-800 rounded-lg h-96"></div>
+                <div class="skeleton bg-gray-800 rounded-lg h-96"></div>
+            </div>
+            <div class="flex justify-center mt-8">
+                <button id="load-more" class="bg-indigo-600 hover:bg-indigo-700 px-6 py-3 rounded-lg transition font-medium">
+                    Charger plus de films
+                </button>
+            </div>
+        </div>
+        <!-- Player Container (hidden by default) -->
+        <div class="player-container" id="player-container">
+            <div class="player-wrapper">
+                <div class="close-player" id="close-player">
+                    <i class="fas fa-times"></i>
+                </div>
+                <iframe id="movie-player" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div>
+        <!-- Footer -->
+        <footer class="border-t border-gray-800 pt-6 mt-10">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <h2 class="text-xl font-bold text-indigo-400">CinéDashboard</h2>
+                    <p class="text-gray-400">Powered by TMDb API</p>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
+                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook"></i></a>
+                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
+                    <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a>
+                </div>
+            </div>
+            <p class="text-center text-gray-500 mt-6 text-sm">© 2023 CinéDashboard. Tous droits réservés.</p>
+        </footer>
+    </div>
+    <script>
+        // Configuration
+        const API_KEY = 'fb437b10727a5a4eb8d9134e29c82ae0';
+        const BASE_URL = 'https://api.themoviedb.org/3';
+        const STREAMING_SERVERS = {
+            'server1': { name: 'Serveur Premium', icon: 'fas fa-bolt', color: 'bg-purple-600' },
+            'server2': { name: 'Serveur Rapide', icon: 'fas fa-tachometer-alt', color: 'bg-blue-600' },
+            'server3': { name: 'Serveur HD', icon: 'fas fa-high-definition', color: 'bg-green-600' },
+            'server4': { name: 'Serveur Backup', icon: 'fas fa-shield-alt', color: 'bg-yellow-600' }
+        };
+        let currentPage = 1;
+        let currentFilter = 'popular';
+        let currentYear = 'all';
+        let isLoading = false;
+        // DOM Elements
+        const moviesGrid = document.getElementById('movies-grid');
+        const loadMoreBtn = document.getElementById('load-more');
+        const moviesCount = document.getElementById('movies-count');
+        const avgRating = document.getElementById('avg-rating');
+        const lastUpdate = document.getElementById('last-update');
+        const trending = document.getElementById('trending');
+        const sectionTitle = document.getElementById('section-title');
+        const yearFilter = document.getElementById('year-filter');
+        const playerContainer = document.getElementById('player-container');
+        const moviePlayer = document.getElementById('movie-player');
+        const closePlayer = document.getElementById('close-player');
+        // Filter buttons
+        const filterPopular = document.getElementById('filter-popular');
+        const filterTop = document.getElementById('filter-top');
+        const filterUpcoming = document.getElementById('filter-upcoming');
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            // Set current date
+            const today = new Date();
+            lastUpdate.textContent = today.toLocaleDateString('fr-FR');
+            // Populate year filter
+            populateYearFilter();
+            // Load initial movies
+            loadMovies();
+            // Event listeners
+            loadMoreBtn.addEventListener('click', loadMoreMovies);
+            filterPopular.addEventListener('click', () => {
+                changeFilter('popular', 'Films populaires');
+            });
+            filterTop.addEventListener('click', () => {
+                changeFilter('top_rated', 'Top Rated');
+            });
+            filterUpcoming.addEventListener('click', () => {
+                changeFilter('upcoming', 'Prochainement');
+            });
+            yearFilter.addEventListener('change', (e) => {
+                currentYear = e.target.value;
+                currentPage = 1;
+                moviesGrid.innerHTML = createSkeletons(5);
+                loadMovies();
+            });
+            // Player events
+            closePlayer.addEventListener('click', () => {
+                playerContainer.style.display = 'none';
+                moviePlayer.src = '';
+            });
+        });
+        // Functions
+        function populateYearFilter() {
+            const currentYear = new Date().getFullYear();
+            for (let year = currentYear; year >= 2000; year--) {
+                const option = document.createElement('option');
+                option.value = year;
+                option.textContent = year;
+                yearFilter.appendChild(option);
+            }
+        }
+        function changeFilter(filter, title) {
+            currentFilter = filter;
+            currentPage = 1;
+            sectionTitle.textContent = title;
+            // Update active button
+            document.querySelectorAll('#filters button').forEach(btn => {
+                btn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
+                btn.classList.add('bg-gray-700', 'hover:bg-gray-600');
+            });
+            event.target.classList.remove('bg-gray-700', 'hover:bg-gray-600');
+            event.target.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
+            // Clear and reload movies
+            moviesGrid.innerHTML = createSkeletons(5);
+            loadMovies();
+        }
+        function createSkeletons(count) {
+            let skeletons = '';
+            for (let i = 0; i < count; i++) {
+                skeletons += `<div class="skeleton bg-gray-800 rounded-lg h-96"></div>`;
+            }
+            return skeletons;
+        }
+        async function loadMovies() {
+            if (isLoading) return;
+            isLoading = true;
+            loadMoreBtn.disabled = true;
+            loadMoreBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Chargement...';
+            try {
+                let url = `${BASE_URL}/movie/${currentFilter}?api_key=${API_KEY}&page=${currentPage}&language=fr-FR`;
+                if (currentYear !== 'all') {
+                    url += `&primary_release_year=${currentYear}`;
+                }
+                const response = await fetch(url);
+                const data = await response.json();
+                if (currentPage === 1) {
+                    moviesGrid.innerHTML = '';
+                    // Update stats
+                    moviesCount.textContent = data.total_results;
+                    trending.textContent = data.total_results > 1000 ? 'Élevée' : 'Moyenne';
+                }
+                displayMovies(data.results);
+                // Calculate average rating
+                if (currentPage === 1) {
+                    const ratings = data.results.map(movie => movie.vote_average);
+                    const average = (ratings.reduce((a, b) => a + b, 0) / ratings.length).toFixed(1);
+                    avgRating.textContent = average;
+                }
+                currentPage++;
+                // Hide load more button if we've reached the end
+                if (currentPage > data.total_pages) {
+                    loadMoreBtn.style.display = 'none';
+                } else {
+                    loadMoreBtn.style.display = 'flex';
+                }
+            } catch (error) {
+                console.error('Error fetching movies:', error);
+                moviesGrid.innerHTML = `
+                    <div class="col-span-full text-center py-10">
+                        <i class="fas fa-exclamation-triangle text-red-500 text-4xl mb-4"></i>
+                        <h3 class="text-xl font-bold">Erreur de chargement</h3>
+                        <p class="text-gray-400">Impossible de charger les films. Veuillez réessayer.</p>
+                    </div>
+                `;
+            } finally {
+                isLoading = false;
+                loadMoreBtn.disabled = false;
+                loadMoreBtn.innerHTML = 'Charger plus de films';
+            }
+        }
+        function loadMoreMovies() {
+            loadMovies();
+        }
+        function displayMovies(movies) {
+            movies.forEach(movie => {
+                const movieCard = document.createElement('div');
+                movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition relative';
+                movieCard.innerHTML = `
+                    <div class="relative h-80 overflow-hidden">
+                        <img
+                            src="${movie.poster_path ? `https://image.tmdb.org/t/p/w500${movie.poster_path}` : 'https://via.placeholder.com/500x750?text=No+Image'}"
+                            alt="${movie.title}"
+                            class="w-full h-full object-cover"
+                            onerror="this.src='https://via.placeholder.com/500x750?text=No+Image'"
+                        >
+                        <div class="movie-overlay absolute inset-0 bg-black bg-opacity-70 opacity-0 flex flex-col justify-between p-4">
+                            <div class="flex justify-between items-start">
+                                <span class="bg-indigo-600 text-white text-xs font-bold px-2 py-1 rounded">
+                                    ${movie.release_date ? movie.release_date.split('-')[0] : 'N/A'}
+                                </span>
+                                <span class="bg-yellow-500 text-gray-900 text-xs font-bold px-2 py-1 rounded flex items-center">
+                                    <i class="fas fa-star mr-1"></i> ${movie.vote_average.toFixed(1)}
+                                </span>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-300 line-clamp-3">${movie.overview || 'Aucune description disponible.'}</p>
+                            </div>
+                            <div class="flex flex-col space-y-2">
+                                <!-- Play button -->
+                                <button class="play-btn bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded font-medium transition flex items-center justify-center w-full" data-movie-id="${movie.id}">
+                                    <i class="fas fa-play mr-2"></i> Regarder maintenant
+                                </button>
+                                <!-- Watch later button -->
+                                <button class="watch-later-btn bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-2 rounded font-medium transition flex items-center justify-center w-full">
+                                    <i class="fas fa-clock mr-2"></i> À regarder plus tard
+                                </button>
+                                <!-- Details button -->
+                                <a href="https://www.themoviedb.org/movie/${movie.id}" target="_blank" class="bg-white text-gray-900 hover:bg-gray-200 px-3 py-2 rounded text-sm font-medium transition flex items-center justify-center">
+                                    <i class="fas fa-info-circle mr-2"></i> Détails
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1 truncate">${movie.title}</h3>
+                        <div class="flex justify-between items-center text-gray-400 text-sm">
+                            <span>${movie.genre_ids.length ? 'Genre' : 'Pas de genre'}</span>
+                            <span class="flex items-center">
+                                <i class="fas fa-heart text-red-500 mr-1"></i> ${movie.popularity.toFixed(0)}
+                            </span>
+                        </div>
+                    </div>
+                `;
+                moviesGrid.appendChild(movieCard);
+                // Add event listener to the play button
+                const playBtn = movieCard.querySelector('.play-btn');
+                playBtn.addEventListener('click', () => showStreamingOptions(movie));
+            });
+        }
+        function showStreamingOptions(movie) {
+            // Create modal for server selection
+            const modal = document.createElement('div');
+            modal.className = 'fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50';
+            modal.innerHTML = `
+                <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-xl font-bold">Choisissez un serveur</h3>
+                        <button class="close-modal text-gray-400 hover:text-white">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <p class="text-gray-400 mb-4">Sélectionnez un serveur pour regarder "${movie.title}"</p>
+                    <div class="grid grid-cols-2 gap-3 mb-4" id="server-buttons">
+                        ${Object.entries(STREAMING_SERVERS).map(([key, server]) => `
+                            <button class="server-btn ${server.color} hover:${server.color.replace('600', '700')} text-white px-4 py-3 rounded-lg transition flex flex-col items-center" data-server="${key}">
+                                <i class="${server.icon} text-xl mb-1"></i>
+                                <span>${server.name}</span>
+                            </button>
+                        `).join('')}
+                    </div>
+                    <div class="bg-gray-700 rounded-lg p-4 hidden" id="quality-options">
+                        <h4 class="font-medium mb-2">Qualité disponible :</h4>
+                        <div class="flex space-x-2">
+                            <button class="quality-btn bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded" data-quality="1080">1080p</button>
+                            <button class="quality-btn bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded" data-quality="720">720p</button>
+                            <button class="quality-btn bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded" data-quality="480">480p</button>
+                        </div>
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(modal);
+            // Close modal
+            const closeModal = modal.querySelector('.close-modal');
+            closeModal.addEventListener('click', () => {
+                document.body.removeChild(modal);
+            });
+            // Server selection
+            const serverButtons = modal.querySelectorAll('.server-btn');
+            const qualityOptions = modal.querySelector('#quality-options');
+            serverButtons.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    // Highlight selected server
+                    serverButtons.forEach(b => b.classList.remove('ring-2', 'ring-white'));
+                    btn.classList.add('ring-2', 'ring-white');
+                    // Show quality options
+                    qualityOptions.classList.remove('hidden');
+                    // When quality is selected
+                    const qualityBtns = qualityOptions.querySelectorAll('.quality-btn');
+                    qualityBtns.forEach(qBtn => {
+                        qBtn.addEventListener('click', () => {
+                            const quality = qBtn.dataset.quality;
+                            playMovie(movie, btn.dataset.server, quality);
+                            document.body.removeChild(modal);
+                        });
+                    });
+                });
+            });
+        }
+        function playMovie(movie, server, quality) {
+            // Generate a streaming URL based on movie ID, server and quality
+            // Note: This is a simulation - in a real app, you would need actual streaming URLs
+            const streamingUrl = `https://example-stream-provider.com/player?movie_id=${movie.id}&server=${server}&quality=${quality}`;
+            // Show player container
+            playerContainer.style.display = 'flex';
+            // Set iframe source
+            moviePlayer.src = streamingUrl;
+            // Update stats (simulate view count)
+            const moviesCountEl = document.getElementById('movies-count');
+            moviesCountEl.textContent = parseInt(moviesCountEl.textContent) + 1;
+            // Add to recently watched in localStorage
+            const watched = JSON.parse(localStorage.getItem('recentlyWatched') || '[]');
+            watched.unshift({
+                id: movie.id,
+                title: movie.title,
+                poster: movie.poster_path ? `https://image.tmdb.org/t/p/w200${movie.poster_path}` : null,
+                date: new Date().toISOString()
+            });
+            localStorage.setItem('recentlyWatched', JSON.stringify(watched.slice(0, 10)));
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/cin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ ajouter un tableau de bord avec une importation des films et les url des film en automatique je veux pas des films ou des lien d'exemple je veut importer des vrais films avec leurs liens intégré par systéme robotisé en automatique : Jeton d'accès en lecture à l'API eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs Clé d'API fb437b10727a5a4eb8d9134e29c82ae0
2	+ ajouté les boutons play et a regarder avec leur serveur et leur lecteurs puissant intégré en automatique