Spaces:

GamerC0der
/

astrapay

Sleeping

App Files Files Community

GamerC0der commited on about 1 month ago

Commit

678a59a

verified ·

1 Parent(s): 089e8d9

Create templates/home.html

Browse files

Files changed (1) hide show

templates/home.html +272 -0

templates/home.html ADDED Viewed

	@@ -0,0 +1,272 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AstraPay</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            background-color: #000000;
+            font-family: Arial, sans-serif;
+        }
+        .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;
+            height: calc(100vh - 80px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .container {
+            text-align: center;
+        }
+        .title {
+            color: #ffffff;
+            font-size: 4rem;
+            font-weight: bold;
+            text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.3);
+            margin-bottom: 2rem;
+        }
+        .button {
+            background-color: #ffffff;
+            color: #000000;
+            border: none;
+            padding: 1rem 2rem;
+            font-size: 1.2rem;
+            font-weight: bold;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-block;
+        }
+        .button:hover {
+            background-color: #f0f0f0;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+        }
+        .modal-content {
+            background-color: #1a1a1a;
+            margin: 15% auto;
+            padding: 2rem;
+            border-radius: 8px;
+            width: 90%;
+            max-width: 500px;
+            border: 1px solid #333;
+        }
+        .modal-header {
+            color: #ffffff;
+            margin-bottom: 1.5rem;
+            font-size: 1.5rem;
+            font-weight: bold;
+        }
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        .form-label {
+            display: block;
+            color: #ffffff;
+            margin-bottom: 0.5rem;
+            font-weight: bold;
+        }
+        .form-input {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid #555;
+            border-radius: 4px;
+            background-color: #2a2a2a;
+            color: #ffffff;
+            font-size: 1rem;
+        }
+        .form-input:focus {
+            outline: none;
+            border-color: #ffffff;
+        }
+        .form-textarea {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid #555;
+            border-radius: 4px;
+            background-color: #2a2a2a;
+            color: #ffffff;
+            font-size: 1rem;
+            min-height: 100px;
+            resize: vertical;
+        }
+        .form-textarea:focus {
+            outline: none;
+            border-color: #ffffff;
+        }
+        .modal-buttons {
+            display: flex;
+            gap: 1rem;
+            justify-content: flex-end;
+            margin-top: 2rem;
+        }
+        .btn-secondary {
+            background-color: #555;
+            color: #ffffff;
+            border: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+        .btn-secondary:hover {
+            background-color: #666;
+        }
+        .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;
+            max-width: 500px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    </style>
+</head>
+<body>
+    <div class="top-bar">
+        <a href="/" class="active">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>
+        <button class="button" onclick="openModal()">Create Payment Link</button>
+    </div>
+    <div id="paymentModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">Create Payment Link</div>
+            <div class="form-group">
+                <label class="form-label" for="astras">Number of Astras</label>
+                <input type="number" id="astras" class="form-input" min="1" placeholder="Enter number of astras" required>
+            </div>
+            <div class="form-group">
+                <label class="form-label" for="description">Description</label>
+                <textarea id="description" class="form-textarea" placeholder="Enter payment description" required></textarea>
+            </div>
+            <div class="form-group">
+                <label class="form-label" for="recipient-email">Send to User (Optional)</label>
+                <input type="email" id="recipient-email" class="form-input" placeholder="Enter recipient email">
+            </div>
+            <div class="modal-buttons">
+                <button class="btn-secondary" onclick="closeModal()">Cancel</button>
+                <button class="button" onclick="createPaymentLink()">Create Link</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        function openModal() {
+            document.getElementById('paymentModal').style.display = 'block';
+        }
+        function closeModal() {
+            document.getElementById('paymentModal').style.display = 'none';
+            document.getElementById('astras').value = '';
+            document.getElementById('description').value = '';
+            document.getElementById('recipient-email').value = '';
+        }
+        async function createPaymentLink() {
+            const astras = document.getElementById('astras').value;
+            const description = document.getElementById('description').value;
+            const recipientEmail = document.getElementById('recipient-email').value.trim();
+            if (!astras || !description.trim()) {
+                alert('Please fill in all required fields');
+                return;
+            }
+            try {
+                const response = await fetch('/create-payment-link', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        amount: parseInt(astras),
+                        description: description.trim(),
+                        recipient_email: recipientEmail || null
+                    })
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    window.location.href = data.payment_url;
+                } else {
+                    alert('Error creating payment link: ' + data.error);
+                }
+            } catch (error) {
+                alert('Error creating payment link: ' + error.message);
+            }
+        }
+        window.onclick = function(event) {
+            const modal = document.getElementById('paymentModal');
+            if (event.target == modal) {
+                closeModal();
+            }
+        }
+    </script>
+    </div>
+</body>
+</html>