Hugging Face's logo

Spaces:
Cairo303
/
anycoder-a6cac0b5
Running

App Files Community
Cairo303 commited on
Commit
d7447fa
·
verified ·
1 Parent(s): 8189b7e

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +456 -19
index.html CHANGED
@@ -1,19 +1,456 @@
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>The Daily Chronicle - Online Newspaper</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/react@18.0.0/umd/react.development.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/react-dom@18.0.0/umd/react-dom.development.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.js"></script>
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
12
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+ .playfair {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+ .newspaper-bg {
21
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
22
+ }
23
+ .article-card {
24
+ transition: all 0.3s ease;
25
+ }
26
+ .article-card:hover {
27
+ transform: translateY(-5px);
28
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
29
+ }
30
+ .category-pill {
31
+ transition: all 0.2s ease;
32
+ }
33
+ .category-pill:hover {
34
+ transform: scale(1.05);
35
+ }
36
+ .lotto-ball {
37
+ animation: bounce 2s infinite;
38
+ }
39
+ @keyframes bounce {
40
+ 0%, 100% { transform: translateY(0); }
41
+ 50% { transform: translateY(-10px); }
42
+ }
43
+ .scrollbar-hide {
44
+ -ms-overflow-style: none;
45
+ scrollbar-width: none;
46
+ }
47
+ .scrollbar-hide::-webkit-scrollbar {
48
+ display: none;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="newspaper-bg min-h-screen">
53
+ <div id="root"></div>
54
+
55
+ <script type="text/babel">
56
+ const { useState, useEffect } = React;
57
+
58
+ const categories = [
59
+ { id: 1, name: "News", color: "bg-blue-500", icon: "fas fa-newspaper" },
60
+ { id: 2, name: "Politics", color: "bg-red-500", icon: "fas fa-gavel" },
61
+ { id: 3, name: "Sports", color: "bg-green-500", icon: "fas fa-futbol" },
62
+ { id: 4, name: "Entertainment", color: "bg-purple-500", icon: "fas fa-film" },
63
+ { id: 5, name: "Technology", color: "bg-indigo-500", icon: "fas fa-laptop" },
64
+ { id: 6, name: "Business", color: "bg-yellow-500", icon: "fas fa-chart-line" }
65
+ ];
66
+
67
+ const mockArticles = [
68
+ {
69
+ id: 1,
70
+ title: "Major Political Shift in City Council",
71
+ content: "In a surprising turn of events, the city council has passed a new bill that will reshape the urban landscape for years to come...",
72
+ author: "John Doe",
73
+ category: 2,
74
+ date: "2024-01-15",
75
+ likes: 234,
76
+ comments: 45,
77
+ image: "https://picsum.photos/seed/politics/400/200.jpg"
78
+ },
79
+ {
80
+ id: 2,
81
+ title: "Local Team Wins Championship",
82
+ content: "The hometown heroes have done it again! After a thrilling final match, our local team has secured the championship title...",
83
+ author: "Sarah Smith",
84
+ category: 3,
85
+ date: "2024-01-14",
86
+ likes: 567,
87
+ comments: 89,
88
+ image: "https://picsum.photos/seed/sports/400/200.jpg"
89
+ },
90
+ {
91
+ id: 3,
92
+ title: "Tech Startup Raises $10M",
93
+ content: "A promising new technology startup has secured major funding, positioning itself as a leader in the AI space...",
94
+ author: "Mike Johnson",
95
+ category: 5,
96
+ date: "2024-01-13",
97
+ likes: 189,
98
+ comments: 23,
99
+ image: "https://picsum.photos/seed/tech/400/200.jpg"
100
+ },
101
+ {
102
+ id: 4,
103
+ title: "New Restaurant Opens Downtown",
104
+ content: "Food enthusiasts rejoice! A new gourmet restaurant has opened its doors in the heart of downtown, offering a unique culinary experience...",
105
+ author: "Emma Wilson",
106
+ category: 4,
107
+ date: "2024-01-12",
108
+ likes: 145,
109
+ comments: 34,
110
+ image: "https://picsum.photos/seed/food/400/200.jpg"
111
+ },
112
+ {
113
+ id: 5,
114
+ title: "Stock Market Reaches New High",
115
+ content: "The stock market has hit an all-time high today, with investors showing renewed confidence in the economy...",
116
+ author: "Robert Chen",
117
+ category: 6,
118
+ date: "2024-01-11",
119
+ likes: 321,
120
+ comments: 56,
121
+ image: "https://picsum.photos/seed/finance/400/200.jpg"
122
+ }
123
+ ];
124
+
125
+ const rankings = [
126
+ { rank: 1, name: "DragonSlayer", points: 15420, avatar: "https://picsum.photos/seed/user1/50/50.jpg" },
127
+ { rank: 2, name: "ShadowHunter", points: 14280, avatar: "https://picsum.photos/seed/user2/50/50.jpg" },
128
+ { rank: 3, name: "PhoenixRise", points: 13890, avatar: "https://picsum.photos/seed/user3/50/50.jpg" },
129
+ { rank: 4, name: "IceQueen", points: 12540, avatar: "https://picsum.photos/seed/user4/50/50.jpg" },
130
+ { rank: 5, name: "ThunderBolt", points: 11870, avatar: "https://picsum.photos/seed/user5/50/50.jpg" }
131
+ ];
132
+
133
+ const bounties = [
134
+ { id: 1, target: "Wanted: The Bandit King", reward: "$50,000", status: "Active" },
135
+ { id: 2, target: "Missing: Ancient Artifact", reward: "$25,000", status: "Active" },
136
+ { id: 3, target: "Capture: Rogue Scientist", reward: "$75,000", status: "Active" },
137
+ { id: 4, target: "Eliminate: Corporate Spy", reward: "$30,000", status: "Active" },
138
+ { id: 5, target: "Recover: Stolen Data", reward: "$40,000", status: "Active" }
139
+ ];
140
+
141
+ const lottoNumbers = [12, 23, 34, 45, 56, 67, 78, 89, 90, 1, 2, 3, 4, 5, 6];
142
+
143
+ function App() {
144
+ const [selectedCategory, setSelectedCategory] = useState(null);
145
+ const [showPostForm, setShowPostForm] = useState(false);
146
+ const [articles, setArticles] = useState(mockArticles);
147
+ const [newArticle, setNewArticle] = useState({
148
+ title: "",
149
+ content: "",
150
+ category: 1,
151
+ author: "Anonymous"
152
+ });
153
+
154
+ const filteredArticles = selectedCategory
155
+ ? articles.filter(article => article.category === selectedCategory)
156
+ : articles;
157
+
158
+ const handleSubmitArticle = () => {
159
+ if (newArticle.title && newArticle.content) {
160
+ const article = {
161
+ id: articles.length + 1,
162
+ ...newArticle,
163
+ date: new Date().toISOString().split('T')[0],
164
+ likes: 0,
165
+ comments: 0,
166
+ image: `https://picsum.photos/seed/${Math.random()}/400/200.jpg`
167
+ };
168
+ setArticles([article, ...articles]);
169
+ setNewArticle({ title: "", content: "", category: 1, author: "Anonymous" });
170
+ setShowPostForm(false);
171
+ }
172
+ };
173
+
174
+ return (
175
+ <div className="min-h-screen">
176
+ {/* Header */}
177
+ <header className="bg-white shadow-lg sticky top-0 z-50">
178
+ <div className="container mx-auto px-4 py-3">
179
+ <div className="flex items-center justify-between">
180
+ <div className="flex items-center space-x-4">
181
+ <h1 className="playfair text-3xl font-bold text-gray-800">The Daily Chronicle</h1>
182
+ <span className="text-sm text-gray-500">• Online Newspaper</span>
183
+ </div>
184
+ <div className="flex items-center space-x-6">
185
+ <a href="#" className="text-gray-600 hover:text-gray-800 transition">Home</a>
186
+ <a href="#" className="text-gray-600 hover:text-gray-800 transition">Categories</a>
187
+ <a href="#" className="text-gray-600 hover:text-gray-800 transition">Rankings</a>
188
+ <a href="#" className="text-gray-600 hover:text-gray-800 transition">Bounties</a>
189
+ <a href="#" className="text-gray-600 hover:text-gray-800 transition">Lotto</a>
190
+ <button
191
+ onClick={() => setShowPostForm(!showPostForm)}
192
+ className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition"
193
+ >
194
+ Post Article
195
+ </button>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </header>
200
+
201
+ {/* Post Form Modal */}
202
+ {showPostForm && (
203
+ <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
204
+ <div className="bg-white rounded-lg p-6 max-w-2xl w-full">
205
+ <h2 className="text-2xl font-bold mb-4">Create New Article</h2>
206
+ <div className="space-y-4">
207
+ <input
208
+ type="text"
209
+ placeholder="Article Title"
210
+ value={newArticle.title}
211
+ onChange={(e) => setNewArticle({...newArticle, title: e.target.value})}
212
+ className="w-full p-3 border rounded-lg"
213
+ />
214
+ <select
215
+ value={newArticle.category}
216
+ onChange={(e) => setNewArticle({...newArticle, category: parseInt(e.target.value)})}
217
+ className="w-full p-3 border rounded-lg"
218
+ >
219
+ {categories.map(cat => (
220
+ <option key={cat.id} value={cat.id}>{cat.name}</option>
221
+ ))}
222
+ </select>
223
+ <textarea
224
+ placeholder="Article Content"
225
+ value={newArticle.content}
226
+ onChange={(e) => setNewArticle({...newArticle, content: e.target.value})}
227
+ className="w-full p-3 border rounded-lg h-32"
228
+ />
229
+ <input
230
+ type="text"
231
+ placeholder="Your Name"
232
+ value={newArticle.author}
233
+ onChange={(e) => setNewArticle({...newArticle, author: e.target.value})}
234
+ className="w-full p-3 border rounded-lg"
235
+ />
236
+ <div className="flex space-x-3">
237
+ <button
238
+ onClick={handleSubmitArticle}
239
+ className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600"
240
+ >
241
+ Publish
242
+ </button>
243
+ <button
244
+ onClick={() => setShowPostForm(false)}
245
+ className="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-400"
246
+ >
247
+ Cancel
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ )}
254
+
255
+ <div className="container mx-auto px-4 py-8">
256
+ <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
257
+ {/* Main Content */}
258
+ <div className="lg:col-span-3">
259
+ {/* Category Pills */}
260
+ <div className="flex flex-wrap gap-2 mb-6">
261
+ <button
262
+ onClick={() => setSelectedCategory(null)}
263
+ className={`category-pill px-4 py-2 rounded-full ${selectedCategory === null ? 'bg-gray-800 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'}`}
264
+ >
265
+ All Articles
266
+ </button>
267
+ {categories.map(category => (
268
+ <button
269
+ key={category.id}
270
+ onClick={() => setSelectedCategory(category.id)}
271
+ className={`category-pill px-4 py-2 rounded-full flex items-center space-x-2 ${selectedCategory === category.id ? 'bg-gray-800 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'}`}
272
+ >
273
+ <i className={category.icon}></i>
274
+ <span>{category.name}</span>
275
+ </button>
276
+ ))}
277
+ </div>
278
+
279
+ {/* Articles Grid */}
280
+ <div className="space-y-6">
281
+ {filteredArticles.map(article => (
282
+ <div key={article.id} className="article-card bg-white rounded-lg shadow-md overflow-hidden">
283
+ <div className="md:flex">
284
+ <div className="md:w-1/3">
285
+ <img src={article.image} alt={article.title} className="w-full h-48 md:h-full object-cover" />
286
+ </div>
287
+ <div className="p-6 md:w-2/3">
288
+ <div className="flex items-center space-x-2 mb-2">
289
+ {categories.find(c => c.id === article.category) && (
290
+ <span className={`${categories.find(c => c.id === article.category).color} text-white text-xs px-2 py-1 rounded-full`}>
291
+ {categories.find(c => c.id === article.category).name}
292
+ </span>
293
+ )}
294
+ <span className="text-gray-500 text-sm">{article.date}</span>
295
+ </div>
296
+ <h2 className="playfair text-2xl font-bold mb-3 text-gray-800">{article.title}</h2>
297
+ <p className="text-gray-600 mb-4 line-clamp-3">{article.content}</p>
298
+ <div className="flex items-center justify-between">
299
+ <div className="flex items-center space-x-4">
300
+ <span className="text-gray-500 text-sm">By {article.author}</span>
301
+ <div className="flex items-center space-x-2">
302
+ <button className="flex items-center space-x-1 text-gray-500 hover:text-blue-500">
303
+ <i className="far fa-thumbs-up"></i>
304
+ <span>{article.likes}</span>
305
+ </button>
306
+ <button className="flex items-center space-x-1 text-gray-500 hover:text-blue-500">
307
+ <i className="far fa-comment"></i>
308
+ <span>{article.comments}</span>
309
+ </button>
310
+ </div>
311
+ </div>
312
+ <button className="text-blue-500 hover:text-blue-600">Read More</button>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ ))}
318
+ </div>
319
+ </div>
320
+
321
+ {/* Sidebar */}
322
+ <div className="space-y-6">
323
+ {/* Rankings */}
324
+ <div className="bg-white rounded-lg shadow-md p-6">
325
+ <h3 className="text-xl font-bold mb-4 flex items-center">
326
+ <i className="fas fa-trophy text-yellow-500 mr-2"></i>
327
+ Player Rankings
328
+ </h3>
329
+ <div className="space-y-3">
330
+ {rankings.map(player => (
331
+ <div key={player.rank} className="flex items-center space-x-3">
332
+ <div className={`w-8 h-8 rounded-full flex items-center justify-center text-white font-bold ${player.rank === 1 ? 'bg-yellow-500' : player.rank === 2 ? 'bg-gray-400' : player.rank === 3 ? 'bg-orange-600' : 'bg-gray-300'}`}>
333
+ {player.rank}
334
+ </div>
335
+ <img src={player.avatar} alt={player.name} className="w-10 h-10 rounded-full" />
336
+ <div className="flex-1">
337
+ <p className="font-semibold text-gray-800">{player.name}</p>
338
+ <p className="text-sm text-gray-500">{player.points.toLocaleString()} pts</p>
339
+ </div>
340
+ </div>
341
+ ))}
342
+ </div>
343
+ </div>
344
+
345
+ {/* Bounties */}
346
+ <div className="bg-white rounded-lg shadow-md p-6">
347
+ <h3 className="text-xl font-bold mb-4 flex items-center">
348
+ <i className="fas fa-bounty-hunter text-red-500 mr-2"></i>
349
+ Active Bounties
350
+ </h3>
351
+ <div className="space-y-3">
352
+ {bounties.map(bounty => (
353
+ <div key={bounty.id} className="border-l-4 border-red-500 pl-3 py-2">
354
+ <p className="font-semibold text-gray-800">{bounty.target}</p>
355
+ <p className="text-sm text-green-600 font-bold">Reward: {bounty.reward}</p>
356
+ <span className="inline-block mt-1 px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
357
+ {bounty.status}
358
+ </span>
359
+ </div>
360
+ ))}
361
+ </div>
362
+ </div>
363
+
364
+ {/* Lotto Results */}
365
+ <div className="bg-white rounded-lg shadow-md p-6">
366
+ <h3 className="text-xl font-bold mb-4 flex items-center">
367
+ <i className="fas fa-dice text-purple-500 mr-2"></i>
368
+ Lotto Results
369
+ </h3>
370
+ <div className="grid grid-cols-5 gap-2">
371
+ {lottoNumbers.map((num, index) => (
372
+ <div key={index} className="lotto-ball bg-purple-500 text-white rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm">
373
+ {num}
374
+ </div>
375
+ ))}
376
+ </div>
377
+ <div className="mt-4 text-center">
378
+ <p className="text-sm text-gray-600">Next Draw: 2 hours</p>
379
+ <button className="mt-2 bg-purple-500 text-white px-4 py-2 rounded-lg text-sm hover:bg-purple-600">
380
+ Play Now
381
+ </button>
382
+ </div>
383
+ </div>
384
+
385
+ {/* Stats */}
386
+ <div className="bg-white rounded-lg shadow-md p-6">
387
+ <h3 className="text-xl font-bold mb-4">Site Stats</h3>
388
+ <div className="space-y-3">
389
+ <div className="flex justify-between">
390
+ <span className="text-gray-600">Total Articles</span>
391
+ <span className="font-bold">{articles.length}</span>
392
+ </div>
393
+ <div className="flex justify-between">
394
+ <span className="text-gray-600">Active Users</span>
395
+ <span className="font-bold">1,234</span>
396
+ </div>
397
+ <div className="flex justify-between">
398
+ <span className="text-gray-600">Today's Posts</span>
399
+ <span className="font-bold">47</span>
400
+ </div>
401
+ <div className="flex justify-between">
402
+ <span className="text-gray-600">Comments</span>
403
+ <span className="font-bold">892</span>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ {/* Footer */}
412
+ <footer className="bg-gray-800 text-white py-8 mt-12">
413
+ <div className="container mx-auto px-4">
414
+ <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
415
+ <div>
416
+ <h4 className="font-bold mb-4">The Daily Chronicle</h4>
417
+ <p className="text-gray-400 text-sm">Your trusted source for news and updates.</p>
418
+ </div>
419
+ <div>
420
+ <h4 className="font-bold mb-4">Quick Links</h4>
421
+ <ul className="space-y-2 text-sm text-gray-400">
422
+ <li><a href="#" className="hover:text-white">About Us</a></li>
423
+ <li><a href="#" className="hover:text-white">Contact</a></li>
424
+ <li><a href="#" className="hover:text-white">Privacy Policy</a></li>
425
+ </ul>
426
+ </div>
427
+ <div>
428
+ <h4 className="font-bold mb-4">Categories</h4>
429
+ <ul className="space-y-2 text-sm text-gray-400">
430
+ {categories.map(cat => (
431
+ <li key={cat.id}><a href="#" className="hover:text-white">{cat.name}</a></li>
432
+ ))}
433
+ </ul>
434
+ </div>
435
+ <div>
436
+ <h4 className="font-bold mb-4">Follow Us</h4>
437
+ <div className="flex space-x-4">
438
+ <a href="#" className="text-gray-400 hover:text-white"><i className="fab fa-twitter"></i></a>
439
+ <a href="#" className="text-gray-400 hover:text-white"><i className="fab fa-facebook"></i></a>
440
+ <a href="#" className="text-gray-400 hover:text-white"><i className="fab fa-instagram"></i></a>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ <div className="border-t border-gray-700 mt-8 pt-8 text-center text-sm text-gray-400">
445
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-blue-400 hover:underline">Built with anycoder</a>
446
+ </div>
447
+ </div>
448
+ </footer>
449
+ </div>
450
+ );
451
+ }
452
+
453
+ ReactDOM.render(<App />, document.getElementById('root'));
454
+ </script>
455
+ </body>
456
+ </html>