/* reference code */
<!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;
height: 100vh;
background-color: #f0f0f0; /* Light gray background */
}
.container {
background-color: #ffffff; /* White background for the container */
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 400px; /* Fixed width to match your original dimensions */
display: flex;
flex-direction: column;
}
.header {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 20px;
}
.header img {
width: 120px;
height: 120px;
}
/* .header h1 {
font-size: 1.2rem;
margin: 0;
} */
.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 {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.inital-email-holder {
display: none; /* This is hidden by default */
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
input[type="email"] {
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
width: calc(100% - 90px);
font-size: 1rem;
}
input[type="text"] {
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
width: calc(100% - 10px);
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;
}
.page-1, .page-2, .page-3 {
display: none;
}
.page-1 {
display: flex;
flex-direction: column;
}
.page-2 {
display: flex;
flex-direction: column;
}
.page-3 {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
#displayEmailPage2 {
background-color: #e9ecef;
border: 1px solid #ced4da;
padding-left: 10px;
font-weight: bold;
font-size: 1rem;
}
#paymentAmountPage2 {
background-color: #e9ecef;
border: 1px solid #ced4da;
font-weight: bold;
font-size: 1rem;
text-align: left;
padding-left: 10px;
}
#solAmountPage2 {
background-color: #e9ecef;
border: 1px solid #ced4da;
font-weight: bold;
font-size: 1rem;
}
#senderWallet {
font-size: 1rem;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
width: calc(100% - 60px);
}
#senderWallet + button {
padding: 10px;
background-color: #007bff;
color: white;
border-radius: 5px;
border: none;
cursor: pointer;
font-size: 1rem;
}
#validationResult {
font-size: 0.9rem;
margin-top: 5px;
font-weight: bold;
}
.valid-address {
color: green;
}
.invalid-address {
color: red;
}
.highlighted-text {
font-size: 1.5rem;
font-weight: bold;
color: red;
margin: 20px 0;
}
.qr-code {
margin-top: 20px;
border: 1px solid #ccc;
padding: 20px;
background-color: #f9f9f9;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!-- wallet 1 -->
<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" style="display: none;">
<div>
<input id="displayEmail" placeholder="Receiving mail here" readonly />
</div>
<div>
<button class="edit-button">Edit</button>
</div>
</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">
<label for="solAmount"></label>
</div>
<div class="button">
<button onclick="goToPage2()">Next</button>
</div>
</div>
<!-- page 2 -->
<div class="container page-2" style="display:none;">
<div class="header">
<h1>Make Payment Here</h1>
<span class="back-button" onclick="goBack()">Back</span>
</div>
<div class="input-group">
<label for="displayEmail">Email</label>
<input type="text" id="displayEmailPage2" readonly />
</div>
<div class="input-group">
<label for="paymentAmount">INR Amount</label>
<div style="display: flex;">
<span style="font-weight: bold;">₹</span>
<input type="text" id="paymentAmountPage2" readonly style="flex: 1; text-align: left;" />
</div>
</div>
<div class="input-group">
<label for="solAmountPage2">Estimated Solana (SOL)</label>
<input type="text" id="solAmountPage2" readonly />
</div>
<div class="input-group">
<label for="senderWallet">Sender's Wallet Address</label>
<div style="display: flex; align-items: center;">
<input type="text" id="senderWallet" placeholder="Enter wallet address" />
<button onclick="validateWalletAddress()">Check</button>
</div>
<div id="validationResult"></div>
</div>
<div class="button">
<button onclick="goToPage3()">Continue</button>
</div>
</div>
<!-- Page 3: Send SOL -->
<div class="container page-3" style="display:none;">
<div class="highlighted-text">
Send SOL to: E1GvucNq72EiVPZoytdukF7F7Cg8RYk678Cp8mYJHg8F
</div>
<div class="qr-code">
QR Code Here
</div>
</div>
<script src="<https://unpkg.com/@solana/web3.js@latest/lib/index.iife.min.js>"></script>
<script>
const endpoint = '<https://api.devnet.solana.com>';
const solanaConnection = new solanaWeb3.Connection(endpoint);
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.page-1').style.display = 'flex';
});
function goToPage2() {
const email = document.getElementById('displayEmail').value;
const paymentAmount = document.getElementById('output').dataset.totalAmount;
const solAmount = document.getElementById('output').dataset.solAmount;
document.getElementById('displayEmailPage2').value = email;
document.getElementById('paymentAmountPage2').value = paymentAmount;
document.getElementById('solAmountPage2').value = solAmount;
document.querySelector('.page-1').style.display = 'none';
document.querySelector('.page-2').style.display = 'flex';
}
function goBack() {
document.querySelector('.page-2').style.display = 'none';
document.querySelector('.page-1').style.display = 'flex';
}
function saveEmail() {
const 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';
} else {
alert('Please enter a valid email address.');
}
}
function editEmail() {
document.querySelector('.inital-email-holder').style.display = 'none';
document.querySelector('.final-email-holder').style.display = 'flex';
document.getElementById('email').value = document.getElementById('displayEmail').value;
}
function validateEmail(email) {
const re = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
return re.test(String(email).toLowerCase());
}
async function fetchSolToInrRate() {
try {
const response = await fetch('<https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=inr>');
const data = await response.json();
return data.solana.inr;
} catch (error) {
console.error('Error fetching exchange rate:', error);
return null;
}
}
async function checkPrize() {
const amount = parseFloat(document.getElementById('voucherAmount').value);
const rate = await fetchSolToInrRate();
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 && amount >= 50) {
feePercentage = 0.15; // 15% fee
} else if (amount <= 5000) {
feePercentage = 0.09; // 9% fee
} else if (amount <= 10000) {
feePercentage = 0.03; // 3% fee
}
const fee = amount * feePercentage;
const totalAmount = amount + fee;
const solAmount = totalAmount / rate;
output.textContent = `Total payable amount: ₹${totalAmount}`;
output.dataset.totalAmount = totalAmount;
output.dataset.solAmount = solAmount;
}
// Event listeners
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('.edit-button').addEventListener('click', editEmail);
document.querySelector('.save-button').addEventListener('click', saveEmail);
});
async function validateWalletAddress() {
const walletAddress = document.getElementById('senderWallet').value;
let isValid = false;
try {
const publicKey = new solanaWeb3.PublicKey(walletAddress);
isValid = solanaWeb3.PublicKey.isOnCurve(publicKey);
} catch (error) {
isValid = false;
}
if (isValid) {
document.getElementById('validationResult').textContent = 'Valid address';
document.getElementById('validationResult').style.color = 'green';
return true;
} else {
document.getElementById('validationResult').textContent = 'Invalid address';
document.getElementById('validationResult').style.color = 'red';
return false;
}
}
async function goToPage3() {
const isValid = await validateWalletAddress();
if (isValid) {
document.querySelector('.page-2').style.display = 'none';
document.querySelector('.page-3').style.display = 'flex';
}
}
</script>
</body>
</html>