Initial Commit
This commit is contained in:
288
barcode.html
Normal file
288
barcode.html
Normal file
@@ -0,0 +1,288 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user