<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SOL Coups</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 500px;
box-sizing: border-box;
background-color: #f0f0f0;
}
.container {
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
display: flex;
flex-direction: column;
}
.page-1, .page-2, .page-3 {
display: none;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
.button {
display: flex;
justify-content: center;
margin-top: 20px;
}
.button button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
.output {
margin-top: 20px;
font-size: 1.1rem;
font-weight: bold;
text-align: center;
}
.navbar {
display: flex;
justify-content: center;
align-items: center;
background-color: #007bff;
color: white;
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
}
.email-display {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.final-email-holder, .inital-email-holder {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.inital-email-holder {
display: none;
}
input[type="email"], #displayEmail {
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
width: 80%;
font-size: 1rem;
}
.save-button, .edit-button {
padding: 8px 16px;
border-radius: 5px;
border: none;
background-color: #28a745;
color: white;
font-size: 1rem;
cursor: pointer;
margin-top: 5px;
}
.edit-button {
background-color: #ffc107;
}
.back-button {
cursor: pointer;
color: #007bff;
}
</style>
</head>
<body>
<div class="container page-1">
<div class="header">
<img src="images/icon128.png" alt="Logo">
<h1>SOL Coups</h1>
</div>
<div class="navbar">
<div class="email-display">
<div class="final-email-holder">
<input type="email" id="email" placeholder="Enter your email" />
<button class="save-button">Save</button>
</div>
<div class="inital-email-holder">
<input id="displayEmail" placeholder="Receiving mail here" readonly />
<button class="edit-button">Edit</button>
</div>
</div>
</div>
<div class="input-group">
<label for="voucherAmount">Amount</label>
<input type="number" id="voucherAmount" placeholder="Enter Voucher Amount">
</div>
<div class="button">
<button onclick="checkPrize()">Check Prize</button>
</div>
<div class="output" id="output"></div>
<div class="button">
<button onclick="goToPage2()">Next</button>
</div>
</div>
<div class="container page-2">
<div class="header">
<h1>Make Payment Here</h1>
<span class="back-button" onclick="goBackToPage1()">Back</span>
</div>
<div class="output">
<p id="emailOnPage2"></p>
</div>
<div class="input-group">
<label for="senderAddress">Sender's Address</label>
<input type="text" id="senderAddress" placeholder="Sender's Address">
</div>
<div class="button">
<button onclick="checkSenderAddress()">Check</button>
</div>
<div class="output" id="senderOutput"></div>
<div class="output">
<p id="totalPayableINR"></p>
<p id="totalPayableSOL"></p>
</div>
<div class="button">
<button onclick="goToPage3()">Next</button>
</div>
</div>
<div class="container page-3">
<div class="header">
<span class="back-button" onclick="goBackToPage2()">Back</span>
</div>
<div class="button" style="justify-content: flex-end;">
<button>Pay</button>
</div>
</div>
<script>
let email = '';
let totalPayableINR = 0;
let totalPayableSOL = 0;
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('.page-1').style.display = 'flex';
document.querySelector('.edit-button').addEventListener('click', function() {
document.querySelector('.final-email-holder').style.display = 'flex';
document.querySelector('.inital-email-holder').style.display = 'none';
});
document.querySelector('.save-button').addEventListener('click', function() {
email = document.getElementById('email').value;
if (validateEmail(email)) {
document.getElementById('displayEmail').value = email;
document.querySelector('.final-email-holder').style.display = 'none';
document.querySelector('.inital-email-holder').style.display = 'flex';
console.log('Email Saved:', email);
} else {
alert('Please enter a valid email address.');
}
});
});
function validateEmail(email) {
const re = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
return re.test(String(email).toLowerCase());
}
function checkPrize() {
const amount = parseFloat(document.getElementById('voucherAmount').value);
const output = document.getElementById('output');
if (isNaN(amount) || amount < 50) {
output.textContent = 'Please enter an amount of at least ₹50';
return;
}
if (amount > 10000) {
output.textContent = 'Voucher not available for amounts above ₹10,000.';
return;
}
let feePercentage;
if (amount <= 1000) {
feePercentage = 0.15;
} else if (amount <= 5000) {
feePercentage = 0.09;
} else {
feePercentage = 0.06;
}
const fee = amount * feePercentage;
totalPayableINR = amount + fee;
totalPayableSOL = totalPayableINR / 2;
output.textContent = `Total payable amount: ₹${totalPayableINR}`;
console.log('Total Payable INR:', totalPayableINR);
console.log('Total Payable SOL:', totalPayableSOL);
}
function goToPage2() {
document.querySelector('.page-1').style.display = 'none';
document.querySelector('.page-2').style.display = 'flex';
document.getElementById('emailOnPage2').textContent = `Email: ${email}`;
document.getElementById('totalPayableINR').textContent = `Total Payable INR: ₹${totalPayableINR}`;
document.getElementById('totalPayableSOL').textContent = `Total Payable SOL: ${totalPayableSOL} SOL`;
}
function goBackToPage1() {
document.querySelector('.page-2').style.display = 'none';
document.querySelector('.page-1').style.display = 'flex';
}
function checkSenderAddress() {
const senderAddress = document.getElementById('senderAddress').value;
const senderOutput = document.getElementById('senderOutput');
if (senderAddress.length < 10) {
senderOutput.textContent = 'Invalid Sender Address';
return;
}
senderOutput.textContent = `Sender Address: ${senderAddress} is valid`;
console.log('Sender Address Checked:', senderAddress);
}
function goToPage3() {
document.querySelector('.page-2').style.display = 'none';
document.querySelector('.page-3').style.display = 'flex';
}
function goBackToPage2() {
document.querySelector('.page-3').style.display = 'none';
document.querySelector('.page-2').style.display = 'flex';
}
</script>
</body>
</html>