Skip to content

Commit 2249da7

Browse files
CodingNORVINSCodingNORVINS
committed
initial commit of mvp 18:26 03/08/2025
1 parent d4fc1d2 commit 2249da7

File tree

5 files changed

+304
-0
lines changed

5 files changed

+304
-0
lines changed

‎css/main.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
-webkit-box-sizing: border-box;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: "Open Sans", sans-serif;
10+
background: radial-gradient(circle, #b5865c, #95b55c, #cd8b43, #e67359, #fc466b);
11+
display: -webkit-box;
12+
display: -ms-flexbox;
13+
display: flex;
14+
-webkit-box-pack: center;
15+
-ms-flex-pack: center;
16+
justify-content: center;
17+
-webkit-box-align: center;
18+
-ms-flex-align: center;
19+
align-items: center;
20+
min-height: 100vh;
21+
padding: 20px;
22+
-webkit-transition: background 0.5s ease;
23+
transition: background 0.5s ease;
24+
}
25+
26+
h1 {
27+
font-family: "Poppins", sans-serif;
28+
font-weight: 600;
29+
font-size: 28px;
30+
margin-bottom: 10px;
31+
}
32+
33+
.container {
34+
background: white;
35+
padding: 30px 20px;
36+
border-radius: 15px;
37+
-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
38+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
39+
text-align: center;
40+
width: 320px;
41+
max-width: 100%;
42+
}
43+
44+
.container p {
45+
color: #444;
46+
margin-bottom: 20px;
47+
}
48+
49+
.container input {
50+
width: 100%;
51+
padding: 10px;
52+
font-size: 16px;
53+
border: 1px solid #aaa;
54+
border-radius: 8px;
55+
margin-bottom: 15px;
56+
}
57+
58+
.container button {
59+
padding: 10px;
60+
font-size: 16px;
61+
background: cornflowerblue;
62+
color: white;
63+
border: none;
64+
border-radius: 8px;
65+
cursor: pointer;
66+
width: 100%;
67+
margin-top: 10px;
68+
-webkit-transition: background-color 0.3s ease;
69+
transition: background-color 0.3s ease;
70+
}
71+
72+
.container button:hover {
73+
background: royalblue;
74+
}
75+
76+
.qr-box {
77+
display: none;
78+
margin-top: 25px;
79+
-webkit-box-orient: vertical;
80+
-webkit-box-direction: normal;
81+
-ms-flex-direction: column;
82+
flex-direction: column;
83+
-webkit-box-align: center;
84+
-ms-flex-align: center;
85+
align-items: center;
86+
border-top: 1px solid #ddd;
87+
padding-top: 20px;
88+
}
89+
90+
.qr-box img {
91+
width: 170px;
92+
height: 170px;
93+
margin-bottom: 15px;
94+
}
95+
96+
#download-btn {
97+
width: 100%;
98+
background-color: #28a745;
99+
color: white;
100+
border-radius: 8px;
101+
border: none;
102+
padding: 10px;
103+
cursor: pointer;
104+
-webkit-transition: background-color 0.3s ease;
105+
transition: background-color 0.3s ease;
106+
}
107+
108+
#download-btn:hover {
109+
background-color: #218838;
110+
}
111+
112+
/* Responsive tweaks */
113+
@media (max-width: 600px) {
114+
body {
115+
background: radial-gradient(circle, #e67359, #fc466b);
116+
}
117+
h1 {
118+
font-size: 24px;
119+
}
120+
.container {
121+
width: 100%;
122+
padding: 20px 15px;
123+
}
124+
}/*# sourceMappingURL=main.css.map */

‎css/main.css.map‎

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

‎index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>QR Code Generator</title>
7+
8+
<!-- Google Fonts -->
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@600&display=swap"
11+
rel="stylesheet"
12+
/>
13+
14+
<link rel="stylesheet" href="css/main.css" />
15+
</head>
16+
<body>
17+
<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>
26+
</div>
27+
</div>
28+
29+
<script src="js/script.js"></script>
30+
</body>
31+
</html>

‎js/script.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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
13+
)}`;
14+
qrImg.src = qrUrl;
15+
16+
qrImg.onload = () => {
17+
qrBox.style.display = 'flex'; // show QR and download button
18+
};
19+
});
20+
21+
downloadBtn.addEventListener('click', () => {
22+
const src = qrImg.src;
23+
if (!src) return;
24+
25+
const link = document.createElement('a');
26+
link.href = src;
27+
link.download = 'qr-code.png';
28+
document.body.appendChild(link);
29+
link.click();
30+
document.body.removeChild(link);
31+
});

‎scss/main.scss‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Open Sans', sans-serif;
9+
background: radial-gradient(
10+
circle,
11+
#b5865c,
12+
#95b55c,
13+
#cd8b43,
14+
#e67359,
15+
#fc466b
16+
);
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
min-height: 100vh;
21+
padding: 20px;
22+
transition: background 0.5s ease;
23+
}
24+
25+
h1 {
26+
font-family: 'Poppins', sans-serif;
27+
font-weight: 600;
28+
font-size: 28px;
29+
margin-bottom: 10px;
30+
}
31+
32+
.container {
33+
background: white;
34+
padding: 30px 20px;
35+
border-radius: 15px;
36+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
37+
text-align: center;
38+
width: 320px;
39+
max-width: 100%;
40+
}
41+
42+
.container p {
43+
color: #444;
44+
margin-bottom: 20px;
45+
}
46+
47+
.container input {
48+
width: 100%;
49+
padding: 10px;
50+
font-size: 16px;
51+
border: 1px solid #aaa;
52+
border-radius: 8px;
53+
margin-bottom: 15px;
54+
}
55+
56+
.container button {
57+
padding: 10px;
58+
font-size: 16px;
59+
background: cornflowerblue;
60+
color: white;
61+
border: none;
62+
border-radius: 8px;
63+
cursor: pointer;
64+
width: 100%;
65+
margin-top: 10px;
66+
transition: background-color 0.3s ease;
67+
}
68+
69+
.container button:hover {
70+
background: royalblue;
71+
}
72+
73+
.qr-box {
74+
display: none;
75+
margin-top: 25px;
76+
flex-direction: column;
77+
align-items: center;
78+
border-top: 1px solid #ddd;
79+
padding-top: 20px;
80+
}
81+
82+
.qr-box img {
83+
width: 170px;
84+
height: 170px;
85+
margin-bottom: 15px;
86+
}
87+
88+
#download-btn {
89+
width: 100%;
90+
background-color: #28a745;
91+
color: white;
92+
border-radius: 8px;
93+
border: none;
94+
padding: 10px;
95+
cursor: pointer;
96+
transition: background-color 0.3s ease;
97+
}
98+
99+
#download-btn:hover {
100+
background-color: #218838;
101+
}
102+
103+
/* Responsive tweaks */
104+
@media (max-width: 600px) {
105+
body {
106+
background: radial-gradient(circle, #e67359, #fc466b);
107+
}
108+
109+
h1 {
110+
font-size: 24px;
111+
}
112+
113+
.container {
114+
width: 100%;
115+
padding: 20px 15px;
116+
}
117+
}

0 commit comments

Comments
 (0)