hatter/tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔄 Add refresh button and styling for QR Code Parser interface

Browse Source
This commit is contained in:
Hatter Jiang
2026-04-15 00:14:10 +08:00
parent 08ac5a5882
commit d6798e31de
1 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
parse-qr/index.html
+28 -2
View File
@@ -49,6 +49,24 @@
text-align: center; text-align: center;
color: #333; color: #333;
margin-bottom: 10px; margin-bottom: 10px;
position: relative;
}
.refresh-btn {
position: absolute;
top: -30px;
right: -30px;
background: transparent;
border: none;
font-size: 20px;
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: background 0.2s;
}
.refresh-btn:hover {
background: #f0f0f0;
} }
.subtitle { .subtitle {
@@ -60,7 +78,7 @@
.drop-zone { .drop-zone {
border: 3px dashed #667eea; border: 3px dashed #667eea;
border-radius: 12px; border-radius: 12px;
padding: 60px 20px; padding: 45px 20px;
text-align: center; text-align: center;
background: #f8f9ff; background: #f8f9ff;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -361,7 +379,10 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>🔍 QR Code Parser</h1> <h1>
🔍 QR Code Parser
<button class="refresh-btn" id="refreshBtn" title="Refresh">🔄</button>
</h1>
<p class="subtitle">Drag & drop, paste, or click to browse an image</p> <p class="subtitle">Drag & drop, paste, or click to browse an image</p>
<div class="drop-zone" id="dropZone"> <div class="drop-zone" id="dropZone">
@@ -407,6 +428,7 @@
const error = document.getElementById('error'); const error = document.getElementById('error');
const loading = document.getElementById('loading'); const loading = document.getElementById('loading');
const cameraBtn = document.getElementById('cameraBtn'); const cameraBtn = document.getElementById('cameraBtn');
const refreshBtn = document.getElementById('refreshBtn');
const cameraModal = document.getElementById('cameraModal'); const cameraModal = document.getElementById('cameraModal');
const closeCamera = document.getElementById('closeCamera'); const closeCamera = document.getElementById('closeCamera');
const video = document.getElementById('video'); const video = document.getElementById('video');
@@ -637,6 +659,10 @@
}); });
}); });
refreshBtn.addEventListener('click', () => {
location.reload();
});
cameraBtn.addEventListener('click', async () => { cameraBtn.addEventListener('click', async () => {
try { try {
stream = await navigator.mediaDevices.getUserMedia({ stream = await navigator.mediaDevices.getUserMedia({