From 1c61a8736ff2fb9a8471caff8173290b4d14fdee Mon Sep 17 00:00:00 2001
From: Archos <archos@arch-linux.cz>
Date: Tue, 9 Jun 2026 09:55:18 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20light/dark=20mode,=20cyan=20accent=20ve?=
 =?UTF-8?q?=20sv=C4=9Btl=C3=A9m,=20header=20pole=20v=20scraperu,=20vizu?=
 =?UTF-8?q?=C3=A1ln=C3=AD=20=C3=BApravy=20post=C5=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 accounts.html           | 28 ++++++++++++++++++++++++++--
 apps.html               | 22 ++++++++++++++++++++++
 basics.html             | 21 +++++++++++++++++++++
 deni.html               | 29 ++++++++++++++++++++++++++---
 mastodon_cz_accounts.py |  1 +
 start.html              | 20 ++++++++++++++++++++
 6 files changed, 116 insertions(+), 5 deletions(-)

diff --git a/accounts.html b/accounts.html
index 45c8096..1d5c52e 100644
--- a/accounts.html
+++ b/accounts.html
@@ -4,6 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CZ účty na Mastodonu – Mamutovo</title>
+<script>if(localStorage.getItem('theme')==='light')document.documentElement.classList.add('light');</script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');
 
@@ -20,7 +21,22 @@
   --muted2: #555;
   --border: #282828;
   --radius: 10px;
+  --nav-bg: rgba(13,13,13,0.9);
 }
+html.light {
+  --bg: #ffffff;
+  --surface: #f8f8f8;
+  --surface2: #f0f0f0;
+  --surface3: #e8e8e8;
+  --border: #e0e0e0;
+  --text: #1a1a1a;
+  --muted: #666666;
+  --muted2: #999999;
+  --accent: #06b6d4;
+  --nav-bg: rgba(245,245,245,0.9);
+}
+.theme-toggle { background: none; border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; line-height: 1; flex-shrink: 0; color: var(--text); transition: border-color .15s; }
+.theme-toggle:hover { border-color: var(--accent); }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -38,7 +54,7 @@ nav {
   justify-content: space-between;
   padding: 1rem 2rem;
   border-bottom: 1px solid var(--border);
-  background: rgba(13,13,13,0.9);
+  background: var(--nav-bg);
   backdrop-filter: blur(10px);
   position: sticky;
   top: 0;
@@ -571,7 +587,7 @@ select:focus { border-color: var(--accent); }
 }
 
 .site-footer-inner a:hover { color: var(--accent); }
-.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center} .modal-overlay.active{display:flex} .modal-card{background:#1e1e2e;border-radius:16px;max-width:420px;width:90%;overflow:hidden;position:relative} .modal-close{position:absolute;top:.75rem;right:.75rem;background:none;border:none;color:#aaa;font-size:1.2rem;cursor:pointer} .modal-header{position:relative;height:120px;background:#2a2a3e} .modal-header-img{width:100%;height:120px;object-fit:cover} .modal-avatar{width:72px;height:72px;border-radius:12px;border:3px solid #1e1e2e;position:absolute;bottom:-36px;left:1.2rem} .modal-body{padding:2.5rem 1.2rem 1.2rem} .modal-name{font-size:1.2rem;font-weight:700;color:#fff} .modal-handle{color:#888;font-size:.85rem;margin-bottom:.5rem} .modal-bio{color:#ccc;font-size:.9rem;margin-bottom:.75rem;line-height:1.5} .modal-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem} .modal-stats{display:flex;gap:1.5rem}
+.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center} .modal-overlay.active{display:flex} .modal-card{background:var(--surface);border-radius:16px;max-width:420px;width:90%;overflow:hidden;position:relative} .modal-close{position:absolute;top:.75rem;right:.75rem;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer} .modal-header{position:relative;height:120px;background:var(--surface2)} .modal-header-img{width:100%;height:120px;object-fit:cover} .modal-avatar{width:72px;height:72px;border-radius:12px;border:3px solid var(--surface);position:absolute;bottom:-36px;left:1.2rem} .modal-body{padding:2.5rem 1.2rem 1.2rem} .modal-name{font-size:1.2rem;font-weight:700;color:var(--text)} .modal-handle{color:var(--muted);font-size:.85rem;margin-bottom:.5rem} .modal-bio{color:var(--muted);font-size:.9rem;margin-bottom:.75rem;line-height:1.5} .modal-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem} .modal-stats{display:flex;gap:1.5rem}
 </style>
 </head>
 <body>
