luca/qr-code-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first working version

Browse source
This commit is contained in:
Luca 2024-11-10 14:26:28 +01:00
parent f6e893f14f
commit 70ddc43728
8 changed files with 1554 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

24
.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

1433
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

21
package.json Normal file
View file

@ -0,0 +1,21 @@
{
"name": "qr-code-tools",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"deploy": "rsync -av --rsync-path='mkdir -p /tmp/qr.luca-junge.de-build/ && rsync' ./dist/* server:/tmp/qr.luca-junge.de-build && ssh server 'sudo cp -r /tmp/qr.luca-junge.de-build/* ~/www/qr.luca-junge.de/'"
},
"devDependencies": {
"sass": "1.77.6",
"vite": "^5.4.10"
},
"dependencies": {
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.3",
"qrcode": "^1.5.4"
}
}

28
src/index.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>QR Code Tools - qr.luca-junge.de</title>
<script type="module" src="./js/main.js"></script>
</head>
<body>
<div class="container py-4 px-3 text-center mx-auto">
<h1>QR Code Tools</h1>
<div class="row">
<div class="col-12">
<form>
<label>Input URL</label>
<input id="url-input" placeholder="https://..." />
<button id="generate-button" class="btn btn-primary">
Generate
</button>
</form>
</div>
<div class="col-12">
<img id="qr-code-image" src="/frame.png" />
</div>
</div>
</div>
</body>
</html>

33
src/js/main.js Normal file
View file

@ -0,0 +1,33 @@
// Import our custom CSS
import '../scss/styles.scss';
import QRCode from 'qrcode';
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap';
// You can also import JavaScript plugins individually as needed to keep bundle sizes down:
//import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
//import { Tooltip, Toast, Popover } from 'bootstrap';
let button = document.querySelector('#generate-button');
let input = document.querySelector('#url-input');
let image = document.querySelector('#qr-code-image');
button.addEventListener('click', generateQRCode);
button.addEventListener('submit', generateQRCode);
function generateQRCode(event) {
event.preventDefault();
console.log('Generating QR Code');
console.log(input.value.toString());
QRCode.toDataURL(input.value.toString())
.then((url) => {
image.src = url;
})
.catch((err) => {
console.error(err);
});
}

BIN
src/public/frame.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

4
src/scss/styles.scss Normal file
View file

@ -0,0 +1,4 @@
// Import all of Bootstrap's CSS
// You can also import our stylesheets individually if you want.
// Read the Sass import docs for details.
@import 'bootstrap/scss/bootstrap';

11
vite.config.js Normal file
View file

@ -0,0 +1,11 @@
import { resolve } from 'path';
export default {
root: resolve(__dirname, 'src'),
build: {
outDir: '../dist',
},
server: {
port: 8080,
},
};