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