Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29

SmolSWE text

#10
by smolSWE - opened
base: refs/heads/main
←
from: refs/pr/10
Discussion Files changed
+72
-91
Files changed (4) hide show
  1. README.md +1 -2
  2. index.html +46 -89
  3. script.js +21 -0
  4. style.css +4 -0
README.md CHANGED
@@ -6,5 +6,4 @@ colorTo: pink
6
  sdk: static
7
  pinned: false
8
  ---
9
-
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
6
  sdk: static
7
  pinned: false
8
  ---
9
+ Don;t change this file and it's yaml content. Until required or asked.
 
index.html CHANGED
@@ -5,22 +5,22 @@
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Netflix Clone</title>
8
- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
10
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
11
-
12
  </head>
13
- <body class="font-sans">
14
  <!-- Header -->
15
  <header class="bg-black bg-opacity-80 fixed top-0 left-0 right-0 z-10 shadow-md animate__animated animate__fadeIn">
16
  <div class="container mx-auto py-4 px-6 flex justify-between items-center">
17
- <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo" class="w-32">
18
  <nav>
19
  <ul class="flex space-x-6">
20
- <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">Home</a></li>
21
- <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">TV Shows</a></li>
22
- <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">Movies</a></li>
23
- <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">My List</a></li>
24
  </ul>
25
  </nav>
26
  </div>
@@ -31,94 +31,33 @@
31
  <div class="container mx-auto px-6 text-center fade-in">
32
  <h1 class="text-5xl font-bold mb-4">Unlimited movies, TV shows, and more.</h1>
33
  <p class="text-2xl mb-8">Watch anywhere. Cancel anytime.</p>
34
- <input type="email" placeholder="Email Address" class="px-4 py-2 rounded-md text-black w-full md:w-1/2 inline-block">
35
- <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md ml-2">Get Started</button>
 
 
36
  </div>
37
  </section>
38
 
39
  <!-- Movie Listings -->
40
-
41
- <section class="bg-black py-12">
42
- <div class="container mx-auto px-6">
43
- <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
44
- <div class="swiper-container">
45
- <div class="swiper-wrapper">
46
- <!-- Movie 1 -->
47
- <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
48
- <img src="https://picsum.photos/200/300" alt="Movie 1" class="w-full h-auto hover:scale-105 transition-transform duration-200">
49
- </div>
50
- <!-- Movie 2 -->
51
- <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
52
- <img src="https://picsum.photos/201/300" alt="Movie 2" class="w-full h-auto hover:scale-105 transition-transform duration-200">
53
- </div>
54
- <!-- Movie 3 -->
55
- <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
56
- <img src="https://picsum.photos/202/300" alt="Movie 3" class="w-full h-auto hover:scale-105 transition-transform duration-200">
57
- </div>
58
- <!-- Movie 4 -->
59
- <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
60
- <img src="https://picsum.photos/203/300" alt="Movie 4" class="w-full h-auto hover:scale-105 transition-transform duration-200">
61
- </div>
62
- <!-- Movie 5 -->
63
- <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
64
- <img src="https://picsum.photos/204/300" alt="Movie 5" class="w-full h-auto hover:scale-105 transition-transform duration-200">
65
- </div>
66
- <!-- Movie 6 -->
67
- <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
68
- <img src="https://picsum.photos/205/300" alt="Movie 6" class="w-full h-auto hover:scale-105 transition-transform duration-200">
69
  </div>
 
 
 
 
 
70
  </div>
71
- <!-- Add Pagination -->
72
- <div class="swiper-pagination"></div>
73
- <!-- Add Arrows -->
74
- <div class="swiper-button-next"></div>
75
- <div class="swiper-button-prev"></div>
76
  </div>
77
- </div>
78
- </section>
79
-
80
- <script>
81
- var swiper = new Swiper('.swiper-container', {
82
- slidesPerView: 3,
83
- spaceBetween: 30,
84
- pagination: {
85
- el: '.swiper-pagination',
86
- clickable: true,
87
- },
88
- navigation: {
89
- nextEl: '.swiper-button-next',
90
- prevEl: '.swiper-button-prev',
91
- },
92
- });
93
- </script>
94
 
 
95
  <div class="container mx-auto px-6">
96
  <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
97
- <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
98
- <!-- Movie 1 -->
99
- <div class="animate__animated animate__fadeInUp">
100
- <img src="https://picsum.photos/200/300" alt="Movie 1" class="w-full h-auto hover:scale-105 transition-transform duration-200">
101
- </div>
102
- <!-- Movie 2 -->
103
- <div class="animate__animated animate__fadeInUp">
104
- <img src="https://picsum.photos/201/300" alt="Movie 2" class="w-full h-auto hover:scale-105 transition-transform duration-200">
105
- </div>
106
- <!-- Movie 3 -->
107
- <div class="animate__animated animate__fadeInUp">
108
- <img src="https://picsum.photos/202/300" alt="Movie 3" class="w-full h-auto hover:scale-105 transition-transform duration-200">
109
- </div>
110
- <!-- Movie 4 -->
111
- <div class="animate__animated animate__fadeInUp">
112
- <img src="https://picsum.photos/203/300" alt="Movie 4" class="w-full h-auto hover:scale-105 transition-transform duration-200">
113
- </div>
114
- <!-- Movie 5 -->
115
- <div class="animate__animated animate__fadeInUp">
116
- <img src="https://picsum.photos/204/300" alt="Movie 5" class="w-full h-auto hover:scale-105 transition-transform duration-200">
117
- </div>
118
- <!-- Movie 6 -->
119
- <div class="animate__animated animate__fadeInUp">
120
- <img src="https://picsum.photos/205/300" alt="Movie 6" class="w-full h-auto hover:scale-105 transition-transform duration-200">
121
- </div>
122
  </div>
