mirror of
https://github.com/Dvorinka/ClubLogos.git
synced 2026-06-03 19:42:58 +00:00
Tomáš Dvořák
163 lines
6.7 KiB
HTML
163 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="cs" class="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Detail Loga - České Kluby Loga API</title>
|
||
<link rel="stylesheet" href="/src/style.css">
|
||
</head>
|
||
<body class="bg-dark-bg text-white min-h-screen">
|
||
|
||
<!-- Navigation -->
|
||
<nav class="border-b border-dark-border bg-dark-card/50 backdrop-blur-sm sticky top-0 z-50">
|
||
<div class="container mx-auto px-6 py-4">
|
||
<div class="flex items-center justify-between">
|
||
<a href="/" class="text-2xl font-bold gradient-text">🇨🇿 České Kluby Loga</a>
|
||
<div class="flex gap-4">
|
||
<a href="/" class="nav-link px-4 py-2 rounded-lg hover:bg-dark-border transition-smooth">Domů</a>
|
||
<a href="/api-docs.html" class="nav-link px-4 py-2 rounded-lg hover:bg-dark-border transition-smooth">API Docs</a>
|
||
<a href="/admin.html" class="nav-link px-4 py-2 rounded-lg hover:bg-dark-border transition-smooth">Admin</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Main Content -->
|
||
<main class="container mx-auto px-6 py-12">
|
||
|
||
<!-- Loading State -->
|
||
<div id="loadingState" class="text-center py-12">
|
||
<div class="spinner mx-auto mb-4"></div>
|
||
<p class="text-gray-400">Načítání...</p>
|
||
</div>
|
||
|
||
<!-- Error State -->
|
||
<div id="errorState" class="hidden text-center py-12">
|
||
<svg class="mx-auto h-16 w-16 text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
<h2 class="text-2xl font-bold mb-2">Logo nenalezeno</h2>
|
||
<p class="text-gray-400 mb-4">Logo s tímto UUID neexistuje</p>
|
||
<a href="/" class="px-4 py-2 bg-accent-blue rounded-lg hover:bg-blue-600 transition-smooth inline-block">
|
||
Zpět na hlavní stránku
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Logo Detail -->
|
||
<div id="logoDetail" class="hidden">
|
||
|
||
<!-- Header -->
|
||
<div class="flex items-start justify-between mb-8">
|
||
<div>
|
||
<h1 id="clubName" class="text-4xl font-bold gradient-text mb-2"></h1>
|
||
<p id="clubMeta" class="text-gray-400"></p>
|
||
</div>
|
||
<a href="/admin.html" class="px-4 py-2 bg-accent-blue rounded-lg hover:bg-blue-600 transition-smooth">
|
||
✏️ Upravit
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Logo Preview -->
|
||
<section class="mb-8">
|
||
<div class="bg-dark-card rounded-xl p-8 border border-dark-border">
|
||
<h2 class="text-2xl font-bold mb-6">📷 Náhled Loga</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<!-- Light Background -->
|
||
<div class="bg-white rounded-lg p-8 flex items-center justify-center min-h-[300px]">
|
||
<img id="logoPreviewLight" src="" alt="Logo na světlém pozadí" class="max-w-full max-h-64 object-contain">
|
||
</div>
|
||
<!-- Dark Background -->
|
||
<div class="bg-gray-900 rounded-lg p-8 flex items-center justify-center min-h-[300px]">
|
||
<img id="logoPreviewDark" src="" alt="Logo na tmavém pozadí" class="max-w-full max-h-64 object-contain">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Available Formats -->
|
||
<section class="mb-8">
|
||
<div class="bg-dark-card rounded-xl p-6 border border-dark-border">
|
||
<h2 class="text-2xl font-bold mb-6">💾 Dostupné Formáty</h2>
|
||
<div id="formatsGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
<!-- Formats will be populated here -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Variants -->
|
||
<section class="mb-8" id="variantsSection">
|
||
<div class="bg-dark-card rounded-xl p-6 border border-dark-border">
|
||
<h2 class="text-2xl font-bold mb-6">🎨 Varianty Loga</h2>
|
||
<div id="variantsGrid" class="space-y-4">
|
||
<!-- Variants will be populated here -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Metadata -->
|
||
<section class="mb-8">
|
||
<div class="bg-dark-card rounded-xl p-6 border border-dark-border">
|
||
<h2 class="text-2xl font-bold mb-6">ℹ️ Informace</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-400 mb-2">UUID</h3>
|
||
<p id="logoUuid" class="font-mono text-sm bg-dark-bg rounded px-3 py-2"></p>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-400 mb-2">Typ Klubu</h3>
|
||
<p id="clubType" class="text-sm bg-dark-bg rounded px-3 py-2"></p>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-400 mb-2">Webová Stránka</h3>
|
||
<p id="clubWebsite" class="text-sm bg-dark-bg rounded px-3 py-2"></p>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-400 mb-2">Datum Nahrání</h3>
|
||
<p id="uploadDate" class="text-sm bg-dark-bg rounded px-3 py-2"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- API Usage -->
|
||
<section>
|
||
<div class="bg-dark-card rounded-xl p-6 border border-dark-border">
|
||
<h2 class="text-2xl font-bold mb-6">🔗 Použití API</h2>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-400 mb-2">GET Logo (PNG preferováno)</h3>
|
||
<div class="bg-dark-bg rounded px-4 py-3 font-mono text-sm flex items-center justify-between">
|
||
<code id="apiUrlDefault"></code>
|
||
<button onclick="copyToClipboard('apiUrlDefault')" class="px-3 py-1 bg-accent-blue rounded text-xs hover:bg-blue-600 transition-smooth">
|
||
Kopírovat
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-sm font-medium text-gray-400 mb-2">GET Logo s Metadaty (JSON)</h3>
|
||
<div class="bg-dark-bg rounded px-4 py-3 font-mono text-sm flex items-center justify-between">
|
||
<code id="apiUrlJson"></code>
|
||
<button onclick="copyToClipboard('apiUrlJson')" class="px-3 py-1 bg-accent-blue rounded text-xs hover:bg-blue-600 transition-smooth">
|
||
Kopírovat
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="border-t border-dark-border mt-20">
|
||
<div class="container mx-auto px-6 py-8 text-center text-gray-400">
|
||
<p>🇨🇿 České Kluby Loga API</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script type="module" src="/src/logo.js"></script>
|
||
</body>
|
||
</html>
|