help@rskworld.in +91 93305 39277
RSK World
  • Home
  • Development
    • Web Development
    • Mobile Apps
    • Software
    • Games
    • Project
  • Technologies
    • Data Science
    • AI Development
    • Cloud Development
    • Blockchain
    • Cyber Security
    • Dev Tools
    • Testing Tools
  • Blog
  • About
  • Contact

Theme Settings

Color Scheme
Display Options
Font Size
100%
Back to Project
RSK World
sports-analysis
RSK World
sports-analysis
Sports Analysis Dataset - Game Footage + Player Tracking + Event Annotations + OpenCV + Video Analysis
sports-analysis
  • .github
  • assets
  • data
  • docs
  • examples
  • scripts
  • .gitignore577 B
  • ADVANCED_FEATURES.md7.1 KB
  • CHANGELOG.md3.5 KB
  • CONTRIBUTING.md1 KB
  • DATA_SUMMARY.md4.1 KB
  • ERROR_CHECK_REPORT.md3.6 KB
  • GITHUB_RELEASE_GUIDE.md4.3 KB
  • LICENSE1.3 KB
  • PROJECT_SUMMARY.md3.8 KB
  • README.md2.7 KB
  • RELEASE_NOTES.md5.6 KB
  • api.html10.3 KB
  • config.json1.6 KB
  • dashboard.html9.6 KB
  • explorer.html8.8 KB
  • index.html95.9 KB
  • package.json1.3 KB
  • server.js7.9 KB
  • sports-analysis.png2.7 MB
  • sports-analysis.zip13.6 KB
  • sports-analysis.zip.info514 B
README.mdindex.html
README.md
Raw Download

README.md

# Sports Analysis Dataset

<!--
RSK World
Founder: Molla Samser
Designer & Tester: Rima Khatun
Email: help@rskworld.in
Phone: +91 93305 39277
Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
Website: https://rskworld.in/
-->

## Overview

Sports video dataset with game footage, player tracking, and event annotations for sports analytics and performance analysis.

This dataset contains sports video footage with player tracking, game events, and performance annotations. Perfect for sports analytics, player tracking, event detection, and performance analysis applications.

## Dataset Information

- **ID**: 29
- **Title**: Sports Analysis Dataset
- **Category**: Video Data
- **Difficulty**: Advanced
- **Technologies**: MP4, MOV, OpenCV, Tracking, Video Analysis

## Features

- ✅ Game footage
- ✅ Player tracking
- ✅ Event annotations
- ✅ Multiple sports
- ✅ Ready for sports AI

## Technologies Used

- **MP4**: Standard video format for game footage
- **MOV**: Alternative video format support
- **OpenCV**: Computer vision and image processing
- **Tracking**: Player and object tracking algorithms
- **Video Analysis**: Advanced video processing and analytics

## Installation

