Spaces:
Sleeping
Sleeping
Update templates/home.html
Browse files- templates/home.html +66 -5
templates/home.html
CHANGED
|
@@ -471,6 +471,53 @@
|
|
| 471 |
stroke-width: 2;
|
| 472 |
fill: none;
|
| 473 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 474 |
</style>
|
| 475 |
</head>
|
| 476 |
<body>
|
|
@@ -480,9 +527,6 @@
|
|
| 480 |
<div class="main-content">
|
| 481 |
<div class="container">
|
| 482 |
<h1 class="title">AstraPay</h1>
|
| 483 |
-
<div class="top-banner">
|
| 484 |
-
Contact Instant on Slack if any issues occur.
|
| 485 |
-
</div>
|
| 486 |
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
| 487 |
<button class="button" onclick="openModal()" style="display: flex; align-items: center; gap: 0.5rem;">
|
| 488 |
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
@@ -887,7 +931,6 @@
|
|
| 887 |
function validateClaimAstrasAmount(input) {
|
| 888 |
const value = parseInt(input.value);
|
| 889 |
if (!isNaN(value) && value > 0) {
|
| 890 |
-
// 2% fee if over 50 astras, otherwise 1% fee
|
| 891 |
const feePercent = value > 50 ? 0.02 : 0.01;
|
| 892 |
const sendAmount = Math.max(1, Math.floor(value * (1 + feePercent)));
|
| 893 |
const claimAmount = Math.max(1, Math.floor(value * (1 - feePercent)));
|
|
@@ -976,7 +1019,6 @@
|
|
| 976 |
async function goToLink() {
|
| 977 |
const linkId = document.getElementById('link-id').value.trim();
|
| 978 |
|
| 979 |
-
// Validate UUID4 format (36 characters with hyphens)
|
| 980 |
const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
|
| 981 |
if (!linkId || !uuidRegex.test(linkId)) {
|
| 982 |
showToast('Please enter a valid Link ID');
|
|
@@ -1034,7 +1076,26 @@
|
|
| 1034 |
}
|
| 1035 |
}
|
| 1036 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1037 |
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1038 |
</div>
|
| 1039 |
</body>
|
| 1040 |
</html>
|
|
|
|
| 471 |
stroke-width: 2;
|
| 472 |
fill: none;
|
| 473 |
}
|
| 474 |
+
|
| 475 |
+
.bottom-notification {
|
| 476 |
+
position: fixed;
|
| 477 |
+
bottom: 20px;
|
| 478 |
+
right: 20px;
|
| 479 |
+
z-index: 1000;
|
| 480 |
+
max-width: 300px;
|
| 481 |
+
opacity: 1;
|
| 482 |
+
transition: opacity 0.3s ease;
|
| 483 |
+
}
|
| 484 |
+
|
| 485 |
+
.bottom-notification.fade-out {
|
| 486 |
+
opacity: 0;
|
| 487 |
+
pointer-events: none;
|
| 488 |
+
}
|
| 489 |
+
|
| 490 |
+
.notification-content {
|
| 491 |
+
background: rgba(0, 0, 0, 0.8);
|
| 492 |
+
color: #ffffff;
|
| 493 |
+
padding: 12px 16px;
|
| 494 |
+
border-radius: 8px;
|
| 495 |
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
| 496 |
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
| 497 |
+
font-size: 0.9rem;
|
| 498 |
+
display: flex;
|
| 499 |
+
align-items: center;
|
| 500 |
+
justify-content: space-between;
|
| 501 |
+
gap: 10px;
|
| 502 |
+
}
|
| 503 |
+
|
| 504 |
+
.close-btn {
|
| 505 |
+
background: none;
|
| 506 |
+
border: none;
|
| 507 |
+
color: #ffffff;
|
| 508 |
+
cursor: pointer;
|
| 509 |
+
padding: 2px;
|
| 510 |
+
border-radius: 4px;
|
| 511 |
+
transition: background-color 0.2s ease;
|
| 512 |
+
display: flex;
|
| 513 |
+
align-items: center;
|
| 514 |
+
justify-content: center;
|
| 515 |
+
flex-shrink: 0;
|
| 516 |
+
}
|
| 517 |
+
|
| 518 |
+
.close-btn:hover {
|
| 519 |
+
background-color: rgba(255, 255, 255, 0.1);
|
| 520 |
+
}
|
| 521 |
</style>
|
| 522 |
</head>
|
| 523 |
<body>
|
|
|
|
| 527 |
<div class="main-content">
|
| 528 |
<div class="container">
|
| 529 |
<h1 class="title">AstraPay</h1>
|
|
|
|
|
|
|
|
|
|
| 530 |
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
| 531 |
<button class="button" onclick="openModal()" style="display: flex; align-items: center; gap: 0.5rem;">
|
| 532 |
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
|
| 931 |
function validateClaimAstrasAmount(input) {
|
| 932 |
const value = parseInt(input.value);
|
| 933 |
if (!isNaN(value) && value > 0) {
|
|
|
|
| 934 |
const feePercent = value > 50 ? 0.02 : 0.01;
|
| 935 |
const sendAmount = Math.max(1, Math.floor(value * (1 + feePercent)));
|
| 936 |
const claimAmount = Math.max(1, Math.floor(value * (1 - feePercent)));
|
|
|
|
| 1019 |
async function goToLink() {
|
| 1020 |
const linkId = document.getElementById('link-id').value.trim();
|
| 1021 |
|
|
|
|
| 1022 |
const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
|
| 1023 |
if (!linkId || !uuidRegex.test(linkId)) {
|
| 1024 |
showToast('Please enter a valid Link ID');
|
|
|
|
| 1076 |
}
|
| 1077 |
}
|
| 1078 |
});
|
| 1079 |
+
|
| 1080 |
+
function closeNotification() {
|
| 1081 |
+
const notification = document.getElementById('slack-notification');
|
| 1082 |
+
notification.classList.add('fade-out');
|
| 1083 |
+
setTimeout(() => {
|
| 1084 |
+
notification.style.display = 'none';
|
| 1085 |
+
}, 300);
|
| 1086 |
+
}
|
| 1087 |
</script>
|
| 1088 |
+
|
| 1089 |
+
<div id="slack-notification" class="bottom-notification">
|
| 1090 |
+
<div class="notification-content">
|
| 1091 |
+
Contact Matthew on Slack if any issues occur.
|
| 1092 |
+
<button class="close-btn" onclick="closeNotification()">
|
| 1093 |
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
| 1094 |
+
<line x1="18" y1="6" x2="6" y2="18"></line>
|
| 1095 |
+
<line x1="6" y1="6" x2="18" y2="18"></line>
|
| 1096 |
+
</svg>
|
| 1097 |
+
</button>
|
| 1098 |
+
</div>
|
| 1099 |
</div>
|
| 1100 |
</body>
|
| 1101 |
</html>
|