Spaces:

GamerC0der
/

astrapay

Sleeping

App Files Files Community

GamerC0der commited on about 1 month ago

Commit

e181b68

verified ·

1 Parent(s): 678a59a

Create templates/payment.html

Browse files

Files changed (1) hide show

templates/payment.html +499 -0

templates/payment.html ADDED Viewed

	@@ -0,0 +1,499 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Payment Link - AstraPay</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            color: #ffffff;
+            line-height: 1.6;
+        }
+        .top-bar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background-color: rgba(26, 26, 26, 0.95);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            z-index: 1000;
+        }
+        .top-bar a {
+            color: #ffffff;
+            text-decoration: none;
+            font-size: 1.2rem;
+            font-weight: 600;
+            transition: color 0.3s ease;
+        }
+        .top-bar a:hover {
+            color: rgba(255, 255, 255, 0.7);
+        }
+        .top-bar a.active {
+            color: #ffffff;
+            border-bottom: 2px solid #ffffff;
+            padding-bottom: 0.25rem;
+        }
+        .main-content {
+            margin-top: 80px;
+            min-height: calc(100vh - 80px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2rem 0;
+        }
+        .container {
+            text-align: center;
+            max-width: 500px;
+            padding: 2rem;
+        }
+        .title {
+            font-size: 2.2rem;
+            font-weight: 600;
+            margin-bottom: 1.5rem;
+            letter-spacing: -0.02em;
+        }
+        .payment-card {
+            background: rgba(255, 255, 255, 0.02);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            padding: 2.5rem;
+            margin-bottom: 2rem;
+            position: relative;
+            overflow: hidden;
+        }
+        .payment-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        }
+        .amount {
+            font-size: 3.2rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 0.5rem;
+            letter-spacing: -0.02em;
+        }
+        .description {
+            font-size: 1.1rem;
+            color: rgba(255, 255, 255, 0.7);
+            margin-bottom: 2rem;
+            font-weight: 400;
+        }
+        .status {
+            font-size: 0.95rem;
+            padding: 0.5rem 1.2rem;
+            border-radius: 20px;
+            display: inline-block;
+            margin-bottom: 2rem;
+            font-weight: 500;
+            letter-spacing: 0.01em;
+        }
+        .status.pending {
+            background: rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 0.8);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .status.paid {
+            background: rgba(0, 255, 136, 0.1);
+            color: #00ff88;
+            border: 1px solid rgba(0, 255, 136, 0.3);
+        }
+        .pay-button {
+            background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
+            color: #000000;
+            border: none;
+            padding: 1rem 2.5rem;
+            font-size: 1rem;
+            font-weight: 600;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            letter-spacing: 0.01em;
+            box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
+        }
+        .pay-button:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 30px rgba(255, 255, 255, 0.2);
+        }
+        .pay-button:disabled {
+            background: rgba(255, 255, 255, 0.3);
+            color: rgba(255, 255, 255, 0.5);
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .confirmation-text {
+            font-size: 1.2rem;
+            color: #00ff88;
+            font-weight: 500;
+            margin-top: 1rem;
+        }
+        .sender-email {
+            font-size: 0.9rem;
+            color: rgba(255, 255, 255, 0.6);
+            margin-top: 0.5rem;
+            font-family: 'Monaco', 'Consolas', monospace;
+        }
+        .timer {
+            font-size: 0.8rem;
+            color: rgba(255, 255, 255, 0.5);
+            margin-top: 1rem;
+            font-family: 'Monaco', 'Consolas', monospace;
+        }
+        .expired {
+            color: #ff6b6b;
+        }
+        .back-link {
+            color: rgba(255, 255, 255, 0.6);
+            text-decoration: none;
+            font-size: 0.9rem;
+            margin-top: 2rem;
+            display: inline-block;
+            font-weight: 500;
+            transition: color 0.3s ease;
+        }
+        .back-link:hover {
+            color: rgba(255, 255, 255, 0.9);
+        }
+        .banner {
+            background: rgba(255, 193, 7, 0.15);
+            border: 1px solid rgba(255, 193, 7, 0.3);
+            border-radius: 8px;
+            padding: 0.75rem 1.5rem;
+            margin-bottom: 2rem;
+            color: #ffc107;
+            font-size: 0.9rem;
+            font-weight: 500;
+            text-align: center;
+        }
+        .payment-modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.9);
+        }
+        .payment-modal-content {
+            background-color: #1a1a1a;
+            margin: 15% auto;
+            padding: 2rem;
+            border-radius: 8px;
+            width: 90%;
+            max-width: 500px;
+            border: 1px solid #333;
+            text-align: center;
+        }
+        .payment-modal-title {
+            color: #ffffff;
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-bottom: 1.5rem;
+        }
+        .payment-instruction {
+            color: #cccccc;
+            font-size: 1.1rem;
+            margin-bottom: 2rem;
+            line-height: 1.6;
+        }
+        .email-address {
+            background-color: #2a2a2a;
+            border: 1px solid #555;
+            border-radius: 4px;
+            padding: 1rem;
+            margin: 1rem 0;
+            color: #00ff88;
+            font-family: monospace;
+            font-size: 1.1rem;
+            word-break: break-all;
+            display: inline-block;
+        }
+        .payment-modal-buttons {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            margin-top: 2rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="top-bar">
+        <a href="/">AstraPay</a>
+        <a href="/bank">AstraBank</a>
+    </div>
+    <div class="main-content">
+        <div class="container">
+        <h1 class="title">AstraPay</h1>
+        <div class="banner">
+            Payments May Reset Daily. Ensure your link works.
+        </div>
+        {% if recipient_email %}
+        <div class="banner" style="background: rgba(0, 255, 136, 0.15); border: 1px solid rgba(0, 255, 136, 0.3); color: #00ff88;">
+            Your astras will go to {{ recipient_email }}
+        </div>
+        {% endif %}
+        <div class="payment-card">
+            <div class="amount">{{ amount }} Astra{{ 's' if amount > 1 else '' }}</div>
+            <div class="description">{{ description }}</div>
+            <div class="status {{ 'paid' if paid else 'pending' }}">
+                {{ 'Paid' if paid else 'Pending Payment' }}
+            </div>
+            {% if not paid %}
+            <button class="pay-button" onclick="processPayment()">
+                Pay {{ amount }} Astra{{ 's' if amount > 1 else '' }}
+            </button>
+            {% else %}
+            <div style="font-size: 1.2rem; color: #00ff88;">✓ Payment Completed</div>
+            {% endif %}
+        </div>
+        <a href="/" class="back-link">← Back to AstraPay</a>
+    </div>
+    <div id="paymentModal" class="payment-modal">
+        <div class="payment-modal-content">
+            <div class="payment-modal-title">Complete Payment</div>
+            <div class="payment-instruction">
+                Please send {{ amount }} Astra{{ 's' if amount > 1 else '' }} to the following address:
+            </div>
+            <div class="email-address">astratrader@astranova.org</div>
+            <div id="payment-status" class="payment-instruction">
+                <div id="waiting-message">
+                    Waiting for payment confirmation...
+                    <div id="timer" class="timer">5:00</div>
+                </div>
+                <div id="payment-received" style="display: none;">
+                    ✓ Payment of {{ amount }} Astra{{ 's' if amount > 1 else '' }} received!
+                    <br><br>
+                    Please enter your email to confirm:
+                    <br>
+                    <input type="email" id="user-email" class="form-input" placeholder="Enter your email" style="margin-top: 1rem; width: 100%; max-width: 300px;">
+                </div>
+                <div id="payment-expired" style="display: none;">
+                    Payment window expired.
+                    <br><br>
+                    Please create a new payment link.
+                </div>
+                <div id="confirmation-complete" style="display: none;">
+                    <div class="confirmation-text">Payment Confirmed ✓</div>
+                    <div class="sender-email" id="sender-email-display"></div>
+                </div>
+            </div>
+            <div class="payment-modal-buttons">
+                <button class="btn-secondary" onclick="closePaymentModal()">Cancel</button>
+                <button id="confirm-btn" class="pay-button" onclick="confirmPayment()" style="display: none;">Confirm Payment</button>
+                <button id="verify-btn" class="pay-button" onclick="verifyEmail()" style="display: none;">Verify Email</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        let paymentCheckInterval;
+        let timerInterval;
+        let existingTransactionIds = [];
+        let timeLeft = 300;
+        let paymentTransaction = null;
+        function processPayment() {
+            document.getElementById('paymentModal').style.display = 'block';
+            timeLeft = 300;
+            paymentTransaction = null;
+            initPaymentCheck();
+            startTimer();
+        }
+        function closePaymentModal() {
+            document.getElementById('paymentModal').style.display = 'none';
+            stopPaymentCheck();
+            stopTimer();
+            document.getElementById('waiting-message').style.display = 'block';
+            document.getElementById('payment-received').style.display = 'none';
+            document.getElementById('payment-expired').style.display = 'none';
+            document.getElementById('confirmation-complete').style.display = 'none';
+            document.getElementById('confirm-btn').style.display = 'none';
+            document.getElementById('verify-btn').style.display = 'none';
+            document.getElementById('user-email').value = '';
+            document.getElementById('timer').classList.remove('expired');
+            existingTransactionIds = [];
+        }
+        async function initPaymentCheck() {
+            try {
+                const response = await fetch('/init-payment-check/{{ payment_id }}');
+                const data = await response.json();
+                if (data.existing_transaction_ids) {
+                    existingTransactionIds = data.existing_transaction_ids;
+                    startPaymentCheck();
+                } else {
+                    console.error('Failed to initialize payment check');
+                }
+            } catch (error) {
+                console.error('Error initializing payment check:', error);
+            }
+        }
+        function startPaymentCheck() {
+            paymentCheckInterval = setInterval(async () => {
+                if (timeLeft <= 0) return;
+                try {
+                    const existingIdsParam = existingTransactionIds.join(',');
+                    const response = await fetch(`/check-payment/{{ payment_id }}?existing_ids=${existingIdsParam}`);
+                    const data = await response.json();
+                    if (data.payment_received) {
+                        paymentTransaction = data.transaction;
+                        document.getElementById('waiting-message').style.display = 'none';
+                        document.getElementById('payment-received').style.display = 'block';
+                        document.getElementById('verify-btn').style.display = 'inline-block';
+                        stopPaymentCheck();
+                    }
+                } catch (error) {
+                    console.log('Error checking payment status:', error);
+                }
+            }, 2000);
+        }
+        function stopPaymentCheck() {
+            if (paymentCheckInterval) {
+                clearInterval(paymentCheckInterval);
+                paymentCheckInterval = null;
+            }
+        }
+        function startTimer() {
+            timerInterval = setInterval(() => {
+                timeLeft--;
+                updateTimerDisplay();
+                if (timeLeft <= 0) {
+                    stopTimer();
+                    stopPaymentCheck();
+                    document.getElementById('waiting-message').style.display = 'none';
+                    document.getElementById('payment-expired').style.display = 'block';
+                    document.getElementById('confirm-btn').style.display = 'none';
+                    document.getElementById('verify-btn').style.display = 'none';
+                }
+            }, 1000);
+        }
+        function stopTimer() {
+            if (timerInterval) {
+                clearInterval(timerInterval);
+                timerInterval = null;
+            }
+        }
+        function updateTimerDisplay() {
+            const minutes = Math.floor(timeLeft / 60);
+            const seconds = timeLeft % 60;
+            const timerElement = document.getElementById('timer');
+            timerElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+            if (timeLeft <= 60) {
+                timerElement.classList.add('expired');
+            }
+        }
+        function verifyEmail() {
+            const userEmail = document.getElementById('user-email').value.trim();
+            const senderEmail = paymentTransaction ? paymentTransaction.from_email : '';
+            if (!userEmail) {
+                alert('Please enter your email address');
+                return;
+            }
+            if (userEmail.toLowerCase() === senderEmail.toLowerCase()) {
+                document.getElementById('verify-btn').style.display = 'none';
+                document.getElementById('confirm-btn').style.display = 'inline-block';
+            } else {
+                alert('Email address does not match the payment sender. Please use the email you sent the payment from.');
+                document.getElementById('user-email').focus();
+            }
+        }
+        async function confirmPayment() {
+            const confirmButton = document.getElementById('confirm-btn');
+            confirmButton.disabled = true;
+            confirmButton.textContent = 'Confirming...';
+            try {
+                const response = await fetch('/pay/{{ payment_id }}', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    }
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    document.getElementById('payment-received').style.display = 'none';
+                    document.getElementById('confirm-btn').style.display = 'none';
+                    document.getElementById('confirmation-complete').style.display = 'block';
+                    if (paymentTransaction && paymentTransaction.from_email) {
+                        document.getElementById('sender-email-display').textContent = `From: ${paymentTransaction.from_email}`;
+                    }
+                    stopTimer();
+                    setTimeout(() => {
+                        location.reload();
+                    }, 3000);
+                } else {
+                    alert('Payment confirmation failed: ' + data.error);
+                    confirmButton.disabled = false;
+                    confirmButton.textContent = 'Confirm Payment';
+                }
+            } catch (error) {
+                alert('Payment confirmation failed: ' + error.message);
+                confirmButton.disabled = false;
+                confirmButton.textContent = 'Confirm Payment';
+            }
+        }
+        window.onclick = function(event) {
+            const modal = document.getElementById('paymentModal');
+            if (event.target == modal) {
+                closePaymentModal();
+            }
+        }
+        window.onbeforeunload = function() {
+            stopPaymentCheck();
+            stopTimer();
+        };
+    </script>
+    </div>
+</body>
+</html>