CSS- barebone | Notion

User Info

Front page

Payment page

Final payment

[ ] show QR of wallet address
[ ] show payable amount and wallet address where payment is to be made
[ ] counter of 5 mins after which if payment is not received, then the whole transaction fails

<!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;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            background-color: #fff;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 320px;
            display: none;
            flex-direction: column;
        }

        .page-1, .page-2 {
            display: flex;
            flex-direction: column;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .header img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        .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: space-between;
            align-items: center;
            margin-bottom: 20px;
            background-color: #007bff;
            color: white;
            padding: 10px;
            border-radius: 5px;
        }

        .navbar .email-display {
            display: flex;
            align-items: center;
        }

        .navbar input[type="email"] {
            padding: 5px;
            border: none;
            border-radius: 3px;
            margin-right: 10px;
            display: none;
        }

        .navbar .edit-button {
            cursor: pointer;
            margin-left: 10px;
        }

        .navbar .save-button {
            display: none;
            margin-left: 10px;
            cursor: pointer;
            background-color: #28a745;
            color: white;
            padding: 5px 10px;
            border-radius: 3px;
        }

        .back-button {
            cursor: pointer;
            color: #007bff;
        }
    </style>
</head>
<body>
    <div class="container page-1">
        <div class="navbar">
            <div class="email-display">
                <input type="email" id="email" placeholder="Enter your email">
                <span id="displayEmail">receiving mail</span>
                <span class="edit-button" onclick="editEmail()">Edit</span>
                <button class="save-button" onclick="saveEmail()">Save Mail</button>
            </div>
        </div>

        <div class="header">
            <img src="logo.png" alt="Logo">
            <h1>SOL Coups</h1>
        </div>

        <div class="input-group">
            <label for="amount">Amount</label>
            <input type="number" id="amount" placeholder="Enter amount in SOL">
        </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" 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="paymentAmount">Amount</label>
            <input type="number" id="paymentAmount" placeholder="Enter payment amount">
        </div>
    </div>

    <script>
        document.querySelector('.page-1').style.display = 'flex';

        function checkPrize() {
            const amount = document.getElementById('amount').value;
            const output = document.getElementById('output');
            output.textContent = `Amount entered: ${amount} SOL`;
        }

        function goToPage2() {
            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 editEmail() {
            document.getElementById('email').style.display = 'block';
            document.getElementById('email').value = document.getElementById('displayEmail').textContent;
            document.getElementById('displayEmail').style.display = 'none';
            document.querySelector('.save-button').style.display = 'block';
        }

        function saveEmail() {
            const email = document.getElementById('email').value;
            document.getElementById('displayEmail').textContent = email;
            document.getElementById('displayEmail').style.display = 'block';
            document.querySelector('.save-button').style.display = 'none';
            document.getElementById('email').style.display = 'none';
        }
    </script>
</body>
</html>

/*reference code 2 */
<!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;
    }

    .header {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 20px;
      padding-left: 20%;
      padding-right: 20%;
    }

    .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;
      flex-direction: row;
      justify-content: space-between;
    }

    .inital-email-holder {
      display: none;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    input[type="email"] {
      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;
    }

    .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;
    }

    .output {
      margin-top: 20px;
      font-size: 1.1rem;
      font-weight: bold;
      text-align: center;
    }

    .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;
    }
  </style>
</head>
<body>

  <!-- Page 1 (Already Provided) -->
    <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 (New Page) -->
  <div class="container page-2">
    <div class="navbar">
      <div class="email-display">
        <div class="inital-email-holder">
          <div>
            <input id="displayEmail" placeholder="Receiving mail here" readonly />
          </div>
        </div>
      </div>
    </div>

    <div class="input-group">
      <label for="senderAddress">Sender's Address</label>
      <input type="text" id="senderAddress" placeholder="Enter sender's address">
      <div class="button">
        <button onclick="checkAddress()">Check</button>
      </div>
    </div>

    <div class="output" id="senderOutput"></div>

    <div class="output">
      <p id="inrAmount"></p>
      <p id="solAmount"></p>
    </div>

    <div class="button">
      <button onclick="goToPage3()">Next</button>
    </div>
  </div>

  <!-- Page 3 (Placeholder for next page) -->
  <div class="container page-3" style="display:none;">
    <!-- Contents of Page 3 -->
  </div>

  <script>
    let receiver_email = '';
    let senderAddress = '';
    var totalInrAmount = 0;  // Replace with the actual total INR amount from Page 1
    var totalSolAmount = 0;

    document.addEventListener('DOMContentLoaded', function() {
  // Ensure the DOM is fully loaded before binding events
  document.querySelector('.page-1').style.display = 'flex';
});

function goToPage2() {
  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 to save the email
function saveEmail() {
  const email = document.getElementById('email').value;
  if (validateEmail(email)) {
    receiver_email=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 to edit the email
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;
}

// Email validation function
function validateEmail(email) {
  const re = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
  return re.test(String(email).toLowerCase());
}

async 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 atleast ₹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; // 6% fee
  }

  const fee = amount * feePercentage;
  const totalAmount = amount + fee;
  totalInrAmount =totalAmount;
  

  output.textContent = `Total payable amount: ₹${totalAmount}`;
  } 

// Event listeners
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('.edit-button').addEventListener('click', editEmail);
  document.querySelector('.save-button').addEventListener('click', saveEmail);
  document.querySelector('button[onclick="checkPrize()"]').addEventListener('click', checkPrize);

  // Update conversion rate on load
  updateConversionRate();
});

/*page 2 */

    document.addEventListener('DOMContentLoaded', function() {
      // Assume email is fetched and displayed correctly
      console.log('Email:', receiver_email);

      // Display INR and SOL amounts on page load
      document.getElementById('inrAmount').textContent = 'Total payable INR amount: ₹' + totalInrAmount;
      totalSolAmount = totalInrAmount / 2;
      document.getElementById('solAmount').textContent = 'Total payable SOL amount: ' + totalSolAmount + ' SOL';
      console.log('Total INR Amount:', totalInrAmount);
      console.log('Total SOL Amount:', totalSolAmount);
    });

    function checkAddress() {
      senderAddress = document.getElementById('senderAddress').value;
      document.getElementById('senderOutput').textContent = 'Sender\\'s Address: ' + senderAddress;
      console.log('Sender\\'s Address:', senderAddress);
    }

    function goToPage3() {
      document.querySelector('.page-2').style.display = 'none';
      document.querySelector('.page-3').style.display = 'flex';
    }
  </script>
</body>
</html>