289 lines
8.7 KiB
HTML
289 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="main.css">
|
|
<title>Barcode Scanner</title>
|
|
<style>
|
|
.scanner-container {
|
|
background: #f9f9f9;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
max-width: 600px;
|
|
margin: 30px auto;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.scanner-header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.scanner-header h3 {
|
|
color: #333;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.scanner-header p {
|
|
color: #666;
|
|
font-size: 14px;
|
|
margin: 10px 0 0 0;
|
|
}
|
|
|
|
.barcode-input-wrapper {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.barcode-input-wrapper label {
|
|
display: block;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.barcode-input {
|
|
width: 100%;
|
|
padding: 15px;
|
|
border: 2px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 18px;
|
|
font-family: 'Courier New', monospace;
|
|
box-sizing: border-box;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.barcode-input:focus {
|
|
outline: none;
|
|
border-color: #4CAF50;
|
|
box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
|
|
background-color: #fffef0;
|
|
}
|
|
|
|
.scanner-status {
|
|
text-align: center;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
background-color: #e8f5e9;
|
|
border: 1px solid #c8e6c9;
|
|
color: #2e7d32;
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.scanner-status.active {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
background-color: #e8f5e9;
|
|
}
|
|
50% {
|
|
background-color: #c8e6c9;
|
|
}
|
|
}
|
|
|
|
.scanner-info {
|
|
background-color: #e3f2fd;
|
|
border: 1px solid #bbdefb;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin-top: 20px;
|
|
font-size: 13px;
|
|
color: #1565c0;
|
|
}
|
|
|
|
.scanner-info h4 {
|
|
margin: 0 0 10px 0;
|
|
color: #0d47a1;
|
|
}
|
|
|
|
.scanner-info ul {
|
|
margin: 10px 0 0 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.scanner-info li {
|
|
margin: 5px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.console-hint {
|
|
background-color: #fff3e0;
|
|
border: 1px solid #ffe0b2;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
margin-top: 15px;
|
|
font-size: 13px;
|
|
color: #e65100;
|
|
}
|
|
|
|
.console-hint strong {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: #d84315;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.btn {
|
|
flex: 1;
|
|
padding: 12px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #ddd;
|
|
color: #333;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #bbb;
|
|
}
|
|
|
|
.open-console {
|
|
background-color: #2196F3;
|
|
color: white;
|
|
}
|
|
|
|
.open-console:hover {
|
|
background-color: #0b7dda;
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 600px) {
|
|
.scanner-container {
|
|
padding: 20px;
|
|
margin: 20px 10px;
|
|
}
|
|
|
|
.barcode-input {
|
|
font-size: 16px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.button-group {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="navbar-placeholder"></div>
|
|
<div id="page-content">
|
|
<h2>Barcode Scanner</h2>
|
|
<hr>
|
|
|
|
<div class="scanner-container">
|
|
<div class="scanner-header">
|
|
<h3>📱 Barcode Scanner</h3>
|
|
<p>Scan a barcode or manually enter one below</p>
|
|
</div>
|
|
|
|
<div class="scanner-status active" id="scanner-status">
|
|
✓ Scanner Ready - Click below and scan a barcode
|
|
</div>
|
|
|
|
<div class="barcode-input-wrapper">
|
|
<label for="barcode-input">Barcode Input:</label>
|
|
<input
|
|
type="text"
|
|
id="barcode-input"
|
|
class="barcode-input"
|
|
placeholder="Scan or type barcode here..."
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
>
|
|
</div>
|
|
|
|
<div class="scanner-info">
|
|
<h4>How to Use:</h4>
|
|
<ul>
|
|
<li><strong>Keyboard Entry:</strong> Type or paste a barcode and press Enter</li>
|
|
<li><strong>Hardware Scanner:</strong> Plug in a barcode scanner and scan directly</li>
|
|
<li><strong>Testing:</strong> Scanned barcodes are logged to the browser console (Press F12)</li>
|
|
<li><strong>Input Focus:</strong> The input field automatically refocuses after each scan</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="console-hint">
|
|
<strong>🔍 View Console Output:</strong>
|
|
Press F12 (or Cmd+Option+I on Mac) to open Developer Tools. Check the Console tab to see scanned barcodes logged with timestamps and input type detection.
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button type="button" class="btn open-console" id="open-console-btn">
|
|
📟 Open Console (F12)
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" id="clear-input-btn">
|
|
🗑️ Clear Input
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="navbar.js"></script>
|
|
<script type="module">
|
|
import { initializeBarcodeScanner, logBarcodeToConsole } from './barcode-scanner.js';
|
|
|
|
const barcodeInput = document.getElementById('barcode-input');
|
|
const scannerStatus = document.getElementById('scanner-status');
|
|
const openConsoleBtn = document.getElementById('open-console-btn');
|
|
const clearInputBtn = document.getElementById('clear-input-btn');
|
|
|
|
/**
|
|
* Callback when a barcode is scanned
|
|
* @param {string} barcode - The scanned barcode value
|
|
* @param {string} inputType - The type of input device
|
|
*/
|
|
function onBarcodeScanned(barcode, inputType) {
|
|
// Update status temporarily
|
|
const originalStatus = scannerStatus.textContent;
|
|
scannerStatus.textContent = `✓ Barcode scanned: ${barcode}`;
|
|
scannerStatus.style.backgroundColor = '#a5d6a7';
|
|
|
|
// Reset after 2 seconds
|
|
setTimeout(() => {
|
|
scannerStatus.textContent = originalStatus;
|
|
scannerStatus.style.backgroundColor = '';
|
|
}, 2000);
|
|
}
|
|
|
|
// Initialize the barcode scanner
|
|
initializeBarcodeScanner(barcodeInput, onBarcodeScanned);
|
|
|
|
// Clear input button
|
|
clearInputBtn.addEventListener('click', () => {
|
|
barcodeInput.value = '';
|
|
barcodeInput.focus();
|
|
});
|
|
|
|
// Open console button - opens DevTools
|
|
openConsoleBtn.addEventListener('click', () => {
|
|
console.log('%c📊 Barcode Scanner Console\n\nUse this console to view scanned barcodes and their details.\nStart scanning to see logs appear here.', 'color: #4CAF50; font-size: 14px; font-weight: bold; line-height: 1.8;');
|
|
// In a real app, we can't programmatically open DevTools for security reasons
|
|
// But we can log a helpful message and suggest the user press F12
|
|
alert('Press F12 (or Cmd+Option+I on Mac) to open the Developer Tools Console.\n\nScanned barcodes will appear in the Console tab.');
|
|
});
|
|
|
|
// Log initial message
|
|
console.log('%c🎯 Barcode Scanner Ready', 'color: #4CAF50; font-weight: bold; font-size: 16px;');
|
|
console.log('Scan a barcode to see it logged here with timestamp and input type detection.');
|
|
</script>
|
|
</body>
|
|
</html>
|