Spaces:

bep40
/

newsscraper-pro

Running

App Files Files Community

bep40 commited on Oct 28, 2025

Commit

9a0b1a5

verified ·

1 Parent(s): ee23f5e

Lấy tin tức tự động từ URL nhập vào url tin tức, ứng dụng sẽ đưa ra các ý chính và toàn bộ hình ảnh tin đó

Browse files

Files changed (8) hide show

README.md +7 -4
about.html +113 -0
components/footer.js +90 -0
components/navbar.js +81 -0
contact.html +119 -0
index.html +127 -19
script.js +171 -0
style.css +59 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Newsscraper Pro
-emoji: 🐢
-colorFrom: indigo
 colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: NewsScraper Pro 🕷️
+colorFrom: green
 colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

about.html ADDED Viewed

	@@ -0,0 +1,113 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - NewsScraper Pro</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-16">
+        <!-- Header Section -->
+        <section class="text-center mb-16">
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">
+            About NewsScraper Pro
+            </h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+            Powerful web scraping technology that extracts key insights and images from any news article.
+            </p>
+        </section>
+        <!-- Features Section -->
+        <section class="max-w-6xl mx-auto mb-16">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-white rounded-2xl shadow-lg p-8 text-center">
+                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                    <i data-feather="zap" class="w-8 h-8 text-blue-500"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-gray-800 mb-4">Fast Extraction</h3>
+                <p class="text-gray-600">
+                    Quickly extract content from news articles with our optimized scraping algorithms.
+                </p>
+            </div>
+            <!-- Feature 2 -->
+            <div class="bg-white rounded-2xl shadow-lg p-8 text-center">
+                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                    <i data-feather="check-circle" class="w-8 h-8 text-green-500"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-gray-800 mb-4">Accurate Analysis</h3>
+                <p class="text-gray-600">
+                    Get precise key points and complete image galleries from any news source.
+                </p>
+            </div>
+            <!-- Feature 3 -->
+            <div class="bg-white rounded-2xl shadow-lg p-8 text-center">
+                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                    <i data-feather="shield" class="w-8 h-8 text-purple-500"></i>
+                </div>
+                <h3 class="text-2xl font-bold text-gray-800 mb-4">Secure Processing</h3>
+                <p class="text-gray-600">
+                    Your data is processed securely and never stored on our servers.
+                </p>
+            </div>
+        </section>
+        <!-- How It Works -->
+        <section class="max-w-4xl mx-auto bg-white rounded-2xl shadow-lg p-8">
+            <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">How It Works</h2>
+            <div class="space-y-8">
+                <div class="flex items-start gap-6">
+                    <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold mt-1">
+                    1
+                </div>
+                <div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-2">Enter URL</h3>
+                    <p class="text-gray-600">
+                    Simply paste the URL of any news article you want to analyze.
+                    </p>
+                </div>
+            </div>
+            <div class="flex items-start gap-6">
+                    <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold mt-1">
+                    2
+                </div>
+                <div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-2">AI Processing</h3>
+                    <p class="text-gray-600">
+                    Our system analyzes the article content and extracts key insights.
+                    </p>
+                </div>
+            </div>
+            <div class="flex items-start gap-6">
+                    <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold mt-1">
+                    3
+                </div>
+                <div>
+                    <h3 class="text-xl font-bold text-gray-800 mb-2">Get Results</h3>
+                    <p class="text-gray-600">
+                    Receive organized key points and all images from the article.
+                    </p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

