mirror of
https://github.com/Dvorinka/ClubLogos.git
synced 2026-06-03 19:42:58 +00:00
Tomas Dvorak
239 lines
11 KiB
HTML
239 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="cs" class="dark theme-dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin - Č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 items-center gap-3">
|
|
<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 bg-accent-blue/20 transition-smooth">Admin</a>
|
|
</div>
|
|
<button id="themeToggle" type="button" class="px-3 py-1.5 text-xs md:text-sm rounded-full border border-dark-border bg-dark-bg/60 hover:bg-dark-border transition-smooth">
|
|
☀️ <span class="hidden sm:inline">Světlý režim</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Admin Header -->
|
|
<header class="border-b border-dark-border bg-dark-card">
|
|
<div class="container mx-auto px-6 py-8">
|
|
<h1 class="text-3xl font-bold gradient-text mb-2">Administrace</h1>
|
|
<p class="text-gray-400">Vyhledejte kluby a nahrajte jejich loga</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mx-auto px-6 py-12">
|
|
|
|
<!-- Club Search Section -->
|
|
<section class="mb-12">
|
|
<div class="bg-dark-card rounded-xl p-6 border border-dark-border">
|
|
<h2 class="text-2xl font-bold mb-6">🔍 Vyhledat Klub</h2>
|
|
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between mb-4">
|
|
<div class="w-full md:max-w-lg">
|
|
<div class="relative">
|
|
<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-500">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z" />
|
|
</svg>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
id="clubSearch"
|
|
placeholder="Hledat české kluby (např. Sparta, Slavia)..."
|
|
class="w-full bg-dark-bg border border-dark-border rounded-lg pl-10 pr-4 py-3 text-white focus:outline-none focus:border-accent-blue transition-smooth"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-start md:items-end gap-1 text-xs">
|
|
<div class="inline-flex rounded-full bg-dark-bg border border-dark-border p-1">
|
|
<button type="button" data-club-sport-filter="all" class="px-3 py-1.5 rounded-full bg-accent-blue text-white transition-smooth">Vše</button>
|
|
<button type="button" data-club-sport-filter="football" class="px-3 py-1.5 rounded-full bg-dark-bg text-gray-300 hover:bg-dark-border transition-smooth">Fotbal</button>
|
|
<button type="button" data-club-sport-filter="futsal" class="px-3 py-1.5 rounded-full bg-dark-bg text-gray-300 hover:bg-dark-border transition-smooth">Futsal</button>
|
|
</div>
|
|
<span class="text-[11px] text-gray-500">Výsledky z FAČR • filtr dle druhu sportu</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Results -->
|
|
<div id="searchResults" class="space-y-3">
|
|
<!-- Výsledky naplněné JavaScriptem -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Upload Section -->
|
|
<section id="uploadSection" class="hidden">
|
|
<div class="bg-dark-card rounded-xl p-6 border border-dark-border">
|
|
<h2 class="text-2xl font-bold mb-6"><span style="font-size: 30px; display: inline-block; vertical-align: middle; line-height: 1;">⬆️</span> Nahrát Logo</h2>
|
|
<div id="selectedClubSummary" class="hidden mb-6">
|
|
<div class="bg-dark-bg rounded-lg border border-dark-border p-4 flex items-start gap-4">
|
|
<div id="selectedClubLogo" class="flex-shrink-0 w-14 h-14 rounded-lg bg-dark-border/40 flex items-center justify-center text-2xl">
|
|
🏟️
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<h3 id="selectedClubName" class="font-semibold truncate"></h3>
|
|
<span id="selectedClubType" class="px-2 py-0.5 rounded-full bg-accent-blue/10 text-xs text-accent-blue uppercase tracking-wide"></span>
|
|
</div>
|
|
<p id="selectedClubCity" class="text-xs text-gray-400 truncate"></p>
|
|
<p id="selectedClubWebsite" class="text-xs text-accent-blue mt-1 truncate"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form id="uploadForm" class="space-y-6">
|
|
|
|
<!-- Club UUID (Read-only) -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-400 mb-2">
|
|
UUID Klubu <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="clubUuid"
|
|
readonly
|
|
class="w-full bg-dark-bg/50 border border-dark-border rounded-lg px-4 py-3 text-gray-400 cursor-not-allowed"
|
|
>
|
|
</div>
|
|
|
|
<!-- Club Name (Optional) -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-400 mb-2">
|
|
Název Klubu <span class="text-gray-500 text-xs">(volitelné)</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="clubName"
|
|
placeholder="AC Sparta Praha"
|
|
class="w-full bg-dark-bg border border-dark-border rounded-lg px-4 py-3 text-white focus:outline-none focus:border-accent-blue transition-smooth"
|
|
>
|
|
<p class="text-xs text-gray-500 mt-1">Volitelné: Pokud název neuvedete, doplníme jej automaticky dle FAČR (podle UUID)</p>
|
|
</div>
|
|
|
|
<!-- Club Type -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-400 mb-2">Typ Klubu</label>
|
|
<select
|
|
id="clubType"
|
|
class="w-full bg-dark-bg border border-dark-border rounded-lg px-4 py-3 text-white focus:outline-none focus:border-accent-blue transition-smooth"
|
|
>
|
|
<option value="football">Fotbal</option>
|
|
<option value="futsal">Futsal</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Club Website with Search -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-400 mb-2">
|
|
Web Klubu
|
|
<button type="button" id="searchWebsite" class="ml-2 text-accent-blue hover:text-blue-400 text-xs">
|
|
🔍 Hledat Online
|
|
</button>
|
|
</label>
|
|
<input
|
|
type="url"
|
|
id="clubWebsite"
|
|
placeholder="https://www.sparta.cz"
|
|
class="w-full bg-dark-bg border border-dark-border rounded-lg px-4 py-3 text-white focus:outline-none focus:border-accent-blue transition-smooth"
|
|
>
|
|
<div id="websiteSearchResults" class="mt-2 hidden"></div>
|
|
</div>
|
|
|
|
<!-- File Upload Area -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-400 mb-2">
|
|
Soubor Loga <span class="text-red-500">*</span>
|
|
</label>
|
|
|
|
<!-- URL Upload -->
|
|
<div class="mb-3">
|
|
<input
|
|
type="url"
|
|
id="logoUrl"
|
|
placeholder="Nebo vložte URL obrázku (https://...)"
|
|
class="w-full bg-dark-bg border border-dark-border rounded-lg px-4 py-3 text-white focus:outline-none focus:border-accent-blue transition-smooth"
|
|
>
|
|
<button type="button" id="loadFromUrl" class="mt-2 px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700 transition-smooth text-sm">
|
|
📥 Načíst z URL
|
|
</button>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-dark-border"></div>
|
|
</div>
|
|
<div class="relative flex justify-center text-sm">
|
|
<span class="px-2 bg-dark-card text-gray-400">nebo</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="uploadArea" class="upload-area rounded-lg p-12 text-center cursor-pointer border-2 border-dashed border-dark-border hover:border-accent-blue transition-smooth mt-3">
|
|
<svg style="width: 75px;padding-top: 20px;" class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
|
|
</svg>
|
|
<p class="text-lg mb-2">Přetáhněte logo sem nebo <span class="text-accent-blue font-semibold">procházet</span></p>
|
|
<p class="text-sm text-gray-500">SVG, PNG nebo PDF • Preferováno průhledné pozadí</p>
|
|
<p class="text-xs text-gray-600 mt-2">SVG a PDF soubory budou automaticky převedeny na PNG</p>
|
|
<input type="file" id="fileInput" accept=".svg,.png,.pdf" class="hidden" multiple>
|
|
</div>
|
|
|
|
<p class="text-xs text-gray-500 mt-2">💡 Můžete vybrat více souborů najednou pro nahrání variant</p>
|
|
</div>
|
|
|
|
<!-- Files Preview -->
|
|
<div id="filesPreviewArea" class="hidden">
|
|
<h3 class="text-lg font-semibold mb-3">Vybrané soubory</h3>
|
|
<div id="filesPreviewList" class="space-y-3">
|
|
<!-- Files will be listed here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Button -->
|
|
<button
|
|
type="submit"
|
|
id="uploadSubmit"
|
|
class="w-full px-6 py-4 bg-accent-green rounded-lg font-semibold hover:bg-green-600 transition-smooth disabled:opacity-50 disabled:cursor-not-allowed text-lg"
|
|
>
|
|
Nahrát Logo
|
|
</button>
|
|
|
|
<!-- Requirements Notice -->
|
|
<div class="bg-red-900/20 border border-red-800 rounded-lg p-4 text-sm">
|
|
<p class="font-semibold text-red-400 mb-2">⚠️ Požadavky na nahrání:</p>
|
|
<ul class="list-disc list-inside space-y-1 text-red-300/80">
|
|
<li>Název klubu je volitelný (doplníme dle FAČR podle UUID)</li>
|
|
<li>UUID klubu musí být platné</li>
|
|
<li>Akceptovány pouze SVG, PNG a PDF soubory</li>
|
|
<li>Doporučeno průhledné pozadí</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
</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 | Administrace</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="module" src="/src/admin.js"></script>
|
|
</body>
|
|
</html>
|