@@ -582,6 +598,7 @@ select:focus { border-color: var(--accent); }
     <a href="start.html">← Průvodce</a>
     <a href="accounts.html" class="active">CZ účty</a>
   </div>
+  <button id="theme-toggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Přepnout téma">🌙</button>
   <span class="nav-updated"><span id="lastUpdated">načítám...</span><span id="refreshCountdown" style="margin-left:0.4rem;color:var(--muted2);font-size:0.65rem;font-family:'Space Mono',monospace;"></span><span id="refreshBadge" style="margin-left:0.5rem;font-size:0.65rem;font-family:'Space Mono',monospace;transition:color 0.3s;"></span></span>
 </nav>
 
@@ -632,6 +649,13 @@ select:focus { border-color: var(--accent); }
 <div class="empty" id="emptyEl">Žádné účty neodpovídají filtru. Zkus jiný výraz.</div>
 
 <script>
+function toggleTheme() {
+  const light = document.documentElement.classList.toggle('light');
+  localStorage.setItem('theme', light ? 'light' : 'dark');
+  document.getElementById('theme-toggle').textContent = light ? '☀️' : '🌙';
+}
+if (localStorage.getItem('theme') === 'light') document.getElementById('theme-toggle').textContent = '☀️';
+
 // ────────────────────────────────
 // DATA – fallback když není JSON
 // ────────────────────────────────
diff --git a/apps.html b/apps.html
index 657bc9f..5013f33 100644
--- a/apps.html
+++ b/apps.html
@@ -4,6 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Aplikace – Mamutovo</title>
+<script>if(localStorage.getItem('theme')==='light')document.documentElement.classList.add('light');</script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');
 
@@ -21,6 +22,19 @@
   --border: #282828;
   --radius: 10px;
 }
+html.light {
+  --bg: #ffffff;
+  --surface: #f8f8f8;
+  --surface2: #f0f0f0;
+  --surface3: #e8e8e8;
+  --border: #e0e0e0;
+  --text: #1a1a1a;
+  --muted: #666666;
+  --muted2: #999999;
+  --accent: #06b6d4;
+}
+.theme-toggle { background: var(--surface); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; line-height: 1; position: fixed; top: 1rem; right: 1rem; z-index: 200; transition: border-color .15s; }
+.theme-toggle:hover { border-color: var(--accent); }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -278,6 +292,7 @@ h1 span { color: var(--accent); }
 </style>
 </head>
 <body>
+<button id="theme-toggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Přepnout téma">🌙</button>
 
 <div class="header">
   <a href="https://fedi.mamutovo.cz" class="badge">🦣 MAMUTOVO · APLIKACE</a>
@@ -485,6 +500,13 @@ h1 span { color: var(--accent); }
 </div>
 
 <script>
