root/fitra-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved UI

Browse Source
This commit is contained in:
root
2025-08-08 15:28:37 +02:00
parent 7cef5208ec
commit d12551cbf3
4 changed files with 234 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
views/index.html
View File

@@ -1,111 +1,128 @@
{{define "content"}}
<div class="three-column-layout">
<!-- Main content -->
<div class="tab-layout">
<!-- Top header area -->
<div class="content-container">
{{template "header" .}}
{{template "storage-info" .}}
{{template "api-endpoints" .}}
{{template "usage-examples" .}}
</div>
<!-- Changelog column -->
<div class="content-container">
{{template "changelog" .}}
</div>
<!-- About column -->
<div class="content-container">
<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>🔒 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>
<h3>📞 Support</h3>
<div class="contact-info">
<p><strong>Matrix:</strong> @root@adhd.sh</p>
<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>
<li>RESTful API design</li>
<li>Form-based file uploads</li>
<li>JSON responses</li>
</ul>
</div>
<!-- Tabs navigation -->
<nav class="tab-nav" role="tablist" aria-label="Primary">
<button class="tab-btn active" role="tab" aria-selected="true" aria-controls="tab-guide" id="tab-guide-btn" data-tab="guide">Guide</button>
<button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-changelog" id="tab-changelog-btn" data-tab="changelog">Changelog</button>
<button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-about" id="tab-about-btn" data-tab="about">About</button>
</nav>
<!-- Tab panels -->
<div class="tab-panels">
<section id="tab-guide" class="tab-panel active" role="tabpanel" aria-labelledby="tab-guide-btn">
<div class="content-container">
{{template "api-endpoints" .}}
{{template "usage-examples" .}}
</div>
</section>
<section id="tab-changelog" class="tab-panel" role="tabpanel" aria-labelledby="tab-changelog-btn" hidden>
<div class="content-container">
{{template "changelog" .}}
</div>
</section>
<section id="tab-about" class="tab-panel" role="tabpanel" aria-labelledby="tab-about-btn" hidden>
<div class="content-container">
<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>🔒 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>
<h3>📞 Support</h3>
<div class="contact-info">
<p><strong>Matrix:</strong> @root@adhd.sh</p>
<p><strong>Discord:</strong> nu11ed</p>
</div>
<h3>💰 Donate</h3>
<div class="donate-info">
<div class="donation-item">
<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>
</div>
<div class="donation-item">
<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>
</div>
<div class="donation-item">
<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>
</div>
</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>
<li>RESTful API design</li>
<li>Form-based file uploads</li>
<li>JSON responses</li>
</ul>
</div>
</div>
</section>
</div>
</div>
{{end}}