diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 5119ac9..4f1b347 100644
--- a/public/assets/css/style.css
+++ b/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);
+}
\ No newline at end of file
diff --git a/public/assets/js/main.js b/public/assets/js/main.js
index 2dade63..6472399 100644
--- a/public/assets/js/main.js
+++ b/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);
+ }
+ });
+ }
});
\ No newline at end of file
diff --git a/templates/base.php b/templates/base.php
index fc88308..21cb572 100644
--- a/templates/base.php
+++ b/templates/base.php
@@ -43,6 +43,9 @@ if (!defined('WEB_ROOT')) {
+
+
+
@@ -74,17 +77,23 @@ if (!defined('WEB_ROOT')) {
O nás
-
+
-