Spaces:

KingNish
/

test-space

Running

App Files Files Community

smolSWE commited on May 18

Commit

a03e10f

verified ·

1 Parent(s): 728b250

SmolSWE text

Browse files

A test of SmolSWE with new changes

Files changed (4) hide show

README.md +34 -10
index.html +46 -89
script.js +21 -0
style.css +4 -0

README.md CHANGED Viewed

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

+# Netflix Clone
+A simple Netflix clone built with HTML, Tailwind CSS, Swiper.js, and Animate.css.
+## Features
+*   Clean and responsive design
+*   Dynamic movie listings using Swiper.js carousel and grid layout
+*   Animated elements with Animate.css
+*   Modular JavaScript code
+## Technologies Used
+*   HTML
+*   Tailwind CSS
+*   Swiper.js
+*   Animate.css
+## Getting Started
+1.  Clone the repository:
+    ```bash
+    git clone <repository-url>
+    ```
+2.  Open `index.html` in your browser.
+## Next Steps
+*   Implement user authentication
+*   Fetch movie data from an API
+*   Add more features and functionality

index.html CHANGED Viewed

@@ -5,22 +5,22 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Netflix Clone</title>
-<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 </head>
-<body class="font-sans">
     <!-- Header -->
     <header class="bg-black bg-opacity-80 fixed top-0 left-0 right-0 z-10 shadow-md animate__animated animate__fadeIn">
         <div class="container mx-auto py-4 px-6 flex justify-between items-center">
-            <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo" class="w-32">
             <nav>
                 <ul class="flex space-x-6">
-                    <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">Home</a></li>
-                    <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">TV Shows</a></li>
-                    <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">Movies</a></li>
-                    <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">My List</a></li>
                 </ul>
             </nav>
         </div>
@@ -31,94 +31,33 @@
         <div class="container mx-auto px-6 text-center fade-in">
             <h1 class="text-5xl font-bold mb-4">Unlimited movies, TV shows, and more.</h1>
             <p class="text-2xl mb-8">Watch anywhere. Cancel anytime.</p>
-            <input type="email" placeholder="Email Address" class="px-4 py-2 rounded-md text-black w-full md:w-1/2 inline-block">
-            <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md ml-2">Get Started</button>
         </div>
     </section>
     <!-- Movie Listings -->
-<section class="bg-black py-12">
-    <div class="container mx-auto px-6">
-        <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
-        <div class="swiper-container">
-            <div class="swiper-wrapper">
-                <!-- Movie 1 -->
-                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
-                    <img src="https://picsum.photos/200/300" alt="Movie 1" class="w-full h-auto hover:scale-105 transition-transform duration-200">
-                </div>
-                <!-- Movie 2 -->
-                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
-                    <img src="https://picsum.photos/201/300" alt="Movie 2" class="w-full h-auto hover:scale-105 transition-transform duration-200">
-                </div>
-                <!-- Movie 3 -->
-                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
-                    <img src="https://picsum.photos/202/300" alt="Movie 3" class="w-full h-auto hover:scale-105 transition-transform duration-200">
-                </div>
-                <!-- Movie 4 -->
-                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
-                    <img src="https://picsum.photos/203/300" alt="Movie 4" class="w-full h-auto hover:scale-105 transition-transform duration-200">
-                </div>
-                <!-- Movie 5 -->
-                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
-                    <img src="https://picsum.photos/204/300" alt="Movie 5" class="w-full h-auto hover:scale-105 transition-transform duration-200">
-                </div>
-                <!-- Movie 6 -->
-                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
-                    <img src="https://picsum.photos/205/300" alt="Movie 6" class="w-full h-auto hover:scale-105 transition-transform duration-200">
                 </div>
             </div>
-            <!-- Add Pagination -->
-            <div class="swiper-pagination"></div>
-            <!-- Add Arrows -->
-            <div class="swiper-button-next"></div>
-            <div class="swiper-button-prev"></div>
         </div>
-    </div>
-</section>
-<script>
-    var swiper = new Swiper('.swiper-container', {
-        slidesPerView: 3,
-        spaceBetween: 30,
-        pagination: {
-            el: '.swiper-pagination',
-            clickable: true,
-        },
-        navigation: {
-            nextEl: '.swiper-button-next',
-            prevEl: '.swiper-button-prev',
-        },
-    });
-</script>
         <div class="container mx-auto px-6">
             <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
