Skip to content

Commit 503761c

Browse files
inuluteinulute
committed
Misc
1 parent e89d6f1 commit 503761c

File tree

4 files changed

+58
-22
lines changed

4 files changed

+58
-22
lines changed

‎assets/background.svg

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎assets/screenshot.png

34 KB
Loading

‎index.html

Lines changed: 55 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,44 @@
66
<link rel="stylesheet" href="styles.css">
77
<link rel="icon" href="assets/logo.svg" type="image/x-icon" />
88
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
9-
<title>Donate via UPI or PayPal</title>
9+
<title>Donate inulute@boi</title>
10+
<style>
11+
/* Add styles for the loading spinner */
12+
.spinner {
13+
border: 4px solid #f3f3f3; /* Light grey */
14+
border-top: 4px solid #3498db; /* Blue */
15+
border-radius: 50%;
16+
width: 30px;
17+
height: 30px;
18+
animation: spin 1s linear infinite;
19+
margin: 0 auto;
20+
}
21+
22+
@keyframes spin {
23+
0% { transform: rotate(0deg); }
24+
100% { transform: rotate(360deg); }
25+
}
26+
27+
.loading-container {
28+
display: none;
29+
text-align: center;
30+
margin: 20px 0;
31+
}
32+
</style>
1033
</head>
1134
<body>
1235
<div class="container">
1336
<!-- QR Section -->
1437
<div class="qr-container">
38+
<div class="loading-container">
39+
<div class="spinner"></div>
40+
<p>Loading...</p>
41+
</div>
1542
<div class="qr-code">
1643
<img id="qr-image" src="assets/qr-code.png" alt="UPI QR Code">
1744
</div>
1845
<div class="payment-info">
19-
<p id="qr-text">Scan the QR code or use the following method:</p> <!-- Updated ID here -->
46+
<p id="qr-text">Scan the QR code or use the following method</p>
2047
<div class="upi-id-content">
2148
<strong id="payment-id">inulute@boi</strong>
2249
<button id="payment-button" class="copy-button">Copy</button>
@@ -34,7 +61,7 @@
3461
</div>
3562
</div>
3663
<!-- Toggle between UPI and PayPal -->
37-
<a id="toggle-link" href="#" class="toggle-payment">Wanna donate via PayPal?</a>
64+
<a id="toggle-link" href="#" class="toggle-payment">Donate via PayPal? Click Here</a>
3865
</div>
3966
</div>
4067

@@ -45,33 +72,49 @@
4572
const paymentId = document.getElementById("payment-id");
4673
const paymentButton = document.getElementById("payment-button");
4774
const upiAnimation = document.getElementById("upi-animation");
48-
const qrText = document.getElementById("qr-text"); // New variable for QR text
75+
const qrText = document.getElementById("qr-text");
76+
const loadingContainer = document.querySelector(".loading-container");
4977

50-
let isUpi = true; // Tracks whether it's UPI or PayPal
78+
let isUpi = true;
5179

5280
// Function to switch to PayPal
5381
function switchToPayPal() {
82+
loadingContainer.style.display = "block"; // Show loading spinner
83+
qrImage.style.display = "none"; // Hide QR image
84+
85+
qrImage.onload = function() {
86+
loadingContainer.style.display = "none"; // Hide loading spinner
87+
qrImage.style.display = "block"; // Show QR image
88+
};
89+
5490
qrImage.src = "assets/paypal_qr.png"; // Replace with your PayPal QR code image
5591
paymentId.textContent = "inulute"; // Replace with your PayPal ID
5692
paymentButton.textContent = "Open PayPal";
5793
paymentButton.removeEventListener("click", copyUpiId);
5894
paymentButton.addEventListener("click", openPayPalLink);
59-
toggleLink.textContent = "Wanna donate via UPI?";
95+
toggleLink.textContent = "Donate via UPI? Click Here";
6096
upiAnimation.style.display = "none";
61-
qrText.textContent = "Scan with any QR scanning app or use the button:"; // Change text for PayPal
97+
qrText.textContent = "Scan with any QR scanning app or use the button";
6298
isUpi = false;
6399
}
64100

65101
// Function to switch to UPI
66102
function switchToUpi() {
103+
qrImage.style.display = "none"; // Hide QR image
104+
loadingContainer.style.display = "none"; // Hide loading spinner
105+
106+
qrImage.onload = function() {
107+
qrImage.style.display = "block"; // Show QR image
108+
};
109+
67110
qrImage.src = "assets/qr-code.png"; // Replace with your UPI QR code image
68111
paymentId.textContent = "inulute@boi"; // Replace with your UPI ID
69112
paymentButton.textContent = "Copy";
70113
paymentButton.removeEventListener("click", openPayPalLink);
71114
paymentButton.addEventListener("click", copyUpiId);
72-
toggleLink.textContent = "Wanna donate via PayPal?";
115+
toggleLink.textContent = "Donate via PayPal? Click Here";
73116
upiAnimation.style.display = "block";
74-
qrText.textContent = "Scan the QR code or use the following method:"; // Reset text for UPI
117+
qrText.textContent = "Scan the QR code or use the following method";
75118
isUpi = true;
76119
}
77120

@@ -111,11 +154,11 @@
111154
event.preventDefault();
112155
});
113156
});
157+
114158
(function() {
115-
const message = String.fromCharCode(77, 97, 100, 101, 32, 119, 105, 116, 104, 32, 128149, 32, 98, 121, 32, 73, 110, 117, 108, 117, 116, 101);
116-
console.log(message);
159+
const message = String.fromCharCode(77, 97, 100, 101, 32, 119, 105, 116, 104, 32, 128149, 32, 98, 121, 32, 73, 110, 117, 108, 117, 116, 101);
160+
console.log(message);
117161
})();
118-
119162
</script>
120163
</body>
121164
</html>

‎styles.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ body {
44
padding: 0;
55
background-color: #f2f2f2;
66
user-select: none;
7-
background-image: url("/assets/background.svg");
7+
background: #91ddf8;
88
}
99

10+
11+
1012
.container {
1113
display: flex;
1214
flex-direction: column;

0 commit comments

Comments
 (0)