Hugging Face's logo

Spaces:
Laayal
/
polycode
Running

App Files Community
Laayal commited on
Commit
2764ee0
·
verified ·
1 Parent(s): c436301

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +592 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Polycode
3
- emoji: 💻
4
- colorFrom: purple
5
- colorTo: blue
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: polycode
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,592 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GamePulse - Latest Gaming News</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #0f172a;
15
+ }
16
+
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
19
+ }
20
+
21
+ .news-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+
26
+ .news-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .tag {
31
+ transition: all 0.2s ease;
32
+ }
33
+
34
+ .tag:hover {
35
+ transform: scale(1.05);
36
+ }
37
+
38
+ .nav-link::after {
39
+ content: '';
40
+ display: block;
41
+ width: 0;
42
+ height: 2px;
43
+ background: #3b82f6;
44
+ transition: width 0.3s;
45
+ }
46
+
47
+ .nav-link:hover::after {
48
+ width: 100%;
49
+ }
50
+
51
+ .search-input:focus {
52
+ outline: none;
53
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="text-gray-100">
58
+ <!-- Header/Navigation -->
59
+ <header class="sticky top-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-slate-800">
60
+ <div class="container mx-auto px-4 py-3">
61
+ <div class="flex justify-between items-center">
62
+ <div class="flex items-center space-x-8">
63
+ <a href="#" class="flex items-center space-x-2">
64
+ <i class="fas fa-gamepad text-blue-500 text-2xl"></i>
65
+ <span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">GamePulse</span>
66
+ </a>
67
+ <nav class="hidden md:flex space-x-6">
68
+ <a href="#" class="nav-link font-medium hover:text-blue-400">Home</a>
69
+ <a href="#" class="nav-link font-medium hover:text-blue-400">News</a>
70
+ <a href="#" class="nav-link font-medium hover:text-blue-400">Reviews</a>
71
+ <a href="#" class="nav-link font-medium hover:text-blue-400">Guides</a>
72
+ <a href="#" class="nav-link font-medium hover:text-blue-400">Esports</a>
73
+ </nav>
74
+ </div>
75
+ <div class="flex items-center space-x-4">
76
+ <div class="relative hidden md:block">
77
+ <input type="text" placeholder="Search games..." class="search-input bg-slate-800 rounded-full py-2 px-4 pl-10 w-64 focus:ring-2 focus:ring-blue-500 text-sm">
78
+ <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
79
+ </div>
80
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full text-sm font-medium transition">
81
+ Sign In
82
+ </button>
83
+ <button id="mobile-menu-button" class="md:hidden text-gray-300 hover:text-white focus:outline-none">
84
+ <i class="fas fa-bars text-xl"></i>
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Mobile Menu -->
91
+ <div id="mobile-menu" class="hidden md:hidden bg-slate-900 px-4 py-2 border-t border-slate-800">
92
+ <div class="flex flex-col space-y-3">
93
+ <a href="#" class="block py-2 hover:text-blue-400">Home</a>
94
+ <a href="#" class="block py-2 hover:text-blue-400">News</a>
95
+ <a href="#" class="block py-2 hover:text-blue-400">Reviews</a>
96
+ <a href="#" class="block py-2 hover:text-blue-400">Guides</a>
97
+ <a href="#" class="block py-2 hover:text-blue-400">Esports</a>
98
+ <div class="relative pt-2">
99
+ <input type="text" placeholder="Search games..." class="search-input bg-slate-800 rounded-full py-2 px-4 pl-10 w-full focus:ring-2 focus:ring-blue-500 text-sm">
100
+ <i class="fas fa-search absolute left-3 top-4 text-gray-400"></i>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </header>
105
+
106
+ <!-- Hero Section -->
107
+ <section class="hero-gradient py-16">
108
+ <div class="container mx-auto px-4">
109
+ <div class="flex flex-col lg:flex-row items-center">
110
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
111
+ <span class="inline-block bg-blue-900 text-blue-300 px-3 py-1 rounded-full text-xs font-semibold mb-4">BREAKING NEWS</span>
112
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Next-Gen Console War Heats Up With Exclusive Game Reveals</h1>
113
+ <p class="text-lg text-gray-300 mb-6">Microsoft and Sony announce blockbuster exclusives coming this holiday season that could shift the balance in the console war.</p>
114
+ <div class="flex flex-wrap gap-3 mb-6">
115
+ <span class="tag bg-slate-800 hover:bg-slate-700 text-blue-400 px-3 py-1 rounded-full text-xs font-medium cursor-pointer">#PS5</span>
116
+ <span class="tag bg-slate-800 hover:bg-slate-700 text-green-400 px-3 py-1 rounded-full text-xs font-medium cursor-pointer">#Xbox</span>
117
+ <span class="tag bg-slate-800 hover:bg-slate-700 text-purple-400 px-3 py-1 rounded-full text-xs font-medium cursor-pointer">#Exclusives</span>
118
+ </div>
119
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center">
120
+ Read Full Story <i class="fas fa-arrow-right ml-2"></i>
121
+ </button>
122
+ </div>
123
+ <div class="lg:w-1/2">
124
+ <div class="relative overflow-hidden rounded-xl shadow-2xl">
125
+ <img src="https://images.unsplash.com/photo-1607853202273-797f1c22a38e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="Next-Gen Consoles" class="w-full h-auto">
126
+ <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"></div>
127
+ <div class="absolute bottom-0 left-0 p-6">
128
+ <p class="text-sm text-gray-300">Image: Concept art from upcoming exclusives</p>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </section>
135
+
136
+ <!-- Main Content -->
137
+ <main class="container mx-auto px-4 py-12">
138
+ <!-- Trending Now Section -->
139
+ <section class="mb-16">
140
+ <div class="flex justify-between items-center mb-8">
141
+ <h2 class="text-2xl font-bold flex items-center">
142
+ <i class="fas fa-fire text-red-500 mr-3"></i> Trending Now
143
+ </h2>
144
+ <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center">
145
+ View All <i class="fas fa-chevron-right ml-1 text-xs"></i>
146
+ </a>
147
+ </div>
148
+
149
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
150
+ <!-- Trending Card 1 -->
151
+ <div class="news-card bg-slate-800 rounded-xl overflow-hidden hover:shadow-lg">
152
+ <div class="relative">
153
+ <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Elden Ring DLC" class="w-full h-48 object-cover">
154
+ <div class="absolute top-3 left-3">
155
+ <span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full font-bold">HOT</span>
156
+ </div>
157
+ </div>
158
+ <div class="p-5">
159
+ <div class="flex items-center text-xs text-gray-400 mb-2">
160
+ <span>Today</span>
161
+ <span class="mx-2">•</span>
162
+ <span>By Alex Johnson</span>
163
+ </div>
164
+ <h3 class="text-xl font-bold mb-2">Elden Ring DLC "Shadow of the Erdtree" Announced</h3>
165
+ <p class="text-gray-300 text-sm mb-4">FromSoftware reveals first details about the highly anticipated expansion coming early next year.</p>
166
+ <div class="flex justify-between items-center">
167
+ <div class="flex space-x-2">
168
+ <span class="tag bg-slate-700 hover:bg-slate-600 text-yellow-400 px-2 py-1 rounded-full text-xs">#RPG</span>
169
+ <span class="tag bg-slate-700 hover:bg-slate-600 text-red-400 px-2 py-1 rounded-full text-xs">#FromSoftware</span>
170
+ </div>
171
+ <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read →</a>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Trending Card 2 -->
177
+ <div class="news-card bg-slate-800 rounded-xl overflow-hidden hover:shadow-lg">
178
+ <div class="relative">
179
+ <img src="https://images.unsplash.com/photo-1598550476439-6847785fcea6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Starfield" class="w-full h-48 object-cover">
180
+ <div class="absolute top-3 left-3">
181
+ <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded-full font-bold">NEW</span>
182
+ </div>
183
+ </div>
184
+ <div class="p-5">
185
+ <div class="flex items-center text-xs text-gray-400 mb-2">
186
+ <span>2 days ago</span>
187
+ <span class="mx-2">•</span>
188
+ <span>By Sarah Miller</span>
189
+ </div>
190
+ <h3 class="text-xl font-bold mb-2">Starfield Review: A Stellar But Flawed Space Epic</h3>
191
+ <p class="text-gray-300 text-sm mb-4">Bethesda's ambitious space RPG delivers breathtaking exploration but stumbles with technical issues.</p>
192
+ <div class="flex justify-between items-center">
193
+ <div class="flex space-x-2">
194
+ <span class="tag bg-slate-700 hover:bg-slate-600 text-blue-400 px-2 py-1 rounded-full text-xs">#Bethesda</span>
195
+ <span class="tag bg-slate-700 hover:bg-slate-600 text-purple-400 px-2 py-1 rounded-full text-xs">#RPG</span>
196
+ </div>
197
+ <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read →</a>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Trending Card 3 -->
203
+ <div class="news-card bg-slate-800 rounded-xl overflow-hidden hover:shadow-lg">
204
+ <div class="relative">
205
+ <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Esports" class="w-full h-48 object-cover">
206
+ <div class="absolute top-3 left-3">
207
+ <span class="bg-green-600 text-white text-xs px-2 py-1 rounded-full font-bold">LIVE</span>
208
+ </div>
209
+ </div>
210
+ <div class="p-5">
211
+ <div class="flex items-center text-xs text-gray-400 mb-2">
212
+ <span>3 hours ago</span>
213
+ <span class="mx-2">•</span>
214
+ <span>By James Chen</span>
215
+ </div>
216
+ <h3 class="text-xl font-bold mb-2">Team Liquid Wins International 2023 in Stunning Upset</h3>
217
+ <p class="text-gray-300 text-sm mb-4">Underdog team takes home $15 million prize in what analysts are calling the greatest finals in esports history.</p>
218
+ <div class="flex justify-between items-center">
219
+ <div class="flex space-x-2">
220
+ <span class="tag bg-slate-700 hover:bg-slate-600 text-green-400 px-2 py-1 rounded-full text-xs">#Esports</span>
221
+ <span class="tag bg-slate-700 hover:bg-slate-600 text-orange-400 px-2 py-1 rounded-full text-xs">#Dota2</span>
222
+ </div>
223
+ <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read →</a>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </section>
229
+
230
+ <!-- Latest News Section -->
231
+ <section class="mb-16">
232
+ <div class="flex justify-between items-center mb-8">
233
+ <h2 class="text-2xl font-bold flex items-center">
234
+ <i class="fas fa-newspaper text-blue-500 mr-3"></i> Latest News
235
+ </h2>
236
+ <div class="flex space-x-2">
237
+ <button class="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1 rounded-lg text-sm font-medium">All</button>
238
+ <button class="bg-slate-800 hover:bg-slate-700 text-gray-300 px-3 py-1 rounded-lg text-sm font-medium">PC</button>
239
+ <button class="bg-slate-800 hover:bg-slate-700 text-gray-300 px-3 py-1 rounded-lg text-sm font-medium">Console</button>
240
+ <button class="bg-slate-800 hover:bg-slate-700 text-gray-300 px-3 py-1 rounded-lg text-sm font-medium">Mobile</button>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
245
+ <!-- News Item 1 -->
246
+ <div class="news-card bg-slate-800 rounded-lg overflow-hidden hover:shadow-lg">
247
+ <img src="https://images.unsplash.com/photo-1560253023-3ec5d502959f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cyberpunk 2077" class="w-full h-40 object-cover">
248
+ <div class="p-4">
249
+ <div class="flex items-center text-xs text-gray-400 mb-2">
250
+ <span>5 hours ago</span>
251
+ </div>
252
+ <h3 class="font-bold mb-2">Cyberpunk 2077 2.0 Update Overhauls Core Systems</h3>
253
+ <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read More →</a>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- News Item 2 -->
258
+ <div class="news-card bg-slate-800 rounded-lg overflow-hidden hover:shadow-lg">
259
+ <img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nintendo Switch" class="w-full h-40 object-cover">
260
+ <div class="p-4">
261
+ <div class="flex items-center text-xs text-gray-400 mb-2">
262
+ <span>7 hours ago</span>
263
+ </div>
264
+ <h3 class="font-bold mb-2">Nintendo Switch 2 Specs Leak Suggests 4K Support</h3>
265
+ <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read More →</a>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- News Item 3 -->
270
+ <div class="news-card bg-slate-800 rounded-lg overflow-hidden hover:shadow-lg">
271
+ <img src="https://images.unsplash.com/photo-1612287230202-1ff1d85d1b15?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="GTA 6" class="w-full h-40 object-cover">
272
+ <div class="p-4">
273
+ <div class="flex items-center text-xs text-gray-400 mb-2">
274
+ <span>10 hours ago</span>
275
+ </div>
276
+ <h3 class="font-bold mb-2">GTA 6 Development Progress Reportedly Ahead of Schedule</h3>
277
+ <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read More →</a>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- News Item 4 -->
282
+ <div class="news-card bg-slate-800 rounded-lg overflow-hidden hover:shadow-lg">
283
+ <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="VR Gaming" class="w-full h-40 object-cover">
284
+ <div class="p-4">
285
+ <div class="flex items-center text-xs text-gray-400 mb-2">
286
+ <span>12 hours ago</span>
287
+ </div>
288
+ <h3 class="font-bold mb-2">New VR Headset From Valve Rumored for 2024 Release</h3>
289
+ <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Read More →</a>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </section>
294
+
295
+ <!-- Featured Reviews Section -->
296
+ <section class="mb-16">
297
+ <div class="flex justify-between items-center mb-8">
298
+ <h2 class="text-2xl font-bold flex items-center">
299
+ <i class="fas fa-star text-yellow-500 mr-3"></i> Featured Reviews
300
+ </h2>
301
+ <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center">
302
+ View All Reviews <i class="fas fa-chevron-right ml-1 text-xs"></i>
303
+ </a>
304
+ </div>
305
+
306
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
307
+ <!-- Review 1 -->
308
+ <div class="news-card bg-slate-800 rounded-xl overflow-hidden hover:shadow-lg flex flex-col lg:flex-row">
309
+ <div class="lg:w-1/3">
310
+ <img src="https://images.unsplash.com/photo-1638549501416-57f5f543a6fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Baldur's Gate 3" class="w-full h-full object-cover">
311
+ </div>
312
+ <div class="lg:w-2/3 p-6">
313
+ <div class="flex items-center justify-between mb-3">
314
+ <span class="text-xs text-gray-400">September 5, 2023</span>
315
+ <div class="flex items-center bg-slate-900 px-2 py-1 rounded-full">
316
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
317
+ <span class="text-xs font-bold">9.5/10</span>
318
+ </div>
319
+ </div>
320
+ <h3 class="text-xl font-bold mb-2">Baldur's Gate 3 Review: A Masterclass in RPG Design</h3>
321
+ <p class="text-gray-300 text-sm mb-4">Larian Studios delivers what might be the greatest CRPG ever made, with unparalleled depth, choice, and storytelling.</p>
322
+ <div class="flex items-center">
323
+ <div class="w-8 h-8 rounded-full overflow-hidden mr-3">
324
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer" class="w-full h-full object-cover">
325
+ </div>
326
+ <span class="text-sm text-gray-300">By Michael Thompson</span>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Review 2 -->
332
+ <div class="news-card bg-slate-800 rounded-xl overflow-hidden hover:shadow-lg flex flex-col lg:flex-row">
333
+ <div class="lg:w-1/3">
334
+ <img src="https://images.unsplash.com/photo-1633613286848-e6f43bbafb8d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Final Fantasy XVI" class="w-full h-full object-cover">
335
+ </div>
336
+ <div class="lg:w-2/3 p-6">
337
+ <div class="flex items-center justify-between mb-3">
338
+ <span class="text-xs text-gray-400">August 20, 2023</span>
339
+ <div class="flex items-center bg-slate-900 px-2 py-1 rounded-full">
340
+ <i class="fas fa-star text-yellow-400 text-xs mr-1"></i>
341
+ <span class="text-xs font-bold">8.8/10</span>
342
+ </div>
343
+ </div>
344
+ <h3 class="text-xl font-bold mb-2">Final Fantasy XVI: A Bold New Direction for the Series</h3>
345
+ <p class="text-gray-300 text-sm mb-4">Square Enix takes risks with this action-focused entry, delivering spectacular battles but sacrificing some RPG depth.</p>
346
+ <div class="flex items-center">
347
+ <div class="w-8 h-8 rounded-full overflow-hidden mr-3">
348
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer" class="w-full h-full object-cover">
349
+ </div>
350
+ <span class="text-sm text-gray-300">By Jessica Lee</span>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </section>
356
+
357
+ <!-- Upcoming Releases Section -->
358
+ <section>
359
+ <div class="flex justify-between items-center mb-8">
360
+ <h2 class="text-2xl font-bold flex items-center">
361
+ <i class="fas fa-calendar-alt text-purple-500 mr-3"></i> Upcoming Releases
362
+ </h2>
363
+ <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center">
364
+ View Release Calendar <i class="fas fa-chevron-right ml-1 text-xs"></i>
365
+ </a>
366
+ </div>
367
+
368
+ <div class="overflow-x-auto">
369
+ <div class="inline-block min-w-full align-middle">
370
+ <div class="overflow-hidden shadow rounded-lg">
371
+ <table class="min-w-full divide-y divide-slate-700">
372
+ <thead class="bg-slate-800">
373
+ <tr>
374
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Game</th>
375
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Platform</th>
376
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Release Date</th>
377
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Developer</th>
378
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Genre</th>
379
+ </tr>
380
+ </thead>
381
+ <tbody class="bg-slate-800 divide-y divide-slate-700">
382
+ <tr class="hover:bg-slate-700/50 transition">
383
+ <td class="px-6 py-4 whitespace-nowrap">
384
+ <div class="flex items-center">
385
+ <div class="flex-shrink-0 h-10 w-10">
386
+ <img class="h-10 w-10 rounded" src="https://upload.wikimedia.org/wikipedia/en/0/05/Spiderman_2_cover.jpg" alt="Spider-Man 2">
387
+ </div>
388
+ <div class="ml-4">
389
+ <div class="text-sm font-medium text-white">Marvel's Spider-Man 2</div>
390
+ </div>
391
+ </div>
392
+ </td>
393
+ <td class="px-6 py-4 whitespace-nowrap">
394
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-900 text-blue-300">PS5</span>
395
+ </td>
396
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">October 20, 2023</td>
397
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Insomniac Games</td>
398
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Action-Adventure</td>
399
+ </tr>
400
+ <tr class="hover:bg-slate-700/50 transition">
401
+ <td class="px-6 py-4 whitespace-nowrap">
402
+ <div class="flex items-center">
403
+ <div class="flex-shrink-0 h-10 w-10">
404
+ <img class="h-10 w-10 rounded" src="https://upload.wikimedia.org/wikipedia/en/9/9f/Super_Mario_Bros_Wonder.jpg" alt="Super Mario Bros. Wonder">
405
+ </div>
406
+ <div class="ml-4">
407
+ <div class="text-sm font-medium text-white">Super Mario Bros. Wonder</div>
408
+ </div>
409
+ </div>
410
+ </td>
411
+ <td class="px-6 py-4 whitespace-nowrap">
412
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-300">Switch</span>
413
+ </td>
414
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">October 20, 2023</td>
415
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Nintendo EPD</td>
416
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Platformer</td>
417
+ </tr>
418
+ <tr class="hover:bg-slate-700/50 transition">
419
+ <td class="px-6 py-4 whitespace-nowrap">
420
+ <div class="flex items-center">
421
+ <div class="flex-shrink-0 h-10 w-10">
422
+ <img class="h-10 w-10 rounded" src="https://upload.wikimedia.org/wikipedia/en/thumb/1/1f/Alan_Wake_2_cover.jpg/220px-Alan_Wake_2_cover.jpg" alt="Alan Wake 2">
423
+ </div>
424
+ <div class="ml-4">
425
+ <div class="text-sm font-medium text-white">Alan Wake 2</div>
426
+ </div>
427
+ </div>
428
+ </td>
429
+ <td class="px-6 py-4 whitespace-nowrap">
430
+ <div class="flex space-x-1">
431
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">PC</span>
432
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-900 text-blue-300">PS5</span>
433
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-600 text-white">Xbox</span>
434
+ </div>
435
+ </td>
436
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">October 27, 2023</td>
437
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Remedy Entertainment</td>
438
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Survival Horror</td>
439
+ </tr>
440
+ <tr class="hover:bg-slate-700/50 transition">
441
+ <td class="px-6 py-4 whitespace-nowrap">
442
+ <div class="flex items-center">
443
+ <div class="flex-shrink-0 h-10 w-10">
444
+ <img class="h-10 w-10 rounded" src="https://upload.wikimedia.org/wikipedia/en/thumb/4/4f/Call_of_Duty_Modern_Warfare_III_cover.jpg/220px-Call_of_Duty_Modern_Warfare_III_cover.jpg" alt="Call of Duty">
445
+ </div>
446
+ <div class="ml-4">
447
+ <div class="text-sm font-medium text-white">Call of Duty: Modern Warfare III</div>
448
+ </div>
449
+ </div>
450
+ </td>
451
+ <td class="px-6 py-4 whitespace-nowrap">
452
+ <div class="flex space-x-1">
453
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300">PC</span>
454
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-900 text-blue-300">PS5</span>
455
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-600 text-white">Xbox</span>
456
+ </div>
457
+ </td>
458
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">November 10, 2023</td>
459
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Sledgehammer Games</td>
460
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">FPS</td>
461
+ </tr>
462
+ </tbody>
463
+ </table>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </section>
468
+ </main>
469
+
470
+ <!-- Newsletter Section -->
471
+ <section class="bg-gradient-to-r from-blue-900/50 to-purple-900/50 py-16">
472
+ <div class="container mx-auto px-4">
473
+ <div class="max-w-3xl mx-auto text-center">
474
+ <h2 class="text-3xl font-bold mb-4">Stay Updated With Gaming News</h2>
475
+ <p class="text-gray-300 mb-8">Subscribe to our newsletter and never miss the latest gaming news, reviews, and exclusive content.</p>
476
+ <div class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
477
+ <input type="email" placeholder="Your email address" class="flex-grow bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
478
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition">Subscribe</button>
479
+ </div>
480
+ <p class="text-xs text-gray-400 mt-3">We respect your privacy. Unsubscribe at any time.</p>
481
+ </div>
482
+ </div>
483
+ </section>
484
+
485
+ <!-- Footer -->
486
+ <footer class="bg-slate-900 border-t border-slate-800">
487
+ <div class="container mx-auto px-4 py-12">
488
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
489
+ <div>
490
+ <a href="#" class="flex items-center space-x-2 mb-4">
491
+ <i class="fas fa-gamepad text-blue-500 text-2xl"></i>
492
+ <span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">GamePulse</span>
493
+ </a>
494
+ <p class="text-gray-400 text-sm">Your premier destination for the latest in gaming news, reviews, and community.</p>
495
+ <div class="flex space-x-4 mt-4">
496
+ <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-twitter"></i></a>
497
+ <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-facebook"></i></a>
498
+ <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-instagram"></i></a>
499
+ <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-discord"></i></a>
500
+ <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-youtube"></i></a>
501
+ </div>
502
+ </div>
503
+ <div>
504
+ <h3 class="text-lg font-semibold text-white mb-4">Categories</h3>
505
+ <ul class="space-y-2">
506
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">News</a></li>
507
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Reviews</a></li>
508
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Guides</a></li>
509
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Esports</a></li>
510
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Indie Games</a></li>
511
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Hardware</a></li>
512
+ </ul>
513
+ </div>
514
+ <div>
515
+ <h3 class="text-lg font-semibold text-white mb-4">Platforms</h3>
516
+ <ul class="space-y-2">
517
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">PC</a></li>
518
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">PlayStation 5</a></li>
519
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Xbox Series X/S</a></li>
520
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Nintendo Switch</a></li>
521
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Mobile</a></li>
522
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">VR</a></li>
523
+ </ul>
524
+ </div>
525
+ <div>
526
+ <h3 class="text-lg font-semibold text-white mb-4">Company</h3>
527
+ <ul class="space-y-2">
528
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">About Us</a></li>
529
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Contact</a></li>
530
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Privacy Policy</a></li>
531
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Terms of Service</a></li>
532
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Advertise</a></li>
533
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Careers</a></li>
534
+ </ul>
535
+ </div>
536
+ </div>
537
+ <div class="border-t border-slate-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
538
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 GamePulse. All rights reserved.</p>
539
+ <div class="flex space-x-6">
540
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm">Privacy Policy</a>
541
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm">Terms of Service</a>
542
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm">Cookie Policy</a>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </footer>
547
+
548
+ <script>
549
+ // Mobile menu toggle
550
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
551
+ const menu = document.getElementById('mobile-menu');
552
+ menu.classList.toggle('hidden');
553
+
554
+ // Change icon based on menu state
555
+ const icon = this.querySelector('i');
556
+ if (menu.classList.contains('hidden')) {
557
+ icon.classList.remove('fa-times');
558
+ icon.classList.add('fa-bars');
559
+ } else {
560
+ icon.classList.remove('fa-bars');
561
+ icon.classList.add('fa-times');
562
+ }
563
+ });
564
+
565
+ // Dark mode toggle (example functionality)
566
+ const darkModeToggle = document.createElement('button');
567
+ darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
568
+ darkModeToggle.className = 'fixed bottom-6 right-6 bg-slate-800 w-12 h-12 rounded-full shadow-lg flex items-center justify-center text-xl hover:bg-slate-700 transition z-50';
569
+ document.body.appendChild(darkModeToggle);
570
+
571
+ darkModeToggle.addEventListener('click', function() {
572
+ document.documentElement.classList.toggle('dark');
573
+ const icon = this.querySelector('i');
574
+ if (document.documentElement.classList.contains('dark')) {
575
+ icon.classList.remove('fa-moon');
576
+ icon.classList.add('fa-sun');
577
+ } else {
578
+ icon.classList.remove('fa-sun');
579
+ icon.classList.add('fa-moon');
580
+ }
581
+ });
582
+
583
+ // Simulate loading more news when scrolling to bottom
584
+ window.addEventListener('scroll', function() {
585
+ if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
586
+ // In a real app, you would fetch more content here
587
+ console.log('Load more content...');
588
+ }
589
+ });
590
+ </script>
591
+ <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=Laayal/polycode" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
592
+ </html>