Spaces:

reda20111gh
/

cineverse-api-explorer

Running

App Files Files Community

reda20111gh commited on Nov 17, 2025

Commit

a7479c8

verified ·

1 Parent(s): afb63de

TMDB offers a powerful API service that is free for personal use. Please ensure you attribute TMDB for any images or data you use. You can find the logos for attribution here.

Browse files

Documentation
Our primary documentation is located at developer.themoviedb.org.

Assistance
If you have questions or comments about the information covered here, please create a post on our support forums.

Détails de l'API
Test your API credentials by clicking here. You can also edit the details of your app by clicking here.

Jeton d'accès en lecture à l'API
eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIyNTZiNDQ4OTViZTMyNGM5ZDgwYTU4NzQ3YTFlMzk3NyIsIm5iZiI6MTc2MzI5MjU4MS4xNSwic3ViIjoiNjkxOWI1YTVhODk2YThiYjIyYTBlZGM2Iiwic2NvcGVzIjpbImFwaV9yZWFkIl0sInZlcnNpb24iOjF9.AQjeeaZtUJ9OoahPCIgGDXoZpCAiZBlJ60388-n7oBU
Clé d'API
256b44895be324c9d80a58747a1e3977

Files changed (4) hide show

README.md +7 -4
components/api-loader.js +36 -0
index.html +164 -19
style.css +44 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Cineverse Api Explorer
-emoji: 📈
-colorFrom: pink
 colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CineVerse API Explorer 🍿
+colorFrom: yellow
 colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/api-loader.js ADDED Viewed

	@@ -0,0 +1,36 @@

+class ApiLoader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .loader-container {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 2rem;
+                }
+                .loader {
+                    width: 48px;
+                    height: 48px;
+                    border: 5px solid #6d28d9;
+                    border-bottom-color: transparent;
+                    border-radius: 50%;
+                    display: inline-block;
+                    box-sizing: border-box;
+                    animation: rotation 1s linear infinite;
+                }
+                @keyframes rotation {
+                    0% { transform: rotate(0deg); }
+                    100% { transform: rotate(360deg); }
+                }
+            </style>
+            <div class="loader-container">
+                <span class="loader"></span>
+            </div>
+        `;
+    }
+}
+customElements.define('api-loader', ApiLoader);

index.html CHANGED Viewed

@@ -1,19 +1,164 @@
-<!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" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CineVerse - Your Movie Universe</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/movie-card.js"></script>
+    <script src="components/footer.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6d28d9',
+                        secondary: '#f59e0b',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="mb-12">
+            <div class="bg-gradient-to-r from-primary to-secondary rounded-2xl p-8 text-white">
+                <h1 class="text-4xl md:text-5xl font-bold mb-4">Discover Your Next Favorite Movie</h1>
+                <p class="text-xl mb-6">Explore thousands of films from all genres and eras</p>
+                <div class="relative max-w-2xl">
+                    <input type="text" placeholder="Search movies, actors, genres..."
+                           class="w-full py-3 px-4 rounded-full text-gray-800 focus:outline-none">
+                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary hover:bg-primary-dark p-2 rounded-full">
+                        <i data-feather="search"></i>
+                    </button>
+                </div>
+            </div>
+        </section>
+        <!-- Featured Movies -->
+        <section class="mb-12">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Featured Movies</h2>
+                <a href="#" class="text-primary hover:underline">View All</a>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                <movie-card
+                    title="Inception"
+                    year="2010"
+                    rating="8.8"
+                    genre="Sci-Fi"
+                    image="http://static.photos/technology/640x360/1">
+                </movie-card>
+                <movie-card
+                    title="The Shawshank Redemption"
+                    year="1994"
+                    rating="9.3"
+                    genre="Drama"
+                    image="http://static.photos/vintage/640x360/2">
+                </movie-card>
+                <movie-card
+                    title="Parasite"
+                    year="2019"
+                    rating="8.6"
+                    genre="Thriller"
+                    image="http://static.photos/indoor/640x360/3">
+                </movie-card>
+                <movie-card
+                    title="Pulp Fiction"
+                    year="1994"
+                    rating="8.9"
+                    genre="Crime"
+                    image="http://static.photos/vintage/640x360/4">
+                </movie-card>
+            </div>
+        </section>
+        <!-- Categories -->
+        <section class="mb-12">
+            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Browse by Category</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                <a href="#" class="category-card bg-primary hover:bg-primary-dark text-white">Action</a>
+                <a href="#" class="category-card bg-secondary hover:bg-secondary-dark text-white">Comedy</a>
+                <a href="#" class="category-card bg-green-500 hover:bg-green-600 text-white">Drama</a>
+                <a href="#" class="category-card bg-red-500 hover:bg-red-600 text-white">Horror</a>
+                <a href="#" class="category-card bg-blue-500 hover:bg-blue-600 text-white">Sci-Fi</a>
+                <a href="#" class="category-card bg-purple-500 hover:bg-purple-600 text-white">Fantasy</a>
+            </div>
+        </section>
+        <!-- Trending Now -->
+        <section>
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Trending Now</h2>
+                <a href="#" class="text-primary hover:underline">View All</a>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                <movie-card
+                    title="Dune"
+                    year="2021"
+                    rating="8.0"
+                    genre="Sci-Fi"
+                    image="http://static.photos/technology/640x360/5">
+                </movie-card>
+                <movie-card
+                    title="The Batman"
+                    year="2022"
+                    rating="7.9"
+                    genre="Action"
+                    image="http://static.photos/black/640x360/6">
+                </movie-card>
+                <movie-card
+                    title="Everything Everywhere All at Once"
+                    year="2022"
+                    rating="8.7"
+                    genre="Adventure"
+                    image="http://static.photos/abstract/640x360/7">
+                </movie-card>
+                <movie-card
+                    title="Top Gun: Maverick"
+                    year="2022"
+                    rating="8.3"
+                    genre="Action"
+                    image="http://static.photos/aerial/640x360/8">
+                </movie-card>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <script>
+        feather.replace();
+        // Dark mode toggle
+        document.addEventListener('DOMContentLoaded', () => {
+            // Add loading state
+            const movieCards = document.querySelectorAll('movie-card');
+            movieCards.forEach(card => {
+                card.setAttribute('loading', 'true');
+            });
+        });
+const darkModeToggle = document.getElementById('darkModeToggle');
+        if (darkModeToggle) {
+            darkModeToggle.addEventListener('click', () => {
+                document.documentElement.classList.toggle('dark');
+                localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+            });
+        }
+        // Check for saved dark mode preference
+        if (localStorage.getItem('darkMode') === 'true') {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -1,28 +1,54 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Poppins', sans-serif;
+}
+.category-card {
+    @apply py-3 px-4 rounded-lg text-center font-medium transition-all duration-200 shadow-md;
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
+::-webkit-scrollbar-track {
+    @apply bg-gray-200 dark:bg-gray-800;
 }
+::-webkit-scrollbar-thumb {
+    @apply bg-primary rounded-full;
 }
+::-webkit-scrollbar-thumb:hover {
+    @apply bg-primary-dark;
 }
+/* Animation for movie cards */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+movie-card {
+    animation: fadeIn 0.5s ease-out forwards;
+    opacity: 0;
+}
+movie-card:nth-child(1) { animation-delay: 0.1s; }
+movie-card:nth-child(2) { animation-delay: 0.2s; }
+movie-card:nth-child(3) { animation-delay: 0.3s; }
+movie-card:nth-child(4) { animation-delay: 0.4s; }
+/* Responsive video player */
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+    overflow: hidden;
+}
+.video-container iframe {
+    position: absolute