RSK World - Surveillance Video Dataset - Project Files Browser | RSK World

<!--
    Project: Surveillance Video Dataset
    Author: Molla Samser
    Website: https://rskworld.in/
    Contact: help@rskworld.in
    Phone: +91 93305 39277
    Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analytics Dashboard - Surveillance Video Dataset</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 10px;
            text-align: center;
        }
        .stat-card h3 {
            font-size: 2.5em;
            margin: 10px 0;
        }
        .stat-card p {
            opacity: 0.9;
        }
        .chart-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .filter-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        .filter-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 15px;
        }
        .filter-group select, .filter-group input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            flex: 1;
            min-width: 200px;
        }
        .alert-badge {
            display: inline-block;
            background: #dc3545;
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8em;
            margin-left: 10px;
        }
        .timeline {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
        }
        .timeline-item {
            padding: 15px;
            border-left: 3px solid #667eea;
            margin: 10px 0;
            background: #f8f9fa;
        }
        .real-time-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #28a745;
            border-radius: 50%;
            animation: pulse 2s infinite;
            margin-right: 5px;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-chart-line"></i> Analytics Dashboard</h1>
            <p class="subtitle"><span class="real-time-indicator"></span>Real-time surveillance video analytics and monitoring</p>
        </header>

        <div class="content">
            <!-- Statistics Cards -->
            <section class="dashboard-grid">
                <div class="stat-card">
                    <i class="fas fa-video" style="font-size: 2em;"></i>
                    <h3 id="totalVideos">0</h3>
                    <p>Total Videos Processed</p>
                </div>
                <div class="stat-card">
                    <i class="fas fa-user" style="font-size: 2em;"></i>
                    <h3 id="totalDetections">0</h3>
                    <p>Person Detections</p>
                </div>
                <div class="stat-card">
                    <i class="fas fa-exclamation-triangle" style="font-size: 2em;"></i>
                    <h3 id="totalAnomalies">0</h3>
                    <p>Anomalies Detected</p>
                </div>
                <div class="stat-card">
                    <i class="fas fa-clock" style="font-size: 2em;"></i>
                    <h3 id="totalHours">0</h3>
                    <p>Hours of Footage</p>
                </div>
            </section>

            <!-- Filters -->
            <section class="filter-section">
                <h2><i class="fas fa-filter"></i> Filters</h2>
                <div class="filter-group">
                    <select id="dateFilter">
                        <option value="all">All Time</option>
                        <option value="today">Today</option>
                        <option value="week">This Week</option>
                        <option value="month">This Month</option>
                    </select>
                    <select id="videoFilter">
                        <option value="all">All Videos</option>
                        <option value="sample.mp4">Sample Video 1</option>
                        <option value="sample2.mp4">Sample Video 2</option>
                    </select>
                    <select id="anomalyFilter">
                        <option value="all">All Events</option>
                        <option value="anomalies">Anomalies Only</option>
                        <option value="normal">Normal Activity</option>
                    </select>
                    <button class="btn" onclick="applyFilters()">
                        <i class="fas fa-search"></i> Apply Filters
                    </button>
                </div>
            </section>

            <!-- Charts -->
            <section>
                <h2><i class="fas fa-chart-bar"></i> Analytics Charts</h2>
                <div class="dashboard-grid">
                    <div class="chart-container">
                        <h3>Detections Over Time</h3>
                        <canvas id="detectionsChart"></canvas>
                    </div>
                    <div class="chart-container">
                        <h3>Anomaly Distribution</h3>
                        <canvas id="anomalyChart"></canvas>
                    </div>
                    <div class="chart-container">
                        <h3>Activity Types</h3>
                        <canvas id="activityChart"></canvas>
                    </div>
                    <div class="chart-container">
                        <h3>Video Processing Stats</h3>
                        <canvas id="processingChart"></canvas>
                    </div>
                </div>
            </section>

            <!-- Real-time Events Timeline -->
            <section class="timeline">
                <h2><i class="fas fa-history"></i> Recent Events Timeline</h2>
                <div id="eventsTimeline"></div>
            </section>

            <!-- Video Quality Metrics -->
            <section>
                <h2><i class="fas fa-tachometer-alt"></i> Video Quality Metrics</h2>
                <div class="dashboard-grid">
                    <div class="info-card">
                        <h3>Average Quality Score</h3>
                        <h2 id="qualityScore">85%</h2>
                        <div class="progress-bar" style="background: #e0e0e0; height: 20px; border-radius: 10px; margin-top: 10px;">
                            <div style="background: #28a745; height: 100%; width: 85%; border-radius: 10px;"></div>
                        </div>
                    </div>
                    <div class="info-card">
                        <h3>Frame Rate Stability</h3>
                        <h2 id="frameRate">30 FPS</h2>
                        <p>Consistent frame rate maintained</p>
                    </div>
                    <div class="info-card">
                        <h3>Resolution Quality</h3>
                        <h2 id="resolution">1920x1080</h2>
                        <p>High definition quality</p>
                    </div>
                </div>
            </section>

            <!-- Export Options -->
            <section class="download-section">
                <h2><i class="fas fa-file-export"></i> Export Analytics</h2>
                <div class="download-card">
                    <p>Export analytics data in various formats</p>
                    <div style="display: flex; gap: 10px; justify-content: center; margin-top: 15px;">
                        <button class="btn-download" onclick="exportData('json')">
                            <i class="fas fa-file-code"></i> Export JSON
                        </button>
                        <button class="btn-download" onclick="exportData('csv')">
                            <i class="fas fa-file-csv"></i> Export CSV
                        </button>
                        <button class="btn-download" onclick="exportData('pdf')">
                            <i class="fas fa-file-pdf"></i> Export PDF
                        </button>
                    </div>
                </div>
            </section>
        </div>

        <footer>
            <p>&copy; 2026 <a href="https://rskworld.in/" target="_blank">rskworld.in</a> - Molla Samser</p>
            <p>Contact: <a href="mailto:help@rskworld.in">help@rskworld.in</a> | Phone: +91 93305 39277</p>
        </footer>
    </div>

    <script src="analytics.js"></script>
</body>
</html>

242 lines•9.3 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size