Spaces:

docto41
/

cin-verse

Running

App Files Files Community

docto41 commited on May 16

Commit

e7f8cf6

verified ·

1 Parent(s): b653499

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +326 -19
prompts.txt +6 -0

README.md CHANGED Viewed

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

 ---
+title: cin-verse
+emoji: 🐳
+colorFrom: pink
 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,326 @@
-<!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>CinéVerse - Films populaires</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 {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .movie-card:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 25px rgba(220, 38, 38, 0.3);
+        }
+        .scroll-container {
+            height: calc(100vh - 200px);
+            overflow-y: auto;
+        }
+        .scroll-container::-webkit-scrollbar {
+            width: 8px;
+        }
+        .scroll-container::-webkit-scrollbar-track {
+            background: #1a202c;
+        }
+        .scroll-container::-webkit-scrollbar-thumb {
+            background: #e53e3e;
+            border-radius: 4px;
+        }
+        .loading-spinner {
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white">
+    <header class="bg-black py-6 shadow-lg sticky top-0 z-50">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+                <div class="flex items-center space-x-2">
+                    <i class="fas fa-film text-3xl text-red-500"></i>
+                    <h1 class="text-2xl font-bold">CinéVerse</h1>
+                </div>
+                <div class="relative w-full md:w-1/3">
+                    <input type="text" id="searchInput" placeholder="Rechercher un film..." class="w-full bg-gray-800 rounded-full py-2 px-4 text-white focus:outline-none focus:ring-2 focus:ring-red-500">
+                    <button id="searchButton" class="absolute right-3 top-2 text-gray-400 hover:text-white">
+                        <i class="fas fa-search"></i>
+                    </button>
+                </div>
+                <div class="flex space-x-4">
+                    <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md font-medium">
+                        <i class="fas fa-user mr-2"></i>Connexion
+                    </button>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 space-y-4 md:space-y-0">
+            <h2 class="text-2xl font-bold" id="sectionTitle">Films populaires</h2>
+            <div class="flex flex-wrap gap-2">
+                <button class="genre-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md" data-id="28">Action</button>
+                <button class="genre-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md" data-id="35">Comédie</button>
+                <button class="genre-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md" data-id="18">Drame</button>
+                <button class="genre-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md" data-id="27">Horreur</button>
+                <button class="genre-btn bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md" data-id="10749">Romance</button>
+            </div>
+        </div>
+        <div id="loading" class="flex justify-center items-center py-20">
+            <i class="fas fa-spinner loading-spinner text-4xl text-red-500"></i>
+        </div>
+        <div class="scroll-container hidden" id="moviesContainer">
+            <div id="moviesGrid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
+                <!-- Les films seront chargés ici via JavaScript -->
+            </div>
+            <div class="flex justify-center mt-8 mb-4">
+                <button id="loadMore" class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-md font-medium hidden">
+                    Charger plus de films
+                </button>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-black py-8 mt-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">CinéVerse</h3>
+                    <p class="text-gray-400">Votre destination pour découvrir les meilleurs films et où les regarder légalement.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Liens utiles</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-red-500">À propos</a></li>
+                        <li><a href="#" class="hover:text-red-500">Contact</a></li>
+                        <li><a href="#" class="hover:text-red-500">Politique de confidentialité</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Plateformes</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="https://www.netflix.com" target="_blank" class="hover:text-red-500">Netflix</a></li>
+                        <li><a href="https://www.primevideo.com" target="_blank" class="hover:text-red-500">Amazon Prime</a></li>
+                        <li><a href="https://www.disneyplus.com" target="_blank" class="hover:text-red-500">Disney+</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Réseaux sociaux</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-red-500 text-xl"><i class="fab fa-facebook"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-red-500 text-xl"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-red-500 text-xl"><i class="fab fa-instagram"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-8 pt-6 text-center text-gray-400">
+                <p>Ce site utilise l'API TMDB mais n'est pas affilié à TMDB.</p>
+                <p class="mt-2">Les films présentés sont protégés par des droits d'auteur.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Configuration de base
+        const API_KEY = '3fd2be6f0c70a2a598f084ddfb75487c'; // Clé API TMDB publique pour démo
+        const BASE_URL = 'https://api.themoviedb.org/3';
+        const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/w500';
+        const FRENCH_LANGUAGE = 'fr-FR';
+        let currentPage = 1;
+        let currentGenre = '';
+        let currentSearch = '';
+        document.addEventListener('DOMContentLoaded', function() {
+            // Éléments du DOM
+            const moviesGrid = document.getElementById('moviesGrid');
+            const loadingElement = document.getElementById('loading');
+            const moviesContainer = document.getElementById('moviesContainer');
+            const loadMoreButton = document.getElementById('loadMore');
+            const searchInput = document.getElementById('searchInput');
+            const searchButton = document.getElementById('searchButton');
+            const sectionTitle = document.getElementById('sectionTitle');
+            const genreButtons = document.querySelectorAll('.genre-btn');
+            // Charger les films populaires au démarrage
+            fetchPopularMovies();
+            // Écouteurs d'événements
+            loadMoreButton.addEventListener('click', loadMoreMovies);
+            searchButton.addEventListener('click', searchMovies);
+            searchInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') searchMovies();
+            });
+            // Écouteurs pour les boutons de genre
+            genreButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    currentGenre = this.dataset.id;
+                    currentSearch = '';
+                    currentPage = 1;
+                    sectionTitle.textContent = this.textContent;
+                    fetchMoviesByGenre(currentGenre);
+                });
+            });
+            // Fonction pour charger les films populaires
+            async function fetchPopularMovies() {
+                try {
+                    const response = await fetch(`${BASE_URL}/movie/popular?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&page=${currentPage}`);
+                    const data = await response.json();
+                    displayMovies(data.results);
+                } catch (error) {
+                    console.error('Erreur:', error);
+                    loadingElement.innerHTML = '<p class="text-red-500">Erreur lors du chargement des films. Veuillez réessayer.</p>';
+                }
+            }
+            // Fonction pour charger les films par genre
+            async function fetchMoviesByGenre(genreId) {
+                try {
+                    loadingElement.classList.remove('hidden');
+                    moviesContainer.classList.add('hidden');
+                    loadMoreButton.classList.add('hidden');
+                    moviesGrid.innerHTML = '';
+                    const response = await fetch(`${BASE_URL}/discover/movie?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&sort_by=popularity.desc&page=${currentPage}&with_genres=${genreId}`);
+                    const data = await response.json();
+                    displayMovies(data.results);
+                } catch (error) {
+                    console.error('Erreur:', error);
+                    loadingElement.innerHTML = '<p class="text-red-500">Erreur lors du chargement des films. Veuillez réessayer.</p>';
+                }
+            }
+            // Fonction pour rechercher des films
+            async function searchMovies() {
+                const query = searchInput.value.trim();
+                if (query === '') return;
+                currentSearch = query;
+                currentGenre = '';
+                currentPage = 1;
+                sectionTitle.textContent = `Résultats pour "${query}"`;
+                try {
+                    loadingElement.classList.remove('hidden');
+                    moviesContainer.classList.add('hidden');
+                    loadMoreButton.classList.add('hidden');
+                    moviesGrid.innerHTML = '';
+                    const response = await fetch(`${BASE_URL}/search/movie?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&query=${encodeURIComponent(query)}&page=${currentPage}`);
+                    const data = await response.json();
+                    displayMovies(data.results);
+                } catch (error) {
+                    console.error('Erreur:', error);
+                    loadingElement.innerHTML = '<p class="text-red-500">Erreur lors de la recherche. Veuillez réessayer.</p>';
+                }
+            }
+            // Fonction pour charger plus de films
+            async function loadMoreMovies() {
+                currentPage++;
+                try {
+                    loadMoreButton.disabled = true;
+                    loadMoreButton.innerHTML = '<i class="fas fa-spinner loading-spinner mr-2"></i> Chargement...';
+                    let response;
+                    if (currentSearch) {
+                        response = await fetch(`${BASE_URL}/search/movie?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&query=${encodeURIComponent(currentSearch)}&page=${currentPage}`);
+                    } else if (currentGenre) {
+                        response = await fetch(`${BASE_URL}/discover/movie?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&sort_by=popularity.desc&page=${currentPage}&with_genres=${currentGenre}`);
+                    } else {
+                        response = await fetch(`${BASE_URL}/movie/popular?api_key=${API_KEY}&language=${FRENCH_LANGUAGE}&page=${currentPage}`);
+                    }
+                    const data = await response.json();
+                    appendMovies(data.results);
+                    loadMoreButton.disabled = false;
+                    loadMoreButton.innerHTML = 'Charger plus de films';
+                } catch (error) {
+                    console.error('Erreur:', error);
+                    loadMoreButton.innerHTML = 'Erreur - Réessayer';
+                }
+            }
+            // Fonction pour afficher les films
+            function displayMovies(movies) {
+                if (movies.length === 0) {
+                    loadingElement.innerHTML = '<p class="text-red-500">Aucun film trouvé.</p>';
+                    return;
+                }
+                moviesGrid.innerHTML = '';
+                appendMovies(movies);
+                loadingElement.classList.add('hidden');
+                moviesContainer.classList.remove('hidden');
+                if (movies.length >= 20) {
+                    loadMoreButton.classList.remove('hidden');
+                } else {
+                    loadMoreButton.classList.add('hidden');
+                }
+            }
+            // Fonction pour ajouter des films à la grille
+            function appendMovies(movies) {
+                movies.forEach(movie => {
+                    const movieCard = document.createElement('div');
+                    movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden cursor-pointer';
+                    // Vérifier si le film a une affiche
+                    const posterPath = movie.poster_path ?
+                        `${IMAGE_BASE_URL}${movie.poster_path}` :
+                        'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
+                    // Formater la date de sortie
+                    const releaseDate = movie.release_date ?
+                        new Date(movie.release_date).getFullYear() :
+                        'Date inconnue';
+                    // Créer la carte de film
+                    movieCard.innerHTML = `
+                        <div onclick="showMovieDetails(${movie.id})">
+                            <img src="${posterPath}" alt="${movie.title}" class="w-full h-64 sm:h-80 object-cover">
+                            <div class="p-4">
+                                <h3 class="font-bold truncate">${movie.title}</h3>
+                                <div class="flex justify-between items-center mt-2 text-sm text-gray-400">
+                                    <span>${releaseDate}</span>
+                                    <span class="flex items-center">
+                                        <i class="fas fa-star text-yellow-400 mr-1"></i>
+                                        ${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                    moviesGrid.appendChild(movieCard);
+                });
+            }
+        });
+        // Fonction pour afficher les détails du film (ouvre une nouvelle fenêtre avec les plateformes disponibles)
+        function showMovieDetails(movieId) {
+            // Dans une application réelle, vous utiliseriez l'API "watch providers" de TMDB
+            // pour trouver où regarder le film légalement
+            // Pour cet exemple, nous ouvrons simplement la page TMDB du film
+            window.open(`https://www.themoviedb.org/movie/${movieId}?language=fr`, '_blank');
+            // Pour un site complet, vous pourriez créer une modale avec :
+            // - Les détails du film
+            // - Les plateformes de streaming disponibles
+            // - Les options de location/achat
+        }
+    </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-verse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,6 @@

+creer un site de marketplace composer de 986200 bouton d'assisat IA TRES  puissant avec des vrais bouton reel et actif pas des bouton d'exemple je veux un vrais site avec des bouton reel : ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement    ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paiement
+je veux creer le plis imense marketp   ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement    ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement  je veux acces  et toute produit pour moi seul les autre devront payer un abonnement   :   [email protected] : Admin270574@ et [email protected] : Admin270574@ lace au monde de plus de  9790078 bouton cliquable automatique  ouvrir chaque bouton cliquéé dans une nouvel fenetre je veux des vrai bouton et des site reel pas d 'exemple
+je veux creer le plus gigantesque marché de INTELIGENCES ARTIFICIEL AVEC PLUS DE 990099 BOUTONS D ASSISANT IA  dans toutes les domaine de services, je veux q'uon affiche toutes les boutons directement et que chaque boutons cliqué s'ouvre dans une nouvel fenetre je veux que toi soit gré en automatique et aussi ,: je veux un tableau de bord gigantesque ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement    ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement  je veux acces  et toute produit pour moi seul les autre devront payer un abonnement   :   [email protected] : Admin270574@ et [email protected] : Admin270574@
+ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement    ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement  je veux acces  et toute produit pour moi seul les autre devront payer un abonnement   :   [email protected] : Admin270574@ et [email protected] : Admin270574@
+creer un générateur de site de films streaming a regarder de suite avec plus de 5025200 boutons cliquable automatiques des film qui s'ouvre dans une nouvel fenetre quand on cique sure chaque bouton je veux des vrais film reel en automatique pas de site d exemple  , avec sont propre database de plus de 9726000 film complet directement pret a l'emploi les film je les veux tous en francais , avec des tres belle affiche reel des film et leur affiche d'origine , avec des serveurs de base de donnée avec leur lien d'origine
+je veux que le site posséde sont vrais serveur de lient de film a jours