From d12551cbf30017493bfcec15fca65ec97a9bcaeb Mon Sep 17 00:00:00 2001 From: root Date: Fri, 8 Aug 2025 15:28:37 +0200 Subject: [PATCH] Improved UI --- static/main.css | 57 +++++++++ views/index.html | 221 ++++++++++++++++++---------------- views/layout.html | 54 ++++++++- views/partials/changelog.html | 8 ++ 4 files changed, 234 insertions(+), 106 deletions(-) diff --git a/static/main.css b/static/main.css index 7513f9b..f38896f 100644 --- a/static/main.css +++ b/static/main.css @@ -654,3 +654,60 @@ pre code { width: 0%; } + +/* Tabs layout styles */ +.tab-layout { + display: block; + padding: 20px; + max-width: 1100px; + margin: 0 auto; +} + +.tab-nav { + display: flex; + gap: 8px; + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 12px; + padding: 8px; + margin: 10px 0 20px 0; + position: sticky; + top: 0; + z-index: 5; + backdrop-filter: blur(8px); +} + +.tab-btn { + appearance: none; + background: #f1f5f9; + border: 1px solid #e2e8f0; + color: #0f172a; + padding: 10px 14px; + border-radius: 8px; + cursor: pointer; + font-weight: 600; + font-size: 14px; + transition: all 0.15s ease; +} + +.tab-btn:hover { + background: #e2e8f0; +} + +.tab-btn.active { + background: #3b82f6; + border-color: #3b82f6; + color: #ffffff; + box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25); +} + +.tab-panels { margin-top: 10px; } + +.tab-panel { display: block; } + +.tab-panel[hidden] { display: none; } + +@media (max-width: 640px) { + .tab-layout { padding: 12px; } + .tab-nav { position: static; } +} diff --git a/views/index.html b/views/index.html index 93fc586..8b6f3e2 100644 --- a/views/index.html +++ b/views/index.html @@ -1,111 +1,128 @@ {{define "content"}} -
- +
+
{{template "header" .}} {{template "storage-info" .}} - {{template "api-endpoints" .}} - {{template "usage-examples" .}}
- - -
- {{template "changelog" .}} -
- - -
-

About

-
-

What is FITRA?

-

FITRA (File Transfer API) is a lightweight, developer-friendly file sharing service designed for CLI usage and automation.

- -

🔒 Security

-

Files are automatically deleted after 24 hours. This service is designed for temporary file sharing and should not be used for permanent storage.

- -

📞 Support

-
-

Matrix: @root@adhd.sh

-

Discord: nu11ed

-
- -

💰 Donate

- - - -

🌟 Features

-
    -
  • Simple HTTP API for file upload/download
    • -
  • Automatic cleanup after 24 hours
    • -
  • Storage usage tracking
    • -
  • Developer-friendly cURL examples
    • -
  • Health monitoring endpoint
    • -
- -

🔧 Technical Details

-
    -
  • Built with Go and Gin framework
    • -
  • RESTful API design
    • -
  • Form-based file uploads
    • -
  • JSON responses
    • -
-
+ + + + +
+
+
+ {{template "api-endpoints" .}} + {{template "usage-examples" .}} +
+
+ + + +
{{end}} \ No newline at end of file diff --git a/views/layout.html b/views/layout.html index e4937af..17c811a 100644 --- a/views/layout.html +++ b/views/layout.html @@ -59,13 +59,59 @@ document.getElementById('storage-total').textContent = `${storage.max_gb} GB total`; document.getElementById('progress-fill').style.width = `${storage.usage_percent}%`; } catch (error) { - document.getElementById('storage-used').textContent = 'Error loading storage info'; - document.getElementById('storage-percent').textContent = ''; - document.getElementById('storage-total').textContent = ''; + const used = document.getElementById('storage-used'); + const percent = document.getElementById('storage-percent'); + const total = document.getElementById('storage-total'); + if (used) used.textContent = 'Error loading storage info'; + if (percent) percent.textContent = ''; + if (total) total.textContent = ''; } } - loadStorageInfo(); + function initTabs() { + const btns = Array.from(document.querySelectorAll('.tab-btn')); + const panels = Array.from(document.querySelectorAll('.tab-panel')); + if (!btns.length || !panels.length) return; + + function activate(tab) { + btns.forEach(b => { + const isActive = b.dataset.tab === tab; + b.classList.toggle('active', isActive); + b.setAttribute('aria-selected', String(isActive)); + }); + panels.forEach(p => { + const isActive = p.id === `tab-${tab}`; + p.classList.toggle('active', isActive); + if (isActive) { + p.removeAttribute('hidden'); + } else { + p.setAttribute('hidden', ''); + } + }); + } + + // Read initial state from hash + const hash = window.location.hash.replace('#', ''); + if (hash === 'changelog' || hash === 'about' || hash === 'guide') { + activate(hash); + } else { + activate('guide'); + } + + // Wire click handlers + btns.forEach(b => b.addEventListener('click', () => { + const tab = b.dataset.tab; + activate(tab); + // push state without jumping + history.replaceState(null, '', `#${tab}`); + })); + } + + // Initialize on DOM ready + document.addEventListener('DOMContentLoaded', () => { + loadStorageInfo(); + initTabs(); + }); function copyToClipboard(text) { navigator.clipboard.writeText(text).then(() => { diff --git a/views/partials/changelog.html b/views/partials/changelog.html index fcf1db7..b09a814 100644 --- a/views/partials/changelog.html +++ b/views/partials/changelog.html @@ -1,6 +1,14 @@ {{define "changelog"}}

Changelog

+
+
v1.1.0
+
2025-08-08
+
    +
  • Improved UI
    • +
+
+
v1.0.1
2025-08-08