Hugging Face's logo

Spaces:
cha3b
/
anime-oasis
Running

App Files Community
cha3b commited on
Commit
c4a33df
·
verified ·
1 Parent(s): 64e2eac

video anime 10 min

Browse files
Files changed (6) hide show
  1. README.md +8 -5
  2. components/footer.js +75 -0
  3. components/navbar.js +60 -0
  4. index.html +242 -19
  5. script.js +41 -0
  6. style.css +35 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Anime Oasis
3
- emoji: 📚
4
- colorFrom: purple
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Anime Oasis 🎬
3
+ colorFrom: red
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,75 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .footer-link:hover {
7
+ color: #6C5CE7;
8
+ }
9
+ </style>
10
+ <footer class="bg-gray-800 dark:bg-gray-900 text-white py-12">
11
+ <div class="container mx-auto px-4">
12
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
13
+ <div>
14
+ <h3 class="text-xl font-bold mb-4 flex items-center">
15
+ <i data-feather="play-circle" class="mr-2"></i> Anime Oasis
16
+ </h3>
17
+ <p class="text-gray-400">Watch your favorite anime anytime, anywhere.</p>
18
+ <div class="flex space-x-4 mt-6">
19
+ <a href="#" class="text-gray-400 hover:text-white">
20
+ <i data-feather="facebook"></i>
21
+ </a>
22
+ <a href="#" class="text-gray-400 hover:text-white">
23
+ <i data-feather="twitter"></i>
24
+ </a>
25
+ <a href="#" class="text-gray-400 hover:text-white">
26
+ <i data-feather="instagram"></i>
27
+ </a>
28
+ <a href="#" class="text-gray-400 hover:text-white">
29
+ <i data-feather="youtube"></i>
30
+ </a>
31
+ </div>
32
+ </div>
33
+
34
+ <div>
35
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
36
+ <ul class="space-y-2">
37
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Home</a></li>
38
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Popular Anime</a></li>
39
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">New Releases</a></li>
40
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Genres</a></li>
41
+ </ul>
42
+ </div>
43
+
44
+ <div>
45
+ <h4 class="text-lg font-semibold mb-4">Legal</h4>
46
+ <ul class="space-y-2">
47
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Terms of Service</a></li>
48
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Privacy Policy</a></li>
49
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">DMCA</a></li>
50
+ <li><a href="#" class="footer-link text-gray-400 hover:text-white transition">Contact Us</a></li>
51
+ </ul>
52
+ </div>
53
+
54
+ <div>
55
+ <h4 class="text-lg font-semibold mb-4">Subscribe</h4>
56
+ <p class="text-gray-400 mb-4">Get the latest anime updates straight to your inbox.</p>
57
+ <div class="flex">
58
+ <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg text-gray-900 focus:outline-none">
59
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-r-lg">
60
+ <i data-feather="send"></i>
61
+ </button>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
67
+ <p>&copy; ${new Date().getFullYear()} Anime Oasis. All rights reserved.</p>
68
+ </div>
69
+ </div>
70
+ </footer>
71
+ `;
72
+ }
73
+ }
74
+
75
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .nav-link {
7
+ position: relative;
8
+ }
9
+ .nav-link::after {
10
+ content: '';
11
+ position: absolute;
12
+ width: 0;
13
+ height: 2px;
14
+ bottom: -2px;
15
+ left: 0;
16
+ background-color: #6C5CE7;
17
+ transition: width 0.3s ease;
18
+ }
19
+ .nav-link:hover::after {
20
+ width: 100%;
21
+ }
22
+ .active::after {
23
+ width: 100%;
24
+ }
25
+ </style>
26
+ <nav class="bg-white dark:bg-gray-800 shadow-lg">
27
+ <div class="container mx-auto px-4 py-4">
28
+ <div class="flex justify-between items-center">
29
+ <a href="#" class="flex items-center space-x-2">
30
+ <i data-feather="play-circle" class="text-primary-500 w-8 h-8"></i>
31
+ <span class="text-xl font-bold text-gray-900 dark:text-white">Anime Oasis</span>
32
+ </a>
33
+
34
+ <div class="hidden md:flex items-center space-x-8">
35
+ <a href="#" class="nav-link active text-gray-900 dark:text-white">Home</a>
36
+ <a href="#" class="nav-link text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Popular</a>
37
+ <a href="#" class="nav-link text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Genres</a>
38
+ <a href="#" class="nav-link text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">New Releases</a>
39
+ <a href="#" class="nav-link text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">My List</a>
40
+ </div>
41
+
42
+ <div class="flex items-center space-x-4">
43
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
44
+ <i data-feather="moon" class="text-gray-700 dark:text-gray-300 w-5 h-5"></i>
45
+ </button>
46
+ <a href="#" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
47
+ <i data-feather="search" class="text-gray-700 dark:text-gray-300 w-5 h-5"></i>
48
+ </a>
49
+ <a href="#" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
50
+ <i data-feather="user" class="text-gray-700 dark:text-gray-300 w-5 h-5"></i>
51
+ </a>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </nav>
56
+ `;
57
+ }
58
+ }
59
+
60
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,242 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Anime Oasis | Watch Anime Online</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#6C5CE7',
19
+ },
20
+ secondary: {
21
+ 500: '#FD79A8',
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ </head>
29
+ <body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
30
+ <custom-navbar></custom-navbar>
31
+
32
+ <main class="container mx-auto px-4 py-8">
33
+ <!-- Hero Section -->
34
+ <section class="mb-16">
35
+ <div class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-3xl p-8 md:p-12 text-white">
36
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Watch Anime Online</h1>
37
+ <p class="text-xl mb-8">Stream your favorite anime episodes in HD for free</p>
38
+ <div class="relative max-w-2xl">
39
+ <input type="text" placeholder="Search anime..." class="w-full py-4 px-6 rounded-full text-gray-900">
40
+ <button class="absolute right-2 top-2 bg-primary-500 hover:bg-primary-600 text-white p-2 rounded-full">
41
+ <i data-feather="search"></i>
42
+ </button>
43
+ </div>
44
+ </div>
45
+ </section>
46
+
47
+ <!-- Popular Anime Section -->
48
+ <section class="mb-16">
49
+ <h2 class="text-3xl font-bold mb-8 flex items-center">
50
+ <i data-feather="trending-up" class="mr-3"></i> Popular Anime
51
+ </h2>
52
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
53
+ <!-- Anime Card 1 -->
54
+ <div class="anime-card group">
55
+ <div class="relative overflow-hidden rounded-lg mb-3 h-60">
56
+ <img src="http://static.photos/technology/640x360/1" alt="Anime Cover" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
57
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
58
+ <span class="bg-secondary-500 text-white text-xs px-2 py-1 rounded">EP 12</span>
59
+ </div>
60
+ <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
61
+ <button class="bg-primary-500 hover:bg-primary-600 text-white p-3 rounded-full">
62
+ <i data-feather="play" class="w-6 h-6"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+ <h3 class="font-semibold text-lg mb-1">Attack on Titan</h3>
67
+ <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
68
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
69
+ <span>24 min</span>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- Repeat for other anime cards -->
74
+ <div class="anime-card group">
75
+ <div class="relative overflow-hidden rounded-lg mb-3 h-60">
76
+ <img src="http://static.photos/technology/640x360/2" alt="Anime Cover" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
77
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
78
+ <span class="bg-secondary-500 text-white text-xs px-2 py-1 rounded">EP 8</span>
79
+ </div>
80
+ <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
81
+ <button class="bg-primary-500 hover:bg-primary-600 text-white p-3 rounded-full">
82
+ <i data-feather="play" class="w-6 h-6"></i>
83
+ </button>
84
+ </div>
85
+ </div>
86
+ <h3 class="font-semibold text-lg mb-1">Demon Slayer</h3>
87
+ <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
88
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
89
+ <span>23 min</span>
90
+ </div>
91
+ </div>
92
+
93
+ <div class="anime-card group">
94
+ <div class="relative overflow-hidden rounded-lg mb-3 h-60">
95
+ <img src="http://static.photos/technology/640x360/3" alt="Anime Cover" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
96
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
97
+ <span class="bg-secondary-500 text-white text-xs px-2 py-1 rounded">EP 10</span>
98
+ </div>
99
+ <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
100
+ <button class="bg-primary-500 hover:bg-primary-600 text-white p-3 rounded-full">
101
+ <i data-feather="play" class="w-6 h-6"></i>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ <h3 class="font-semibold text-lg mb-1">Jujutsu Kaisen</h3>
106
+ <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
107
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
108
+ <span>22 min</span>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="anime-card group">
113
+ <div class="relative overflow-hidden rounded-lg mb-3 h-60">
114
+ <img src="http://static.photos/technology/640x360/4" alt="Anime Cover" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
115
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
116
+ <span class="bg-secondary-500 text-white text-xs px-2 py-1 rounded">EP 5</span>
117
+ </div>
118
+ <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
119
+ <button class="bg-primary-500 hover:bg-primary-600 text-white p-3 rounded-full">
120
+ <i data-feather="play" class="w-6 h-6"></i>
121
+ </button>
122
+ </div>
123
+ </div>
124
+ <h3 class="font-semibold text-lg mb-1">My Hero Academia</h3>
125
+ <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
126
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
127
+ <span>24 min</span>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="anime-card group">
132
+ <div class="relative overflow-hidden rounded-lg mb-3 h-60">
133
+ <img src="http://static.photos/technology/640x360/5" alt="Anime Cover" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
134
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
135
+ <span class="bg-secondary-500 text-white text-xs px-2 py-1 rounded">EP 15</span>
136
+ </div>
137
+ <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
138
+ <button class="bg-primary-500 hover:bg-primary-600 text-white p-3 rounded-full">
139
+ <i data-feather="play" class="w-6 h-6"></i>
140
+ </button>
141
+ </div>
142
+ </div>
143
+ <h3 class="font-semibold text-lg mb-1">One Piece</h3>
144
+ <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
145
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
146
+ <span>10 min</span>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Recently Added Section -->
153
+ <section class="mb-16">
154
+ <h2 class="text-3xl font-bold mb-8 flex items-center">
155
+ <i data-feather="clock" class="mr-3"></i> Recently Added
156
+ </h2>
157
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
158
+ <!-- Video Card 1 -->
159
+ <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
160
+ <div class="relative h-48">
161
+ <img src="http://static.photos/technology/640x360/6" alt="Anime Thumbnail" class="w-full h-full object-cover">
162
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
163
+ <button class="bg-primary-500 hover:bg-primary-600 text-white p-4 rounded-full">
164
+ <i data-feather="play" class="w-6 h-6"></i>
165
+ </button>
166
+ </div>
167
+ <span class="absolute top-3 right-3 bg-secondary-500 text-white text-xs px-2 py-1 rounded">NEW</span>
168
+ </div>
169
+ <div class="p-5">
170
+ <h3 class="font-bold text-xl mb-2">Naruto Shippuden</h3>
171
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Episode 215: Master's Prophecy</p>
172
+ <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
173
+ <span class="flex items-center">
174
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
175
+ 10 min
176
+ </span>
177
+ <span>Added 2 hours ago</span>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Video Card 2 -->
183
+ <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
184
+ <div class="relative h-48">
185
+ <img src="http://static.photos/technology/640x360/7" alt="Anime Thumbnail" class="w-full h-full object-cover">
186
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
187
+ <button class="bg-primary-500 hover:bg-primary-600 text-white p-4 rounded-full">
188
+ <i data-feather="play" class="w-6 h-6"></i>
189
+ </button>
190
+ </div>
191
+ </div>
192
+ <div class="p-5">
193
+ <h3 class="font-bold text-xl mb-2">Death Note</h3>
194
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Episode 12: Confrontation</p>
195
+ <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
196
+ <span class="flex items-center">
197
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
198
+ 10 min
199
+ </span>
200
+ <span>Added 5 hours ago</span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Video Card 3 -->
206
+ <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
207
+ <div class="relative h-48">
208
+ <img src="http://static.photos/technology/640x360/8" alt="Anime Thumbnail" class="w-full h-full object-cover">
209
+ <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
210
+ <button class="bg-primary-500 hover:bg-primary-600 text-white p-4 rounded-full">
211
+ <i data-feather="play" class="w-6 h-6"></i>
212
+ </button>
213
+ </div>
214
+ <span class="absolute top-3 right-3 bg-secondary-500 text-white text-xs px-2 py-1 rounded">NEW</span>
215
+ </div>
216
+ <div class="p-5">
217
+ <h3 class="font-bold text-xl mb-2">Tokyo Revengers</h3>
218
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Episode 7: Reunion</p>
219
+ <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
220
+ <span class="flex items-center">
221
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
222
+ 10 min
223
+ </span>
224
+ <span>Added 1 day ago</span>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </section>
230
+ </main>
231
+
232
+ <custom-footer></custom-footer>
233
+
234
+ <script src="components/navbar.js"></script>
235
+ <script src="components/footer.js"></script>
236
+ <script src="script.js"></script>
237
+ <script>
238
+ feather.replace();
239
+ </script>
240
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
241
+ </body>
242
+ </html>
script.js ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Theme toggle functionality
3
+ const themeToggleBtn = document.getElementById('theme-toggle');
4
+ if (themeToggleBtn) {
5
+ themeToggleBtn.addEventListener('click', function() {
6
+ if (document.documentElement.classList.contains('dark')) {
7
+ document.documentElement.classList.remove('dark');
8
+ localStorage.setItem('theme', 'light');
9
+ } else {
10
+ document.documentElement.classList.add('dark');
11
+ localStorage.setItem('theme', 'dark');
12
+ }
13
+ });
14
+ }
15
+
16
+ // Check for saved theme preference or use preferred color scheme
17
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
18
+ document.documentElement.classList.add('dark');
19
+ } else {
20
+ document.documentElement.classList.remove('dark');
21
+ }
22
+
23
+ // Simulate loading anime data (in a real app, this would be an API call)
24
+ setTimeout(() => {
25
+ const loadingElements = document.querySelectorAll('.loading-skeleton');
26
+ loadingElements.forEach(el => el.classList.remove('loading-skeleton'));
27
+ }, 1500);
28
+ });
29
+
30
+ // Video player modal functionality
31
+ function openVideoModal(videoId) {
32
+ const modal = document.getElementById('video-modal');
33
+ modal.classList.remove('hidden');
34
+ document.body.classList.add('overflow-hidden');
35
+ }
36
+
37
+ function closeVideoModal() {
38
+ const modal = document.getElementById('video-modal');
39
+ modal.classList.add('hidden');
40
+ document.body.classList.remove('overflow-hidden');
41
+ }
style.css CHANGED
@@ -1,28 +1,45 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Poppins', sans-serif;
5
+ }
6
+
7
+ .anime-card {
8
+ transition: all 0.3s ease;
9
+ }
10
+
11
+ .anime-card:hover {
12
+ transform: translateY(-5px);
13
  }
14
 
15
+ /* Scrollbar styling */
16
+ ::-webkit-scrollbar {
17
+ width: 8px;
18
+ height: 8px;
19
  }
20
 
21
+ ::-webkit-scrollbar-track {
22
+ background: #f1f1f1;
23
+ border-radius: 10px;
 
 
24
  }
25
 
26
+ ::-webkit-scrollbar-thumb {
27
+ background: #888;
28
+ border-radius: 10px;
 
 
 
29
  }
30
 
31
+ ::-webkit-scrollbar-thumb:hover {
32
+ background: #555;
33
  }
34
+
35
+ .dark ::-webkit-scrollbar-track {
36
+ background: #2d3748;
37
+ }
38
+
39
+ .dark ::-webkit-scrollbar-thumb {
40
+ background: #4a5568;
41
+ }
42
+
43
+ .dark ::-webkit-scrollbar-thumb:hover {
44
+ background: #718096;
45
+ }