Spaces:
Build error
Build error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{{ app_name }} - AI Tools Platform</title> | |
| <link rel="stylesheet" href="{{ url_for('static', path='/css/styles.css') }}"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="{{ url_for('static', path='/js/main.js') }}" defer></script> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Sidebar --> | |
| <div class="sidebar"> | |
| <div class="sidebar-header"> | |
| <h1>{{ app_name }}</h1> | |
| <div class="sidebar-subtitle">AI Toolkit</div> | |
| </div> | |
| <!-- User Authentication Section --> | |
| <div class="sidebar-section"> | |
| {% if session_user %} | |
| <div class="user-section"> | |
| <div class="user-info"> | |
| <div class="user-icon"> | |
| <i class="fas fa-user-circle"></i> | |
| </div> | |
| <div> | |
| <div class="user-name">{{ session_user.username }}</div> | |
| <div class="user-role">{{ session_user.role }}</div> | |
| </div> | |
| </div> | |
| <div class="user-actions"> | |
| <a href="/logout" class="btn btn-small">Logout</a> | |
| {% if session_user.role == "admin" %} | |
| <a href="/admin" class="btn btn-small btn-primary">Admin</a> | |
| {% endif %} | |
| </div> | |
| </div> | |
| {% else %} | |
| <div class="auth-buttons"> | |
| <a href="/login" class="btn btn-primary">Login</a> | |
| <a href="/register" class="btn btn-secondary">Register</a> | |
| </div> | |
| {% endif %} | |
| </div> | |
| <!-- Credits Section --> | |
| <div class="sidebar-section"> | |
| <div class="credit-display"> | |
| <div class="credit-icon"> | |
| <i class="fas fa-coins"></i> | |
| </div> | |
| <div> | |
| <div class="credit-label">Your Credits</div> | |
| <div class="credit-value">{{ user_credits }}</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-heading">Navigation</div> | |
| <a href="/" class="nav-item active"> | |
| <div class="nav-icon"><i class="fas fa-home"></i></div> | |
| <div>Home</div> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <div class="nav-icon"><i class="fas fa-history"></i></div> | |
| <div>History</div> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <div class="nav-icon"><i class="fas fa-coins"></i></div> | |
| <div>Buy Credits</div> | |
| </a> | |
| </div> | |
| <!-- Categories --> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-heading">Categories</div> | |
| <a href="#text-tools" class="nav-item" onclick="filterTools('text'); return false;"> | |
| <div class="nav-icon"><i class="fas fa-font"></i></div> | |
| <div>Text Generation</div> | |
| </a> | |
| <a href="#image-tools" class="nav-item" onclick="filterTools('image'); return false;"> | |
| <div class="nav-icon"><i class="fas fa-image"></i></div> | |
| <div>Image Generation</div> | |
| </a> | |
| <a href="#audio-tools" class="nav-item" onclick="filterTools('audio'); return false;"> | |
| <div class="nav-icon"><i class="fas fa-music"></i></div> | |
| <div>Audio Tools</div> | |
| </a> | |
| <a href="#video-tools" class="nav-item" onclick="filterTools('video'); return false;"> | |
| <div class="nav-icon"><i class="fas fa-video"></i></div> | |
| <div>Video Tools</div> | |
| </a> | |
| <a href="#utility-tools" class="nav-item" onclick="filterTools('utility'); return false;"> | |
| <div class="nav-icon"><i class="fas fa-tools"></i></div> | |
| <div>Utility Tools</div> | |
| </a> | |
| </div> | |
| <div class="sidebar-footer"> | |
| © {{ app_name }} 2023 | |
| </div> | |
| </div> | |
| <!-- Content --> | |
| <div class="content"> | |
| <div class="content-header"> | |
| <h1>AI Tools Platform</h1> | |
| <p>Select a tool to get started. Each tool requires credits which you can earn by watching ads.</p> | |
| <div class="search-container"> | |
| <input type="text" id="tool-search" class="search-input" placeholder="Search for tools..." onkeyup="searchTools()"> | |
| </div> | |
| </div> | |
| <!-- Tool Grid --> | |
| <div class="tools-grid" id="tools-grid"> | |
| {% for tool in tools %} | |
| <a href="/tool/{{ tool.id }}" class="tool-card" data-category="{{ tool.category }}"> | |
| <div class="tool-icon"> | |
| <i class="{{ tool.icon }}"></i> | |
| </div> | |
| <div class="tool-info"> | |
| <h3 class="tool-name">{{ tool.name }}</h3> | |
| <p class="tool-description">{{ tool.description }}</p> | |
| <div class="tool-meta"> | |
| <div class="tool-cost">{{ tool.credits }} credits</div> | |
| </div> | |
| </div> | |
| </a> | |
| {% endfor %} | |
| </div> | |
| <!-- No Results Message --> | |
| <div id="no-results" style="display: none; text-align: center; margin-top: 40px;"> | |
| <i class="fas fa-search fa-3x" style="opacity: 0.5; margin-bottom: 15px;"></i> | |
| <h3>No tools found</h3> | |
| <p>Try different search terms or browse all categories</p> | |
| <button class="btn btn-secondary" onclick="resetSearch()">Show All Tools</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Filter tools by category | |
| function filterTools(category) { | |
| const toolCards = document.querySelectorAll('.tool-card'); | |
| const noResults = document.getElementById('no-results'); | |
| let visibleCount = 0; | |
| toolCards.forEach(card => { | |
| if (category === 'all' || card.dataset.category === category) { | |
| card.style.display = 'flex'; | |
| visibleCount++; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| // Update category nav items | |
| document.querySelectorAll('.sidebar .nav-item').forEach(item => { | |
| if (item.textContent.trim().toLowerCase().includes(category) || | |
| (category === 'all' && item.textContent.trim() === 'Home')) { | |
| item.classList.add('active'); | |
| } else { | |
| item.classList.remove('active'); | |
| } | |
| }); | |
| noResults.style.display = visibleCount === 0 ? 'block' : 'none'; | |
| } | |
| // Search tools | |
| function searchTools() { | |
| const searchTerm = document.getElementById('tool-search').value.toLowerCase(); | |
| const toolCards = document.querySelectorAll('.tool-card'); | |
| const noResults = document.getElementById('no-results'); | |
| let visibleCount = 0; | |
| toolCards.forEach(card => { | |
| const name = card.querySelector('.tool-name').textContent.toLowerCase(); | |
| const description = card.querySelector('.tool-description').textContent.toLowerCase(); | |
| if (name.includes(searchTerm) || description.includes(searchTerm)) { | |
| card.style.display = 'flex'; | |
| visibleCount++; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| noResults.style.display = visibleCount === 0 ? 'block' : 'none'; | |
| } | |
| // Reset search | |
| function resetSearch() { | |
| document.getElementById('tool-search').value = ''; | |
| filterTools('all'); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Set initial active state | |
| filterTools('all'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |