templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Next2Play</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <div id="notificationBar"></div>

    <div class="header-container">
        <div class="main-header">
            <h1 class="desktop-title">Next2Play</h1>
            
            {% if not is_view_only %}
            <div id="game-form">
                <button id="recentGamesBtn" onclick="toggleRecentGames()">Recently Added</button>
                <input type="text" id="GameName" name="GameName" placeholder="Enter game name" required>
                <button onclick="submitGameForm()">Add Game</button>
                <button onclick="getRandomGame()">Random Game</button>
                <button onclick="updateGames()">Update Games</button>
                <button onclick="toggleOptionsMenu()" class="options-btn">Options</button>
                <button onclick="window.location.href='/stats'" class="stats-btn">View Stats</button>
            </div>
            {% endif %}
            <div class="logout-container">
                <button onclick="window.location.href='/logout'" class="logout-btn">Logout</button>
            </div>
        </div>
    </div>

    <div id="recentGamesPanel" class="recent-games-panel">
        <div class="recent-games-content">
            <div class="recent-games-header">
                <h3>Recently Added</h3>
                <button class="close-button" onclick="toggleRecentGames()">&times;</button>
            </div>
            <div id="recentGamesList"></div>
        </div>
    </div>

    <div class="mobile-header">
        <button class="menu-toggle" onclick="toggleMobileMenu()">
            <span></span>
            <span></span>
            <span></span>
        </button>
        <h1>Next2Play</h1>
    </div>

    <div class="mobile-menu">
        {% if not is_view_only %}
        <input type="text" id="GameNameMobile" name="GameName" placeholder="Enter game name" required>
        <button onclick="submitGameForm()">Add Game</button>
        <button onclick="getRandomGame()">Random Game</button>
        <button onclick="updateGames()">Update Games</button>
        <button onclick="toggleOptionsMenu()" class="options-btn">Options</button>
        <button onclick="window.location.href='/stats'" class="stats-btn">View Stats</button>
        {% endif %}
        <button onclick="window.location.href='/logout'" class="logout-btn">Logout</button>
    </div>

    <div id="game-grid">
        <div id="sentinel"></div>
        {% for game in games[:20] %}
        <div class="game-card status-{{ game['ProgressStatus'].replace(' ', '-').lower() }}" data-game-id="{{ game['GameID'] }}">
            {% if game['ReleaseYear'] %}
            <div class="release-year">{{ game['ReleaseYear'] }}</div>
            {% endif %}
            <img src="{{ game['ImageURL'] }}" alt="{{ game['GameName'] }}" class="game-poster" loading="lazy" decoding="async" width="150" height="225">
            <div class="game-info">
                <div class="game-title">{{ game['GameName'] }}</div>
                <div class="game-hltb">How Long to Beat: {{ game['HowLongToBeat'] }}{% if game['HowLongToBeat'] != "Unreleased" %} hours{% endif %}</div>
                {% if not is_view_only %}
                <select onchange="updateProgressStatus({{ game['GameID'] }}, this.value)">
                    <option value="Not Started" {% if game['ProgressStatus'] == 'Not Started' %}selected{% endif %}>Not Started</option>
                    <option value="In Progress" {% if game['ProgressStatus'] == 'In Progress' %}selected{% endif %}>In Progress</option>
                    <option value="Complete" {% if game['ProgressStatus'] == 'Complete' %}selected{% endif %}>Complete</option>
                    <option value="Tabled" {% if game['ProgressStatus'] == 'Tabled' %}selected{% endif %}>Tabled</option>
                </select>
                <button class="delete-btn" onclick="deleteGame({{ game['GameID'] }})">Delete</button>
                {% else %}
                <div class="game-status">Status: {{ game['ProgressStatus'] }}</div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="popup-overlay" id="gameSelectionPopup">
        <div class="popup-content">
            <h2>Select Game Version</h2>
            <div id="gameOptions"></div>
            <button onclick="closeGameSelection()">Cancel</button>
        </div>
    </div>

    <div class="menu-overlay" onclick="toggleMobileMenu()"></div>

    <div class="options-popup">
        <div class="options-content">
            <h3>Display Options</h3>
            <div class="option-item">
                <input type="checkbox" id="hideCompleted" onchange="updateDisplayOptions()">
                <label for="hideCompleted">Hide Completed Games</label>
            </div>
            <div class="option-item">
                <input type="checkbox" id="hideTabled" onchange="updateDisplayOptions()">
                <label for="hideTabled">Hide Tabled Games</label>
            </div>
            <button onclick="toggleOptionsMenu()">Close</button>
        </div>
    </div>

    <script>
        let games = [
            {% for game in games %}
            {
                GameID: {{ game['GameID'] }},
                GameName: "{{ game['GameName'] }}",
                ImageURL: "{{ game['ImageURL'] }}",
                HowLongToBeat: "{{ game['HowLongToBeat'] }}",
                ProgressStatus: "{{ game['ProgressStatus'] }}",
                ReleaseYear: {{ game['ReleaseYear'] if game['ReleaseYear'] else 'null' }}
            },
            {% endfor %}
        ];
        
        const IS_VIEW_ONLY = {{ 'true' if is_view_only else 'false' }};
    </script>
    <script src="{{ url_for('static', filename='js/index.js') }}"></script>
</body>
</html>