Skip to content

Commit 6a29be1

Browse files
CodingNORVINSCodingNORVINS
committed
added favikon cool video improved on EVERYTHING almost finished project 20:35 03/08/2025£
1 parent 2249da7 commit 6a29be1

File tree

8 files changed

+977
-180
lines changed

8 files changed

+977
-180
lines changed

‎audio/audio.mp3‎

302 KB
Binary file not shown.

‎css/main.css‎

Lines changed: 373 additions & 70 deletions
Large diffs are not rendered by default.

‎css/main.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎favicon.png‎

210 KB
Loading

‎index.html‎

Lines changed: 147 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,164 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
8+
/>
69
<title>QR Code Generator</title>
7-
8-
<!-- Google Fonts -->
10+
<link rel="stylesheet" href="css/main.css" />
11+
<link
12+
rel="stylesheet"
13+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
14+
/>
915
<link
10-
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@600&display=swap"
16+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
1117
rel="stylesheet"
1218
/>
19+
<link rel="icon" type="image/png" href="favicon.png" />
20+
<style>
21+
a,
22+
a:hover,
23+
a:visited,
24+
a:active {
25+
text-decoration: none;
26+
color: inherit;
27+
}
1328

14-
<link rel="stylesheet" href="css/main.css" />
29+
#bg-video {
30+
position: fixed;
31+
top: 0;
32+
left: 0;
33+
width: 100vw;
34+
height: 100vh;
35+
object-fit: cover;
36+
z-index: -1;
37+
opacity: 0;
38+
transition: opacity 1s ease;
39+
}
40+
41+
.video-active {
42+
opacity: 1 !important;
43+
}
44+
</style>
1545
</head>
1646
<body>
47+
<!-- Video Background -->
48+
<video id="bg-video" loop muted>
49+
<source src="video/video.mp4" type="video/mp4" />
50+
Your browser does not support HTML5 video.
51+
</video>
52+
1753
<div class="container">
18-
<h1>QR Code Generator</h1>
19-
<p>Enter a URL or text below:</p>
20-
<input type="text" id="qr-input" placeholder="Enter your URL or text" />
21-
<button id="generate-btn">Generate QR Code</button>
22-
23-
<div class="qr-box" id="qr-box">
24-
<img id="qr-img" src="" alt="QR Code" />
25-
<button id="download-btn">Download QR Code</button>
54+
<!-- Favicon Above Generator -->
55+
56+
<div class="card">
57+
<header>
58+
<div class="logo">
59+
<i class="fas fa-qrcode"></i>
60+
</div>
61+
<h1>QR Code Generator</h1>
62+
<p class="subtitle">Transform links into scannable codes instantly</p>
63+
</header>
64+
65+
<div class="form">
66+
<div class="input-group">
67+
<i class="fas fa-link"></i>
68+
<input
69+
type="text"
70+
spellcheck="false"
71+
placeholder="Paste your URL here..."
72+
/>
73+
</div>
74+
<button class="generate-btn">
75+
<i class="fas fa-bolt"></i>
76+
<span>Generate QR Code</span>
77+
</button>
78+
</div>
79+
80+
<div class="qr-code">
81+
<div class="qr-placeholder">
82+
<i class="fas fa-qrcode"></i>
83+
<p>Your QR will appear here</p>
84+
</div>
85+
<img src="" alt="qr-code" />
86+
<div class="qr-actions">
87+
<button class="download-btn">
88+
<i class="fas fa-download"></i> Download
89+
</button>
90+
<button class="copy-btn"><i class="fas fa-copy"></i> Copy</button>
91+
</div>
92+
</div>
2693
</div>
2794
</div>
2895

96+
<footer class="footer">
97+
<div class="footer-content">
98+
<p class="made-by">Made by <span>NORVIN</span></p>
99+
<div class="social-links">
100+
<a
101+
href="https://github.com/CodingNORVIN"
102+
target="_blank"
103+
rel="noopener noreferrer"
104+
class="github"
105+
>
106+
<i class="fab fa-github"></i>
107+
</a>
108+
<a
109+
href="https://t.me/norvin_adapter"
110+
target="_blank"
111+
rel="noopener noreferrer"
112+
class="telegram"
113+
>
114+
<i class="fab fa-telegram"></i>
115+
</a>
116+
</div>
117+
</div>
118+
119+
<audio id="clickSound" preload="auto">
120+
<source src="audio/audio.mp3" type="audio/mpeg" />
121+
</audio>
122+
</footer>
123+
29124
<script src="js/script.js"></script>
125+
<script>
126+
window.addEventListener('load', function () {
127+
document.body.classList.add('animation-ready');
128+
const clickSound = document.getElementById('clickSound');
129+
const bgVideo = document.getElementById('bg-video');
130+
131+
clickSound.volume = 0.3;
132+
bgVideo.volume = 0;
133+
134+
document.querySelectorAll('.footer a').forEach(link => {
135+
link.addEventListener('click', e => {
136+
if (link.getAttribute('target') === '_blank') {
137+
e.preventDefault();
138+
139+
// Play sound and show video
140+
clickSound.currentTime = 0;
141+
clickSound
142+
.play()
143+
.then(() => {
144+
bgVideo.currentTime = 0;
145+
bgVideo.classList.add('video-active');
146+
bgVideo.play();
147+
148+
// Open link immediately in new tab
149+
const newTab = window.open(link.href, '_blank');
150+
151+
// Hide video when audio ends
152+
setTimeout(() => {
153+
bgVideo.classList.remove('video-active');
154+
bgVideo.pause();
155+
if (newTab) newTab.focus();
156+
}, clickSound.duration * 1000);
157+
})
158+
.catch(e => console.log('Media play prevented:', e));
159+
}
160+
});
161+
});
162+
});
163+
</script>
30164
</body>
31165
</html>

