From 672ffbcdcd2b68b445742239b1db81e0ba031f8a Mon Sep 17 00:00:00 2001
From: Tomas Dvorak <contact.dvorak@gmail.com>
Date: Mon, 1 Dec 2025 10:46:33 +0100
Subject: [PATCH] styele

---
 frontend/admin.html         | 22 +++++++++++++++-----
 frontend/api-docs.html      | 24 +++++++++++++++++-----
 frontend/index.html         | 24 +++++++++++++++-------
 frontend/logo.html          | 22 +++++++++++++++-----
 frontend/logos.html         | 23 +++++++++++++++------
 frontend/src/api-docs.js    |  4 ++++
 frontend/src/style.css      | 40 +++++++++++++++++++++++++++++++++++++
 frontend/tailwind.config.js |  2 +-
 8 files changed, 132 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/api-docs.js

diff --git a/frontend/admin.html b/frontend/admin.html
index fda1a31..75269c9 100644
--- a/frontend/admin.html
+++ b/frontend/admin.html
@@ -15,9 +15,10 @@
         <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>
+            <a href="/" class="nav-link px-4 py-2 rounded-lg transition-smooth">Domů</a>
+            <a href="/logos.html" class="nav-link px-4 py-2 rounded-lg transition-smooth">Všechna Loga</a>
+            <a href="/api-docs.html" class="nav-link px-4 py-2 rounded-lg transition-smooth">API Docs</a>
+            <a href="/admin.html" class="nav-link nav-link-active px-4 py-2 rounded-lg 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>
@@ -228,8 +229,19 @@
 
   <!-- 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 class="container mx-auto px-6 py-8 text-gray-400 text-sm">
+      <div class="flex flex-col md:flex-row items-center justify-between gap-3">
+        <p class="text-center md:text-left">
+          🇨🇿 České Kluby Loga API
+          <span class="hidden sm:inline">| Administrace</span>
+        </p>
+        <div class="flex items-center gap-3 text-xs">
+          <span class="px-3 py-1 rounded-full bg-dark-card border border-dark-border">
+            Open Source · MIT
+          </span>
+          <span class="hidden sm:inline">Poháněno FAČR Scraper API</span>
+        </div>
+      </div>
     </div>
   </footer>
 
diff --git a/frontend/api-docs.html b/frontend/api-docs.html
index f69557c..f40c0ee 100644
--- a/frontend/api-docs.html
+++ b/frontend/api-docs.html
@@ -15,9 +15,10 @@
         <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 bg-accent-blue/20">API Docs</a>
-            <a href="/admin.html" class="nav-link px-4 py-2 rounded-lg hover:bg-dark-border transition-smooth">Admin</a>
+            <a href="/" class="nav-link px-4 py-2 rounded-lg transition-smooth">Domů</a>
+            <a href="/logos.html" class="nav-link px-4 py-2 rounded-lg transition-smooth">Všechna Loga</a>
+            <a href="/api-docs.html" class="nav-link nav-link-active px-4 py-2 rounded-lg transition-smooth">API Docs</a>
+            <a href="/admin.html" class="nav-link px-4 py-2 rounded-lg 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>
@@ -455,10 +456,23 @@ Write-Host "Club: $($result.club_name)" -ForegroundColor Cyan</code></pre>
 
   <!-- 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 class="container mx-auto px-6 py-8 text-gray-400 text-sm">
+      <div class="flex flex-col md:flex-row items-center justify-between gap-3">
+        <p class="text-center md:text-left">
+          🇨🇿 České Kluby Loga API
+          <span class="hidden sm:inline">| API Dokumentace</span>
+        </p>
+        <div class="flex items-center gap-3 text-xs">
+          <span class="px-3 py-1 rounded-full bg-dark-card border border-dark-border">
+            Open Source · MIT
+          </span>
+          <span class="hidden sm:inline">Poháněno FAČR Scraper API</span>
+        </div>
+      </div>
     </div>
   </footer>
 
+  <script type="module" src="/src/api-docs.js"></script>
+
 </body>
 </html>
diff --git a/frontend/index.html b/frontend/index.html
index 8f9e10b..5cf3c37 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -15,10 +15,10 @@
         <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="/logos.html" class="nav-link px-4 py-2 rounded-lg hover:bg-dark-border transition-smooth">Všechna Loga</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>
+            <a href="/" class="nav-link nav-link-active px-4 py-2 rounded-lg transition-smooth">Domů</a>
+            <a href="/logos.html" class="nav-link px-4 py-2 rounded-lg transition-smooth">Všechna Loga</a>
+            <a href="/api-docs.html" class="nav-link px-4 py-2 rounded-lg transition-smooth">API Docs</a>
+            <a href="/admin.html" class="nav-link px-4 py-2 rounded-lg 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>
@@ -176,9 +176,19 @@
 
   <!-- 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 class="container mx-auto px-6 py-8 text-gray-400 text-sm">
