Skip to content

Commit cae810f

Browse files
BallwictbBallwictb
authored
Add files via upload
1 parent 4f8598f commit cae810f

File tree

4 files changed

+293
-0
lines changed

4 files changed

+293
-0
lines changed

‎css/style.css

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
body {
2+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
3+
min-height: 100vh;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
8+
}
9+
10+
.container {
11+
max-width: 800px;
12+
background-color: rgba(255, 255, 255, 0.9);
13+
border-radius: 20px;
14+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
15+
padding: 40px;
16+
transition: all 0.3s ease;
17+
}
18+
19+
h1 {
20+
font-weight: 700;
21+
color: #333;
22+
margin-bottom: 30px;
23+
text-align: center;
24+
text-transform: uppercase;
25+
letter-spacing: 2px;
26+
}
27+
28+
.form-label {
29+
font-weight: 600;
30+
color: #555;
31+
}
32+
33+
.form-control {
34+
border: none;
35+
border-bottom: 2px solid #ddd;
36+
border-radius: 0;
37+
padding: 10px 5px;
38+
transition: all 0.3s ease;
39+
}
40+
41+
.form-control:focus {
42+
box-shadow: none;
43+
border-color: #007bff;
44+
}
45+
46+
.btn-generate {
47+
background: linear-gradient(45deg, #007bff, #00c6ff);
48+
border: none;
49+
color: white;
50+
padding: 12px 0;
51+
font-weight: 600;
52+
letter-spacing: 1px;
53+
transition: all 0.3s ease;
54+
}
55+
56+
.btn-generate:hover {
57+
transform: translateY(-2px);
58+
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
59+
}
60+
61+
62+
63+
.qr-container {
64+
background-color: #f8f9fa;
65+
border-radius: 20px;
66+
padding: 20px;
67+
display: flex;
68+
flex-direction: column;
69+
justify-content: center;
70+
align-items: center;
71+
min-height: 250px;
72+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
73+
border: 5px solid #007bff;
74+
}
75+
76+
#qrCode {
77+
max-width: 100%;
78+
height: auto;
79+
transition: all 0.3s ease;
80+
border-radius: 15px;
81+
border: 10px solid white;
82+
}
83+
84+
.input-group-text {
85+
background-color: transparent;
86+
border: none;
87+
border-bottom: 2px solid #ddd;
88+
border-radius: 0;
89+
}
90+
91+
.btn-action {
92+
margin-top: 10px;
93+
width: 100%;
94+
padding: 10px;
95+
border: none;
96+
border-radius: 5px;
97+
font-weight: 600;
98+
transition: all 0.3s ease;
99+
}
100+
101+
.btn-download {
102+
background-color: #28a745;
103+
color: white;
104+
}
105+
106+
.btn-whatsapp {
107+
background-color: #25D366;
108+
color: white;
109+
}
110+
111+
.btn-discord {
112+
background-color: #7289DA;
113+
color: white;
114+
}
115+
116+
.btn-action:hover {
117+
transform: translateY(-2px);
118+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
119+
}
120+
121+
footer {
122+
background-color: rgba(255, 255, 255, 0.9);
123+
padding: 20px;
124+
text-align: center;
125+
border-radius: 0 0 20px 20px;
126+
transition: all 0.3s ease;
127+
margin-top: 40px;
128+
}
129+
130+
footer p {
131+
margin-top: 10px;
132+
font-weight: 600;
133+
color: #555;
134+
font-size: 0.9rem;
135+
}
136+
137+
.social-links a {
138+
color: #333;
139+
margin: 0 15px;
140+
font-size: 1.5rem;
141+
transition: color 0.3s ease;
142+
}
143+
144+
.social-links a:hover {
145+
color: #007bff;
146+
}

‎img/logo.ico

66.1 KB
Binary file not shown.

