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>Surveillance Video Dataset - rskworld.in</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">
    <style>
        /* Enhanced Navigation */
        .navbar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 18px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        .navbar.scrolled {
            padding: 12px 0;
            box-shadow: 0 6px 25px rgba(0,0,0,0.2);
        }
        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo h2 {
            font-size: 1.5em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
            transition: transform 0.3s ease;
        }
        .logo h2:hover {
            transform: scale(1.05);
        }
        .nav-links {
            display: flex;
            gap: 25px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 600;
            padding: 12px 22px;
            border-radius: 25px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .nav-links a i {
            font-size: 0.9em;
        }
        .nav-links a::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            transition: left 0.3s ease;
        }
        .nav-links a:hover::before {
            left: 0;
        }
        .nav-links a:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.25);
        }
        
        /* Enhanced Installation Steps */
        .installation-steps {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 35px;
            border-radius: 15px;
            margin: 25px 0;
            border-left: 5px solid #667eea;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }
        .installation-steps::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
        }
        .step {
            margin: 25px 0;
            padding: 25px;
            background: white;
            border-radius: 12px;
            border-left: 4px solid #667eea;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }
        .step:hover {
            transform: translateX(8px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
            border-left-width: 6px;
        }
        .step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 20px;
            font-weight: bold;
            font-size: 1.1em;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
        }
        .step:hover .step-number {
            transform: scale(1.1) rotate(360deg);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        }
        
        /* Enhanced Feature Details */
        .feature-detail {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            padding: 28px;
            border-radius: 15px;
            margin: 20px 0;
            border: 2px solid #e0e0e0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            position: relative;
            overflow: hidden;
        }
        .feature-detail::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
            transition: left 0.5s ease;
        }
        .feature-detail:hover::before {
            left: 100%;
        }
        .feature-detail:hover {
            border-color: #667eea;
            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.25);
            transform: translateY(-5px) scale(1.01);
        }
        .feature-detail h4 {
            color: #667eea;
            margin-bottom: 15px;
            font-size: 1.4em;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: color 0.3s ease;
        }
        .feature-detail:hover h4 {
            color: #764ba2;
        }
        .feature-detail .file-name {
            background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
            padding: 8px 16px;
            border-radius: 8px;
            font-family: 'Courier New', 'Consolas', monospace;
            display: inline-block;
            margin: 8px 5px;
            font-weight: 600;
            color: #667eea;
            border: 1px solid #ddd;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .feature-detail .file-name:hover {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }
        .command-box {
            background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
            color: #d4d4d4;
            padding: 20px;
            border-radius: 10px;
            margin: 15px 0;
            font-family: 'Courier New', 'Consolas', monospace;
            overflow-x: auto;
            border: 1px solid #444;
            box-shadow: inset 0 2px 10px rgba(0,0,0,0.3), 0 4px 15px rgba(0,0,0,0.2);
            position: relative;
            transition: all 0.3s ease;
        }
        .command-box:hover {
            box-shadow: inset 0 2px 10px rgba(0,0,0,0.3), 0 6px 20px rgba(102, 126, 234, 0.3);
            border-color: #667eea;
        }
        .command-box::before {
            content: '$';
            position: absolute;
            left: 10px;
            top: 20px;
            color: #667eea;
            font-weight: bold;
        }
        
        /* Enhanced Logo */
        .logo-content {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .logo-content i {
            font-size: 2em;
            color: white;
            animation: pulse 2s ease-in-out infinite;
        }
        .logo-text h2 {
            margin: 0;
            font-size: 1.4em;
            color: white;
            font-weight: 700;
        }
        .logo-tagline {
            font-size: 0.7em;
            color: rgba(255, 255, 255, 0.8);
            display: block;
            margin-top: 2px;
        }
        
        /* Enhanced Hero Header */
        .hero-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 80px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .hero-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            opacity: 0.3;
        }
        .hero-pattern {
            position: absolute;
            top: -50%;
            right: -20%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 900px;
            margin: 0 auto;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 20px;
            border-radius: 25px;
            margin-bottom: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .hero-title {
            font-size: 3.5em;
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        .title-icon {
            font-size: 0.8em;
            animation: float 3s ease-in-out infinite;
        }
        .title-text {
            text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
        }
        .hero-subtitle {
            font-size: 1.3em;
            margin: 25px 0 40px;
            opacity: 0.95;
            line-height: 1.6;
        }
        .hero-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }
        .stat-item {
            background: rgba(255, 255, 255, 0.15);
            padding: 20px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .stat-item:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .stat-item i {
            font-size: 2em;
            color: rgba(255, 255, 255, 0.9);
        }
        .stat-item strong {
            display: block;
            font-size: 1.8em;
            margin-bottom: 5px;
        }
        .stat-item span {
            font-size: 0.9em;
            opacity: 0.9;
        }
        .hero-actions {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 40px;
            flex-wrap: wrap;
        }
        .btn-hero {
            padding: 16px 35px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1em;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }
        .btn-primary {
            background: white;
            color: #667eea;
        }
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(0,0,0,0.3);
        }
        .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 2px solid white;
        }
        .btn-secondary:hover {
            background: white;
            color: #667eea;
            transform: translateY(-3px);
        }
        
        /* Enhanced Footer */
        footer {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: white;
            padding: 60px 40px 30px;
            position: relative;
            overflow: hidden;
        }
        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
            background-size: 200% 100%;
            animation: gradient-shift 3s ease infinite;
        }
        @keyframes gradient-shift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 50px;
            margin-bottom: 50px;
            position: relative;
            z-index: 1;
        }
        .footer-section {
            animation: fadeInUp 0.6s ease-out;
        }
        .footer-section h3 {
            margin-bottom: 25px;
            color: #667eea;
            font-size: 1.4em;
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(102, 126, 234, 0.3);
            position: relative;
        }
        .footer-section h3::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 50px;
            height: 2px;
            background: #667eea;
        }
        .footer-section p {
            line-height: 1.8;
            color: #ccc;
            margin-bottom: 12px;
        }
        .footer-section strong {
            color: #fff;
        }
        .footer-section ul {
            list-style: none;
            padding: 0;
        }
        .footer-section ul li {
            margin: 15px 0;
            transition: all 0.3s ease;
            padding-left: 0;
        }
        .footer-section ul li::before {
            content: '▸';
            margin-right: 12px;
            color: #667eea;
            opacity: 0;
            transition: all 0.3s ease;
            font-weight: bold;
        }
        .footer-section ul li:hover {
            transform: translateX(10px);
            padding-left: 0;
        }
        .footer-section ul li:hover::before {
            opacity: 1;
        }
        .footer-section a {
            color: #ccc;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
        }
        .footer-section a:hover {
            color: #667eea;
            transform: translateX(5px);
        }
        .project-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        .badge {
            background: rgba(102, 126, 234, 0.2);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.85em;
            border: 1px solid rgba(102, 126, 234, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .badge i {
            color: #667eea;
        }
        .contact-info p {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .contact-info i {
            color: #667eea;
            width: 20px;
        }
        .footer-bottom {
            text-align: center;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #aaa;
            position: relative;
            z-index: 1;
        }
        .footer-bottom p {
            margin: 8px 0;
        }
        .footer-bottom a {
            color: #667eea;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        .footer-bottom a:hover {
            color: #764ba2;
            text-decoration: underline;
        }
        .social-links {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 20px;
        }
        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(102, 126, 234, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
            border: 2px solid rgba(102, 126, 234, 0.3);
        }
        .social-link:hover {
            background: #667eea;
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }
        
        /* Scroll Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* Smooth Scroll */
        html {
            scroll-behavior: smooth;
        }
        
        /* Loading Animation */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
            z-index: 999;
        }
        .back-to-top:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
        }
        .back-to-top.show {
            display: flex;
        }
        
        /* Enhanced Video Container */
        .video-container {
            position: relative;
            overflow: hidden;
        }
        .video-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 30%, rgba(102, 126, 234, 0.05) 50%, transparent 70%);
            pointer-events: none;
            animation: shimmer 3s infinite;
        }
        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .nav-container {
                flex-direction: column;
                gap: 15px;
                padding: 15px 20px;
            }
            .logo-content {
                flex-direction: column;
                text-align: center;
            }
            .logo-text h2 {
                font-size: 1.2em;
            }
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
            }
            .nav-links a {
                padding: 10px 18px;
                font-size: 0.9em;
            }
            .hero-header {
                padding: 50px 20px;
                min-height: auto;
            }
            .hero-title {
                font-size: 2em;
                flex-direction: column;
            }
            .hero-subtitle {
                font-size: 1.1em;
            }
            .hero-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }
            .hero-actions {
                flex-direction: column;
            }
            .btn-hero {
                width: 100%;
                justify-content: center;
            }
            .footer-content {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }
    </style>
