Hugging Face's logo

Spaces:
WartenWeg
/
bayede-zulu
Running

App Files Community
WartenWeg commited on
Commit
4b657a5
·
verified ·
1 Parent(s): 1218c26

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +379 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bayede Zulu
3
- emoji: 🐨
4
- colorFrom: pink
5
- colorTo: indigo
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: bayede-zulu
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
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,379 @@
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>Bayede Zulu Newspaper</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
+ /* Custom CSS for elements that need more styling than Tailwind provides */
11
+ .newspaper-texture {
12
+ background-image: url('https://www.transparenttextures.com/patterns/rice-paper-3.png');
13
+ background-color: #f9f9f9;
14
+ }
15
+ .dark .newspaper-texture {
16
+ background-image: url('https://www.transparenttextures.com/patterns/dark-wood.png');
17
+ background-color: #111;
18
+ }
19
+ .social-popup {
20
+ opacity: 0;
21
+ visibility: hidden;
22
+ transition: all 0.3s ease;
23
+ }
24
+ .social-popup.active {
25
+ opacity: 1;
26
+ visibility: visible;
27
+ }
28
+ .weather-icon {
29
+ filter: invert(0);
30
+ }
31
+ .dark .weather-icon {
32
+ filter: invert(1);
33
+ }
34
+ .headline-border {
35
+ border-bottom: 3px double #000;
36
+ }
37
+ .dark .headline-border {
38
+ border-bottom: 3px double #fff;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-white dark:bg-gray-900 transition-colors duration-300">
43
+ <!-- Header Section -->
44
+ <header class="py-4 px-4 md:px-8 border-b border-gray-200 dark:border-gray-700">
45
+ <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
46
+ <!-- Date, Time and Weather -->
47
+ <div class="flex items-center space-x-4 mb-4 md:mb-0">
48
+ <div id="current-date" class="text-sm font-serif dark:text-white"></div>
49
+ <div id="current-time" class="text-sm font-serif dark:text-white"></div>
50
+ <div class="flex items-center">
51
+ <span id="weather-icon" class="weather-icon mr-1"><i class="fas fa-cloud-sun"></i></span>
52
+ <span id="weather-temp" class="text-sm font-serif dark:text-white">24°C</span>
53
+ </div>
54
+ </div>
55
+
56
+ <!-- Logo and Title -->
57
+ <div class="text-center mb-4 md:mb-0">
58
+ <h1 class="text-3xl md:text-4xl font-bold font-serif uppercase tracking-wider dark:text-white">Bayede Zulu</h1>
59
+ <p class="text-xs italic dark:text-gray-300">The Voice of the Nation</p>
60
+ </div>
61
+
62
+ <!-- Dark Mode Toggle and Social -->
63
+ <div class="flex items-center space-x-4">
64
+ <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
65
+ <i class="fas fa-moon dark:hidden"></i>
66
+ <i class="fas fa-sun hidden dark:inline"></i>
67
+ </button>
68
+ <button id="share-btn" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
69
+ <i class="fas fa-share-alt dark:text-white"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </header>
74
+
75
+ <!-- Social Share Popup -->
76
+ <div id="social-popup" class="social-popup fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl z-50 max-w-xs w-full">
77
+ <div class="flex justify-between items-center mb-4">
78
+ <h3 class="text-lg font-bold dark:text-white">Share Article</h3>
79
+ <button id="close-popup" class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100">
80
+ <i class="fas fa-times"></i>
81
+ </button>
82
+ </div>
83
+ <div class="grid grid-cols-2 gap-4">
84
+ <a href="#" class="bg-blue-600 text-white p-3 rounded flex items-center justify-center hover:bg-blue-700 transition">
85
+ <i class="fab fa-facebook-f mr-2"></i> Facebook
86
+ </a>
87
+ <a href="#" class="bg-blue-400 text-white p-3 rounded flex items-center justify-center hover:bg-blue-500 transition">
88
+ <i class="fab fa-twitter mr-2"></i> Twitter
89
+ </a>
90
+ <a href="#" class="bg-green-500 text-white p-3 rounded flex items-center justify-center hover:bg-green-600 transition">
91
+ <i class="fab fa-whatsapp mr-2"></i> WhatsApp
92
+ </a>
93
+ <a href="#" class="bg-red-500 text-white p-3 rounded flex items-center justify-center hover:bg-red-600 transition">
94
+ <i class="fab fa-pinterest-p mr-2"></i> Pinterest
95
+ </a>
96
+ <a href="#" class="bg-blue-700 text-white p-3 rounded flex items-center justify-center hover:bg-blue-800 transition col-span-2">
97
+ <i class="fab fa-linkedin-in mr-2"></i> LinkedIn
98
+ </a>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Navigation -->
103
+ <nav class="bg-black text-white py-2 px-4 sticky top-0 z-40">
104
+ <div class="container mx-auto">
105
+ <ul class="flex flex-wrap justify-center space-x-1 md:space-x-4 text-xs md:text-sm uppercase font-bold">
106
+ <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Home</a></li>
107
+ <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Politics</a></li>
108
+ <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Business</a></li>
109
+ <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Sports</a></li>
110
+ <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Entertainment</a></li>
111
+ <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Health</a></li>
112
+ <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Technology</a></li>
113
+ <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Opinion</a></li>
114
+ </ul>
115
+ </div>
116
+ </nav>
117
+
118
+ <!-- Main Content -->
119
+ <main class="container mx-auto px-4 py-8 newspaper-texture">
120
+ <!-- Breaking News Ticker -->
121
+ <div class="bg-red-700 text-white px-4 py-2 mb-6 flex items-center">
122
+ <span class="font-bold mr-3 whitespace-nowrap">BREAKING NEWS:</span>
123
+ <div class="overflow-hidden">
124
+ <div id="ticker" class="whitespace-nowrap animate-marquee">
125
+ President to address nation tonight on economic recovery plan • New COVID variant detected in three provinces • Local team reaches continental finals for first time in history
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Featured Article -->
131
+ <article class="mb-12">
132
+ <div class="headline-border pb-4 mb-6">
133
+ <span class="text-sm uppercase font-bold tracking-wider text-gray-500 dark:text-gray-400">Featured Story</span>
134
+ <h2 class="text-3xl md:text-4xl font-bold font-serif mt-2 dark:text-white">Historic Agreement Reached Between Traditional Leaders and Government</h2>
135
+ <div class="flex items-center mt-2 text-sm text-gray-600 dark:text-gray-300">
136
+ <span>By Thando Mkhize</span>
137
+ <span class="mx-2">•</span>
138
+ <span>3 hours ago</span>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="grid md:grid-cols-3 gap-8">
143
+ <div class="md:col-span-2">
144
+ <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
145
+ alt="Traditional leaders meeting" class="w-full h-auto mb-4">
146
+ <p class="text-lg font-serif mb-4 dark:text-gray-200">
147
+ In a landmark decision that could reshape local governance, traditional leaders from across the province have reached an agreement with national government representatives on the contentious issue of land administration and development rights.
148
+ </p>
149
+ <p class="font-serif mb-4 dark:text-gray-300">
150
+ The marathon negotiations, which lasted nearly 72 hours, resulted in a compromise that preserves traditional authority while allowing for modern development frameworks. The agreement comes after months of protests and legal battles that had threatened to destabilize the region.
151
+ </p>
152
+ <p class="font-serif mb-4 dark:text-gray-300">
153
+ "This is a victory for all our people," said Inkosi Zwelibanzi Mthethwa, spokesperson for the traditional council. "We have shown that our ancient systems can work hand in hand with contemporary governance structures."
154
+ </p>
155
+ <div class="flex justify-between items-center mt-8 border-t border-gray-200 dark:border-gray-700 pt-4">
156
+ <div class="flex space-x-4">
157
+ <button class="text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white">
158
+ <i class="far fa-comment mr-1"></i> 24 Comments
159
+ </button>
160
+ <button id="article-share" class="text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white">
161
+ <i class="fas fa-share mr-1"></i> Share
162
+ </button>
163
+ </div>
164
+ <button class="text-black dark:text-white font-bold hover:underline">
165
+ Read Full Story <i class="fas fa-arrow-right ml-1"></i>
166
+ </button>
167
+ </div>
168
+ </div>
169
+
170
+ <div class="md:col-span-1">
171
+ <!-- Sidebar Latest News -->
172
+ <div class="bg-gray-100 dark:bg-gray-800 p-4 mb-6">
173
+ <h3 class="text-lg font-bold mb-4 dark:text-white">Latest Updates</h3>
174
+ <ul class="space-y-4">
175
+ <li class="border-b border-gray-200 dark:border-gray-700 pb-3">
176
+ <a href="#" class="hover:text-red-700 dark:hover:text-red-400 transition">
177
+ <h4 class="font-bold dark:text-gray-200">Education Dept Announces New School Calendar</h4>
178
+ <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">2 hours ago</p>
179
+ </a>
180
+ </li>
181
+ <li class="border-b border-gray-200 dark:border-gray-700 pb-3">
182
+ <a href="#" class="hover:text-red-700 dark:hover:text-red-400 transition">
183
+ <h4 class="font-bold dark:text-gray-200">Local Entrepreneur Wins Continental Award</h4>
184
+ <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">4 hours ago</p>
185
+ </a>
186
+ </li>
187
+ <li class="border-b border-gray-200 dark:border-gray-700 pb-3">
188
+ <a href="#" class="hover:text-red-700 dark:hover:text-red-400 transition">
189
+ <h4 class="font-bold dark:text-gray-200">Weather Service Warns of Heavy Rains This Weekend</h4>
190
+ <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">6 hours ago</p>
191
+ </a>
192
+ </li>
193
+ <li class="pb-3">
194
+ <a href="#" class="hover:text-red-700 dark:hover:text-red-400 transition">
195
+ <h4 class="font-bold dark:text-gray-200">New Archaeological Find Rewrites Regional History</h4>
196
+ <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Yesterday</p>
197
+ </a>
198
+ </li>
199
+ </ul>
200
+ </div>
201
+
202
+ <!-- Newsletter Signup -->
203
+ <div class="bg-gray-800 text-white p-4">
204
+ <h3 class="text-lg font-bold mb-2">Stay Informed</h3>
205
+ <p class="text-sm mb-4">Subscribe to our daily newsletter for the top stories delivered to your inbox</p>
206
+ <form class="space-y-3">
207
+ <input type="text" placeholder="Your Name" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white placeholder-gray-400">
208
+ <input type="email" placeholder="Email Address" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white placeholder-gray-400">
209
+ <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded font-bold transition">Subscribe</button>
210
+ </form>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </article>
215
+
216
+ <!-- More Articles Grid -->
217
+ <section class="mb-12">
218
+ <h3 class="text-2xl font-bold font-serif mb-6 dark:text-white headline-border pb-2">More Stories</h3>
219
+ <div class="grid md:grid-cols-3 gap-6">
220
+ <!-- Article 1 -->
221
+ <article class="border border-gray-200 dark:border-gray-700 rounded overflow-hidden hover:shadow-lg transition">
222
+ <img src="https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
223
+ alt="Construction site" class="w-full h-48 object-cover">
224
+ <div class="p-4">
225
+ <span class="text-xs uppercase font-bold text-red-600">Business</span>
226
+ <h4 class="font-bold text-lg mt-1 mb-2 dark:text-white">New Industrial Park to Create 5,000 Jobs</h4>
227
+ <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">The R2.3 billion development is set to transform the local economy with manufacturing and logistics opportunities.</p>
228
+ <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
229
+ <span>By Nomsa Dlamini</span>
230
+ <span>5 hours ago</span>
231
+ </div>
232
+ </div>
233
+ </article>
234
+
235
+ <!-- Article 2 -->
236
+ <article class="border border-gray-200 dark:border-gray-700 rounded overflow-hidden hover:shadow-lg transition">
237
+ <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1605&q=80"
238
+ alt="Football match" class="w-full h-48 object-cover">
239
+ <div class="p-4">
240
+ <span class="text-xs uppercase font-bold text-green-600">Sports</span>
241
+ <h4 class="font-bold text-lg mt-1 mb-2 dark:text-white">Local Team Secures Historic Finals Berth</h4>
242
+ <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">After a thrilling penalty shootout, the underdogs advance to their first continental championship final.</p>
243
+ <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
244
+ <span>By Sipho Khumalo</span>
245
+ <span>Yesterday</span>
246
+ </div>
247
+ </div>
248
+ </article>
249
+
250
+ <!-- Article 3 -->
251
+ <article class="border border-gray-200 dark:border-gray-700 rounded overflow-hidden hover:shadow-lg transition">
252
+ <img src="https://images.unsplash.com/photo-1581093057305-25a8e1c0e34d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
253
+ alt="Science lab" class="w-full h-48 object-cover">
254
+ <div class="p-4">
255
+ <span class="text-xs uppercase font-bold text-blue-600">Technology</span>
256
+ <h4 class="font-bold text-lg mt-1 mb-2 dark:text-white">University Researchers Make Clean Energy Breakthrough</h4>
257
+ <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">The new battery technology could make renewable energy storage more affordable and efficient.</p>
258
+ <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
259
+ <span>By Dr. James Molefe</span>
260
+ <span>2 days ago</span>
261
+ </div>
262
+ </div>
263
+ </article>
264
+ </div>
265
+ </section>
266
+ </main>
267
+
268
+ <!-- Footer -->
269
+ <footer class="bg-black text-white py-8 px-4">
270
+ <div class="container mx-auto">
271
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
272
+ <div>
273
+ <h4 class="text-lg font-bold mb-4">Bayede Zulu</h4>
274
+ <p class="text-sm text-gray-400">The most trusted source for news and information in the region since 1985.</p>
275
+ </div>
276
+ <div>
277
+ <h4 class="text-lg font-bold mb-4">Sections</h4>
278
+ <ul class="space-y-2 text-sm text-gray-400">
279
+ <li><a href="#" class="hover:text-white transition">News</a></li>
280
+ <li><a href="#" class="hover:text-white transition">Politics</a></li>
281
+ <li><a href="#" class="hover:text-white transition">Business</a></li>
282
+ <li><a href="#" class="hover:text-white transition">Sports</a></li>
283
+ <li><a href="#" class="hover:text-white transition">Entertainment</a></li>
284
+ </ul>
285
+ </div>
286
+ <div>
287
+ <h4 class="text-lg font-bold mb-4">Company</h4>
288
+ <ul class="space-y-2 text-sm text-gray-400">
289
+ <li><a href="#" class="hover:text-white transition">About Us</a></li>
290
+ <li><a href="#" class="hover:text-white transition">Contact</a></li>
291
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
292
+ <li><a href="#" class="hover:text-white transition">Advertise</a></li>
293
+ <li><a href="#" class="hover:text-white transition">Ethics Policy</a></li>
294
+ </ul>
295
+ </div>
296
+ <div>
297
+ <h4 class="text-lg font-bold mb-4">Connect</h4>
298
+ <div class="flex space-x-4 mb-4">
299
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
300
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
301
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
302
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
303
+ </div>
304
+ <p class="text-sm text-gray-400">Subscribe to our newsletters for daily updates.</p>
305
+ </div>
306
+ </div>
307
+ <div class="border-t border-gray-800 pt-6 text-sm text-gray-400 text-center">
308
+ <p>© 2023 Bayede Zulu. All rights reserved. | <a href="#" class="hover:text-white transition">Privacy Policy</a> | <a href="#" class="hover:text-white transition">Terms of Service</a></p>
309
+ </div>
310
+ </div>
311
+ </footer>
312
+
313
+ <script>
314
+ // Dark/Light Mode Toggle
315
+ const themeToggle = document.getElementById('theme-toggle');
316
+ const html = document.documentElement;
317
+
318
+ // Check for saved user preference or use system preference
319
+ const savedTheme = localStorage.getItem('theme') ||
320
+ (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
321
+ html.classList.add(savedTheme);
322
+
323
+ themeToggle.addEventListener('click', () => {
324
+ html.classList.toggle('dark');
325
+ const theme = html.classList.contains('dark') ? 'dark' : 'light';
326
+ localStorage.setItem('theme', theme);
327
+ });
328
+
329
+ // Date and Time Display
330
+ function updateDateTime() {
331
+ const now = new Date();
332
+ const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
333
+ document.getElementById('current-date').textContent = now.toLocaleDateString('en-ZA', options);
334
+ document.getElementById('current-time').textContent = now.toLocaleTimeString('en-ZA', { hour: '2-digit', minute: '2-digit' });
335
+ }
336
+ updateDateTime();
337
+ setInterval(updateDateTime, 60000); // Update every minute
338
+
339
+ // Weather Simulation (in a real scenario, you would use a weather API)
340
+ function updateWeather() {
341
+ const weatherConditions = [
342
+ { icon: 'fa-sun', temp: '28°C' },
343
+ { icon: 'fa-cloud-sun', temp: '24°C' },
344
+ { icon: 'fa-cloud', temp: '21°C' },
345
+ { icon: 'fa-cloud-rain', temp: '18°C' }
346
+ ];
347
+ const randomWeather = weatherConditions[Math.floor(Math.random() * weatherConditions.length)];
348
+ document.getElementById('weather-icon').innerHTML = `<i class="fas ${randomWeather.icon}"></i>`;
349
+ document.getElementById('weather-temp').textContent = randomWeather.temp;
350
+ }
351
+ updateWeather();
352
+
353
+ // Social Share Popup
354
+ const shareBtn = document.getElementById('share-btn');
355
+ const articleShareBtn = document.getElementById('article-share');
356
+ const socialPopup = document.getElementById('social-popup');
357
+ const closePopup = document.getElementById('close-popup');
358
+
359
+ function togglePopup() {
360
+ socialPopup.classList.toggle('active');
361
+ }
362
+
363
+ shareBtn.addEventListener('click', togglePopup);
364
+ articleShareBtn.addEventListener('click', togglePopup);
365
+ closePopup.addEventListener('click', togglePopup);
366
+
367
+ // Close popup when clicking outside
368
+ window.addEventListener('click', (e) => {
369
+ if (e.target === socialPopup) {
370
+ togglePopup();
371
+ }
372
+ });
373
+
374
+ // Marquee Animation for Ticker
375
+ const ticker = document.getElementById('ticker');
376
+ ticker.style.animationDuration = '30s';
377
+ </script>
378
+ <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=WartenWeg/bayede-zulu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
379
+ </html>