TDvorak/ClubLogos
1
0
Fork 0
mirror of https://github.com/Dvorinka/ClubLogos.git synced 2026-06-03 19:42:58 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
df930e3d9c1ab95c277d03a9ce35aa243b9d76aa
ClubLogos/frontend/index.html
T
Tomáš Dvořák 0fc92f8464 first commit
2025-10-02 12:39:28 +02:00

182 lines
7.9 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="cs" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🇨🇿 Č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>
<!-- Hero Section -->
<header class="relative overflow-hidden border-b border-dark-border">
<div class="absolute inset-0 bg-gradient-to-br from-blue-600/10 to-green-600/10"></div>
<div class="container mx-auto px-6 py-20 relative z-10">
<div class="text-center hero-content max-w-4xl mx-auto">
<h1 class="text-5xl md:text-7xl font-bold mb-6">
<span class="gradient-text">České Kluby Loga CDN</span>
</h1>
<p class="text-xl text-gray-400 mb-8">
Vysoce kvalitní loga českých fotbalových a futsalových klubů s průhledným pozadím.
Založeno na UUID, API-first, připraveno pro produkci.
</p>
<div class="flex flex-wrap gap-4 justify-center">
<button id="browseBtn" class="px-8 py-4 bg-accent-blue rounded-lg font-semibold hover:bg-blue-600 transition-smooth text-lg">
🔍 Procházet Loga
</button>
<a href="/admin.html" class="px-8 py-4 bg-accent-green rounded-lg font-semibold hover:bg-green-600 transition-smooth text-lg">
⬆️ Nahrát Logo
</a>
</div>
</div>
</div>
</header>
<!-- Logo Gallery -->
<section class="container mx-auto px-6 py-16" id="logoGallery">
<div class="mb-8">
<h2 class="text-3xl font-bold mb-4">Dostupná Loga Klubů</h2>
<input
type="text"
id="gallerySearch"
placeholder="Filtrovat podle názvu klubu..."
class="w-full max-w-md bg-dark-card border border-dark-border rounded-lg px-4 py-3 text-white focus:outline-none focus:border-accent-blue transition-smooth"
>
</div>
<div id="logoGrid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
<!-- Logos will be loaded here -->
</div>
<div id="loadingState" class="text-center py-16">
<div class="spinner mx-auto"></div>
<p class="mt-4 text-gray-400">Načítání log klubů...</p>
</div>
<div id="emptyState" class="text-center py-16 hidden">
<div class="text-6xl mb-4">⚽</div>
<p class="text-xl text-gray-400 mb-4">Zatím nebyla nahrána žádná loga</p>
<a href="/admin.html" class="px-6 py-3 bg-accent-green rounded-lg font-semibold hover:bg-green-600 transition-smooth inline-block">
Nahrát První Logo
</a>
</div>
</section>
<!-- API Documentation Preview -->
<section class="bg-dark-card border-y border-dark-border py-16">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold mb-8 text-center">Rychlá Referenční API</h2>
<div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
<div class="bg-dark-bg rounded-xl p-6 border border-dark-border">
<div class="flex items-start gap-4">
<span class="px-3 py-1 bg-accent-blue/20 text-accent-blue rounded-md text-sm font-mono">GET</span>
<div class="flex-1">
<p class="font-mono text-sm mb-2">/logos</p>
<p class="text-gray-400 text-sm">Zobrazit všechna dostupná loga</p>
</div>
</div>
</div>
<div class="bg-dark-bg rounded-xl p-6 border border-dark-border">
<div class="flex items-start gap-4">
<span class="px-3 py-1 bg-accent-blue/20 text-accent-blue rounded-md text-sm font-mono">GET</span>
<div class="flex-1">
<p class="font-mono text-sm mb-2">/logos/:id</p>
<p class="text-gray-400 text-sm">Získat logo podle UUID (PNG/SVG)</p>
</div>
</div>
</div>
<div class="bg-dark-bg rounded-xl p-6 border border-dark-border">
<div class="flex items-start gap-4">
<span class="px-3 py-1 bg-accent-blue/20 text-accent-blue rounded-md text-sm font-mono">GET</span>
<div class="flex-1">
<p class="font-mono text-sm mb-2">/logos/:id/json</p>
<p class="text-gray-400 text-sm">Získat metadata loga</p>
</div>
</div>
</div>
<div class="bg-dark-bg rounded-xl p-6 border border-dark-border">
<div class="flex items-start gap-4">
<span class="px-3 py-1 bg-accent-green/20 text-accent-green rounded-md text-sm font-mono">POST</span>
<div class="flex-1">
<p class="font-mono text-sm mb-2">/logos/:id</p>
<p class="text-gray-400 text-sm">Nahrát nové logo</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="container mx-auto px-6 py-16">
<h2 class="text-3xl font-bold mb-12 text-center">✨ Funkce</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
<div class="feature-card bg-dark-card rounded-xl p-6 border border-dark-border card-hover">
<div class="text-3xl mb-4">⚽</div>
<h3 class="text-xl font-semibold mb-2">Integrace s FAČR</h3>
<p class="text-gray-400">Přímá integrace s oficiálním českým fotbalovým registrem</p>
</div>
<div class="feature-card bg-dark-card rounded-xl p-6 border border-dark-border card-hover">
<div class="text-3xl mb-4">🖼️</div>
<h3 class="text-xl font-semibold mb-2">SVG & PNG</h3>
<p class="text-gray-400">Nahrajte SVG, PNG se vygeneruje automaticky</p>
</div>
<div class="feature-card bg-dark-card rounded-xl p-6 border border-dark-border card-hover">
<div class="text-3xl mb-4">🔄</div>
<h3 class="text-xl font-semibold mb-2">Založeno na UUID</h3>
<p class="text-gray-400">Konzistentní identifikace napříč všemi platformami</p>
</div>
<div class="feature-card bg-dark-card rounded-xl p-6 border border-dark-border card-hover">
<div class="text-3xl mb-4">🌐</div>
<h3 class="text-xl font-semibold mb-2">Připraveno pro CDN</h3>
<p class="text-gray-400">Rychlé, cachovatelné, produkční API</p>
</div>
<div class="feature-card bg-dark-card rounded-xl p-6 border border-dark-border card-hover">
<div class="text-3xl mb-4">📝</div>
<h3 class="text-xl font-semibold mb-2">Bohatá Metadata</h3>
<p class="text-gray-400">Název klubu, město, typ, web v ceně</p>
</div>
<div class="feature-card bg-dark-card rounded-xl p-6 border border-dark-border card-hover">
<div class="text-3xl mb-4">🐳</div>
<h3 class="text-xl font-semibold mb-2">Připraveno pro Docker</h3>
<p class="text-gray-400">Nasazení jedním příkazem s Docker Compose</p>
</div>
</div>
</section>
<!-- 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 | Vytvořeno s ❤️ pro český fotbal</p>
<p class="text-sm mt-2">Poháněno FAČR Scraper API | Open Source MIT Licence</p>
</div>
</footer>
<script type="module" src="/src/home.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink