Skip to content

Commit

Permalink
Add dynamic PayPal/UPI toggle with improved UI interaction.
Browse files Browse the repository at this point in the history 
- Implemented a toggle feature between UPI and PayPal options.
- Added a dynamic QR code that switches between UPI and PayPal based on the selected payment method.
- Updated the hyperlink to toggle between "Wanna donate via PayPal" and "Wanna donate via UPI" accordingly.
- Modified the UPI copy button to change to "Open PayPal" when PayPal is selected.
- Hid the Lottie animation when switching to PayPal for a cleaner UI.
- General UI improvements and bug fixes to maintain consistent layout.
  • Loading branch information
@inulute
inulute committed Sep 17, 2024
1 parent 3a4516c commit 7914a59
Show file tree
Hide file tree
Showing 5 changed files with 291 additions and 50 deletions.
Binary file added assets/paypal_qr.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 76 additions & 0 deletions index copy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="assets/inulute_icn.ico" type="image/x-icon" />
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script>
window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>
<title>UPI and PayPal Donation</title>
</head>
<body>
<div class="container">
<!-- UPI Section -->
<div class="qr-container">
<div class="qr-code">
<img src="assets/qr-code.png" alt="UPI QR Code">
</div>
<div class="upi-id">
<p>Scan the QR code or use the UPI ID</p>
<div class="upi-id-content">
<strong id="upi-id">inulute@boi</strong>
<button id="copy-button" class="copy-button">Copy</button>
<lottie-player
src="https://lottie.host/2b51d7af-7099-49f5-93df-f8190dde11bb/WU9eejAueC.json"
background="#FFFFFF"
speed="1.5"
loop
autoplay
direction="1"
mode="normal" class="upi-icon"
></lottie-player>
</div>
</div>
</div>

<!-- PayPal Section -->
<div class="paypal-container">
<p>Or, you can donate via PayPal</p>
<div class="paypal-id-content">
<a href="https://www.paypal.com/paypalme/inulute" target="_blank" class="paypal-link">
<img src="assets/paypalqr.png" alt="PayPal" class="paypal-icon">
</a>
</div>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
const copyButton = document.getElementById("copy-button");
const upiIdText = document.getElementById("upi-id");

copyButton.addEventListener("click", function () {
const textToCopy = upiIdText.textContent;
const tempInput = document.createElement("input");
tempInput.value = textToCopy;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
copyButton.textContent = "Copied!";
setTimeout(function () {
copyButton.textContent = "Copy";
}, 2500);
});

document.addEventListener("contextmenu", function (event) {
event.preventDefault();
});
});
</script>
</body>
</html>
123 changes: 88 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,62 +8,115 @@
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script>
window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>
<title>UPI inulute@boi</title>
</script>
<script defer src="/_vercel/insights/script.js"></script>
<title>Donate via UPI or PayPal</title>
</head>
<body>
<div class="container">
<!-- QR Section -->
<div class="qr-container">
<div class="qr-code">
<img src="assets/qr-code.png" alt="UPI QR Code">
<div class="qr-code">
<img id="qr-image" src="assets/qr-code.png" alt="UPI QR Code">
</div>
<div class="upi-id">
<p>Scan the QR code or use the UPI ID:</p>
<div class="payment-info">
<p>Scan the QR code or use the following method:</p>
<div class="upi-id-content">
<strong id="upi-id">inulute@boi</strong>
<button id="copy-button" class="copy-button">Copy</button>
<strong id="payment-id">inulute@boi</strong>
<button id="payment-button" class="copy-button">Copy</button>
<lottie-player
id="upi-animation"
src="https://lottie.host/2b51d7af-7099-49f5-93df-f8190dde11bb/WU9eejAueC.json"
background="#FFFFFF"
speed="1.5"
loop
autoplay
direction="1"
mode="normal" class="upi-icon"
mode="normal"
class="upi-icon"
></lottie-player>
</div>
</div>
<!-- Toggle between UPI and PayPal -->
<a id="toggle-link" href="#" class="toggle-payment">Wanna donate via PayPal?</a>
</div>

</div>

