Finished theming
This commit is contained in:
@@ -197,6 +197,8 @@
|
||||
.bg-tertiary { background-color: var(--tertiary-bg); }
|
||||
.bg-accent { background-color: var(--accent-bg); }
|
||||
.bg-accent:hover { background-color: var(--accent-hover); }
|
||||
.bg-accent-hover { background-color: var(--accent-hover); }
|
||||
.bg-warning { background-color: var(--warning-color) !important; }
|
||||
.text-primary { color: var(--text-primary); }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-accent { color: var(--text-accent); }
|
||||
@@ -259,7 +261,7 @@
|
||||
<div class="hidden md:block">
|
||||
<div class="ml-10 flex items-baseline space-x-4">
|
||||
<a href="/" class="hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
|
||||
Browse ROMs
|
||||
Browse Games
|
||||
</a>
|
||||
{% if current_user and current_user.role != "demo" %}
|
||||
<a href="/favorites" class="hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
|
||||
@@ -317,28 +319,23 @@
|
||||
</div>
|
||||
|
||||
{% if current_user %}
|
||||
<span class="text-sm">
|
||||
<span class="text-sm text-primary">
|
||||
Welcome, {{ current_user.username }}
|
||||
{% if current_user.role == "demo" %}
|
||||
<span class="bg-yellow-600 px-2 py-1 rounded text-xs">DEMO</span>
|
||||
{% elif current_user.role == "super" %}
|
||||
<span class="bg-red-600 px-2 py-1 rounded text-xs">ADMIN</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<button onclick="logout()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded text-sm">
|
||||
<button onclick="logout()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded text-sm transition-colors">
|
||||
Logout
|
||||
</button>
|
||||
{% else %}
|
||||
<button onclick="showLogin()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm">
|
||||
<button onclick="showLogin()" class="bg-accent hover:bg-accent-hover px-4 py-2 rounded text-sm text-primary transition-colors">
|
||||
Login
|
||||
</button>
|
||||
<span class="bg-yellow-600 px-2 py-1 rounded text-xs">DEMO MODE</span>
|
||||
<span class="bg-warning px-2 py-1 rounded text-xs text-black font-medium">DEMO MODE</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="md:hidden">
|
||||
<button onclick="toggleMobileMenu()" class="bg-gray-700 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
|
||||
<button onclick="toggleMobileMenu()" class="bg-tertiary inline-flex items-center justify-center p-2 rounded-md text-secondary hover:text-primary hover:bg-accent focus:outline-none focus:ring-2 focus:ring-inset focus:ring-accent transition-colors">
|
||||
<svg id="hamburger-icon" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
@@ -354,7 +351,7 @@
|
||||
<div id="mobile-menu" class="md:hidden hidden">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<a href="/" class="hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
|
||||
Browse ROMs
|
||||
Browse Games
|
||||
</a>
|
||||
{% if current_user and current_user.role != "demo" %}
|
||||
<a href="/favorites" class="hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
|
||||
@@ -406,24 +403,15 @@
|
||||
</div>
|
||||
|
||||
{% if current_user %}
|
||||
<div class="text-base font-medium text-white">{{ current_user.username }}</div>
|
||||
<div class="text-sm text-gray-400 mb-3">
|
||||
{% if current_user.role == "demo" %}
|
||||
<span class="bg-yellow-600 px-2 py-1 rounded text-xs">DEMO USER</span>
|
||||
{% elif current_user.role == "super" %}
|
||||
<span class="bg-red-600 px-2 py-1 rounded text-xs">ADMIN</span>
|
||||
{% else %}
|
||||
<span class="bg-green-600 px-2 py-1 rounded text-xs">USER</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<button onclick="logout()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded text-sm w-full">
|
||||
<div class="text-base font-medium text-primary">{{ current_user.username }}</div>
|
||||
<button onclick="logout()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded text-sm w-full mt-3 transition-colors">
|
||||
Logout
|
||||
</button>
|
||||
{% else %}
|
||||
<button onclick="showLogin()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm w-full mb-2">
|
||||
<button onclick="showLogin()" class="bg-accent hover:bg-accent-hover px-4 py-2 rounded text-sm w-full mb-2 text-primary transition-colors">
|
||||
Login
|
||||
</button>
|
||||
<span class="bg-yellow-600 px-2 py-1 rounded text-xs">DEMO MODE</span>
|
||||
<span class="bg-warning px-2 py-1 rounded text-xs text-black font-medium">DEMO MODE</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -431,14 +419,14 @@
|
||||
</nav>
|
||||
|
||||
<!-- Genres Sidebar -->
|
||||
<div id="genresSidebar" class="fixed inset-y-0 left-0 w-80 bg-gray-800 border-r border-gray-700 transform -translate-x-full transition-transform duration-300 ease-in-out z-50">
|
||||
<div id="genresSidebar" class="fixed inset-y-0 left-0 w-80 bg-secondary border-r border-theme transform -translate-x-full transition-transform duration-300 ease-in-out z-50">
|
||||
<div class="h-full flex flex-col p-4">
|
||||
<div class="flex justify-between items-center mb-4 flex-shrink-0">
|
||||
<h3 class="text-lg font-medium text-white">Browse by Genre</h3>
|
||||
<button onclick="toggleGenresSidebar()" class="text-gray-400 hover:text-white">×</button>
|
||||
<h3 class="text-lg font-medium text-primary">Browse by Genre</h3>
|
||||
<button onclick="toggleGenresSidebar()" class="text-secondary hover:text-primary">×</button>
|
||||
</div>
|
||||
<div id="genresContainer" class="space-y-2 flex-1 overflow-y-auto">
|
||||
<p class="text-gray-400 text-sm">Loading genres...</p>
|
||||
<p class="text-secondary text-sm">Loading genres...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -451,27 +439,27 @@
|
||||
</main>
|
||||
|
||||
<!-- Login Modal -->
|
||||
<div id="loginModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-gray-800 border-gray-700">
|
||||
<div id="loginModal" class="hidden fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-secondary border-theme">
|
||||
<div class="mt-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-medium text-white">Login</h3>
|
||||
<button onclick="hideLogin()" class="text-gray-400 hover:text-white">×</button>
|
||||
<h3 class="text-lg font-medium text-primary">Login</h3>
|
||||
<button onclick="hideLogin()" class="text-secondary hover:text-primary">×</button>
|
||||
</div>
|
||||
<form onsubmit="handleLogin(event)" class="space-y-4">
|
||||
<div>
|
||||
<input type="text" id="username" placeholder="Username" required
|
||||
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
class="w-full px-3 py-2 bg-tertiary border border-theme rounded-md text-primary placeholder-secondary focus:outline-none focus:ring-2 focus:ring-accent">
|
||||
</div>
|
||||
<div>
|
||||
<input type="password" id="password" placeholder="Password" required
|
||||
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
class="w-full px-3 py-2 bg-tertiary border border-theme rounded-md text-primary placeholder-secondary focus:outline-none focus:ring-2 focus:ring-accent">
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<button type="button" onclick="hideLogin()" class="px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded-md">
|
||||
<button type="button" onclick="hideLogin()" class="px-4 py-2 bg-tertiary hover:bg-accent rounded-md text-primary transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md">
|
||||
<button type="submit" class="px-4 py-2 bg-accent hover:bg-accent-hover rounded-md text-primary transition-colors">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
@@ -613,7 +601,7 @@
|
||||
const container = document.getElementById('genresContainer');
|
||||
|
||||
if (genres.length === 0) {
|
||||
container.innerHTML = '<p class="text-gray-400 text-sm">No genres found</p>';
|
||||
container.innerHTML = '<p class="text-secondary text-sm">No genres found</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -621,8 +609,8 @@
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.map(genre => `
|
||||
<a href="/browse/genres/${encodeURIComponent(genre.name)}"
|
||||
class="block p-2 bg-gray-700 hover:bg-gray-600 rounded text-sm text-white">
|
||||
${genre.name} <span class="text-gray-400">(${genre.count})</span>
|
||||
class="block p-2 bg-tertiary hover:bg-accent rounded text-sm text-primary transition-colors">
|
||||
${genre.name} <span class="text-secondary">(${genre.count})</span>
|
||||
</a>
|
||||
`).join('');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user