GameSentenceMiner 2.17.7__py3-none-any.whl → 2.18.0__py3-none-any.whl

GameSentenceMiner/web/stats.py

@@ -48,8 +48,8 @@ def get_gradient_color(frequency, max_frequency):
     if max_frequency == 0:
         return "#ebedf0"  # Default color for no encounters
     
-    # kanji with 500+ encounters should always get cyan color cause i think u should know them
-    if frequency > 500:
+    # kanji with 300+ encounters should always get cyan color cause i think u should know them
+    if frequency > 300:
         return "#2ee6e0"
     
     # Normalize frequency to 0-1 range with square root transformation

GameSentenceMiner/web/templates/anki_stats.html

@@ -17,6 +17,10 @@
     <!-- Include shared CSS -->
     <link rel="stylesheet" href="/static/css/shared.css">
     
+    <!-- Include shared dashboard and popup CSS -->
+    <link rel="stylesheet" href="/static/css/dashboard-shared.css">
+    <link rel="stylesheet" href="/static/css/popups-shared.css">
+    
     <!-- Include stats-specific CSS -->
     <link rel="stylesheet" href="/static/css/stats.css">
     
@@ -81,6 +85,7 @@
                         Missing High-Frequency Kanji
                     </h3>
                     <p class="dashboard-card-subtitle">Kanji seen often in GSM but not present in your Anki collection</p>
+                    <p class="dashboard-card-subtitle">Note: Please Sort By frequency, as grey means the Kanji might be in your Anki</p>
                 </div>
                 <div class="dashboard-streak-indicator" id="missingKanjiStreak" style="display: none;">
                     <span id="missingStreakValue">0</span> to learn

GameSentenceMiner/web/templates/components/navigation.html

@@ -2,10 +2,12 @@
 <div class="navigation" style="display: flex; justify-content: center; align-items: center; margin-bottom: 30px; padding: 15px; background: var(--bg-secondary); border-radius: 8px; box-shadow: 0 2px 8px var(--shadow-color); border: 1px solid var(--border-color);">
     <div style="display: flex; gap: 15px;">
         <!-- <a href="/" class="nav-link">Home</a> -->
+        <a href="/overview" class="nav-link">Overview</a>
         <a href="/stats" class="nav-link">Statistics</a>
+        <a href="/goals" class="nav-link">Goals</a>
+        <a href="/anki_stats" class="nav-link">Anki Stats</a>
         <a href="/search" class="nav-link">Search</a>
         <a href="/database" class="nav-link">Database Management</a>
-        <a href="/anki_stats" class="nav-link">Anki Stats</a>
     </div>
     <button class="theme-toggle" id="settingsToggle" title="Settings">
         <span id="settingsIcon">⚙️</span>

GameSentenceMiner/web/templates/database.html

@@ -95,11 +95,19 @@
 <div id="gamesDeletionModal" class="modal">
     <div class="modal-content" style="max-width: 800px;">
         <div class="modal-header">
-            <h3>Delete Games</h3>
+            <h3>Manage Games</h3>
             <span class="close-btn" data-action="closeModal" data-modal="gamesDeletionModal">&times;</span>
         </div>
         <div class="modal-body">
             <p class="warning-text">Select games to delete. This will permanently remove all associated sentences and data.</p>
+
+            <p class="warning-text">When Merging, the first selected game will be the target for all merged data.</p>
+            
+            <div style="margin-bottom: 15px; padding: 10px; background: var(--bg-tertiary); border-radius: 5px; border-left: 4px solid var(--accent-color);">
+                <small style="color: var(--text-secondary); font-size: 13px;">
+                    <strong>Note:</strong> Game names come from the OBS Scene, to change the name for future stats, change the scene name in OBS.
+                </small>
+            </div>
             
             <div id="gamesLoadingIndicator" class="loading-indicator">
                 <div class="spinner"></div>
@@ -118,6 +126,7 @@
         </div>
         <div class="modal-footer">
             <button class="action-btn" data-action="closeModal" data-modal="gamesDeletionModal">Cancel</button>
