Enhance keyboard navigation and help panel

- Extend help panel visibility from 5 to 10 seconds
- Add 'h' key toggle to reopen minimized help panel on all pages
- Fix 'h' key functionality on bet list pages (bets.html, admin_bets.html)
- Add keyboard help panel to bet verification pages
- Improve user experience with consistent keyboard shortcuts across all pages

mbetterclient/web_dashboard/templates/dashboard/admin_bet_details.html

@@ -310,6 +310,103 @@
         </div>
     </div>
 </div>
+<!-- Keyboard Shortcuts Help Panel -->
+<div id="keyboard-help-panel" class="keyboard-help-panel">
+    <div class="keyboard-help-header">
+        <i class="fas fa-keyboard me-2"></i>
+        <strong>Keyboard Shortcuts</strong>
+        <button type="button" class="btn-close btn-close-white ms-auto" onclick="toggleKeyboardHelp()"></button>
+    </div>
+    <div class="keyboard-help-content">
+        <div class="keyboard-shortcut">
+            <kbd>Enter</kbd>
+            <span>Print Receipt</span>
+        </div>
+        <div class="keyboard-shortcut">
+            <kbd>Esc</kbd>
+            <span>Back to Bets</span>
+        </div>
+    </div>
+</div>
+
+<style>
+.keyboard-help-panel {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: rgba(0, 123, 255, 0.95);
+    color: white;
+    border-radius: 8px;
+    padding: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1050;
+    min-width: 250px;
+    backdrop-filter: blur(10px);
+}
+
+.keyboard-help-header {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 10px 15px;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.keyboard-help-content {
+    padding: 15px;
+}
+
+.keyboard-shortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+
+.keyboard-shortcut:last-child {
+    margin-bottom: 0;
+}
+
+.keyboard-shortcut kbd {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: bold;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.keyboard-help-panel.minimized {
+    width: 50px;
+    height: 50px;
+    min-width: auto;
+    cursor: pointer;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-content,
+.keyboard-help-panel.minimized .keyboard-help-header .btn-close {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header {
+    justify-content: center;
+    padding: 0;
+    height: 50px;
+    border-radius: 50%;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header strong {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header i {
+    font-size: 18px;
+}
+</style>
+
 {% endblock %}
 
 {% block scripts %}
@@ -414,6 +511,9 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize keyboard navigation
     initializeBetDetailsKeyboardNavigation();
+
+    // Initialize keyboard help panel
+    initializeKeyboardHelp();
 });
 
 function initializeBetDetailsKeyboardNavigation() {
@@ -926,6 +1026,32 @@ function printDirectly(printContent) {
     printWindow.document.close();
 }
 
+function initializeKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+
+    // Auto-minimize after 10 seconds
+    setTimeout(() => {
+        if (helpPanel && !helpPanel.classList.contains('minimized')) {
+            helpPanel.classList.add('minimized');
+        }
+    }, 10000);
+
+    // Add global keyboard listener for 'h' key to toggle help
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'h' || event.key === 'H') {
+            event.preventDefault();
+            toggleKeyboardHelp();
+        }
+    });
+}
+
+function toggleKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+    if (helpPanel) {
+        helpPanel.classList.toggle('minimized');
+    }
+}
+
 function showNotification(message, type = 'info') {
     const alertClass = type === 'success' ? 'alert-success' : type === 'error' ? 'alert-danger' : 'alert-info';
     const notification = document.createElement('div');

mbetterclient/web_dashboard/templates/dashboard/admin_bets.html

@@ -208,6 +208,103 @@
         </div>
     </div>
 </div>
+<!-- Keyboard Shortcuts Help Panel -->
+<div id="keyboard-help-panel" class="keyboard-help-panel">
+    <div class="keyboard-help-header">
+        <i class="fas fa-keyboard me-2"></i>
+        <strong>Keyboard Shortcuts</strong>
+        <button type="button" class="btn-close btn-close-white ms-auto" onclick="toggleKeyboardHelp()"></button>
+    </div>
+    <div class="keyboard-help-content">
+        <div class="keyboard-shortcut">
+            <kbd>Enter</kbd>
+            <span>Create New Bet</span>
+        </div>
+        <div class="keyboard-shortcut">
+            <kbd>v</kbd>
+            <span>Verify Bet</span>
+        </div>
+    </div>
+</div>
+
+<style>
+.keyboard-help-panel {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: rgba(0, 123, 255, 0.95);
+    color: white;
+    border-radius: 8px;
+    padding: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1050;
+    min-width: 250px;
+    backdrop-filter: blur(10px);
+}
+
+.keyboard-help-header {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 10px 15px;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.keyboard-help-content {
+    padding: 15px;
+}
+
+.keyboard-shortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+
+.keyboard-shortcut:last-child {
+    margin-bottom: 0;
+}
+
+.keyboard-shortcut kbd {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: bold;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.keyboard-help-panel.minimized {
+    width: 50px;
+    height: 50px;
+    min-width: auto;
+    cursor: pointer;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-content,
+.keyboard-help-panel.minimized .keyboard-help-header .btn-close {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header {
+    justify-content: center;
+    padding: 0;
+    height: 50px;
+    border-radius: 50%;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header strong {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header i {
+    font-size: 18px;
+}
+</style>
+
 {% endblock %}
 
 {% block scripts %}
@@ -226,6 +323,9 @@ document.addEventListener('DOMContentLoaded', function() {
     // Load bets on page load
     loadBets();
 
+    // Initialize keyboard help panel
+    initializeKeyboardHelp();
+
     // Date picker change event
     document.getElementById('bet-date-picker').addEventListener('change', function() {
         loadBets();
@@ -930,6 +1030,32 @@ function printDirectly(printContent) {
     printWindow.document.close();
 }
 
+function initializeKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+
+    // Auto-minimize after 10 seconds
+    setTimeout(() => {
+        if (helpPanel && !helpPanel.classList.contains('minimized')) {
+            helpPanel.classList.add('minimized');
+        }
+    }, 10000);
+
+    // Add global keyboard listener for 'h' key to toggle help
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'h' || event.key === 'H') {
+            event.preventDefault();
+            toggleKeyboardHelp();
+        }
+    });
+}
+
+function toggleKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+    if (helpPanel) {
+        helpPanel.classList.toggle('minimized');
+    }
+}
+
 function showNotification(message, type = 'info') {
     const alertClass = type === 'success' ? 'alert-success' : type === 'error' ? 'alert-danger' : 'alert-info';
     const notification = document.createElement('div');

mbetterclient/web_dashboard/templates/dashboard/admin_new_bet.html

@@ -172,6 +172,112 @@
         </div>
     </div>
 </div>
+<!-- Keyboard Shortcuts Help Panel -->
+<div id="keyboard-help-panel" class="keyboard-help-panel">
+    <div class="keyboard-help-header">
+        <i class="fas fa-keyboard me-2"></i>
+        <strong>Keyboard Shortcuts</strong>
+        <button type="button" class="btn-close btn-close-white ms-auto" onclick="toggleKeyboardHelp()"></button>
+    </div>
+    <div class="keyboard-help-content" id="keyboard-help-content">
+        <!-- Dynamic content will be updated based on page state -->
+        <div class="keyboard-shortcut">
+            <kbd>1-9 + Enter</kbd>
+            <span>Select Match</span>
+        </div>
+        <div class="keyboard-shortcut">
+            <kbd>Tab</kbd>
+            <span>Navigate Outcomes</span>
+        </div>
+        <div class="keyboard-shortcut">
+            <kbd>Enter</kbd>
+            <span>Submit Bet</span>
+        </div>
+        <div class="keyboard-shortcut">
+            <kbd>Esc</kbd>
+            <span>Cancel/Close</span>
+        </div>
+    </div>
+</div>
+
+<style>
+.keyboard-help-panel {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: rgba(0, 123, 255, 0.95);
+    color: white;
+    border-radius: 8px;
+    padding: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1050;
+    min-width: 280px;
+    backdrop-filter: blur(10px);
+}
+
+.keyboard-help-header {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 10px 15px;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.keyboard-help-content {
+    padding: 15px;
+}
+
+.keyboard-shortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+
+.keyboard-shortcut:last-child {
+    margin-bottom: 0;
+}
+
+.keyboard-shortcut kbd {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: bold;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.keyboard-help-panel.minimized {
+    width: 50px;
+    height: 50px;
+    min-width: auto;
+    cursor: pointer;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-content,
+.keyboard-help-panel.minimized .keyboard-help-header .btn-close {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header {
+    justify-content: center;
+    padding: 0;
+    height: 50px;
+    border-radius: 50%;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header strong {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header i {
+    font-size: 18px;
+}
+</style>
+
 {% endblock %}
 
 {% block scripts %}
@@ -210,6 +316,9 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize keyboard navigation
     initializeKeyboardNavigation();
+
+    // Initialize keyboard help panel
+    initializeKeyboardHelp();
 });
 
 // Keyboard navigation state
@@ -338,6 +447,9 @@ function openMatch(card, matchId) {
         // Highlight the match card
         card.classList.add('border-primary');
         card.style.boxShadow = '0 0 0 0.2rem rgba(13, 110, 253, 0.25)';
+
+        // Update keyboard help content
+        updateKeyboardHelpContent();
     }
 }
 
@@ -369,6 +481,9 @@ function closeCurrentMatch(clearInputs = false) {
         keyboardState.currentMatch = null;
         keyboardState.currentOutcomeIndex = -1;
         keyboardState.outcomes = [];
+
+        // Update keyboard help content
+        updateKeyboardHelpContent();
     }
 }
 
@@ -715,6 +830,70 @@ function submitBet() {
     });
 }
 
+function initializeKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+
+    // Auto-minimize after 10 seconds
+    setTimeout(() => {
+        if (helpPanel && !helpPanel.classList.contains('minimized')) {
+            helpPanel.classList.add('minimized');
+        }
+    }, 10000);
+
+    // Add global keyboard listener for 'h' key to toggle help
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'h' || event.key === 'H') {
+            event.preventDefault();
+            toggleKeyboardHelp();
+        }
+    });
+
+    // Update help content based on current state
+    updateKeyboardHelpContent();
+}
+
+function toggleKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+    if (helpPanel) {
+        helpPanel.classList.toggle('minimized');
+    }
+}
+
+function updateKeyboardHelpContent() {
+    const contentDiv = document.getElementById('keyboard-help-content');
+    if (!contentDiv) return;
+
+    let shortcuts = [];
+
+    if (!keyboardState.currentMatch) {
+        // Match selection state
+        shortcuts = [
+            { key: '1-9 + Enter', action: 'Select Match' },
+            { key: 'Esc', action: 'Back to Bets' }
+        ];
+    } else {
+        // Outcome navigation state
+        shortcuts = [
+            { key: 'Tab', action: 'Navigate Outcomes' },
+            { key: 'Digits + Enter', action: 'Enter Bet Amount' },
+            { key: 'Enter', action: 'Submit Bet' },
+            { key: 'Esc', action: 'Cancel/Close' }
+        ];
+    }
+
+    let html = '';
+    shortcuts.forEach(shortcut => {
+        html += `
+            <div class="keyboard-shortcut">
+                <kbd>${shortcut.key}</kbd>
+                <span>${shortcut.action}</span>
+            </div>
+        `;
+    });
+
+    contentDiv.innerHTML = html;
+}
+
 function showNotification(message, type = 'info') {
     // Simple notification system - could be enhanced with toast notifications
     const alertClass = type === 'success' ? 'alert-success' : type === 'error' ? 'alert-danger' : 'alert-info';

mbetterclient/web_dashboard/templates/dashboard/bet_details.html

@@ -310,6 +310,103 @@
         </div>
     </div>
 </div>
+<!-- Keyboard Shortcuts Help Panel -->
+<div id="keyboard-help-panel" class="keyboard-help-panel">
+    <div class="keyboard-help-header">
+        <i class="fas fa-keyboard me-2"></i>
+        <strong>Keyboard Shortcuts</strong>
+        <button type="button" class="btn-close btn-close-white ms-auto" onclick="toggleKeyboardHelp()"></button>
+    </div>
+    <div class="keyboard-help-content">
+        <div class="keyboard-shortcut">
+            <kbd>Enter</kbd>
+            <span>Print Receipt</span>
+        </div>
+        <div class="keyboard-shortcut">
+            <kbd>Esc</kbd>
+            <span>Back to Bets</span>
+        </div>
+    </div>
+</div>
+
+<style>
+.keyboard-help-panel {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: rgba(0, 123, 255, 0.95);
+    color: white;
+    border-radius: 8px;
+    padding: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1050;
+    min-width: 250px;
+    backdrop-filter: blur(10px);
+}
+
+.keyboard-help-header {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 10px 15px;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.keyboard-help-content {
+    padding: 15px;
+}
+
+.keyboard-shortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+
+.keyboard-shortcut:last-child {
+    margin-bottom: 0;
+}
+
+.keyboard-shortcut kbd {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: bold;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.keyboard-help-panel.minimized {
+    width: 50px;
+    height: 50px;
+    min-width: auto;
+    cursor: pointer;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-content,
+.keyboard-help-panel.minimized .keyboard-help-header .btn-close {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header {
+    justify-content: center;
+    padding: 0;
+    height: 50px;
+    border-radius: 50%;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header strong {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header i {
+    font-size: 18px;
+}
+</style>
+
 {% endblock %}
 
 {% block scripts %}
@@ -414,6 +511,9 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize keyboard navigation
     initializeBetDetailsKeyboardNavigation();
+
+    // Initialize keyboard help panel
+    initializeKeyboardHelp();
 });
 
 function initializeBetDetailsKeyboardNavigation() {
@@ -916,6 +1016,32 @@ function printDirectly(printContent) {
     printWindow.document.close();
 }
 
+function initializeKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+
+    // Auto-minimize after 10 seconds
+    setTimeout(() => {
+        if (helpPanel && !helpPanel.classList.contains('minimized')) {
+            helpPanel.classList.add('minimized');
+        }
+    }, 10000);
+
+    // Add global keyboard listener for 'h' key to toggle help
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'h' || event.key === 'H') {
+            event.preventDefault();
+            toggleKeyboardHelp();
+        }
+    });
+}
+
+function toggleKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+    if (helpPanel) {
+        helpPanel.classList.toggle('minimized');
+    }
+}
+
 function showNotification(message, type = 'info') {
     const alertClass = type === 'success' ? 'alert-success' : type === 'error' ? 'alert-danger' : 'alert-info';
     const notification = document.createElement('div');

mbetterclient/web_dashboard/templates/dashboard/bets.html

@@ -208,6 +208,103 @@
         </div>
     </div>
 </div>
+<!-- Keyboard Shortcuts Help Panel -->
+<div id="keyboard-help-panel" class="keyboard-help-panel">
+    <div class="keyboard-help-header">
+        <i class="fas fa-keyboard me-2"></i>
+        <strong>Keyboard Shortcuts</strong>
+        <button type="button" class="btn-close btn-close-white ms-auto" onclick="toggleKeyboardHelp()"></button>
+    </div>
+    <div class="keyboard-help-content">
+        <div class="keyboard-shortcut">
+            <kbd>Enter</kbd>
+            <span>Create New Bet</span>
+        </div>
+        <div class="keyboard-shortcut">
+            <kbd>v</kbd>
+            <span>Verify Bet</span>
+        </div>
+    </div>
+</div>
+
+<style>
+.keyboard-help-panel {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: rgba(0, 123, 255, 0.95);
+    color: white;
+    border-radius: 8px;
+    padding: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1050;
+    min-width: 250px;
+    backdrop-filter: blur(10px);
+}
+
+.keyboard-help-header {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 10px 15px;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.keyboard-help-content {
+    padding: 15px;
+}
+
+.keyboard-shortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+
+.keyboard-shortcut:last-child {
+    margin-bottom: 0;
+}
+
+.keyboard-shortcut kbd {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: bold;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.keyboard-help-panel.minimized {
+    width: 50px;
+    height: 50px;
+    min-width: auto;
+    cursor: pointer;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-content,
+.keyboard-help-panel.minimized .keyboard-help-header .btn-close {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header {
+    justify-content: center;
+    padding: 0;
+    height: 50px;
+    border-radius: 50%;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header strong {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header i {
+    font-size: 18px;
+}
+</style>
+
 {% endblock %}
 
 {% block scripts %}
@@ -241,6 +338,9 @@ document.addEventListener('DOMContentLoaded', function() {
         window.location.href = '/cashier/verify-bet';
     });
 
+    // Initialize keyboard help panel
+    initializeKeyboardHelp();
+
     // Keyboard navigation: Enter key moves to /bets/new, 'v' or 'V' moves to verification
     document.addEventListener('keydown', function(event) {
         // Only handle keys if not in an input field
@@ -934,6 +1034,32 @@ function printDirectly(printContent) {
     printWindow.document.close();
 }
 
+function initializeKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+
+    // Auto-minimize after 10 seconds
+    setTimeout(() => {
+        if (helpPanel && !helpPanel.classList.contains('minimized')) {
+            helpPanel.classList.add('minimized');
+        }
+    }, 10000);
+
+    // Add global keyboard listener for 'h' key to toggle help
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'h' || event.key === 'H') {
+            event.preventDefault();
+            toggleKeyboardHelp();
+        }
+    });
+}
+
+function toggleKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+    if (helpPanel) {
+        helpPanel.classList.toggle('minimized');
+    }
+}
+
 function showNotification(message, type = 'info') {
     // Simple notification system - could be enhanced with toast notifications
     const alertClass = type === 'success' ? 'alert-success' : type === 'error' ? 'alert-danger' : 'alert-info';

mbetterclient/web_dashboard/templates/dashboard/cashier_verify_bet.html

@@ -150,6 +150,99 @@
         </div>
     </div>
 </div>
+
+<!-- Keyboard Shortcuts Help Panel -->
+<div id="keyboard-help-panel" class="keyboard-help-panel">
+    <div class="keyboard-help-header">
+        <i class="fas fa-keyboard me-2"></i>
+        <strong>Keyboard Shortcuts</strong>
+        <button type="button" class="btn-close btn-close-white ms-auto" onclick="toggleKeyboardHelp()"></button>
+    </div>
+    <div class="keyboard-help-content">
+        <div class="keyboard-shortcut">
+            <kbd>Esc</kbd>
+            <span>Back to Bets</span>
+        </div>
+    </div>
+</div>
+
+<style>
+.keyboard-help-panel {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: rgba(0, 123, 255, 0.95);
+    color: white;
+    border-radius: 8px;
+    padding: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1050;
+    min-width: 250px;
+    backdrop-filter: blur(10px);
+}
+
+.keyboard-help-header {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 10px 15px;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.keyboard-help-content {
+    padding: 15px;
+}
+
+.keyboard-shortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+
+.keyboard-shortcut:last-child {
+    margin-bottom: 0;
+}
+
+.keyboard-shortcut kbd {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: bold;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.keyboard-help-panel.minimized {
+    width: 50px;
+    height: 50px;
+    min-width: auto;
+    cursor: pointer;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-content,
+.keyboard-help-panel.minimized .keyboard-help-header .btn-close {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header {
+    justify-content: center;
+    padding: 0;
+    height: 50px;
+    border-radius: 50%;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header strong {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header i {
+    font-size: 18px;
+}
+</style>
 {% endblock %}
 
 {% block scripts %}
@@ -196,6 +289,9 @@ document.addEventListener('DOMContentLoaded', function() {
             window.location.href = '/cashier/bets';
         }
     });
+
+    // Initialize keyboard help panel
+    initializeKeyboardHelp();
 });
 
 function generateMobileAccessQR() {
@@ -584,10 +680,36 @@ function displayBetDetails(bet) {
     modal.show();
 }
 
+function initializeKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+
+    // Auto-minimize after 10 seconds
+    setTimeout(() => {
+        if (helpPanel && !helpPanel.classList.contains('minimized')) {
+            helpPanel.classList.add('minimized');
+        }
+    }, 10000);
+
+    // Add global keyboard listener for 'h' key to toggle help
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'h' || event.key === 'H') {
+            event.preventDefault();
+            toggleKeyboardHelp();
+        }
+    });
+}
+
+function toggleKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+    if (helpPanel) {
+        helpPanel.classList.toggle('minimized');
+    }
+}
+
 function showScannerStatus(message, type) {
     const statusDiv = document.getElementById('scanner-status');
     const messageSpan = document.getElementById('scanner-message');
-    
+
     statusDiv.className = `alert alert-${type}`;
     messageSpan.textContent = message;
     statusDiv.style.display = 'block';

mbetterclient/web_dashboard/templates/dashboard/new_bet.html

@@ -172,6 +172,112 @@
         </div>
     </div>
 </div>
+<!-- Keyboard Shortcuts Help Panel -->
+<div id="keyboard-help-panel" class="keyboard-help-panel">
+    <div class="keyboard-help-header">
+        <i class="fas fa-keyboard me-2"></i>
+        <strong>Keyboard Shortcuts</strong>
+        <button type="button" class="btn-close btn-close-white ms-auto" onclick="toggleKeyboardHelp()"></button>
+    </div>
+    <div class="keyboard-help-content" id="keyboard-help-content">
+        <!-- Dynamic content will be updated based on page state -->
+        <div class="keyboard-shortcut">
+            <kbd>1-9 + Enter</kbd>
+            <span>Select Match</span>
+        </div>
+        <div class="keyboard-shortcut">
+            <kbd>Tab</kbd>
+            <span>Navigate Outcomes</span>
+        </div>
+        <div class="keyboard-shortcut">
+            <kbd>Enter</kbd>
+            <span>Submit Bet</span>
+        </div>
+        <div class="keyboard-shortcut">
+            <kbd>Esc</kbd>
+            <span>Cancel/Close</span>
+        </div>
+    </div>
+</div>
+
+<style>
+.keyboard-help-panel {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: rgba(0, 123, 255, 0.95);
+    color: white;
+    border-radius: 8px;
+    padding: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1050;
+    min-width: 280px;
+    backdrop-filter: blur(10px);
+}
+
+.keyboard-help-header {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 10px 15px;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.keyboard-help-content {
+    padding: 15px;
+}
+
+.keyboard-shortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+
+.keyboard-shortcut:last-child {
+    margin-bottom: 0;
+}
+
+.keyboard-shortcut kbd {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: bold;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.keyboard-help-panel.minimized {
+    width: 50px;
+    height: 50px;
+    min-width: auto;
+    cursor: pointer;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-content,
+.keyboard-help-panel.minimized .keyboard-help-header .btn-close {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header {
+    justify-content: center;
+    padding: 0;
+    height: 50px;
+    border-radius: 50%;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header strong {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header i {
+    font-size: 18px;
+}
+</style>
+
 {% endblock %}
 
 {% block scripts %}
@@ -210,6 +316,9 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize keyboard navigation
     initializeKeyboardNavigation();
+
+    // Initialize keyboard help panel
+    initializeKeyboardHelp();
 });
 
 // Keyboard navigation state
@@ -338,6 +447,9 @@ function openMatch(card, matchId) {
         // Highlight the match card
         card.classList.add('border-primary');
         card.style.boxShadow = '0 0 0 0.2rem rgba(13, 110, 253, 0.25)';
+
+        // Update keyboard help content
+        updateKeyboardHelpContent();
     }
 }
 
@@ -369,6 +481,9 @@ function closeCurrentMatch(clearInputs = false) {
         keyboardState.currentMatch = null;
         keyboardState.currentOutcomeIndex = -1;
         keyboardState.outcomes = [];
+
+        // Update keyboard help content
+        updateKeyboardHelpContent();
     }
 }
 
@@ -715,6 +830,70 @@ function submitBet() {
     });
 }
 
+function initializeKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+
+    // Auto-minimize after 10 seconds
+    setTimeout(() => {
+        if (helpPanel && !helpPanel.classList.contains('minimized')) {
+            helpPanel.classList.add('minimized');
+        }
+    }, 10000);
+
+    // Add global keyboard listener for 'h' key to toggle help
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'h' || event.key === 'H') {
+            event.preventDefault();
+            toggleKeyboardHelp();
+        }
+    });
+
+    // Update help content based on current state
+    updateKeyboardHelpContent();
+}
+
+function toggleKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+    if (helpPanel) {
+        helpPanel.classList.toggle('minimized');
+    }
+}
+
+function updateKeyboardHelpContent() {
+    const contentDiv = document.getElementById('keyboard-help-content');
+    if (!contentDiv) return;
+
+    let shortcuts = [];
+
+    if (!keyboardState.currentMatch) {
+        // Match selection state
+        shortcuts = [
+            { key: '1-9 + Enter', action: 'Select Match' },
+            { key: 'Esc', action: 'Back to Bets' }
+        ];
+    } else {
+        // Outcome navigation state
+        shortcuts = [
+            { key: 'Tab', action: 'Navigate Outcomes' },
+            { key: 'Digits + Enter', action: 'Enter Bet Amount' },
+            { key: 'Enter', action: 'Submit Bet' },
+            { key: 'Esc', action: 'Cancel/Close' }
+        ];
+    }
+
+    let html = '';
+    shortcuts.forEach(shortcut => {
+        html += `
+            <div class="keyboard-shortcut">
+                <kbd>${shortcut.key}</kbd>
+                <span>${shortcut.action}</span>
+            </div>
+        `;
+    });
+
+    contentDiv.innerHTML = html;
+}
+
 function showNotification(message, type = 'info') {
     // Simple notification system - could be enhanced with toast notifications
     const alertClass = type === 'success' ? 'alert-success' : type === 'error' ? 'alert-danger' : 'alert-info';

mbetterclient/web_dashboard/templates/dashboard/verify_bet.html

@@ -150,6 +150,99 @@
         </div>
     </div>
 </div>
+
+<!-- Keyboard Shortcuts Help Panel -->
+<div id="keyboard-help-panel" class="keyboard-help-panel">
+    <div class="keyboard-help-header">
+        <i class="fas fa-keyboard me-2"></i>
+        <strong>Keyboard Shortcuts</strong>
+        <button type="button" class="btn-close btn-close-white ms-auto" onclick="toggleKeyboardHelp()"></button>
+    </div>
+    <div class="keyboard-help-content">
+        <div class="keyboard-shortcut">
+            <kbd>Esc</kbd>
+            <span>Back to Bets</span>
+        </div>
+    </div>
+</div>
+
+<style>
+.keyboard-help-panel {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: rgba(0, 123, 255, 0.95);
+    color: white;
+    border-radius: 8px;
+    padding: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1050;
+    min-width: 250px;
+    backdrop-filter: blur(10px);
+}
+
+.keyboard-help-header {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 10px 15px;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.keyboard-help-content {
+    padding: 15px;
+}
+
+.keyboard-shortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 13px;
+}
+
+.keyboard-shortcut:last-child {
+    margin-bottom: 0;
+}
+
+.keyboard-shortcut kbd {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: bold;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.keyboard-help-panel.minimized {
+    width: 50px;
+    height: 50px;
+    min-width: auto;
+    cursor: pointer;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-content,
+.keyboard-help-panel.minimized .keyboard-help-header .btn-close {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header {
+    justify-content: center;
+    padding: 0;
+    height: 50px;
+    border-radius: 50%;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header strong {
+    display: none;
+}
+
+.keyboard-help-panel.minimized .keyboard-help-header i {
+    font-size: 18px;
+}
+</style>
 {% endblock %}
 
 {% block scripts %}
@@ -196,6 +289,9 @@ document.addEventListener('DOMContentLoaded', function() {
             window.location.href = '/bets';
         }
     });
+
+    // Initialize keyboard help panel
+    initializeKeyboardHelp();
 });
 
 function generateMobileAccessQR() {
@@ -584,10 +680,36 @@ function displayBetDetails(bet) {
     modal.show();
 }
 
+function initializeKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+
+    // Auto-minimize after 10 seconds
+    setTimeout(() => {
+        if (helpPanel && !helpPanel.classList.contains('minimized')) {
+            helpPanel.classList.add('minimized');
+        }
+    }, 10000);
+
+    // Add global keyboard listener for 'h' key to toggle help
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'h' || event.key === 'H') {
+            event.preventDefault();
+            toggleKeyboardHelp();
+        }
+    });
+}
+
+function toggleKeyboardHelp() {
+    const helpPanel = document.getElementById('keyboard-help-panel');
+    if (helpPanel) {
+        helpPanel.classList.toggle('minimized');
+    }
+}
+
 function showScannerStatus(message, type) {
     const statusDiv = document.getElementById('scanner-status');
     const messageSpan = document.getElementById('scanner-message');
-    
+
     statusDiv.className = `alert alert-${type}`;
     messageSpan.textContent = message;
     statusDiv.style.display = 'block';