Updated index

views/index.html

@@ -5,19 +5,240 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FITRA - File transfer API</title>
     <style>
-        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; }
+        * { box-sizing: border-box; }
-        h1, h2 { color: #333; }
+        body { 
-        code { background: #f4f4f4; padding: 2px 6px; border-radius: 3px; font-family: 'Monaco', 'Consolas', monospace; }
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
-        pre { background: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto; }
+            margin: 0; padding: 20px; line-height: 1.6; 
-        .endpoint { margin: 20px 0; padding: 15px; border-left: 4px solid #007acc; background: #f9f9f9; }
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        .method { display: inline-block; padding: 3px 8px; border-radius: 3px; color: white; font-weight: bold; margin-right: 10px; }
+            min-height: 100vh;
-        .get { background: #61affe; }
+            color: #333;
-        .post { background: #49cc90; }
+        }
-        .step { margin: 10px 0; padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 3px; }
+        .container { 
-        .storage-info { margin: 20px 0; padding: 15px; background: #f9f9f9; border-radius: 5px; border-left: 4px solid #28a745; }
+            max-width: 1200px; margin: 0 auto; 
-        .progress-bar { width: 100%; height: 20px; background: #e9ecef; border-radius: 10px; overflow: hidden; margin: 10px 0; }
+            background: rgba(255, 255, 255, 0.95);
-        .progress-fill { height: 100%; background: linear-gradient(90deg, #28a745 0%, #ffc107 70%, #dc3545 90%); transition: width 0.3s ease; border-radius: 10px; }
+            border-radius: 20px;
-        .storage-stats { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 14px; }
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            padding: 30px;
+            backdrop-filter: blur(10px);
+            margin-bottom: 30px;
+        }
+        .changelog-wrapper {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        h1 { 
+            color: #2c3e50; 
+            font-size: 2.5rem; 
+            margin-bottom: 10px;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        h2 { 
+            color: #34495e; 
+            font-size: 1.8rem; 
+            margin-top: 2rem;
+            border-bottom: 2px solid #eee;
+            padding-bottom: 10px;
+        }
+        
+        .version-badge {
+            display: inline-block;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            padding: 5px 15px;
+            border-radius: 20px;
+            font-size: 14px;
+            font-weight: 600;
+            margin-bottom: 20px;
+        }
+        
+        code { 
+            background: #f8f9fa; 
+            padding: 3px 8px; 
+            border-radius: 6px; 
+            font-family: 'Monaco', 'Consolas', 'JetBrains Mono', monospace;
+            font-size: 14px;
+            border: 1px solid #e9ecef;
+        }
+        pre { 
+            background: #282c34; 
+            color: #abb2bf;
+            padding: 20px; 
+            border-radius: 12px; 
+            overflow-x: auto;
+            font-family: 'Monaco', 'Consolas', 'JetBrains Mono', monospace;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border: 1px solid #3e4451;
+        }
+        pre code {
+            background: transparent;
+            border: none;
+            padding: 0;
+            color: #abb2bf;
+        }
+        
+        .endpoint { 
+            margin: 25px 0; 
+            padding: 20px; 
+            border-radius: 12px;
+            background: #fff;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+            border-left: 4px solid #007acc;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        .endpoint:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+        }
+        
+        .method { 
+            display: inline-block; 
+            padding: 6px 12px; 
+            border-radius: 6px; 
+            color: white; 
+            font-weight: 700; 
+            margin-right: 15px;
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .get { background: linear-gradient(135deg, #61affe, #4a90e2); }
+        .post { background: linear-gradient(135deg, #49cc90, #2ecc71); }
+        
+        .step { 
+            margin: 15px 0; 
+            padding: 15px 20px; 
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            border-left: 4px solid #3498db;
+            transition: transform 0.2s ease;
+        }
+        .step:hover {
+            transform: translateX(5px);
+        }
+        
+        .storage-info { 
+            margin: 25px 0; 
+            padding: 20px; 
+            background: #fff;
+            border-radius: 12px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+            border-left: 4px solid #28a745;
+        }
+        
+        .progress-bar { 
+            width: 100%; 
+            height: 12px; 
+            background: #e9ecef; 
+            border-radius: 8px; 
+            overflow: hidden; 
+            margin: 15px 0;
+            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .progress-fill { 
+            height: 100%; 
+            background: linear-gradient(90deg, #28a745 0%, #ffc107 70%, #dc3545 90%); 
+            transition: width 0.5s ease; 
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
+        }
+        .storage-stats { 
+            display: flex; 
+            justify-content: space-between; 
+            align-items: center; 
+            margin-top: 15px; 
+            font-size: 14px;
+            font-weight: 600;
+        }
+        
+        .changelog-section { 
+            padding: 25px; 
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 12px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+            border-left: 4px solid #6f42c1;
+            backdrop-filter: blur(10px);
+        }
+        
+        .changelog-entry { 
+            margin: 20px 0; 
+            padding: 15px; 
+            background: #f8f9fa;
+            border-radius: 10px;
+            border: 1px solid #e9ecef;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        .changelog-entry:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .version { 
+            font-weight: 700; 
+            color: #6f42c1;
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .version::before {
+            content: "🏷️";
+            font-size: 14px;
+        }
+        
+        .date { 
+            color: #6c757d; 
+            font-size: 13px;
+            margin-top: 5px;
+            font-weight: 500;
+        }
+        
+        .changelog-entry ul {
+            margin: 10px 0 0 0;
+            padding-left: 20px;
+        }
+        .changelog-entry li {
+            margin: 5px 0;
+            color: #495057;
+        }
+        
+        .copy-btn {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            padding: 8px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 600;
+            transition: all 0.2s ease;
+            float: right;
+            margin-top: -10px;
+        }
+        .copy-btn:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
+        }
+        
+        @media (max-width: 768px) {
+            body { padding: 15px; }
+            .container { 
+                padding: 20px;
+                border-radius: 15px;
+            }
+            h1 { font-size: 2rem; }
+            h2 { font-size: 1.5rem; }
+        }
+        
+        @media (max-width: 480px) {
+            .container { padding: 15px; }
+            .endpoint, .storage-info, .changelog-section { padding: 15px; }
+            .step { padding: 12px 15px; }
+        }
     </style>
 
     <script
@@ -27,9 +248,11 @@
     ></script>
 </head>
 <body>
+    <div class="container">
         <h1>🚀 FITRA - File transfer API</h1>
-    <p><strong>Version:</strong> 1.0.0</p>
+        <div class="version-badge">Version 1.0.0</div>
         <p>Simple file upload and download service for developers using HTTP requests in CLI.</p>
+        <p>Contact me on Matrix: <b>@root@adhd.sh</b> or via Discord: <b>nu11ed</b></p>
         
         <div class="storage-info">
             <h3>💾 Todays storage usage</h3>
@@ -49,6 +272,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>
             <h3><span class="method post">POST</span>/upload</h3>
             <p><strong>Description:</strong> Upload a file</p>
             <p><strong>cURL example:</strong></p>
@@ -56,6 +280,7 @@
         </div>
         
         <div class="endpoint">
+            <button class="copy-btn" 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>
@@ -63,6 +288,7 @@
         </div>
         
         <div class="endpoint">
+            <button class="copy-btn" 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>
@@ -70,6 +296,7 @@
         </div>
         
         <div class="endpoint">
+            <button class="copy-btn" 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>
@@ -100,6 +327,21 @@ curl -X POST -F "file=@myfile.txt" {{.BaseURL}}/upload
 
 # 2. Download the file
 curl -O {{.BaseURL}}/uploads/abc123.../myfile.txt</code></pre>
+    </div>
+    
+    <div class="changelog-wrapper">
+        <div class="changelog-section">
+            <h2>📝 Changelog</h2>
+            
+            <div class="changelog-entry">
+                <div class="version">v1.0.0</div>
+                <div class="date">2024-12-01</div>
+                <ul>
+                    <li>Initial release</li>
+                </ul>
+            </div>
+        </div>
+    </div>
 
 <script>
 async function loadStorageInfo() {
@@ -120,6 +362,30 @@ async function loadStorageInfo() {
 }
 
 loadStorageInfo();
+
+function copyToClipboard(text) {
+    navigator.clipboard.writeText(text).then(() => {
+        const button = event.target;
+        const originalText = button.innerHTML;
+        button.innerHTML = '✅ Copied!';
+        button.style.background = 'linear-gradient(135deg, #28a745, #20c997)';
+        
+        setTimeout(() => {
+            button.innerHTML = originalText;
+            button.style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
+        }, 2000);
+    }).catch(() => {
+        const button = event.target;
+        const originalText = button.innerHTML;
+        button.innerHTML = '❌ Failed';
+        button.style.background = 'linear-gradient(135deg, #dc3545, #c82333)';
+        
+        setTimeout(() => {
+            button.innerHTML = originalText;
+            button.style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
+        }, 2000);
+    });
+}
 </script>
 </body>
 </html>