Spaces:
Building
Building
| from fastapi import APIRouter | |
| from fastapi.responses import HTMLResponse | |
| # ========================== | |
| # 🛠️ Router Setup | |
| # ========================== | |
| router = APIRouter( | |
| prefix="/help", | |
| tags=["Information"] | |
| ) | |
| # ========================== | |
| # ℹ️ API Info Endpoint | |
| # ========================== | |
| def get_api_info(): | |
| """ | |
| Returns general information about the API and available endpoints. | |
| No authentication required. | |
| """ | |
| return { | |
| "requested_by": "Guest", | |
| "api_name": "Easy Tools API", | |
| "developer": "Sameer Banchhor", | |
| "version": "1.0.0", | |
| "available_tools": [ | |
| "/image (Compressor & BG Remover)", | |
| "/pdf (Merge & Rotate)", | |
| "/drive (File Storage & Aria2)", | |
| "/security (Password Generator)", | |
| "/server-status (System Monitor)" | |
| ], | |
| "message": "Use the /help/ui endpoint to access the visual dashboard.", | |
| "developer_info": "Created by Sameer Banchhor, Data Scientist (MSc in System Design, Kalyan PG College).", | |
| "git_link": "https://github.com/sameerbanchhor-git" | |
| } | |
| # ========================== | |
| # 🧭 Central Hub UI | |
| # ========================== | |
| async def help_ui(): | |
| html_content = """ | |
| <!DOCTYPE html> | |
| <html lang="en" data-theme="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Easy Tools Hub | by Sam</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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --primary-hover: #4f46e5; | |
| --bg-body: #f8fafc; | |
| --bg-card: #ffffff; | |
| --text-main: #0f172a; | |
| --text-sub: #64748b; | |
| --border: #e2e8f0; | |
| --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); | |
| --gradient-1: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); | |
| } | |
| [data-theme="dark"] { | |
| --primary: #818cf8; | |
| --primary-hover: #6366f1; | |
| --bg-body: #0f172a; | |
| --bg-card: #1e293b; | |
| --text-main: #f8fafc; | |
| --text-sub: #94a3b8; | |
| --border: #334155; | |
| --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5); | |
| --gradient-1: linear-gradient(135deg, #4f46e5 0%, #7e22ce 100%); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; transition: all 0.3s ease; } | |
| body { | |
| font-family: 'Plus Jakarta Sans', sans-serif; | |
| background-color: var(--bg-body); | |
| color: var(--text-main); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 2rem 1rem; | |
| } | |
| /* Header */ | |
| .header-container { | |
| text-align: center; margin-bottom: 3rem; animation: fadeIn 0.8s ease-out; | |
| } | |
| .title { | |
| font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; | |
| background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; | |
| } | |
| .subtitle { color: var(--text-sub); font-size: 1.1rem; } | |
| .theme-toggle { | |
| position: absolute; top: 1rem; right: 1rem; | |
| background: var(--bg-card); border: 1px solid var(--border); | |
| color: var(--text-main); padding: 10px; border-radius: 50%; cursor: pointer; | |
| } | |
| /* Grid */ | |
| .tools-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 1.5rem; | |
| width: 100%; max-width: 1000px; | |
| animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| /* Cards */ | |
| .tool-card { | |
| background: var(--bg-card); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| border: 1px solid var(--border); | |
| box-shadow: var(--shadow); | |
| text-decoration: none; | |
| color: var(--text-main); | |
| display: flex; flex-direction: column; align-items: center; text-align: center; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| position: relative; overflow: hidden; | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04); | |
| border-color: var(--primary); | |
| } | |
| .icon { font-size: 3rem; margin-bottom: 1rem; } | |
| .card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; } | |
| .card-desc { font-size: 0.9rem; color: var(--text-sub); line-height: 1.5; } | |
| /* Footer */ | |
| .dev-footer { | |
| margin-top: 4rem; text-align: center; font-size: 0.9rem; color: var(--text-sub); | |
| padding: 2rem; width: 100%; max-width: 600px; border-top: 1px solid var(--border); | |
| animation: fadeIn 1.2s ease-out; | |
| } | |
| .dev-badge { | |
| display: inline-block; background: var(--bg-card); padding: 8px 20px; | |
| border-radius: 30px; border: 1px solid var(--border); font-weight: 600; margin-top: 10px; | |
| } | |
| .dev-name { color: var(--primary); font-weight: 800; } | |
| .github-link { | |
| display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; | |
| color: var(--text-main); text-decoration: none; font-weight: 600; | |
| padding: 8px 16px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); | |
| } | |
| .github-link:hover { background: var(--bg-body); } | |
| @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } | |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } | |
| </style> | |
| </head> | |
| <body> | |
| <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn">🌙</button> | |
| <div class="header-container"> | |
| <div class="title">Easy Tools Suite</div> | |
| <div class="subtitle">All your essential utilities in one place.</div> | |
| </div> | |
| <div class="tools-grid"> | |
| <a href="/image/ui" class="tool-card"> | |
| <div class="icon">🖼️</div> | |
| <div class="card-title">Image Tools</div> | |
| <div class="card-desc">Compress JPEGs to specific sizes & remove backgrounds instantly using AI.</div> | |
| </a> | |
| <a href="/pdf/ui" class="tool-card"> | |
| <div class="icon">📄</div> | |
| <div class="card-title">PDF Master</div> | |
| <div class="card-desc">Merge multiple documents or rotate pages with a simple drag & drop interface.</div> | |
| </a> | |
| <a href="/drive/storage/ui" class="tool-card"> | |
| <div class="icon">☁️</div> | |
| <div class="card-title">Cloud Drive</div> | |
| <div class="card-desc">Upload files locally or use Aria2 for high-speed remote server downloads.</div> | |
| </a> | |
| <a href="/security/password-generator/ui" class="tool-card"> | |
| <div class="icon">🔐</div> | |
| <div class="card-title">Security</div> | |
| <div class="card-desc">Generate cryptographically strong passwords with advanced custom rules.</div> | |
| </a> | |
| <a href="/server-status/ui" class="tool-card"> | |
| <div class="icon">📊</div> | |
| <div class="card-title">Server Monitor</div> | |
| <div class="card-desc">Real-time dashboard for CPU, RAM, Disk usage, and Network traffic.</div> | |
| </a> | |
| <a href="/docs" class="tool-card" style="border-style: dashed;"> | |
| <div class="icon">⚡</div> | |
| <div class="card-title">API Docs</div> | |
| <div class="card-desc">Explore the raw Swagger UI for testing API endpoints directly.</div> | |
| </a> | |
| </div> | |
| <footer class="dev-footer"> | |
| <div>Designed & Developed by</div> | |
| <div class="dev-badge"> | |
| <span class="dev-name">Sameer Banchhor</span> | Data Scientist | |
| </div> | |
| <br> | |
| <div style="font-size: 0.85rem; margin-top: 5px; opacity: 0.8;">MSc in System Design, Kalyan PG College</div> | |
| <a href="https://github.com/sameerbanchhor-git" target="_blank" class="github-link"> | |
| <svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg> | |
| GitHub Profile | |
| </a> | |
| </footer> | |
| <script> | |
| // Theme Logic | |
| const html = document.documentElement; | |
| const themeBtn = document.getElementById('themeBtn'); | |
| function toggleTheme() { | |
| const current = html.getAttribute('data-theme'); | |
| const next = current === 'light' ? 'dark' : 'light'; | |
| html.setAttribute('data-theme', next); | |
| themeBtn.textContent = next === 'light' ? '🌙' : '☀️'; | |
| localStorage.setItem('theme', next); | |
| } | |
| const savedTheme = localStorage.getItem('theme') || 'light'; | |
| html.setAttribute('data-theme', savedTheme); | |
| themeBtn.textContent = savedTheme === 'light' ? '🌙' : '☀️'; | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| return html_content |