+      <div class="flex flex-col md:flex-row items-center justify-between gap-3">
+        <p class="text-center md:text-left">
+          🇨🇿 České Kluby Loga API
+          <span class="hidden sm:inline">| Vytvořeno s ❤️ pro český fotbal</span>
+        </p>
+        <div class="flex items-center gap-3 text-xs">
+          <span class="px-3 py-1 rounded-full bg-dark-card border border-dark-border">
+            Open Source MIT
+          </span>
+          <span class="hidden sm:inline">Poháněno FAČR Scraper API</span>
+        </div>
+      </div>
     </div>
   </footer>
 
diff --git a/frontend/logo.html b/frontend/logo.html
index c5e0eb1..f21acd1 100644
--- a/frontend/logo.html
+++ b/frontend/logo.html
@@ -15,9 +15,10 @@
         <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 hover:bg-dark-border transition-smooth">Admin</a>
+            <a href="/" class="nav-link px-4 py-2 rounded-lg transition-smooth">Domů</a>
+            <a href="/logos.html" class="nav-link nav-link-active px-4 py-2 rounded-lg transition-smooth">Všechna Loga</a>
+            <a href="/api-docs.html" class="nav-link px-4 py-2 rounded-lg transition-smooth">API Docs</a>
+            <a href="/admin.html" class="nav-link px-4 py-2 rounded-lg 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>
@@ -157,8 +158,19 @@
 
   <!-- 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 class="container mx-auto px-6 py-8 text-gray-400 text-sm">
+      <div class="flex flex-col md:flex-row items-center justify-between gap-3">
+        <p class="text-center md:text-left">
+          🇨🇿 České Kluby Loga API
+          <span class="hidden sm:inline">| Detail Loga</span>
+        </p>
+        <div class="flex items-center gap-3 text-xs">
+          <span class="px-3 py-1 rounded-full bg-dark-card border border-dark-border">
+            Open Source · MIT
+          </span>
+          <span class="hidden sm:inline">Poháněno FAČR Scraper API</span>
+        </div>
+      </div>
     </div>
   </footer>
 
diff --git a/frontend/logos.html b/frontend/logos.html
index 318a633..70b1de1 100644
--- a/frontend/logos.html
+++ b/frontend/logos.html
@@ -13,10 +13,10 @@
         <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="/logos.html" class="nav-link px-4 py-2 rounded-lg bg-accent-blue/20 transition-smooth">Všechna Loga</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>
+            <a href="/" class="nav-link px-4 py-2 rounded-lg transition-smooth">Domů</a>
+            <a href="/logos.html" class="nav-link nav-link-active px-4 py-2 rounded-lg transition-smooth">Všechna Loga</a>
+            <a href="/api-docs.html" class="nav-link px-4 py-2 rounded-lg transition-smooth">API Docs</a>
+            <a href="/admin.html" class="nav-link px-4 py-2 rounded-lg 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>
@@ -78,8 +78,19 @@
   </main>
 
   <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 class="container mx-auto px-6 py-8 text-gray-400 text-sm">
+      <div class="flex flex-col md:flex-row items-center justify-between gap-3">
+        <p class="text-center md:text-left">
+          🇨🇿 České Kluby Loga API
+          <span class="hidden sm:inline">| Všechna Loga</span>
+        </p>
+        <div class="flex items-center gap-3 text-xs">
+          <span class="px-3 py-1 rounded-full bg-dark-card border border-dark-border">
+            Open Source · MIT
+          </span>
+          <span class="hidden sm:inline">Poháněno FAČR Scraper API</span>
+        </div>
+      </div>
     </div>
   </footer>
 
diff --git a/frontend/src/api-docs.js b/frontend/src/api-docs.js
new file mode 100644
index 0000000..a08fdcf
--- /dev/null
+++ b/frontend/src/api-docs.js
@@ -0,0 +1,4 @@
+import './style.css'
+import './theme.js'
+
+console.log('🇨🇿 České Kluby Loga API - API Docs')
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 743aa9e..f828bda 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -142,3 +142,43 @@ body {
   background-color: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(12px);
 }
+
+.nav-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.5rem 0.95rem;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #e5e7eb;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
+}
+
+.nav-link:hover {
+  background-color: rgba(148, 163, 184, 0.22);
+  color: #f9fafb;
+  transform: translateY(-1px);
+}
+
+.nav-link-active {
+  background-image: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
+  color: #ffffff;
+  box-shadow: 0 18px 30px -12px rgba(15, 23, 42, 0.8);
+}
+
+.theme-light .nav-link {
+  color: #4b5563;
+}
+
+.theme-light .nav-link:hover {
+  background-color: rgba(15, 23, 42, 0.04);
+  color: #020617;
+}
+
+.theme-light .nav-link-active {
+  color: #ffffff;
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 86f0898..87e255a 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
-    "./index.html",
+    "./*.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   darkMode: 'class',