1. Download the dataset from the [download section](#download) or use the direct link: `./sports-analysis/sports-analysis.zip`
2. Extract the ZIP file to your desired location
3. Review the documentation included in the dataset

## Usage

This dataset is designed for:

- Sports analytics research
- Player tracking algorithm development
- Event detection and classification
- Performance analysis applications
- Machine learning and AI model training
- Computer vision projects

## File Structure

```
sports-analysis/
├── index.html # Main demo page
├── README.md # This file
├── assets/
│ ├── css/
│ │ └── style.css # Stylesheet
│ └── js/
│ └── main.js # JavaScript functionality
├── sports-analysis.zip # Dataset archive
└── sports-analysis.png # Project image
```

## Demo

Visit the demo page at: `./sports-analysis/`

## Contact

**RSK World**

- **Founder**: Molla Samser
- **Designer & Tester**: Rima Khatun
- **Email**: help@rskworld.in
- **Phone**: +91 93305 39277
- **Address**: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
- **Website**: https://rskworld.in/

## License

This dataset is provided by RSK World for research and development purposes.

## Support

For questions, support, or inquiries about this dataset, please contact us at help@rskworld.in or visit https://rskworld.in/

---

© 2026 RSK World. All rights reserved.

index.html
Raw Download
Find: Go to:
<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    RSK World
    Founder: Molla Samser
    Designer & Tester: Rima Khatun
    Email: help@rskworld.in
    Phone: +91 93305 39277
    Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
    Website: https://rskworld.in/
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sports Analysis Dataset - RSK World</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <!--
    RSK World
    Founder: Molla Samser
    Designer & Tester: Rima Khatun
    Email: help@rskworld.in
    Phone: +91 93305 39277
    Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
    Website: https://rskworld.in/
    -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="https://rskworld.in/">
                <i class="fas fa-video text-secondary"></i> RSK World
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#overview">Overview</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#technologies">Technologies</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#demo">Demo</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#download">Download</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#installation">Installation</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="dashboard.html">Dashboard</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <header class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h1 class="display-4 fw-bold mb-4">
                        <i class="fas fa-video text-secondary"></i> Sports Analysis Dataset
                    </h1>
                    <p class="lead mb-4">Sports video dataset with game footage, player tracking, and event annotations for sports analytics and performance analysis.</p>
                    <div class="badge bg-secondary mb-3">Video Data</div>
                    <div class="badge bg-danger ms-2 mb-3">Advanced</div>
                    <div class="mt-4">
                        <a href="#download" class="btn btn-primary btn-lg me-3">
                            <i class="fas fa-download"></i> Download Dataset
                        </a>
                        <a href="#demo" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-play"></i> View Demo
                        </a>
                    </div>
                </div>
                <div class="col-lg-6 text-center">
                    <img src="sports-analysis.png" alt="Sports Analysis Dataset - rskworld.in" class="img-fluid rounded shadow-lg">
                </div>
            </div>
        </div>
    </header>

    <!-- ALERT: Installation Section Available -->
    <div class="alert alert-warning alert-dismissible fade show text-center mb-0" role="alert" style="background-color: #ffc107; border-left: 5px solid #ff9800; font-size: 1.1rem; padding: 15px;">
        <strong><i class="fas fa-exclamation-triangle"></i> Installation Guide Available!</strong> 
        Scroll down or <a href="#installation" class="alert-link fw-bold">click here to jump to Installation Section</a>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <section id="overview" class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <h2 class="text-center mb-5">Dataset Overview</h2>
                    <p class="lead text-center mb-4">
                        This dataset contains sports video footage with player tracking, game events, and performance annotations. 
                        Perfect for sports analytics, player tracking, event detection, and performance analysis applications.
                    </p>
                    <div class="card shadow-sm">
                        <div class="card-body p-4">
                            <h5 class="card-title"><i class="fas fa-info-circle text-primary"></i> Dataset Information</h5>
                            <hr>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <strong>Category:</strong> Video Data
                                </div>
                                <div class="col-md-6 mb-3">
                                    <strong>Difficulty:</strong> <span class="badge bg-danger">Advanced</span>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <strong>Format:</strong> MP4, MOV
                                </div>
                                <div class="col-md-6 mb-3">
                                    <strong>Use Cases:</strong> Sports Analytics, AI Training
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="features" class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">Key Features</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-video fa-3x text-secondary mb-3"></i>
                            <h5 class="card-title">Game Footage</h5>
                            <p class="card-text">High-quality sports video footage from various games and matches.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-user-friends fa-3x text-secondary mb-3"></i>
                            <h5 class="card-title">Player Tracking</h5>
                            <p class="card-text">Comprehensive player tracking data with position and movement annotations.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-tags fa-3x text-secondary mb-3"></i>
                            <h5 class="card-title">Event Annotations</h5>
                            <p class="card-text">Detailed event annotations for game events, plays, and key moments.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-futbol fa-3x text-secondary mb-3"></i>
                            <h5 class="card-title">Multiple Sports</h5>
                            <p class="card-text">Dataset includes footage from various sports disciplines.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-robot fa-3x text-secondary mb-3"></i>
                            <h5 class="card-title">Ready for Sports AI</h5>
                            <p class="card-text">Pre-processed and formatted for machine learning and AI applications.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="demo" class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">Interactive Demo & Advanced Features</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-primary">
                        <div class="card-body text-center">
                            <i class="fas fa-chart-line fa-3x text-primary mb-3"></i>
                            <h5 class="card-title">Analytics Dashboard</h5>
                            <p class="card-text">Interactive dashboard with real-time statistics, charts, and performance metrics visualization.</p>
                            <a href="dashboard.html" class="btn btn-primary">
                                <i class="fas fa-external-link-alt"></i> Open Dashboard
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-success">
                        <div class="card-body text-center">
                            <i class="fas fa-search fa-3x text-success mb-3"></i>
                            <h5 class="card-title">Data Explorer</h5>
                            <p class="card-text">Advanced search, filter, and explore dataset with powerful query capabilities.</p>
                            <a href="explorer.html" class="btn btn-success">
                                <i class="fas fa-external-link-alt"></i> Explore Data
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-info">
                        <div class="card-body text-center">
                            <i class="fas fa-code fa-3x text-info mb-3"></i>
                            <h5 class="card-title">REST API</h5>
                            <p class="card-text">Programmatic access to dataset through RESTful API endpoints with JSON responses.</p>
                            <a href="api.html" class="btn btn-info">
                                <i class="fas fa-external-link-alt"></i> View API Docs
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-4 mt-2">
                <div class="col-md-6">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title"><i class="fas fa-download text-primary"></i> Export Features</h5>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-success"></i> Export data to CSV, JSON, Excel formats</li>
                                <li><i class="fas fa-check text-success"></i> Custom report generation</li>
                                <li><i class="fas fa-check text-success"></i> Bulk data download</li>
                                <li><i class="fas fa-check text-success"></i> Filtered export options</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h5 class="card-title"><i class="fas fa-calculator text-warning"></i> Analytics Tools</h5>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-success"></i> Real-time statistics calculator</li>
                                <li><i class="fas fa-check text-success"></i> Performance comparison tools</li>
                                <li><i class="fas fa-check text-success"></i> Trend analysis and predictions</li>
                                <li><i class="fas fa-check text-success"></i> Custom metric calculations</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="technologies" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">Technologies & Tools</h2>
            <div class="row g-3 justify-content-center">
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="tech-badge">
                        <i class="fas fa-file-video fa-2x mb-2"></i>
                        <span>MP4</span>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="tech-badge">
                        <i class="fas fa-film fa-2x mb-2"></i>
                        <span>MOV</span>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="tech-badge">
                        <i class="fas fa-eye fa-2x mb-2"></i>
                        <span>OpenCV</span>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="tech-badge">
                        <i class="fas fa-route fa-2x mb-2"></i>
                        <span>Tracking</span>
                    </div>
                </div>
                <div class="col-md-2 col-sm-4 col-6">
                    <div class="tech-badge">
                        <i class="fas fa-chart-line fa-2x mb-2"></i>
                        <span>Video Analysis</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="download" class="py-5 bg-dark text-white">
        <div class="container text-center">
            <h2 class="mb-4">Download Dataset</h2>
            <p class="lead mb-4">Get the complete Sports Analysis Dataset for your research and development projects.</p>
            <a href="sports-analysis.zip" class="btn btn-primary btn-lg me-3" download>
                <i class="fas fa-download"></i> Download Dataset (ZIP)
            </a>
            <a href="#installation" class="btn btn-success btn-lg">
                <i class="fas fa-book"></i> View Installation Guide
            </a>
            <div class="mt-4">
                <small class="text-muted">
                    <i class="fas fa-info-circle"></i> 
                    Dataset includes video files, annotations, and documentation
                </small>
            </div>
        </div>
    </section>

    <!-- ========== INSTALLATION SECTION START ========== -->
    <section id="installation" class="py-5" style="background-color: #f8f9fa !important; border-top: 5px solid #0d6efd !important; border-bottom: 5px solid #0d6efd !important; display: block !important; visibility: visible !important; min-height: 500px !important; margin: 40px 0 !important; padding: 60px 0 !important;">
        <div class="container" style="max-width: 1200px !important; display: block !important; visibility: visible !important;">
            <!-- TEST MARKER - If you see this, the section is loading -->
            <div style="background: #28a745; color: white; padding: 10px; text-align: center; margin-bottom: 20px; font-weight: bold; display: block !important;">
                ✓ INSTALLATION SECTION IS VISIBLE - Scroll down to see the full guide
            </div>
            
            <div class="text-center mb-5 py-4" style="padding: 30px 0 !important; display: block !important; visibility: visible !important;">
                <div class="badge bg-primary mb-3" style="font-size: 1.2rem !important; padding: 12px 25px !important; display: inline-block !important; visibility: visible !important;">
                    <i class="fas fa-info-circle"></i> INSTALLATION GUIDE
                </div>
                <h2 class="display-4 fw-bold mb-3" style="color: #0d6efd !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.1) !important; font-size: 3rem !important; display: block !important; visibility: visible !important;">
                    <i class="fas fa-book"></i> Installation & Setup Guide
                </h2>
                <p class="lead fw-semibold" style="color: #495057 !important; font-size: 1.3rem !important; margin: 20px 0 !important; display: block !important; visibility: visible !important;">Complete step-by-step guide to install, configure, and use the Sports Analysis Dataset</p>
                <div class="alert alert-info mt-3 mb-0" style="font-size: 1.1rem !important; padding: 20px 30px !important; display: inline-block !important; max-width: 800px !important; visibility: visible !important;">
                    <i class="fas fa-lightbulb"></i> <strong>New to this project?</strong> Follow the steps below to get started quickly!
                </div>
            </div>

            <!-- Quick Navigation Table of Contents -->
            <div class="card shadow-sm mb-5 border-primary">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-list"></i> Quick Navigation - Table of Contents</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="fw-bold mb-3"><i class="fas fa-rocket text-primary"></i> Getting Started</h6>
                            <ul class="list-unstyled ms-3">
                                <li><i class="fas fa-chevron-right text-primary me-2"></i><a href="#prerequisites-section" class="text-decoration-none">1. Prerequisites</a></li>
                                <li><i class="fas fa-chevron-right text-primary me-2"></i><a href="#download-extract-section" class="text-decoration-none">2. Download & Extract</a></li>
                                <li><i class="fas fa-chevron-right text-primary me-2"></i><a href="#install-deps-section" class="text-decoration-none">3. Install Dependencies</a></li>
                                <li><i class="fas fa-chevron-right text-primary me-2"></i><a href="#running-section" class="text-decoration-none">4. Running the Project</a></li>
                                <li><i class="fas fa-chevron-right text-primary me-2"></i><a href="#structure-section" class="text-decoration-none">5. Project Structure</a></li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6 class="fw-bold mb-3"><i class="fas fa-code text-success"></i> Advanced Topics</h6>
                            <ul class="list-unstyled ms-3">
                                <li><i class="fas fa-chevron-right text-success me-2"></i><a href="#python-examples-section" class="text-decoration-none">6. Python Examples</a></li>
                                <li><i class="fas fa-chevron-right text-success me-2"></i><a href="#features-work-section" class="text-decoration-none">7. How Features Work</a></li>
                                <li><i class="fas fa-chevron-right text-success me-2"></i><a href="#file-guide-section" class="text-decoration-none">8. File-by-File Guide</a></li>
                                <li><i class="fas fa-chevron-right text-danger me-2"></i><a href="#troubleshooting-section" class="text-decoration-none">9. Troubleshooting</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Prerequisites -->
            <div id="prerequisites-section" class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-check-circle"></i> Prerequisites</h5>
                </div>
                <div class="card-body">
                    <p>Before you begin, ensure you have the following installed:</p>
                    <ul>
                        <li><strong>Node.js</strong> (v14 or higher) - <a href="https://nodejs.org/" target="_blank">Download here</a></li>
                        <li><strong>Python 3</strong> (v3.7 or higher) - <a href="https://www.python.org/downloads/" target="_blank">Download here</a></li>
                        <li><strong>Modern Web Browser</strong> (Chrome, Firefox, Edge, Safari)</li>
                        <li><strong>Text Editor</strong> (VS Code, Sublime Text, or any preferred editor)</li>
                    </ul>
                </div>
            </div>

            <!-- Step 1: Download & Extract -->
            <div id="download-extract-section" class="card shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="fas fa-step-forward"></i> Step 1: Download and Extract</h5>
                </div>
                <div class="card-body">
                    <ol>
                        <li>Download the <code>sports-analysis.zip</code> file from the download section above</li>
                        <li>Extract the ZIP file to your desired location (e.g., <code>C:\projects\sports-analysis</code> or <code>~/projects/sports-analysis</code>)</li>
                        <li>You should see the following folder structure:
                            <pre class="bg-light p-3 mt-2 rounded"><code>sports-analysis/
├── assets/
│   ├── css/
│   └── js/
├── data/
│   ├── annotations/
│   ├── metadata/
│   └── videos/
├── docs/
├── examples/
├── scripts/
├── index.html
├── dashboard.html
├── explorer.html
├── api.html
├── server.js
├── package.json
└── README.md</code></pre>
                        </li>
                    </ol>
                </div>
            </div>

            <!-- Step 2: Install Dependencies -->
            <div id="install-deps-section" class="card shadow-sm mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-step-forward"></i> Step 2: Install Dependencies</h5>
                </div>
                <div class="card-body">
                    <p>Open a terminal/command prompt in the project directory and run:</p>
                    <pre class="bg-dark text-light p-3 rounded"><code>npm install</code></pre>
                    <p class="mt-3">This will install the following packages:</p>
                    <ul>
                        <li><strong>express</strong> - Web server framework for the API</li>
                        <li><strong>cors</strong> - Cross-origin resource sharing middleware</li>
                        <li><strong>http-server</strong> - Simple HTTP server for development</li>
                    </ul>
                </div>
            </div>

            <!-- Step 3: Running the Project -->
            <div id="running-section" class="card shadow-sm mb-4">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="fas fa-step-forward"></i> Step 3: Running the Project</h5>
                </div>
                <div class="card-body">
                    <h6><i class="fas fa-server text-primary"></i> Option A: Using API Server (Recommended)</h6>
                    <p>Start the Node.js API server:</p>
                    <pre class="bg-dark text-light p-3 rounded"><code>npm start
# or
npm run dev</code></pre>
                    <p class="mt-2">The server will start on <strong>http://localhost:3000</strong></p>
                    <ul class="mt-3">
                        <li>Main page: <a href="http://localhost:3000/index.html" target="_blank">http://localhost:3000/index.html</a></li>
                        <li>Dashboard: <a href="http://localhost:3000/dashboard.html" target="_blank">http://localhost:3000/dashboard.html</a></li>
                        <li>Data Explorer: <a href="http://localhost:3000/explorer.html" target="_blank">http://localhost:3000/explorer.html</a></li>
                        <li>API Documentation: <a href="http://localhost:3000/api.html" target="_blank">http://localhost:3000/api.html</a></li>
                        <li>API Endpoints: <a href="http://localhost:3000/api/games" target="_blank">http://localhost:3000/api/games</a></li>
                    </ul>

                    <hr class="my-4">

                    <h6><i class="fas fa-globe text-success"></i> Option B: Using Simple HTTP Server</h6>
                    <p>For quick viewing without API features:</p>
                    <pre class="bg-dark text-light p-3 rounded"><code>npm run serve
# or
npx http-server . -p 8080</code></pre>
                    <p class="mt-2">The server will start on <strong>http://localhost:8080</strong></p>
                    <p class="text-muted"><small><i class="fas fa-info-circle"></i> Note: This method works for viewing HTML pages but API endpoints won't be available.</small></p>

                    <hr class="my-4">

                    <h6><i class="fas fa-file text-secondary"></i> Option C: Direct File Access</h6>
                    <p>You can also open HTML files directly in your browser:</p>
                    <ul>
                        <li>Double-click <code>index.html</code> to open in your default browser</li>
                        <li>Note: Some features (like data loading) may not work without a server</li>
                    </ul>
                </div>
            </div>

            <!-- Step 4: Project Structure -->
            <div id="structure-section" class="card shadow-sm mb-4">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0"><i class="fas fa-folder-tree"></i> Step 4: Understanding Project Structure</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>File/Folder</th>
                                    <th>Description</th>
                                    <th>Purpose</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><code>index.html</code></td>
                                    <td>Main homepage</td>
                                    <td>Landing page with project overview, features, and navigation</td>
                                </tr>
                                <tr>
                                    <td><code>dashboard.html</code></td>
                                    <td>Analytics dashboard</td>
                                    <td>Interactive dashboard with charts, statistics, and data visualization</td>
                                </tr>
                                <tr>
                                    <td><code>explorer.html</code></td>
                                    <td>Data explorer</td>
                                    <td>Advanced search and filter interface for exploring the dataset</td>
                                </tr>
                                <tr>
                                    <td><code>api.html</code></td>
                                    <td>API documentation</td>
                                    <td>Complete REST API documentation with examples</td>
                                </tr>
                                <tr>
                                    <td><code>server.js</code></td>
                                    <td>Node.js API server</td>
                                    <td>Express.js server providing REST API endpoints for data access</td>
                                </tr>
                                <tr>
                                    <td><code>package.json</code></td>
                                    <td>Node.js configuration</td>
                                    <td>Project metadata, dependencies, and npm scripts</td>
                                </tr>
                                <tr>
                                    <td><code>assets/css/</code></td>
                                    <td>Stylesheets</td>
                                    <td>CSS files: style.css, dashboard.css, explorer.css</td>
                                </tr>
                                <tr>
                                    <td><code>assets/js/</code></td>
                                    <td>JavaScript files</td>
                                    <td>JS files: main.js, dashboard.js, explorer.js</td>
                                </tr>
                                <tr>
                                    <td><code>data/annotations/</code></td>
                                    <td>Annotation data</td>
                                    <td>JSON/CSV files: tracking data, events, performance metrics</td>
                                </tr>
                                <tr>
                                    <td><code>data/metadata/</code></td>
                                    <td>Metadata</td>
                                    <td>games_metadata.json - Game information and references</td>
                                </tr>
                                <tr>
                                    <td><code>data/videos/</code></td>
                                    <td>Video files directory</td>
                                    <td>Place MP4/MOV video files here (not included in ZIP due to size)</td>
                                </tr>
                                <tr>
                                    <td><code>examples/</code></td>
                                    <td>Python examples</td>
                                    <td>Example scripts: tracking, events, statistics calculator</td>
                                </tr>
                                <tr>
                                    <td><code>scripts/</code></td>
                                    <td>Utility scripts</td>
                                    <td>Scripts to create dataset ZIP archives</td>
                                </tr>
                                <tr>
                                    <td><code>docs/</code></td>
                                    <td>Documentation</td>
                                    <td>Additional documentation files</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Step 5: Using Python Examples -->
            <div id="python-examples-section" class="card shadow-sm mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0"><i class="fas fa-step-forward"></i> Step 5: Running Python Examples</h5>
                </div>
                <div class="card-body">
                    <p>Install required Python packages:</p>
                    <pre class="bg-dark text-light p-3 rounded"><code>pip install opencv-python numpy</code></pre>
                    
                    <h6 class="mt-4">Available Python Scripts:</h6>
                    <ul>
                        <li>
                            <strong>example_tracking.py</strong> - Player tracking visualization
                            <pre class="bg-light p-2 mt-2 rounded"><code>cd examples
python example_tracking.py</code></pre>
                        </li>
                        <li>
                            <strong>example_events.py</strong> - Event analysis
                            <pre class="bg-light p-2 mt-2 rounded"><code>cd examples
python example_events.py</code></pre>
                        </li>
                        <li>
                            <strong>statistics_calculator.py</strong> - Advanced statistics calculator
                            <pre class="bg-light p-2 mt-2 rounded"><code>cd examples
python statistics_calculator.py</code></pre>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Step 6: How Features Work -->
            <div id="features-work-section" class="card shadow-sm mb-4">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0"><i class="fas fa-cogs"></i> Step 6: How Features Work</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="featuresAccordion">
                        <!-- Dashboard -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#dashboardFeature">
                                    <i class="fas fa-chart-line me-2"></i> Analytics Dashboard
                                </button>
                            </h2>
                            <div id="dashboardFeature" class="accordion-collapse collapse show" data-bs-parent="#featuresAccordion">
                                <div class="accordion-body">
                                    <ul>
                                        <li>Loads data from <code>data/metadata/games_metadata.json</code></li>
                                        <li>Fetches events from <code>data/annotations/events_*.json</code> files</li>
                                        <li>Loads performance metrics from <code>data/annotations/performance_metrics_001.csv</code></li>
                                        <li>Uses Chart.js library to render interactive charts</li>
                                        <li>Displays statistics cards, tables, and top performers</li>
                                        <li>Export functionality allows downloading data as CSV or JSON</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Data Explorer -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#explorerFeature">
                                    <i class="fas fa-search me-2"></i> Data Explorer
                                </button>
                            </h2>
                            <div id="explorerFeature" class="accordion-collapse collapse" data-bs-parent="#featuresAccordion">
                                <div class="accordion-body">
                                    <ul>
                                        <li>Loads all games metadata on page load</li>
                                        <li>Fetches events and tracking data from JSON files</li>
                                        <li>Provides search by keywords, sport type, event type, and date range</li>
                                        <li>Real-time filtering updates results instantly</li>
                                        <li>Quick statistics sidebar shows dataset overview</li>
                                        <li>Export filtered results to JSON format</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- REST API -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#apiFeature">
                                    <i class="fas fa-code me-2"></i> REST API Server
                                </button>
                            </h2>
                            <div id="apiFeature" class="accordion-collapse collapse" data-bs-parent="#featuresAccordion">
                                <div class="accordion-body">
                                    <p><strong>Available Endpoints:</strong></p>
                                    <ul>
                                        <li><code>GET /api/games</code> - Get all games</li>
                                        <li><code>GET /api/games/:gameId</code> - Get specific game</li>
                                        <li><code>GET /api/events?gameId=&eventType=&sport=</code> - Get filtered events</li>
                                        <li><code>GET /api/tracking/:gameId</code> - Get tracking data</li>
                                        <li><code>GET /api/stats</code> - Get statistics</li>
                                        <li><code>GET /api/performance/:gameId?</code> - Get performance metrics</li>
                                    </ul>
                                    <p class="mt-3"><strong>How it works:</strong></p>
                                    <ul>
                                        <li>Express.js server listens on port 3000</li>
                                        <li>Reads JSON/CSV files from the data directory</li>
                                        <li>Processes and filters data based on query parameters</li>
                                        <li>Returns JSON responses with CORS enabled</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Troubleshooting -->
            <div id="troubleshooting-section" class="card shadow-sm mb-5">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> Troubleshooting</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6><i class="fas fa-question-circle"></i> Common Issues:</h6>
                        <ul class="mb-0">
                            <li><strong>Port already in use:</strong> Change the port in <code>server.js</code> (line 17) or stop the process using port 3000</li>
                            <li><strong>Module not found:</strong> Run <code>npm install</code> to install dependencies</li>
                            <li><strong>Data not loading:</strong> Ensure you're using the API server (npm start) not just opening HTML files</li>
                            <li><strong>CORS errors:</strong> The API server includes CORS middleware, ensure it's running</li>
                            <li><strong>Charts not displaying:</strong> Check browser console for errors, ensure Chart.js CDN is loading</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Detailed File-by-File Guide -->
            <div id="file-guide-section">
                <h2 class="text-center mb-5"><i class="fas fa-file-code text-primary"></i> Complete File-by-File Guide</h2>

            <!-- HTML Files -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-file-code"></i> HTML Files - Step-by-Step Guide</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="htmlFilesAccordion">
                        <!-- index.html -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#indexHtml">
                                    <strong>index.html</strong> - Main Homepage
                                </button>
                            </h2>
                            <div id="indexHtml" class="accordion-collapse collapse show" data-bs-parent="#htmlFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Main landing page and entry point for the project.</p>
                                    <p><strong>What it does:</strong></p>
                                    <ol>
                                        <li>Displays project overview and features</li>
                                        <li>Provides navigation to all sections (Overview, Features, Technologies, Demo, Download, Installation)</li>
                                        <li>Links to Dashboard, Explorer, and API documentation</li>
                                        <li>Includes download section for the dataset ZIP</li>
                                    </ol>
                                    <p><strong>How to use:</strong></p>
                                    <ol>
                                        <li>Open <code>index.html</code> in a browser</li>
                                        <li>Or access via server: <code>http://localhost:3000/index.html</code></li>
                                        <li>Click navigation links to jump to different sections</li>
                                        <li>Use "Download Dataset" button to download ZIP file</li>
                                        <li>Click "Dashboard", "Data Explorer", or "API Docs" to access advanced features</li>
                                    </ol>
                                    <p><strong>Dependencies:</strong> Requires <code>assets/css/style.css</code> and <code>assets/js/main.js</code></p>
                                </div>
                            </div>
                        </div>

                        <!-- dashboard.html -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#dashboardHtml">
                                    <strong>dashboard.html</strong> - Analytics Dashboard
                                </button>
                            </h2>
                            <div id="dashboardHtml" class="accordion-collapse collapse" data-bs-parent="#htmlFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Interactive analytics dashboard with charts and statistics.</p>
                                    <p><strong>What it does:</strong></p>
                                    <ol>
                                        <li>Displays key statistics cards (Total Games, Players, Events, Duration)</li>
                                        <li>Shows interactive charts (Events Distribution, Sports Coverage, Performance Metrics)</li>
                                        <li>Lists top performers</li>
                                        <li>Displays games data table with export functionality</li>
                                    </ol>
                                    <p><strong>How to use - Step by Step:</strong></p>
                                    <ol>
                                        <li><strong>Access:</strong> Open <code>dashboard.html</code> or navigate to <code>http://localhost:3000/dashboard.html</code></li>
                                        <li><strong>View Statistics:</strong> Top cards show summary statistics automatically</li>
                                        <li><strong>View Charts:</strong> Scroll down to see interactive charts (hover for details)</li>
                                        <li><strong>View Top Performers:</strong> Check the right sidebar for top 5 players</li>
                                        <li><strong>View Games Table:</strong> Scroll to bottom to see all games in a table</li>
                                        <li><strong>Export Data:</strong> Click "Export CSV" or "Export JSON" buttons to download data</li>
                                    </ol>
                                    <p><strong>Data Loading Process:</strong></p>
                                    <ol>
                                        <li>Page loads → JavaScript runs <code>loadDashboardData()</code></li>
                                        <li>Fetches <code>data/metadata/games_metadata.json</code></li>
                                        <li>For each game, loads events from <code>data/annotations/events_*.json</code></li>
                                        <li>Loads performance data from <code>data/annotations/performance_metrics_001.csv</code></li>
                                        <li>Renders charts using Chart.js library</li>
                                        <li>Updates all statistics and tables</li>
                                    </ol>
                                    <p><strong>Dependencies:</strong> <code>assets/css/dashboard.css</code>, <code>assets/js/dashboard.js</code>, Chart.js CDN</p>
                                </div>
                            </div>
                        </div>

                        <!-- explorer.html -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#explorerHtml">
                                    <strong>explorer.html</strong> - Data Explorer
                                </button>
                            </h2>
                            <div id="explorerHtml" class="accordion-collapse collapse" data-bs-parent="#htmlFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Advanced search and filter interface for exploring the dataset.</p>
                                    <p><strong>What it does:</strong></p>
                                    <ol>
                                        <li>Provides search functionality across games, players, and events</li>
                                        <li>Filters by sport type, event type, and date range</li>
                                        <li>Displays filtered results in real-time</li>
                                        <li>Shows quick statistics sidebar</li>
                                        <li>Exports filtered results to JSON</li>
                                    </ol>
                                    <p><strong>How to use - Step by Step:</strong></p>
                                    <ol>
                                        <li><strong>Access:</strong> Open <code>explorer.html</code> or navigate to <code>http://localhost:3000/explorer.html</code></li>
                                        <li><strong>Search:</strong> Type keywords in "Search" box (searches player IDs, descriptions, game IDs)</li>
                                        <li><strong>Filter by Sport:</strong> Select sport type from dropdown (Football, Basketball, etc.)</li>
                                        <li><strong>Filter by Event:</strong> Select event type (goal, foul, substitution, etc.)</li>
                                        <li><strong>Filter by Date:</strong> Select date range using "Date From" and "Date To" fields</li>
                                        <li><strong>Apply Filters:</strong> Click search button or press Enter</li>
                                        <li><strong>View Results:</strong> Filtered results appear below with event details</li>
                                        <li><strong>Clear Filters:</strong> Click "Clear Filters" to reset</li>
                                        <li><strong>Export:</strong> Click "Export JSON" to download filtered results</li>
                                    </ol>
                                    <p><strong>Data Loading:</strong> Loads all games, events, and tracking data on page load for fast filtering</p>
                                    <p><strong>Dependencies:</strong> <code>assets/css/explorer.css</code>, <code>assets/js/explorer.js</code></p>
                                </div>
                            </div>
                        </div>

                        <!-- api.html -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#apiHtml">
                                    <strong>api.html</strong> - API Documentation
                                </button>
                            </h2>
                            <div id="apiHtml" class="accordion-collapse collapse" data-bs-parent="#htmlFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Complete REST API documentation with examples.</p>
                                    <p><strong>What it contains:</strong></p>
                                    <ol>
                                        <li>Base URL information</li>
                                        <li>All API endpoints with descriptions</li>
                                        <li>Request/response examples</li>
                                        <li>Code examples in JavaScript, Python, and cURL</li>
                                        <li>How to start the API server</li>
                                    </ol>
                                    <p><strong>How to use:</strong></p>
                                    <ol>
                                        <li>Open <code>api.html</code> in browser</li>
                                        <li>Read endpoint descriptions</li>
                                        <li>Copy code examples for your language</li>
                                        <li>Use examples to integrate API into your applications</li>
                                    </ol>
                                    <p><strong>Dependencies:</strong> Prism.js for syntax highlighting</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- JavaScript Files -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="fas fa-code"></i> JavaScript Files - Detailed Guide</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="jsFilesAccordion">
                        <!-- main.js -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#mainJs">
                                    <strong>assets/js/main.js</strong> - Main JavaScript
                                </button>
                            </h2>
                            <div id="mainJs" class="accordion-collapse collapse show" data-bs-parent="#jsFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Core JavaScript functionality for the main homepage.</p>
                                    <p><strong>Functions:</strong></p>
                                    <ul>
                                        <li><code>DOMContentLoaded</code> - Runs when page loads</li>
                                        <li>Smooth scrolling for navigation links</li>
                                        <li>Scroll animations for cards and sections</li>
                                        <li>Navbar background change on scroll</li>
                                        <li>Download button click tracking</li>
                                    </ul>
                                    <p><strong>How it works:</strong></p>
                                    <ol>
                                        <li>Waits for page to fully load</li>
                                        <li>Finds all anchor links starting with "#"</li>
                                        <li>Adds smooth scroll behavior when clicked</li>
                                        <li>Sets up Intersection Observer for scroll animations</li>
                                        <li>Monitors scroll position to change navbar styling</li>
                                    </ol>
                                    <p><strong>Usage:</strong> Automatically loaded by <code>index.html</code>, no manual configuration needed</p>
                                </div>
                            </div>
                        </div>

                        <!-- dashboard.js -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#dashboardJs">
                                    <strong>assets/js/dashboard.js</strong> - Dashboard Logic
                                </button>
                            </h2>
                            <div id="dashboardJs" class="accordion-collapse collapse" data-bs-parent="#jsFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Handles all dashboard functionality and data visualization.</p>
                                    <p><strong>Key Functions:</strong></p>
                                    <ul>
                                        <li><code>loadDashboardData()</code> - Main function to load all data</li>
                                        <li><code>parseCSV()</code> - Parses CSV performance metrics</li>
                                        <li><code>updateStatistics()</code> - Updates stat cards</li>
                                        <li><code>renderCharts()</code> - Creates Chart.js visualizations</li>
                                        <li><code>renderGamesTable()</code> - Populates games table</li>
                                        <li><code>renderTopPerformers()</code> - Shows top 5 players</li>
                                        <li><code>exportData()</code> - Exports data as CSV/JSON</li>
                                    </ul>
                                    <p><strong>Step-by-Step Data Flow:</strong></p>
                                    <ol>
                                        <li><strong>Page Load:</strong> <code>loadDashboardData()</code> is called</li>
                                        <li><strong>Fetch Metadata:</strong> Gets <code>games_metadata.json</code></li>
                                        <li><strong>Loop Through Games:</strong> For each game, fetch events JSON file</li>
                                        <li><strong>Parse Events:</strong> Extract events array from each JSON</li>
                                        <li><strong>Fetch Performance:</strong> Load CSV file and parse it</li>
                                        <li><strong>Update UI:</strong> Call <code>updateStatistics()</code> to update cards</li>
                                        <li><strong>Render Charts:</strong> Call <code>renderCharts()</code> with data</li>
                                        <li><strong>Populate Tables:</strong> Call <code>renderGamesTable()</code> and <code>renderTopPerformers()</code></li>
                                    </ol>
                                    <p><strong>Chart Types Used:</strong></p>
                                    <ul>
                                        <li>Doughnut chart for events distribution</li>
                                        <li>Bar chart for sports coverage</li>
                                        <li>Line chart for performance metrics</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- explorer.js -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#explorerJs">
                                    <strong>assets/js/explorer.js</strong> - Explorer Logic
                                </button>
                            </h2>
                            <div id="explorerJs" class="accordion-collapse collapse" data-bs-parent="#jsFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Handles search, filtering, and data exploration functionality.</p>
                                    <p><strong>Key Functions:</strong></p>
                                    <ul>
                                        <li><code>loadData()</code> - Loads all games, events, and players data</li>
                                        <li><code>applyFilters()</code> - Applies search and filter criteria</li>
                                        <li><code>displayResults()</code> - Shows filtered results</li>
                                        <li><code>clearFilters()</code> - Resets all filters</li>
                                        <li><code>exportResults()</code> - Exports filtered data</li>
                                        <li><code>updateQuickStats()</code> - Updates statistics sidebar</li>
                                    </ul>
                                    <p><strong>How Filtering Works:</strong></p>
                                    <ol>
                                        <li>User enters search term or selects filters</li>
                                        <li><code>applyFilters()</code> function is triggered</li>
                                        <li>Creates a copy of all events data</li>
                                        <li>Applies each filter condition sequentially:
                                            <ul>
                                                <li>Text search (searches player_id, description, game_id)</li>
                                                <li>Sport filter (matches exact sport type)</li>
                                                <li>Event type filter (matches event_type field)</li>
                                                <li>Date range filter (filters by date field)</li>
                                            </ul>
                                        </li>
                                        <li>Filtered array is passed to <code>displayResults()</code></li>
                                        <li>Results are rendered as HTML cards</li>
                                        <li>Result count is updated</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- CSS Files -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-paint-brush"></i> CSS Files - Styling Guide</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="cssFilesAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#styleCss">
                                    <strong>assets/css/style.css</strong> - Main Stylesheet
                                </button>
                            </h2>
                            <div id="styleCss" class="accordion-collapse collapse show" data-bs-parent="#cssFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Core styling for the entire website.</p>
                                    <p><strong>Key Styles:</strong></p>
                                    <ul>
                                        <li>Hero section gradient background</li>
                                        <li>Tech badge hover effects</li>
                                        <li>Card hover animations</li>
                                        <li>Custom scrollbar styling</li>
                                        <li>Responsive design breakpoints</li>
                                    </ul>
                                    <p><strong>Color Variables:</strong></p>
                                    <ul>
                                        <li><code>--primary-color</code>: #0d6efd (Blue)</li>
                                        <li><code>--secondary-color</code>: #6c757d (Gray)</li>
                                        <li><code>--dark-color</code>: #212529 (Dark)</li>
                                        <li><code>--light-color</code>: #f8f9fa (Light)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#dashboardCss">
                                    <strong>assets/css/dashboard.css</strong> - Dashboard Styles
                                </button>
                            </h2>
                            <div id="dashboardCss" class="accordion-collapse collapse" data-bs-parent="#cssFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Specific styles for the dashboard page.</p>
                                    <p><strong>Key Components:</strong></p>
                                    <ul>
                                        <li><code>.stat-card</code> - Statistics card styling with hover effects</li>
                                        <li><code>.stat-icon</code> - Icon containers with colored backgrounds</li>
                                        <li><code>.performer-item</code> - Top performers list item styling</li>
                                        <li>Table styling for games data</li>
                                        <li>Responsive adjustments for mobile</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#explorerCss">
                                    <strong>assets/css/explorer.css</strong> - Explorer Styles
                                </button>
                            </h2>
                            <div id="explorerCss" class="accordion-collapse collapse" data-bs-parent="#cssFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Styles for the data explorer page.</p>
                                    <p><strong>Key Components:</strong></p>
                                    <ul>
                                        <li><code>.result-item</code> - Search result item styling</li>
                                        <li><code>.event-card</code> - Event card with color-coded borders</li>
                                        <li><code>.quick-stat-item</code> - Statistics sidebar items</li>
                                        <li>Color coding for different event types</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Data Files -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="fas fa-database"></i> Data Files - Complete Guide</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="dataFilesAccordion">
                        <!-- games_metadata.json -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#gamesMetadata">
                                    <strong>data/metadata/games_metadata.json</strong> - Games Metadata
                                </button>
                            </h2>
                            <div id="gamesMetadata" class="accordion-collapse collapse show" data-bs-parent="#dataFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Central metadata file containing information about all games in the dataset.</p>
                                    <p><strong>Structure:</strong></p>
                                    <pre class="bg-light p-3 rounded"><code>{
  "dataset_info": {
    "name": "Sports Analysis Dataset",
    "version": "1.0.0",
    "total_games": 2,
    ...
  },
  "games": [
    {
      "game_id": "game_001",
      "sport": "Football",
      "date": "2026-01-15",
      "tracking_file": "data/annotations/tracking_001.json",
      "events_file": "data/annotations/events_001.json",
      ...
    }
  ]
}</code></pre>
                                    <p><strong>How to Use:</strong></p>
                                    <ol>
                                        <li><strong>View:</strong> Open in any text editor or JSON viewer</li>
                                        <li><strong>Edit:</strong> Modify game information, add new games, update file paths</li>
                                        <li><strong>Add New Game:</strong> Copy a game object, change game_id, update file references</li>
                                        <li><strong>File Paths:</strong> All paths are relative to project root (must start with "data/")</li>
                                    </ol>
                                    <p><strong>Important Fields:</strong></p>
                                    <ul>
                                        <li><code>game_id</code> - Unique identifier (must match file names)</li>
                                        <li><code>tracking_file</code> - Path to tracking JSON file</li>
                                        <li><code>events_file</code> - Path to events JSON file</li>
                                        <li><code>performance_file</code> - Path to CSV file (can be null)</li>
                                    </ol>
                                </div>
                            </div>
                        </div>

                        <!-- tracking files -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trackingFiles">
                                    <strong>data/annotations/tracking_*.json</strong> - Player Tracking Data
                                </button>
                            </h2>
                            <div id="trackingFiles" class="accordion-collapse collapse" data-bs-parent="#dataFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Contains player position tracking data for each game.</p>
                                    <p><strong>Files:</strong></p>
                                    <ul>
                                        <li><code>tracking_001.json</code> - Football game tracking</li>
                                        <li><code>tracking_002.json</code> - Basketball game tracking</li>
                                    </ul>
                                    <p><strong>Structure:</strong></p>
                                    <pre class="bg-light p-3 rounded"><code>{
  "game_id": "game_001",
  "sport": "Football",
  "players": [
    {
      "player_id": "P001",
      "team": "Team Red",
      "position": { "x": 320, "y": 180 },
      "timestamp": 0.0,
      "jersey_number": 10
    }
  ],
  "ball_position": [...]
}</code></pre>
                                    <p><strong>How to Use:</strong></p>
                                    <ol>
                                        <li><strong>View Data:</strong> Open JSON file to see player positions over time</li>
                                        <li><strong>Add Tracking Points:</strong> Add new objects to players array with timestamp and position</li>
                                        <li><strong>Position Format:</strong> x and y coordinates (pixel coordinates from video)</li>
                                        <li><strong>Timestamp:</strong> Time in seconds from game start</li>
                                    </ol>
                                    <p><strong>Usage in Code:</strong> Loaded by dashboard.js and explorer.js to visualize player movements</p>
                                </div>
                            </div>
                        </div>

                        <!-- events files -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#eventsFiles">
                                    <strong>data/annotations/events_*.json</strong> - Event Annotations
                                </button>
                            </h2>
                            <div id="eventsFiles" class="accordion-collapse collapse" data-bs-parent="#dataFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Contains annotated game events (goals, fouls, substitutions, etc.)</p>
                                    <p><strong>Files:</strong></p>
                                    <ul>
                                        <li><code>events_001.json</code> - Football events (5 events)</li>
                                        <li><code>events_002.json</code> - Basketball events (2 events)</li>
                                    </ul>
                                    <p><strong>Structure:</strong></p>
                                    <pre class="bg-light p-3 rounded"><code>{
  "game_id": "game_001",
  "events": [
    {
      "event_id": "E001",
      "event_type": "goal",
      "timestamp": 125.5,
      "player_id": "P002",
      "team": "Team Red",
      "location": { "x": 750, "y": 240 },
      "description": "Goal scored by P002",
      "video_timestamp": "00:02:05"
    }
  ]
}</code></pre>
                                    <p><strong>Event Types:</strong> goal, foul, substitution, penalty, timeout</p>
                                    <p><strong>How to Add Events:</strong></p>
                                    <ol>
                                        <li>Open events JSON file</li>
                                        <li>Add new object to events array</li>
                                        <li>Include all required fields (event_id, event_type, timestamp, etc.)</li>
                                        <li>Save file - dashboard and explorer will automatically pick up new events</li>
                                    </ol>
                                </div>
                            </div>
                        </div>

                        <!-- performance CSV -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#performanceCsv">
                                    <strong>data/annotations/performance_metrics_001.csv</strong> - Performance Data
                                </button>
                            </h2>
                            <div id="performanceCsv" class="accordion-collapse collapse" data-bs-parent="#dataFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> CSV file containing player performance metrics.</p>
                                    <p><strong>Columns:</strong></p>
                                    <ul>
                                        <li><code>player_id</code> - Player identifier</li>
                                        <li><code>team</code> - Team name</li>
                                        <li><code>jersey_number</code> - Jersey number</li>
                                        <li><code>distance_covered_km</code> - Total distance in kilometers</li>
                                        <li><code>speed_avg_kmh</code> - Average speed km/h</li>
                                        <li><code>speed_max_kmh</code> - Maximum speed km/h</li>
                                        <li><code>acceleration_avg_ms2</code> - Average acceleration</li>
                                        <li><code>heart_rate_avg_bpm</code> - Average heart rate</li>
                                        <li><code>heart_rate_max_bpm</code> - Maximum heart rate</li>
                                        <li><code>time_played_minutes</code> - Playing time</li>
                                    </ul>
                                    <p><strong>How to Edit:</strong></p>
                                    <ol>
                                        <li>Open in Excel, Google Sheets, or text editor</li>
                                        <li>Add new rows for additional players</li>
                                        <li>Update values in existing rows</li>
                                        <li>Save as CSV format (comma-separated)</li>
                                        <li>First line is header - don't delete it</li>
                                    </ol>
                                    <p><strong>Usage:</strong> Loaded by dashboard.js and parsed to show performance charts</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Server and Configuration Files -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0"><i class="fas fa-server"></i> Server & Configuration Files</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="configFilesAccordion">
                        <!-- server.js -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#serverJs">
                                    <strong>server.js</strong> - API Server
                                </button>
                            </h2>
                            <div id="serverJs" class="accordion-collapse collapse show" data-bs-parent="#configFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Node.js Express server providing REST API endpoints.</p>
                                    <p><strong>How to Run:</strong></p>
                                    <ol>
                                        <li>Ensure dependencies installed: <code>npm install</code></li>
                                        <li>Run: <code>npm start</code> or <code>node server.js</code></li>
                                        <li>Server starts on <code>http://localhost:3000</code></li>
                                        <li>API available at <code>http://localhost:3000/api</code></li>
                                    </ol>
                                    <p><strong>Endpoints Provided:</strong></p>
                                    <ul>
                                        <li><code>GET /api/games</code> - Returns all games</li>
                                        <li><code>GET /api/games/:gameId</code> - Returns specific game</li>
                                        <li><code>GET /api/events?gameId=&eventType=&sport=</code> - Filtered events</li>
                                        <li><code>GET /api/tracking/:gameId</code> - Tracking data</li>
                                        <li><code>GET /api/stats</code> - Statistics</li>
                                        <li><code>GET /api/performance/:gameId?</code> - Performance metrics</li>
                                    </ul>
                                    <p><strong>Key Functions:</strong></p>
                                    <ul>
                                        <li><code>loadJSON()</code> - Reads and parses JSON files</li>
                                        <li><code>parseCSV()</code> - Parses CSV files</li>
                                        <li>Error handling for missing files</li>
                                        <li>CORS enabled for cross-origin requests</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- package.json -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#packageJson">
                                    <strong>package.json</strong> - Node.js Configuration
                                </button>
                            </h2>
                            <div id="packageJson" class="accordion-collapse collapse" data-bs-parent="#configFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Defines project metadata, dependencies, and scripts.</p>
                                    <p><strong>Key Sections:</strong></p>
                                    <ul>
                                        <li><code>dependencies</code> - Production packages (express, cors)</li>
                                        <li><code>devDependencies</code> - Development tools (http-server)</li>
                                        <li><code>scripts</code> - NPM commands:
                                            <ul>
                                                <li><code>npm start</code> - Runs API server</li>
                                                <li><code>npm run serve</code> - Runs HTTP server</li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <p><strong>How to Modify:</strong></p>
                                    <ol>
                                        <li>Edit <code>package.json</code> in text editor</li>
                                        <li>Add/remove dependencies in appropriate section</li>
                                        <li>Run <code>npm install</code> to update packages</li>
                                    </ol>
                                </div>
                            </div>
                        </div>

                        <!-- config.json -->
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#configJson">
                                    <strong>config.json</strong> - Project Configuration
                                </button>
                            </h2>
                            <div id="configJson" class="accordion-collapse collapse" data-bs-parent="#configFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Stores project configuration and metadata in JSON format.</p>
                                    <p><strong>Contents:</strong></p>
                                    <ul>
                                        <li>Project details (id, title, category, description)</li>
                                        <li>Technologies array</li>
                                        <li>Features list</li>
                                        <li>File paths and links</li>
                                        <li>Contact information</li>
                                    </ul>
                                    <p><strong>Usage:</strong> Can be loaded by other applications or scripts to get project information programmatically</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Python Example Files -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0"><i class="fab fa-python"></i> Python Example Files - Usage Guide</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="pythonFilesAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#exampleTracking">
                                    <strong>examples/example_tracking.py</strong> - Tracking Example
                                </button>
                            </h2>
                            <div id="exampleTracking" class="accordion-collapse collapse show" data-bs-parent="#pythonFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Demonstrates how to load and visualize player tracking data.</p>
                                    <p><strong>How to Run:</strong></p>
                                    <ol>
                                        <li>Install dependencies: <code>pip install opencv-python numpy</code></li>
                                        <li>Navigate to examples folder: <code>cd examples</code></li>
                                        <li>Run script: <code>python example_tracking.py</code></li>
                                        <li>Adjust video path in code if needed (currently set to <code>../data/videos/game_001.mp4</code>)</li>
                                    </ol>
                                    <p><strong>What it does:</strong></p>
                                    <ul>
                                        <li>Loads tracking JSON file</li>
                                        <li>Opens video file (requires OpenCV)</li>
                                        <li>Draws player positions on video frames</li>
                                        <li>Displays tracking visualization</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleEvents">
                                    <strong>examples/example_events.py</strong> - Events Example
                                </button>
                            </h2>
                            <div id="exampleEvents" class="accordion-collapse collapse" data-bs-parent="#pythonFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Shows how to analyze and filter event data.</p>
                                    <p><strong>How to Run:</strong></p>
                                    <ol>
                                        <li>Navigate to examples: <code>cd examples</code></li>
                                        <li>Run: <code>python example_events.py</code></li>
                                        <li>View console output with statistics</li>
                                    </ol>
                                    <p><strong>Functions:</strong></p>
                                    <ul>
                                        <li><code>load_events()</code> - Loads events JSON</li>
                                        <li><code>analyze_events()</code> - Calculates statistics</li>
                                        <li><code>filter_events_by_type()</code> - Filters by event type</li>
                                        <li><code>print_statistics()</code> - Displays results</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#statisticsCalc">
                                    <strong>examples/statistics_calculator.py</strong> - Statistics Calculator
                                </button>
                            </h2>
                            <div id="statisticsCalc" class="accordion-collapse collapse" data-bs-parent="#pythonFilesAccordion">
                                <div class="accordion-body">
                                    <p><strong>Purpose:</strong> Advanced statistics calculator with comprehensive analysis.</p>
                                    <p><strong>How to Run:</strong></p>
                                    <ol>
                                        <li>Navigate to examples: <code>cd examples</code></li>
                                        <li>Run: <code>python statistics_calculator.py</code></li>
                                        <li>Output: Generates <code>statistics_report.json</code></li>
                                    </ol>
                                    <p><strong>Features:</strong></p>
                                    <ul>
                                        <li>Calculates player distances</li>
                                        <li>Computes average speeds</li>
                                        <li>Analyzes event statistics</li>
                                        <li>Generates performance metrics</li>
                                        <li>Exports comprehensive reports</li>
                                    </ul>
                                    <p><strong>Class Methods:</strong></p>
                                    <ul>
                                        <li><code>calculate_player_distances()</code></li>
                                        <li><code>calculate_average_speed()</code></li>
                                        <li><code>calculate_event_statistics()</code></li>
                                        <li><code>calculate_performance_statistics()</code></li>
                                        <li><code>generate_comprehensive_report()</code></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Documentation Files -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0"><i class="fas fa-book"></i> Documentation Files</h5>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>File</th>
                                <th>Purpose</th>
                                <th>How to Use</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>README.md</code></td>
                                <td>Main project documentation</td>
                                <td>Open in Markdown viewer or text editor</td>
                            </tr>
                            <tr>
                                <td><code>CHANGELOG.md</code></td>
                                <td>Version history and changes</td>
                                <td>View to see what's new in each version</td>
                            </tr>
                            <tr>
                                <td><code>CONTRIBUTING.md</code></td>
                                <td>Guidelines for contributing</td>
                                <td>Read before contributing to the project</td>
                            </tr>
                            <tr>
                                <td><code>LICENSE</code></td>
                                <td>MIT License terms</td>
                                <td>Legal information about usage rights</td>
                            </tr>
                            <tr>
                                <td><code>docs/API.md</code></td>
                                <td>Detailed API documentation</td>
                                <td>Reference for API endpoint details</td>
                            </tr>
                            <tr>
                                <td><code>PROJECT_SUMMARY.md</code></td>
                                <td>Project overview summary</td>
                                <td>Quick reference for project structure</td>
                            </tr>
                            <tr>
                                <td><code>DATA_SUMMARY.md</code></td>
                                <td>Dataset contents summary</td>
                                <td>Overview of data files and structure</td>
                            </tr>
                            <tr>
                                <td><code>ADVANCED_FEATURES.md</code></td>
                                <td>Advanced features documentation</td>
                                <td>Guide to advanced functionality</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Scripts -->
            <div class="card shadow-sm mb-5">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-tools"></i> Utility Scripts</h5>
                </div>
                <div class="card-body">
                    <p><strong>scripts/create_dataset_zip.py</strong> - Creates the dataset ZIP archive</p>
                    <p><strong>How to Run:</strong></p>
                    <ul>
                        <li><strong>Windows:</strong> <code>python scripts\create_dataset_zip.py</code> or double-click <code>scripts\create_dataset_zip.bat</code></li>
                        <li><strong>Linux/Mac:</strong> <code>python3 scripts/create_dataset_zip.py</code> or <code>bash scripts/create_dataset_zip.sh</code></li>
                    </ul>
                    <p><strong>What it does:</strong></p>
                    <ol>
                        <li>Scans project directory for data files</li>
                        <li>Includes annotations, metadata, documentation</li>
                        <li>Excludes large video files</li>
                        <li>Creates <code>sports-analysis.zip</code> in project root</li>
                        <li>Shows progress and file count</li>
                    </ol>
                </div>
            </div>
            </div>
        </div>
    </section>

    <footer class="bg-dark text-white py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5><i class="fas fa-video text-secondary"></i> Sports Analysis Dataset</h5>
                    <p class="mb-0">A comprehensive sports video dataset for analytics and AI applications.</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="mb-1"><strong>RSK World</strong></p>
                    <p class="mb-1">
                        <i class="fas fa-envelope"></i> help@rskworld.in<br>
                        <i class="fas fa-phone"></i> +91 93305 39277<br>
                        <i class="fas fa-globe"></i> <a href="https://rskworld.in/" class="text-white">rskworld.in</a>
                    </p>
                </div>
            </div>
            <hr class="my-3">
            <div class="text-center">
                <p class="mb-0">
                    &copy; 2026 RSK World. All rights reserved. | 
                    Founder: Molla Samser | Designer & Tester: Rima Khatun
                </p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/main.js"></script>
</body>
</html>
1,540 lines•95.9 KB
markup
🚀 Support RSK World

Subscribe to our YouTube channel for latest tutorials & updates!



Click subscribe & support our work ❤️

About RSK World

Founded by Molla Samser, with Designer & Tester Rima Khatun, RSK World is your one-stop destination for free programming resources, source code, and development tools.

Founder: Molla Samser
Designer & Tester: Rima Khatun

Development

  • Game Development
  • Web Development
  • Mobile Development
  • AI Development
  • Development Tools

Legal

  • Terms & Conditions
  • Privacy Policy
  • Disclaimer

Contact Info

Nutanhat, Mongolkote
Purba Burdwan, West Bengal
India, 713147

+91 93305 39277

hello@rskworld.in
support@rskworld.in

© 2026 RSK World. All rights reserved.

Content used for educational purposes only. View Disclaimer