</head>
<body>
    <!-- Enhanced Navigation Header -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">
                <div class="logo-content">
                    <i class="fas fa-video"></i>
                    <div class="logo-text">
                        <h2>Surveillance Video Dataset</h2>
                        <span class="logo-tagline">Advanced Security Monitoring</span>
                    </div>
                </div>
            </div>
            <ul class="nav-links">
                <li><a href="#home"><i class="fas fa-home"></i> Home</a></li>
                <li><a href="#features"><i class="fas fa-star"></i> Features</a></li>
                <li><a href="#installation"><i class="fas fa-download"></i> Installation</a></li>
                <li><a href="#usage"><i class="fas fa-play-circle"></i> Usage</a></li>
                <li><a href="analytics_dashboard.html"><i class="fas fa-chart-line"></i> Dashboard</a></li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <!-- Enhanced Hero Header -->
        <header id="home" class="hero-header">
            <div class="hero-content">
                <div class="hero-badge">
                    <i class="fas fa-shield-alt"></i>
                    <span>Project ID: 28</span>
                </div>
                <h1 class="hero-title">
                    <span class="title-icon"><i class="fas fa-video"></i></span>
                    <span class="title-text">Surveillance Video Dataset</span>
                </h1>
                <p class="hero-subtitle">Advanced security camera footage with AI-powered activity monitoring, person detection, and real-time anomaly detection</p>
                <div class="hero-stats">
                    <div class="stat-item">
                        <i class="fas fa-video"></i>
                        <div>
                            <strong>2+</strong>
                            <span>Sample Videos</span>
                        </div>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-code"></i>
                        <div>
                            <strong>15+</strong>
                            <span>Python Scripts</span>
                        </div>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-rocket"></i>
                        <div>
                            <strong>8</strong>
                            <span>Advanced Features</span>
                        </div>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-tags"></i>
                        <div>
                            <strong>100%</strong>
                            <span>Annotated</span>
                        </div>
                    </div>
                </div>
                <div class="hero-actions">
                    <a href="#installation" class="btn-hero btn-primary">
                        <i class="fas fa-download"></i> Get Started
                    </a>
                    <a href="analytics_dashboard.html" class="btn-hero btn-secondary">
                        <i class="fas fa-chart-line"></i> View Dashboard
                    </a>
                </div>
            </div>
            <div class="hero-pattern"></div>
        </header>

        <div class="content">
            <section class="info-section">
                <div class="info-card">
                    <h2><i class="fas fa-info-circle"></i> Dataset Information</h2>
                    <div class="info-grid">
                        <div class="info-item">
                            <strong>Category:</strong> Video Data
                        </div>
                        <div class="info-item">
                            <strong>Difficulty:</strong> Advanced
                        </div>
                        <div class="info-item">
                            <strong>Technologies:</strong> MP4, AVI, OpenCV, YOLO, Video Processing
                        </div>
                        <div class="info-item">
                            <strong>Project ID:</strong> 28
                        </div>
                        <div class="info-item">
                            <strong>Year:</strong> 2026
                        </div>
                    </div>
                </div>
            </section>

            <section id="features" class="features-section">
                <h2><i class="fas fa-star"></i> Core Features</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <i class="fas fa-camera"></i>
                        <h3>Security Camera Footage</h3>
                        <p>High-quality surveillance video recordings</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-tags"></i>
                        <h3>Activity Labels</h3>
                        <p>Comprehensive activity annotations</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-user"></i>
                        <h3>Person Detection</h3>
                        <p>Pre-labeled person detection data</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-exclamation-triangle"></i>
                        <h3>Anomaly Events</h3>
                        <p>Marked anomaly detection events</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-robot"></i>
                        <h3>Ready for Surveillance AI</h3>
                        <p>Optimized for AI model training</p>
                    </div>
                </div>
            </section>

            <section class="advanced-features-section">
                <h2><i class="fas fa-rocket"></i> Advanced Features with File Details</h2>
                
                <div class="feature-detail">
                    <h4><i class="fas fa-chart-line"></i> 1. Analytics Dashboard</h4>
                    <p><strong>File:</strong> <span class="file-name">analytics_dashboard.html</span></p>
                    <p><strong>JavaScript:</strong> <span class="file-name">analytics.js</span></p>
                    <p><strong>Description:</strong> Real-time analytics dashboard with statistics cards, interactive charts (detections over time, anomaly distribution, activity types), real-time event timeline, video quality metrics, and export capabilities (JSON, CSV, PDF).</p>
                    <p><strong>Usage:</strong> Open <span class="file-name">analytics_dashboard.html</span> in your web browser.</p>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-server"></i> 2. REST API Server</h4>
                    <p><strong>File:</strong> <span class="file-name">api_server.py</span></p>
                    <p><strong>Description:</strong> Flask-based REST API with endpoints for video processing, analytics, and management. Includes health check, video listing, processing, batch operations, search, annotations, and quality metrics.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python api_server.py
