Spaces:

Cairo303
/

anycoder-a6cac0b5

Running

App Files Files Community

Cairo303 commited on Dec 12, 2025

Commit

54d0678

verified ·

1 Parent(s): 80203a1

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +709 -448

index.html CHANGED Viewed

@@ -1,456 +1,717 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>The Daily Chronicle - Online Newspaper</title>
-    <script src="https://cdn.jsdelivr.net/npm/react@18.0.0/umd/react.development.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/react-dom@18.0.0/umd/react-dom.development.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.js"></script>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-    <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">
-    <style>
-        body {
-            font-family: 'Inter', sans-serif;
-        }
-        .playfair {
-            font-family: 'Playfair Display', serif;
-        }
-        .newspaper-bg {
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-        }
-        .article-card {
-            transition: all 0.3s ease;
-        }
-        .article-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
-        }
-        .category-pill {
-            transition: all 0.2s ease;
-        }
-        .category-pill:hover {
-            transform: scale(1.05);
-        }
-        .lotto-ball {
-            animation: bounce 2s infinite;
-        }
-        @keyframes bounce {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-10px); }
-        }
-        .scrollbar-hide {
-            -ms-overflow-style: none;
-            scrollbar-width: none;
-        }
-        .scrollbar-hide::-webkit-scrollbar {
-            display: none;
-        }
-    </style>
 </head>
