Spaces:

Cairo303
/

anycoder-a6cac0b5

Running

File size: 21,260 Bytes

<!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;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;
      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);
      --paper-bg: #F5F5F5;
      --paper-text: #333333;
      --accent-red: #DC143C;
      --accent-blue: #1E3A8A;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, #F5F5F5, #E8E8E8);
      min-height: 100vh;
      color: var(--paper-text);
      position: relative;
      overflow-x: hidden;
    }

    .newspaper-container {
      position: relative;
      z-index: 2;
    }

    .playfair {
      font-family: 'Playfair Display', serif;
    }

    .cinzel {
      font-family: 'Cinzel', serif;
    }

    .roboto-slab {
      font-family: 'Roboto Slab', serif;
    }

    .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;
    }

    .newspaper-card:hover {
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    }

    .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);
    }

    .headline-2 {
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--accent-blue);
      margin-bottom: 0.5rem;
    }

    .headline-3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.4rem;
      font-weight: 600;
      color: var(--gray-800);
      margin-bottom: 0.3rem;
    }

    .byline {
      font-size: 0.9rem;
      color: var(--gray-600);
      font-style: italic;
      margin-bottom: 0.5rem;
    }

    .date-stamp {
      font-size: 0.8rem;
      color: var(--gray-500);
      margin-bottom: 0.5rem;
    }

    .article-excerpt {
      font-size: 1rem;
      line-height: 1.6;
      color: var(--gray-700);
      margin-bottom: 1rem;
    }

    .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 {
      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);
    }

    .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;
    }

    .weather-desc {
      font-size: 1rem;
    }

    .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;
    }

    @keyframes ticker {
      0% {
        transform: translateX(100%);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    .section-divider {
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
      margin: 2rem 0;
    }

    .column {
      column-count: 3;
      column-gap: 2rem;
      column-rule: 1px solid #ddd;
    }

    .column-item {
      break-inside: avoid;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid #eee;
    }

    .column-item:last-child {
      border-bottom: none;
    }

    .front-page {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 2rem;
      margin-bottom: 2rem;
    }

    .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 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;
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(-10px) rotate(5deg);
      }
    }

    .footer-newspaper {
      background: #1a1a1a;
      color: white;
      padding: 2rem 0;
      margin-top: 3rem;
    }

    .social-icon {
      background: var(--gray-700);
      border: 1px solid var(--gray-600);
      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: 1200px) {
      .front-page {
        grid-template-columns: 1fr;
      }

      .main-story {
        grid-column: 1;
      }

      .sidebar {
        grid-column: 1;
      }

      .column {
        column-count: 2;
      }
    }

    @media (max-width: 768px) {
      .column {
        column-count: 1;
      }

      .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="newspaper-container">
    <!-- Header -->
    <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-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">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">
              Submit Story
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- 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">
      <!-- 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>

          <!-- 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="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>

          <!-- 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>

          <!-- 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>

          <!-- 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>

          <!-- 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-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 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 text-white">Sections</h4>
            <ul class="space-y-2 text-sm text-gray-400">
              <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 text-white">Services</h4>
            <ul class="space-y-2 text-sm text-gray-400">
              <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 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>
              </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>
    // 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');
    });

    // Animate stock ticker
    const ticker = document.querySelector('.stock-ticker');
    ticker.addEventListener('mouseenter', function() {
      this.style.animationPlayState = 'paused';
    });
    ticker.addEventListener('mouseleave', function() {
      this.style.animationPlayState = 'running';
    });
  </script>
</body>

</html>