# API available at http://localhost:5000</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-tasks"></i> 3. Batch Processing System</h4>
                    <p><strong>File:</strong> <span class="file-name">batch_processor.py</span></p>
                    <p><strong>Description:</strong> Advanced batch processing with parallel processing of multiple videos, progress tracking, error handling, and comprehensive reports. Supports detection, anomaly detection, and frame extraction operations.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python batch_processor.py --directory videos --operations all --workers 4</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-brain"></i> 4. ML Model Training</h4>
                    <p><strong>File:</strong> <span class="file-name">train_ml_model.py</span></p>
                    <p><strong>Description:</strong> Machine learning model training for custom YOLO fine-tuning, activity recognition (CNN-based), and anomaly detection (Autoencoder-based) with PyTorch support.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python train_ml_model.py --model all --epochs 20</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-tachometer-alt"></i> 5. Video Quality Analyzer</h4>
                    <p><strong>File:</strong> <span class="file-name">video_quality_analyzer.py</span></p>
                    <p><strong>Description:</strong> Comprehensive video quality analysis including sharpness (Laplacian variance), brightness, contrast, noise estimation, color balance, frame stability (optical flow), and overall quality scoring.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python video_quality_analyzer.py videos/sample.mp4 --output output/quality_report.json</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-video"></i> 6. Multi-Camera System</h4>
                    <p><strong>File:</strong> <span class="file-name">multi_camera_system.py</span></p>
                    <p><strong>Config File:</strong> <span class="file-name">config/cameras.json</span></p>
                    <p><strong>Description:</strong> Multi-camera surveillance system with support for multiple camera feeds, synchronized processing, camera grid view, unified analytics, and parallel processing.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python multi_camera_system.py --create-config
