přidané tlačítko sdílet + světlý tmavý režim

public/assets/css/style.css

@@ -441,3 +441,100 @@ a:hover {
     color: var(--primary);
     text-decoration: underline;
 }
+/* --- Vylepšení pro tlačítko Sdílet --- */
+#shareButton {
+    position: relative;
+    z-index: 102; /* Nad search dropdown */
+}
+
+#shareButton:hover {
+    background: var(--primary);
+    color: white;
+    transform: scale(1.1);
+    transition: all 0.2s ease;
+}
+
+/* Tooltip pro sdílení */
+#shareButton::after {
+    content: 'Sdílet';
+    position: absolute;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--text-main);
+    color: var(--bg-card);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    white-space: nowrap;
+}
+
+#shareButton:hover::after {
+    opacity: 1;
+}
+
+/* --- Zlepšení viditelnosti tlačítek --- */
+.icon-btn {
+    background: none;
+    border: 1px solid var(--border); /* Přidáme jemný okraj pro viditelnost */
+    color: var(--text-main);
+    font-size: 1.1rem;
+    cursor: pointer;
+    padding: 8px 10px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+}
+
+/* Tlačítko Sdílet - zvýraznění */
+#shareButton {
+    margin-right: 5px;
+}
+
+#shareButton:hover {
+    background: var(--primary);
+    color: white;
+    border-color: var(--primary);
+    transform: scale(1.05);
+}
+
+/* Tlačítko Téma */
+#themeToggle:hover {
+    background: var(--bg-body);
+    color: var(--primary);
+}
+
+/* Ujistě se, že ikony jsou vidět */
+.icon-btn i {
+    font-size: 1rem;
+}
+/* --- Vylepšení pro světlý režim (Light Mode) --- */
+[data-theme="light"] .icon-btn {
+    border: 1px solid #d1d5db; /* Jemný šedý okraj pro viditelnost */
+    background: transparent; /* Průhledné pozadí */
+}
+
+[data-theme="light"] .icon-btn:hover {
+    background: #f3f4f6; /* Jemně šedé pozadí při najetí (ne bílé) */
+    border-color: var(--primary); /* Okraj se změní na fialovou */
+    color: var(--primary); /* Ikona se změní na fialovou */
+}
+
+/* Pro tmavý režim necháme původní chování */
+[data-theme="dark"] .icon-btn {
+    border: 1px solid #333333;
+    background: transparent;
+}
+
+[data-theme="dark"] .icon-btn:hover {
+    background: #2d2d2d; /* Tmavě šedé pozadí */
+    border-color: var(--primary);
+    color: var(--primary);
+}

public/assets/js/main.js

@@ -1,44 +1,81 @@
 // /srv/http/eos-modern/public/assets/js/main.js
 