-            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
-                <!-- Movie 1 -->
-                <div class="animate__animated animate__fadeInUp">
-                    <img src="https://picsum.photos/200/300" alt="Movie 1" class="w-full h-auto hover:scale-105 transition-transform duration-200">
-                </div>
-                <!-- Movie 2 -->
-                <div class="animate__animated animate__fadeInUp">
-                    <img src="https://picsum.photos/201/300" alt="Movie 2" class="w-full h-auto hover:scale-105 transition-transform duration-200">
-                </div>
-                <!-- Movie 3 -->
-                <div class="animate__animated animate__fadeInUp">
-                    <img src="https://picsum.photos/202/300" alt="Movie 3" class="w-full h-auto hover:scale-105 transition-transform duration-200">
-                </div>
-                <!-- Movie 4 -->
-                <div class="animate__animated animate__fadeInUp">
-                    <img src="https://picsum.photos/203/300" alt="Movie 4" class="w-full h-auto hover:scale-105 transition-transform duration-200">
-                </div>
-                <!-- Movie 5 -->
-                <div class="animate__animated animate__fadeInUp">
-                    <img src="https://picsum.photos/204/300" alt="Movie 5" class="w-full h-auto hover:scale-105 transition-transform duration-200">
-                </div>
-                <!-- Movie 6 -->
-                <div class="animate__animated animate__fadeInUp">
-                    <img src="https://picsum.photos/205/300" alt="Movie 6" class="w-full h-auto hover:scale-105 transition-transform duration-200">
-                </div>
             </div>
         </div>
     </section>
@@ -130,7 +69,25 @@
         </div>
     </footer>
-<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Netflix Clone</title>
+    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
 </head>
+<body class="font-sans bg-black text-white">
     <!-- Header -->
     <header class="bg-black bg-opacity-80 fixed top-0 left-0 right-0 z-10 shadow-md animate__animated animate__fadeIn">
         <div class="container mx-auto py-4 px-6 flex justify-between items-center">
+            <a href="#" aria-label="Netflix"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo" class="w-32"></a>
             <nav>
                 <ul class="flex space-x-6">
+                    <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">Home</a></li>
+                    <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">TV Shows</a></li>
+                    <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">Movies</a></li>
+                    <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">My List</a></li>
                 </ul>
             </nav>
         </div>
         <div class="container mx-auto px-6 text-center fade-in">
             <h1 class="text-5xl font-bold mb-4">Unlimited movies, TV shows, and more.</h1>
             <p class="text-2xl mb-8">Watch anywhere. Cancel anytime.</p>
+            <div class="flex flex-col md:flex-row items-center justify-center">
+                <input type="email" placeholder="Email Address" class="px-4 py-2 rounded-md text-black w-full md:w-1/2 mb-4 md:mb-0">
+                <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md ml-2">Get Started</button>
+            </div>
         </div>
     </section>
     <!-- Movie Listings -->
+    <section class="bg-black py-12">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
+            <div class="swiper-container">
+                <div class="swiper-wrapper" id="swiper-movies">
                 </div>
+                <!-- Add Pagination -->
+                <div class="swiper-pagination"></div>
+                <!-- Add Arrows -->
+                <div class="swiper-button-next"></div>
+                <div class="swiper-button-prev"></div>
             </div>
         </div>
+    </section>
+    <section class="bg-black py-12">
         <div class="container mx-auto px-6">
             <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4" id="grid-movies">
             </div>
         </div>
     </section>
         </div>
     </footer>
+    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+    <script src="script.js"></script>
+    <script>
+        const movies = [
+            { imageUrl: 'https://picsum.photos/200/300', altText: 'Movie 1' },
+            { imageUrl: 'https://picsum.photos/201/300', altText: 'Movie 2' },
+            { imageUrl: 'https://picsum.photos/202/300', altText: 'Movie 3' },
+            { imageUrl: 'https://picsum.photos/203/300', altText: 'Movie 4' },
+            { imageUrl: 'https://picsum.photos/204/300', altText: 'Movie 5' },
+            { imageUrl: 'https://picsum.photos/205/300', altText: 'Movie 6' },
+        ];
+        const swiperMoviesContainer = document.getElementById('swiper-movies');
+        const gridMoviesContainer = document.getElementById('grid-movies');
+        movies.forEach(movie => {
+            swiperMoviesContainer.innerHTML += createMovieCard(movie.imageUrl, movie.altText);
+            gridMoviesContainer.innerHTML += `<div class="animate__animated animate__fadeInUp"><img src="${movie.imageUrl}" alt="${movie.altText}" class="w-full h-auto hover:scale-105 transition-transform duration-200"></div>`;
+        });
+    </script>
 </body>
 </html>

script.js ADDED Viewed

	@@ -0,0 +1,21 @@

+var swiper = new Swiper('.swiper-container', {
+    slidesPerView: 3,
+    spaceBetween: 30,
+    pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+    },
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+});
+function createMovieCard(imageUrl, altText) {
+  return `
+    <div class="swiper-slide hover:shadow-lg transition-shadow duration-300 animate__animated animate__fadeInUp">
+      <img src="${imageUrl}" alt="${altText}" class="w-full h-auto hover:scale-105 transition-transform duration-200">
+    </div>
+  `;
+}

style.css ADDED Viewed

	@@ -0,0 +1,4 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;