python multi_camera_system.py --config config/cameras.json --process all</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-search"></i> 7. Video Search Engine</h4>
                    <p><strong>File:</strong> <span class="file-name">video_search.py</span></p>
                    <p><strong>Description:</strong> Advanced search and filtering with text-based search, metadata filtering, timestamp-based search, event type filtering, activity type filtering, and duration/resolution filters.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python video_search.py --query "sample" --event-type anomaly</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-bell"></i> 8. Alert System</h4>
                    <p><strong>File:</strong> <span class="file-name">alert_system.py</span></p>
                    <p><strong>Config File:</strong> <span class="file-name">config/alert_config.json</span></p>
                    <p><strong>Description:</strong> Real-time alert and notification system with anomaly detection alerts, person count threshold alerts, video quality alerts, multiple notification channels (console, file, email), and alert management.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python alert_system.py --create-config
python alert_system.py --check-all --report</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-video"></i> 9. Basic Video Processing</h4>
                    <p><strong>File:</strong> <span class="file-name">process_video.py</span></p>
                    <p><strong>Description:</strong> Basic video processing and frame extraction with video information retrieval, frame processing, and grayscale conversion.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python process_video.py</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-user"></i> 10. Person Detection</h4>
                    <p><strong>File:</strong> <span class="file-name">detect_persons.py</span></p>
                    <p><strong>Description:</strong> Person detection using YOLO and OpenCV HOG descriptor. Detects persons in video frames and saves detection results to JSON format.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python detect_persons.py</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-exclamation-triangle"></i> 11. Anomaly Detection</h4>
                    <p><strong>File:</strong> <span class="file-name">detect_anomalies.py</span></p>
                    <p><strong>Description:</strong> Anomaly detection using motion detection and optical flow. Detects unusual movements and rapid changes in video footage.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python detect_anomalies.py</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-images"></i> 12. Frame Extraction</h4>
                    <p><strong>File:</strong> <span class="file-name">extract_frames.py</span></p>
                    <p><strong>Description:</strong> Extract frames from video files at specified intervals or time intervals. Supports custom frame ranges and output directories.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python extract_frames.py --video videos/sample.mp4 --interval 30</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-film"></i> 13. Sample Video Creator</h4>
                    <p><strong>File:</strong> <span class="file-name">create_sample_video.py</span></p>
                    <p><strong>Description:</strong> Creates synthetic surveillance videos with moving objects, timestamps, grid patterns, and anomaly markers for testing purposes.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python create_sample_video.py</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-cog"></i> 14. Setup Script</h4>
                    <p><strong>File:</strong> <span class="file-name">setup.py</span></p>
                    <p><strong>Description:</strong> Setup script that creates necessary directories and checks Python dependencies.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python setup.py</div>
                </div>

                <div class="feature-detail">
                    <h4><i class="fas fa-check-circle"></i> 15. Project Verification</h4>
                    <p><strong>File:</strong> <span class="file-name">verify_project.py</span></p>
                    <p><strong>Description:</strong> Verification script that checks for missing files, broken links, and verifies project structure.</p>
                    <p><strong>Usage:</strong></p>
                    <div class="command-box">python verify_project.py</div>
                </div>
            </section>

            <section id="installation" class="installation-section">
                <h2><i class="fas fa-download"></i> Installation Guide</h2>
                
                <div class="installation-steps">
                    <h3>Step-by-Step Installation Instructions</h3>
                    
                    <div class="step">
                        <span class="step-number">1</span>
                        <strong>Prerequisites</strong>
                        <p>Ensure you have Python 3.8 or higher installed on your system.</p>
                        <div class="command-box">python --version</div>
                    </div>

                    <div class="step">
                        <span class="step-number">2</span>
                        <strong>Clone or Download Project</strong>
                        <p>Download the project files and extract them to your desired location.</p>
                        <p><strong>Project Structure:</strong> Ensure all files are in the <span class="file-name">surveillance-video</span> directory.</p>
                    </div>

                    <div class="step">
                        <span class="step-number">3</span>
                        <strong>Install Python Dependencies</strong>
                        <p>Open terminal/command prompt in the project directory and install required packages.</p>
                        <div class="command-box">pip install -r requirements.txt</div>
                        <p><strong>Required Files:</strong></p>
                        <ul>
                            <li><span class="file-name">requirements.txt</span> - Contains all dependency specifications</li>
                        </ul>
                        <p><strong>Core Dependencies:</strong></p>
                        <ul>
                            <li>opencv-python>=4.8.0</li>
                            <li>numpy>=1.24.0</li>
                            <li>ultralytics>=8.0.0</li>
                            <li>Pillow>=10.0.0</li>
                            <li>flask>=2.3.0</li>
                            <li>flask-cors>=4.0.0</li>
                            <li>torch>=2.0.0 (optional, for ML training)</li>
                        </ul>
                    </div>

                    <div class="step">
                        <span class="step-number">4</span>
                        <strong>Run Setup Script</strong>
                        <p>Execute the setup script to create necessary directories and verify dependencies.</p>
                        <div class="command-box">python setup.py</div>
                        <p><strong>File:</strong> <span class="file-name">setup.py</span></p>
                        <p>This script will:</p>
                        <ul>
                            <li>Create directories: <span class="file-name">videos/</span>, <span class="file-name">annotations/</span>, <span class="file-name">frames/</span>, <span class="file-name">output/</span>, <span class="file-name">config/</span>, <span class="file-name">models/</span></li>
                            <li>Check if required Python packages are installed</li>
                            <li>Display setup status</li>
                        </ul>
                    </div>

                    <div class="step">
                        <span class="step-number">5</span>
                        <strong>Verify Installation</strong>
                        <p>Run the verification script to ensure all files and directories are properly set up.</p>
                        <div class="command-box">python verify_project.py</div>
                        <p><strong>File:</strong> <span class="file-name">verify_project.py</span></p>
                        <p>This will check:</p>
                        <ul>
                            <li>All required files exist</li>
                            <li>All directories are created</li>
                            <li>Python dependencies are installed</li>
                            <li>Project structure is complete</li>
                        </ul>
                    </div>

                    <div class="step">
                        <span class="step-number">6</span>
                        <strong>Create Sample Videos (Optional)</strong>
                        <p>Generate synthetic sample videos for testing.</p>
                        <div class="command-box">python create_sample_video.py</div>
                        <p><strong>File:</strong> <span class="file-name">create_sample_video.py</span></p>
                        <p>This will create:</p>
                        <ul>
                            <li><span class="file-name">videos/sample.mp4</span> - Basic surveillance video</li>
                            <li><span class="file-name">videos/sample2.mp4</span> - Video with anomalies</li>
                        </ul>
                    </div>

                    <div class="step">
                        <span class="step-number">7</span>
                        <strong>Configure Advanced Features (Optional)</strong>
                        <p>Create configuration files for advanced features.</p>
                        <p><strong>Alert System Configuration:</strong></p>
                        <div class="command-box">python alert_system.py --create-config</div>
                        <p>Creates: <span class="file-name">config/alert_config.json</span></p>
                        
                        <p><strong>Multi-Camera Configuration:</strong></p>
                        <div class="command-box">python multi_camera_system.py --create-config</div>
                        <p>Creates: <span class="file-name">config/cameras.json</span></p>
                    </div>

                    <div class="step">
                        <span class="step-number">8</span>
                        <strong>Start API Server (Optional)</strong>
                        <p>Start the Flask API server for REST API access.</p>
                        <div class="command-box">python api_server.py</div>
                        <p><strong>File:</strong> <span class="file-name">api_server.py</span></p>
                        <p>API will be available at: <strong>http://localhost:5000</strong></p>
                        <p>Test endpoint: <strong>http://localhost:5000/api/health</strong></p>
                    </div>

                    <div class="step">
                        <span class="step-number">9</span>
                        <strong>Open Demo Pages</strong>
                        <p>Open the demo pages in your web browser.</p>
                        <ul>
                            <li><strong>Main Demo:</strong> Open <span class="file-name">index.html</span> in browser</li>
                            <li><strong>Analytics Dashboard:</strong> Open <span class="file-name">analytics_dashboard.html</span> in browser</li>
                        </ul>
                    </div>
                </div>
            </section>

            <section id="usage" class="video-section">
                <h2><i class="fas fa-play-circle"></i> Video Player</h2>
                <div class="video-container">
                    <video id="surveillanceVideo" controls>
                        <source src="videos/sample.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                    <div class="video-controls">
                        <button class="btn" onclick="loadVideo('videos/sample.mp4')">
                            <i class="fas fa-play"></i> Sample Video 1
                        </button>
                        <button class="btn" onclick="loadVideo('videos/sample2.mp4')">
                            <i class="fas fa-play"></i> Sample Video 2
                        </button>
                    </div>
                </div>
            </section>

            <section class="description-section">
                <h2><i class="fas fa-file-alt"></i> Description</h2>
                <p>This dataset contains surveillance camera footage with activity labels, person detection, and anomaly events. Perfect for security monitoring, activity recognition, and video surveillance applications.</p>
                <p>The dataset includes:</p>
                <ul>
                    <li>Multiple video formats (MP4, AVI)</li>
                    <li>Activity labels in JSON format</li>
                    <li>Person detection bounding boxes</li>
                    <li>Anomaly event timestamps</li>
                    <li>Pre-processed frames for training</li>
                </ul>
            </section>

            <section class="download-section">
                <h2><i class="fas fa-download"></i> Download</h2>
                <div class="download-card">
                    <p>Download the complete surveillance video dataset</p>
                    <a href="surveillance-video.zip" class="btn-download" download>
                        <i class="fas fa-download"></i> Download Dataset (ZIP)
                    </a>
                    <p style="margin-top: 20px; font-size: 0.9em; opacity: 0.9;">
                        <i class="fas fa-info-circle"></i> Includes all videos, scripts, documentation, and sample data
                    </p>
                </div>
            </section>
            
            <section class="project-images-section" style="margin-top: 50px;">
                <h2><i class="fas fa-images"></i> Project Visualizations</h2>
                <p style="text-align: center; margin-bottom: 30px; color: #666;">
                    Visual representations of the surveillance video dataset features and processing pipeline
                </p>
                <div class="features-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
                    <div class="feature-card" style="padding: 0; overflow: hidden;">
                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; text-align: center; color: white;">
                            <i class="fas fa-chart-line" style="font-size: 3em; margin-bottom: 10px;"></i>
                            <h3>Dashboard Overview</h3>
                        </div>
                        <div style="padding: 20px; background: #f8f9fa; min-height: 200px; display: flex; align-items: center; justify-content: center;">
                            <p style="color: #999; text-align: center;">
                                <i class="fas fa-image" style="font-size: 2em; margin-bottom: 10px; display: block;"></i>
                                Image: Analytics Dashboard<br>
                                <small>See IMAGE_PROMPTS.txt for generation</small>
                            </p>
                        </div>
                    </div>
                    <div class="feature-card" style="padding: 0; overflow: hidden;">
                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; text-align: center; color: white;">
                            <i class="fas fa-cogs" style="font-size: 3em; margin-bottom: 10px;"></i>
                            <h3>Processing Features</h3>
                        </div>
                        <div style="padding: 20px; background: #f8f9fa; min-height: 200px; display: flex; align-items: center; justify-content: center;">
                            <p style="color: #999; text-align: center;">
                                <i class="fas fa-image" style="font-size: 2em; margin-bottom: 10px; display: block;"></i>
                                Image: Video Processing<br>
                                <small>See IMAGE_PROMPTS.txt for generation</small>
                            </p>
                        </div>
                    </div>
                    <div class="feature-card" style="padding: 0; overflow: hidden;">
                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; text-align: center; color: white;">
                            <i class="fas fa-brain" style="font-size: 3em; margin-bottom: 10px;"></i>
                            <h3>Advanced ML Features</h3>
                        </div>
                        <div style="padding: 20px; background: #f8f9fa; min-height: 200px; display: flex; align-items: center; justify-content: center;">
                            <p style="color: #999; text-align: center;">
                                <i class="fas fa-image" style="font-size: 2em; margin-bottom: 10px; display: block;"></i>
                                Image: ML & AI Features<br>
                                <small>See IMAGE_PROMPTS.txt for generation</small>
                            </p>
                        </div>
                    </div>
                    <div class="feature-card" style="padding: 0; overflow: hidden;">
                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; text-align: center; color: white;">
                            <i class="fas fa-project-diagram" style="font-size: 3em; margin-bottom: 10px;"></i>
                            <h3>System Pipeline</h3>
                        </div>
                        <div style="padding: 20px; background: #f8f9fa; min-height: 200px; display: flex; align-items: center; justify-content: center;">
                            <p style="color: #999; text-align: center;">
                                <i class="fas fa-image" style="font-size: 2em; margin-bottom: 10px; display: block;"></i>
                                Image: Complete Pipeline<br>
                                <small>See IMAGE_PROMPTS.txt for generation</small>
                            </p>
                        </div>
                    </div>
                </div>
                <div style="text-align: center; margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
                    <p><i class="fas fa-info-circle"></i> <strong>Image Generation:</strong> Use the prompts in <code>IMAGE_PROMPTS.txt</code> or <code>IMAGE_GENERATION_PROMPTS.md</code> to generate these images with AI tools (DALL-E, Midjourney, Stable Diffusion)</p>
                    <p style="margin-top: 10px;"><small>All images should include watermark "rskworld.in" in bottom right corner</small></p>
                </div>
            </section>

            <section class="code-section">
                <h2><i class="fas fa-code"></i> Usage Examples</h2>
                <div class="code-tabs">
                    <button class="tab-btn active" onclick="showTab('python')">Python</button>
                    <button class="tab-btn" onclick="showTab('opencv')">OpenCV</button>
                    <button class="tab-btn" onclick="showTab('yolo')">YOLO</button>
                </div>
                <div id="python" class="tab-content active">
                    <pre><code>import cv2