-<body class="newspaper-bg min-h-screen">
-    <div id="root"></div>
-    <script type="text/babel">
-        const { useState, useEffect } = React;
-        const categories = [
-            { id: 1, name: "News", color: "bg-blue-500", icon: "fas fa-newspaper" },
-            { id: 2, name: "Politics", color: "bg-red-500", icon: "fas fa-gavel" },
-            { id: 3, name: "Sports", color: "bg-green-500", icon: "fas fa-futbol" },
-            { id: 4, name: "Entertainment", color: "bg-purple-500", icon: "fas fa-film" },
-            { id: 5, name: "Technology", color: "bg-indigo-500", icon: "fas fa-laptop" },
-            { id: 6, name: "Business", color: "bg-yellow-500", icon: "fas fa-chart-line" }
-        ];
-        const mockArticles = [
-            {
-                id: 1,
-                title: "Major Political Shift in City Council",
-                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...",
-                author: "John Doe",
-                category: 2,
-                date: "2024-01-15",
-                likes: 234,
-                comments: 45,
-                image: "https://picsum.photos/seed/politics/400/200.jpg"
-            },
-            {
-                id: 2,
-                title: "Local Team Wins Championship",
-                content: "The hometown heroes have done it again! After a thrilling final match, our local team has secured the championship title...",
-                author: "Sarah Smith",
-                category: 3,
-                date: "2024-01-14",
-                likes: 567,
-                comments: 89,
-                image: "https://picsum.photos/seed/sports/400/200.jpg"
-            },
-            {
-                id: 3,
-                title: "Tech Startup Raises $10M",
-                content: "A promising new technology startup has secured major funding, positioning itself as a leader in the AI space...",
-                author: "Mike Johnson",
-                category: 5,
-                date: "2024-01-13",
-                likes: 189,
-                comments: 23,
-                image: "https://picsum.photos/seed/tech/400/200.jpg"
-            },
-            {
-                id: 4,
-                title: "New Restaurant Opens Downtown",
-                content: "Food enthusiasts rejoice! A new gourmet restaurant has opened its doors in the heart of downtown, offering a unique culinary experience...",
-                author: "Emma Wilson",
-                category: 4,
-                date: "2024-01-12",
-                likes: 145,
-                comments: 34,
-                image: "https://picsum.photos/seed/food/400/200.jpg"
-            },
-            {
-                id: 5,
-                title: "Stock Market Reaches New High",
-                content: "The stock market has hit an all-time high today, with investors showing renewed confidence in the economy...",
-                author: "Robert Chen",
-                category: 6,
-                date: "2024-01-11",
-                likes: 321,
-                comments: 56,
-                image: "https://picsum.photos/seed/finance/400/200.jpg"
-            }
-        ];
-        const rankings = [
-            { rank: 1, name: "DragonSlayer", points: 15420, avatar: "https://picsum.photos/seed/user1/50/50.jpg" },
-            { rank: 2, name: "ShadowHunter", points: 14280, avatar: "https://picsum.photos/seed/user2/50/50.jpg" },
-            { rank: 3, name: "PhoenixRise", points: 13890, avatar: "https://picsum.photos/seed/user3/50/50.jpg" },
-            { rank: 4, name: "IceQueen", points: 12540, avatar: "https://picsum.photos/seed/user4/50/50.jpg" },
-            { rank: 5, name: "ThunderBolt", points: 11870, avatar: "https://picsum.photos/seed/user5/50/50.jpg" }
-        ];
-        const bounties = [
-            { id: 1, target: "Wanted: The Bandit King", reward: "$50,000", status: "Active" },
-            { id: 2, target: "Missing: Ancient Artifact", reward: "$25,000", status: "Active" },
-            { id: 3, target: "Capture: Rogue Scientist", reward: "$75,000", status: "Active" },
-            { id: 4, target: "Eliminate: Corporate Spy", reward: "$30,000", status: "Active" },
-            { id: 5, target: "Recover: Stolen Data", reward: "$40,000", status: "Active" }
-        ];
-        const lottoNumbers = [12, 23, 34, 45, 56, 67, 78, 89, 90, 1, 2, 3, 4, 5, 6];
-        function App() {
-            const [selectedCategory, setSelectedCategory] = useState(null);
-            const [showPostForm, setShowPostForm] = useState(false);
-            const [articles, setArticles] = useState(mockArticles);
-            const [newArticle, setNewArticle] = useState({
-                title: "",
-                content: "",
-                category: 1,
-                author: "Anonymous"
-            });
-            const filteredArticles = selectedCategory
-                ? articles.filter(article => article.category === selectedCategory)
-                : articles;
-            const handleSubmitArticle = () => {
-                if (newArticle.title && newArticle.content) {
-                    const article = {
-                        id: articles.length + 1,
-                        ...newArticle,
-                        date: new Date().toISOString().split('T')[0],
-                        likes: 0,
-                        comments: 0,
-                        image: `https://picsum.photos/seed/${Math.random()}/400/200.jpg`
-                    };
-                    setArticles([article, ...articles]);
-                    setNewArticle({ title: "", content: "", category: 1, author: "Anonymous" });
-                    setShowPostForm(false);
-                }
-            };
-            return (
-                <div className="min-h-screen">
-                    {/* Header */}
-                    <header className="bg-white shadow-lg sticky top-0 z-50">
-                        <div className="container mx-auto px-4 py-3">
-                            <div className="flex items-center justify-between">
-                                <div className="flex items-center space-x-4">
-                                    <h1 className="playfair text-3xl font-bold text-gray-800">The Daily Chronicle</h1>
-                                    <span className="text-sm text-gray-500">• Online Newspaper</span>
-                                </div>
-                                <div className="flex items-center space-x-6">
-                                    <a href="#" className="text-gray-600 hover:text-gray-800 transition">Home</a>
-                                    <a href="#" className="text-gray-600 hover:text-gray-800 transition">Categories</a>
-                                    <a href="#" className="text-gray-600 hover:text-gray-800 transition">Rankings</a>
-                                    <a href="#" className="text-gray-600 hover:text-gray-800 transition">Bounties</a>
-                                    <a href="#" className="text-gray-600 hover:text-gray-800 transition">Lotto</a>
-                                    <button
-                                        onClick={() => setShowPostForm(!showPostForm)}
-                                        className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition"
-                                    >
-                                        Post Article
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </header>
-                    {/* Post Form Modal */}
-                    {showPostForm && (
-                        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-                            <div className="bg-white rounded-lg p-6 max-w-2xl w-full">
-                                <h2 className="text-2xl font-bold mb-4">Create New Article</h2>
-                                <div className="space-y-4">
-                                    <input
-                                        type="text"
-                                        placeholder="Article Title"
-                                        value={newArticle.title}
-                                        onChange={(e) => setNewArticle({...newArticle, title: e.target.value})}
-                                        className="w-full p-3 border rounded-lg"
-                                    />
-                                    <select
-                                        value={newArticle.category}
-                                        onChange={(e) => setNewArticle({...newArticle, category: parseInt(e.target.value)})}
-                                        className="w-full p-3 border rounded-lg"
-                                    >
-                                        {categories.map(cat => (
-                                            <option key={cat.id} value={cat.id}>{cat.name}</option>
-                                        ))}
-                                    </select>
-                                    <textarea
-                                        placeholder="Article Content"
-                                        value={newArticle.content}
-                                        onChange={(e) => setNewArticle({...newArticle, content: e.target.value})}
-                                        className="w-full p-3 border rounded-lg h-32"
-                                    />
-                                    <input
-                                        type="text"
-                                        placeholder="Your Name"
-                                        value={newArticle.author}
-                                        onChange={(e) => setNewArticle({...newArticle, author: e.target.value})}
-                                        className="w-full p-3 border rounded-lg"
-                                    />
-                                    <div className="flex space-x-3">
-                                        <button
-                                            onClick={handleSubmitArticle}
-                                            className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600"
-                                        >
-                                            Publish
-                                        </button>
-                                        <button
-                                            onClick={() => setShowPostForm(false)}
-                                            className="bg-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-400"
-                                        >
-                                            Cancel
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                    <div className="container mx-auto px-4 py-8">
-                        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
-                            {/* Main Content */}
-                            <div className="lg:col-span-3">
-                                {/* Category Pills */}
-                                <div className="flex flex-wrap gap-2 mb-6">
-                                    <button
-                                        onClick={() => setSelectedCategory(null)}
-                                        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'}`}
-                                    >
-                                        All Articles
-                                    </button>
-                                    {categories.map(category => (
-                                        <button
-                                            key={category.id}
-                                            onClick={() => setSelectedCategory(category.id)}
-                                            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'}`}
-                                        >
-                                            <i className={category.icon}></i>
-                                            <span>{category.name}</span>
-                                        </button>
-                                    ))}
-                                </div>
-                                {/* Articles Grid */}
-                                <div className="space-y-6">
-                                    {filteredArticles.map(article => (
-                                        <div key={article.id} className="article-card bg-white rounded-lg shadow-md overflow-hidden">
-                                            <div className="md:flex">
-                                                <div className="md:w-1/3">
-                                                    <img src={article.image} alt={article.title} className="w-full h-48 md:h-full object-cover" />
-                                                </div>
-                                                <div className="p-6 md:w-2/3">
-                                                    <div className="flex items-center space-x-2 mb-2">
-                                                        {categories.find(c => c.id === article.category) && (
-                                                            <span className={`${categories.find(c => c.id === article.category).color} text-white text-xs px-2 py-1 rounded-full`}>
-                                                                {categories.find(c => c.id === article.category).name}
-                                                            </span>
-                                                        )}
-                                                        <span className="text-gray-500 text-sm">{article.date}</span>
-                                                    </div>
-                                                    <h2 className="playfair text-2xl font-bold mb-3 text-gray-800">{article.title}</h2>
-                                                    <p className="text-gray-600 mb-4 line-clamp-3">{article.content}</p>
-                                                    <div className="flex items-center justify-between">
-                                                        <div className="flex items-center space-x-4">
-                                                            <span className="text-gray-500 text-sm">By {article.author}</span>
-                                                            <div className="flex items-center space-x-2">
-                                                                <button className="flex items-center space-x-1 text-gray-500 hover:text-blue-500">
-                                                                    <i className="far fa-thumbs-up"></i>
-                                                                    <span>{article.likes}</span>
-                                                                </button>
-                                                                <button className="flex items-center space-x-1 text-gray-500 hover:text-blue-500">
-                                                                    <i className="far fa-comment"></i>
-                                                                    <span>{article.comments}</span>
-                                                                </button>
-                                                            </div>
-                                                        </div>
-                                                        <button className="text-blue-500 hover:text-blue-600">Read More</button>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                            {/* Sidebar */}
-                            <div className="space-y-6">
-                                {/* Rankings */}
-                                <div className="bg-white rounded-lg shadow-md p-6">
-                                    <h3 className="text-xl font-bold mb-4 flex items-center">
-                                        <i className="fas fa-trophy text-yellow-500 mr-2"></i>
-                                        Player Rankings
-                                    </h3>
-                                    <div className="space-y-3">
-                                        {rankings.map(player => (
-                                            <div key={player.rank} className="flex items-center space-x-3">
-                                                <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'}`}>
-                                                    {player.rank}
-                                                </div>
-                                                <img src={player.avatar} alt={player.name} className="w-10 h-10 rounded-full" />
-                                                <div className="flex-1">
-                                                    <p className="font-semibold text-gray-800">{player.name}</p>
-                                                    <p className="text-sm text-gray-500">{player.points.toLocaleString()} pts</p>
-                                                </div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                                {/* Bounties */}
-                                <div className="bg-white rounded-lg shadow-md p-6">
-                                    <h3 className="text-xl font-bold mb-4 flex items-center">
-                                        <i className="fas fa-bounty-hunter text-red-500 mr-2"></i>
-                                        Active Bounties
-                                    </h3>
-                                    <div className="space-y-3">
-                                        {bounties.map(bounty => (
-                                            <div key={bounty.id} className="border-l-4 border-red-500 pl-3 py-2">
-                                                <p className="font-semibold text-gray-800">{bounty.target}</p>
-                                                <p className="text-sm text-green-600 font-bold">Reward: {bounty.reward}</p>
-                                                <span className="inline-block mt-1 px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
-                                                    {bounty.status}
-                                                </span>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                                {/* Lotto Results */}
-                                <div className="bg-white rounded-lg shadow-md p-6">
-                                    <h3 className="text-xl font-bold mb-4 flex items-center">
-                                        <i className="fas fa-dice text-purple-500 mr-2"></i>
-                                        Lotto Results
-                                    </h3>
-                                    <div className="grid grid-cols-5 gap-2">
-                                        {lottoNumbers.map((num, index) => (
-                                            <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">
-                                                {num}
-                                            </div>
-                                        ))}
-                                    </div>
-                                    <div className="mt-4 text-center">
-                                        <p className="text-sm text-gray-600">Next Draw: 2 hours</p>
-                                        <button className="mt-2 bg-purple-500 text-white px-4 py-2 rounded-lg text-sm hover:bg-purple-600">
-                                            Play Now
-                                        </button>
-                                    </div>
-                                </div>
-                                {/* Stats */}
-                                <div className="bg-white rounded-lg shadow-md p-6">
-                                    <h3 className="text-xl font-bold mb-4">Site Stats</h3>
-                                    <div className="space-y-3">
-                                        <div className="flex justify-between">
-                                            <span className="text-gray-600">Total Articles</span>
-                                            <span className="font-bold">{articles.length}</span>
-                                        </div>
-                                        <div className="flex justify-between">
-                                            <span className="text-gray-600">Active Users</span>
-                                            <span className="font-bold">1,234</span>
-                                        </div>
-                                        <div className="flex justify-between">
-                                            <span className="text-gray-600">Today's Posts</span>
-                                            <span className="font-bold">47</span>
-                                        </div>
-                                        <div className="flex justify-between">
-                                            <span className="text-gray-600">Comments</span>
-                                            <span className="font-bold">892</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    {/* Footer */}
-                    <footer className="bg-gray-800 text-white py-8 mt-12">
-                        <div className="container mx-auto px-4">
-                            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-                                <div>
-                                    <h4 className="font-bold mb-4">The Daily Chronicle</h4>
-                                    <p className="text-gray-400 text-sm">Your trusted source for news and updates.</p>
-                                </div>
-                                <div>
-                                    <h4 className="font-bold mb-4">Quick Links</h4>
-                                    <ul className="space-y-2 text-sm text-gray-400">
-                                        <li><a href="#" className="hover:text-white">About Us</a></li>
-                                        <li><a href="#" className="hover:text-white">Contact</a></li>
-                                        <li><a href="#" className="hover:text-white">Privacy Policy</a></li>
-                                    </ul>
-                                </div>
-                                <div>
-                                    <h4 className="font-bold mb-4">Categories</h4>
-                                    <ul className="space-y-2 text-sm text-gray-400">
-                                        {categories.map(cat => (
-                                            <li key={cat.id}><a href="#" className="hover:text-white">{cat.name}</a></li>
-                                        ))}
-                                    </ul>
-                                </div>
-                                <div>
-                                    <h4 className="font-bold mb-4">Follow Us</h4>
-                                    <div className="flex space-x-4">
-                                        <a href="#" className="text-gray-400 hover:text-white"><i className="fab fa-twitter"></i></a>
-                                        <a href="#" className="text-gray-400 hover:text-white"><i className="fab fa-facebook"></i></a>
-                                        <a href="#" className="text-gray-400 hover:text-white"><i className="fab fa-instagram"></i></a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="border-t border-gray-700 mt-8 pt-8 text-center text-sm text-gray-400">
-                                <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-blue-400 hover:underline">Built with anycoder</a>
-                            </div>
-                        </div>
-                    </footer>
                 </div>
-            );
-        }
-        ReactDOM.render(<App />, document.getElementById('root'));
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>The Daily Chronicle - Online Newspaper</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&family=Cinzel:wght@400;600&display=swap" rel="stylesheet">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    :root {
+      --primary-gold: #D4AF37;
+      --dark-gold: #B8860B;
+      --deep-purple: #4B0082;
+      --royal-blue: #4169E1;
+      --crimson: #DC143C;
+      --emerald: #50C878;
+      --navy: #191970;
+      --black: #000000;
+      --white: #FFFFFF;
+      --gray-900: #1F2937;
+      --gray-800: #374151;
+      --gray-700: #6B7280;
+      --gray-600: #9CA3AF;
+      --gray-500: #D1D5DB;
+      --gray-400: #E5E7EB;
+      --gray-300: #F3F4F6;
+      --glass-bg: rgba(255, 255, 255, 0.1);
+      --glass-border: rgba(255, 255, 255, 0.2);
+    }
+    body {
+      font-family: 'Inter', sans-serif;
+      background: linear-gradient(135deg, #0F0C29, #302B63, #24243E);
+      min-height: 100vh;
+      color: var(--white);
+      position: relative;
+      overflow-x: hidden;
+    }
+    body::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background:
+        radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 40% 20%, rgba(30, 144, 255, 0.1) 0%, transparent 50%);
+      pointer-events: none;
+      z-index: 1;
+    }
+    .pimp-container {
+      position: relative;
+      z-index: 2;
+    }
+    .playfair {
+      font-family: 'Playfair Display', serif;
+    }
+    .cinzel {
+      font-family: 'Cinzel', serif;
+    }
+    .luxury-header {
+      background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 100%);
+      backdrop-filter: blur(10px);
+      border-bottom: 2px solid var(--primary-gold);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    }
+    .luxury-card {
+      background: var(--glass-bg);
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--glass-border);
+      border-radius: 15px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+      transition: all 0.3s ease;
+    }
+    .luxury-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+      border-color: var(--primary-gold);
+    }
+    .category-pill {
+      background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
+      border: 1px solid var(--glass-border);
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+    }
+    .category-pill::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
+      transform: translateX(-100%);
+      transition: transform 0.6s;
+    }
+    .category-pill:hover::before {
+      transform: translateX(100%);
+    }
+    .category-pill:hover {
+      transform: scale(1.05);
+      border-color: var(--primary-gold);
+      box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
+    }
+    .article-card {
+      background: var(--glass-bg);
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--glass-border);
+      border-radius: 15px;
+      transition: all 0.3s ease;
+      overflow: hidden;
+    }
+    .article-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
+      border-color: var(--primary-gold);
+    }
+    .article-card .category-tag {
+      background: linear-gradient(135deg, var(--deep-purple), var(--royal-blue));
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    .gold-button {
+      background: linear-gradient(135deg, var(--primary-gold), var(--dark-gold));
+      border: none;
+      color: var(--black);
+      font-weight: 600;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+    }
+    .gold-button::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      transition: left 0.6s;
+    }
+    .gold-button:hover::after {
+      left: 100%;
+    }
+    .gold-button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
+    }
+    .rank-badge {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      font-size: 14px;
+    }
+    .rank-1 {
+      background: linear-gradient(135deg, #FFD700, #FFA500);
+      box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
+    }
+    .rank-2 {
+      background: linear-gradient(135deg, #C0C0C0, #808080);
+      box-shadow: 0 0 15px rgba(192, 192, 192, 0.6);
+    }
+    .rank-3 {
+      background: linear-gradient(135deg, #CD7F32, #8B4513);
+      box-shadow: 0 0 15px rgba(205, 127, 50, 0.6);
+    }
+    .lotto-ball {
+      background: linear-gradient(135deg, var(--crimson), var(--deep-purple));
+      border: 2px solid var(--primary-gold);
+      box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
+      animation: bounce 2s infinite;
+    }
+    @keyframes bounce {
+      0%, 100% {
+        transform: translateY(0) rotate(0deg);
+      }
+      50% {
+        transform: translateY(-10px) rotate(5deg);
+      }
+    }
+    .glow-text {
+      text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
+    }
+    .gradient-text {
+      background: linear-gradient(135deg, var(--primary-gold), var(--royal-blue));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .modal-overlay {
+      background: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(5px);
+    }
+    .modal-content {
+      background: linear-gradient(135deg, var(--gray-900), var(--black));
+      border: 2px solid var(--primary-gold);
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
+    }
+    .stats-number {
+      font-family: 'Cinzel', serif;
+      font-size: 1.5rem;
+      color: var(--primary-gold);
+    }
+    .footer-luxury {
+      background: linear-gradient(135deg, var(--gray-900), var(--black));
+      border-top: 2px solid var(--primary-gold);
+    }
+    .social-icon {
+      background: var(--glass-bg);
+      border: 1px solid var(--glass-border);
+      transition: all 0.3s ease;
+    }
+    .social-icon:hover {
+      background: var(--primary-gold);
+      transform: translateY(-3px);
+      box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
+    }
+    @media (max-width: 768px) {
+      .luxury-header {
+        padding: 1rem 0;
+      }
+      .luxury-card {
+        margin-bottom: 1rem;
+      }
+    }
+  </style>
 </head>
+<body>
+  <div class="pimp-container">
+    <!-- Header -->
+    <header class="luxury-header sticky top-0 z-50">
+      <div class="container mx-auto px-4 py-4">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center space-x-4">
+            <h1 class="playfair text-3xl font-bold glow-text">The Daily Chronicle</h1>
+            <span class="text-sm text-gray-400">• Online Newspaper</span>
+          </div>
+          <div class="flex items-center space-x-6">
+            <a href="#" class="text-gray-300 hover:text-white transition">Home</a>
+            <a href="#" class="text-gray-300 hover:text-white transition">Categories</a>
+            <a href="#" class="text-gray-300 hover:text-white transition">Rankings</a>
+            <a href="#" class="text-gray-300 hover:text-white transition">Bounties</a>
+            <a href="#" class="text-gray-300 hover:text-white transition">Lotto</a>
+            <button id="postArticleBtn" class="gold-button px-6 py-2 rounded-lg">
+              Post Article
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+    <!-- Post Form Modal -->
+    <div id="postModal" class="hidden fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
+      <div class="modal-content rounded-lg p-6 max-w-2xl w-full">
+        <h2 class="text-2xl font-bold mb-4 gradient-text">Create New Article</h2>
+        <div class="space-y-4">
+          <input type="text" id="articleTitle" placeholder="Article Title" class="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white">
+          <select id="articleCategory" class="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white">
+            <option value="1">News</option>
+            <option value="2">Politics</option>
+            <option value="3">Sports</option>
+            <option value="4">Entertainment</option>
+            <option value="5">Technology</option>
+            <option value="6">Business</option>
+          </select>
+          <textarea id="articleContent" placeholder="Article Content" class="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white h-32"></textarea>
+          <input type="text" id="articleAuthor" placeholder="Your Name" class="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white">
+          <div class="flex space-x-3">
+            <button id="publishBtn" class="gold-button px-6 py-2 rounded-lg">Publish</button>
+            <button id="cancelBtn" class="bg-gray-700 text-white px-6 py-2 rounded-lg hover:bg-gray-600">Cancel</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="container mx-auto px-4 py-8">
+      <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
+        <!-- Main Content -->
+        <div class="lg:col-span-3">
+          <!-- Category Pills -->
+          <div class="flex flex-wrap gap-2 mb-6">
+            <button class="category-pill px-4 py-2 rounded-full text-white" data-category="all">All Articles</button>
+            <button class="category-pill px-4 py-2 rounded-full text-white" data-category="1">
+              <i class="fas fa-newspaper mr-2"></i>News
+            </button>
+            <button class="category-pill px-4 py-2 rounded-full text-white" data-category="2">
+              <i class="fas fa-gavel mr-2"></i>Politics
+            </button>
+            <button class="category-pill px-4 py-2 rounded-full text-white" data-category="3">
+              <i class="fas fa-futbol mr-2"></i>Sports
+            </button>
+            <button class="category-pill px-4 py-2 rounded-full text-white" data-category="4">
+              <i class="fas fa-film mr-2"></i>Entertainment
+            </button>
+            <button class="category-pill px-4 py-2 rounded-full text-white" data-category="5">
+              <i class="fas fa-laptop mr-2"></i>Technology
+            </button>
+            <button class="category-pill px-4 py-2 rounded-full text-white" data-category="6">
+              <i class="fas fa-chart-line mr-2"></i>Business
+            </button>
+          </div>
+          <!-- Articles Grid -->
+          <div id="articlesContainer" class="space-y-6">
+            <!-- Articles will be dynamically inserted here -->
+          </div>
+        </div>
+        <!-- Sidebar -->
+        <div class="space-y-6">
+          <!-- Rankings -->
+          <div class="luxury-card p-6">
+            <h3 class="text-xl font-bold mb-4 flex items-center">
+              <i class="fas fa-trophy text-yellow-500 mr-2"></i>
+              Player Rankings
+            </h3>
+            <div id="rankingsContainer" class="space-y-3">
+              <!-- Rankings will be dynamically inserted here -->
+            </div>
+          </div>
+          <!-- Bounties -->
+          <div class="luxury-card p-6">
+            <h3 class="text-xl font-bold mb-4 flex items-center">
+              <i class="fas fa-bounty-hunter text-red-500 mr-2"></i>
+              Active Bounties
+            </h3>
+            <div id="bountiesContainer" class="space-y-3">
+              <!-- Bounties will be dynamically inserted here -->
+            </div>
+          </div>
+          <!-- Lotto Results -->
+          <div class="luxury-card p-6">
+            <h3 class="text-xl font-bold mb-4 flex items-center">
+              <i class="fas fa-dice text-purple-500 mr-2"></i>
+              Lotto Results
+            </h3>
+            <div class="grid grid-cols-5 gap-2">
+              <div class="lotto-ball rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm">12</div>
+              <div class="lotto-ball rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm">23</div>
+              <div class="lotto-ball rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm">34</div>
+              <div class="lotto-ball rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm">45</div>
+              <div class="lotto-ball rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm">56</div>
+              <div class="lotto-ball rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm">67</div>
+              <div class="lotto-ball rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm">78</div>
+              <div class="lotto-ball rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm">89</div>
+              <div class="lotto-ball rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm">90</div>
+              <div class="lotto-ball rounded-full w-10 h-10 flex items-center justify-center font-bold text-sm">1</div>
+            </div>
+            <div class="mt-4 text-center">
+              <p class="text-sm text-gray-400">Next Draw: 2 hours</p>
+              <button class="mt-2 gold-button px-4 py-2 rounded-lg text-sm">Play Now</button>
+            </div>
+          </div>
+          <!-- Stats -->
+          <div class="luxury-card p-6">
+            <h3 class="text-xl font-bold mb-4">Site Stats</h3>
+            <div class="space-y-3">
+              <div class="flex justify-between">
+                <span class="text-gray-400">Total Articles</span>
+                <span class="stats-number">5</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-400">Active Users</span>
+                <span class="stats-number">1,234</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-400">Today's Posts</span>
+                <span class="stats-number">47</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-400">Comments</span>
+                <span class="stats-number">892</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Footer -->
+    <footer class="footer-luxury py-8 mt-12">
+      <div class="container mx-auto px-4">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div>
+            <h4 class="font-bold mb-4 gradient-text">The Daily Chronicle</h4>
+            <p class="text-gray-400 text-sm">Your trusted source for news and updates.</p>
+          </div>
+          <div>
+            <h4 class="font-bold mb-4">Quick Links</h4>
+            <ul class="space-y-2 text-sm text-gray-400">
+              <li><a href="#" class="hover:text-white">About Us</a></li>
+              <li><a href="#" class="hover:text-white">Contact</a></li>
+              <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4 class="font-bold mb-4">Categories</h4>
+            <ul class="space-y-2 text-sm text-gray-400">
+              <li><a href="#" class="hover:text-white">News</a></li>
+              <li><a href="#" class="hover:text-white">Politics</a></li>
+              <li><a href="#" class="hover:text-white">Sports</a></li>
+              <li><a href="#" class="hover:text-white">Entertainment</a></li>
+              <li><a href="#" class="hover:text-white">Technology</a></li>
+              <li><a href="#" class="hover:text-white">Business</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4 class="font-bold mb-4">Follow Us</h4>
+            <div class="flex space-x-4">
+              <a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
+                <i class="fab fa-twitter"></i>
+              </a>
+              <a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
+                <i class="fab fa-facebook"></i>
+              </a>
+              <a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center">
+                <i class="fab fa-instagram"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm text-gray-400">
+          <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="text-blue-400 hover:underline">Built with anycoder</a>
+        </div>
+      </div>
+    </footer>
+  </div>
+  <script>
+    // Data
+    const categories = [
+      { id: 1, name: "News", color: "bg-blue-500", icon: "fas fa-newspaper" },
+      { id: 2, name: "Politics", color: "bg-red-500", icon: "fas fa-gavel" },
+      { id: 3, name: "Sports", color: "bg-green-500", icon: "fas fa-futbol" },
+      { id: 4, name: "Entertainment", color: "bg-purple-500", icon: "fas fa-film" },
+      { id: 5, name: "Technology", color: "bg-indigo-500", icon: "fas fa-laptop" },
+      { id: 6, name: "Business", color: "bg-yellow-500", icon: "fas fa-chart-line" }
+    ];
+    const mockArticles = [
+      {
+        id: 1,
+        title: "Major Political Shift in City Council",
+        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...",
+        author: "John Doe",
+        category: 2,
+        date: "2024-01-15",
+        likes: 234,
+        comments: 45,
+        image: "https://picsum.photos/seed/politics/400/200.jpg"
+      },
+      {
+        id: 2,
+        title: "Local Team Wins Championship",
+        content: "The hometown heroes have done it again! After a thrilling final match, our local team has secured the championship title...",
+        author: "Sarah Smith",
+        category: 3,
+        date: "2024-01-14",
+        likes: 567,
+        comments: 89,
+        image: "https://picsum.photos/seed/sports/400/200.jpg"
+      },
+      {
+        id: 3,
+        title: "Tech Startup Raises $10M",
+        content: "A promising new technology startup has secured major funding, positioning itself as a leader in the AI space...",
+        author: "Mike Johnson",
+        category: 5,
+        date: "2024-01-13",
+        likes: 189,
+        comments: 23,
+        image: "https://picsum.photos/seed/tech/400/200.jpg"
+      },
+      {
+        id: 4,
+        title: "New Restaurant Opens Downtown",
+        content: "Food enthusiasts rejoice! A new gourmet restaurant has opened its doors in the heart of downtown, offering a unique culinary experience...",
+        author: "Emma Wilson",
+        category: 4,
+        date: "2024-01-12",
+        likes: 145,
+        comments: 34,
+        image: "https://picsum.photos/seed/food/400/200.jpg"
+      },
+      {
+        id: 5,
+        title: "Stock Market Reaches New High",
+        content: "The stock market has hit an all-time high today, with investors showing renewed confidence in the economy...",
+        author: "Robert Chen",
+        category: 6,
+        date: "2024-01-11",
+        likes: 321,
+        comments: 56,
+        image: "https://picsum.photos/seed/finance/400/200.jpg"
+      }
+    ];
+    const rankings = [
+      { rank: 1, name: "DragonSlayer", points: 15420, avatar: "https://picsum.photos/seed/user1/50/50.jpg" },
+      { rank: 2, name: "ShadowHunter", points: 14280, avatar: "https://picsum.photos/seed/user2/50/50.jpg" },
+      { rank: 3, name: "PhoenixRise", points: 13890, avatar: "https://picsum.photos/seed/user3/50/50.jpg" },
+      { rank: 4, name: "IceQueen", points: 12540, avatar: "https://picsum.photos/seed/user4/50/50.jpg" },
+      { rank: 5, name: "ThunderBolt", points: 11870, avatar: "https://picsum.photos/seed/user5/50/50.jpg" }
+    ];
+    const bounties = [
+      { id: 1, target: "Wanted: The Bandit King", reward: "$50,000", status: "Active" },
+      { id: 2, target: "Missing: Ancient Artifact", reward: "$25,000", status: "Active" },
+      { id: 3, target: "Capture: Rogue Scientist", reward: "$75,000", status: "Active" },
+      { id: 4, target: "Eliminate: Corporate Spy", reward: "$30,000", status: "Active" },
+      { id: 5, target: "Recover: Stolen Data", reward: "$40,000", status: "Active" }
+    ];
+    // DOM Elements
+    const postArticleBtn = document.getElementById('postArticleBtn');
+    const postModal = document.getElementById('postModal');
+    const cancelBtn = document.getElementById('cancelBtn');
+    const publishBtn = document.getElementById('publishBtn');
+    const articlesContainer = document.getElementById('articlesContainer');
+    const rankingsContainer = document.getElementById('rankingsContainer');
+    const bountiesContainer = document.getElementById('bountiesContainer');
+    const categoryPills = document.querySelectorAll('.category-pill');
+    // Show/Hide Modal
+    postArticleBtn.addEventListener('click', () => {
+      postModal.classList.remove('hidden');
+    });
+    cancelBtn.addEventListener('click', () => {
+      postModal.classList.add('hidden');
+    });
+    // Category Filtering
+    categoryPills.forEach(pill => {
+      pill.addEventListener('click', () => {
+        categoryPills.forEach(p => p.classList.remove('bg-gray-800'));
+        pill.classList.add('bg-gray-800');
+        renderArticles(pill.dataset.category);
+      });
+    });
+    // Render Articles
+    function renderArticles(category = 'all') {
+      articlesContainer.innerHTML = '';
+      const filteredArticles = category === 'all'
+        ? mockArticles
+        : mockArticles.filter(article => article.category == category);
+      filteredArticles.forEach(article => {
+        const categoryInfo = categories.find(c => c.id == article.category);
+        const articleElement = document.createElement('div');
+        articleElement.className = 'article-card';
+        articleElement.innerHTML = `
+          <div class="md:flex">
+            <div class="md:w-1/3">
+              <img src="${article.image}" alt="${article.title}" class="w-full h-48 md:h-full object-cover">
+            </div>
+            <div class="p-6 md:w-2/3">
+              <div class="flex items-center space-x-2 mb-2">
+                <span class="category-tag text-white text-xs px-2 py-1 rounded-full">
+                  ${categoryInfo.name}
+                </span>
+                <span class="text-gray-400 text-sm">${article.date}</span>
+              </div>
+              <h2 class="playfair text-2xl font-bold mb-3 text-gray-100">${article.title}</h2>
+              <p class="text-gray-300 mb-4 line-clamp-3">${article.content}</p>
+              <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-4">
+                  <span class="text-gray-400 text-sm">By ${article.author}</span>
+                  <div class="flex items-center space-x-2">
+                    <button class="flex items-center space-x-1 text-gray-400 hover:text-yellow-400">
+                      <i class="far fa-thumbs-up"></i>
+                      <span>${article.likes}</span>
+                    </button>
+                    <button class="flex items-center space-x-1 text-gray-400 hover:text-blue-400">
+                      <i class="far fa-comment"></i>
+                      <span>${article.comments}</span>
+                    </button>
+                  </div>
                 </div>
+                <button class="text-blue-400 hover:text-blue-300">Read More</button>
+              </div>
+            </div>
+          </div>
+        `;
+        articlesContainer.appendChild(articleElement);
+      });
+    }
+    // Render Rankings
+    function renderRankings() {
+      rankingsContainer.innerHTML = '';
+      rankings.forEach(player => {
+        const playerElement = document.createElement('div');
+        playerElement.className = 'flex items-center space-x-3';
+        playerElement.innerHTML = `
+          <div class="rank-badge ${player.rank === 1 ? 'rank-1' : player.rank === 2 ? 'rank-2' : player.rank === 3 ? 'rank-3' : 'bg-gray-600'}">
+            ${player.rank}
+          </div>
+          <img src="${player.avatar}" alt="${player.name}" class="w-10 h-10 rounded-full">
+          <div class="flex-1">
+            <p class="font-semibold text-gray-100">${player.name}</p>
+            <p class="text-sm text-gray-400">${player.points.toLocaleString()} pts</p>
+          </div>
+        `;
+        rankingsContainer.appendChild(playerElement);
+      });
+    }
+    // Render Bounties
+    function renderBounties() {
+      bountiesContainer.innerHTML = '';
+      bounties.forEach(bounty => {
+        const bountyElement = document.createElement('div');
+        bountyElement.className = 'border-l-4 border-red-500 pl-3 py-2';
+        bountyElement.innerHTML = `
+          <p class="font-semibold text-gray-100">${bounty.target}</p>
+          <p class="text-sm text-green-400 font-bold">Reward: ${bounty.reward}</p>
+          <span class="inline-block mt-1 px-2 py-1 bg-green-900 text-green-300 text-xs rounded-full">
+            ${bounty.status}
+          </span>
+        `;
+        bountiesContainer.appendChild(bountyElement);
+      });
+    }
+    // Initialize
+    renderArticles();
+    renderRankings();
+    renderBounties();
+    // Handle Publish
+    publishBtn.addEventListener('click', () => {
+      const title = document.getElementById('articleTitle').value;
+      const content = document.getElementById('articleContent').value;
+      const author = document.getElementById('articleAuthor').value;
+      const category = document.getElementById('articleCategory').value;
+      if (title && content) {
+        const newArticle = {
+          id: mockArticles.length + 1,
+          title,
+          content,
+          author: author || 'Anonymous',
+          category: parseInt(category),
+          date: new Date().toISOString().split('T')[0],
+          likes: 0,
+          comments: 0,
+          image: `https://picsum.photos/seed/${Math.random()}/400/200.jpg`
+        };
+        mockArticles.unshift(newArticle);
+        renderArticles();
+        postModal.classList.add('hidden');
+        // Reset form
+        document.getElementById('articleTitle').value = '';
+        document.getElementById('articleContent').value = '';
+        document.getElementById('articleAuthor').value = '';
+        document.getElementById('articleCategory').value = '1';
+      }
+    });
+  </script>
 </body>
 </html>