Upload folder using huggingface_hub

index.html

@@ -6,7 +6,7 @@
   <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">
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600;700&family=Cinzel:wght@400;600&family=Roboto+Slab:wght@400;700&display=swap" rel="stylesheet">
   <style>
     * {
       margin: 0;
@@ -33,33 +33,22 @@
       --gray-300: #F3F4F6;
       --glass-bg: rgba(255, 255, 255, 0.1);
       --glass-border: rgba(255, 255, 255, 0.2);
+      --paper-bg: #F5F5F5;
+      --paper-text: #333333;
+      --accent-red: #DC143C;
+      --accent-blue: #1E3A8A;
     }
 
     body {
       font-family: 'Inter', sans-serif;
-      background: linear-gradient(135deg, #0F0C29, #302B63, #24243E);
+      background: linear-gradient(135deg, #F5F5F5, #E8E8E8);
       min-height: 100vh;
-      color: var(--white);
+      color: var(--paper-text);
       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 {
+    .newspaper-container {
       position: relative;
       z-index: 2;
     }
@@ -72,76 +61,85 @@
       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);
+    .roboto-slab {
+      font-family: 'Roboto Slab', serif;
     }
 
-    .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);
+    .newspaper-header {
+      background: linear-gradient(90deg, #1a1a1a 0%, #2d2d2d 100%);
+      border-bottom: 4px solid var(--primary-gold);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+      position: sticky;
+      top: 0;
+      z-index: 50;
+    }
+
+    .newspaper-card {
+      background: var(--white);
+      border: 1px solid #ddd;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       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);
+    .newspaper-card:hover {
+      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
     }
 
-    .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;
+    .headline-1 {
+      font-family: 'Playfair Display', serif;
+      font-size: 2.5rem;
+      font-weight: 900;
+      line-height: 1.2;
+      color: var(--accent-red);
+      margin-bottom: 1rem;
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
     }
 
-    .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;
+    .headline-2 {
+      font-family: 'Playfair Display', serif;
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: var(--accent-blue);
+      margin-bottom: 0.5rem;
     }
 
-    .category-pill:hover::before {
-      transform: translateX(100%);
+    .headline-3 {
+      font-family: 'Playfair Display', serif;
+      font-size: 1.4rem;
+      font-weight: 600;
+      color: var(--gray-800);
+      margin-bottom: 0.3rem;
     }
 
-    .category-pill:hover {
-      transform: scale(1.05);
-      border-color: var(--primary-gold);
-      box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
+    .byline {
+      font-size: 0.9rem;
+      color: var(--gray-600);
+      font-style: italic;
+      margin-bottom: 0.5rem;
     }
 
-    .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;
+    .date-stamp {
+      font-size: 0.8rem;
+      color: var(--gray-500);
+      margin-bottom: 0.5rem;
     }
 
-    .article-card:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
-      border-color: var(--primary-gold);
+    .article-excerpt {
+      font-size: 1rem;
+      line-height: 1.6;
+      color: var(--gray-700);
+      margin-bottom: 1rem;
     }
 
-    .article-card .category-tag {
-      background: linear-gradient(135deg, var(--deep-purple), var(--royal-blue));
-      border: 1px solid rgba(255, 255, 255, 0.2);
+    .category-tag {
+      display: inline-block;
+      background: var(--gray-200);
+      color: var(--gray-800);
+      font-size: 0.75rem;
+      padding: 0.25rem 0.75rem;
+      border-radius: 3px;
+      margin-right: 0.5rem;
+      font-weight: 600;
     }
 
     .gold-button {
@@ -174,84 +172,150 @@
       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;
+    .weather-widget {
+      background: linear-gradient(135deg, #87CEEB, #4682B4);
+      color: white;
+      padding: 1rem;
+      border-radius: 8px;
+      text-align: center;
+    }
+
+    .weather-temp {
+      font-size: 2rem;
       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);
+    .weather-desc {
+      font-size: 1rem;
     }
 
-    .rank-2 {
-      background: linear-gradient(135deg, #C0C0C0, #808080);
-      box-shadow: 0 0 15px rgba(192, 192, 192, 0.6);
+    .stock-ticker {
+      background: var(--gray-900);
+      color: var(--primary-gold);
+      padding: 0.5rem;
+      font-family: 'Courier New', monospace;
+      overflow: hidden;
+      white-space: nowrap;
+      animation: ticker 20s linear infinite;
     }
 
-    .rank-3 {
-      background: linear-gradient(135deg, #CD7F32, #8B4513);
-      box-shadow: 0 0 15px rgba(205, 127, 50, 0.6);
+    @keyframes ticker {
+      0% {
+        transform: translateX(100%);
+      }
+
+      100% {
+        transform: translateX(-100%);
+      }
     }
 
-    .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;
+    .section-divider {
+      height: 3px;
+      background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
+      margin: 2rem 0;
     }
 
-    @keyframes bounce {
-      0%, 100% {
-        transform: translateY(0) rotate(0deg);
-      }
-      50% {
-        transform: translateY(-10px) rotate(5deg);
-      }
+    .column {
+      column-count: 3;
+      column-gap: 2rem;
+      column-rule: 1px solid #ddd;
     }
 
-    .glow-text {
-      text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
+    .column-item {
+      break-inside: avoid;
+      margin-bottom: 1.5rem;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid #eee;
     }
 
-    .gradient-text {
-      background: linear-gradient(135deg, var(--primary-gold), var(--royal-blue));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
+    .column-item:last-child {
+      border-bottom: none;
     }
 
-    .modal-overlay {
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(5px);
+    .front-page {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: 2rem;
+      margin-bottom: 2rem;
     }
 
-    .modal-content {
-      background: linear-gradient(135deg, var(--gray-900), var(--black));
+    .main-story {
+      grid-column: 1 / 2;
+    }
+
+    .sidebar {
+      grid-column: 2 / 3;
+    }
+
+    .editorial {
+      background: #f9f9f9;
+      padding: 1.5rem;
+      border-left: 4px solid var(--primary-gold);
+    }
+
+    .obituaries {
+      background: #fff8f8;
+      padding: 1.5rem;
+      border-left: 4px solid var(--crimson);
+    }
+
+    .sports {
+      background: #f0f8ff;
+      padding: 1.5rem;
+      border-left: 4px solid var(--royal-blue);
+    }
+
+    .business {
+      background: #fffaf0;
+      padding: 1.5rem;
+      border-left: 4px solid var(--dark-gold);
+    }
+
+    .weather-box {
+      background: #e6f3ff;
+      padding: 1rem;
+      border-radius: 8px;
+      margin-bottom: 1rem;
+    }
+
+    .lotto-ball {
+      background: linear-gradient(135deg, var(--crimson), var(--deep-purple));
       border: 2px solid var(--primary-gold);
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
+      box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
+      animation: bounce 2s infinite;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin: 0.25rem;
+      color: white;
     }
 
-    .stats-number {
-      font-family: 'Cinzel', serif;
-      font-size: 1.5rem;
-      color: var(--primary-gold);
+    @keyframes bounce {
+
+      0%,
+      100% {
+        transform: translateY(0) rotate(0deg);
+      }
+
+      50% {
+        transform: translateY(-10px) rotate(5deg);
+      }
     }
 
-    .footer-luxury {
-      background: linear-gradient(135deg, var(--gray-900), var(--black));
-      border-top: 2px solid var(--primary-gold);
+    .footer-newspaper {
+      background: #1a1a1a;
+      color: white;
+      padding: 2rem 0;
+      margin-top: 3rem;
     }
 
     .social-icon {
-      background: var(--glass-bg);
-      border: 1px solid var(--glass-border);
+      background: var(--gray-700);
+      border: 1px solid var(--gray-600);
       transition: all 0.3s ease;
     }
 
@@ -261,202 +325,292 @@
       box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
     }
 
+    @media (max-width: 1200px) {
+      .front-page {
+        grid-template-columns: 1fr;
+      }
+
+      .main-story {
+        grid-column: 1;
+      }
+
+      .sidebar {
+        grid-column: 1;
+      }
+
+      .column {
+        column-count: 2;
+      }
+    }
+
     @media (max-width: 768px) {
-      .luxury-header {
-        padding: 1rem 0;
+      .column {
+        column-count: 1;
       }
-      
-      .luxury-card {
-        margin-bottom: 1rem;
+
+      .headline-1 {
+        font-size: 2rem;
       }
+
+      .headline-2 {
+        font-size: 1.4rem;
+      }
+
+      .headline-3 {
+        font-size: 1.2rem;
+      }
+    }
+
+    .modal-overlay {
+      background: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(5px);
+    }
+
+    .modal-content {
+      background: white;
+      border: 2px solid var(--primary-gold);
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
     }
   </style>
 </head>
 
 <body>
-  <div class="pimp-container">
+  <div class="newspaper-container">
     <!-- Header -->
-    <header class="luxury-header sticky top-0 z-50">
+    <header class="newspaper-header">
       <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>
+            <h1 class="playfair text-4xl font-bold text-white">The Daily Chronicle</h1>
+            <span class="text-sm text-gray-400">• Thursday, January 18, 2024</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>
+            <a href="#" class="text-gray-300 hover:text-white transition">Sections</a>
+            <a href="#" class="text-gray-300 hover:text-white transition">Classifieds</a>
+            <a href="#" class="text-gray-300 hover:text-white transition">Weather</a>
             <button id="postArticleBtn" class="gold-button px-6 py-2 rounded-lg">
-              Post Article
+              Submit Story
             </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>
+    <!-- Stock Ticker -->
+    <div class="stock-ticker">
+      <span>• Dow Jones: 38,654.42 ▲ 245.32 • NASDAQ: 15,832.80 ▲ 189.45 • S&P 500: 5,023.45 ▲ 32.12 • Gold: $2,045.67 ▲ $12.34 • Oil: $78.45 ▲ $1.23 •</span>
     </div>
 
+    <!-- Main Content -->
     <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>
+      <!-- Front Page -->
+      <div class="front-page">
+        <!-- Main Story -->
+        <div class="main-story">
+          <div class="newspaper-card p-6">
+            <div class="category-tag">FRONT PAGE</div>
+            <h2 class="headline-1">Political Revolution: New Bill Passes with Historic Majority</h2>
+            <div class="byline">By John Anderson, Political Correspondent</div>
+            <div class="date-stamp">January 18, 2024 • 8:30 AM EST</div>
+            <img src="https://picsum.photos/seed/politics/800/400.jpg" alt="Political Rally" class="w-full h-64 object-cover rounded mb-4">
+            <p class="article-excerpt">
+              In a stunning development that has sent shockwaves through the political landscape, the controversial bill that has dominated headlines for months has finally passed both chambers of Congress with an unprecedented majority. The legislation, which addresses long-standing issues in education and healthcare, represents a significant shift in national policy that experts predict will reshape the country for generations to come.
+            </p>
+            <p class="article-excerpt">
+              President-elect Sarah Mitchell, who campaigned heavily on this platform, hailed the passage as "a victory for the American people" while opposition leaders warned of potential unintended consequences. The bill now moves to the President's desk for signature, expected early next week.
+            </p>
+            <div class="flex items-center space-x-4 mt-4">
+              <button class="gold-button px-4 py-2 rounded">Read Full Story</button>
+              <div class="flex items-center space-x-2 text-gray-500">
+                <i class="far fa-thumbs-up"></i>
+                <span>2,345</span>
+                <i class="far fa-comment ml-4"></i>
+                <span>189</span>
+              </div>
+            </div>
           </div>
 
-          <!-- Articles Grid -->
-          <div id="articlesContainer" class="space-y-6">
-            <!-- Articles will be dynamically inserted here -->
+          <!-- Editorial Section -->
+          <div class="editorial mt-6">
+            <h3 class="text-xl font-bold mb-3">Editorial: A New Dawn for Democracy</h3>
+            <p class="text-gray-700">
+              The passage of this historic legislation marks not just a political victory, but a triumph for democratic process. After years of partisan gridlock and public disillusionment, we are witnessing a rare moment where compromise and cooperation have prevailed over division.
+            </p>
+            <p class="text-gray-700 mt-2">
+              While challenges remain, this achievement demonstrates that our democratic institutions are resilient and capable of delivering meaningful change when leaders choose to work together for the common good.
+            </p>
           </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 class="sidebar space-y-6">
+          <!-- Weather Widget -->
+          <div class="weather-widget">
+            <div class="weather-temp">72°F</div>
+            <div class="weather-desc">Partly Cloudy • New York</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 -->
+          <!-- Lotto Results -->
+          <div class="newspaper-card p-4">
+            <h3 class="text-lg font-bold mb-3">Lotto Results</h3>
+            <div class="flex flex-wrap justify-center">
+              <div class="lotto-ball">12</div>
+              <div class="lotto-ball">23</div>
+              <div class="lotto-ball">34</div>
+              <div class="lotto-ball">45</div>
+              <div class="lotto-ball">56</div>
+              <div class="lotto-ball">67</div>
+              <div class="lotto-ball">78</div>
+              <div class="lotto-ball">89</div>
+              <div class="lotto-ball">90</div>
+              <div class="lotto-ball">1</div>
+            </div>
+            <div class="mt-3 text-center">
+              <p class="text-sm">Next Draw: 10:00 PM</p>
+              <button class="mt-2 gold-button px-3 py-1 rounded text-sm">Play Now</button>
             </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>
+          <!-- Obituaries -->
+          <div class="obituaries">
+            <h3 class="text-lg font-bold mb-3">In Memoriam</h3>
+            <div class="space-y-2">
+              <p class="font-semibold">Dr. Margaret Thompson</p>
+              <p class="text-sm text-gray-600">Beloved educator, 82, passed away peacefully surrounded by family.</p>
+              <p class="font-semibold mt-3">Robert Chen</p>
+              <p class="text-sm text-gray-600">Pioneering tech entrepreneur, 65, leaves behind legacy of innovation.</p>
             </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>
+
+          <!-- Sports Brief -->
+          <div class="sports">
+            <h3 class="text-lg font-bold mb-3">Sports Brief</h3>
+            <div class="space-y-2">
+              <p class="font-semibold">Local Team Wins Championship</p>
+              <p class="text-sm text-gray-600">After a thrilling final match, our hometown heroes have secured the championship title for the first time in 25 years.</p>
             </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>
+          <!-- Business News -->
+          <div class="business">
+            <h3 class="text-lg font-bold mb-3">Business</h3>
+            <div class="space-y-2">
+              <p class="font-semibold">Tech Startup Raises $50M</p>
+              <p class="text-sm text-gray-600">A promising new AI startup secures major funding, positioning itself as a leader in the technology space.</p>
             </div>
           </div>
         </div>
       </div>
+
+      <!-- Section Divider -->
+      <div class="section-divider"></div>
+
+      <!-- News Columns -->
+      <div class="column">
+        <div class="column-item">
+          <div class="category-tag">NATIONAL</div>
+          <h3 class="headline-3">Economy Shows Strong Growth in Q4</h3>
+          <div class="byline">By Emily Roberts</div>
+          <p class="article-excerpt">
+            New economic data released today shows the strongest quarterly growth in two years, with GDP increasing by 3.2% and unemployment dropping to 3.5%.
+          </p>
+        </div>
+
+        <div class="column-item">
+          <div class="category-tag">WORLD</div>
+          <h3 class="headline-3">Peace Talks Resume in Middle East</h3>
+          <div class="byline">By Michael Brown</div>
+          <p class="article-excerpt">
+            Diplomatic efforts resume as world leaders gather in Geneva for peace negotiations aimed at ending the long-standing conflict.
+          </p>
+        </div>
+
+        <div class="column-item">
+          <div class="category-tag">TECHNOLOGY</div>
+          <h3 class="headline-3">Major Breakthrough in Renewable Energy</h3>
+          <div class="byline">By Sarah Johnson</div>
+          <p class="article-excerpt">
+            Scientists announce revolutionary new solar technology that could reduce energy costs by 40% within the next five years.
+          </p>
+        </div>
+
+        <div class="column-item">
+          <div class="category-tag">SCIENCE</div>
+          <h3 class="headline-3">New Dinosaur Species Discovered</h3>
+          <div class="byline">By Dr. James Wilson</div>
+          <p class="article-excerpt">
+            Paleontologists unearth fossil remains of a previously unknown species that lived during the Cretaceous period.
+          </p>
+        </div>
+
+        <div class="column-item">
+          <div class="category-tag">ENTERTAINMENT</div>
+          <h3 class="headline-3">Blockbuster Film Breaks Box Office Records</h3>
+          <div class="byline">By Lisa Martinez</div>
+          <p class="article-excerpt">
+            The latest superhero movie has become the highest-grossing film of all time, surpassing previous records by over $200 million.
+          </p>
+        </div>
+
+        <div class="column-item">
+          <div class="category-tag">HEALTH</div>
+          <h3 class="headline-3">New Study Shows Benefits of Mediterranean Diet</h3>
+          <div class="byline">By Dr. Patricia Lee</div>
+          <p class="article-excerpt">
+            Research indicates that following a Mediterranean diet can reduce risk of heart disease by up to 30%.
+          </p>
+        </div>
+
+        <div class="column-item">
+          <div class="category-tag">EDUCATION</div>
+          <h3 class="headline-3">Schools Implement New Technology Programs</h3>
+          <div class="byline">By Tom Harris</div>
+          <p class="article-excerpt">
+            Local school districts announce major investments in computer science and STEM education for students of all ages.
+          </p>
+        </div>
+
+        <div class="column-item">
+          <div class="category-tag">ENVIRONMENT</div>
+          <h3 class="headline-3">Climate Agreement Reached at Global Summit</h3>
+          <div class="byline">By Rachel Green</div>
+          <p class="article-excerpt">
+            Nations commit to aggressive carbon reduction targets in historic agreement aimed at limiting global warming to 1.5°C.
+          </p>
+        </div>
+      </div>
     </div>
 
     <!-- Footer -->
-    <footer class="footer-luxury py-8 mt-12">
+    <footer class="footer-newspaper">
       <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>
+            <h4 class="font-bold mb-4 text-white">The Daily Chronicle</h4>
+            <p class="text-gray-400 text-sm">Your trusted source for news and information since 1892.</p>
           </div>
           <div>
-            <h4 class="font-bold mb-4">Quick Links</h4>
+            <h4 class="font-bold mb-4 text-white">Sections</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>
+              <li><a href="#" class="hover:text-white">National</a></li>
+              <li><a href="#" class="hover:text-white">World</a></li>
+              <li><a href="#" class="hover:text-white">Business</a></li>
+              <li><a href="#" class="hover:text-white">Sports</a></li>
+              <li><a href="#" class="hover:text-white">Entertainment</a></li>
             </ul>
           </div>
           <div>
-            <h4 class="font-bold mb-4">Categories</h4>
+            <h4 class="font-bold mb-4 text-white">Services</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>
+              <li><a href="#" class="hover:text-white">Classifieds</a></li>
+              <li><a href="#" class="hover:text-white">Subscribe</a></li>
+              <li><a href="#" class="hover:text-white">Advertise</a></li>
+              <li><a href="#" class="hover:text-white">Contact Us</a></li>
             </ul>
           </div>
           <div>
-            <h4 class="font-bold mb-4">Follow Us</h4>
+            <h4 class="font-bold mb-4 text-white">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>
@@ -478,238 +632,18 @@
   </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');
+    // Post Article Modal (simplified for this demo)
+    document.getElementById('postArticleBtn').addEventListener('click', function() {
+      alert('Submit your story feature would open a modal in a real implementation');
     });
 
-    // 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);
-      });
+    // Animate stock ticker
+    const ticker = document.querySelector('.stock-ticker');
+    ticker.addEventListener('mouseenter', function() {
+      this.style.animationPlayState = 'paused';
     });
-
-    // 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';
-      }
+    ticker.addEventListener('mouseleave', function() {
+      this.style.animationPlayState = 'running';
     });
   </script>
 </body>