Skip to content

Commit bf5aa79

Browse files
Yug2920Yug2920
authored
Create index.html
1 parent 742c77c commit bf5aa79

1 file changed

Lines changed: 184 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
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.0">
6+
<title>Snappy QR Generator</title>
7+
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
10+
<link href="https://media.istockphoto.com/id/1390989580/vector/qr-code-3d-icon-qrcode-for-scan-security-concept-vector-illustration.jpg?s=612x612&w=0&k=20&c=UlmAFCQUzClIkAMrDPn2tKW7jQDbpDAu0KqLeRavl_I=" rel="icon">
11+
12+
<style>
13+
body {
14+
min-height: 100vh;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
background: linear-gradient(135deg, #4f46e5, #6d28d9, #0f52ba);
19+
background-size: 300% 300%;
20+
animation: bgMove 12s ease infinite;
21+
padding: 25px;
22+
}
23+
24+
@keyframes bgMove {
25+
0% { background-position: 0% 50%; }
26+
50% { background-position: 100% 50%; }
27+
100% { background-position: 0% 50%; }
28+
}
29+
30+
.qr-card {
31+
width: 100%;
32+
max-width: 420px;
33+
padding: 32px;
34+
border-radius: 30px;
35+
background: rgba(255, 255, 255, 0.18);
36+
backdrop-filter: blur(18px);
37+
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
38+
transform: scale(1);
39+
animation: fadeUp 0.6s ease;
40+
}
41+
42+
@keyframes fadeUp {
43+
from { opacity: 0; transform: translateY(20px); }
44+
to { opacity: 1; transform: translateY(0); }
45+
}
46+
47+
.qr-title {
48+
text-align: center;
49+
font-size: 2rem;
50+
font-weight: 800;
51+
color: #fff;
52+
margin-bottom: 25px;
53+
}
54+
55+
.form-control, .form-select, .form-control-color {
56+
background: rgba(255,255,255,0.25);
57+
border-radius: 14px;
58+
border: none;
59+
color: white;
60+
height: 52px;
61+
}
62+
63+
.form-control::placeholder { color: #e6e6e6; }
64+
65+
.btn-main {
66+
width: 100%;
67+
height: 52px;
68+
border-radius: 14px;
69+
background: linear-gradient(90deg, #0f52ba, #9333ea);
70+
border: none;
71+
font-weight: 600;
72+
font-size: 1.1rem;
73+
color: white;
74+
transition: 0.3s;
75+
}
76+
77+
.btn-main:hover {
78+
transform: scale(1.05);
79+
background: linear-gradient(90deg, #9333ea, #0f52ba);
80+
}
81+
82+
#qrImage {
83+
width: 230px;
84+
display: none;
85+
margin-top: 20px;
86+
border-radius: 14px;
87+
animation: fadeQ 0.5s ease;
88+
box-shadow: 0 8px 25px rgba(0,0,0,0.25);
89+
}
90+
91+
@keyframes fadeQ {
92+
from { opacity: 0; transform: scale(0.7); }
93+
to { opacity: 1; transform: scale(1); }
94+
}
95+
96+
.action-btn {
97+
width: 48%;
98+
height: 48px;
99+
border-radius: 14px;
100+
transition: 0.3s;
101+
}
102+
103+
.action-btn:hover {
104+
transform: scale(1.05);
105+
}
106+
107+
#darkModeBtn {
108+
width: 100%;
109+
margin-top: 12px;
110+
height: 50px;
111+
border-radius: 14px;
112+
border: 1px solid #fff;
113+
color: white;
114+
transition: 0.3s;
115+
}
116+
117+
#darkModeBtn:hover { transform: scale(1.05); }
118+
119+
footer {
120+
position: absolute;
121+
bottom: 20px;
122+
left: 50%;
123+
transform: translateX(-50%);
124+
text-align: center;
125+
font-size: 0.9rem;
126+
color: white;
127+
opacity: 0.8;
128+
}
129+
130+
.dark-mode {
131+
background: #0a0a0a !important;
132+
}
133+
134+
.dark-mode .qr-card {
135+
background: rgba(255, 255, 255, 0.08);
136+
}
137+
</style>
138+
</head>
139+
140+
<body>
141+
142+
<div class="qr-card">
143+
<h2 class="qr-title"><i class="bi bi-qr-code-scan"></i> SNAPPY QR</h2>
144+
145+
<input type="text" id="qrText" class="form-control mb-3" placeholder="Enter Text or URL">
146+
147+
<select id="sizeSelect" class="form-select mb-3">
148+
<option value="150">Simple (150px)</option>
149+
<option value="250" selected>Medium (250px)</option>
150+
<option value="350">Advanced (350px)</option>
151+
</select>
152+
153+
<input type="color" id="colorPicker" class="form-control form-control-color mb-3" value="#000000">
154+
155+
<button id="generateBtn" class="btn-main mb-3">
156+
<i class="bi bi-magic"></i> Generate QR
157+
</button>
158+
159+
<div class="text-center">
160+
<img id="qrImage">
161+
</div>
162+
163+
<div class="d-flex justify-content-between mt-3">
164+
<a id="downloadBtn" class="btn btn-light action-btn d-none" download="qr.png">
165+
<i class="bi bi-download"></i> Download
166+
</a>
167+
168+
<button id="copyBtn" class="btn btn-outline-light action-btn d-none">
169+
<i class="bi bi-clipboard"></i> Copy Link
170+
</button>
171+
</div>
172+
173+
<button id="darkModeBtn" class="btn btn-outline-light mt-3">
174+
<i class="bi bi-moon-stars"></i> Dark Mode
175+
</button>
176+
</div>
177+
178+
<footer>Made by <strong><a href="https://github.com/DMS-Menula">Menula De Silva</a></strong></footer>
179+
180+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
181+
<script src="script.js"></script>
182+
183+
</body>
184+
</html>

0 commit comments

Comments
 (0)