GameSentenceMiner 2.19.16__py3-none-any.whl → 2.20.0__py3-none-any.whl

GameSentenceMiner/web/templates/anki_stats.html

@@ -3,7 +3,7 @@
 {% set page_title = 'Anki and GSM Kanji Stats' %}
 {% set page_specific_css = 'stats.css' %}
 {% set include_kanji_grid_css = true %}
-{% set include_chart_js = true %}
+{% set include_chartjs = true %}
 {% set include_html2canvas = true %}
 {% include 'components/html-head.html' %}
 <link rel="stylesheet" href="{{ url_for('static', filename='css/loading-skeleton.css') }}">
@@ -135,23 +135,6 @@
     </div>
     -->
 
-    <!-- Missing High-Frequency Kanji Section -->
-    <!-- Mining Heatmap Card (Full Width) -->
-    <div class="dashboard-card all-games" id="miningHeatmapCard" style="margin-bottom: 24px;">
-        <div class="dashboard-card-header">
-            <h3 class="dashboard-card-title">
-                <span class="dashboard-card-icon">📊</span>
-                Mining Heatmap
-            </h3>
-            <p class="dashboard-card-subtitle">Track your daily sentence mining progress</p>
-        </div>
-        
-        <div class="dashboard-progress-section">
-            <div class="dashboard-progress-title">Activity Heatmap</div>
-            <div id="miningHeatmapContainer"></div>
-        </div>
-    </div>
-
     <!-- Dashboard Statistics Sections -->
     <div class="dashboard-container">
         <!-- Missing High-Frequency Kanji Card -->
@@ -328,6 +311,9 @@
     {% include 'components/settings-modal.html' %}
 </div>
 
+<!-- Include shared settings modal -->
+{% include 'components/settings-modal.html' %}
+
 <!-- Include shared JavaScript configuration -->
 {% set include_kanji_grid_js = true %}
 {% set include_heatmap_js = true %}

GameSentenceMiner/web/templates/components/date-range.html

@@ -7,13 +7,128 @@
         </h3>
     </div>
     <div class="dashboard-date-range">
-        <div class="dashboard-date-item tooltip" data-tooltip="{{ from_tooltip | default('Select the start date for your stats') }}">
+        <div class="dashboard-date-item tooltip"
+            data-tooltip="{{ from_tooltip | default('Select the start date for your stats') }}">
             <label for="{{ from_id | default('fromDate') }}">From</label>
             <input type="date" id="{{ from_id | default('fromDate') }}" class="dashboard-date-input">
         </div>
-        <div class="dashboard-date-item tooltip" data-tooltip="{{ to_tooltip | default('Select the end date for your stats') }}">
+        <div class="dashboard-date-item tooltip"
+            data-tooltip="{{ to_tooltip | default('Select the end date for your stats') }}">
             <label for="{{ to_id | default('toDate') }}">To</label>
             <input type="date" id="{{ to_id | default('toDate') }}" class="dashboard-date-input">
         </div>
+        <div class="dashboard-date-presets" aria-label="Date presets">
+            <label for="datePresets" class="dashboard-presets-label">Quick ranges</label>
+            <select id="datePresets" class="dashboard-presets-select" aria-label="Quick date ranges">
+                <option value="" selected>Quick ranges…</option>
+                <option value="today">Today</option>
+                <option value="week">Current Week</option>
+                <option value="month">Current Month</option>
+                <option value="year">Current Year</option>
+                <option value="7days">Last 7 Days</option>
+                <option value="30days">Last 30 Days</option>
+                <option value="365days">Last 365 Days</option>
+            </select>
+        </div>
     </div>
