Embed

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Auto-updating News Dashboard - Medical Edition</title>
    <style>
        :root {
            /* Turquoise Theme (Vaziax style) */
            --primary: #00b4d8; 
            --primary-dark: #0077b6;
            --bg-color: transparent; 
            --card-bg: #ffffff;
            --text-main: #2d3748;
            --text-muted: #718096;
            --border: #e2e8f0;
            
            /* Source Colors */
            --bbc: #b80000;
            --fox: #003366;
            --trt: #00a599;
            --ntv: #e3000f;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            padding: 10px;
        }

        .dashboard-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .category-section {
            margin-bottom: 30px;
            background: var(--card-bg);
            border-radius: 12px;
            padding: 15px 20px;
            box-shadow: 0 4px 15px rgba(0, 180, 216, 0.08);
            border-top: 5px solid var(--primary);
            position: relative;
        }

        /* استایل خاص برای بخش پزشکی */
        .category-section.medical {
            border-top: 5px solid #00a896;
        }

        .category-header {
            display: flex;
            flex-wrap: wrap; 
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }

        .category-title {
            font-size: clamp(18px, 4vw, 24px); 
            font-weight: 800;
            color: var(--primary-dark);
        }
        
        .category-section.medical .category-title {
            color: #00a896;
        }

        .category-subtitle {
            font-size: clamp(11px, 2.5vw, 13px);
            color: var(--primary-dark);
            background: rgba(0, 180, 216, 0.1);
            padding: 5px 12px;
            border-radius: 20px;
            direction: ltr; 
        }
        
        .category-section.medical .category-subtitle {
            color: #00a896;
            background: rgba(0, 168, 150, 0.1);
        }

        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 15px;
            direction: ltr; 
            min-height: 120px;
        }

        .news-card {
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 16px;
            background: #fafafa;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 120px; 
            transition: all 0.3s ease;
            text-align: left; 
        }

        @media (hover: hover) {
            .news-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
                border-color: var(--primary);
            }
            .category-section.medical .news-card:hover {
                border-color: #00a896;
            }
        }

        .news-title {
            font-size: clamp(14px, 3vw, 15px);
            font-weight: 600;
            color: #1a202c;
            text-decoration: none;
            line-height: 1.5;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .news-title:hover { color: var(--primary); }
        .category-section.medical .news-title:hover { color: #00a896; }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 12px;
            border-top: 1px dashed var(--border);
        }

        .source-badge {
            padding: 4px 10px;
            border-radius: 6px;
            color: white;
            font-weight: bold;
            font-size: 11px;
            text-transform: uppercase;
        }

        .source-bbc { background-color: var(--bbc); }
        .source-fox { background-color: var(--fox); }
        .source-trt { background-color: var(--trt); }
        .source-ntv { background-color: var(--ntv); }

        .time-label {
            color: var(--text-muted);
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--primary);
            font-weight: bold;
            font-size: 14px;
            direction: rtl;
        }
        
        .category-section.medical .loading {
            color: #00a896;
        }

        @media screen and (max-width: 480px) {
            body { padding: 5px; }
            .category-section { padding: 12px; border-radius: 8px; }
            .news-grid { gap: 12px; }
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        
        
        <div class="category-section">
            <div class="category-header">
                <h2 class="category-title">تکنولوژی</h2>
                <span class="category-subtitle">Tech News & AI</span>
            </div>
            <div class="news-grid" id="tech-grid">
                <div class="loading">در حال دریافت اخبار زنده...</div>
            </div>
        </div>
        
        
        <div class="category-section medical">
            <div class="category-header">
                <h2 class="category-title">پزشکی و سلامت</h2>
                <span class="category-subtitle">Medical & Sağlık (EN/TR)</span>
            </div>
            <div class="news-grid" id="medical-grid">
                <div class="loading">در حال دریافت اخبار زنده...</div>
            </div>
        </div>

        
        <div class="category-section">
            <div class="category-header">
                <h2 class="category-title">اقتصاد</h2>
                <span class="category-subtitle">Global Economy</span>
            </div>
            <div class="news-grid" id="economy-grid">
                <div class="loading">در حال دریافت اخبار زنده...</div>
            </div>
        </div>

        
        <div class="category-section">
            <div class="category-header">
                <h2 class="category-title">ترندهای روز</h2>
                <span class="category-subtitle">Daily Trends</span>
            </div>
            <div class="news-grid" id="trends-grid">
                <div class="loading">در حال دریافت اخبار زنده...</div>
            </div>
        </div>

    </div>

    <script>
        const RSS_API = 'https://api.rss2json.com/v1/api.json?rss_url=';
        
        const feeds = {
            tech: [
                { url: 'http://feeds.bbci.co.uk/news/technology/rss.xml', source: 'BBC', class: 'source-bbc' },
                { url: 'https://moxie.foxnews.com/google-publisher/tech.xml', source: 'Fox News', class: 'source-fox' }
            ],
            medical: [
                { url: 'http://feeds.bbci.co.uk/news/health/rss.xml', source: 'BBC Health', class: 'source-bbc' },
                { url: 'https://moxie.foxnews.com/google-publisher/health.xml', source: 'Fox Health', class: 'source-fox' },
                { url: 'https://www.trthaber.com/saglik_articles.rss', source: 'TRT Sağlık', class: 'source-trt' },
                { url: 'https://www.ntv.com.tr/saglik.rss', source: 'NTV Sağlık', class: 'source-ntv' }
            ],
            economy: [
                { url: 'http://feeds.bbci.co.uk/news/business/economy/rss.xml', source: 'BBC', class: 'source-bbc' },
                { url: 'https://moxie.foxnews.com/google-publisher/economy.xml', source: 'Fox News', class: 'source-fox' }
            ],
            trends: [
                { url: 'http://feeds.bbci.co.uk/news/world/rss.xml', source: 'BBC', class: 'source-bbc' },
                { url: 'https://moxie.foxnews.com/google-publisher/lifestyle.xml', source: 'Fox News', class: 'source-fox' }
            ]
        };

        function timeSince(dateString) {
            const seconds = Math.floor((new Date() - new Date(dateString)) / 1000);
            let interval = seconds / 3600;
            if (interval > 1) return Math.floor(interval) + "h ago";
            interval = seconds / 60;
            if (interval > 1) return Math.floor(interval) + "m ago";
            return "Just now";
        }

        async function fetchAndRenderCategory(categoryName, feedSources, maxItems = 4) {
            const container = document.getElementById(categoryName + '-grid');
            let allItems = [];
            
            try {
                const fetchPromises = feedSources.map(feed => 
                    fetch(RSS_API + encodeURIComponent(feed.url))
                        .then(res => res.json())
                        .then(data => {
                            if (data.status === 'ok') {
                                return data.items.slice(0, 2).map(item => ({
                                    title: item.title,
                                    link: item.link,
                                    pubDate: item.pubDate,
                                    source: feed.source,
                                    class: feed.class,
                                    timestamp: new Date(item.pubDate).getTime()
                                }));
                            }
                            return [];
                        })
                        .catch(() => [])
                );

                const results = await Promise.all(fetchPromises);
                allItems = results.flat();
                allItems.sort((a, b) => b.timestamp - a.timestamp);
                
                container.innerHTML = '';
                
                if (allItems.length === 0) throw new Error("No items");
                
                allItems.slice(0, maxItems).forEach(item => {
                    const card = document.createElement('div');
                    card.className = 'news-card';
                    card.innerHTML = `
                        <a href="${item.link}" target="_blank" rel="noopener noreferrer" class="news-title">${item.title}</a>
                        <div class="card-footer">
                            <span class="source-badge ${item.class}">${item.source}</span>
                            <span class="time-label">🕒 ${timeSince(item.pubDate)}</span>
                        </div>
                    `;
                    container.appendChild(card);
                });
                
            } catch (error) {
                container.innerHTML = `<div class="news-card" style="grid-column: 1 / -1; text-align: center; color: #e53e3e;">مشکلی در دریافت اخبار پیش آمد. دقایقی دیگر رفرش کنید.</div>`;
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            fetchAndRenderCategory('tech', feeds.tech);
            fetchAndRenderCategory('medical', feeds.medical, 6); // 6 items for medical
            fetchAndRenderCategory('economy', feeds.economy);
            fetchAndRenderCategory('trends', feeds.trends);
            
            setInterval(() => {
                fetchAndRenderCategory('tech', feeds.tech);
                fetchAndRenderCategory('medical', feeds.medical, 6);
                fetchAndRenderCategory('economy', feeds.economy);
                fetchAndRenderCategory('trends', feeds.trends);
            }, 900000);
        });
    </script>
</body>
</html>

vaziax 

VAZIAX BY DR ALI SAEID VZIRI is a digital intelligence brand that explores human cognition, artificial intelligence, and emerging future technologies. The company focuses on understanding and shaping the intersection of thought and AI to anticipate upcoming trends.