+            <button class="action-btn warning" id="mergeSelectedGamesBtn" data-action="mergeSelectedGames" disabled>Merge Selected Games</button>
             <button class="action-btn danger" id="deleteSelectedGamesBtn" data-action="deleteSelectedGames" disabled>Delete Selected</button>
         </div>
     </div>
@@ -272,6 +281,69 @@
     </div>
 </div>
 
+<!-- Game Merge Confirmation Modal -->
+<div id="gameMergeModal" class="modal">
+    <div class="modal-content" style="max-width: 700px;">
+        <div class="modal-header">
+            <h3>Confirm Game Merge</h3>
+            <span class="close-btn" data-action="closeModal" data-modal="gameMergeModal">&times;</span>
+        </div>
+        <div class="modal-body">
+            <p class="warning-text">
+                ⚠️ This action is irreversible! You are about to merge multiple games into a single game entry.
+            </p>
+            
+            <div class="merge-summary">
+                <h4 style="margin-bottom: 15px; color: var(--text-primary);">Merge Details:</h4>
+                
+                <div class="primary-game-info" style="background: var(--bg-tertiary); padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid var(--success-color);">
+                    <h5 style="margin: 0 0 10px 0; color: var(--success-color);">
+                        📁 Primary Game (will keep this name):
+                    </h5>
+                    <div id="primaryGameName" style="font-weight: 600; font-size: 16px; color: var(--text-primary);"></div>
+                    <div id="primaryGameStats" style="color: var(--text-secondary); font-size: 14px; margin-top: 5px;"></div>
+                </div>
+                
+                <div class="secondary-games-info" style="background: var(--bg-tertiary); padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid var(--warning-color);">
+                    <h5 style="margin: 0 0 10px 0; color: var(--warning-color);">
+                        🔄 Games to be merged (will be removed):
+                    </h5>
+                    <div id="secondaryGamesList" style="max-height: 150px; overflow-y: auto;"></div>
+                </div>
+                
+                <div class="merge-stats" style="background: var(--bg-secondary); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color);">
+                    <div class="stats-row">
+                        <span class="stats-label">Total sentences after merge:</span>
+                        <span class="stats-value" id="totalSentencesAfterMerge">0</span>
+                    </div>
+                    <div class="stats-row">
+                        <span class="stats-label">Total characters after merge:</span>
+                        <span class="stats-value" id="totalCharactersAfterMerge">0</span>
+                    </div>
+                    <div class="stats-row">
+                        <span class="stats-label">Games being consolidated:</span>
+                        <span class="stats-value" id="gamesBeingMerged">0</span>
+                    </div>
+                </div>
+            </div>
+            
+            <div id="mergeError" class="error-text" style="display: none;"></div>
+            <div id="mergeSuccess" class="success-text" style="display: none;"></div>
+            
+            <div id="mergeLoadingIndicator" class="loading-indicator" style="display: none;">
+                <div class="spinner"></div>
+                <span>Merging games...</span>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button class="action-btn" data-action="closeModal" data-modal="gameMergeModal">Cancel</button>
+            <button class="action-btn warning" id="confirmMergeBtn" data-action="confirmGameMerge">
+                🔀 Confirm Merge
+            </button>
+        </div>
+    </div>
+</div>
+
 <!-- Include shared JavaScript first (required dependency for database.js) -->
 <script src="/static/js/shared.js"></script>
 <script src="/static/js/database.js"></script>

GameSentenceMiner/web/templates/goals.html