-</div>
+</div>
+
+<script>
+    /* Date presets script: calculates ranges and fills the 'from' and 'to' inputs.
+       Assumptions: week starts on Monday. If different behaviour is desired, adjust getWeekStart.
+       Uses IDs from template defaults; if you provide `from_id`/`to_id` in the template context
+       these will be targeted.
+    */
+    (function () {
+        function pad(n) { return n < 10 ? '0' + n : String(n); }
+        function toISODate(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); }
+
+        var fromId = "{{ from_id | default('fromDate') }}";
+        var toId = "{{ to_id | default('toDate') }}";
+        var fromInput = document.getElementById(fromId);
+        var toInput = document.getElementById(toId);
+        if (!fromInput || !toInput) return;
+
+        function getWeekStart(date) {
+            // ISO week: Monday = 1. Compute Monday of current week.
+            var d = new Date(date);
+            var day = d.getDay(); // 0 (Sun) .. 6 (Sat)
+            var diff = (day === 0 ? -6 : 1 - day); // move to Monday
+            d.setDate(d.getDate() + diff);
+            d.setHours(0, 0, 0, 0);
+            return d;
+        }
+
+        var handlers = {
+            today: function () {
+                var t = new Date(); t.setHours(0, 0, 0, 0);
+                fromInput.value = toISODate(t);
+                toInput.value = toISODate(new Date());
+                fromInput.dispatchEvent(new Event('change'));
+                toInput.dispatchEvent(new Event('change'));
+            },
+            week: function () {
+                var now = new Date();
+                var start = getWeekStart(now);
+                var end = new Date(); end.setHours(23, 59, 59, 999);
+                fromInput.value = toISODate(start);
+                toInput.value = toISODate(end);
+                fromInput.dispatchEvent(new Event('change'));
+                toInput.dispatchEvent(new Event('change'));
+            },
+            month: function () {
+                var now = new Date();
+                var start = new Date(now.getFullYear(), now.getMonth(), 1);
+                var end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+                fromInput.value = toISODate(start);
+                toInput.value = toISODate(end);
+                fromInput.dispatchEvent(new Event('change'));
+                toInput.dispatchEvent(new Event('change'));
+            },
+            year: function () {
+                var now = new Date();
+                var start = new Date(now.getFullYear(), 0, 1);
+                var end = new Date(now.getFullYear(), 11, 31);
+                fromInput.value = toISODate(start);
+                toInput.value = toISODate(end);
+                fromInput.dispatchEvent(new Event('change'));
+                toInput.dispatchEvent(new Event('change'));
+            },
+            '7days': function () {
+                var end = new Date();
+                var start = new Date(); start.setDate(end.getDate() - 6); // include today
+                fromInput.value = toISODate(start);
+                toInput.value = toISODate(end);
+                fromInput.dispatchEvent(new Event('change'));
+                toInput.dispatchEvent(new Event('change'));
+            },
+            '30days': function () {
+                var end = new Date();
+                var start = new Date(); start.setDate(end.getDate() - 29);
+                fromInput.value = toISODate(start);
+                toInput.value = toISODate(end);
+                fromInput.dispatchEvent(new Event('change'));
+                toInput.dispatchEvent(new Event('change'));
+            },
+            '365days': function () {
+                var end = new Date();
+                var start = new Date(); start.setDate(end.getDate() - 364);
+                fromInput.value = toISODate(start);
+                toInput.value = toISODate(end);
+                fromInput.dispatchEvent(new Event('change'));
+                toInput.dispatchEvent(new Event('change'));
+            },
+        };
+
+        var presetSelect = document.getElementById('datePresets');
+        if (presetSelect && presetSelect.tagName === 'SELECT') {
+            presetSelect.addEventListener('change', function (e) {
+                var range = e.target.value;
+                if (range && handlers[range]) {
+                    handlers[range]();
+                    // Keep the selected option visible instead of resetting
+                }
+            });
+        }
+    })();
+</script>

GameSentenceMiner/web/templates/components/html-head.html

@@ -1,19 +1,53 @@
 <!-- HTML Head Component -->
 <head>
+    <!-- Inline script to prevent dark mode flash - must run before any rendering -->
+    <script>
+        (function() {
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme) {
+                document.documentElement.setAttribute('data-theme', savedTheme);
+            } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                document.documentElement.setAttribute('data-theme', 'dark');
+            }
+        })();
+    </script>
+    
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ page_title | default('GSM Dashboard') }}</title>
     