+// 1. Globální funkce pro Toast notifikaci
+function showToast(message, isError = false) {
+    const existingToasts = document.querySelectorAll('.custom-toast');
+    existingToasts.forEach(t => t.remove());
+
+    const toast = document.createElement('div');
+    toast.className = 'custom-toast';
+    toast.textContent = message;
+    
+    const bgColor = isError ? '#e74c3c' : 'var(--primary)';
+    
+    Object.assign(toast.style, {
+        position: 'fixed',
+        bottom: '20px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        backgroundColor: bgColor,
+        color: '#fff',
+        padding: '12px 24px',
+        borderRadius: '8px',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        zIndex: '9999',
+        transition: 'opacity 0.3s ease, transform 0.3s ease',
+        fontFamily: 'var(--font-main)',
+        fontSize: '0.95rem',
+        opacity: '0',
+        pointerEvents: 'none'
+    });
+
+    document.body.appendChild(toast);
+
+    requestAnimationFrame(() => {
+        toast.style.opacity = '1';
+        toast.style.transform = 'translateX(-50%) translateY(0)';
+    });
+
+    setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateX(-50%) translateY(10px)';
+        setTimeout(() => toast.remove(), 300);
+    }, 3000);
+}
+
 document.addEventListener('DOMContentLoaded', () => {
-    // 1. Tmavý režim
+    // 2. Tmavý režim (už funguje, necháme to tak)
     const themeToggle = document.getElementById('themeToggle');
     const html = document.documentElement;
-    const icon = themeToggle ? themeToggle.querySelector('i') : null;
     
-    if (themeToggle && icon) {
-        // Načíst uložené téma
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        html.setAttribute('data-theme', savedTheme);
-        updateIcon(savedTheme);
+    if (themeToggle) {
+        const icon = themeToggle.querySelector('i');
+        if (icon) {
+            const savedTheme = localStorage.getItem('theme') || 'dark';
+            html.setAttribute('data-theme', savedTheme);
+            updateIcon(savedTheme);
 
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = html.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            html.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            updateIcon(newTheme);
-        });
+            themeToggle.addEventListener('click', () => {
+                const currentTheme = html.getAttribute('data-theme');
+                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+                html.setAttribute('data-theme', newTheme);
+                localStorage.setItem('theme', newTheme);
+                updateIcon(newTheme);
+            });
 
-        function updateIcon(theme) {
-            if (theme === 'dark') {
-                icon.className = 'fas fa-sun';
-            } else {
-                icon.className = 'fas fa-moon';
+            function updateIcon(theme) {
+                icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
             }
         }
     }
 
-    // 2. Vyhledávání (Fuse.js)
+    // 3. Vyhledávání (Fuse.js) - necháme jako bylo
     const searchInput = document.getElementById('searchInput');
     const searchResults = document.getElementById('searchResults');
     let fuse = null;
 
     if (searchInput && searchResults) {
-        // Cesta k JSON (musí odpovídat WEB_ROOT v config.php)
-        // Pokud je web na /eos-modern/public/, cesta je /eos-modern/public/data/articles.json
         const jsonUrl = '/eos-modern/public/data/articles.json';
-
         fetch(jsonUrl)
             .then(res => res.json())
             .then(data => {
@@ -48,7 +85,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     ignoreLocation: true
                 });
             })
-            .catch(err => console.error('Chyba při načítání JSON:', err));
+            .catch(err => console.error('Chyba JSON:', err));
 
         searchInput.addEventListener('input', (e) => {
             const query = e.target.value.trim();
@@ -56,12 +93,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 searchResults.style.display = 'none';
                 return;
             }
-
             if (!fuse) return;
-
             const results = fuse.search(query);
             searchResults.innerHTML = '';
-            
             if (results.length > 0) {
                 searchResults.style.display = 'block';
                 results.forEach(result => {
@@ -77,11 +111,46 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
 
-        // Skrytí výsledků při kliknutí mimo
         document.addEventListener('click', (e) => {
             if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
                 searchResults.style.display = 'none';
             }
         });
     }
+
+    // 4. Tlačítko Sdílet - ZLEPŠENÁ VERZE
+    const shareButton = document.getElementById('shareButton');
+    if (shareButton) {
+        shareButton.addEventListener('click', async () => {
+            const currentUrl = window.location.href;
+            const title = document.title;
+            
+            // Zkusíme nejprve nativní sdílení (mobil)
+            if (navigator.share) {
+                try {
+                    await navigator.share({
+                        title: title,
+                        text: 'Podívej se na tento článek na EndeavourOS CZ!',
+                        url: currentUrl
+                    });
+                    console.log('Sdílení úspěšné (mobile).');
+                    return; // Ukončíme, pokud se podařilo
+                } catch (err) {
+                    console.warn('Sdílení zrušeno nebo selhalo:', err);
+                    // Pokud selže, přejdeme na fallback
+                }
+            }
+
+            // Fallback pro Desktop: Zkusíme zkopírovat do schránky
+            try {
+                await navigator.clipboard.writeText(currentUrl);
+                showToast('Odkaz zkopírován do schránky! 📋');
+                console.log('Odkaz zkopírován (desktop).');
+            } catch (err) {
+                console.error('Chyba kopírování:', err);
+                // Pokud selže i clipboard (často na HTTP), ukážeme chybu
+                showToast('Nelze zkopírovat. Zkuste to ručně (URL v adresním řádku).', true);
+            }
+        });
+    }
 });

templates/base.php

@@ -43,6 +43,9 @@ if (!defined('WEB_ROOT')) {
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
     
+        <!-- 🌟 FAWNSOME ICONS (CHYBĚLO TO!) 🌟 -->
+           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />    
+    
     <!-- Prism.js pro syntax highlight -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
     
@@ -74,17 +77,23 @@ if (!defined('WEB_ROOT')) {
                     <li><a href="<?= WEB_ROOT ?>/o-nas.php">O nás</a></li>
                 </ul>
             </nav>
-
+            
             <div class="header-actions">
                 <div class="search-box">
                     <input type="text" id="searchInput" placeholder="Hledat v článcích...">
                     <div id="searchResults" class="search-dropdown"></div>
                 </div>
+                
+                <!-- Tlačítko Sdílet -->
+                <button id="shareButton" class="icon-btn" aria-label="Sdílet stránku" title="Sdílet">
+                    <i class="fa-solid fa-share-nodes"></i>
+                </button>
+                
+                <!-- Tlačítko Téma -->
                 <button id="themeToggle" class="icon-btn" aria-label="Přepnout téma">
-                    <i class="fas fa-moon"></i>
+                    <i class="fas fa-sun"></i> <!-- Změň na fa-sun, pokud je výchozí dark -->
                 </button>
             </div>
-        </div>
     </header>
 
     <main class="container main-content">