Spaces:

Aipandit
/

webscout-alert-tracker

Running

App Files Files Community

Aipandit commited on Nov 6, 2025

Commit

28308e4

verified ·

1 Parent(s): 13490cf

Where is news

Browse files

Files changed (3) hide show

components/news-card.js +99 -0
index.html +34 -2
script.js +33 -1

components/news-card.js ADDED Viewed

	@@ -0,0 +1,99 @@

+class NewsCard extends HTMLElement {
+    static get observedAttributes() {
+        return ['title', 'source', 'date', 'summary', 'image', 'url'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (this.shadowRoot) {
+            this.render();
+        }
+    }
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+    render() {
+        const title = this.getAttribute('title') || 'No title';
+        const source = this.getAttribute('source') || 'Unknown source';
+        const date = this.getAttribute('date') || 'Just now';
+        const summary = this.getAttribute('summary') || 'No summary available';
+        const image = this.getAttribute('image') || 'http://static.photos/news/640x360/1';
+        const url = this.getAttribute('url') || '#';
+        this.shadowRoot.innerHTML = `
+            <style>
+                .news-card {
+                    background: white;
+                    border-radius: 0.5rem;
+                    overflow: hidden;
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+                    transition: transform 0.2s;
+                }
+                .news-card:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+                }
+                .news-image {
+                    width: 100%;
+                    height: 180px;
+                    object-fit: cover;
+                }
+                .news-content {
+                    padding: 1rem;
+                }
+                .news-title {
+                    font-size: 1.1rem;
+                    font-weight: 600;
+                    margin-bottom: 0.5rem;
+                    color: #111827;
+                }
+                .news-meta {
+                    display: flex;
+                    justify-content: space-between;
+                    color: #6b7280;
+                    font-size: 0.8rem;
+                    margin-bottom: 0.75rem;
+                }
+                .news-summary {
+                    color: #4b5563;
+                    font-size: 0.9rem;
+                    line-height: 1.4;
+                    margin-bottom: 1rem;
+                }
+                .read-more {
+                    color: #3b82f6;
+                    text-decoration: none;
+                    font-weight: 500;
+                    font-size: 0.9rem;
+                    display: inline-flex;
+                    align-items: center;
+                }
+                .read-more:hover {
+                    text-decoration: underline;
+                }
+                .read-more i {
+                    margin-left: 0.25rem;
+                }
+            </style>
+            <div class="news-card">
+                <img src="${image}" alt="${title}" class="news-image">
+                <div class="news-content">
+                    <h3 class="news-title">${title}</h3>
+                    <div class="news-meta">
+                        <span>${source}</span>
+                        <span>${date}</span>
+                    </div>
+                    <p class="news-summary">${summary}</p>
+                    <a href="${url}" target="_blank" class="read-more">
+                        Read more <i data-feather="arrow-right"></i>
+                    </a>
+                </div>
+            </div>
+        `;
+        feather.replace();
+    }
+}
+customElements.define('news-card', NewsCard);

index.html CHANGED Viewed

@@ -10,6 +10,7 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="components/navbar.js"></script>
     <script src="components/notification-card.js"></script>
 </head>
 <body class="bg-gray-100 min-h-screen">
     <custom-navbar></custom-navbar>
@@ -80,9 +81,40 @@
                 </button>
             </form>
         </div>
-    </main>
-    <script>
         feather.replace();
     </script>
     <script src="script.js"></script>

     <script src="https://unpkg.com/feather-icons"></script>
     <script src="components/navbar.js"></script>
     <script src="components/notification-card.js"></script>
+    <script src="components/news-card.js"></script>
 </head>
 <body class="bg-gray-100 min-h-screen">
     <custom-navbar></custom-navbar>
                 </button>
             </form>
         </div>
+        <div class="mt-12">
+            <h2 class="text-2xl font-bold mb-6 text-gray-800">Latest News Updates</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <news-card
+                    title="New Tax Regulations Announced"
+                    source="Financial Times"
+                    date="2 hours ago"
+                    summary="The government has announced new tax regulations that will affect small businesses starting next fiscal year."
+                    image="http://static.photos/finance/640x360/1"
+                    url="https://example.com/news/1">
+                </news-card>
+                <news-card
+                    title="Tech Giant Releases Quarterly Report"
+                    source="Tech News"
+                    date="5 hours ago"
+                    summary="Major tech company reports record profits in Q2, exceeding analyst expectations."
+                    image="http://static.photos/technology/640x360/2"
+                    url="https://example.com/news/2">
+                </news-card>
+                <news-card
+                    title="Market Trends for 2023"
+                    source="Business Insider"
+                    date="1 day ago"
+                    summary="Experts predict continued growth in the tech sector despite economic uncertainties."
+                    image="http://static.photos/business/640x360/3"
+                    url="https://example.com/news/3">
+                </news-card>
+            </div>
+        </div>
+    </main>
+<script>
         feather.replace();
     </script>
     <script src="script.js"></script>

script.js CHANGED Viewed

@@ -1,5 +1,37 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Simulate checking for updates
     setInterval(() => {
         const cards = document.querySelectorAll('custom-notification-card');
         cards.forEach(card => {

+// News API integration
+async function fetchNews() {
+    try {
+        const response = await fetch('https://newsapi.org/v2/top-headlines?country=in&category=business&apiKey=YOUR_API_KEY');
+        const data = await response.json();
+        if (data.articles && data.articles.length > 0) {
+            const newsContainer = document.querySelector('.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3.gap-6');
+            if (newsContainer) {
+                // Clear placeholder cards
+                newsContainer.innerHTML = '';
+                // Add real news cards
+                data.articles.slice(0, 3).forEach(article => {
+                    const newsCard = document.createElement('news-card');
+                    newsCard.setAttribute('title', article.title || 'No title');
+                    newsCard.setAttribute('source', article.source.name || 'Unknown source');
+                    newsCard.setAttribute('date', new Date(article.publishedAt).toLocaleString());
+                    newsCard.setAttribute('summary', article.description || 'No description available');
+                    newsCard.setAttribute('image', article.urlToImage || 'http://static.photos/news/640x360/1');
+                    newsCard.setAttribute('url', article.url || '#');
+                    newsContainer.appendChild(newsCard);
+                });
+            }
+        }
+    } catch (error) {
+        console.error('Error fetching news:', error);
+    }
+}
 document.addEventListener('DOMContentLoaded', function() {
+    fetchNews();
+// Simulate checking for updates
     setInterval(() => {
         const cards = document.querySelectorAll('custom-notification-card');
         cards.forEach(card => {