-    {% if include_chartjs | default(true) %}
-    <!-- Include Chart.js from a CDN -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- Resource hints for CDN to speed up connections -->
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+    
+    <!-- Preload critical CSS files for faster rendering -->
+    <link rel="preload" href="/static/css/shared.css" as="style">
+    {% if include_dashboard_css | default(true) %}
+    <link rel="preload" href="/static/css/dashboard-shared.css" as="style">
+    <link rel="preload" href="/static/css/popups-shared.css" as="style">
+    {% endif %}
+    {% if page_specific_css %}
+    <link rel="preload" href="/static/css/{{ page_specific_css }}" as="style">
+    {% endif %}
+    {% if include_kanji_grid_css | default(false) %}
+    <link rel="preload" href="/static/css/kanji-grid.css" as="style">
+    {% endif %}
+    
+    {% if include_chartjs | default(false) %}
+    <!-- Include Chart.js from a CDN - deferred to not block rendering -->
+    <!-- Note: Chart.js is now lazy-loaded by default. Set include_chartjs=true to load upfront if needed -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
     {% endif %}
 
-    {% if include_html2canvas | default(true) %}
-    <!-- Include html2canvas for screenshot functionality -->
-    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
+    {% if include_html2canvas | default(false) %}
+    <!-- Include html2canvas for screenshot functionality - deferred to not block rendering -->
+    <!-- Note: html2canvas is now lazy-loaded when screenshot button is clicked -->
+    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js" defer></script>
     {% endif %}
 
+    <!-- Include canvas-confetti for celebration effects - deferred to not block rendering -->
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js" defer></script>
+
     <!-- Include shared theme styles -->
     {% include 'components/theme-styles.html' %}
 

GameSentenceMiner/web/templates/components/js-config.html

@@ -6,26 +6,26 @@
 </script>
 {% endif %}
 
-<!-- Include shared JavaScript first (required dependency) -->
-<script src="/static/js/shared.js"></script>
+<!-- Include shared JavaScript first (required dependency) - deferred to not block rendering -->
+<script src="/static/js/shared.js" defer></script>
 
 {% if include_kanji_grid_js | default(false) %}
-<script src="/static/js/kanji-grid.js"></script>
+<script src="/static/js/kanji-grid.js" defer></script>
 {% endif %}
 
 {% if include_heatmap_js | default(false) %}
-<script src="/static/js/heatmap.js"></script>
+<script src="/static/js/heatmap.js" defer></script>
 {% endif %}
 
 {% if page_specific_js %}
-<!-- Include page-specific JavaScript -->
-<script src="/static/js/{{ page_specific_js }}"></script>
+<!-- Include page-specific JavaScript - deferred to not block rendering -->
+<script src="/static/js/{{ page_specific_js }}" defer></script>
 {% endif %}
 
 {% if additional_js %}
-<!-- Additional JavaScript files -->
+<!-- Additional JavaScript files - deferred to not block rendering -->
 {% for js_file in additional_js %}
-<script src="/static/js/{{ js_file }}"></script>
+<script src="/static/js/{{ js_file }}" defer></script>
 {% endfor %}
 {% endif %}
 

GameSentenceMiner/web/templates/components/regex-input.html