‎index.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Generador de QR</title>
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9+
<link rel="stylesheet"
10+
href="https://cdn.jsdelivr.net/gh/Ballwictb/font-awesome-sixball-v2@main/six-rp/css/all.min.css">
11+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/qrious.min.js"></script>
12+
<link rel="stylesheet" href="./css/style.css">
13+
<link rel="shortcut icon" href="./img/logo.ico" type="image/x-icon">
14+
</head>
15+
16+
<body>
17+
<div class="container">
18+
<h1><i class="fas fa-qrcode me-2"></i>Generador de QR</h1>
19+
<div class="row">
20+
<div class="col-md-6">
21+
<div class="mb-3">
22+
<label for="urlInput" class="form-label"><i class="fas fa-link me-2"></i>URL</label>
23+
<div class="input-group">
24+
<span class="input-group-text"><i class="fas fa-globe"></i></span>
25+
<input type="text" class="form-control" id="urlInput" placeholder="Ingrese la URL"
26+
oninput="generateQR()">
27+
</div>
28+
</div>
29+
<div class="mb-3">
30+
<label for="sizeInput" class="form-label"><i class="fas fa-expand-arrows-alt me-2"></i>Tamaño
31+
(px)</label>
32+
<input type="range" class="form-range" id="sizeInput" value="200" min="100" max="400"
33+
oninput="generateQR()">
34+
<output for="sizeInput" id="sizeOutput">200</output>
35+
</div>
36+
<div class="mb-3">
37+
<label for="fgColor" class="form-label"><i class="fas fa-fill-drip me-2"></i>Color del QR</label>
38+
<input type="color" class="form-control form-control-color w-100" id="fgColor" value="#000000"
39+
oninput="generateQR()">
40+
</div>
41+
<div class="mb-3">
42+
<label for="bgColor" class="form-label"><i class="fas fa-fill me-2"></i>Color de fondo</label>
43+
<input type="color" class="form-control form-control-color w-100" id="bgColor" value="#ffffff"
44+
oninput="generateQR()">
45+
</div>
46+
<div class="mb-3">
47+
<label for="imageInput" class="form-label"><i class="fas fa-image me-2"></i>Imagen central</label>
48+
<input type="file" class="form-control" id="imageInput" accept="image/*" onchange="generateQR()">
49+
</div>
50+
51+
</div>
52+
<div class="col-md-6">
53+
<div class="qr-container">
54+
<canvas id="qrCode"></canvas>
55+
<button class="btn btn-action btn-download" onclick="downloadQR()">
56+
<i class="fas fa-download me-2"></i>Descargar PNG
57+
</button>
58+
<button class="btn btn-action btn-whatsapp" onclick="shareWhatsApp()">
59+
<i class="fab fa-whatsapp me-2"></i>Compartir en WhatsApp
60+
</button>
61+
<button class="btn btn-action btn-discord" onclick="shareDiscord()">
62+
<i class="fab fa-discord me-2"></i>Compartir en Discord
63+
</button>
64+
</div>
65+
</div>
66+
</div>
67+
<footer>
68+
<div class="social-links">
69+
<a href="https://github.com/Ballwictb" target="_blank"><i class="fab fa-github"></i></a>
70+
<a href="https://gravatar.com/ballwictb" target="_blank"><i class="fa-solid fa-user-plus"></i></a>
71+
<a href="https://ieslaarboleda.com" target="_blank"><i class="fa-regular fa-globe"></i></a>
72+
</div>
73+
<p>&copy; 2024 sixball-QR.</p>
74+
</footer>
75+
76+
</div>
77+
<script src="./js/qr.js"></script>
78+
</body>
79+
80+
</html>

‎js/qr.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
let qr;
2+
let image;
3+
4+
function generateQR() {
5+
const url = document.getElementById('urlInput').value || 'https://gravatar.com/ballwictb';
6+
const size = document.getElementById('sizeInput').value;
7+
const fgColor = document.getElementById('fgColor').value;
8+
const bgColor = document.getElementById('bgColor').value;
9+
const imageInput = document.getElementById('imageInput').files[0];
10+
11+
document.getElementById('sizeOutput').value = size;
12+
13+
qr = new QRious({
14+
element: document.getElementById('qrCode'),
15+
value: url,
16+
size: parseInt(size),
17+
foreground: fgColor,
18+
background: bgColor
19+
});
20+
21+
if (imageInput) {
22+
const reader = new FileReader();
23+
reader.onload = function (event) {
24+
image = new Image();
25+
image.src = event.target.result;
26+
image.onload = function () {
27+
drawImageOnQR();
28+
};
29+
};
30+
reader.readAsDataURL(imageInput);
31+
}
32+
}
33+
34+
function drawImageOnQR() {
35+
const canvas = document.getElementById('qrCode');
36+
const context = canvas.getContext('2d');
37+
const imgSize = canvas.width * 0.2;
38+
const x = (canvas.width - imgSize) / 2;
39+
const y = (canvas.height - imgSize) / 2;
40+
41+
context.beginPath();
42+
context.arc(x + imgSize / 2, y + imgSize / 2, imgSize / 2, 0, Math.PI * 2);
43+
context.clip();
44+
context.drawImage(image, x, y, imgSize, imgSize);
45+
}
46+
47+
function downloadQR() {
48+
const canvas = document.getElementById('qrCode');
49+
const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
50+
const link = document.createElement('a');
51+
link.download = 'six-code.png';
52+
link.href = image;
53+
link.click();
54+
}
55+
56+
function shareWhatsApp() {
57+
const url = document.getElementById('urlInput').value || 'https://gravatar.com/ballwictb';
58+
const whatsappUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(url)}`;
59+
window.open(whatsappUrl, '_blank');
60+
}
61+
62+
function shareDiscord() {
63+
const url = document.getElementById('urlInput').value || 'https://gravatar.com/ballwictb';
64+
alert('Para compartir en Discord, copia este enlace y pégalo en el chat de Discord:\n\n' + url);
65+
}
66+
67+
generateQR();

0 commit comments

Comments
 (0)