Update templates/home.html

templates/home.html

@@ -4,12 +4,29 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AstraPay</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Erica+One&display=swap" rel="stylesheet">
+    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/turndown@7.1.3/dist/turndown.js"></script>
     <style>
         body {
             margin: 0;
             padding: 0;
             min-height: 100vh;
-            background-color: #000000;
+            background: linear-gradient(180deg, 
+                #0f0514 0%,
+                #1a0a1a 15%,
+                #2d1a3d 35%,
+                #4a2a5a 50%,
+                #3d2a4a 60%,
+                #2d1a3d 70%,
+                #1a0a1a 80%,
+                #0f0514 85%,
+                #000000 100%
+            );
+            background-attachment: fixed;
             font-family: Arial, sans-serif;
         }
         .main-content {
@@ -25,9 +42,11 @@
         .title {
             color: #ffffff;
             font-size: 4rem;
-            font-weight: bold;
+            font-weight: normal;
+            font-family: 'Erica One', cursive;
             text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.3);
             margin-bottom: 2rem;
+            letter-spacing: 0.02em;
         }
         .button {
             background-color: #ffffff;
@@ -220,6 +239,69 @@
         .form-textarea::placeholder {
             color: rgba(255, 255, 255, 0.4);
         }
+        #description-editor-container {
+            margin-top: 0.5rem;
+        }
+        #description-editor-container .ql-container {
+            background-color: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 0 0 6px 6px;
+            color: #ffffff;
+            font-family: inherit;
+            font-size: 0.9375rem;
+        }
+        #description-editor-container .ql-toolbar {
+            background-color: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 6px 6px 0 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        #description-editor-container .ql-toolbar .ql-stroke {
+            stroke: rgba(255, 255, 255, 0.7);
+        }
+        #description-editor-container .ql-toolbar .ql-fill {
+            fill: rgba(255, 255, 255, 0.7);
+        }
+        #description-editor-container .ql-toolbar button:hover,
+        #description-editor-container .ql-toolbar button.ql-active {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        #description-editor-container .ql-toolbar button:hover .ql-stroke,
+        #description-editor-container .ql-toolbar button.ql-active .ql-stroke {
+            stroke: #ffffff;
+        }
+        #description-editor-container .ql-toolbar button:hover .ql-fill,
+        #description-editor-container .ql-toolbar button.ql-active .ql-fill {
+            fill: #ffffff;
+        }
+        #description-editor-container .ql-editor {
+            color: #ffffff;
+            min-height: 150px;
+        }
+        #description-editor-container .ql-editor.ql-blank::before {
+            color: rgba(255, 255, 255, 0.4);
+            font-style: italic;
+        }
+        #description-editor-container .ql-snow .ql-picker {
+            color: rgba(255, 255, 255, 0.7);
+        }
+        #description-editor-container .ql-snow .ql-picker-options {
+            background-color: rgba(30, 30, 30, 0.95);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        #description-editor-container .ql-snow .ql-picker-item {
+            color: rgba(255, 255, 255, 0.7);
+        }
+        #description-editor-container .ql-snow .ql-picker-item:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+            color: #ffffff;
+        }
+        #description-editor-container .ql-snow .ql-stroke {
+            stroke: rgba(255, 255, 255, 0.7);
+        }
+        #description-editor-container .ql-snow .ql-fill {
+            fill: rgba(255, 255, 255, 0.7);
+        }
         .modal-buttons {
             display: flex;
             gap: 0.75rem;
@@ -275,6 +357,16 @@
             margin-left: auto;
             margin-right: auto;
         }
