More UX/UI enhancements

2025-08-08 00:53:04 +02:00
parent 8eeb8a3325
commit e6652b3f31
4 changed files with 162 additions and 27 deletions
--- a/static/main.css
+++ b/static/main.css
@@ -307,6 +307,91 @@ pre code {
    color: #475569;
 }

+.donate-info {
+    background: #f0fdf4;
+    padding: 18px;
+    border-radius: 12px;
+    border: 1px solid #22c55e;
+    margin: 16px 0;
+}
+
+.donate-info p {
+    margin: 12px 0;
+    font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', 'Roboto Mono', monospace;
+    color: #475569;
+}
+
+.crypto-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.crypto-row {
+    margin-top: 8px;
+}
+
+.crypto-address {
+    display: block;
+    width: 100%;
+    padding: 12px;
+    font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', 'Roboto Mono', monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    color: #16a34a;
+    background: #f8fafc;
+    border: 2px solid #e2e8f0;
+    border-radius: 8px;
+    resize: none;
+    outline: none;
+    transition: all 0.15s ease;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
+    word-break: break-all;
+    min-height: 45px;
+}
+
+.crypto-address:hover {
+    border-color: #22c55e;
+    background: #ffffff;
+}
+
+.crypto-address:focus {
+    border-color: #22c55e;
+    background: #ffffff;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(34, 197, 94, 0.1);
+}
+
+.copy-crypto-btn {
+    background: #22c55e;
+    color: white;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 600;
+    transition: all 0.15s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    min-width: 60px;
+}
+
+.copy-crypto-btn:hover {
+    background: #16a34a;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.3);
+}
+
+.copy-crypto-btn:active {
+    transform: translateY(0);
+}
+
+.copy-crypto-btn.copied {
+    background: #3b82f6;
+    transform: scale(0.95);
+}
+
 /* Responsive design */
