Mamutovo/fedi_start
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 6 Wiki Activity

feat: light/dark mode, cyan accent ve světlém, header pole v scraperu, vizuální úpravy postů

Browse Source
This commit is contained in:
Zdenek Kreml
2026-06-09 09:55:18 +02:00
parent 6a76c377fa
commit 1c61a8736f
6 changed files with 116 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
accounts.html
+26 -2
View File
@@ -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
// ────────────────────────────────
apps.html
+22
View File
@@ -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');
basics.html
+21
View File
@@ -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>
deni.html
+26 -3
View File
@@ -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';
mastodon_cz_accounts.py
+1
View File
@@ -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),
start.html
+20
View File
@@ -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(() => {