@@ -0,0 +1,160 @@
+<!-- Reusable Regex Input Component
+     Parameters (set via data attributes on container):
+     - data-show-exact-text: "true" to show exact text input (for deletion use case)
+     - data-preset-id: ID prefix for preset select (default: "presetPatterns")
+     - data-custom-id: ID prefix for custom regex input (default: "customRegex")
+     - data-case-id: ID prefix for case sensitive checkbox (default: "caseSensitive")
+     - data-regex-id: ID prefix for use regex checkbox (default: "useRegex")
+     - data-exact-id: ID prefix for exact text textarea (default: "exactText")
+-->
+
+<div class="regex-input-component">
+    <div class="form-group">
+        <label class="form-label">Preset Patterns:</label>
+        <select class="form-input regex-preset-select">
+            <option value="">Select a preset pattern...</option>
+            <option value="everything">Everything</option>
+            <option value="lines_over_50">Lines over 50 characters</option>
+            <option value="lines_over_100">Lines over 100 characters</option>
+            <option value="non_japanese">Non-Japanese text</option>
+            <option value="ascii_only">ASCII-only lines</option>
+            <option value="empty_lines">Empty or whitespace-only lines</option>
+            <option value="numbers_only">Lines with numbers only</option>
+            <option value="single_char">Single character lines</option>
+            <option value="repeated_chars">Lines with repeated characters (3+ times)</option>
+        </select>
+        <small style="color: var(--text-tertiary); font-size: 12px;">
+            Select a common pattern or create a custom regex below.
+        </small>
+    </div>
+    
+    <div class="form-group">
+        <label class="form-label">Custom Regex Pattern:</label>
+        <input type="text" class="form-input regex-custom-input" placeholder="Enter custom regex pattern (e.g., ^.{0,10}$ for lines 10 chars or less)">
+        <small style="color: var(--text-tertiary); font-size: 12px;">
+            Use regex syntax. Leave empty to use exact text matching below.
+        </small>
+    </div>
+    
+    <div class="regex-exact-text-group" style="display: none;">
+        <div class="form-group">
+            <label class="form-label">Exact Text to Match:</label>
+            <textarea class="form-textarea regex-exact-textarea" rows="4" placeholder="Enter exact text lines to match, one per line..."></textarea>
+            <small style="color: var(--text-tertiary); font-size: 12px;">
+                Each line will be treated as an exact match. Only used if no regex pattern is provided.
+            </small>
+        </div>
+    </div>
+    
+    <div class="form-group">
+        <div class="checkbox-container">
+            <input type="checkbox" class="checkbox-input regex-case-checkbox">
+            <label class="checkbox-label">Case sensitive matching</label>
+        </div>
+    </div>
+    
+    <div class="form-group">
+        <div class="checkbox-container">
+            <input type="checkbox" class="checkbox-input regex-mode-checkbox">
+            <label class="checkbox-label">Treat custom pattern as regex</label>
+        </div>
+    </div>
+</div>
+
+<style>
+.regex-input-component {
+    width: 100%;
+}
+
+.regex-input-component .form-group {
+    margin-bottom: 15px;
+}
+
+.regex-input-component .form-label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.regex-input-component .form-input,
+.regex-input-component .form-textarea {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-family: 'Courier New', monospace;
+    font-size: 14px;
+}
+
+.regex-input-component .form-input:focus,
+.regex-input-component .form-textarea:focus {
+    outline: none;
+    border-color: var(--accent-color);
+}
+
+.regex-input-component .checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.regex-input-component .checkbox-input {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+
+.regex-input-component .checkbox-label {
+    cursor: pointer;
+    user-select: none;
+    color: var(--text-primary);
+}
+</style>
+
+<script>
+// Initialize regex component functionality
+(function() {
+    // This script runs when the component is loaded
+    // The parent page's JavaScript should handle the actual logic
+    // by accessing the component's elements via their classes
+    
+    // Add event listener for preset pattern selection
+    document.addEventListener('DOMContentLoaded', function() {
+        const presetSelects = document.querySelectorAll('.regex-preset-select');
+        
+        presetSelects.forEach(select => {
+            select.addEventListener('change', function() {
+                const customInput = this.closest('.regex-input-component').querySelector('.regex-custom-input');
+                const regexCheckbox = this.closest('.regex-input-component').querySelector('.regex-mode-checkbox');
+                
+                if (this.value) {
+                    // Import and use the pattern
+                    import('/static/js/regex-patterns.js').then(module => {
+                        const pattern = module.getPattern(this.value);
+                        if (pattern && customInput) {
+                            customInput.value = pattern;
+                            customInput.dispatchEvent(new Event('input', { bubbles: true }));
+                            if (regexCheckbox) {
+                                regexCheckbox.checked = true;
+                                regexCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
+                            }
+                        }
+                    });
+                } else {
+                    if (customInput) {
+                        customInput.value = '';
+                        customInput.dispatchEvent(new Event('input', { bubbles: true }));
+                    }
+                    if (regexCheckbox) {
+                        regexCheckbox.checked = false;
+                        regexCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
+                    }
+                }
+            });
+        });
+    });
+})();
+</script>