components/footer.js ADDED Viewed

	@@ -0,0 +1,90 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        footer {
+          background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+        }
+        .footer-link {
+          transition: all 0.3s ease;
+        }
+        .footer-link:hover {
+          color: #3b82f6;
+          transform: translateY(-1px);
+        }
+      </style>
+      <footer class="mt-16">
+        <div class="container mx-auto px-4 py-12">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <!-- Brand -->
+            <div class="md:col-span-2">
+              <div class="flex items-center gap-3 mb-4">
+                <i data-feather="globe" class="w-6 h-6 text-blue-400"></i>
+                <span class="text-xl font-bold text-white">NewsScraper Pro</span>
+              </div>
+              <p class="text-gray-400 max-w-md">
+                Extract key insights and all images from any news article with our powerful web scraping technology.
+              </p>
+            </div>
+            <!-- Quick Links -->
+            <div>
+              <h3 class="text-lg font-semibold text-white mb-4">Quick Links</h3>
+              <div class="space-y-2">
+                <a href="index.html" class="footer-link block text-gray-400 hover:text-white">Home</a>
+                <a href="about.html" class="footer-link block text-gray-400 hover:text-white">About</a>
+                <a href="contact.html" class="footer-link block text-gray-400 hover:text-white">Contact</a>
+                <a href="#" class="footer-link block text-gray-400 hover:text-white">Privacy Policy</a>
+              </div>
+            </div>
+            <!-- Contact -->
+            <div>
+              <h3 class="text-lg font-semibold text-white mb-4">Contact</h3>
+              <div class="space-y-2 text-gray-400">
+                <div class="flex items-center gap-2">
+                  <i data-feather="mail" class="w-4 h-4"></i>
+                <span>contact@newsscraper.pro</span>
+              </div>
+              <div class="flex gap-4 mt-4">
+                <a href="#" class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors">
+                  <i data-feather="twitter" class="w-4 h-4 text-gray-400"></i>
+                </a>
+                <a href="#" class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors">
+                  <i data-feather="github" class="w-4 h-4 text-gray-400"></i>
+                </a>
+                <a href="#" class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors">
+                  <i data-feather="linkedin" class="w-4 h-4 text-gray-400"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+          <!-- Bottom Bar -->
+          <div class="border-t border-gray-700 mt-8 pt-8">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 text-sm mb-4 md:mb-0">
+                  © 2024 NewsScraper Pro. All rights reserved.
+                </p>
+                <p class="text-gray-500 text-sm">
+                  Built with <i data-feather="heart" class="w-4 h-4 text-red-400 inline"></i>
+                </p>
+              </div>
+          </div>
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+        <script>
+          feather.replace();
+        </script>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,81 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        nav {
+          background: rgba(255, 255, 255, 0.95);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(229, 231, 235, 0.8);
+        }
+        .nav-link {
+          transition: all 0.3s ease;
+        }
+        .nav-link:hover {
+          color: #3b82f6;
+          transform: translateY(-1px);
+        }
+        .mobile-menu {
+          transition: all 0.3s ease;
+        }
+      </style>
+      <nav class="sticky top-0 z-50">
+        <div class="container mx-auto px-4 py-4">
+          <div class="flex items-center justify-between">
+            <!-- Logo -->
+            <a href="index.html" class="flex items-center gap-3 text-xl font-bold text-gray-800">
+              <i data-feather="globe" class="w-6 h-6 text-blue-500"></i>
+              NewsScraper Pro
+            </a>
+            <!-- Desktop Navigation -->
+            <div class="hidden md:flex items-center gap-8">
+              <a href="index.html" class="nav-link text-gray-700 hover:text-blue-500 font-medium">Home</a>
+              <a href="about.html" class="nav-link text-gray-700 hover:text-blue-500 font-medium">About</a>
+              <a href="contact.html" class="nav-link text-gray-700 hover:text-blue-500 font-medium">Contact</a>
+            </div>
+            <!-- Mobile Menu Button -->
+            <button id="mobileMenuButton" class="md:hidden p-2 rounded-lg hover:bg-gray-100">
+              <i data-feather="menu" class="w-6 h-6"></i>
+            </button>
+          </div>
+          <!-- Mobile Menu -->
+          <div id="mobileMenu" class="mobile-menu hidden md:hidden mt-4 space-y-4 pb-4">
+            <a href="index.html" class="block nav-link text-gray-700 hover:text-blue-500 font-medium">Home</a>
+            <a href="about.html" class="block nav-link text-gray-700 hover:text-blue-500 font-medium">About</a>
+            <a href="contact.html" class="block nav-link text-gray-700 hover:text-blue-500 font-medium">Contact</a>
+          </div>
+        </div>
+      </nav>
+      <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+      <script>
+        feather.replace();
+        // Mobile menu functionality
+        const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');
+        const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
+        mobileMenuButton.addEventListener('click', () => {
+          const isHidden = mobileMenu.classList.contains('hidden');
+          if (isHidden) {
+            mobileMenu.classList.remove('hidden');
+            mobileMenuButton.innerHTML = '<i data-feather="x" class="w-6 h-6"></i>';
+          } else {
+            mobileMenu.classList.add('hidden');
+            mobileMenuButton.innerHTML = '<i data-feather="menu" class="w-6 h-6"></i>';
+          }
+          feather.replace();
+        });
+      </script>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

