Spaces:
Running
Running
File size: 9,297 Bytes
2a55e2a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 |
<!DOCTYPE html>
<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> |