@media (max-width: 1280px) {
    .three-column-layout {
--- a/views/index.html
+++ b/views/index.html
@@ -15,20 +15,11 @@
    
    <!-- About column -->
    <div class="content-container">
-        <h2>ℹ️ About</h2>
+        <h2>About</h2>
        <div class="about-content">
            <h3>What is FITRA?</h3>
            <p>FITRA (File Transfer API) is a lightweight, developer-friendly file sharing service designed for CLI usage and automation.</p>
            
-            <h3>🌟 Features</h3>
-            <ul>
-                <li>Simple HTTP API for file upload/download</li>
-                <li>Automatic cleanup after 24 hours</li>
-                <li>Storage usage tracking</li>
-                <li>Developer-friendly cURL examples</li>
-                <li>Health monitoring endpoint</li>
-            </ul>
-            
            <h3>🔒 Security</h3>
            <p>Files are automatically deleted after 24 hours. This service is designed for temporary file sharing and should not be used for permanent storage.</p>
            
@@ -38,6 +29,75 @@
                <p><strong>Discord:</strong> nu11ed</p>
            </div>
            
+            <h3>💰 Donate</h3>
+            <div class="donate-info">
+                <p>
+                    <div class="crypto-header">
+                        <strong>BTC:</strong>
+                        <button class="copy-crypto-btn" data-rybbit-event="Copy BTC" onclick="copyAddress('bc1ql2a3nxnhfwft7qex0cclj5ar2lfsslvs0aygeq', this)">Copy</button>
+                    </div>
+                    <div class="crypto-row">
+                        <textarea class="crypto-address" readonly>bc1ql2a3nxnhfwft7qex0cclj5ar2lfsslvs0aygeq</textarea>
+                    </div>
+                </p>
+                <p>
+                    <div class="crypto-header">
+                        <strong>LTC:</strong>
+                        <button class="copy-crypto-btn" data-rybbit-event="Copy LTC" onclick="copyAddress('ltc1qhw5z0m6kcvs0u38nlesndmm3dzu49yrxyqyll9', this)">Copy</button>
+                    </div>
+                    <div class="crypto-row">
+                        <textarea class="crypto-address" readonly>ltc1qhw5z0m6kcvs0u38nlesndmm3dzu49yrxyqyll9</textarea>
+                    </div>
+                </p>
+                <p>
+                    <div class="crypto-header">
+                        <strong>ETH:</strong>
+                        <button class="copy-crypto-btn" data-rybbit-event="Copy ETH" onclick="copyAddress('0x30843c72DF6E9A9226d967bf2403602f1C2aB67b', this)">Copy</button>
+                    </div>
+                    <div class="crypto-row">
+                        <textarea class="crypto-address" readonly>0x30843c72DF6E9A9226d967bf2403602f1C2aB67b</textarea>
+                    </div>
+                </p>
+            </div>
+            
+            <script>
+            function copyAddress(address, button) {
+                if (address === '[XMR address]') {
+                    button.textContent = 'N/A';
+                    button.style.background = '#6b7280';
+                    setTimeout(() => {
+                        button.textContent = 'Copy';
+                        button.style.background = '#22c55e';
+                    }, 2000);
+                    return;
+                }
+                
+                navigator.clipboard.writeText(address).then(() => {
+                    button.textContent = '✓';
+                    button.classList.add('copied');
+                    setTimeout(() => {
+                        button.textContent = 'Copy';
+                        button.classList.remove('copied');
+                    }, 2000);
+                }).catch(err => {
+                    console.error('Failed to copy: ', err);
+                    button.textContent = 'Error';
+                    setTimeout(() => {
+                        button.textContent = 'Copy';
+                    }, 2000);
+                });
+            }
+            </script>
+
+            <h3>🌟 Features</h3>
+            <ul>
+                <li>Simple HTTP API for file upload/download</li>
+                <li>Automatic cleanup after 24 hours</li>
+                <li>Storage usage tracking</li>
+                <li>Developer-friendly cURL examples</li>
+                <li>Health monitoring endpoint</li>
+            </ul>
+            
            <h3>🔧 Technical Details</h3>
            <ul>
                <li>Built with Go and Gin framework</li>
--- a/views/partials/api-endpoints.html
+++ b/views/partials/api-endpoints.html
@@ -2,7 +2,7 @@
 <h2>📋 API endpoints</h2>

 <div class="endpoint">
-    <button class="copy-btn" onclick="copyToClipboard('curl -X POST -F &quot;file=@/path/to/your/file.txt&quot; {{.BaseURL}}/upload')">📋 Copy</button>
+    <button class="copy-btn" data-rybbit-event="Copy 1" onclick="copyToClipboard('curl -X POST -F &quot;file=@/path/to/your/file.txt&quot; {{.BaseURL}}/upload')">📋 Copy</button>
    <h3><span class="method post">POST</span>/upload</h3>
    <p><strong>Description:</strong> Upload a file</p>
    <p><strong>cURL example:</strong></p>
@@ -10,7 +10,7 @@
 </div>

 <div class="endpoint">
-    <button class="copy-btn" onclick="copyToClipboard('curl -O {{.BaseURL}}/uploads/{fileID}/{filename}')">📋 Copy</button>
+    <button class="copy-btn" data-rybbit-event="Copy 2" onclick="copyToClipboard('curl -O {{.BaseURL}}/uploads/{fileID}/{filename}')">📋 Copy</button>
    <h3><span class="method get">GET</span>/uploads/{fileID}/{filename}</h3>
    <p><strong>Description:</strong> Download a file using the ID and filename from upload response</p>
    <p><strong>cURL example:</strong></p>
@@ -18,7 +18,7 @@
 </div>

 <div class="endpoint">
-    <button class="copy-btn" onclick="copyToClipboard('curl {{.BaseURL}}/storage')">📋 Copy</button>
+    <button class="copy-btn" data-rybbit-event="Copy 3" onclick="copyToClipboard('curl {{.BaseURL}}/storage')">📋 Copy</button>
    <h3><span class="method get">GET</span>/storage</h3>
    <p><strong>Description:</strong> Check storage usage and capacity</p>
    <p><strong>cURL example:</strong></p>
@@ -26,7 +26,7 @@
 </div>

 <div class="endpoint">
-    <button class="copy-btn" onclick="copyToClipboard('curl {{.BaseURL}}/health')">📋 Copy</button>
+    <button class="copy-btn" data-rybbit-event="Copy 4" onclick="copyToClipboard('curl {{.BaseURL}}/health')">📋 Copy</button>
    <h3><span class="method get">GET</span>/health</h3>
    <p><strong>Description:</strong> Check service health</p>
    <p><strong>cURL example:</strong></p>
--- a/views/partials/changelog.html
+++ b/views/partials/changelog.html
@@ -1,9 +1,9 @@
 {{define "changelog"}}
-<h2>📝 Changelog</h2>
+<h2>Changelog</h2>

 <div class="changelog-entry">
    <div class="version">v1.0.0</div>
-    <div class="date">2024-12-01</div>
+    <div class="date">2025-08-08</div>
    <ul>
        <li>Initial release</li>
        <li>File upload and download API</li>
@@ -12,14 +12,4 @@
        <li>Health monitoring endpoint</li>
    </ul>
 </div>
-
-<div class="changelog-entry">
-    <div class="version">v0.9.0-beta</div>
-    <div class="date">2024-11-28</div>
-    <ul>
-        <li>Beta release for testing</li>
-        <li>Basic file operations</li>
-        <li>Storage management</li>
-    </ul>
-</div>
-{{end}}
+{{end}}