RSK World - Text Classification Dataset - Project Files Browser | RSK World

<!DOCTYPE html>
<!--
================================================================================
Text Classification Dataset - Interactive Data Explorer
================================================================================
Project: Text Classification Dataset
Category: Text Data / NLP

Author: Molla Samser
Designer & Tester: Rima Khatun
Website: https://rskworld.in
Email: help@rskworld.in | support@rskworld.in
Phone: +91 93305 39277

Copyright (c) 2026 RSK World - All Rights Reserved
Content used for educational purposes only.
================================================================================
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Explorer | Text Classification Dataset - RSK World</title>
    <link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* ================================================================================
           CSS Variables - RSK World Theme
           ================================================================================ */
        :root {
            --bg-dark: #0a0612;
            --bg-darker: #050309;
            --bg-card: #110c1d;
            --bg-card-hover: #1a1329;
            --border-color: #2d2444;
            --border-glow: #dc2626;
            --text-primary: #f8fafc;
            --text-secondary: #a5a3b8;
            --text-muted: #6b6882;
            --accent-red: #dc2626;
            --accent-red-dark: #991b1b;
            --accent-red-glow: rgba(220, 38, 38, 0.3);
            --tech-blue: #3b82f6;
            --sports-green: #22c55e;
            --politics-purple: #8b5cf6;
            --entertainment-pink: #ec4899;
            --business-amber: #f59e0b;
            --science-cyan: #06b6d4;
            --font-sans: 'Outfit', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 16px;
            --radius-xl: 24px;
            --shadow-glow: 0 0 40px rgba(220, 38, 38, 0.15);
        }

        /* ================================================================================
           Base Styles
           ================================================================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-sans);
            background: var(--bg-dark);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Background Pattern */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 20%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 50px,
                    rgba(45, 36, 68, 0.03) 50px,
                    rgba(45, 36, 68, 0.03) 51px
                ),
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 50px,
                    rgba(45, 36, 68, 0.03) 50px,
                    rgba(45, 36, 68, 0.03) 51px
                );
            pointer-events: none;
            z-index: -1;
        }

        /* ================================================================================
           Header
           ================================================================================ */
        header {
            background: rgba(5, 3, 9, 0.9);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-content {
            max-width: 1600px;
            margin: 0 auto;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--text-primary);
            font-weight: 700;
            font-size: 1.25rem;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        nav {
            display: flex;
            gap: 8px;
        }

        nav a {
            padding: 10px 18px;
            color: var(--text-secondary);
            text-decoration: none;
            border-radius: var(--radius-md);
            transition: all 0.3s;
            font-weight: 500;
        }

        nav a:hover, nav a.active {
            background: var(--bg-card);
            color: var(--text-primary);
        }

        nav a.active {
            border: 1px solid var(--accent-red);
            color: var(--accent-red);
        }

        /* ================================================================================
           Main Layout
           ================================================================================ */
        main {
            max-width: 1600px;
            margin: 0 auto;
            padding: 2rem;
            display: grid;
            grid-template-columns: 280px 1fr 320px;
            gap: 1.5rem;
            min-height: calc(100vh - 80px);
        }

        /* ================================================================================
           Sidebar - Filters
           ================================================================================ */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .filter-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
        }

        .filter-card h3 {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .category-filter {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .category-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s;
            font-family: inherit;
            font-size: 0.95rem;
        }

        .category-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--text-muted);
        }

        .category-btn.active {
            background: var(--bg-card-hover);
            border-color: var(--category-color, var(--accent-red));
            color: var(--text-primary);
        }

        .category-btn .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--category-color, var(--text-muted));
        }

        .category-btn .count {
            margin-left: auto;
            font-size: 0.85rem;
            font-family: var(--font-mono);
            color: var(--text-muted);
        }

        /* Category Colors */
        .category-btn[data-category="Technology"] { --category-color: var(--tech-blue); }
        .category-btn[data-category="Sports"] { --category-color: var(--sports-green); }
        .category-btn[data-category="Politics"] { --category-color: var(--politics-purple); }
        .category-btn[data-category="Entertainment"] { --category-color: var(--entertainment-pink); }
        .category-btn[data-category="Business"] { --category-color: var(--business-amber); }
        .category-btn[data-category="Science"] { --category-color: var(--science-cyan); }

        /* Search */
        .search-box {
            position: relative;
        }

        .search-box input {
            width: 100%;
            padding: 14px 16px 14px 44px;
            background: var(--bg-darker);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.95rem;
            transition: all 0.3s;
        }

        .search-box input:focus {
            outline: none;
            border-color: var(--accent-red);
            box-shadow: 0 0 0 3px var(--accent-red-glow);
        }

        .search-box i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
        }

        /* Stats */
        .stat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
        }

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

        .stat-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .stat-value {
            font-family: var(--font-mono);
            font-weight: 600;
            color: var(--accent-red);
        }

        /* ================================================================================
           Main Content - Data Table
           ================================================================================ */
        .content-area {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .content-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .content-header h2 {
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .view-toggle {
            display: flex;
            gap: 4px;
            background: var(--bg-darker);
            padding: 4px;
            border-radius: var(--radius-md);
        }

        .view-toggle button {
            padding: 8px 16px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.3s;
        }

        .view-toggle button.active {
            background: var(--accent-red);
            color: white;
        }

        .data-table-container {
            flex: 1;
            overflow: auto;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th,
        .data-table td {
            padding: 16px 20px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .data-table th {
            background: var(--bg-darker);
            color: var(--text-muted);
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: sticky;
            top: 0;
        }

        .data-table tr:hover td {
            background: var(--bg-card-hover);
        }

        .data-table .id-col {
            font-family: var(--font-mono);
            color: var(--text-muted);
            width: 60px;
        }

        .data-table .text-col {
            max-width: 400px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .data-table .category-col {
            width: 140px;
        }

        .category-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            background: var(--tag-bg);
            color: var(--tag-color);
        }

        .category-tag[data-category="Technology"] { --tag-bg: rgba(59, 130, 246, 0.2); --tag-color: var(--tech-blue); }
        .category-tag[data-category="Sports"] { --tag-bg: rgba(34, 197, 94, 0.2); --tag-color: var(--sports-green); }
        .category-tag[data-category="Politics"] { --tag-bg: rgba(139, 92, 246, 0.2); --tag-color: var(--politics-purple); }
        .category-tag[data-category="Entertainment"] { --tag-bg: rgba(236, 72, 153, 0.2); --tag-color: var(--entertainment-pink); }
        .category-tag[data-category="Business"] { --tag-bg: rgba(245, 158, 11, 0.2); --tag-color: var(--business-amber); }
        .category-tag[data-category="Science"] { --tag-bg: rgba(6, 182, 212, 0.2); --tag-color: var(--science-cyan); }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 1.5rem;
            border-top: 1px solid var(--border-color);
        }

        .pagination button {
            padding: 10px 16px;
            background: var(--bg-darker);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s;
        }

        .pagination button:hover:not(:disabled) {
            background: var(--bg-card-hover);
            border-color: var(--accent-red);
        }

        .pagination button.active {
            background: var(--accent-red);
            border-color: var(--accent-red);
            color: white;
        }

        .pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* ================================================================================
           Right Panel - Charts & Details
           ================================================================================ */
        .right-panel {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .chart-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
        }

        .chart-card h3 {
            font-size: 1rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .chart-container {
            position: relative;
            height: 200px;
        }

        /* Detail Card */
        .detail-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            display: none;
        }

        .detail-card.active {
            display: block;
        }

        .detail-card h3 {
            font-size: 1rem;
            margin-bottom: 1rem;
            color: var(--accent-red);
        }

        .detail-text {
            padding: 1rem;
            background: var(--bg-darker);
            border-radius: var(--radius-md);
            line-height: 1.7;
            margin-bottom: 1rem;
            font-size: 0.95rem;
        }

        .detail-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .detail-meta-item {
            flex: 1;
            min-width: 80px;
            padding: 12px;
            background: var(--bg-darker);
            border-radius: var(--radius-md);
            text-align: center;
        }

        .detail-meta-item .label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .detail-meta-item .value {
            font-family: var(--font-mono);
            font-weight: 600;
            color: var(--accent-red);
        }

        /* ================================================================================
           Footer
           ================================================================================ */
        footer {
            text-align: center;
            padding: 2rem;
            border-top: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        footer a {
            color: var(--accent-red);
            text-decoration: none;
        }

        /* ================================================================================
           Responsive
           ================================================================================ */
        @media (max-width: 1200px) {
            main {
                grid-template-columns: 1fr;
            }

            .sidebar, .right-panel {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 1rem;
            }

            nav {
                flex-wrap: wrap;
                justify-content: center;
            }

            main {
                padding: 1rem;
            }
        }

        /* ================================================================================
           Animations
           ================================================================================ */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .data-table tbody tr {
            animation: fadeIn 0.3s ease forwards;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="header-content">
            <a href="index.html" class="logo">
                <div class="logo-icon"><i class="fas fa-file-alt"></i></div>
                <span>Text Classification</span>
            </a>
            <nav>
                <a href="index.html">Home</a>
                <a href="explorer.html" class="active">Data Explorer</a>
                <a href="#" id="download-btn">Download</a>
            </nav>
        </div>
    </header>

    <!-- Main Content -->
    <main>
        <!-- Left Sidebar - Filters -->
        <aside class="sidebar">
            <div class="filter-card">
                <h3><i class="fas fa-search"></i> Search</h3>
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="search-input" placeholder="Search documents...">
                </div>
            </div>

            <div class="filter-card">
                <h3><i class="fas fa-filter"></i> Categories</h3>
                <div class="category-filter" id="category-filters">
                    <!-- Generated by JS -->
                </div>
            </div>

            <div class="filter-card">
                <h3><i class="fas fa-chart-bar"></i> Statistics</h3>
                <div class="stat-item">
                    <span class="stat-label">Total Documents</span>
                    <span class="stat-value" id="total-docs">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Showing</span>
                    <span class="stat-value" id="showing-count">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Avg. Words</span>
                    <span class="stat-value" id="avg-words">0</span>
                </div>
            </div>
        </aside>

        <!-- Main Content Area -->
        <div class="content-area">
            <div class="content-header">
                <h2><i class="fas fa-database"></i> Dataset Viewer</h2>
                <div class="view-toggle">
                    <button class="active" data-view="table"><i class="fas fa-table"></i></button>
                    <button data-view="cards"><i class="fas fa-th-large"></i></button>
                </div>
            </div>

            <div class="data-table-container">
                <table class="data-table" id="data-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Text</th>
                            <th>Category</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="table-body">
                        <!-- Generated by JS -->
                    </tbody>
                </table>
            </div>

            <div class="pagination" id="pagination">
                <!-- Generated by JS -->
            </div>
        </div>

        <!-- Right Panel -->
        <aside class="right-panel">
            <div class="chart-card">
                <h3><i class="fas fa-chart-pie"></i> Category Distribution</h3>
                <div class="chart-container">
                    <canvas id="category-chart"></canvas>
                </div>
            </div>

            <div class="chart-card">
                <h3><i class="fas fa-chart-line"></i> Word Length Distribution</h3>
                <div class="chart-container">
                    <canvas id="length-chart"></canvas>
                </div>
            </div>

            <div class="detail-card" id="detail-card">
                <h3><i class="fas fa-eye"></i> Document Details</h3>
                <div class="detail-text" id="detail-text"></div>
                <div class="detail-meta">
                    <div class="detail-meta-item">
                        <div class="label">ID</div>
                        <div class="value" id="detail-id">-</div>
                    </div>
                    <div class="detail-meta-item">
                        <div class="label">Words</div>
                        <div class="value" id="detail-words">-</div>
                    </div>
                    <div class="detail-meta-item">
                        <div class="label">Category</div>
                        <div class="value" id="detail-category">-</div>
                    </div>
                </div>
            </div>
        </aside>
    </main>

    <!-- Footer -->
    <footer>
        <p>Created by <strong>Molla Samser</strong> | Designed by <strong>Rima Khatun</strong></p>
        <p>&copy; 2026 <a href="https://rskworld.in" target="_blank">RSK World</a> - All Rights Reserved</p>
    </footer>

    <!-- JavaScript -->
    <script>
        /**
         * ================================================================================
         * Text Classification Dataset - Interactive Data Explorer
         * ================================================================================
         * Author: Molla Samser
         * Website: https://rskworld.in
         * Copyright (c) 2026 RSK World - All Rights Reserved
         * ================================================================================
         */

        // Sample data (in real app, load from CSV/JSON)
        const SAMPLE_DATA = [
            { id: 1, text: "Apple unveils revolutionary new iPhone featuring advanced AI capabilities and enhanced camera system that promises to transform mobile photography and computing experience.", category: "Technology", label: 0 },
            { id: 2, text: "Tesla announces breakthrough in battery technology that could extend electric vehicle range by 50% while reducing charging time significantly.", category: "Technology", label: 0 },
            { id: 3, text: "Microsoft releases new version of Windows with integrated AI assistant that can help users with daily tasks and improve productivity.", category: "Technology", label: 0 },
            { id: 4, text: "Google introduces quantum computing breakthrough that could revolutionize drug discovery and climate modeling simulations.", category: "Technology", label: 0 },
            { id: 5, text: "Amazon Web Services launches new cloud computing services designed for artificial intelligence and machine learning applications.", category: "Technology", label: 0 },
            { id: 11, text: "Manchester United secures Premier League title in dramatic final day showdown against rival Manchester City.", category: "Sports", label: 1 },
            { id: 12, text: "LeBron James breaks NBA all-time scoring record in historic game against Oklahoma City Thunder.", category: "Sports", label: 1 },
            { id: 13, text: "Lionel Messi leads Inter Miami to MLS Cup victory in his first season with the American club.", category: "Sports", label: 1 },
            { id: 14, text: "Serena Williams announces comeback to professional tennis after two-year absence from the sport.", category: "Sports", label: 1 },
            { id: 15, text: "Formula One championship decided in thrilling final race as Max Verstappen claims third consecutive title.", category: "Sports", label: 1 },
            { id: 21, text: "Congress passes historic infrastructure bill with bipartisan support allocating trillions for roads and bridges.", category: "Politics", label: 2 },
            { id: 22, text: "Supreme Court delivers landmark ruling on voting rights that could reshape elections nationwide.", category: "Politics", label: 2 },
            { id: 23, text: "President announces major climate initiative with ambitious targets for carbon neutrality by 2040.", category: "Politics", label: 2 },
            { id: 24, text: "Senate confirms new Supreme Court justice in closely contested vote along party lines.", category: "Politics", label: 2 },
            { id: 25, text: "International summit addresses global migration crisis with new framework for refugee assistance.", category: "Politics", label: 2 },
            { id: 31, text: "Marvel releases trailer for upcoming superhero blockbuster featuring multiple fan-favorite characters.", category: "Entertainment", label: 3 },
            { id: 32, text: "Taylor Swift breaks streaming records with new album release that dominates charts worldwide.", category: "Entertainment", label: 3 },
            { id: 33, text: "Netflix announces new season of popular series that became global phenomenon during pandemic.", category: "Entertainment", label: 3 },
            { id: 34, text: "Hollywood awards season kicks off with surprising nominations that defy industry expectations.", category: "Entertainment", label: 3 },
            { id: 35, text: "Iconic rock band announces reunion tour that will span multiple continents over two years.", category: "Entertainment", label: 3 },
            { id: 41, text: "Stock market reaches all-time high as investors respond positively to economic recovery signals.", category: "Business", label: 4 },
            { id: 42, text: "Federal Reserve announces interest rate decision that will impact borrowing costs for consumers.", category: "Business", label: 4 },
            { id: 43, text: "Major tech company completes largest acquisition in industry history valued at record billions.", category: "Business", label: 4 },
            { id: 44, text: "Unemployment rate drops to historic low as job market continues strong recovery trajectory.", category: "Business", label: 4 },
            { id: 45, text: "Cryptocurrency market experiences volatility as major institutional investors adjust their positions.", category: "Business", label: 4 },
            { id: 51, text: "NASA discovers potentially habitable exoplanet within nearby star system using advanced telescope.", category: "Science", label: 5 },
            { id: 52, text: "Scientists achieve breakthrough in nuclear fusion research that could lead to clean energy revolution.", category: "Science", label: 5 },
            { id: 53, text: "New study reveals connection between gut microbiome and mental health offering treatment possibilities.", category: "Science", label: 5 },
            { id: 54, text: "Researchers develop revolutionary vaccine platform that could protect against multiple disease variants.", category: "Science", label: 5 },
            { id: 55, text: "Archaeological discovery in Egypt reveals previously unknown pharaonic tomb with remarkable artifacts.", category: "Science", label: 5 }
        ];

        // Categories config
        const CATEGORIES = {
            'Technology': { color: '#3b82f6', icon: 'fas fa-microchip' },
            'Sports': { color: '#22c55e', icon: 'fas fa-futbol' },
            'Politics': { color: '#8b5cf6', icon: 'fas fa-landmark' },
            'Entertainment': { color: '#ec4899', icon: 'fas fa-film' },
            'Business': { color: '#f59e0b', icon: 'fas fa-chart-line' },
            'Science': { color: '#06b6d4', icon: 'fas fa-flask' }
        };

        // State
        let currentData = [...SAMPLE_DATA];
        let filteredData = [...SAMPLE_DATA];
        let currentPage = 1;
        let itemsPerPage = 10;
        let selectedCategories = new Set();
        let categoryChart = null;
        let lengthChart = null;

        // Initialize
        document.addEventListener('DOMContentLoaded', () => {
            initFilters();
            initCharts();
            renderData();
            updateStats();

            // Search
            document.getElementById('search-input').addEventListener('input', handleSearch);

            // Download button
            document.getElementById('download-btn').addEventListener('click', (e) => {
                e.preventDefault();
                window.location.href = './text-classification/text-classification.zip';
            });
        });

        function initFilters() {
            const container = document.getElementById('category-filters');
            
            // All button
            const allBtn = document.createElement('button');
            allBtn.className = 'category-btn active';
            allBtn.innerHTML = `<span class="dot" style="background: var(--accent-red)"></span> All Categories <span class="count">${SAMPLE_DATA.length}</span>`;
            allBtn.dataset.category = 'all';
            allBtn.onclick = () => {
                selectedCategories.clear();
                document.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
                allBtn.classList.add('active');
                filterData();
            };
            container.appendChild(allBtn);

            // Category buttons
            const categoryCounts = {};
            SAMPLE_DATA.forEach(item => {
                categoryCounts[item.category] = (categoryCounts[item.category] || 0) + 1;
            });

            Object.entries(CATEGORIES).forEach(([name, config]) => {
                const btn = document.createElement('button');
                btn.className = 'category-btn';
                btn.dataset.category = name;
                btn.innerHTML = `<span class="dot"></span> ${name} <span class="count">${categoryCounts[name] || 0}</span>`;
                btn.onclick = () => toggleCategory(name, btn);
                container.appendChild(btn);
            });
        }

        function toggleCategory(category, btn) {
            document.querySelector('.category-btn[data-category="all"]').classList.remove('active');
            
            if (selectedCategories.has(category)) {
                selectedCategories.delete(category);
                btn.classList.remove('active');
            } else {
                selectedCategories.add(category);
                btn.classList.add('active');
            }

            if (selectedCategories.size === 0) {
                document.querySelector('.category-btn[data-category="all"]').classList.add('active');
            }

            filterData();
        }

        function handleSearch(e) {
            const query = e.target.value.toLowerCase();
            filterData(query);
        }

        function filterData(searchQuery = '') {
            filteredData = SAMPLE_DATA.filter(item => {
                const matchesCategory = selectedCategories.size === 0 || selectedCategories.has(item.category);
                const matchesSearch = searchQuery === '' || item.text.toLowerCase().includes(searchQuery);
                return matchesCategory && matchesSearch;
            });

            currentPage = 1;
            renderData();
            updateStats();
            updateCharts();
        }

        function renderData() {
            const tbody = document.getElementById('table-body');
            const start = (currentPage - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const pageData = filteredData.slice(start, end);

            tbody.innerHTML = pageData.map((item, index) => `
                <tr style="animation-delay: ${index * 50}ms">
                    <td class="id-col">${item.id}</td>
                    <td class="text-col" title="${item.text}">${item.text}</td>
                    <td class="category-col">
                        <span class="category-tag" data-category="${item.category}">
                            <i class="${CATEGORIES[item.category].icon}"></i>
                            ${item.category}
                        </span>
                    </td>
                    <td>
                        <button onclick="showDetail(${item.id})" style="background: transparent; border: none; color: var(--accent-red); cursor: pointer; padding: 8px;">
                            <i class="fas fa-eye"></i>
                        </button>
                    </td>
                </tr>
            `).join('');

            renderPagination();
        }

        function renderPagination() {
            const totalPages = Math.ceil(filteredData.length / itemsPerPage);
            const container = document.getElementById('pagination');
            
            let html = `<button onclick="goToPage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}><i class="fas fa-chevron-left"></i></button>`;
            
            for (let i = 1; i <= totalPages; i++) {
                if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) {
                    html += `<button onclick="goToPage(${i})" class="${i === currentPage ? 'active' : ''}">${i}</button>`;
                } else if (i === currentPage - 2 || i === currentPage + 2) {
                    html += `<span style="color: var(--text-muted)">...</span>`;
                }
            }
            
            html += `<button onclick="goToPage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}><i class="fas fa-chevron-right"></i></button>`;
            
            container.innerHTML = html;
        }

        function goToPage(page) {
            const totalPages = Math.ceil(filteredData.length / itemsPerPage);
            if (page < 1 || page > totalPages) return;
            currentPage = page;
            renderData();
        }

        function showDetail(id) {
            const item = SAMPLE_DATA.find(d => d.id === id);
            if (!item) return;

            document.getElementById('detail-card').classList.add('active');
            document.getElementById('detail-text').textContent = item.text;
            document.getElementById('detail-id').textContent = item.id;
            document.getElementById('detail-words').textContent = item.text.split(' ').length;
            document.getElementById('detail-category').textContent = item.category;
        }

        function updateStats() {
            document.getElementById('total-docs').textContent = SAMPLE_DATA.length;
            document.getElementById('showing-count').textContent = filteredData.length;
            
            const avgWords = Math.round(filteredData.reduce((sum, item) => sum + item.text.split(' ').length, 0) / filteredData.length);
            document.getElementById('avg-words').textContent = avgWords || 0;
        }

        function initCharts() {
            const categoryCtx = document.getElementById('category-chart').getContext('2d');
            const lengthCtx = document.getElementById('length-chart').getContext('2d');

            // Category Distribution Chart
            const categoryCounts = {};
            Object.keys(CATEGORIES).forEach(cat => categoryCounts[cat] = 0);
            SAMPLE_DATA.forEach(item => categoryCounts[item.category]++);

            categoryChart = new Chart(categoryCtx, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(CATEGORIES),
                    datasets: [{
                        data: Object.values(categoryCounts),
                        backgroundColor: Object.values(CATEGORIES).map(c => c.color),
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                color: '#a5a3b8',
                                font: { size: 10 },
                                padding: 10
                            }
                        }
                    }
                }
            });

            // Word Length Distribution Chart
            const wordCounts = SAMPLE_DATA.map(item => item.text.split(' ').length);
            const bins = [0, 10, 15, 20, 25, 30, 50];
            const binCounts = bins.slice(0, -1).map((_, i) => 
                wordCounts.filter(c => c >= bins[i] && c < bins[i + 1]).length
            );

            lengthChart = new Chart(lengthCtx, {
                type: 'bar',
                data: {
                    labels: bins.slice(0, -1).map((b, i) => `${b}-${bins[i + 1]}`),
                    datasets: [{
                        data: binCounts,
                        backgroundColor: '#dc2626',
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: {
                            ticks: { color: '#a5a3b8' },
                            grid: { display: false }
                        },
                        y: {
                            ticks: { color: '#a5a3b8' },
                            grid: { color: '#2d2444' }
                        }
                    }
                }
            });
        }

        function updateCharts() {
            // Update category chart
            const categoryCounts = {};
            Object.keys(CATEGORIES).forEach(cat => categoryCounts[cat] = 0);
            filteredData.forEach(item => categoryCounts[item.category]++);
            categoryChart.data.datasets[0].data = Object.values(categoryCounts);
            categoryChart.update();

            // Update length chart
            const wordCounts = filteredData.map(item => item.text.split(' ').length);
            const bins = [0, 10, 15, 20, 25, 30, 50];
            const binCounts = bins.slice(0, -1).map((_, i) => 
                wordCounts.filter(c => c >= bins[i] && c < bins[i + 1]).length
            );
            lengthChart.data.datasets[0].data = binCounts;
            lengthChart.update();
        }

        console.log('%c RSK World | rskworld.in ', 'background: #dc2626; color: white; padding: 10px; font-size: 14px;');
        console.log('Author: Molla Samser | Designer: Rima Khatun');
    </script>
</body>
</html>

1,064 lines•41.4 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size