<script>document.addEventListener("DOMContentLoaded", function () {
const copyButton = document.getElementById("copy-button");
const upiIdText = document.getElementById("upi-id");

copyButton.addEventListener("click", function () {
const textToCopy = upiIdText.textContent;

const tempInput = document.createElement("input");
tempInput.value = textToCopy;
document.body.appendChild(tempInput);

tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);

copyButton.textContent = "Copied!";

setTimeout(function () {
copyButton.textContent = "Copy";
}, 2500);
<script>
document.addEventListener("DOMContentLoaded", function () {
const toggleLink = document.getElementById("toggle-link");
const qrImage = document.getElementById("qr-image");
const paymentId = document.getElementById("payment-id");
const paymentButton = document.getElementById("payment-button");
const upiAnimation = document.getElementById("upi-animation");

let isUpi = true; // Tracks whether it's UPI or PayPal

// Function to switch to PayPal
function switchToPayPal() {
qrImage.src = "assets/paypal_qr.png"; // Replace with your PayPal QR code image
paymentId.textContent = "inulute"; // Replace with your PayPal ID
paymentButton.textContent = "Open PayPal";
paymentButton.removeEventListener("click", copyUpiId);
paymentButton.addEventListener("click", openPayPalLink);
toggleLink.textContent = "Wanna donate via UPI?";
upiAnimation.style.display = "none";
isUpi = false;
}

// Function to switch to UPI
function switchToUpi() {
qrImage.src = "assets/qr-code.png"; // Replace with your UPI QR code image
paymentId.textContent = "inulute@boi"; // Replace with your UPI ID
paymentButton.textContent = "Copy";
paymentButton.removeEventListener("click", openPayPalLink);
paymentButton.addEventListener("click", copyUpiId);
toggleLink.textContent = "Wanna donate via PayPal?";
upiAnimation.style.display = "block";
isUpi = true;
}

// Function to copy UPI ID
function copyUpiId() {
const tempInput = document.createElement("input");
tempInput.value = paymentId.textContent;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
paymentButton.textContent = "Copied!";
setTimeout(function () {
paymentButton.textContent = "Copy";
}, 2500);
}

// Function to open PayPal link
function openPayPalLink() {
window.open("https://www.paypal.com/paypalme/inulute", "_blank");
}

// Toggle between UPI and PayPal when the link is clicked
toggleLink.addEventListener("click", function (e) {
e.preventDefault();
if (isUpi) {
switchToPayPal();
} else {
switchToUpi();
}
});

// Add the copy functionality for UPI by default
paymentButton.addEventListener("click", copyUpiId);

document.addEventListener("contextmenu", function (event) {
event.preventDefault();
});
});
(function() {
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);
console.log(message);
})();

document.addEventListener("contextmenu", function(event) {
event.preventDefault();
});
});
</script>
</body>
</html>
100 changes: 100 additions & 0 deletions styles copy.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
user-select: none;
background-image: url("/assets/background.svg");
}

.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.qr-container, .paypal-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0.2, 0.2, 0.2, 0.2);
margin-top: 10px;
margin-bottom: 10px;
max-width: 350px;
width: 100%;
margin: 5%;
height: auto;
}

.qr-code img {
max-width: 100%;
height: auto;
}

.upi-id {
margin-top: 20px;
text-align: center;
}

.upi-id-content {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
}

.upi-id strong {
color: #007bff;
user-select: text;
display: inline-block;
margin-right: 10px;
}

.copy-button {
display: inline-block;
padding: 8px 15px;
background-color: #007bff;
color: white;
border: none;
margin-top: 10px;
border-radius: 5px;
height: min-content;
cursor: pointer;
}

* {
-webkit-tap-highlight-color: transparent;
}

.upi-icon {
width: 40px;
height: auto;
margin-top: 10px;
}

.paypal-container {
margin-top: 20px;
text-align: center;
}

.paypal-id-content {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
}

.paypal-link {
text-decoration: none;
color: #007bff;
}

.paypal-icon {
width: 250px;
height: auto;
margin-top: 10px;
}
Loading

0 comments on commit 7914a59

Please sign in to comment.