+function toggleTheme() {
+  const light = document.documentElement.classList.toggle('light');
+  localStorage.setItem('theme', light ? 'light' : 'dark');
+  document.getElementById('theme-toggle').textContent = light ? '☀️' : '🌙';
+}
+if (localStorage.getItem('theme') === 'light') document.getElementById('theme-toggle').textContent = '☀️';
+
 (function () {
   const filters = document.querySelectorAll('.ftag');
   const cards   = document.querySelectorAll('.card');
diff --git a/basics.html b/basics.html
index 80cd335..36c3b4d 100644
--- a/basics.html
+++ b/basics.html
@@ -4,6 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Základy Mastodonu – Mamutovo</title>
+<script>if(localStorage.getItem('theme')==='light')document.documentElement.classList.add('light');</script>
 <style>
   @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');
 
@@ -18,6 +19,17 @@
     --border: #2e2e2e;
     --radius: 10px;
   }
+  html.light {
+    --bg: #ffffff;
+    --surface: #f8f8f8;
+    --surface2: #f0f0f0;
+    --border: #e0e0e0;
+    --text: #1a1a1a;
+    --muted: #666666;
+    --accent: #06b6d4;
+  }
+  .theme-toggle { background: var(--surface); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; line-height: 1; position: fixed; top: 1rem; right: 1rem; z-index: 200; transition: border-color .15s; }
+  .theme-toggle:hover { border-color: var(--accent); }
 
   * { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -174,6 +186,7 @@
 </style>
 </head>
 <body>
+<button id="theme-toggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Přepnout téma">🌙</button>
 
 <div class="hero">
   <a href="https://fedi.mamutovo.cz" class="badge">🦣 MAMUTOVO · ZÁKLADY</a>
@@ -243,5 +256,13 @@
   <a href="start.html">← Zpět na průvodce</a>
 </div>
 
+<script>
+function toggleTheme() {
+  const light = document.documentElement.classList.toggle('light');
+  localStorage.setItem('theme', light ? 'light' : 'dark');
+  document.getElementById('theme-toggle').textContent = light ? '☀️' : '🌙';
+}
+if (localStorage.getItem('theme') === 'light') document.getElementById('theme-toggle').textContent = '☀️';
+</script>
 </body>
 </html>
diff --git a/deni.html b/deni.html
index e49efbf..03d002a 100644
--- a/deni.html
+++ b/deni.html
@@ -4,6 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Co se děje na Mastodonu | Mamutovo</title>
+<script>if(localStorage.getItem('theme')==='light')document.documentElement.classList.add('light');</script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');
 :root {
@@ -15,12 +16,26 @@
   --muted: #888;
   --accent: #00c896;
   --accent2: #ff6b6b;
+  --nav-bg: rgba(13,13,13,0.95);
 }
+html.light {
+  --bg: #ffffff;
+  --surface: #f8f8f8;
+  --surface2: #f0f0f0;
+  --border: #e0e0e0;
+  --text: #1a1a1a;
+  --muted: #666666;
+  --accent: #06b6d4;
+  --nav-bg: rgba(245,245,245,0.95);
+}
+.theme-toggle { background: none; border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; line-height: 1; flex-shrink: 0; color: var(--text); transition: border-color .15s; }
+.theme-toggle:hover { border-color: var(--accent); }
+html.light .post { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
 * { box-sizing: border-box; margin: 0; padding: 0; }
 body { background: var(--bg); color: var(--text); font-family: 'Syne', sans-serif; min-height: 100vh; }
 
 /* NAV */
-nav { display: flex; align-items: center; justify-content: space-between; padding: .9rem 2rem; border-bottom: 1px solid var(--border); background: rgba(13,13,13,0.95); position: sticky; top: 0; z-index: 100; }
+nav { display: flex; align-items: center; justify-content: space-between; padding: .9rem 2rem; border-bottom: 1px solid var(--border); background: var(--nav-bg); position: sticky; top: 0; z-index: 100; }
 .nav-logo { font-family: 'Space Mono', monospace; font-size: .85rem; color: var(--accent); text-decoration: none; font-weight: 700; }
 .nav-links { display: flex; gap: 1.5rem; }
 .nav-links a { font-family: 'Space Mono', monospace; font-size: .75rem; color: var(--muted); text-decoration: none; transition: color .15s; }
@@ -69,8 +84,8 @@ nav { display: flex; align-items: center; justify-content: space-between; paddin
 
 /* FEED */
 .feed-wrap { max-width: 900px; margin: 0 auto; padding: 0 1.5rem 4rem; }
-.feed { display: flex; flex-direction: column; }
-.post { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border); cursor: default; transition: background .1s; }
+.feed { display: flex; flex-direction: column; gap: .75rem; }
+.post { display: flex; gap: .75rem; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: default; transition: background .1s; }
 .post:hover { background: rgba(255,255,255,.02); }
 .post-avatar { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; object-fit: cover; }
 .post-avatar-fallback { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--text); }
@@ -103,6 +118,7 @@ nav { display: flex; align-items: center; justify-content: space-between; paddin
     <a href="start.html">Průvodce</a>
     <a href="accounts.html">CZ účty</a>
   </div>
+  <button id="theme-toggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Přepnout téma">🌙</button>
 </nav>
 
 <div class="hero">
@@ -156,6 +172,13 @@ nav { display: flex; align-items: center; justify-content: space-between; paddin
 </div>
 
 <script>
+function toggleTheme() {
+  const light = document.documentElement.classList.toggle('light');
+  localStorage.setItem('theme', light ? 'light' : 'dark');
+  document.getElementById('theme-toggle').textContent = light ? '☀️' : '🌙';
+}
+if (localStorage.getItem('theme') === 'light') document.getElementById('theme-toggle').textContent = '☀️';
+
 let allPosts = [];
 let currentFilter = 'all';
 let currentScope = 'local';
diff --git a/mastodon_cz_accounts.py b/mastodon_cz_accounts.py
index b7f96e4..8b56f1c 100644
--- a/mastodon_cz_accounts.py
+++ b/mastodon_cz_accounts.py
@@ -272,6 +272,7 @@ def _to_output(acc):
         "handle":      handle,
         "bio":         bio[:220],
         "avatar":      acc.get("avatar", ""),
+        "header":      acc.get("header_static", "") if "missing" not in acc.get("header_static", "") else "",
         "followers":   acc.get("followers_count", 0),
         "statuses":    acc.get("statuses_count",  0),
         "score":       score(acc),
diff --git a/start.html b/start.html
index 7e2e16a..2358bd3 100644
--- a/start.html
+++ b/start.html
@@ -4,6 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Začni na Mastodonu – Mamutovo</title>
+<script>if(localStorage.getItem('theme')==='light')document.documentElement.classList.add('light');</script>
 <style>
   @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');
 
@@ -18,6 +19,17 @@
     --border: #2e2e2e;
     --radius: 10px;
   }
+  html.light {
+    --bg: #ffffff;
+    --surface: #f8f8f8;
+    --surface2: #f0f0f0;
+    --border: #e0e0e0;
+    --text: #1a1a1a;
+    --muted: #666666;
+    --accent: #06b6d4;
+  }
+  .theme-toggle { background: var(--surface); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1rem; line-height: 1; position: fixed; top: 1rem; right: 1rem; z-index: 200; transition: border-color .15s; }
+  .theme-toggle:hover { border-color: var(--accent); }
 
   * { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -382,6 +394,7 @@
 </style>
 </head>
 <body>
+<button id="theme-toggle" class="theme-toggle" onclick="toggleTheme()" aria-label="Přepnout téma">🌙</button>
 
 <div class="hero">
   <a href="https://fedi.mamutovo.cz" class="badge">🦣 MAMUTOVO · PRŮVODCE</a>
@@ -484,6 +497,13 @@ Rád/a poznám nové lidi 🙂 #Představení #novacek #cesky
 <div class="copy-toast" id="toast">Zkopírováno! Vlož do pole pro post ✓</div>
 
 <script>
+  function toggleTheme() {
+    const light = document.documentElement.classList.toggle('light');
+    localStorage.setItem('theme', light ? 'light' : 'dark');
+    document.getElementById('theme-toggle').textContent = light ? '☀️' : '🌙';
+  }
+  if (localStorage.getItem('theme') === 'light') document.getElementById('theme-toggle').textContent = '☀️';
+
   function copyPost(el) {
     const text = el.innerText.trim();
     navigator.clipboard.writeText(text).then(() => {