import json

# Load video
cap = cv2.VideoCapture('videos/sample.mp4')

# Load annotations
with open('annotations/annotations.json', 'r') as f:
    annotations = json.load(f)

# Process video
while cap.isOpened():
    ret, frame = cap.read()
    if not ret:
        break
    
    # Your processing code here
    cv2.imshow('Frame', frame)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

cap.release()
cv2.destroyAllWindows()</code></pre>
                </div>
                <div id="opencv" class="tab-content">
                    <pre><code>import cv2
import numpy as np

# Video processing with OpenCV
def process_surveillance_video(video_path):
    cap = cv2.VideoCapture(video_path)
    
    while True:
        ret, frame = cap.read()
        if not ret:
            break
        
        # Convert to grayscale
        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
        
        # Apply background subtraction
        # Your processing logic here
        
    cap.release()</code></pre>
                </div>
                <div id="yolo" class="tab-content">
                    <pre><code>from ultralytics import YOLO
import cv2

# Load YOLO model
model = YOLO('yolov8n.pt')

# Process surveillance video
results = model('videos/sample.mp4')

# Display results
for result in results:
    annotated_frame = result.plot()
    cv2.imshow('Detection', annotated_frame)
    cv2.waitKey(1)</code></pre>
                </div>
            </section>
        </div>

        <!-- Enhanced Professional Footer -->
        <footer>
            <div class="footer-content">
                <div class="footer-section">
                    <h3><i class="fas fa-info-circle"></i> About Project</h3>
                    <p>Surveillance Video Dataset is a comprehensive collection of security camera footage with AI-powered activity monitoring, person detection, and real-time anomaly detection capabilities.</p>
                    <div class="project-badges">
                        <span class="badge"><i class="fas fa-tag"></i> ID: 28</span>
                        <span class="badge"><i class="fas fa-layer-group"></i> Video Data</span>
                        <span class="badge"><i class="fas fa-signal"></i> Advanced</span>
                    </div>
                </div>
                
                <div class="footer-section">
                    <h3><i class="fas fa-link"></i> Quick Links</h3>
                    <ul>
                        <li><a href="#home"><i class="fas fa-home"></i> Home</a></li>
                        <li><a href="#features"><i class="fas fa-star"></i> Features</a></li>
                        <li><a href="#installation"><i class="fas fa-download"></i> Installation</a></li>
                        <li><a href="#usage"><i class="fas fa-play-circle"></i> Usage</a></li>
                        <li><a href="analytics_dashboard.html"><i class="fas fa-chart-line"></i> Analytics Dashboard</a></li>
                        <li><a href="README.md"><i class="fas fa-book"></i> Documentation</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3><i class="fas fa-tools"></i> Key Scripts</h3>
                    <ul>
                        <li><a href="api_server.py"><i class="fas fa-server"></i> API Server</a></li>
                        <li><a href="batch_processor.py"><i class="fas fa-tasks"></i> Batch Processor</a></li>
                        <li><a href="detect_persons.py"><i class="fas fa-user"></i> Person Detection</a></li>
                        <li><a href="detect_anomalies.py"><i class="fas fa-exclamation-triangle"></i> Anomaly Detection</a></li>
                        <li><a href="video_quality_analyzer.py"><i class="fas fa-tachometer-alt"></i> Quality Analyzer</a></li>
                        <li><a href="multi_camera_system.py"><i class="fas fa-video"></i> Multi-Camera System</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3><i class="fas fa-envelope"></i> Contact Information</h3>
                    <div class="contact-info">
                        <p><i class="fas fa-user"></i> <strong>Author:</strong> Molla Samser</p>
                        <p><i class="fas fa-globe"></i> <strong>Website:</strong> <a href="https://rskworld.in/" target="_blank">rskworld.in</a></p>
                        <p><i class="fas fa-envelope"></i> <strong>Email:</strong> <a href="mailto:help@rskworld.in">help@rskworld.in</a></p>
                        <p><i class="fas fa-phone"></i> <strong>Phone:</strong> +91 93305 39277</p>
                        <p><i class="fas fa-map-marker-alt"></i> <strong>Address:</strong> Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147</p>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom">
                <div class="social-links">
                    <a href="https://rskworld.in/" target="_blank" class="social-link" title="Website">
                        <i class="fas fa-globe"></i>
                    </a>
                    <a href="mailto:help@rskworld.in" class="social-link" title="Email">
                        <i class="fas fa-envelope"></i>
                    </a>
                    <a href="tel:+919330539277" class="social-link" title="Phone">
                        <i class="fas fa-phone"></i>
                    </a>
                </div>
                <p>&copy; 2026 <a href="https://rskworld.in/" target="_blank">rskworld.in</a> - Molla Samser. All rights reserved.</p>
                <p>This project is provided for research and educational purposes.</p>
                <p style="margin-top: 15px; font-size: 0.9em; opacity: 0.8;">
                    <i class="fas fa-code"></i> Built with <i class="fas fa-heart" style="color: #e74c3c;"></i> by Molla Samser
                </p>
            </div>
        </footer>
    </div>

    <!-- Back to Top Button -->
    <div class="back-to-top" id="backToTop" onclick="scrollToTop()">
        <i class="fas fa-arrow-up"></i>
    </div>

    <script src="script.js"></script>
    <script>
        // Enhanced Navigation Scroll Effect
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
            
            // Show/Hide Back to Top Button
            const backToTop = document.getElementById('backToTop');
            if (window.scrollY > 300) {
                backToTop.classList.add('show');
            } else {
                backToTop.classList.remove('show');
            }
        });
        
        // Smooth Scroll to Top
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
        
        // Intersection Observer for Fade-in Animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.animation = 'fadeInUp 0.6s ease-out forwards';
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);
        
        // Observe all sections
        document.querySelectorAll('section').forEach(section => {
            section.style.opacity = '0';
            observer.observe(section);
        });
        
        // Enhanced Video Loading
        const video = document.getElementById('surveillanceVideo');
        if (video) {
            video.addEventListener('loadstart', function() {
                this.style.opacity = '0.5';
            });
            video.addEventListener('canplay', function() {
                this.style.opacity = '1';
                this.style.transition = 'opacity 0.5s ease';
            });
        }
        
        // Add click ripple effect to buttons
        document.querySelectorAll('.btn, .btn-download').forEach(button => {
            button.addEventListener('click', function(e) {
                const ripple = document.createElement('span');
                const rect = this.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = e.clientX - rect.left - size / 2;
                const y = e.clientY - rect.top - size / 2;
                
                ripple.style.width = ripple.style.height = size + 'px';
                ripple.style.left = x + 'px';
                ripple.style.top = y + 'px';
                ripple.classList.add('ripple');
                
                this.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.remove();
                }, 600);
            });
        });
    </script>
    <style>
        /* Ripple Effect */
        .btn, .btn-download {
            position: relative;
            overflow: hidden;
        }
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            transform: scale(0);
            animation: ripple-animation 0.6s ease-out;
            pointer-events: none;
        }
        @keyframes ripple-animation {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
    </style>
</body>
</html>

1,450 lines•62.2 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size