RSK World - News Summary Bot - Project Files Browser | RSK World - Free Programming Resources & Source Code

templates/admin/content.html

<!DOCTYPE html>
<html lang="en">
<!--
    Admin Content - News Summary Bot
    Developer: Molla Samser
    Design & Testing: Rima Khatun
    Company: RSK World
    Year: 2026
    Website: https://rskworld.in
-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Content Management - News Summary Bot</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        .content-container {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
        }
        
        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
        
        .filter-bar {
            display: flex;
            gap: 1rem;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .filter-bar select,
        .filter-bar input {
            background: var(--glass);
            color: white;
            border: 1px solid var(--glass-border);
            padding: 0.5rem 1rem;
            border-radius: 8px;
        }
        
        .content-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        
        .content-table th,
        .content-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid var(--glass-border);
        }
        
        .content-table th {
            background: rgba(255, 255, 255, 0.1);
            font-weight: 600;
        }
        
        .article-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .article-meta {
            font-size: 0.8rem;
            opacity: 0.7;
        }
        
        .sentiment-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .sentiment-positive {
            background: rgba(40, 167, 69, 0.2);
            color: #28a745;
        }
        
        .sentiment-negative {
            background: rgba(220, 53, 69, 0.2);
            color: #dc3545;
        }
        
        .sentiment-neutral {
            background: rgba(255, 193, 7, 0.2);
            color: #ffc107;
        }
        
        .reliability-score {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .reliability-bar {
            width: 50px;
            height: 8px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .reliability-fill {
            height: 100%;
            background: linear-gradient(90deg, #dc3545, #ffc107, #28a745);
            transition: width 0.3s ease;
        }
        
        .action-buttons {
            display: flex;
            gap: 0.5rem;
        }
        
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 15px;
            padding: 1.5rem;
            text-align: center;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="admin-container">
        <aside class="sidebar">
            <div class="sidebar-header">
                <i class="fas fa-newspaper"></i>
                <h2>Admin Panel</h2>
            </div>
            
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="{{ url_for('admin.dashboard') }}" class="nav-link">
                        <i class="fas fa-tachometer-alt"></i>
                        Dashboard
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.analytics_page') }}" class="nav-link">
                        <i class="fas fa-chart-line"></i>
                        Analytics
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.users') }}" class="nav-link">
                        <i class="fas fa-users"></i>
                        Users
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.content') }}" class="nav-link active">
                        <i class="fas fa-newspaper"></i>
                        Content
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.settings') }}" class="nav-link">
                        <i class="fas fa-cog"></i>
                        Settings
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ url_for('admin.logout') }}" class="nav-link">
                        <i class="fas fa-sign-out-alt"></i>
                        Logout
                    </a>
                </li>
            </ul>
        </aside>

        <main class="main-content">
            <div class="content-header">
                <h1>Content Management</h1>
                <div class="filter-bar">
                    <select id="categoryFilter">
                        <option value="">All Categories</option>
                        <option value="general">General</option>
                        <option value="business">Business</option>
                        <option value="technology">Technology</option>
                        <option value="entertainment">Entertainment</option>
                        <option value="health">Health</option>
                        <option value="science">Science</option>
                        <option value="sports">Sports</option>
                    </select>
                    <select id="sentimentFilter">
                        <option value="">All Sentiments</option>
                        <option value="Positive">Positive</option>
                        <option value="Negative">Negative</option>
                        <option value="Neutral">Neutral</option>
                    </select>
                    <input type="text" placeholder="Search articles..." id="articleSearch">
                    <button class="btn btn-secondary">
                        <i class="fas fa-search"></i> Search
                    </button>
                    <button class="btn btn-primary">
                        <i class="fas fa-sync"></i> Refresh
                    </button>
                </div>
            </div>

            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-value">{{ articles|length }}</div>
                    <div class="stat-label">Total Articles</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ articles|selectattr('sentiment', 'equalto', 'Positive')|list|length }}</div>
                    <div class="stat-label">Positive</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ articles|selectattr('sentiment', 'equalto', 'Negative')|list|length }}</div>
                    <div class="stat-label">Negative</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{ "%.1f"|format((articles|map(attribute='reliability_score')|list|sum) / articles|length) }}%</div>
                    <div class="stat-label">Avg Reliability</div>
                </div>
            </div>

            <div class="content-container">
                <h3>Recent Articles</h3>
                <table class="content-table">
                    <thead>
                        <tr>
                            <th>Article</th>
                            <th>Category</th>
                            <th>Sentiment</th>
                            <th>Reliability</th>
                            <th>Published</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for article in articles %}
                        <tr>
                            <td>
                                <div class="article-title">{{ article.title }}</div>
                                <div class="article-meta">
                                    {{ article.source }} • {{ article.author }} • {{ article.word_count }} words
                                </div>
                            </td>
                            <td>
                                <span class="keyword-tag">{{ article.category.title() }}</span>
                            </td>
                            <td>
                                <span class="sentiment-badge sentiment-{{ article.sentiment.lower() }}">
                                    {{ article.sentiment }}
                                </span>
                            </td>
                            <td>
                                <div class="reliability-score">
                                    <div class="reliability-bar">
                                        <div class="reliability-fill" style="width: {{ article.reliability_score }}%"></div>
                                    </div>
                                    <span>{{ article.reliability_score }}%</span>
                                </div>
                            </td>
                            <td>{{ article.published_at }}</td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn btn-secondary btn-sm" onclick="viewArticle('{{ article.id }}')">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="btn btn-secondary btn-sm" onclick="summarizeArticle('{{ article.id }}')">
                                        <i class="fas fa-compress"></i>
                                    </button>
                                    <button class="btn btn-secondary btn-sm" onclick="deleteArticle('{{ article.id }}')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div class="content-container">
                <h3>Content Statistics</h3>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
                    <div>
                        <h4>Category Distribution</h4>
                        <canvas id="categoryChart" width="400" height="200"></canvas>
                    </div>
                    <div>
                        <h4>Sentiment Analysis</h4>
                        <canvas id="sentimentChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // Filter functionality
        document.getElementById('categoryFilter').addEventListener('change', filterArticles);
        document.getElementById('sentimentFilter').addEventListener('change', filterArticles);
        document.getElementById('articleSearch').addEventListener('input', filterArticles);

        function filterArticles() {
            const category = document.getElementById('categoryFilter').value;
            const sentiment = document.getElementById('sentimentFilter').value;
            const search = document.getElementById('articleSearch').value.toLowerCase();
            
            const rows = document.querySelectorAll('.content-table tbody tr');
            
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                const matchesCategory = !category || text.includes(category.toLowerCase());
                const matchesSentiment = !sentiment || text.includes(sentiment.toLowerCase());
                const matchesSearch = !search || text.includes(search);
                
                row.style.display = matchesCategory && matchesSentiment && matchesSearch ? '' : 'none';
            });
        }

        // Article actions
        function viewArticle(id) {
            alert('View article: ' + id);
        }

        function summarizeArticle(id) {
            alert('Summarize article: ' + id);
        }

        function deleteArticle(id) {
            if (confirm('Are you sure you want to delete this article?')) {
                alert('Article deleted: ' + id);
            }
        }

        // Initialize charts
        const categoryCtx = document.getElementById('categoryChart').getContext('2d');
        new Chart(categoryCtx, {
            type: 'doughnut',
            data: {
                labels: ['General', 'Business', 'Technology', 'Entertainment', 'Health', 'Science', 'Sports'],
                datasets: [{
                    data: [30, 25, 20, 15, 18, 12, 22],
                    backgroundColor: ['#dc3545', '#0d6efd', '#28a745', '#ffc107', '#17a2b8', '#6f42c1', '#fd7e14']
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { color: 'white' }
                    }
                }
            }
        });

        const sentimentCtx = document.getElementById('sentimentChart').getContext('2d');
        new Chart(sentimentCtx, {
            type: 'pie',
            data: {
                labels: ['Positive', 'Negative', 'Neutral'],
                datasets: [{
                    data: [45, 25, 30],
                    backgroundColor: ['#28a745', '#dc3545', '#ffc107']
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { color: 'white' }
                    }
                }
            }
        });
    </script>
</body>
</html>

415 lines•15.6 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size

Theme Settings

Color Scheme

Display Options

Font Size

🚀 Support RSK World