+        .top-page-banner {
+            background: rgba(100, 100, 255, 0.15);
+            border-bottom: 1px solid rgba(100, 100, 255, 0.3);
+            padding: 0.75rem 1.5rem;
+            color: #6464ff;
+            font-size: 0.9rem;
+            font-weight: 500;
+            text-align: center;
+            width: 100%;
+        }
         .banner {
             background: rgba(255, 193, 7, 0.15);
             border: 1px solid rgba(255, 193, 7, 0.3);
@@ -382,11 +474,14 @@
     </style>
 </head>
 <body>
+    <div class="top-page-banner">
+        To send astras to AstraPay, please friend astrapay@astranova.org, your friend request will be accepted instantly.
+    </div>
     <div class="main-content">
         <div class="container">
         <h1 class="title">AstraPay</h1>
         <div class="top-banner">
-            Contact Matthew on Slack if any issues occur.
+            Contact Instant 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;">
@@ -432,6 +527,7 @@
                 <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 id="description-editor-container"></div>
                 </div>
 
                 <div class="form-group">
@@ -472,8 +568,9 @@
                     <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%)
+                        You'll send: <span id="claim-send-amount">-</span> Astras (<span id="claim-fee-percent">1</span>%)<br>
+                        Claimable: <span id="claim-claim-amount">-</span> Astras (<span id="claim-fee-percent-negative">-1</span>%)<br>
+                        Fee: <span id="claim-fee-amount">-</span> Astras
                     </div>
                 </div>
 
@@ -510,8 +607,8 @@
             <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()">
+                    <label class="form-label" for="link-id">Enter Link ID</label>
+                    <input type="text" id="link-id" class="form-input" placeholder="e.g., 550e8400-e29b-41d4-a716-446655440000" maxlength="36" style="font-size: 1rem; text-align: center;" required onkeypress="if(event.key === 'Enter') goToLink()">
                 </div>
 
                 <div class="modal-buttons">
@@ -536,6 +633,91 @@
     <div id="toastContainer" class="toast-container"></div>
 
     <script>
+        let descriptionEditor = null;
+        
+        function initDescriptionEditor() {
+            if (descriptionEditor) {
+                const container = document.getElementById('description-editor-container');
+                container.innerHTML = '';
+                descriptionEditor = null;
+            }
+            
+            const textarea = document.getElementById('description');
+            textarea.style.display = 'none';
+            
+            const container = document.getElementById('description-editor-container');
+            container.innerHTML = '<div id="quill-editor"></div>';
+            
+            descriptionEditor = new Quill('#quill-editor', {
+                theme: 'snow',
+                placeholder: 'Enter payment description',
+                modules: {
+                    toolbar: [
+                        [{ 'header': [1, 2, 3, false] }],
+                        ['bold', 'italic', 'underline', 'strike'],
+                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+                        ['blockquote', 'code-block'],
+                        ['link', 'image'],
+                        ['clean']
+                    ]
+                }
+            });
+            
+            const quillContainer = document.querySelector('#description-editor-container .ql-container');
+            if (quillContainer) {
+                quillContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
+                quillContainer.style.borderColor = 'rgba(255, 255, 255, 0.1)';
+            }
+        }
+        
+        function getQuillMarkdown() {
+            if (!descriptionEditor) return '';
+            try {
+                const html = descriptionEditor.root.innerHTML;
+                if (!html || html === '<p><br></p>' || html.trim() === '') return '';
+                
+                const text = descriptionEditor.getText();
+                if (!text || text.trim() === '') return '';
+                
+                if (typeof TurndownService === 'undefined') {
+                    return text.trim();
+                }
+                
+                const turndownService = new TurndownService({
+                    headingStyle: 'atx',
+                    codeBlockStyle: 'fenced',
+                    emDelimiter: '*',
+                    strongDelimiter: '**',
+                    bulletListMarker: '-',
+                    linkStyle: 'inlined'
+                });
+                
+                turndownService.addRule('underline', {
+                    filter: ['u'],
+                    replacement: function(content) {
+                        return '__' + content + '__';
+                    }
+                });
+                
+                turndownService.addRule('strikethrough', {
+                    filter: ['del', 's', 'strike'],
+                    replacement: function(content) {
+                        return '~~' + content + '~~';
+                    }
+                });
+                
+                const markdown = turndownService.turndown(html);
+                return markdown && typeof markdown === 'string' ? markdown.trim() : text.trim();
+            } catch (error) {
+                console.error('Error converting to markdown:', error);
+                if (descriptionEditor) {
+                    const text = descriptionEditor.getText();
+                    return text ? text.trim() : '';
+                }
+                return '';
+            }
+        }
+        
         function showToast(message, type = 'error') {
             const container = document.getElementById('toastContainer');
             const toast = document.createElement('div');
@@ -581,6 +763,9 @@
                 modal.classList.add('show');
             }, 10);
             document.body.style.overflow = 'hidden';
+            setTimeout(() => {
+                initDescriptionEditor();
+            }, 50);
         }
 
         function closeModal() {
@@ -591,13 +776,30 @@
             }, 200);
             document.body.style.overflow = '';
             document.getElementById('astras').value = '';
-            document.getElementById('description').value = '';
             document.getElementById('recipient-email').value = '';
+            if (descriptionEditor) {
+                const container = document.getElementById('description-editor-container');
+                container.innerHTML = '';
+                descriptionEditor = null;
+            }
+            const textarea = document.getElementById('description');
+            textarea.value = '';
+            textarea.style.display = 'block';
         }
 
         async function createPaymentLink() {
             const astras = document.getElementById('astras').value;
-            const description = document.getElementById('description').value.trim();
+            let description = '';
+            if (descriptionEditor) {
+                const markdown = getQuillMarkdown();
+                description = markdown && typeof markdown === 'string' ? markdown.trim() : '';
+                if (!description) {
+                    const text = descriptionEditor.getText();
+                    description = text ? text.trim() : '';
+                }
+            } else {
+                description = document.getElementById('description').value.trim();
+            }
             const recipientEmail = document.getElementById('recipient-email').value.trim();
 
             if (!astras) {
@@ -615,7 +817,11 @@
 
             if (!description) {
                 showToast('Please enter a description');
-                document.getElementById('description').focus();
+                if (descriptionEditor) {
+                    descriptionEditor.focus();
+                } else {
+                    document.getElementById('description').focus();
+                }
                 return;
             }
 
@@ -673,18 +879,31 @@
             document.getElementById('claim-astras').value = '';
             document.getElementById('claim-send-amount').textContent = '-';
             document.getElementById('claim-claim-amount').textContent = '-';
+            document.getElementById('claim-fee-percent').textContent = '1';
+            document.getElementById('claim-fee-percent-negative').textContent = '-1';
+            document.getElementById('claim-fee-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));
+                // 2% fee if over 50 astras, otherwise 1% fee
+                const feePercent = value > 50 ? 0.02 : 0.01;
+                const sendAmount = Math.max(1, Math.floor(value * (1 + feePercent)));
+                const claimAmount = Math.max(1, Math.floor(value * (1 - feePercent)));
+                const fee = Math.floor(value * feePercent);
+                
                 document.getElementById('claim-send-amount').textContent = sendAmount;
                 document.getElementById('claim-claim-amount').textContent = claimAmount;
+                document.getElementById('claim-fee-percent').textContent = (feePercent * 100);
+                document.getElementById('claim-fee-percent-negative').textContent = '-' + (feePercent * 100);
+                document.getElementById('claim-fee-amount').textContent = fee;
             } else {
                 document.getElementById('claim-send-amount').textContent = '-';
                 document.getElementById('claim-claim-amount').textContent = '-';
+                document.getElementById('claim-fee-percent').textContent = '1';
+                document.getElementById('claim-fee-percent-negative').textContent = '-1';
+                document.getElementById('claim-fee-amount').textContent = '-';
             }
             if (!isNaN(value) && value > 10000) {
                 input.value = 10000;
@@ -755,10 +974,12 @@
         }
 
         async function goToLink() {
-            const linkId = document.getElementById('link-id').value.trim().toUpperCase();
+            const linkId = document.getElementById('link-id').value.trim();
 
-            if (!linkId || linkId.length !== 4) {
-                showToast('Please enter a valid 4-character code');
+            // Validate UUID4 format (36 characters with hyphens)
+            const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+            if (!linkId || !uuidRegex.test(linkId)) {
+                showToast('Please enter a valid Link ID');
                 document.getElementById('link-id').focus();
                 return;
             }