contact.html ADDED Viewed

	@@ -0,0 +1,119 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact - NewsScraper Pro</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-16">
+        <!-- Header Section -->
+        <section class="text-center mb-16">
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">
+            Contact Us
+            </h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+            Get in touch with our team for any questions or support.
+            </p>
+        </section>
+        <!-- Contact Form Section -->
+        <section class="max-w-4xl mx-auto">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                <!-- Contact Information -->
+                <div class="space-y-8">
+                    <div>
+                        <h2 class="text-2xl font-bold text-gray-800 mb-4">Get In Touch</h2>
+                        <p class="text-gray-600">
+                        Have questions about our news extraction service? We'd love to hear from you.
+                        </p>
+                    </div>
+                    <div class="space-y-6">
+                        <!-- Email -->
+                        <div class="flex items-center gap-4">
+                            <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
+                            <i data-feather="mail" class="w-6 h-6 text-blue-500"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-gray-800">Email</h3>
+                            <p class="text-gray-600">contact@newsscraper.pro</p>
+                        </div>
+                    </div>
+                    <!-- Phone -->
+                    <div class="flex items-center gap-4">
+                            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
+                            <i data-feather="phone" class="w-6 h-6 text-green-500"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-gray-800">Phone</h3>
+                            <p class="text-gray-600">+1 (555) 123-4567</p>
+                        </div>
+                    </div>
+                    <!-- Address -->
+                    <div class="flex items-center gap-4">
+                            <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
+                            <i data-feather="map-pin" class="w-6 h-6 text-purple-500"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-semibold text-gray-800">Office</h3>
+                            <p class="text-gray-600">123 Tech Street<br>San Francisco, CA 94107</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Contact Form -->
+                <div class="bg-white rounded-2xl shadow-lg p-8">
+                    <form class="space-y-6">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div>
+                                <label for="firstName" class="block text-sm font-medium text-gray-700 mb-2">First Name</label>
+                                <input type="text" id="firstName" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200" required>
+                            </div>
+                            <div>
+                                <label for="lastName" class="block text-sm font-medium text-gray-700 mb-2">Last Name</label>
+                                <input type="text" id="lastName" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200" required>
+                            </div>
+                        </div>
+                        <div>
+                            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
+                                <input type="email" id="email" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200" required>
+                        </div>
+                        <div>
+                            <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">Subject</label>
+                                <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200" required>
+                        </div>
+                        <div>
+                            <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Message</label>
+                                <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200" required></textarea>
+                        </div>
+                        <button type="submit" class="w-full bg-blue-500 text-white py-4 px-8 rounded-lg font-semibold hover:bg-blue-600 transition-colors">
+                        Send Message
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,127 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NewsScraper Pro - Extract News Content</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section id="hero" class="text-center mb-12">
+            <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-4">
+                NewsScraper Pro
+            </h1>
+            <p class="text-xl text-gray-600 mb-8">
+                Extract key insights and all images from any news article
+            </p>
+        </section>
+        <!-- Input Section -->
+        <section class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 mb-12">
+            <div class="text-center mb-8">
+                <i data-feather="link" class="w-16 h-16 text-blue-500 mx-auto mb-4"></i>
+                <h2 class="text-2xl font-bold text-gray-800 mb-2">Enter News URL</h2>
+                <p class="text-gray-600">Paste the URL of any news article to extract its content</p>
+            </div>
+            <form id="scrapeForm" class="space-y-6">
+                <div class="relative">
+                    <input
+                        type="url"
+                        id="newsUrl"
+                        placeholder="https://example.com/news-article"
+                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-300 text-lg"
+                        required
+                    >
+                    <i data-feather="globe" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+                </div>
+                <button
+                    type="submit"
+                    class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-8 rounded-xl font-semibold text-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-3"
+                >
+                    <i data-feather="search"></i>
+                    Extract Content
+                </button>
+            </form>
+        </section>
+        <!-- Results Section -->
+        <section id="results" class="max-w-6xl mx-auto hidden">
+            <!-- Loading State -->
+            <div id="loading" class="text-center py-12 hidden">
+                <div class="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-500 mx-auto mb-4"></div>
+                <p class="text-gray-600 text-lg">Analyzing the news article...</p>
+            </div>
+            <!-- Error State -->
+            <div id="error" class="bg-red-50 border border-red-200 rounded-xl p-6 text-center hidden">
+                <i data-feather="alert-triangle" class="w-12 h-12 text-red-500 mx-auto mb-4"></i>
+                <h3 class="text-xl font-bold text-red-800 mb-2">Error</h3>
+                <p id="errorMessage" class="text-red-600"></p>
+            </div>
+            <!-- Success Results -->
+            <div id="successResults" class="space-y-8 hidden">
+                <!-- Article Title -->
+                <div id="articleTitle" class="bg-white rounded-2xl shadow-lg p-8">
+                    <h2 class="text-3xl font-bold text-gray-800"></h2>
+                </div>
+                <!-- Key Points -->
+                <div id="keyPoints" class="bg-white rounded-2xl shadow-lg p-8">
+                    <div class="flex items-center gap-3 mb-6">
+                        <i data-feather="list" class="w-6 h-6 text-blue-500"></i>
+                        <h3 class="text-2xl font-bold text-gray-800">Key Points</h3>
+                    </div>
+                    <ul id="pointsList" class="space-y-3 text-gray-700 text-lg"></ul>
+                </div>
+                <!-- Images Gallery -->
+                <div id="imagesSection" class="bg-white rounded-2xl shadow-lg p-8">
+                    <div class="flex items-center gap-3 mb-6">
+                        <i data-feather="image" class="w-6 h-6 text-blue-500"></i>
+                        <h3 class="text-2xl font-bold text-gray-800">Article Images</h3>
+                    </div>
+                    <div id="imagesGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#hero",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0xf9fafb,
+            size: 0.8
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,171 @@

