Update templates/home.html

templates/home.html

@@ -12,38 +12,9 @@
             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);
+            margin-top: 0;
+            height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -79,82 +50,230 @@
         .modal {
             display: none;
             position: fixed;
-            z-index: 1;
+            z-index: 50;
             left: 0;
             top: 0;
             width: 100%;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(4px);
+            -webkit-backdrop-filter: blur(4px);
+            animation: fadeIn 0.15s ease-out;
+        }
+        .modal.show {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: scale(0.96);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
         }
         .modal-content {
             background-color: #1a1a1a;
-            margin: 15% auto;
-            padding: 2rem;
-            border-radius: 8px;
+            position: relative;
+            padding: 0;
+            border-radius: 12px;
             width: 90%;
             max-width: 500px;
-            border: 1px solid #333;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+            animation: slideIn 0.2s ease-out;
+            display: flex;
+            flex-direction: column;
+            max-height: 90vh;
+            overflow: hidden;
         }
         .modal-header {
             color: #ffffff;
+            padding: 1.5rem 1.5rem 0 1.5rem;
             margin-bottom: 1.5rem;
-            font-size: 1.5rem;
-            font-weight: bold;
+            font-size: 1.25rem;
+            font-weight: 600;
+            letter-spacing: -0.01em;
+            line-height: 1.4;
+        }
+        .modal-close {
+            position: absolute;
+            right: 1rem;
+            top: 1rem;
+            background: transparent;
+            border: none;
+            color: rgba(255, 255, 255, 0.7);
+            cursor: pointer;
+            padding: 0.5rem;
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s ease;
+            width: 32px;
+            height: 32px;
+        }
+        .modal-close:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 1);
+        }
+        .modal-close:focus {
+            outline: 2px solid rgba(255, 255, 255, 0.5);
+            outline-offset: 2px;
+        }
+        .modal-close-icon {
+            width: 16px;
+            height: 16px;
+            stroke: currentColor;
+            stroke-width: 2;
+            fill: none;
+        }
+        .modal-body {
+            padding: 0 1.5rem 1.5rem 1.5rem;
+            overflow-y: auto;
         }
         .form-group {
-            margin-bottom: 1.5rem;
+            margin-bottom: 1.25rem;
         }
         .form-label {
             display: block;
-            color: #ffffff;
+            color: rgba(255, 255, 255, 0.9);
             margin-bottom: 0.5rem;
-            font-weight: bold;
+            font-weight: 500;
+            font-size: 0.875rem;
         }
         .form-input {
             width: 100%;
-            padding: 0.75rem;
-            border: 1px solid #555;
-            border-radius: 4px;
-            background-color: #2a2a2a;
+            padding: 0.625rem 0.875rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 6px;
+            background-color: rgba(255, 255, 255, 0.05);
             color: #ffffff;
-            font-size: 1rem;
+            font-size: 0.9375rem;
+            transition: all 0.2s ease;
+            box-sizing: border-box;
         }
         .form-input:focus {
             outline: none;
-            border-color: #ffffff;
+            border-color: rgba(255, 255, 255, 0.3);
+            background-color: rgba(255, 255, 255, 0.08);
+        }
+        .form-input::placeholder {
+            color: rgba(255, 255, 255, 0.4);
+        }
+        .form-input-email {
+            width: 100%;
+            padding: 0.625rem 0.875rem;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 8px;
+            background-color: rgba(255, 255, 255, 0.06);
+            color: #ffffff;
+            font-size: 0.9375rem;
+            transition: all 0.3s ease;
+            box-sizing: border-box;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+        }
+        .form-input-email:focus {
+            outline: none;
+            border-color: rgba(255, 255, 255, 0.4);
+            background-color: rgba(255, 255, 255, 0.1);
+            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
+        }
+        .form-input-email::placeholder {
+            color: rgba(255, 255, 255, 0.5);
+            font-style: italic;
+        }
+        .form-input-email:hover:not(:focus) {
+            border-color: rgba(255, 255, 255, 0.25);
+            background-color: rgba(255, 255, 255, 0.08);
         }
         .form-textarea {
             width: 100%;
-            padding: 0.75rem;
-            border: 1px solid #555;
-            border-radius: 4px;
-            background-color: #2a2a2a;
+            padding: 0.625rem 0.875rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 6px;
+            background-color: rgba(255, 255, 255, 0.05);
             color: #ffffff;
-            font-size: 1rem;
+            font-size: 0.9375rem;
             min-height: 100px;
             resize: vertical;
+            transition: all 0.2s ease;
+            box-sizing: border-box;
+            font-family: inherit;
         }
         .form-textarea:focus {
             outline: none;
-            border-color: #ffffff;
+            border-color: rgba(255, 255, 255, 0.3);
+            background-color: rgba(255, 255, 255, 0.08);
+        }
+        .form-textarea::placeholder {
+            color: rgba(255, 255, 255, 0.4);
         }
         .modal-buttons {
             display: flex;
-            gap: 1rem;
+            gap: 0.75rem;
             justify-content: flex-end;
-            margin-top: 2rem;
+            margin-top: 1.5rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
         }
         .btn-secondary {
-            background-color: #555;
-            color: #ffffff;
-            border: none;
-            padding: 0.75rem 1.5rem;
-            border-radius: 4px;
+            background-color: transparent;
+            color: rgba(255, 255, 255, 0.9);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 0.625rem 1.25rem;
+            border-radius: 6px;
             cursor: pointer;
-            font-size: 1rem;
+            font-size: 0.9375rem;
+            font-weight: 500;
+            transition: all 0.2s ease;
         }
         .btn-secondary:hover {
-            background-color: #666;
+            background-color: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.3);
+        }
+        .button {
+            background-color: #ffffff;
+            color: #000000;
+            border: none;
+            padding: 0.625rem 1.25rem;
+            font-size: 0.9375rem;
+            font-weight: 500;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-decoration: none;
+            display: inline-block;
+        }
+        .button:hover {
+            background-color: #f0f0f0;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
+        }
+        .top-banner {
+            background: rgba(100, 100, 255, 0.15);
+            border: 1px solid rgba(100, 100, 255, 0.3);
+            border-radius: 8px;
+            padding: 0.75rem 1.5rem;
+            margin-bottom: 2rem;
+            color: #6464ff;
+            font-size: 0.9rem;
+            font-weight: 500;
+            text-align: center;
+            max-width: 500px;
+            margin-left: auto;
+            margin-right: auto;
         }
         .banner {
             background: rgba(255, 193, 7, 0.15);
@@ -170,55 +289,307 @@
             margin-left: auto;
             margin-right: auto;
         }
+        .toast-container {
+            position: fixed;
+            bottom: 1.5rem;
+            right: 1.5rem;
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            pointer-events: none;
+        }
+        .toast {
+            background-color: #1a1a1a;
+            color: #ffffff;
+            padding: 0.875rem 1rem;
+            border-radius: 8px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+            min-width: 300px;
+            max-width: 400px;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            pointer-events: auto;
+            animation: toastSlideIn 0.3s ease-out;
+            font-size: 0.9375rem;
+        }
+        .toast.error {
+            border-color: rgba(239, 68, 68, 0.3);
+            background-color: rgba(239, 68, 68, 0.1);
+        }
+        .toast.success {
+            border-color: rgba(34, 197, 94, 0.3);
+            background-color: rgba(34, 197, 94, 0.1);
+        }
+        @keyframes toastSlideIn {
+            from {
+                opacity: 0;
+                transform: translateX(100%);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+        @keyframes toastSlideOut {
+            from {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            to {
+                opacity: 0;
+                transform: translateX(100%);
+            }
+        }
+        .toast.hiding {
+            animation: toastSlideOut 0.2s ease-in forwards;
+        }
+        .toast-icon {
+            flex-shrink: 0;
+            width: 20px;
+            height: 20px;
+        }
+        .toast-message {
+            flex: 1;
+            line-height: 1.5;
+        }
+        .toast-close {
+            background: transparent;
+            border: none;
+            color: rgba(255, 255, 255, 0.6);
+            cursor: pointer;
+            padding: 0.25rem;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s ease;
+            flex-shrink: 0;
+        }
+        .toast-close:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 1);
+        }
+        .toast-close-icon {
+            width: 16px;
+            height: 16px;
+            stroke: currentColor;
+            stroke-width: 2;
+            fill: none;
+        }
     </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 class="top-banner">
+            Contact Matthew on Slack if any issues occur.
+        </div>
+        <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
+            <button class="button" onclick="openModal()" style="display: flex; align-items: center; gap: 0.5rem;">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
+                    <line x1="1" y1="10" x2="23" y2="10"></line>
+                </svg>
+                Create Payment Link
+            </button>
+            <button class="button" onclick="openClaimModal()" style="background-color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; gap: 0.5rem;">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="20 12 20 22 4 22 4 12"></polyline>
+                    <rect x="2" y="7" width="20" height="5"></rect>
+                    <line x1="12" y1="22" x2="12" y2="7"></line>
+                    <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
+                    <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
+                </svg>
+                Create Claim Link
+            </button>
+            <button class="button" onclick="openEnterIdModal()" style="background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; display: flex; align-items: center; gap: 0.5rem;">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z"></path>
+                </svg>
+                Enter ID
+            </button>
         </div>
-        <button class="button" onclick="openModal()">Create Payment Link</button>
     </div>
 
     <div id="paymentModal" class="modal">
         <div class="modal-content">
+            <button class="modal-close" onclick="closeModal()" aria-label="Close">
+                <svg class="modal-close-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </button>
             <div class="modal-header">Create Payment Link</div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label class="form-label" for="astras">Number of Astras</label>
+                    <input type="number" id="astras" class="form-input" min="1" max="10000" placeholder="Enter number of astras" required oninput="validateAstrasAmount(this)">
+                </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="description">Description</label>
-                <textarea id="description" class="form-textarea" placeholder="Enter payment description" required></textarea>
+                <div class="form-group">
+                    <label class="form-label" for="recipient-email">Your AstraNova Email</label>
+                    <input type="email" id="recipient-email" class="form-input-email" placeholder="Enter your AstraNova email" required>
+                </div>
+
+                <div class="modal-buttons">
+                    <button class="btn-secondary" onclick="closeModal()" style="display: flex; align-items: center; gap: 0.5rem;">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                        Cancel
+                    </button>
+                    <button class="button" onclick="createPaymentLink()" style="display: flex; align-items: center; gap: 0.5rem;">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                        </svg>
+                        Create Link
+                    </button>
+                </div>
             </div>
+        </div>
+    </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 id="claimModal" class="modal">
+        <div class="modal-content">
+            <button class="modal-close" onclick="closeClaimModal()" aria-label="Close">
+                <svg class="modal-close-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </button>
+            <div class="modal-header">Create Claim Link</div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label class="form-label" for="claim-astras">Number of Astras</label>
+                    <input type="number" id="claim-astras" class="form-input" min="1" max="10000" placeholder="Enter number of astras" required oninput="validateClaimAstrasAmount(this)">
+                    <div style="font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); margin-top: 0.5rem;">
+                        You'll send: <span id="claim-send-amount">-</span> Astras (+1%)<br>
+                        Claimable: <span id="claim-claim-amount">-</span> Astras (-1%)
+                    </div>
+                </div>
+
+                <div class="modal-buttons">
+                    <button class="btn-secondary" onclick="closeClaimModal()" style="display: flex; align-items: center; gap: 0.5rem;">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                        Cancel
+                    </button>
+                    <button class="button" onclick="createClaimLink()" style="display: flex; align-items: center; gap: 0.5rem;">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="20 12 20 22 4 22 4 12"></polyline>
+                            <rect x="2" y="7" width="20" height="5"></rect>
+                            <line x1="12" y1="22" x2="12" y2="7"></line>
+                            <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
+                            <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
+                        </svg>
+                        Create Claim Link
+                    </button>
+                </div>
             </div>
+        </div>
+    </div>
+
+    <div id="enterIdModal" class="modal">
+        <div class="modal-content">
+            <button class="modal-close" onclick="closeEnterIdModal()" aria-label="Close">
+                <svg class="modal-close-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </button>
+            <div class="modal-header">Enter Link ID</div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label class="form-label" for="link-id">Enter 4-character code</label>
+                    <input type="text" id="link-id" class="form-input" placeholder="e.g., A3B7" maxlength="4" style="text-transform: uppercase; font-size: 1.2rem; letter-spacing: 0.5rem; text-align: center;" required oninput="this.value = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '')" onkeypress="if(event.key === 'Enter') goToLink()">
+                </div>
 
-            <div class="modal-buttons">
-                <button class="btn-secondary" onclick="closeModal()">Cancel</button>
-                <button class="button" onclick="createPaymentLink()">Create Link</button>
+                <div class="modal-buttons">
+                    <button class="btn-secondary" onclick="closeEnterIdModal()" style="display: flex; align-items: center; gap: 0.5rem;">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                        Cancel
+                    </button>
+                    <button class="button" onclick="goToLink()" style="display: flex; align-items: center; gap: 0.5rem;">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M5 12h14M12 5l7 7-7 7"></path>
+                        </svg>
+                        Go to Link
+                    </button>
+                </div>
             </div>
         </div>
     </div>
 
+    <div id="toastContainer" class="toast-container"></div>
+
     <script>
+        function showToast(message, type = 'error') {
+            const container = document.getElementById('toastContainer');
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            
+            const iconSvg = type === 'error' 
+                ? '<svg class="toast-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+                : '<svg class="toast-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+            
+            toast.innerHTML = `
+                ${iconSvg}
+                <span class="toast-message">${message}</span>
+                <button class="toast-close" onclick="this.parentElement.remove()" aria-label="Close">
+                    <svg class="toast-close-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </button>
+            `;
+            
+            container.appendChild(toast);
+            
+            setTimeout(() => {
+                toast.classList.add('hiding');
+                setTimeout(() => {
+                    if (toast.parentElement) {
+                        toast.remove();
+                    }
+                }, 200);
+            }, 4000);
+        }
+        function validateAstrasAmount(input) {
+            const value = parseInt(input.value);
+            if (!isNaN(value) && value > 10000) {
+                input.value = 10000;
+                showToast('Maximum 10,000 Astras per payment link');
+            }
+        }
+
         function openModal() {
-            document.getElementById('paymentModal').style.display = 'block';
+            const modal = document.getElementById('paymentModal');
+            modal.style.display = 'flex';
+            setTimeout(() => {
+                modal.classList.add('show');
+            }, 10);
+            document.body.style.overflow = 'hidden';
         }
 
         function closeModal() {
-            document.getElementById('paymentModal').style.display = 'none';
+            const modal = document.getElementById('paymentModal');
+            modal.classList.remove('show');
+            setTimeout(() => {
+                modal.style.display = 'none';
+            }, 200);
+            document.body.style.overflow = '';
             document.getElementById('astras').value = '';
             document.getElementById('description').value = '';
             document.getElementById('recipient-email').value = '';
@@ -226,11 +597,31 @@
 
         async function createPaymentLink() {
             const astras = document.getElementById('astras').value;
-            const description = document.getElementById('description').value;
+            const description = document.getElementById('description').value.trim();
             const recipientEmail = document.getElementById('recipient-email').value.trim();
 
-            if (!astras || !description.trim()) {
-                alert('Please fill in all required fields');
+            if (!astras) {
+                showToast('Please enter the number of Astras');
+                document.getElementById('astras').focus();
+                return;
+            }
+
+            const astrasAmount = parseInt(astras);
+            if (astrasAmount > 10000) {
+                showToast('Maximum 10,000 Astras per payment link');
+                document.getElementById('astras').focus();
+                return;
+            }
+
+            if (!description) {
+                showToast('Please enter a description');
+                document.getElementById('description').focus();
+                return;
+            }
+
+            if (!recipientEmail) {
+                showToast('Please enter your AstraNova email');
+                document.getElementById('recipient-email').focus();
                 return;
             }
 
@@ -241,30 +632,187 @@
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify({
-                        amount: parseInt(astras),
+                        amount: astrasAmount,
                         description: description.trim(),
-                        recipient_email: recipientEmail || null
+                        recipient_email: recipientEmail
                     })
                 });
 
                 const data = await response.json();
 
                 if (response.ok) {
-                    window.location.href = data.payment_url;
+                    showToast('Payment link created successfully!', 'success');
+                    setTimeout(() => {
+                        window.location.href = data.payment_url;
+                    }, 500);
                 } else {
-                    alert('Error creating payment link: ' + data.error);
+                    showToast('Error creating payment link: ' + data.error);
                 }
             } catch (error) {
-                alert('Error creating payment link: ' + error.message);
+                showToast('Error creating payment link: ' + error.message);
+            }
+        }
+
+
+        function openClaimModal() {
+            const modal = document.getElementById('claimModal');
+            modal.style.display = 'flex';
+            setTimeout(() => {
+                modal.classList.add('show');
+            }, 10);
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeClaimModal() {
+            const modal = document.getElementById('claimModal');
+            modal.classList.remove('show');
+            setTimeout(() => {
+                modal.style.display = 'none';
+            }, 200);
+            document.body.style.overflow = '';
+            document.getElementById('claim-astras').value = '';
+            document.getElementById('claim-send-amount').textContent = '-';
+            document.getElementById('claim-claim-amount').textContent = '-';
+        }
+
+        function validateClaimAstrasAmount(input) {
+            const value = parseInt(input.value);
+            if (!isNaN(value) && value > 0) {
+                const sendAmount = Math.max(1, Math.floor(value * 1.01));
+                const claimAmount = Math.max(1, Math.floor(value * 0.99));
+                document.getElementById('claim-send-amount').textContent = sendAmount;
+                document.getElementById('claim-claim-amount').textContent = claimAmount;
+            } else {
+                document.getElementById('claim-send-amount').textContent = '-';
+                document.getElementById('claim-claim-amount').textContent = '-';
+            }
+            if (!isNaN(value) && value > 10000) {
+                input.value = 10000;
+                showToast('Maximum 10,000 Astras per claim link');
+            }
+        }
+
+        async function createClaimLink() {
+            const astras = document.getElementById('claim-astras').value;
+
+            if (!astras) {
+                showToast('Please enter the number of Astras');
+                document.getElementById('claim-astras').focus();
+                return;
+            }
+
+            const astrasAmount = parseInt(astras);
+            if (astrasAmount > 10000) {
+                showToast('Maximum 10,000 Astras per claim link');
+                document.getElementById('claim-astras').focus();
+                return;
+            }
+
+            try {
+                const response = await fetch('/create-claim-link', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        amount: astrasAmount
+                    })
+                });
+
+                const data = await response.json();
+
+                if (response.ok) {
+                    showToast('Claim link created successfully!', 'success');
+                    setTimeout(() => {
+                        window.location.href = data.claim_url;
+                    }, 500);
+                } else {
+                    showToast('Error creating claim link: ' + data.error);
+                }
+            } catch (error) {
+                showToast('Error creating claim link: ' + error.message);
+            }
+        }
+
+        function openEnterIdModal() {
+            const modal = document.getElementById('enterIdModal');
+            modal.style.display = 'flex';
+            setTimeout(() => {
+                modal.classList.add('show');
+            }, 10);
+            document.body.style.overflow = 'hidden';
+            document.getElementById('link-id').focus();
+        }
+
+        function closeEnterIdModal() {
+            const modal = document.getElementById('enterIdModal');
+            modal.classList.remove('show');
+            setTimeout(() => {
+                modal.style.display = 'none';
+            }, 200);
+            document.body.style.overflow = '';
+            document.getElementById('link-id').value = '';
+        }
+
+        async function goToLink() {
+            const linkId = document.getElementById('link-id').value.trim().toUpperCase();
+
+            if (!linkId || linkId.length !== 4) {
+                showToast('Please enter a valid 4-character code');
+                document.getElementById('link-id').focus();
+                return;
+            }
+
+            try {
+                const response = await fetch(`/check-link/${linkId}`);
+                const data = await response.json();
+
+                if (response.ok && data.exists) {
+                    if (data.type === 'payment') {
+                        window.location.href = `/pay/${linkId}`;
+                    } else if (data.type === 'claim') {
+                        window.location.href = `/claim/${linkId}`;
+                    }
+                } else {
+                    showToast('Link not found. Please check the code and try again.');
+                    document.getElementById('link-id').focus();
+                }
+            } catch (error) {
+                showToast('Error checking link: ' + error.message);
             }
         }
 
         window.onclick = function(event) {
-            const modal = document.getElementById('paymentModal');
-            if (event.target == modal) {
+            const paymentModal = document.getElementById('paymentModal');
+            const claimModal = document.getElementById('claimModal');
+            const enterIdModal = document.getElementById('enterIdModal');
+            if (event.target === paymentModal) {
                 closeModal();
             }
+            if (event.target === claimModal) {
+                closeClaimModal();
+            }
+            if (event.target === enterIdModal) {
+                closeEnterIdModal();
+            }
         }
+
+        document.addEventListener('keydown', function(event) {
+            if (event.key === 'Escape') {
+                const paymentModal = document.getElementById('paymentModal');
+                const claimModal = document.getElementById('claimModal');
+                const enterIdModal = document.getElementById('enterIdModal');
+                if (paymentModal.classList.contains('show')) {
+                    closeModal();
+                }
+                if (claimModal.classList.contains('show')) {
+                    closeClaimModal();
+                }
+                if (enterIdModal.classList.contains('show')) {
+                    closeEnterIdModal();
+                }
+            }
+        });
     </script>
     </div>
 </body>