feat: add initial version of QRMaker web app
Introduced QRMaker, a simple web app for generating QR codes from user input. Key features include real-time QR code generation, multi-line input, and responsive design using Bootstrap. Added initial project setup with HTML, CSS, JS, and a README for setup and usage instructions.
This commit is contained in:
commit
a2335a7082
GPG key ID:
ECBCC9082395383F
4 changed files with 157 additions and 0 deletions
61
README.md
Normal file
61
README.md
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
# QRMaker
|
||||||
|
|
||||||
|
A simple web application that allows users to generate QR codes from the text they input. The application is built using Bootstrap for styling and QRCode.js for generating the QR codes.
|
||||||
|
|
||||||
|
The QR code is generated locally in the browser, no data is sent to a server.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Real-time QR code generation based on user input.
|
||||||
|
- Multi-line input.
|
||||||
|
- Responsive design with Bootstrap.
|
||||||
|
|
||||||
|
## Demo
|
||||||
|
|
||||||
|
You can view a live version of the project [here](https://qrmaker.private.coffee).
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
To run this project locally, follow these steps:
|
||||||
|
|
||||||
|
1. **Clone the repository:**
|
||||||
|
|
||||||
|
```sh
|
||||||
|
git clone https://git.private.coffee/PrivateCoffee/QRMaker.git
|
||||||
|
cd QRMaker
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Open `index.html` in your browser:**
|
||||||
|
```sh
|
||||||
|
open index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
1. Open the web page.
|
||||||
|
2. Enter text into the multi-line input field.
|
||||||
|
3. The QR code will be generated automatically as you type.
|
||||||
|
4. Done! You can now download the QR code or scan it directly from the screen.
|
||||||
|
|
||||||
|
## Technologies Used
|
||||||
|
|
||||||
|
- HTML
|
||||||
|
- CSS (Bootstrap)
|
||||||
|
- JavaScript (QRCode.js)
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Contributions are welcome! Please fork the repository and create a pull request with your changes.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
|
||||||
|
|
||||||
|
## Acknowledgements
|
||||||
|
|
||||||
|
- [Bootstrap](https://getbootstrap.com/)
|
||||||
|
- [QRCode.js](https://davidshimjs.github.io/qrcodejs/)
|
||||||
|
|
||||||
|
## Contact
|
||||||
|
|
||||||
|
For any questions or feedback, please open an issue or join our [Matrix room](https://matrix.pcof.fi/#/#private.coffee:private.coffee).
|
||||||
46
index.html
Normal file
46
index.html
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>QRMaker</title>
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link href="https://nobsdelivr.private.coffee/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<!-- Custom CSS -->
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card">
|
||||||
|
<h1 class="text-center">QR Code Generator</h1>
|
||||||
|
<div class="form-group textarea-container">
|
||||||
|
<label for="text-input">Enter text to generate QR code:</label>
|
||||||
|
<textarea class="form-control" id="text-input" rows="5" placeholder="Type something..."></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="qr-code-container">
|
||||||
|
<div id="qrcode"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>Brought to you by <a href="https://private.coffee" target="_blank">Private.coffee</a></p>
|
||||||
|
<p>Source code available on <a href="https://git.private.coffee/PrivateCoffee/QRMaker" target="_blank">Private.coffee Git</a></p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- QRCode.js library -->
|
||||||
|
<script src="https://nobsdelivr.private.coffee/npm/qrcodejs/qrcode.min.js"></script>
|
||||||
|
<!-- Bootstrap JS and dependencies -->
|
||||||
|
<script src="https://nobsdelivr.private.coffee/npm/jquery@3.7.1/dist/jquery.min.js"></script>
|
||||||
|
<script src="https://nobsdelivr.private.coffee/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
|
||||||
|
<script src="https://nobsdelivr.private.coffee/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
|
||||||
|
<!-- Custom JS -->
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
22
script.js
Normal file
22
script.js
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const textInput = document.getElementById('text-input');
|
||||||
|
const qrCodeContainer = document.getElementById('qrcode');
|
||||||
|
|
||||||
|
const qrCode = new QRCode(qrCodeContainer, {
|
||||||
|
text: "",
|
||||||
|
width: 256,
|
||||||
|
height: 256,
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateQRCode() {
|
||||||
|
const text = textInput.value;
|
||||||
|
qrCode.clear();
|
||||||
|
if (text) {
|
||||||
|
qrCode.makeCode(text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
textInput.addEventListener('input', updateQRCode);
|
||||||
|
|
||||||
|
updateQRCode();
|
||||||
|
});
|
||||||
28
style.css
Normal file
28
style.css
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
body {
|
||||||
|
padding-top: 50px;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
.qr-code-container {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.textarea-container {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
background-color: #343a40;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 0;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
footer a {
|
||||||
|
color: #ffc107;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue