Update templates/payment.html

templates/payment.html

@@ -4,12 +4,27 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Payment Link - 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">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
         body {
             margin: 0;
             padding: 0;
             min-height: 100vh;
-            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+            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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
             color: #ffffff;
             line-height: 1.6;
@@ -29,9 +44,10 @@
         }
         .title {
             font-size: 2.2rem;
-            font-weight: 600;
+            font-weight: normal;
+            font-family: 'Erica One', cursive;
             margin-bottom: 1.5rem;
-            letter-spacing: -0.02em;
+            letter-spacing: 0.02em;
         }
         .payment-card {
             background: rgba(255, 255, 255, 0.02);
@@ -68,6 +84,91 @@
             margin-bottom: 2rem;
             font-weight: 400;
         }
+        .description h1, .description h2, .description h3 {
+            color: rgba(255, 255, 255, 0.9);
+            font-family: 'Erica One', cursive;
+            font-weight: normal;
+            margin-top: 1rem;
+            margin-bottom: 0.5rem;
+            letter-spacing: 0.02em;
+        }
+        .description p {
+            margin: 0.5rem 0;
+        }
+        .description ul, .description ol {
+            margin: 0.5rem 0;
+            padding-left: 1.5rem;
+        }
+        .description code {
+            background: rgba(255, 255, 255, 0.1);
+            padding: 0.2rem 0.4rem;
+            border-radius: 4px;
+            font-family: monospace;
+        }
+        .description pre {
+            background: rgba(255, 255, 255, 0.05);
+            padding: 1rem;
+            border-radius: 8px;
+            overflow-x: auto;
+            margin: 1rem 0;
+        }
+        .description pre code {
+            background: transparent;
+            padding: 0;
+        }
+        .description a {
+            color: rgba(255, 255, 255, 0.8);
+            text-decoration: underline;
+        }
+        .description strong {
+            color: rgba(255, 255, 255, 0.9);
+            font-weight: 600;
+        }
+        .description em {
+            font-style: italic;
+        }
+        .description u {
+            text-decoration: underline;
+            color: rgba(255, 255, 255, 0.8);
+        }
+        .description del,
+        .description s,
+        .description strike {
+            text-decoration: line-through;
+            color: rgba(255, 255, 255, 0.6);
+        }
+        .description blockquote {
+            border-left: 3px solid rgba(255, 255, 255, 0.3);
+            padding-left: 1rem;
+            margin: 1rem 0;
+            color: rgba(255, 255, 255, 0.8);
+            font-style: italic;
+        }
+        .description table {
+            border-collapse: collapse;
+            margin: 1rem 0;
+            width: 100%;
+        }
+        .description table th,
+        .description table td {
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 0.5rem;
+        }
+        .description table th {
+            background-color: rgba(255, 255, 255, 0.1);
+            font-weight: 600;
+        }
+        .description hr {
+            border: none;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
+            margin: 1.5rem 0;
+        }
+        .description img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 4px;
+            margin: 1rem 0;
+        }
         .status {
             font-size: 0.95rem;
             padding: 0.5rem 1.2rem;
@@ -191,6 +292,9 @@
             text-align: center;
         }
         .payment-modal-title {
+            font-family: 'Erica One', cursive;
+            font-weight: normal;
+            letter-spacing: 0.02em;
             color: #ffffff;
             font-size: 1.5rem;
             font-weight: bold;
@@ -265,7 +369,7 @@
                 Total to send: {{ total_amount }} Astra{{ 's' if total_amount > 1 else '' }}
             </div>
             {% endif %}
-            <div class="description">{{ description }}</div>
+            <div class="description" id="description-content">{{ description }}</div>
             <div class="status {{ 'paid' if paid else 'pending' }}">
                 {{ 'Paid' if paid else 'Pending Payment' }}
             </div>
@@ -350,6 +454,82 @@
     </div>
 
     <script>
+        marked.setOptions({
+            breaks: true,
+            gfm: true
+        });
+        
+        const renderer = new marked.Renderer();
+        
+        renderer.strong = function(text) {
+            return '<strong>' + text + '</strong>';
+        };
+        
+        renderer.em = function(text) {
+            return '<em>' + text + '</em>';
+        };
+        
+        renderer.codespan = function(code) {
+            return '<code>' + code + '</code>';
+        };
+        
+        renderer.del = function(text) {
+            return '<del>' + text + '</del>';
+        };
+        
+        marked.use({
+            renderer: {
+                paragraph(text) {
+                    return '<p>' + text + '</p>';
+                },
+                list(body, ordered) {
+                    const tag = ordered ? 'ol' : 'ul';
+                    return '<' + tag + '>' + body + '</' + tag + '>';
+                },
+                listitem(text) {
+                    return '<li>' + text + '</li>';
+                },
+                blockquote(quote) {
+                    return '<blockquote>' + quote + '</blockquote>';
+                },
+                code(code, language) {
+                    return '<pre><code>' + code + '</code></pre>';
+                },
+                link(href, title, text) {
+                    return '<a href="' + href + '">' + text + '</a>';
+                },
+                image(href, title, text) {
+                    return '<img src="' + href + '" alt="' + text + '">';
+                },
+                hr() {
+                    return '<hr>';
+                },
+                table(header, body) {
+                    return '<table><thead>' + header + '</thead><tbody>' + body + '</tbody></table>';
+                },
+                tablerow(content) {
+                    return '<tr>' + content + '</tr>';
+                },
+                tablecell(content, flags) {
+                    const tag = flags.header ? 'th' : 'td';
+                    return '<' + tag + '>' + content + '</' + tag + '>';
+                }
+            }
+        });
+        
+        const descriptionElement = document.getElementById('description-content');
+        if (descriptionElement) {
+            let markdownText = descriptionElement.textContent;
+            
+            markdownText = markdownText.replace(/__([^_\n]+)__/g, '<u>$1</u>');
+            
+            let html = marked.parse(markdownText, { renderer: renderer });
+            
+            html = html.replace(/<u>(.*?)<\/u>/g, '<u>$1</u>');
+            
+            descriptionElement.innerHTML = html;
+        }
+        
         let paymentCheckInterval;
         let timerInterval;
         let timeLeft = 300;