‎js/script.js‎

Lines changed: 127 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,138 @@
1-
const input = document.getElementById('qr-input');
2-
const generateBtn = document.getElementById('generate-btn');
3-
const qrImg = document.getElementById('qr-img');
4-
const qrBox = document.getElementById('qr-box');
5-
const downloadBtn = document.getElementById('download-btn');
6-
7-
generateBtn.addEventListener('click', () => {
8-
const value = input.value.trim();
9-
if (!value) return;
10-
11-
const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=170x170&data=${encodeURIComponent(
12-
value
1+
// DOM Elements
2+
const qrInput = document.querySelector('.form input');
3+
const generateBtn = document.querySelector('.generate-btn');
4+
const qrCode = document.querySelector('.qr-code');
5+
const qrImg = qrCode.querySelector('img');
6+
const downloadBtn = document.querySelector('.download-btn');
7+
const copyBtn = document.querySelector('.copy-btn');
8+
const footerLinks = document.querySelectorAll('.footer a');
9+
const clickSound = new Audio('audio/audio.mp3');
10+
11+
// Variables
12+
let preValue = '';
13+
let isGenerating = false;
14+
15+
// Initialize audio settings
16+
clickSound.volume = 0.3;
17+
18+
// Generate QR Code
19+
const generateQR = () => {
20+
const qrValue = qrInput.value.trim();
21+
22+
if (!qrValue || preValue === qrValue || isGenerating) return;
23+
24+
isGenerating = true;
25+
preValue = qrValue;
26+
27+
generateBtn.innerHTML =
28+
'<i class="fas fa-spinner fa-spin"></i> Generating...';
29+
generateBtn.disabled = true;
30+
31+
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
32+
qrValue
1333
)}`;
14-
qrImg.src = qrUrl;
1534

1635
qrImg.onload = () => {
17-
qrBox.style.display = 'flex'; // show QR and download button
36+
qrCode.classList.add('active');
37+
generateBtn.innerHTML = '<i class="fas fa-bolt"></i> Generate QR Code';
38+
generateBtn.disabled = false;
39+
isGenerating = false;
1840
};
19-
});
2041

21-
downloadBtn.addEventListener('click', () => {
22-
const src = qrImg.src;
23-
if (!src) return;
42+
qrImg.onerror = () => {
43+
generateBtn.innerHTML =
44+
'<i class="fas fa-exclamation-circle"></i> Error! Try Again';
45+
setTimeout(() => {
46+
generateBtn.innerHTML = '<i class="fas fa-bolt"></i> Generate QR Code';
47+
generateBtn.disabled = false;
48+
isGenerating = false;
49+
}, 2000);
50+
};
51+
};
52+
53+
// Download QR Code
54+
const downloadQR = () => {
55+
if (!qrImg.src || !qrCode.classList.contains('active')) return;
2456

2557
const link = document.createElement('a');
26-
link.href = src;
27-
link.download = 'qr-code.png';
58+
link.href = qrImg.src;
59+
link.download = `qr-code-${Date.now()}.png`;
2860
document.body.appendChild(link);
2961
link.click();
3062
document.body.removeChild(link);
63+
64+
downloadBtn.innerHTML = '<i class="fas fa-check"></i> Downloaded!';
65+
setTimeout(() => {
66+
downloadBtn.innerHTML = '<i class="fas fa-download"></i> Download';
67+
}, 2000);
68+
};
69+
70+
// Copy QR Code to Clipboard
71+
const copyQR = async () => {
72+
if (!qrImg.src || !qrCode.classList.contains('active')) return;
73+
74+
try {
75+
const response = await fetch(qrImg.src);
76+
const blob = await response.blob();
77+
78+
await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
79+
80+
copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
81+
setTimeout(() => {
82+
copyBtn.innerHTML = '<i class="fas fa-copy"></i> Copy';
83+
}, 2000);
84+
} catch (err) {
85+
copyBtn.innerHTML = '<i class="fas fa-times"></i> Failed';
86+
setTimeout(() => {
87+
copyBtn.innerHTML = '<i class="fas fa-copy"></i> Copy';
88+
}, 2000);
89+
}
90+
};
91+
92+
// Play click sound with error handling
93+
const playClickSound = () => {
94+
try {
95+
clickSound.currentTime = 0;
96+
clickSound.play().catch(e => console.log('Audio play prevented:', e));
97+
} catch (err) {
98+
console.log('Audio error:', err);
99+
}
100+
};
101+
102+
// Event Listeners
103+
generateBtn.addEventListener('click', generateQR);
104+
downloadBtn.addEventListener('click', downloadQR);
105+
copyBtn.addEventListener('click', copyQR);
106+
107+
qrInput.addEventListener('keyup', e => {
108+
if (!qrInput.value.trim()) {
109+
qrCode.classList.remove('active');
110+
preValue = '';
111+
}
112+
if (e.key === 'Enter') generateQR();
113+
});
114+
115+
// Add sound to footer links
116+
footerLinks.forEach(link => {
117+
link.addEventListener('click', e => {
118+
if (link.getAttribute('target') === '_blank') {
119+
playClickSound();
120+
121+
// Delay navigation slightly to allow sound to play
122+
setTimeout(() => {
123+
window.open(link.href, '_blank');
124+
}, 100);
125+
126+
e.preventDefault();
127+
}
128+
});
129+
});
130+
131+
// Initialize
132+
window.addEventListener('load', () => {
133+
document.body.classList.add('animation-ready');
134+
setTimeout(() => qrInput.focus(), 500);
135+
136+
// Preload audio
137+
clickSound.load().catch(e => console.log('Audio preload failed:', e));
31138
});

0 commit comments

Comments
 (0)