feat: Add visual clear form tip with OS detection

Added visible tip in interface showing correct keyboard shortcut:
- Automatically detects Mac vs Windows/Linux
- Shows 'Cmd + Shift + R' on Mac
- Shows 'Ctrl + Shift + R' on Windows/Linux
- Clean, non-intrusive design with blue accent
- Positioned below 'Generar Venta' button

Technical implementation:
- CSS styling for clear-form-tip class
- JavaScript OS detection using navigator.platform
- Dynamic content update based on detected OS
- Updated cache-busting version for immediate loading

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Marco Gallegos
2025-09-09 16:48:16 -06:00
parent 1676eec8b6
commit f884117a55
3 changed files with 53 additions and 2 deletions

18
app.js
View File

@@ -3195,4 +3195,20 @@ function addAnticipo() {
}
document.addEventListener('DOMContentLoaded', initializeApp);
// Detectar sistema operativo y mostrar shortcut correcto
function setCorrectClearShortcut() {
const shortcutElement = document.getElementById('clear-shortcut');
if (shortcutElement) {
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
if (isMac) {
shortcutElement.textContent = 'Cmd + Shift + R';
} else {
shortcutElement.textContent = 'Ctrl + Shift + R';
}
}
}
document.addEventListener('DOMContentLoaded', () => {
initializeApp();
setCorrectClearShortcut();
});

View File

@@ -343,6 +343,13 @@
<span>Generar Venta</span>
</button>
</div>
<!-- Tip para limpiar formulario -->
<div class="clear-form-tip">
<small>💡 <strong>Para limpiar:</strong>
<span id="clear-shortcut">Ctrl + Shift + R</span>
</small>
</div>
</form>
</div> <!-- fin checkout-panel -->
@@ -768,6 +775,6 @@
<div id="printArea" class="no-print"></div>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1/build/qrcode.min.js"></script>
<script type="module" src="app.js?v=1757462000"></script>
<script type="module" src="app.js?v=1757470000"></script>
</body>
</html>

View File

@@ -1927,6 +1927,34 @@ table tbody tr:hover {
font-size: 12px;
}
/* Tip para limpiar formulario */
.clear-form-tip {
text-align: center;
margin-top: 12px;
padding: 8px 12px;
background: #f8f9fa;
border-left: 3px solid #007bff;
border-radius: 4px;
color: #495057;
font-size: 12px;
}
.clear-form-tip strong {
color: #212529;
}
#clear-shortcut {
display: inline-block;
background: #e9ecef;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-weight: bold;
color: #343a40;
border: 1px solid #ced4da;
margin-left: 4px;
}
/* --- Checkout Panel --- */
.checkout-panel {
background: #fff;