-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
243 lines (224 loc) · 11.2 KB
/
index.html
File metadata and controls
243 lines (224 loc) · 11.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR-Gen — QR Code Generator</title>
<meta name="description"
content="Generate QR codes for any link or UPI payment instantly. Paste a URL or enter your UPI details and get a scannable QR code in seconds.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Ambient glow blobs -->
<div class="ambient-glow ambient-glow--1"></div>
<div class="ambient-glow ambient-glow--2"></div>
<header class="site-header">
<div class="logo">
<svg class="logo-icon" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="2" width="10" height="10" rx="2" stroke="currentColor" stroke-width="2" />
<rect x="20" y="2" width="10" height="10" rx="2" stroke="currentColor" stroke-width="2" />
<rect x="2" y="20" width="10" height="10" rx="2" stroke="currentColor" stroke-width="2" />
<rect x="22" y="22" width="4" height="4" fill="currentColor" />
<rect x="28" y="22" width="2" height="2" fill="currentColor" />
<rect x="22" y="28" width="2" height="2" fill="currentColor" />
<rect x="26" y="26" width="2" height="4" fill="currentColor" />
<rect x="28" y="28" width="2" height="2" fill="currentColor" />
</svg>
<span class="logo-text">QR-<span class="logo-accent">Gen</span></span>
</div>
<p class="header-tagline">Turn any link into a QR code, instantly.</p>
</header>
<main class="main-container">
<!-- Tab Navigation -->
<nav class="tab-bar" role="tablist">
<button class="tab-btn active" role="tab" aria-selected="true" data-tab="link" id="tab-link">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M6.354 8.354a.5.5 0 0 0 0-.708l-.708-.708a3 3 0 1 1 4.243-4.243l2.828 2.829a3 3 0 0 1 0 4.243l-.707.707a.5.5 0 0 0 .707.707l.707-.707a4 4 0 0 0 0-5.657L10.596.888a4 4 0 0 0-5.657 5.657l.708.708a.5.5 0 0 0 .707 0z"
fill="currentColor" />
<path
d="M9.646 7.646a.5.5 0 0 0 0 .708l.708.708a3 3 0 1 1-4.243 4.243L3.283 10.476a3 3 0 0 1 0-4.243l.707-.707a.5.5 0 0 0-.707-.707l-.707.707a4 4 0 0 0 0 5.657l2.828 2.829a4 4 0 0 0 5.657-5.657l-.708-.708a.5.5 0 0 0-.707 0z"
fill="currentColor" />
</svg>
Link → QR
</button>
<button class="tab-btn" role="tab" aria-selected="false" data-tab="upi" id="tab-upi">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M2 2h5v5H2V2zm7 0h5v5H9V2zM2 9h5v5H2V9zm8 1h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-2 2h1v1h-1v-1zm2 2h1v1h-1v-1z"
fill="currentColor" />
</svg>
UPI QR
</button>
<div class="tab-indicator"></div>
</nav>
<!-- Tab 1: Link → QR (any URL) -->
<section class="tab-panel active" id="panel-link" role="tabpanel" aria-labelledby="tab-link">
<div class="card">
<div class="card-body">
<div class="form-section">
<h2 class="section-title">Paste Any Link</h2>
<div class="field">
<label for="url-input" class="field-label">URL / Link</label>
<input type="url" id="url-input" class="field-input" placeholder="https://example.com or any link..."
autocomplete="off" spellcheck="false">
<span class="field-hint">Website, Google Drive, YouTube, social media — any link works</span>
<span class="field-error" id="url-input-error"></span>
</div>
<div class="field">
<label for="url-label" class="field-label">Label <span class="optional-tag">optional</span></label>
<input type="text" id="url-label" class="field-input" placeholder="My Portfolio, Resume, etc."
autocomplete="off" maxlength="60">
</div>
</div>
<button class="btn-primary" id="btn-link-generate">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M2 2h5v5H2V2zm9 0h5v5h-5V2zM2 11h5v5H2v-5zm10 1h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-2 2h1v1h-1v-1zm2 2h1v1h-1v-1z"
fill="currentColor" />
</svg>
Generate QR Code
</button>
</div>
</div>
<!-- QR Output for Link tab -->
<div class="qr-output hidden" id="qr-output-link">
<div class="qr-card">
<div class="qr-badge">Generated</div>
<div class="qr-frame" id="qr-frame-link">
<div id="qr-canvas-link"></div>
</div>
<div class="qr-meta">
<p class="qr-payee" id="qr-link-label"></p>
<p class="qr-upi" id="qr-link-url"></p>
</div>
<div class="qr-actions">
<button class="btn-secondary" id="btn-download-link">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 1v9m0 0L5 7m3 3 3-3M2 12v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Download PNG
</button>
<button class="btn-secondary" id="btn-copy-url">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6l-4-4z" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10 2v4h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Copy Link
</button>
</div>
</div>
</div>
</section>
<!-- Tab 2: UPI QR -->
<section class="tab-panel" id="panel-upi" role="tabpanel" aria-labelledby="tab-upi">
<div class="card">
<div class="card-body">
<div class="form-section">
<h2 class="section-title">Payment Details</h2>
<div class="field">
<label for="upi-id" class="field-label">UPI ID</label>
<input type="text" id="upi-id" class="field-input" placeholder="yourname@upi" autocomplete="off"
spellcheck="false">
<span class="field-hint">e.g. name@okicici, 9876543210@paytm</span>
<span class="field-error" id="upi-id-error"></span>
</div>
<div class="field">
<label for="payee-name" class="field-label">Payee Name</label>
<input type="text" id="payee-name" class="field-input" placeholder="John Doe" autocomplete="off">
<span class="field-error" id="payee-name-error"></span>
</div>
<div class="field-row">
<div class="field field--grow">
<div class="field-label-row">
<label for="amount" class="field-label">Amount (₹)</label>
<label class="toggle-switch">
<input type="checkbox" id="any-amount-toggle">
<span class="toggle-track"></span>
<span class="toggle-label">Any Amount</span>
</label>
</div>
<input type="number" id="amount" class="field-input" placeholder="0.00" min="1" step="0.01">
</div>
</div>
<div class="field">
<div class="field-label-row">
<label for="expiry-date" class="field-label">Expiration</label>
<label class="toggle-switch">
<input type="checkbox" id="no-expiry-toggle" checked>
<span class="toggle-track"></span>
<span class="toggle-label">No Expiry</span>
</label>
</div>
<input type="date" id="expiry-date" class="field-input" disabled>
<span class="field-hint" id="expiry-hint">QR code will never expire</span>
</div>
<div class="field">
<label for="txn-note" class="field-label">Note <span class="optional-tag">optional</span></label>
<input type="text" id="txn-note" class="field-input" placeholder="Payment for..." autocomplete="off"
maxlength="50">
</div>
</div>
<button class="btn-primary" id="btn-generate">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M2 2h5v5H2V2zm9 0h5v5h-5V2zM2 11h5v5H2v-5zm10 1h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-2 2h1v1h-1v-1zm2 2h1v1h-1v-1z"
fill="currentColor" />
</svg>
Generate UPI QR
</button>
</div>
</div>
<!-- QR Output for UPI tab -->
<div class="qr-output hidden" id="qr-output">
<div class="qr-card">
<div class="qr-badge" id="qr-status-badge">Active</div>
<div class="qr-frame" id="qr-frame">
<div id="qr-canvas"></div>
</div>
<div class="qr-meta">
<p class="qr-payee" id="qr-payee-label"></p>
<p class="qr-upi" id="qr-upi-label"></p>
<p class="qr-amount" id="qr-amount-label"></p>
<p class="qr-expiry" id="qr-expiry-label"></p>
</div>
<div class="qr-actions">
<button class="btn-secondary" id="btn-download">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 1v9m0 0L5 7m3 3 3-3M2 12v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Download PNG
</button>
<button class="btn-secondary" id="btn-copy-link">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M10 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6l-4-4z" stroke="currentColor"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10 2v4h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
Copy UPI Link
</button>
</div>
<div class="upi-link-display" id="upi-link-display"></div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<p>Fast, free QR codes for links & UPI payments · QR-Gen © 2026</p>
</footer>
<div class="toast hidden" id="toast">
<span class="toast-text" id="toast-text"></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script src="app.js"></script>
</body>
</html>