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
/
data
/
metadata
RSK World
sports-analysis
Sports Analysis Dataset - Game Footage + Player Tracking + Event Annotations + OpenCV + Video Analysis
metadata
  • games_metadata.json1.7 KB
index.htmlapi_server.cpython-313.pyc
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

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