Hugging Face's logo

Spaces:
GamerC0der
/
astrapay
Sleeping

App Files Community
GamerC0der commited on
Commit
9a2f9f8
·
verified ·
1 Parent(s): 6448428

Update templates/payment.html

Browse files
Files changed (1) hide show
  1. templates/payment.html +95 -59
templates/payment.html CHANGED
@@ -14,38 +14,9 @@
14
  color: #ffffff;
15
  line-height: 1.6;
16
  }
17
- .top-bar {
18
- position: fixed;
19
- top: 0;
20
- left: 0;
21
- right: 0;
22
- background-color: rgba(26, 26, 26, 0.95);
23
- backdrop-filter: blur(10px);
24
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
25
- padding: 1rem 2rem;
26
- display: flex;
27
- justify-content: center;
28
- gap: 2rem;
29
- z-index: 1000;
30
- }
31
- .top-bar a {
32
- color: #ffffff;
33
- text-decoration: none;
34
- font-size: 1.2rem;
35
- font-weight: 600;
36
- transition: color 0.3s ease;
37
- }
38
- .top-bar a:hover {
39
- color: rgba(255, 255, 255, 0.7);
40
- }
41
- .top-bar a.active {
42
- color: #ffffff;
43
- border-bottom: 2px solid #ffffff;
44
- padding-bottom: 0.25rem;
45
- }
46
  .main-content {
47
- margin-top: 80px;
48
- min-height: calc(100vh - 80px);
49
  display: flex;
50
  justify-content: center;
51
  align-items: center;
@@ -128,6 +99,10 @@
128
  transition: all 0.3s ease;
129
  letter-spacing: 0.01em;
130
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
 
 
 
 
131
  }