+// Shared JavaScript across all pages
+// Form submission handler
+document.addEventListener('DOMContentLoaded', function() {
+    const scrapeForm = document.getElementById('scrapeForm');
+    const resultsSection = document.getElementById('results');
+    const loadingDiv = document.getElementById('loading');
+    const errorDiv = document.getElementById('error');
+    const errorMessage = document.getElementById('errorMessage');
+    const successResults = document.getElementById('successResults');
+    const articleTitle = document.getElementById('articleTitle').querySelector('h2');
+    const pointsList = document.getElementById('pointsList');
+    const imagesGrid = document.getElementById('imagesGrid');
+    const imagesSection = document.getElementById('imagesSection');
+    if (scrapeForm) {
+        scrapeForm.addEventListener('submit', async function(e) {
+            e.preventDefault();
+            const urlInput = document.getElementById('newsUrl');
+            const url = urlInput.value.trim();
+            if (!url) {
+                showError('Please enter a valid URL');
+                return;
+            }
+            // Show loading state
+            showLoading();
+            try {
+                // Simulate API call to news extraction service
+                // In a real implementation, this would call a backend service
+                const result = await simulateNewsExtraction(url);
+                displayResults(result);
+            } catch (error) {
+                showError('Failed to extract content from the URL. Please try again with a different news article.');
+            }
+        });
+    }
+    function showLoading() {
+        resultsSection.classList.remove('hidden');
+        loadingDiv.classList.remove('hidden');
+        errorDiv.classList.add('hidden');
+        successResults.classList.add('hidden');
+    }
+    function showError(message) {
+        resultsSection.classList.remove('hidden');
+        loadingDiv.classList.add('hidden');
+        errorDiv.classList.remove('hidden');
+        successResults.classList.add('hidden');
+        errorMessage.textContent = message;
+    }
+    function displayResults(data) {
+        loadingDiv.classList.add('hidden');
+        errorDiv.classList.add('hidden');
+        successResults.classList.remove('hidden');
+        // Display article title
+        articleTitle.textContent = data.title || 'Article Title';
+        // Display key points
+        pointsList.innerHTML = '';
+        if (data.keyPoints && data.keyPoints.length > 0) {
+            data.keyPoints.forEach(point => {
+                const li = document.createElement('li');
+                li.className = 'flex items-start gap-3';
+                li.innerHTML = `
+                    <i data-feather="check-circle" class="w-5 h-5 text-green-500 mt-1 flex-shrink-0"></i>
+                    <span>${point}</span>
+                `;
+                pointsList.appendChild(li);
+            });
+        } else {
+            pointsList.innerHTML = '<li class="text-gray-500">No key points extracted</li>';
+        }
+        // Display images
+        imagesGrid.innerHTML = '';
+        if (data.images && data.images.length > 0) {
+            data.images.forEach((image, index) => {
+                const imgCard = document.createElement('div');
+                imgCard.className = 'image-card bg-gray-100 rounded-xl overflow-hidden shadow-md';
+                imgCard.innerHTML = `
+                    <img src="${image.url}" alt="${image.alt || 'News image'}" class="w-full h-48 object-cover" loading="lazy">
+                    <div class="p-4">
+                        <p class="text-sm text-gray-600">Image ${index + 1}</p>
+                    </div>
+                `;
+                imagesGrid.appendChild(imgCard);
+            });
+            imagesSection.classList.remove('hidden');
+        } else {
+            imagesSection.classList.add('hidden');
+        }
+        // Refresh feather icons
+        feather.replace();
+    }
+    // Simulate news extraction (replace with actual API call)
+    async function simulateNewsExtraction(url) {
+        // Simulate API delay
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        // Mock data for demonstration
+        return {
+            title: "Breaking: Major Technological Advancement in AI Research",
+            keyPoints: [
+                "Researchers have developed a new AI model that can understand and generate human-like text with unprecedented accuracy",
+                "The technology has potential applications in education, healthcare, and customer service industries",
+                "Ethical considerations and regulations are being discussed by industry leaders",
+                "The breakthrough could revolutionize how we interact with computers in daily life",
+                "Open-source implementation is expected to be released in the coming months"
+            ],
+            images: [
+                {
+                    url: "http://static.photos/technology/640x360/1",
+                    alt: "AI Research Laboratory"
+                },
+                {
+                    url: "http://static.photos/science/640x360/2",
+                    alt: "Neural Network Visualization"
+                },
+                {
+                    url: "http://static.photos/office/640x360/3",
+                    alt: "Team Collaboration"
+                }
+            ]
+        };
+    }
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        });
+    });
+    // Add intersection observer for animations
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-fade-in');
+            }
+        });
+    }, observerOptions);
+    // Observe elements for animation
+    document.addEventListener('DOMContentLoaded', () => {
+        const animatableElements = document.querySelectorAll('.image-card, .bg-white');
+        animatableElements.forEach(el => {
+            observer.observe(el);
+        });
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1,68 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Shared styles across all pages */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+* {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+/* Smooth transitions */
+* {
+    transition: all 0.3s ease;
+}
+/* Custom gradient backgrounds */
+.gradient-bg {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+/* Loading animation */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
 }
+.pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+/* Image hover effects */
+.image-card {
+    transition: all 0.3s ease;
 }
+.image-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
+/* Custom button styles */
+.btn-primary {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
 }
+.btn-primary:hover {
+    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
+    transform: translateY(-2px);
+}