123
  </div>
124
  </section>
@@ -130,7 +69,25 @@
130
  </div>
131
  </footer>
132
 
133
-
134
- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </body>
136
  </html>
 
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Netflix Clone</title>
8
+ <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
10
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
11
+ <link rel="stylesheet" href="style.css">
12
  </head>
13
+ <body class="font-sans bg-black text-white">
14
  <!-- Header -->
15
  <header class="bg-black bg-opacity-80 fixed top-0 left-0 right-0 z-10 shadow-md animate__animated animate__fadeIn">
16
  <div class="container mx-auto py-4 px-6 flex justify-between items-center">
17
+ <a href="#" aria-label="Netflix"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo" class="w-32"></a>
18
  <nav>
19
  <ul class="flex space-x-6">
20
+ <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">Home</a></li>
21
+ <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">TV Shows</a></li>
22
+ <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">Movies</a></li>
23
+ <li><a href="#" class="hover:text-gray-300 transition-colors duration-300">My List</a></li>
24
  </ul>
25
  </nav>
26
  </div>
 
31
  <div class="container mx-auto px-6 text-center fade-in">
32
  <h1 class="text-5xl font-bold mb-4">Unlimited movies, TV shows, and more.</h1>
33
  <p class="text-2xl mb-8">Watch anywhere. Cancel anytime.</p>
34
+ <div class="flex flex-col md:flex-row items-center justify-center">
35
+ <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">
36
+ <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md ml-2">Get Started</button>
37
+ </div>
38
  </div>
39
  </section>
40
 
41
  <!-- Movie Listings -->
42
+ <section class="bg-black py-12">
43
+ <div class="container mx-auto px-6">
44
+ <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
45
+ <div class="swiper-container">
46
+ <div class="swiper-wrapper" id="swiper-movies">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  </div>
48
+ <!-- Add Pagination -->
49
+ <div class="swiper-pagination"></div>
50
+ <!-- Add Arrows -->
51
+ <div class="swiper-button-next"></div>
52
+ <div class="swiper-button-prev"></div>
53
  </div>
 
 
 
 
 
54
  </div>
55
+ </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
 
57
+ <section class="bg-black py-12">
58
  <div class="container mx-auto px-6">
59
  <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
60
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4" id="grid-movies">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  </div>
62
  </div>
63
  </section>
 
69
  </div>
70
  </footer>
71
 
72
+ <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
73
+ <script src="script.js"></script>
74
+ <script>
75
+ const movies = [
76
+ { imageUrl: 'https://picsum.photos/200/300', altText: 'Movie 1' },
77
+ { imageUrl: 'https://picsum.photos/201/300', altText: 'Movie 2' },
78
+ { imageUrl: 'https://picsum.photos/202/300', altText: 'Movie 3' },
79
+ { imageUrl: 'https://picsum.photos/203/300', altText: 'Movie 4' },
80
+ { imageUrl: 'https://picsum.photos/204/300', altText: 'Movie 5' },
81
+ { imageUrl: 'https://picsum.photos/205/300', altText: 'Movie 6' },
82
+ ];
83
+
84
+ const swiperMoviesContainer = document.getElementById('swiper-movies');
85
+ const gridMoviesContainer = document.getElementById('grid-movies');
86
+
87
+ movies.forEach(movie => {
88
+ swiperMoviesContainer.innerHTML += createMovieCard(movie.imageUrl, movie.altText);
89
+ 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>`;
90
+ });
91
+ </script>
92
  </body>
93
  </html>
script.js ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ var swiper = new Swiper('.swiper-container', {
3
+ slidesPerView: 3,
4
+ spaceBetween: 30,
5
+ pagination: {
6
+ el: '.swiper-pagination',
7
+ clickable: true,
8
+ },
9
+ navigation: {
10
+ nextEl: '.swiper-button-next',
11
+ prevEl: '.swiper-button-prev',
12
+ },
13
+ });
14
+
15
+ function createMovieCard(imageUrl, altText) {
16
+ return `
17
+ <div class="swiper-slide hover:shadow-lg transition-shadow duration-300 animate__animated animate__fadeInUp">
18
+ <img src="${imageUrl}" alt="${altText}" class="w-full h-auto hover:scale-105 transition-transform duration-200">
19
+ </div>
20
+ `;
21
+ }
style.css ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+
2
+ @tailwind base;
3
+ @tailwind components;
4
+ @tailwind utilities;