132
  .pay-button:hover:not(:disabled) {
133
  transform: translateY(-2px);
@@ -173,6 +148,17 @@
173
  .back-link:hover {
174
  color: rgba(255, 255, 255, 0.9);
175
  }
 
 
 
 
 
 
 
 
 
 
 
176
  .banner {
177
  background: rgba(255, 193, 7, 0.15);
178
  border: 1px solid rgba(255, 193, 7, 0.3);
@@ -234,20 +220,34 @@
234
  justify-content: center;
235
  margin-top: 2rem;
236
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  </style>
238
  </head>
239
  <body>
240
- <div class="top-bar">
241
- <a href="/">AstraPay</a>
242
- <a href="/bank">AstraBank</a>
243
- </div>
244
  <div class="main-content">
245
  <div class="container">
246
  <h1 class="title">AstraPay</h1>
247
-
248
- <div class="banner">
249
- Payments May Reset Daily. Ensure your link works.
250
- </div>
251
 
252
  {% if recipient_email %}
253
  <div class="banner" style="background: rgba(0, 255, 136, 0.15); border: 1px solid rgba(0, 255, 136, 0.3); color: #00ff88;">
@@ -257,15 +257,29 @@
257
 
258
  <div class="payment-card">
259
  <div class="amount">{{ amount }} Astra{{ 's' if amount > 1 else '' }}</div>
 
 
 
 
 
 
 
 
260
  <div class="description">{{ description }}</div>
261
  <div class="status {{ 'paid' if paid else 'pending' }}">
262
  {{ 'Paid' if paid else 'Pending Payment' }}
263
  </div>
264
 
265
  {% if not paid %}
266
- <button class="pay-button" onclick="processPayment()">
267
- Pay {{ amount }} Astra{{ 's' if amount > 1 else '' }}
268
- </button>
 
 
 
 
 
 
269
  {% else %}
270
  <div style="font-size: 1.2rem; color: #00ff88;">✓ Payment Completed</div>
271
  {% endif %}
@@ -278,9 +292,14 @@
278
  <div class="payment-modal-content">
279
  <div class="payment-modal-title">Complete Payment</div>
280
  <div class="payment-instruction">
281
- Please send {{ amount }} Astra{{ 's' if amount > 1 else '' }} to the following address:
 
 
 
 
282
  </div>
283
- <div class="email-address">astratrader@astranova.org</div>
 
284
 
285
  <div id="payment-status" class="payment-instruction">
286
  <div id="waiting-message">
@@ -288,7 +307,7 @@
288
  <div id="timer" class="timer">5:00</div>
289
  </div>
290
  <div id="payment-received" style="display: none;">
291
- ✓ Payment of {{ amount }} Astra{{ 's' if amount > 1 else '' }} received!
292
  <br><br>
293
  Please enter your email to confirm:
294
  <br>
@@ -306,9 +325,26 @@
306
  </div>
307
 
308
  <div class="payment-modal-buttons">
309
- <button class="btn-secondary" onclick="closePaymentModal()">Cancel</button>
310
- <button id="confirm-btn" class="pay-button" onclick="confirmPayment()" style="display: none;">Confirm Payment</button>
311
- <button id="verify-btn" class="pay-button" onclick="verifyEmail()" style="display: none;">Verify Email</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
312
  </div>
313
  </div>
314
  </div>
@@ -316,9 +352,10 @@
316
  <script>
317
  let paymentCheckInterval;
318
  let timerInterval;
319
- let existingTransactionIds = [];
320
  let timeLeft = 300;
321
  let paymentTransaction = null;
 
 
322
 
323
  function processPayment() {
324
  document.getElementById('paymentModal').style.display = 'block';
@@ -340,7 +377,6 @@
340
  document.getElementById('verify-btn').style.display = 'none';
341
  document.getElementById('user-email').value = '';
342
  document.getElementById('timer').classList.remove('expired');
343
- existingTransactionIds = [];
344
  }
345
 
346
  async function initPaymentCheck() {
@@ -348,12 +384,13 @@
348
  const response = await fetch('/init-payment-check/{{ payment_id }}');
349
  const data = await response.json();
350
 
351
- if (data.existing_transaction_ids) {
352
- existingTransactionIds = data.existing_transaction_ids;
353
- startPaymentCheck();
354
- } else {
355
- console.error('Failed to initialize payment check');
356
  }
 
357
  } catch (error) {
358
  console.error('Error initializing payment check:', error);
359
  }
@@ -364,15 +401,14 @@
364
  if (timeLeft <= 0) return;
365
 
366
  try {
367
- const existingIdsParam = existingTransactionIds.join(',');
368
- const response = await fetch(`/check-payment/{{ payment_id }}?existing_ids=${existingIdsParam}`);
369
  const data = await response.json();
370
 
371
  if (data.payment_received) {
372
  paymentTransaction = data.transaction;
373
  document.getElementById('waiting-message').style.display = 'none';
374
  document.getElementById('payment-received').style.display = 'block';
375
- document.getElementById('verify-btn').style.display = 'inline-block';
376
  stopPaymentCheck();
377
  }
378
  } catch (error) {
@@ -434,7 +470,7 @@
434
 
435
  if (userEmail.toLowerCase() === senderEmail.toLowerCase()) {
436
  document.getElementById('verify-btn').style.display = 'none';
437
- document.getElementById('confirm-btn').style.display = 'inline-block';
438
  } else {
439
  alert('Email address does not match the payment sender. Please use the email you sent the payment from.');
440
  document.getElementById('user-email').focus();
 
14
  color: #ffffff;
15
  line-height: 1.6;
16
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  .main-content {
18
+ margin-top: 0;
19
+ min-height: 100vh;
20
  display: flex;
21
  justify-content: center;
22
  align-items: center;
 
99
  transition: all 0.3s ease;
100
  letter-spacing: 0.01em;
101
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
102
+ display: flex;
103
+ align-items: center;
104
+ gap: 0.5rem;
105
+ justify-content: center;
106
  }
107
  .pay-button:hover:not(:disabled) {
108
  transform: translateY(-2px);
 
148
  .back-link:hover {
149
  color: rgba(255, 255, 255, 0.9);
150
  }
151
+ .top-banner {
152
+ background: rgba(100, 100, 255, 0.15);
153
+ border: 1px solid rgba(100, 100, 255, 0.3);
154
+ border-radius: 8px;
155
+ padding: 0.75rem 1.5rem;
156
+ margin-bottom: 2rem;
157
+ color: #6464ff;
158
+ font-size: 0.9rem;
159
+ font-weight: 500;
160
+ text-align: center;
161
+ }
162
  .banner {
163
  background: rgba(255, 193, 7, 0.15);
164
  border: 1px solid rgba(255, 193, 7, 0.3);
 
220
  justify-content: center;
221
  margin-top: 2rem;
222
  }
223
+ .btn-secondary {
224
+ background-color: rgba(255, 255, 255, 0.05);
225
+ color: rgba(255, 255, 255, 0.9);
226
+ border: 1px solid rgba(255, 255, 255, 0.2);
227
+ padding: 0.75rem 1.5rem;
228
+ border-radius: 8px;
229
+ cursor: pointer;
230
+ font-size: 0.9375rem;
231
+ font-weight: 500;
232
+ transition: all 0.2s ease;
233
+ display: flex;
234
+ align-items: center;
235
+ gap: 0.5rem;
236
+ }
237
+ .btn-secondary:hover {
238
+ background-color: rgba(255, 255, 255, 0.1);
239
+ border-color: rgba(255, 255, 255, 0.3);
240
+ transform: translateY(-1px);
241
+ }
242
+ .btn-secondary:active {
243
+ transform: translateY(0);
244
+ }
245
  </style>
246
  </head>
247
  <body>
 
 
 
 
248
  <div class="main-content">
249
  <div class="container">
250
  <h1 class="title">AstraPay</h1>
 
 
 
 
251
 
252
  {% if recipient_email %}
253
  <div class="banner" style="background: rgba(0, 255, 136, 0.15); border: 1px solid rgba(0, 255, 136, 0.3); color: #00ff88;">
 
257
 
258
  <div class="payment-card">
259
  <div class="amount">{{ amount }} Astra{{ 's' if amount > 1 else '' }}</div>
260
+ {% if fee > 0 %}
261
+ <div style="font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.5rem;">
262
+ Astratrader Fee: {{ fee }} Astra{{ 's' if fee > 1 else '' }}
263
+ </div>
264
+ <div style="font-size: 1rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 1rem; font-weight: 500;">
265
+ Total to send: {{ total_amount }} Astra{{ 's' if total_amount > 1 else '' }}
266
+ </div>
267
+ {% endif %}
268
  <div class="description">{{ description }}</div>
269
  <div class="status {{ 'paid' if paid else 'pending' }}">
270
  {{ 'Paid' if paid else 'Pending Payment' }}
271
  </div>
272
 
273
  {% if not paid %}
274
+ <div style="display: flex; justify-content: center; margin-top: 1rem;">
275
+ <button class="pay-button" onclick="processPayment()" style="display: flex; align-items: center; gap: 0.5rem; justify-content: center;">
276
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
277
+ <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
278
+ <line x1="1" y1="10" x2="23" y2="10"></line>
279
+ </svg>
280
+ Pay {{ total_amount }} Astra{{ 's' if total_amount > 1 else '' }}
281
+ </button>
282
+ </div>
283
  {% else %}
284
  <div style="font-size: 1.2rem; color: #00ff88;">✓ Payment Completed</div>
285
  {% endif %}
 
292
  <div class="payment-modal-content">
293
  <div class="payment-modal-title">Complete Payment</div>
294
  <div class="payment-instruction">
295
+ Please send {{ total_amount }} Astra{{ 's' if total_amount > 1 else '' }} to the following address:
296
+ </div>
297
+ {% if fee > 0 %}
298
+ <div style="font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin: 0.5rem 0;">
299
+ Payment: {{ amount }} Astra{{ 's' if amount > 1 else '' }} + Fee: {{ fee }} Astra{{ 's' if fee > 1 else '' }}
300
  </div>
301
+ {% endif %}
302
+ <div class="email-address">astrapay@astranova.org</div>
303
 
304
  <div id="payment-status" class="payment-instruction">
305
  <div id="waiting-message">
 
307
  <div id="timer" class="timer">5:00</div>
308
  </div>
309
  <div id="payment-received" style="display: none;">
310
+ ✓ Payment of {{ total_amount }} Astra{{ 's' if total_amount > 1 else '' }} received!
311
  <br><br>
312
  Please enter your email to confirm:
313
  <br>
 
325
  </div>
326
 
327
  <div class="payment-modal-buttons">
328
+ <button class="btn-secondary" onclick="closePaymentModal()">
329
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
330
+ <line x1="18" y1="6" x2="6" y2="18"></line>
331
+ <line x1="6" y1="6" x2="18" y2="18"></line>
332
+ </svg>
333
+ Cancel
334
+ </button>
335
+ <button id="confirm-btn" class="pay-button" onclick="confirmPayment()" style="display: none;">
336
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
337
+ <polyline points="20 6 9 17 4 12"></polyline>
338
+ </svg>
339
+ Confirm Payment
340
+ </button>
341
+ <button id="verify-btn" class="pay-button" onclick="verifyEmail()" style="display: none;">
342
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
343
+ <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
344
+ <polyline points="22,6 12,13 2,6"></polyline>
345
+ </svg>
346
+ Verify Email
347
+ </button>
348
  </div>
349
  </div>
350
  </div>
 
352
  <script>
353
  let paymentCheckInterval;
354
  let timerInterval;
 
355
  let timeLeft = 300;
356
  let paymentTransaction = null;
357
+ let totalAmount = {{ total_amount }};
358
+ let fee = {{ fee }};
359
 
360
  function processPayment() {
361
  document.getElementById('paymentModal').style.display = 'block';
 
377
  document.getElementById('verify-btn').style.display = 'none';
378
  document.getElementById('user-email').value = '';
379
  document.getElementById('timer').classList.remove('expired');
 
380
  }
381
 
382
  async function initPaymentCheck() {
 
384
  const response = await fetch('/init-payment-check/{{ payment_id }}');
385
  const data = await response.json();
386
 
387
+ if (data.total_amount) {
388
+ totalAmount = data.total_amount;
389
+ }
390
+ if (data.fee !== undefined) {
391
+ fee = data.fee;
392
  }
393
+ startPaymentCheck();
394
  } catch (error) {
395
  console.error('Error initializing payment check:', error);
396
  }
 
401
  if (timeLeft <= 0) return;
402
 
403
  try {
404
+ const response = await fetch(`/check-payment/{{ payment_id }}`);
 
405
  const data = await response.json();
406
 
407
  if (data.payment_received) {
408
  paymentTransaction = data.transaction;
409
  document.getElementById('waiting-message').style.display = 'none';
410
  document.getElementById('payment-received').style.display = 'block';
411
+ document.getElementById('verify-btn').style.display = 'flex';
412
  stopPaymentCheck();
413
  }
414
  } catch (error) {
 
470
 
471
  if (userEmail.toLowerCase() === senderEmail.toLowerCase()) {
472
  document.getElementById('verify-btn').style.display = 'none';
473
+ document.getElementById('confirm-btn').style.display = 'flex';
474
  } else {
475
  alert('Email address does not match the payment sender. Please use the email you sent the payment from.');
476
  document.getElementById('user-email').focus();