-
Notifications
You must be signed in to change notification settings - Fork 0
/
donate.html
53 lines (49 loc) · 3.18 KB
/
donate.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Donate via UPI - UPI Me</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-6 text-center">
<a href="index.html" class="text-4xl font-bold text-gray-800 no-underline">UPI Me</a>
</div>
</header>
<main class="flex-grow container mx-auto px-4 py-8">
<div class="max-w-md mx-auto bg-white rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-4 text-center">Donate to <span id="recipientName"></span></h2>
<div id="qrcode" class="flex justify-center mb-6"></div>
<p id="amountDisplay" class="text-xl text-gray-700 mb-4 text-center"></p>
<p class="text-gray-600 mb-4 text-center">Scan the QR code with your UPI app to donate</p>
<button id="downloadBtn" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition duration-300 mb-4">Download QR Code</button>
<a href="index.html#generator" class="block w-full bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 transition duration-300 text-center">Generate Again</a>
</div>
</div>
<div class="mt-8 text-sm text-gray-600">
<p class="mb-2"><strong>Disclaimer:</strong></p>
<p>
The information provided on this website is generated based on user input. While we strive for accuracy, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability of the information, products, services, or related graphics contained on this website. Any reliance you place on such information is strictly at your own risk. In no event will we be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.
</p>
<p class="mt-2">
Please ensure that you input the correct UPI address and test it before sharing. Do not change any link parameters as it may affect the functionality of the QR code.
</p>
</div>
</main>
<footer class="bg-gray-100 py-6">
<div class="container mx-auto px-4 text-center">
<p class="text-gray-600">
Built by <a href="https://rishikeshs.com" class="text-blue-500 hover:underline">Rishikesh</a> |
<a href="https://github.com/rishikeshsreehari" class="text-blue-500 hover:underline">GitHub</a> |
<a href="#" class="text-blue-500 hover:underline">Support</a>
</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>