@@ -0,0 +1,376 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GSM - Goals</title>
+    <!-- Include Chart.js from a CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+    <!-- Include html2canvas for screenshot functionality -->
+    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
+
+    <!-- Include shared theme styles -->
+    {% include 'components/theme-styles.html' %}
+
+    <!-- Include shared CSS -->
+    <link rel="stylesheet" href="/static/css/shared.css">
+    
+    <!-- Include shared dashboard and popup CSS -->
+    <link rel="stylesheet" href="/static/css/dashboard-shared.css">
+    <link rel="stylesheet" href="/static/css/popups-shared.css">
+
+    <!-- Include stats-specific CSS for goals -->
+    <link rel="stylesheet" href="/static/css/stats.css">
+</head>
+
+<body>
+
+    <div class="container">
+        <h1>GSM - Goals</h1>
+
+        <!-- Include shared navigation -->
+        {% include 'components/navigation.html' %}
+
+        <!-- Goal Progress Chart -->
+        <div class="dashboard-card goal-progress-chart" id="goalProgressChart" style="margin-bottom: 30px;">
+            <div class="dashboard-card-header">
+                <h3 class="dashboard-card-title">
+                    <span class="dashboard-card-icon">🎯</span>
+                    Goal Progress Chart
+                </h3>
+                <p class="dashboard-card-subtitle">Track your reading goals and projected completion dates</p>
+            </div>
+
+            <div class="goal-progress-grid">
+                <!-- Reading Hours Goal -->
+                <div class="goal-progress-item">
+                    <div class="goal-progress-header">
+                        <div class="goal-progress-label">
+                            <span class="goal-icon">⏱️</span>
+                            Reading Hours
+                        </div>
+                        <div class="goal-progress-values">
+                            <span class="goal-current" id="goalHoursCurrent">-</span>
+                            <span class="goal-separator">/</span>
+                            <span class="goal-target" id="goalHoursTarget">-</span>
+                        </div>
+                    </div>
+                    <div class="goal-progress-bar">
+                        <div class="goal-progress-fill" id="goalHoursProgress" data-percentage="0"></div>
+                    </div>
+                    <div class="goal-progress-info">
+                        <span class="goal-percentage" id="goalHoursPercentage">0%</span>
+                        <span class="goal-projection" id="goalHoursProjection">-</span>
+                    </div>
+                </div>
+
+                <!-- Character Count Goal -->
+                <div class="goal-progress-item">
+                    <div class="goal-progress-header">
+                        <div class="goal-progress-label">
+                            <span class="goal-icon">📖</span>
+                            Characters Read
+                        </div>
+                        <div class="goal-progress-values">
+                            <span class="goal-current" id="goalCharsCurrent">-</span>
+                            <span class="goal-separator">/</span>
+                            <span class="goal-target" id="goalCharsTarget">-</span>
+                        </div>
+                    </div>
+                    <div class="goal-progress-bar">
+                        <div class="goal-progress-fill" id="goalCharsProgress" data-percentage="0"></div>
+                    </div>
+                    <div class="goal-progress-info">
+                        <span class="goal-percentage" id="goalCharsPercentage">0%</span>
+                        <span class="goal-projection" id="goalCharsProjection">-</span>
+                    </div>
+                </div>
+
+                <!-- Games Goal -->
+                <div class="goal-progress-item">
+                    <div class="goal-progress-header">
+                        <div class="goal-progress-label">
+                            <span class="goal-icon">🎮</span>
+                            Games
+                        </div>
+                        <div class="goal-progress-values">
+                            <span class="goal-current" id="goalGamesCurrent">-</span>
+                            <span class="goal-separator">/</span>
+                            <span class="goal-target" id="goalGamesTarget">-</span>
+                        </div>
+                    </div>
+                    <div class="goal-progress-bar">
+                        <div class="goal-progress-fill" id="goalGamesProgress" data-percentage="0"></div>
+                    </div>
+                    <div class="goal-progress-info">
+                        <span class="goal-percentage" id="goalGamesPercentage">0%</span>
+                        <span class="goal-projection" id="goalGamesProjection">-</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Loading/Error states -->
+            <div class="goal-progress-loading" id="goalProgressLoading" style="display: none;">
+                <div class="spinner"></div>
+                <span>Loading goal progress...</span>
+            </div>
+
+            <div class="goal-progress-error" id="goalProgressError" style="display: none;">
+                <div class="goal-progress-error-icon">⚠️</div>
+                <div class="goal-progress-error-message">Failed to load goal progress</div>
+                <button class="retry-btn" onclick="loadGoalProgress()">Retry</button>
+            </div>
+        </div>
+
+        <!-- Goals Today Card -->
+        <div class="dashboard-card today-goals" id="todayGoalsCard" style="margin-bottom: 30px;">
+            <div class="dashboard-card-header">
+                <h3 class="dashboard-card-title">
+                    <span class="dashboard-card-icon">📅</span>
+                    Goals Today
+                </h3>
+                <p class="dashboard-card-subtitle" id="todayGoalsDate">Loading...</p>
+            </div>
+            
+            <div id="noTargetsMessage" class="no-targets-message" style="display: none; text-align: center; padding: 40px 20px; color: var(--text-tertiary); font-style: italic;">
+                Set target dates in settings to see your daily goals
+            </div>
+
+            <div class="dashboard-stats-grid" id="todayGoalsStats">
+                <div class="dashboard-stat-item goal-stat-item tooltip" data-tooltip="Your progress toward today's hours goal" id="hoursGoalItem" style="display: none;">
+                    <span class="dashboard-stat-value">
+                        <span id="todayHoursProgress">-</span>
+                        <span class="goal-separator">/</span>
+                        <span id="todayHoursRequired">-</span>
+                    </span>
+                    <span class="dashboard-stat-label">Hours Required</span>
+                </div>
+                <div class="dashboard-stat-item goal-stat-item tooltip" data-tooltip="Your progress toward today's character goal" id="charsGoalItem" style="display: none;">
+                    <span class="dashboard-stat-value">
+                        <span id="todayCharsProgress">-</span>
+                        <span class="goal-separator">/</span>
+                        <span id="todayCharsRequired">-</span>
+                    </span>
+                    <span class="dashboard-stat-label">Characters Required</span>
+                </div>
+            </div>
+
+            <div class="dashboard-progress-section" id="todayGoalsProgress" style="display: none;">
+                <div class="dashboard-progress-title">Daily Progress</div>
+                <div class="dashboard-progress-items">
+                    <div class="dashboard-progress-item" id="hoursDaysRemaining" style="display: none;">
+                        <div class="dashboard-progress-value neutral" id="hoursRemainingValue">-</div>
+                        <div class="dashboard-progress-label">Days Until Hours Goal</div>
+                    </div>
+                    <div class="dashboard-progress-item" id="charsDaysRemaining" style="display: none;">
+                        <div class="dashboard-progress-value neutral" id="charsRemainingValue">-</div>
+                        <div class="dashboard-progress-label">Days Until Chars Goal</div>
+                    </div>
+                    <div class="dashboard-progress-item" id="gamesDaysRemaining" style="display: none;">
+                        <div class="dashboard-progress-value neutral" id="gamesRemainingValue">-</div>
+                        <div class="dashboard-progress-label">Days Until Games Goal</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Your Stats by Goal Date Card -->
+        <div class="dashboard-card projection-card" id="projectionCard" style="margin-bottom: 30px;">
+            <div class="dashboard-card-header">
+                <h3 class="dashboard-card-title">
+                    <span class="dashboard-card-icon">📊</span>
+                    Your Stats by Goal Date
+                </h3>
+                <p class="dashboard-card-subtitle">Based on your 30-day average reading pace</p>
+            </div>
+
+            <div id="noProjectionsMessage" class="no-targets-message" style="display: none; text-align: center; padding: 40px 20px; color: var(--text-tertiary); font-style: italic;">
+                Set target dates in settings to see projections
+            </div>
+
+            <div class="dashboard-stats-grid" id="projectionStats">
+                <div class="dashboard-stat-item tooltip" data-tooltip="Total hours you'll have by your target date" id="hoursProjectionItem" style="display: none;">
+                    <span class="dashboard-stat-value" id="projectionHoursValue">-</span>
+                    <span class="dashboard-stat-label">Total Hours by Target</span>
+                </div>
+                <div class="dashboard-stat-item tooltip" data-tooltip="Total characters you'll have by your target date" id="charsProjectionItem" style="display: none;">
+                    <span class="dashboard-stat-value" id="projectionCharsValue">-</span>
+                    <span class="dashboard-stat-label">Total Characters by Target</span>
+                </div>
+                <div class="dashboard-stat-item tooltip" data-tooltip="Total games you'll have by your target date" id="gamesProjectionItem" style="display: none;">
+                    <span class="dashboard-stat-value" id="projectionGamesValue">-</span>
+                    <span class="dashboard-stat-label">Total Games by Target</span>
+                </div>
+            </div>
+
+            <div class="dashboard-progress-section" id="projectionProgress" style="display: none;">
+                <div class="dashboard-progress-title">Projection Summary</div>
+                <div class="dashboard-progress-items">
+                    <div class="dashboard-progress-item" id="hoursProjectionSummary" style="display: none;">
+                        <div class="dashboard-progress-value positive" id="hoursProjectionStatus">-</div>
+                        <div class="dashboard-progress-label">Hours Status</div>
+                    </div>
+                    <div class="dashboard-progress-item" id="charsProjectionSummary" style="display: none;">
+                        <div class="dashboard-progress-value positive" id="charsProjectionStatus">-</div>
+                        <div class="dashboard-progress-label">Characters Status</div>
+                    </div>
+                    <div class="dashboard-progress-item" id="gamesProjectionSummary" style="display: none;">
+                        <div class="dashboard-progress-value positive" id="gamesProjectionStatus">-</div>
+                        <div class="dashboard-progress-label">Games Status</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Settings Modal -->
+        <div id="settingsModal" class="modal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3>Goals Settings</h3>
+                    <span class="close-btn" id="closeSettingsModal">&times;</span>
+                </div>
+                <div class="modal-body">
+                    <p style="color: var(--text-secondary); margin-bottom: 20px;">
+                        Configure your reading goals and target dates.
+                    </p>
+                    <form id="settingsForm">
+                        <!-- Reading Goals Section -->
+                        <div style="margin-bottom: 20px;">
+                            <label
+                                style="display: block; font-weight: 600; margin-bottom: 8px; color: var(--text-primary);">
+                                Reading Goals Configuration
+                            </label>
+                            <p style="color: var(--text-secondary); margin-bottom: 20px; font-size: 14px;">
+                                Set your long-term reading targets and deadlines for tracking progress.
+                            </p>
+
+                            <div style="margin-bottom: 15px;">
+                                <label for="readingHoursTarget"
+                                    style="display: block; font-weight: 600; margin-bottom: 8px; color: var(--text-primary);">
+                                    Reading Hours Target
+                                </label>
+                                <input type="number" id="readingHoursTarget" name="reading_hours_target" min="1"
+                                    max="10000"
+                                    style="width: 90%; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-tertiary); color: var(--text-primary); font-size: 14px;"
+                                    placeholder="1500">
+                                <small
+                                    style="color: var(--text-tertiary); font-size: 12px; margin-top: 4px; display: block;">
+                                    Total reading hours goal (1-10,000 hours) - Default: 1500 hours
+                                </small>
+                            </div>
+
+                            <div style="margin-bottom: 15px;">
+                                <label for="readingHoursTargetDate"
+                                    style="display: block; font-weight: 600; margin-bottom: 8px; color: var(--text-primary);">
+                                    Reading Hours Target Date
+                                </label>
+                                <input type="date" id="readingHoursTargetDate" name="reading_hours_target_date"
+                                    style="width: 90%; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-tertiary); color: var(--text-primary); font-size: 14px;">
+                                <small
+                                    style="color: var(--text-tertiary); font-size: 12px; margin-top: 4px; display: block;">
+                                    Target date to achieve your reading hours goal
+                                </small>
+                            </div>
+
+                            <div style="margin-bottom: 15px;">
+                                <label for="characterCountTarget"
+                                    style="display: block; font-weight: 600; margin-bottom: 8px; color: var(--text-primary);">
+                                    Character Count Target
+                                </label>
+                                <input type="number" id="characterCountTarget" name="character_count_target" min="1000"
+                                    max="1000000000"
+                                    style="width: 90%; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-tertiary); color: var(--text-primary); font-size: 14px;"
+                                    placeholder="25000000">
+                                <small
+                                    style="color: var(--text-tertiary); font-size: 12px; margin-top: 4px; display: block;">
+                                    Total characters read goal (1,000-1,000,000,000) - Default: 25 million
+                                </small>
+                            </div>
+
+                            <div style="margin-bottom: 15px;">
+                                <label for="characterCountTargetDate"
+                                    style="display: block; font-weight: 600; margin-bottom: 8px; color: var(--text-primary);">
+                                    Character Count Target Date
+                                </label>
+                                <input type="date" id="characterCountTargetDate" name="character_count_target_date"
+                                    style="width: 90%; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-tertiary); color: var(--text-primary); font-size: 14px;">
+                                <small
+                                    style="color: var(--text-tertiary); font-size: 12px; margin-top: 4px; display: block;">
+                                    Target date to achieve your character count goal
+                                </small>
+                            </div>
+
+                            <div style="margin-bottom: 15px;">
+                                <label for="gamesTarget"
+                                    style="display: block; font-weight: 600; margin-bottom: 8px; color: var(--text-primary);">
+                                    Games/Visual Novels Target
+                                </label>
+                                <input type="number" id="gamesTarget" name="games_target" min="1" max="1000"
+                                    style="width: 90%; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-tertiary); color: var(--text-primary); font-size: 14px;"
+                                    placeholder="100">
+                                <small
+                                    style="color: var(--text-tertiary); font-size: 12px; margin-top: 4px; display: block;">
+                                    Number of games/visual novels to complete (1-1,000) - Default: 100
+                                </small>
+                            </div>
+
+                            <div style="margin-bottom: 15px;">
+                                <label for="gamesTargetDate"
+                                    style="display: block; font-weight: 600; margin-bottom: 8px; color: var(--text-primary);">
+                                    Games/Visual Novels Target Date
+                                </label>
+                                <input type="date" id="gamesTargetDate" name="games_target_date"
+                                    style="width: 90%; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-tertiary); color: var(--text-primary); font-size: 14px;"
+                                    data-date-format="yyyy-mm-dd">
+                                <small
+                                    style="color: var(--text-tertiary); font-size: 12px; margin-top: 4px; display: block;">
+                                    Target date to achieve your games goal (Format: YYYY-MM-DD)
+                                </small>
+                            </div>
+                        </div>
+                    </form>
+
+                    <div id="settingsError"
+                        style="display: none; background: var(--danger-color); color: white; padding: 10px; border-radius: 5px; margin-bottom: 15px; font-size: 14px;">
+                    </div>
+                    <div id="settingsSuccess"
+                        style="display: none; background: var(--success-color); color: white; padding: 10px; border-radius: 5px; margin-bottom: 15px; font-size: 14px;">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button id="cancelSettingsBtn" class="cancel-btn">Cancel</button>
+                    <button id="saveSettingsBtn" class="confirm-delete-btn">Save Settings</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {% set hours_target = stats_config.reading_hours_target | default(1500) %}
+    {% set chars_target = stats_config.character_count_target | default(25000000) %}
+    {% set games_target = stats_config.games_target | default(100) %}
+    {% set hours_target_date = stats_config.reading_hours_target_date | default('') %}
+    {% set chars_target_date = stats_config.character_count_target_date | default('') %}
+    {% set games_target_date = stats_config.games_target_date | default('') %}
+
+    {% set stats_config = {
+        'readingHoursTarget': hours_target,
+        'characterCountTarget': chars_target,
+        'gamesTarget': games_target,
+        'readingHoursTargetDate': hours_target_date,
+        'characterCountTargetDate': chars_target_date,
+        'gamesTargetDate': games_target_date
+    } %}
+
+    <!-- Inject stats config values for frontend -->
+    <script>
+      window.statsConfig = {{ stats_config | tojson }};
+    </script>
+    <!-- Include shared JavaScript first (required dependency for goals.js) -->
+    <script src="/static/js/shared.js"></script>
+    <script src="/static/js/goals.js"></script>
+
+</body>
+
+</html>