th3r00t/DosVault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated theming

Browse Source
This commit is contained in:
th3r00t
2025-09-06 18:51:10 -04:00
parent dc7b538be6
commit dae849bb90
11 changed files with 704 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
templates/admin.html
View File

@@ -4,47 +4,47 @@
{% block content %}
<div class="mb-8">
<h1 class="text-3xl font-bold mb-2">Admin Dashboard</h1>
<p class="text-gray-400">System overview and management</p>
<h1 class="text-3xl font-bold mb-2 text-primary">Admin Dashboard</h1>
<p class="text-secondary">System overview and management</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<div class="bg-secondary rounded-lg p-6 border border-theme">
<div class="flex items-center">
<div class="text-3xl text-blue-400 mr-4">🎮</div>
<div class="text-3xl text-accent mr-4">🎮</div>
<div>
<p class="text-2xl font-bold">{{ total_games }}</p>
<p class="text-gray-400 text-sm">Total Games</p>
<p class="text-2xl font-bold text-primary">{{ total_games }}</p>
<p class="text-secondary text-sm">Total Games</p>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<div class="bg-secondary rounded-lg p-6 border border-theme">
<div class="flex items-center">
<div class="text-3xl text-green-400 mr-4">👥</div>
<div class="text-3xl text-accent mr-4">👥</div>
<div>
<p class="text-2xl font-bold">{{ total_users }}</p>
<p class="text-gray-400 text-sm">Total Users</p>
<p class="text-2xl font-bold text-primary">{{ total_users }}</p>
<p class="text-secondary text-sm">Total Users</p>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<a href="/admin/users" class="flex items-center hover:bg-gray-700 rounded transition-colors">
<div class="text-3xl text-yellow-400 mr-4">⚙️</div>
<div class="bg-secondary rounded-lg p-6 border border-theme">
<a href="/admin/users" class="flex items-center hover:bg-tertiary rounded transition-colors">
<div class="text-3xl text-accent mr-4">⚙️</div>
<div>
<p class="text-lg font-semibold">Manage Users</p>
<p class="text-gray-400 text-sm">Create & Edit</p>
<p class="text-lg font-semibold text-primary">Manage Users</p>
<p class="text-secondary text-sm">Create & Edit</p>
</div>
</a>
</div>
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<a href="/" class="flex items-center hover:bg-gray-700 rounded transition-colors">
<div class="text-3xl text-purple-400 mr-4">📚</div>
<div class="bg-secondary rounded-lg p-6 border border-theme">
<a href="/" class="flex items-center hover:bg-tertiary rounded transition-colors">
<div class="text-3xl text-accent mr-4">📚</div>
<div>
<p class="text-lg font-semibold">Browse Games</p>
<p class="text-gray-400 text-sm">View Library</p>
<p class="text-lg font-semibold text-primary">Browse Games</p>
<p class="text-secondary text-sm">View Library</p>
</div>
</a>
</div>
@@ -363,53 +363,53 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-secondary rounded-lg p-6 border border-theme">
<h2 class="text-xl font-bold mb-4">Recent Games</h2>
<h2 class="text-xl font-bold mb-4 text-primary">Recent Games</h2>
{% if recent_games %}
<div class="space-y-3">
{% for game in recent_games %}
<div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
<div class="flex justify-between items-center py-2 border-b border-theme last:border-b-0">
<div>
<p class="font-medium">{{ game.metadata_obj.title or game.title }}</p>
<p class="text-sm text-gray-400">{{ game.path.name }}</p>
<p class="font-medium text-primary">{{ game.metadata_obj.title or game.title }}</p>
<p class="text-sm text-secondary">{{ game.path.name }}</p>
</div>
<div class="flex space-x-2">
<a href="/games/{{ game.id }}" class="text-blue-400 hover:text-blue-300 text-sm">View</a>
<a href="/admin/games/{{ game.id }}/edit" class="text-yellow-400 hover:text-yellow-300 text-sm">Edit</a>
<button onclick="showGameDetail({{ game.id }})" class="text-accent hover:text-accent text-sm transition-colors">View</button>
<a href="/admin/games/{{ game.id }}/edit" class="text-warning-color hover:opacity-80 text-sm transition-colors">Edit</a>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="text-gray-400">No games found</p>
<p class="text-secondary">No games found</p>
{% endif %}
</div>
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h2 class="text-xl font-bold mb-4">Recent Users</h2>
<div class="bg-secondary rounded-lg p-6 border border-theme">
<h2 class="text-xl font-bold mb-4 text-primary">Recent Users</h2>
{% if recent_users %}
<div class="space-y-3">
{% for user in recent_users %}
<div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
<div class="flex justify-between items-center py-2 border-b border-theme last:border-b-0">
<div>
<p class="font-medium">{{ user.username }}</p>
<p class="text-sm text-gray-400">{{ user.email }}</p>
<p class="font-medium text-primary">{{ user.username }}</p>
<p class="text-sm text-secondary">{{ user.email }}</p>
</div>
<div class="flex items-center space-x-2">
<span class="px-2 py-1 rounded text-xs
{% if user.role == 'super' %}bg-red-600
{% elif user.role == 'normal' %}bg-blue-600
{% else %}bg-yellow-600{% endif %}">
<span class="px-2 py-1 rounded text-xs text-white
{% if user.role == 'super' %}bg-danger-color
{% elif user.role == 'normal' %}bg-accent
{% else %}bg-warning-color{% endif %}">
{{ user.role.upper() }}
</span>
{% if not user.is_active %}
<span class="px-2 py-1 rounded text-xs bg-gray-600">INACTIVE</span>
<span class="px-2 py-1 rounded text-xs bg-tertiary text-secondary">INACTIVE</span>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="text-gray-400">No users found</p>
<p class="text-secondary">No users found</p>
{% endif %}
</div>
</div>
@@ -628,41 +628,41 @@ async function showSystemStats() {
content.innerHTML = `
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
<div class="bg-tertiary p-4 rounded-lg">
<div class="bg-tertiary p-4 rounded-lg border border-theme">
<h4 class="text-lg font-semibold text-accent">Games</h4>
<p class="text-2xl font-bold">${stats.games}</p>
<p class="text-2xl font-bold text-primary">${stats.games}</p>
</div>
<div class="bg-tertiary p-4 rounded-lg">
<div class="bg-tertiary p-4 rounded-lg border border-theme">
<h4 class="text-lg font-semibold text-accent">Users</h4>
<p class="text-2xl font-bold">${stats.users}</p>
<p class="text-2xl font-bold text-primary">${stats.users}</p>
</div>
<div class="bg-tertiary p-4 rounded-lg">
<div class="bg-tertiary p-4 rounded-lg border border-theme">
<h4 class="text-lg font-semibold text-accent">Metadata</h4>
<p class="text-2xl font-bold">${stats.metadata}</p>
<p class="text-2xl font-bold text-primary">${stats.metadata}</p>
</div>
<div class="bg-tertiary p-4 rounded-lg">
<div class="bg-tertiary p-4 rounded-lg border border-theme">
<h4 class="text-lg font-semibold text-accent">Tags</h4>
<p class="text-2xl font-bold">${stats.tags}</p>
<p class="text-2xl font-bold text-primary">${stats.tags}</p>
</div>
<div class="bg-tertiary p-4 rounded-lg">
<div class="bg-tertiary p-4 rounded-lg border border-theme">
<h4 class="text-lg font-semibold text-accent">Genres</h4>
<p class="text-2xl font-bold">${stats.genres}</p>
<p class="text-2xl font-bold text-primary">${stats.genres}</p>
</div>
<div class="bg-tertiary p-4 rounded-lg">
<div class="bg-tertiary p-4 rounded-lg border border-theme">
<h4 class="text-lg font-semibold text-accent">New Users (30d)</h4>
<p class="text-2xl font-bold">${stats.recent_users}</p>
<p class="text-2xl font-bold text-primary">${stats.recent_users}</p>
</div>
</div>
${stats.disk_usage.total ? `
<div class="mb-6">
<h4 class="text-lg font-semibold mb-3">Disk Usage</h4>
<div class="bg-tertiary p-4 rounded-lg">
<div class="flex justify-between mb-2">
<h4 class="text-lg font-semibold mb-3 text-primary">Disk Usage</h4>
<div class="bg-tertiary p-4 rounded-lg border border-theme">
<div class="flex justify-between mb-2 text-secondary">
<span>Used: ${formatBytes(stats.disk_usage.used)}</span>
<span>Free: ${formatBytes(stats.disk_usage.free)}</span>
</div>
<div class="w-full bg-gray-600 rounded-full h-3">
<div class="w-full bg-secondary rounded-full h-3">
<div class="bg-accent h-3 rounded-full" style="width: ${stats.disk_usage.percent_used.toFixed(1)}%"></div>
</div>
<p class="text-sm text-secondary mt-1">${stats.disk_usage.percent_used.toFixed(1)}% of ${formatBytes(stats.disk_usage.total)} used</p>
@@ -671,8 +671,8 @@ async function showSystemStats() {
` : ''}
<div>
<h4 class="text-lg font-semibold mb-3">Running Tasks</h4>
<div class="space-y-2">
<h4 class="text-lg font-semibold mb-3 text-primary">Running Tasks</h4>
<div class="space-y-2 text-secondary">
<div class="flex justify-between">
<span>ROM Scan:</span>
<span class="${stats.running_tasks.rom_scan ? 'text-accent' : 'text-secondary'}">${stats.running_tasks.rom_scan ? 'Running' : 'Idle'}</span>

93
templates/base.html
View File

@@ -115,6 +115,78 @@
--gradient-to: #451a03;
}
/* Light Theme */
.theme-light {
--primary-bg: #ffffff;
--secondary-bg: #f8fafc;
--tertiary-bg: #e2e8f0;
--accent-bg: #3b82f6;
--accent-hover: #2563eb;
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-accent: #3b82f6;
--border-color: #cbd5e1;
--success-color: #059669;
--warning-color: #d97706;
--danger-color: #dc2626;
--gradient-from: #f8fafc;
--gradient-to: #ffffff;
}
/* Light Blue Theme */
.theme-light-blue {
--primary-bg: #f0f9ff;
--secondary-bg: #e0f2fe;
--tertiary-bg: #bae6fd;
--accent-bg: #0ea5e9;
--accent-hover: #0284c7;
--text-primary: #0c4a6e;
--text-secondary: #075985;
--text-accent: #0ea5e9;
--border-color: #7dd3fc;
--success-color: #059669;
--warning-color: #d97706;
--danger-color: #dc2626;
--gradient-from: #e0f2fe;
--gradient-to: #f0f9ff;
}
/* Light Green Theme */
.theme-light-green {
--primary-bg: #f0fdf4;
--secondary-bg: #dcfce7;
--tertiary-bg: #bbf7d0;
--accent-bg: #22c55e;
--accent-hover: #16a34a;
--text-primary: #14532d;
--text-secondary: #166534;
--text-accent: #22c55e;
--border-color: #86efac;
--success-color: #059669;
--warning-color: #d97706;
--danger-color: #dc2626;
--gradient-from: #dcfce7;
--gradient-to: #f0fdf4;
}
/* Light Purple Theme */
.theme-light-purple {
--primary-bg: #faf5ff;
--secondary-bg: #f3e8ff;
--tertiary-bg: #e9d5ff;
--accent-bg: #a855f7;
--accent-hover: #9333ea;
--text-primary: #581c87;
--text-secondary: #7c3aed;
--text-accent: #a855f7;
--border-color: #c4b5fd;
--success-color: #059669;
--warning-color: #d97706;
--danger-color: #dc2626;
--gradient-from: #f3e8ff;
--gradient-to: #faf5ff;
}
/* Apply CSS custom properties */
body {
background-color: var(--primary-bg);
@@ -130,6 +202,27 @@
.text-accent { color: var(--text-accent); }
.border-theme { border-color: var(--border-color); }
.bg-gradient-theme { background: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to)); }
/* Fade-in animation for overlays */
.animate-fade-in {
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Smooth transitions for overlay elements */
.transition-all-smooth {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
</head>
<body class="bg-primary text-primary min-h-screen">

390
templates/index.html
View File

@@ -77,7 +77,7 @@
{% for game in games %}
<div class="bg-gray-800 rounded-lg border border-gray-700 hover:border-gray-600 transition-colors overflow-hidden hover:shadow-lg transform hover:-translate-y-1 transition-all duration-200 relative group">
<!-- Clickable overlay for the card -->
<a href="/games/{{ game.id }}" class="absolute inset-0 z-10 cursor-pointer" aria-label="View {{ game.metadata_obj.title or game.title }} details"></a>
<div onclick="showGameDetail({{ game.id }})" class="absolute inset-0 z-10 cursor-pointer" aria-label="View {{ game.metadata_obj.title or game.title }} details"></div>
<!-- Cover Image -->
<div class="aspect-[3/4] bg-gray-900 relative overflow-hidden">
@@ -221,7 +221,7 @@
{% for game in games %}
<div class="bg-gray-800 rounded-lg border border-gray-700 hover:border-gray-600 transition-colors hover:shadow-lg transform hover:-translate-y-1 transition-all duration-200 relative group">
<!-- Clickable overlay for the card -->
<a href="/games/{{ game.id }}" class="absolute inset-0 z-10 cursor-pointer" aria-label="View {{ game.metadata_obj.title or game.title }} details"></a>
<div onclick="showGameDetail({{ game.id }})" class="absolute inset-0 z-10 cursor-pointer" aria-label="View {{ game.metadata_obj.title or game.title }} details"></div>
<div class="p-4 flex items-center gap-4">
<!-- Cover Image -->
@@ -450,6 +450,120 @@
</div>
{% endif %}
<!-- Game Detail Overlay -->
<div id="gameDetailOverlay" class="hidden fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4 overflow-y-auto backdrop-blur-sm">
<div class="bg-secondary rounded-lg max-w-6xl max-h-full w-full overflow-hidden relative shadow-2xl border border-theme animate-fade-in">
<!-- Close Button -->
<button onclick="closeGameDetail()" class="absolute top-4 right-4 text-primary hover:text-secondary text-2xl z-20 bg-primary bg-opacity-20 hover:bg-opacity-30 rounded-full w-10 h-10 flex items-center justify-center transition-all">
&times;
</button>
<!-- Loading State -->
<div id="gameDetailLoading" class="flex items-center justify-center h-96">
<div class="text-primary">Loading game details...</div>
</div>
<!-- Game Detail Content -->
<div id="gameDetailContent" class="hidden max-h-screen overflow-y-auto">
<!-- Header -->
<div class="border-b border-theme p-6">
<div class="flex justify-between items-start">
<div>
<h1 id="gameTitle" class="text-3xl font-bold mb-2 text-primary"></h1>
<p id="gameFilename" class="text-secondary"></p>
</div>
<div class="flex space-x-3">
<button id="gameFavoriteBtn" onclick="toggleFavoriteInOverlay()"
class="text-red-400 hover:text-red-300 text-2xl hidden">
♡
</button>
<button id="gameEditBtn" onclick="editGame()"
class="bg-yellow-600 hover:bg-yellow-700 px-4 py-2 rounded text-sm hidden">
Edit Metadata
</button>
<button id="gameDownloadBtn" onclick="downloadGameFromOverlay()"
class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded hidden">
Download ROM
</button>
<span id="gameDownloadDisabled" class="bg-gray-600 px-4 py-2 rounded cursor-not-allowed hidden">
Demo Mode - No Downloads
</span>
</div>
</div>
</div>
<!-- Content -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 p-6">
<div class="lg:col-span-2">
<!-- Description -->
<div id="gameDescription" class="bg-tertiary rounded-lg p-6 border border-theme mb-6 hidden">
<h2 class="text-xl font-bold mb-3 text-primary">Description</h2>
<p id="gameDescriptionText" class="text-secondary leading-relaxed"></p>
</div>
<!-- Game Information -->
<div class="bg-tertiary rounded-lg p-6 border border-theme">
<h2 class="text-xl font-bold mb-4 text-primary">Game Information</h2>
<div id="gameInfoGrid" class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Dynamic content will be inserted here -->
</div>
</div>
</div>
<!-- Sidebar -->
<div class="space-y-6">
<!-- Cover Art -->
<div id="gameCoverArt" class="bg-tertiary rounded-lg p-4 border border-theme hidden">
<h3 class="text-lg font-bold mb-3 text-primary">Cover Art</h3>
<img id="gameCoverImage" src="" alt="" class="w-full rounded">
</div>
<!-- Screenshot -->
<div id="gameScreenshot" class="bg-tertiary rounded-lg p-4 border border-theme hidden">
<h3 class="text-lg font-bold mb-3 text-primary">Screenshot</h3>
<div class="relative group cursor-pointer" onclick="openScreenshotModalInOverlay()">
<img id="gameScreenshotImage" src="" alt="" class="w-full rounded transition-transform duration-200 group-hover:scale-105">
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded transition-all duration-200 flex items-center justify-center">
<svg class="w-12 h-12 text-primary opacity-0 group-hover:opacity-80 transition-opacity duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
</svg>
</div>
</div>
<p class="text-xs text-secondary mt-2 text-center">Click to enlarge</p>
</div>
<!-- No Metadata Message -->
<div id="gameNoMetadata" class="bg-tertiary rounded-lg p-4 border border-theme text-center hidden">
<div class="text-4xl mb-2">📦</div>
<p class="text-secondary text-sm">No detailed metadata available for this game</p>
<button id="gameAddMetadataBtn" onclick="editGame()"
class="inline-block mt-2 text-accent hover:opacity-80 text-sm underline hidden transition-opacity">
Add Metadata
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Screenshot Modal -->
<div id="overlayScreenshotModal" class="hidden fixed inset-0 bg-black bg-opacity-90 z-60 flex items-center justify-center p-4">
<div class="relative max-w-4xl max-h-full">
<button onclick="closeOverlayScreenshotModal()" class="absolute top-4 right-4 text-primary hover:text-secondary text-3xl z-10 bg-primary bg-opacity-20 hover:bg-opacity-30 rounded-full w-12 h-12 flex items-center justify-center transition-all">
&times;
</button>
<img id="overlayScreenshotModalImage" src="" alt="" class="max-w-full max-h-full rounded-lg">
<div class="absolute bottom-4 left-4 right-4 text-center">
<p id="overlayScreenshotModalTitle" class="text-primary bg-secondary bg-opacity-90 px-4 py-2 rounded-lg"></p>
</div>
</div>
</div>
<script>
function buildUrl(params) {
const url = new URL(window.location);
@@ -606,5 +720,277 @@
// document.addEventListener('DOMContentLoaded', function() {
// // Lazy loading code commented out
// });
// Game Detail Overlay Functions
let currentGameData = null;
async function showGameDetail(gameId) {
const overlay = document.getElementById('gameDetailOverlay');
const loading = document.getElementById('gameDetailLoading');
const content = document.getElementById('gameDetailContent');
// Show overlay and loading state
overlay.classList.remove('hidden');
loading.classList.remove('hidden');
content.classList.add('hidden');
document.body.style.overflow = 'hidden';
try {
const response = await fetch(`/api/games/${gameId}`);
if (!response.ok) {
throw new Error('Failed to fetch game details');
}
currentGameData = await response.json();
populateGameDetail(currentGameData);
// Hide loading, show content
loading.classList.add('hidden');
content.classList.remove('hidden');
} catch (error) {
console.error('Error loading game details:', error);
loading.innerHTML = '<div class="text-red-400">Failed to load game details</div>';
}
}
function populateGameDetail(game) {
// Basic info
document.getElementById('gameTitle').textContent = game.title;
document.getElementById('gameFilename').textContent = game.filename;
// Buttons
const favoriteBtn = document.getElementById('gameFavoriteBtn');
const editBtn = document.getElementById('gameEditBtn');
const downloadBtn = document.getElementById('gameDownloadBtn');
const downloadDisabled = document.getElementById('gameDownloadDisabled');
// Show/hide buttons based on user permissions
if (!game.is_demo) {
favoriteBtn.classList.remove('hidden');
favoriteBtn.textContent = game.is_favorite ? '♥' : '♡';
favoriteBtn.className = game.is_favorite ?
'text-red-600 hover:text-red-300 text-2xl' :
'text-red-400 hover:text-red-300 text-2xl';
} else {
favoriteBtn.classList.add('hidden');
}
if (game.is_super) {
editBtn.classList.remove('hidden');
editBtn.onclick = () => window.open(`/admin/games/${game.id}/edit`, '_blank');
} else {
editBtn.classList.add('hidden');
}
if (game.can_download) {
downloadBtn.classList.remove('hidden');
downloadDisabled.classList.add('hidden');
} else {
downloadBtn.classList.add('hidden');
downloadDisabled.classList.remove('hidden');
downloadDisabled.textContent = game.is_demo ? 'Demo Mode - No Downloads' : 'Login to Download';
}
// Description
const descriptionDiv = document.getElementById('gameDescription');
const descriptionText = document.getElementById('gameDescriptionText');
if (game.metadata.description) {
descriptionText.textContent = game.metadata.description;
descriptionDiv.classList.remove('hidden');
} else {
descriptionDiv.classList.add('hidden');
}
// Game info grid
const infoGrid = document.getElementById('gameInfoGrid');
infoGrid.innerHTML = '';
// Add metadata fields
const metadata = game.metadata;
if (metadata.year) {
addInfoField(infoGrid, 'Release Year', metadata.year);
}
if (metadata.developer) {
addInfoField(infoGrid, 'Developer', metadata.developer);
}
if (metadata.publisher) {
addInfoField(infoGrid, 'Publisher', metadata.publisher);
}
if (metadata.players) {
addInfoField(infoGrid, 'Players', metadata.players);
}
// Genres
if (metadata.genres && metadata.genres.length > 0) {
const genresDiv = document.createElement('div');
genresDiv.className = 'md:col-span-2';
genresDiv.innerHTML = `
<p class="text-gray-400 text-sm mb-2">Genres</p>
<div class="flex flex-wrap gap-2">
${metadata.genres.map(genre =>
`<a href="/browse/genres/${encodeURIComponent(genre.name)}" class="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-sm transition-colors">${genre.name}</a>`
).join('')}
</div>
`;
infoGrid.appendChild(genresDiv);
}
// Tags
if (metadata.tags && metadata.tags.length > 0) {
const tagsDiv = document.createElement('div');
tagsDiv.className = 'md:col-span-2';
tagsDiv.innerHTML = `
<p class="text-gray-400 text-sm mb-2">Tags</p>
<div class="flex flex-wrap gap-2">
${metadata.tags.map(tag =>
`<span class="bg-gray-600 px-2 py-1 rounded text-sm">${tag.name}</span>`
).join('')}
</div>
`;
infoGrid.appendChild(tagsDiv);
}
// File path
addInfoField(infoGrid, 'File Path', game.filepath, 'md:col-span-2', 'font-mono text-sm bg-tertiary text-primary p-2 rounded');
// Cover art
const coverArt = document.getElementById('gameCoverArt');
const coverImage = document.getElementById('gameCoverImage');
if (metadata.cover_image) {
const imageSrc = metadata.cover_image_local ?
`/images/${metadata.cover_image}` :
metadata.cover_image;
coverImage.src = imageSrc;
coverImage.alt = `${game.title} cover`;
coverArt.classList.remove('hidden');
} else {
coverArt.classList.add('hidden');
}
// Screenshot
const screenshot = document.getElementById('gameScreenshot');
const screenshotImage = document.getElementById('gameScreenshotImage');
if (metadata.screenshot) {
const imageSrc = metadata.screenshot_local ?
`/images/${metadata.screenshot}` :
metadata.screenshot;
screenshotImage.src = imageSrc;
screenshotImage.alt = `${game.title} screenshot`;
screenshot.classList.remove('hidden');
} else {
screenshot.classList.add('hidden');
}
// No metadata message
const noMetadata = document.getElementById('gameNoMetadata');
const addMetadataBtn = document.getElementById('gameAddMetadataBtn');
if (!metadata.description && !metadata.year && !metadata.developer) {
noMetadata.classList.remove('hidden');
if (game.is_super) {
addMetadataBtn.classList.remove('hidden');
addMetadataBtn.onclick = () => window.open(`/admin/games/${game.id}/edit`, '_blank');
} else {
addMetadataBtn.classList.add('hidden');
}
} else {
noMetadata.classList.add('hidden');
}
}
function addInfoField(parent, label, value, colSpan = '', valueClass = 'font-medium text-primary') {
const div = document.createElement('div');
if (colSpan) div.className = colSpan;
div.innerHTML = `
<p class="text-secondary text-sm">${label}</p>
<p class="${valueClass}">${value}</p>
`;
parent.appendChild(div);
}
function closeGameDetail() {
const overlay = document.getElementById('gameDetailOverlay');
overlay.classList.add('hidden');
document.body.style.overflow = 'auto';
currentGameData = null;
}
async function toggleFavoriteInOverlay() {
if (!currentGameData) return;
try {
await toggleFavorite(currentGameData.id);
// Update the overlay button
const favoriteBtn = document.getElementById('gameFavoriteBtn');
const isFavorited = favoriteBtn.textContent.trim() === '♥';
if (isFavorited) {
favoriteBtn.textContent = '♡';
favoriteBtn.className = 'text-red-400 hover:text-red-300 text-2xl';
currentGameData.is_favorite = false;
} else {
favoriteBtn.textContent = '♥';
favoriteBtn.className = 'text-red-600 hover:text-red-300 text-2xl';
currentGameData.is_favorite = true;
}
} catch (error) {
console.error('Error toggling favorite in overlay:', error);
}
}
async function downloadGameFromOverlay() {
if (!currentGameData) return;
await downloadGame(currentGameData.id);
}
function openScreenshotModalInOverlay() {
if (!currentGameData || !currentGameData.metadata.screenshot) return;
const modal = document.getElementById('overlayScreenshotModal');
const image = document.getElementById('overlayScreenshotModalImage');
const title = document.getElementById('overlayScreenshotModalTitle');
const imageSrc = currentGameData.metadata.screenshot_local ?
`/images/${currentGameData.metadata.screenshot}` :
currentGameData.metadata.screenshot;
image.src = imageSrc;
image.alt = `${currentGameData.title} screenshot`;
title.textContent = `${currentGameData.title} - Screenshot`;
modal.classList.remove('hidden');
}
function closeOverlayScreenshotModal() {
const modal = document.getElementById('overlayScreenshotModal');
modal.classList.add('hidden');
}
// Close overlay when clicking outside
document.getElementById('gameDetailOverlay').addEventListener('click', function(e) {
if (e.target === this) {
closeGameDetail();
}
});
// Close screenshot modal when clicking outside
document.getElementById('overlayScreenshotModal').addEventListener('click', function(e) {
if (e.target === this) {
closeOverlayScreenshotModal();
}
});
// Close modals with Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
const gameOverlay = document.getElementById('gameDetailOverlay');
const screenshotModal = document.getElementById('overlayScreenshotModal');
if (!screenshotModal.classList.contains('hidden')) {
closeOverlayScreenshotModal();
} else if (!gameOverlay.classList.contains('hidden')) {
closeGameDetail();
}
}
});
</script>
{% endblock %}