1715 lines
112 KiB
HTML
1715 lines
112 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="hu">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Telepíthető alkalmazások — 45+ nyílt forráskódú app otthoni szerverre | Felhom.eu</title>
|
||
<meta name="description" content="Nextcloud, Immich, Jellyfin, Vaultwarden és 45+ további nyílt forráskódú alkalmazás otthoni szerveredre. Google Drive, iCloud Photos és Spotify alternatívák.">
|
||
|
||
<meta name="keywords" content="Nextcloud, Immich, Jellyfin, Plex, Sonarr, Radarr, Vaultwarden, nyílt forráskódú alkalmazások, self-hosted apps, otthoni szerver alkalmazások, Google Photos alternatíva, Dropbox alternatíva">
|
||
<meta name="robots" content="index, follow">
|
||
<link rel="canonical" href="https://felhom.eu/alkalmazasok">
|
||
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://felhom.eu/alkalmazasok">
|
||
<meta property="og:title" content="45+ nyílt forráskódú alkalmazás otthoni szerverre">
|
||
<meta property="og:description" content="Nextcloud, Immich, Jellyfin, Vaultwarden és még sok más. Fájlkezelés, fotók, média, dokumentumok — mind a saját szerveredről.">
|
||
<meta property="og:image" content="https://felhom.eu/assets/og-image.png">
|
||
<meta property="og:locale" content="hu_HU">
|
||
<meta property="og:site_name" content="Felhom.eu">
|
||
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="45+ nyílt forráskódú alkalmazás otthoni szerverre">
|
||
<meta name="twitter:description" content="Nextcloud, Immich, Jellyfin és még sok más — a te szerveredről.">
|
||
<meta name="twitter:image" content="https://felhom.eu/assets/og-image.png">
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "ItemList",
|
||
"name": "Felhom.eu — Telepíthető alkalmazások",
|
||
"description": "Nyílt forráskódú, önhostolt alkalmazások otthoni szerverre",
|
||
"numberOfItems": 45,
|
||
"itemListElement": [
|
||
{"@type": "ListItem", "position": 1, "name": "Nextcloud", "description": "Fájlkezelés és irodai csomag"},
|
||
{"@type": "ListItem", "position": 2, "name": "Immich", "description": "Fotó és videó kezelés (Google Photos alternatíva)"},
|
||
{"@type": "ListItem", "position": 3, "name": "Jellyfin", "description": "Médialejátszó és szerver"},
|
||
{"@type": "ListItem", "position": 4, "name": "Vaultwarden", "description": "Jelszókezelő (Bitwarden kompatibilis)"},
|
||
{"@type": "ListItem", "position": 5, "name": "Paperless-ngx", "description": "Dokumentumkezelő rendszer"}
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<link rel="icon" type="image/png" href="/assets/logo.png">
|
||
<script defer src="https://stats.felhom.eu/script.js" data-website-id="d419db57-5e1c-48df-bdb3-c29f25fb1661"></script>
|
||
<style>
|
||
:root {
|
||
--bg-primary: #0d1117;
|
||
--bg-secondary: #161b22;
|
||
--bg-card: #1c2128;
|
||
--text-primary: #e6edf3;
|
||
--text-secondary: #8b949e;
|
||
--text-muted: #6e7681;
|
||
--accent-blue: #0088cc;
|
||
--accent-light: #00aaff;
|
||
--accent-glow: rgba(0, 136, 204, 0.3);
|
||
--border-color: #30363d;
|
||
--success-green: #238636;
|
||
--warning-orange: #d29922;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
}
|
||
body::before {
|
||
content: '';
|
||
position: fixed;
|
||
top: 0; left: 0;
|
||
width: 100%; height: 100%;
|
||
background-image:
|
||
linear-gradient(rgba(0, 136, 204, 0.03) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(0, 136, 204, 0.03) 1px, transparent 1px);
|
||
background-size: 50px 50px;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
.container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
|
||
nav {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0;
|
||
padding: 20px 0;
|
||
background: rgba(13, 17, 23, 0.9);
|
||
backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--border-color);
|
||
z-index: 200;
|
||
}
|
||
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
||
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
|
||
.logo img { height: 40px; width: auto; }
|
||
.logo-text { font-size: 1.5rem; font-weight: 700; color: var(--accent-light); letter-spacing: -0.02em; }
|
||
.nav-links { display: flex; gap: 32px; list-style: none; }
|
||
.nav-links a { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.2s ease; }
|
||
.nav-links a:hover, .nav-links a.active { color: var(--accent-light); }
|
||
.page-header { padding: 140px 0 60px; text-align: center; }
|
||
.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
|
||
.page-header h1 span { background: linear-gradient(135deg, var(--accent-light), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
||
.page-header p { font-size: 1.1rem; color: var(--text-secondary); max-width: 700px; margin: 0 auto 32px; }
|
||
.disclaimer-banner {
|
||
background: linear-gradient(135deg, rgba(0, 136, 204, 0.1), rgba(0, 136, 204, 0.05));
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
padding: 24px 32px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.disclaimer-banner h3 { font-size: 1rem; color: var(--accent-light); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
|
||
.disclaimer-banner ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
|
||
.disclaimer-banner li { color: var(--text-secondary); font-size: 0.9rem; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
|
||
.disclaimer-banner li::before { content: '✓'; color: var(--success-green); font-weight: bold; flex-shrink: 0; margin-top: 1px; }
|
||
.disclaimer-banner li strong { color: var(--text-primary); }
|
||
.disclaimer-banner a { color: var(--accent-light); }
|
||
.category-section { margin-bottom: 64px; }
|
||
.category-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
|
||
.category-icon { font-size: 1.8rem; }
|
||
.category-header h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); }
|
||
.category-header .app-count { background: var(--bg-card); color: var(--text-secondary); padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; }
|
||
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
|
||
.app-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.app-card:hover { border-color: var(--accent-blue); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
|
||
.app-card-header { display: flex; align-items: center; gap: 16px; padding: 20px; border-bottom: 1px solid var(--border-color); }
|
||
.app-logo { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; background: var(--bg-secondary); padding: 6px; flex-shrink: 0; }
|
||
.app-title-area h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
|
||
.app-title-area .app-tagline { font-size: 0.8rem; color: var(--text-muted); }
|
||
.app-card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
|
||
.app-description { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin-bottom: 16px; flex-grow: 1; }
|
||
.app-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
|
||
.app-feature { background: rgba(0, 136, 204, 0.1); color: var(--accent-light); padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; }
|
||
.app-screenshot { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; }
|
||
.app-screenshot:hover { opacity: 0.9; transform: scale(1.02); }
|
||
|
||
/* Lightbox / Gallery styles */
|
||
.lightbox-overlay {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0, 0, 0, 0.95);
|
||
z-index: 1000;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding: 20px;
|
||
}
|
||
.lightbox-overlay.active { display: flex; }
|
||
.lightbox-close {
|
||
position: absolute;
|
||
top: 20px; right: 24px;
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-secondary);
|
||
font-size: 2rem;
|
||
cursor: pointer;
|
||
padding: 8px;
|
||
line-height: 1;
|
||
transition: color 0.2s ease;
|
||
z-index: 1002;
|
||
}
|
||
.lightbox-close:hover { color: var(--text-primary); }
|
||
.lightbox-content {
|
||
position: relative;
|
||
max-width: 90vw;
|
||
max-height: 80vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.lightbox-image {
|
||
max-width: 100%;
|
||
max-height: 80vh;
|
||
object-fit: contain;
|
||
border-radius: 8px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||
}
|
||
.lightbox-nav {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-color);
|
||
color: var(--text-primary);
|
||
font-size: 1.5rem;
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transition: all 0.2s ease;
|
||
z-index: 1001;
|
||
}
|
||
.lightbox-nav:hover { background: var(--accent-blue); border-color: var(--accent-blue); }
|
||
.lightbox-nav:disabled { opacity: 0.3; cursor: not-allowed; }
|
||
.lightbox-nav:disabled:hover { background: var(--bg-card); border-color: var(--border-color); }
|
||
.lightbox-prev { left: -60px; }
|
||
.lightbox-next { right: -60px; }
|
||
.lightbox-counter {
|
||
margin-top: 16px;
|
||
color: var(--text-secondary);
|
||
font-size: 0.9rem;
|
||
text-align: center;
|
||
}
|
||
.lightbox-dots {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
justify-content: center;
|
||
}
|
||
.lightbox-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: var(--border-color);
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.lightbox-dot:hover { background: var(--text-muted); }
|
||
.lightbox-dot.active { background: var(--accent-light); }
|
||
|
||
/* Mobile lightbox adjustments */
|
||
@media (max-width: 768px) {
|
||
.lightbox-nav {
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 1.2rem;
|
||
}
|
||
.lightbox-prev { left: 10px; }
|
||
.lightbox-next { right: 10px; }
|
||
.lightbox-content {
|
||
max-width: 95vw;
|
||
}
|
||
}
|
||
|
||
.app-card-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 20px;
|
||
border-top: 1px solid var(--border-color);
|
||
background: var(--bg-secondary);
|
||
}
|
||
.github-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
transition: color 0.2s ease;
|
||
}
|
||
.github-link:hover { color: var(--accent-light); }
|
||
.github-link img { width: 18px; height: 18px; opacity: 0.7; }
|
||
.open-source-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: var(--success-green);
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
}
|
||
.open-source-badge img { width: 14px; height: 14px; }
|
||
.stats-section {
|
||
padding: 60px 0;
|
||
background: var(--bg-secondary);
|
||
border-top: 1px solid var(--border-color);
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 32px;
|
||
text-align: center;
|
||
}
|
||
.stat-item h3 {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, var(--accent-light), var(--accent-blue));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 8px;
|
||
}
|
||
.stat-item p { color: var(--text-secondary); font-size: 0.95rem; }
|
||
.cta-section { padding: 80px 0; text-align: center; }
|
||
.cta-section h2 { font-size: 2rem; margin-bottom: 16px; }
|
||
.cta-section p { color: var(--text-secondary); max-width: 600px; margin: 0 auto 32px; }
|
||
.cta-button {
|
||
display: inline-block;
|
||
padding: 14px 32px;
|
||
background: linear-gradient(135deg, var(--accent-blue), var(--accent-light));
|
||
color: white;
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
border-radius: 8px;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-glow); }
|
||
footer {
|
||
padding: 40px 0;
|
||
border-top: 1px solid var(--border-color);
|
||
text-align: center;
|
||
color: var(--text-muted);
|
||
font-size: 0.9rem;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.page-header { padding: 120px 0 40px; }
|
||
.disclaimer-banner { padding: 20px; }
|
||
.app-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* --- Hamburger Button --- */
|
||
.hamburger {
|
||
display: none;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 8px;
|
||
z-index: 200;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
.hamburger-box {
|
||
width: 28px;
|
||
height: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.hamburger-line {
|
||
display: block;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: var(--text-primary);
|
||
border-radius: 2px;
|
||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||
transform-origin: center;
|
||
}
|
||
|
||
/* Hamburger → X animation */
|
||
.hamburger.is-active .hamburger-line:nth-child(1) {
|
||
transform: translateY(9px) rotate(45deg);
|
||
}
|
||
.hamburger.is-active .hamburger-line:nth-child(2) {
|
||
opacity: 0;
|
||
}
|
||
.hamburger.is-active .hamburger-line:nth-child(3) {
|
||
transform: translateY(-9px) rotate(-45deg);
|
||
}
|
||
|
||
/* --- Mobile Menu Overlay --- */
|
||
.mobile-overlay {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 140;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.mobile-overlay.is-visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* --- Mobile Nav Styles --- */
|
||
@media (max-width: 900px) {
|
||
.hamburger {
|
||
display: block;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: fixed;
|
||
top: 0;
|
||
right: -280px;
|
||
width: 280px;
|
||
height: 100vh;
|
||
height: 100dvh;
|
||
background: var(--bg-secondary);
|
||
border-left: 1px solid var(--border-color);
|
||
padding: 80px 32px 32px;
|
||
gap: 0;
|
||
z-index: 150;
|
||
transition: right 0.3s ease;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.nav-links.is-open {
|
||
right: 0;
|
||
}
|
||
|
||
.nav-links li {
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.nav-links a {
|
||
display: block;
|
||
padding: 16px 0;
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.mobile-overlay {
|
||
display: block;
|
||
pointer-events: none;
|
||
}
|
||
.mobile-overlay.is-visible {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* Prevent body scroll when menu is open */
|
||
body.menu-open {
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav>
|
||
<div class="container">
|
||
<a href="/" class="logo">
|
||
<img src="/assets/logo.png" alt="Felhom logo">
|
||
<span class="logo-text">felhom.eu</span>
|
||
</a>
|
||
<ul class="nav-links">
|
||
<li><a href="/#szolgaltatasok">Szolgáltatások</a></li>
|
||
<li><a href="/alkalmazasok" class="active">Alkalmazások</a></li>
|
||
<li><a href="/technologiak">Technológiák</a></li>
|
||
<li><a href="/biztonsagimentes">Biztonsági mentés</a></li>
|
||
<li><a href="/gyik">GYIK</a></li>
|
||
<li><a href="/kapcsolat">Kapcsolat</a></li>
|
||
</ul>
|
||
<button class="hamburger" id="hamburger" aria-label="Menü megnyitása" aria-expanded="false">
|
||
<span class="hamburger-box">
|
||
<span class="hamburger-line"></span>
|
||
<span class="hamburger-line"></span>
|
||
<span class="hamburger-line"></span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
<div class="mobile-overlay" id="mobileOverlay"></div>
|
||
<main>
|
||
<section class="page-header">
|
||
<div class="container">
|
||
<h1>Telepíthető <span>Alkalmazások</span></h1>
|
||
<p>Válassz a nyílt forráskódú alkalmazások széles kínálatából. Mindegyik ingyenes, közösség által fejlesztett szoftver, amit a saját szervereden futtathatsz.</p>
|
||
<div class="disclaimer-banner">
|
||
<h3>ℹ️ Fontos tudnivalók</h3>
|
||
<ul>
|
||
<li>Az alkalmazások <strong>nyílt forráskódúak</strong> – bárki ellenőrizheti a működésüket, nincs rejtett funkció</li>
|
||
<li>Szolgáltatásunk az alkalmazások <strong>telepítésére</strong> terjed ki, nem azok fejlesztésére vagy értékesítésére</li>
|
||
<li>Az alkalmazások működéséért és frissítéseiért az eredeti fejlesztők felelősek</li>
|
||
<li>Egyedi igények esetén további alkalmazások is telepíthetők – <a href="/#kapcsolat">kérdezz bátran!</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="apps-section">
|
||
<div class="container">
|
||
|
||
<!-- ==================== -->
|
||
<!-- 1. FÁJLKEZELÉS & IRODAI -->
|
||
<!-- ==================== -->
|
||
<div class="category-section" id="fajlkezeles">
|
||
<div class="category-header">
|
||
<span class="category-icon">📁</span>
|
||
<h2>Fájlkezelés & Irodai</h2>
|
||
<span class="app-count">7 alkalmazás</span>
|
||
</div>
|
||
<div class="app-grid">
|
||
<!-- Nextcloud -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/nextcloud-logo.svg" alt="Nextcloud" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Nextcloud</h3><span class="app-tagline">A saját Google Drive-od</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Teljes értékű felhőszolgáltatás a saját szervereden. Fájlok szinkronizálása, naptár, kontaktok, dokumentumszerkesztés, és rengeteg bővítmény.</p>
|
||
<div class="app-features"><span class="app-feature">Fájl szinkron</span><span class="app-feature">Naptár</span><span class="app-feature">Dokumentumok</span><span class="app-feature">Mobil app</span></div>
|
||
<img src="/assets/nextcloud-screenshot-1.png" alt="Nextcloud screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/nextcloud/server" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- FileBrowser -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/filebrowser-logo.svg" alt="FileBrowser" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>FileBrowser</h3><span class="app-tagline">Egyszerű webes fájlkezelő</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Könnyű és gyors webes fájlkezelő. Böngészd, töltsd fel és oszd meg a fájljaidat bárhonnan, modern felületen keresztül.</p>
|
||
<div class="app-features"><span class="app-feature">Drag & drop</span><span class="app-feature">Megosztás</span><span class="app-feature">Előnézet</span><span class="app-feature">Keresés</span></div>
|
||
<img src="/assets/filebrowser-screenshot-1.png" alt="FileBrowser screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/filebrowser/filebrowser" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Gokapi -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/gokapi-logo.svg" alt="Gokapi" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Gokapi</h3><span class="app-tagline">Ideiglenes fájlmegosztás</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Könnyűsúlyú fájlmegosztó szerver lejárati idővel és letöltési limittel. Tökéletes nagy fájlok gyors és biztonságos megosztására.</p>
|
||
<div class="app-features"><span class="app-feature">Lejárati idő</span><span class="app-feature">Letöltési limit</span><span class="app-feature">Jelszóvédelem</span></div>
|
||
<img src="/assets/gokapi-screenshot-1.png" alt="Gokapi screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/Forceu/Gokapi" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Zipline -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/zipline-logo.svg" alt="Zipline" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Zipline</h3><span class="app-tagline">ShareX/Flameshot szerver</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Modern, funkciógazdag fájl- és képmegosztó. Tökéletes screenshot megosztásra, URL rövidítésre és szövegtárolásra.</p>
|
||
<div class="app-features"><span class="app-feature">Screenshot</span><span class="app-feature">URL rövidítő</span><span class="app-feature">Galéria</span><span class="app-feature">API</span></div>
|
||
<img src="/assets/zipline-screenshot-1.png" alt="Zipline screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/diced/zipline" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- OnlyOffice -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/onlyoffice-logo.svg" alt="OnlyOffice" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>OnlyOffice</h3><span class="app-tagline">Irodai csomag böngészőben</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Teljes értékű irodai programcsomag a böngészőben. Dokumentumok, táblázatok és prezentációk szerkesztése – kiváló Microsoft Office kompatibilitással.</p>
|
||
<div class="app-features"><span class="app-feature">Dokumentumok</span><span class="app-feature">Táblázatok</span><span class="app-feature">Prezentációk</span><span class="app-feature">Együttműködés</span></div>
|
||
<img src="/assets/onlyoffice-screenshot-1.png" alt="OnlyOffice screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/ONLYOFFICE/DocumentServer" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- BentoPDF -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/bentopdf-logo.svg" alt="BentoPDF" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>BentoPDF</h3><span class="app-tagline">PDF eszköztár (adatvédelem)</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Adatvédelem-központú PDF eszköztár, 70+ funkcióval. Összefűzés, szétválasztás, konvertálás, tömörítés, OCR, titkosítás, aláírás – minden a böngészőben, szerver nélkül.</p>
|
||
<div class="app-features"><span class="app-feature">70+ eszköz</span><span class="app-feature">Kliens-oldali</span><span class="app-feature">OCR</span><span class="app-feature">Konvertálás</span></div>
|
||
<img src="/assets/bentopdf-screenshot-1.png" alt="BentoPDF screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/alam00000/bentopdf" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Papra -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/papra-logo.svg" alt="Papra" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Papra</h3><span class="app-tagline">Minimalista dokumentumtár</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Letisztult, modern dokumentum archiváló. Automatikus címkézés, email import, OCR szövegfelismerés – a digitális irattár egyszerűen, szépen.</p>
|
||
<div class="app-features"><span class="app-feature">Auto címkék</span><span class="app-feature">Email import</span><span class="app-feature">OCR</span><span class="app-feature">Modern UI</span></div>
|
||
<img src="/assets/papra-screenshot-1.png" alt="Papra screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/papra-hq/papra" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== -->
|
||
<!-- 2. MÉDIA & SZÓRAKOZÁS -->
|
||
<!-- ==================== -->
|
||
<div class="category-section" id="media">
|
||
<div class="category-header">
|
||
<span class="category-icon">📺</span>
|
||
<h2>Média & Szórakozás</h2>
|
||
<span class="app-count">13 alkalmazás</span>
|
||
</div>
|
||
<div class="app-grid">
|
||
<!-- Immich -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/immich-logo.svg" alt="Immich" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Immich</h3><span class="app-tagline">Google Photos alternatíva</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Gyors és modern fotó/videó mentési megoldás. Automatikus feltöltés telefonról, arc- és tárgyfelismerés, megosztás és emlékek.</p>
|
||
<div class="app-features"><span class="app-feature">Auto backup</span><span class="app-feature">Arcfelismerés</span><span class="app-feature">Térkép</span><span class="app-feature">Mobil app</span></div>
|
||
<img src="/assets/immich-screenshot-1.png" alt="Immich screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/immich-app/immich" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Jellyfin -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/jellyfin-logo.svg" alt="Jellyfin" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Jellyfin</h3><span class="app-tagline">Média szerver (Netflix)</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Ingyenes és nyílt forráskódú média szerver. Streamelj filmeket, sorozatokat és zenét bárhonnan, bármilyen eszközre.</p>
|
||
<div class="app-features"><span class="app-feature">Streaming</span><span class="app-feature">Transzkódolás</span><span class="app-feature">Mobil app</span><span class="app-feature">TV app</span></div>
|
||
<img src="/assets/jellyfin-screenshot-1.png" alt="Jellyfin screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/jellyfin/jellyfin" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Plex -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/plex-logo.svg" alt="Plex" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Plex</h3><span class="app-tagline">Média szerver (prémium)</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Népszerű média szerver csiszolt felülettel. Filmek, sorozatok, zene és fotók egy helyen, kiváló alkalmazás támogatással.</p>
|
||
<div class="app-features"><span class="app-feature">Streaming</span><span class="app-feature">Plex Pass</span><span class="app-feature">Intro skip</span><span class="app-feature">Watch Together</span></div>
|
||
<img src="/assets/plex-screenshot-1.png" alt="Plex screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/plexinc" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Weboldal</a>
|
||
<span class="open-source-badge" style="color: var(--warning-orange);"><img src="/assets/checkmark-yellow.svg" alt="">Freemium</span>
|
||
</div>
|
||
</div>
|
||
<!-- Emby -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/emby-logo.svg" alt="Emby" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Emby</h3><span class="app-tagline">Média szerver</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Személyes média szerver élő TV és DVR támogatással. Szervezett könyvtár, távoli elérés és szinkronizálás offline lejátszáshoz.</p>
|
||
<div class="app-features"><span class="app-feature">Streaming</span><span class="app-feature">Élő TV</span><span class="app-feature">DVR</span><span class="app-feature">Szinkron</span></div>
|
||
<img src="/assets/emby-screenshot-1.png" alt="Emby screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/MediaBrowser/Emby" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge" style="color: var(--warning-orange);"><img src="/assets/checkmark-yellow.svg" alt="">Freemium</span>
|
||
</div>
|
||
</div>
|
||
<!-- Navidrome -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/navidrome-logo.svg" alt="Navidrome" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Navidrome</h3><span class="app-tagline">Zene szerver (Spotify)</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Könnyű és modern zeneszerver. Streameld a saját zenegyűjteményedet bárhonnan – Subsonic kompatibilis, rengeteg mobil alkalmazással.</p>
|
||
<div class="app-features"><span class="app-feature">Streaming</span><span class="app-feature">Subsonic API</span><span class="app-feature">Mobil appok</span><span class="app-feature">Lejátszási listák</span></div>
|
||
<img src="/assets/navidrome-screenshot-1.png" alt="Navidrome screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/navidrome/navidrome" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Audiobookshelf -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/audiobookshelf-logo.svg" alt="Audiobookshelf" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Audiobookshelf</h3><span class="app-tagline">Hangoskönyv & podcast</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Hangoskönyv és podcast kezelő szerver. Automatikus metaadat letöltés, folytatás ahol abbahagytad, és dedikált mobil alkalmazások.</p>
|
||
<div class="app-features"><span class="app-feature">Hangoskönyvek</span><span class="app-feature">Podcastok</span><span class="app-feature">Szinkron</span><span class="app-feature">Mobil app</span></div>
|
||
<img src="/assets/audiobookshelf-screenshot-1.png" alt="Audiobookshelf screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/advplyr/audiobookshelf" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Calibre-web -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/calibre-web-logo.svg" alt="Calibre-web" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Calibre-web</h3><span class="app-tagline">E-könyv könyvtár</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Webes felület a Calibre könyvtáradhoz. Böngészd, olvasd és töltsd le az e-könyveidet bárhonnan, Kindle támogatással.</p>
|
||
<div class="app-features"><span class="app-feature">E-könyvek</span><span class="app-feature">Kindle küldés</span><span class="app-feature">OPDS</span><span class="app-feature">Olvasó</span></div>
|
||
<img src="/assets/calibre-web-screenshot-1.png" alt="Calibre-web screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/janeczku/calibre-web" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Komga -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/komga-logo.svg" alt="Komga" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Komga</h3><span class="app-tagline">Képregény & manga szerver</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Képregények, mangák és magazinok kezelése és olvasása. Modern webes olvasó, OPDS támogatás, és népszerű mobil alkalmazások.</p>
|
||
<div class="app-features"><span class="app-feature">Webes olvasó</span><span class="app-feature">OPDS</span><span class="app-feature">Metaadatok</span><span class="app-feature">Tachiyomi</span></div>
|
||
<img src="/assets/komga-screenshot-1.png" alt="Komga screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/gotson/komga" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Sonarr -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/sonarr-logo.svg" alt="Sonarr" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Sonarr</h3><span class="app-tagline">Sorozat menedzser</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Automatikus sorozat letöltő és rendszerező. Kövesd a kedvenc sorozataidat, és az új epizódok automatikusan letöltődnek.</p>
|
||
<div class="app-features"><span class="app-feature">Auto letöltés</span><span class="app-feature">Naptár</span><span class="app-feature">Minőség kezelés</span><span class="app-feature">Integráció</span></div>
|
||
<img src="/assets/sonarr-screenshot-1.png" alt="Sonarr screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/Sonarr/Sonarr" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Radarr -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/radarr-logo.svg" alt="Radarr" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Radarr</h3><span class="app-tagline">Film menedzser</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Automatikus film letöltő és rendszerező. Készíts kívánságlistát, és a filmek automatikusan a könyvtáradba kerülnek.</p>
|
||
<div class="app-features"><span class="app-feature">Kívánságlista</span><span class="app-feature">Auto letöltés</span><span class="app-feature">Minőség kezelés</span><span class="app-feature">Integráció</span></div>
|
||
<img src="/assets/radarr-screenshot-1.png" alt="Radarr screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/Radarr/Radarr" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Seerr -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/seerr-logo.svg" alt="Seerr" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Seerr</h3><span class="app-tagline">Média kérés kezelő</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Filmek és sorozatok igénylése egyszerűen. A család/barátok kérhetnek tartalmakat, amiket automatikusan letölt a rendszer.</p>
|
||
<div class="app-features"><span class="app-feature">Kérés kezelés</span><span class="app-feature">Felhasználók</span><span class="app-feature">Értesítések</span><span class="app-feature">Integráció</span></div>
|
||
<img src="/assets/seerr-screenshot-1.png" alt="Seerr screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/Fallenbagel/jellyseerr" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- RoMM -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/romm-logo.svg" alt="RoMM" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>RoMM</h3><span class="app-tagline">ROM gyűjtemény kezelő</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Gyönyörű webes felület a retro játék ROM gyűjteményed kezeléséhez. Automatikus metaadat és borítókép letöltés, platform rendszerezés és böngészőből való lejátszás.</p>
|
||
<div class="app-features"><span class="app-feature">ROM kezelés</span><span class="app-feature">Metaadatok</span><span class="app-feature">EmulatorJS</span><span class="app-feature">IGDB</span></div>
|
||
<img src="/assets/romm-screenshot-1.png" alt="RoMM screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/rommapp/romm" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Crafty Controller -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/crafty-logo.svg" alt="Crafty Controller" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Crafty Controller</h3><span class="app-tagline">Minecraft szerver kezelő</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Modern webes Minecraft szerver menedzser. Több szerver kezelése egyetlen felületről, automatikus mentések, játékos statisztikák és teljes távoli hozzáférés.</p>
|
||
<div class="app-features"><span class="app-feature">Multi-szerver</span><span class="app-feature">Mentések</span><span class="app-feature">Konzol</span><span class="app-feature">Statisztikák</span></div>
|
||
<img src="/assets/crafty-screenshot-1.png" alt="Crafty Controller screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://gitlab.com/crafty-controller/crafty-4" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== -->
|
||
<!-- 3. OTTHON & ÉLETMÓD -->
|
||
<!-- ==================== -->
|
||
<div class="category-section" id="otthon">
|
||
<div class="category-header">
|
||
<span class="category-icon">🏠</span>
|
||
<h2>Otthon & Életmód</h2>
|
||
<span class="app-count">11 alkalmazás</span>
|
||
</div>
|
||
<div class="app-grid">
|
||
<!-- Home Assistant -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/homeassistant-logo.svg" alt="Home Assistant" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Home Assistant</h3><span class="app-tagline">Okos otthon központ</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">A világ legnépszerűbb nyílt forráskódú okos otthon platformja. Több mint 3000 integráció, helyi vezérlés, automatizációk – felhő nélkül, teljes adatvédelemmel.</p>
|
||
<div class="app-features"><span class="app-feature">3000+ integráció</span><span class="app-feature">Automatizáció</span><span class="app-feature">Helyi vezérlés</span><span class="app-feature">Mobil app</span></div>
|
||
<img src="/assets/homeassistant-screenshot-1.png" alt="Home Assistant screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/home-assistant/core" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- n8n -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/n8n-logo.svg" alt="n8n" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>n8n</h3><span class="app-tagline">Workflow automatizálás</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Vizuális workflow automatizálás Zapier/Make stílusban. Köss össze bármilyen szolgáltatást, készíts automatizációkat – kód nélkül, a saját szervereden.</p>
|
||
<div class="app-features"><span class="app-feature">400+ integráció</span><span class="app-feature">Vizuális szerkesztő</span><span class="app-feature">AI funkciók</span><span class="app-feature">Webhookok</span></div>
|
||
<img src="/assets/n8n-screenshot-1.png" alt="n8n screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/n8n-io/n8n" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Tandoor Recipes -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/tandoor-logo.svg" alt="Tandoor" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Tandoor Recipes</h3><span class="app-tagline">Receptkezelő</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Receptek tárolása, étkezés tervezés és bevásárlólista. Importálj recepteket webről, oszd meg a családdal.</p>
|
||
<div class="app-features"><span class="app-feature">Recept import</span><span class="app-feature">Étlap tervezés</span><span class="app-feature">Bevásárlólista</span><span class="app-feature">Megosztás</span></div>
|
||
<img src="/assets/tandoor-screenshot-1.png" alt="Tandoor screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/TandoorRecipes/recipes" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Plant-it -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/plantit-logo.svg" alt="Plant-it" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Plant-it</h3><span class="app-tagline">Növénynapló</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Tartsd nyilván a növényeidet és gondozásukat. Emlékeztetők öntözésre, trágyázásra, és fotónapló a fejlődésről.</p>
|
||
<div class="app-features"><span class="app-feature">Emlékeztetők</span><span class="app-feature">Fotónapló</span><span class="app-feature">Statisztikák</span><span class="app-feature">Mobil app</span></div>
|
||
<img src="/assets/plantit-screenshot-1.png" alt="Plant-it screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/MDeLuise/plant-it" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Wishlist -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/wishlist-logo.svg" alt="Wishlist" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Wishlist</h3><span class="app-tagline">Családi kívánságlista</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Megosztható kívánságlista karácsonyra, születésnapokra és egyéb alkalmakra. A család lefoglalhatja az ajándékokat, így nincs több dupla ajándék.</p>
|
||
<div class="app-features"><span class="app-feature">Csoportok</span><span class="app-feature">Foglalás</span><span class="app-feature">URL import</span><span class="app-feature">PWA</span></div>
|
||
<img src="/assets/wishlist-screenshot-1.png" alt="Wishlist screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/cmintey/wishlist" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Gramps Web -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/grampsweb-logo.svg" alt="Gramps Web" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Gramps Web</h3><span class="app-tagline">Családfa készítő</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Webes családfa és genealógia platform. Építsd fel a családfádat, adj hozzá fotókat, dokumentumokat – és oszd meg a családdal biztonságosan.</p>
|
||
<div class="app-features"><span class="app-feature">Családfa</span><span class="app-feature">GEDCOM</span><span class="app-feature">Együttműködés</span><span class="app-feature">Szinkron</span></div>
|
||
<img src="/assets/grampsweb-screenshot-1.png" alt="Gramps Web screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/gramps-project/gramps-web" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- wger -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/wger-logo.svg" alt="wger" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>wger</h3><span class="app-tagline">Edzésnapló</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Edzéstervező és napló alkalmazás. Kövesd nyomon az edzéseidet, testsúlyodat és kalória beviteledet egy helyen.</p>
|
||
<div class="app-features"><span class="app-feature">Edzéstervek</span><span class="app-feature">Testsúly követés</span><span class="app-feature">Kalória napló</span><span class="app-feature">API</span></div>
|
||
<img src="/assets/wger-screenshot-1.png" alt="wger screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/wger-project/wger" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Actual Budget -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/actualbudget-logo.svg" alt="Actual Budget" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Actual Budget</h3><span class="app-tagline">Költségvetés tervező</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Helyi-központú személyes pénzügyek kezelése. Költségvetés tervezés, tranzakció követés, és pénzügyi célok.</p>
|
||
<div class="app-features"><span class="app-feature">Költségvetés</span><span class="app-feature">Szinkron</span><span class="app-feature">Bank import</span><span class="app-feature">Riportok</span></div>
|
||
<img src="/assets/actualbudget-screenshot-1.png" alt="Actual Budget screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/actualbudget/actual" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- AdventureLog -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/adventurelog-logo.svg" alt="AdventureLog" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>AdventureLog</h3><span class="app-tagline">Utazási napló</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Dokumentáld az utazásaidat és kalandjaidat. Térképes megjelenítés, fotók, statisztikák a meglátogatott helyekről.</p>
|
||
<div class="app-features"><span class="app-feature">Térkép</span><span class="app-feature">Fotók</span><span class="app-feature">Statisztikák</span><span class="app-feature">Megosztás</span></div>
|
||
<img src="/assets/adventurelog-screenshot-1.png" alt="AdventureLog screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/seanmorley15/AdventureLog" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Wanderer -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/wanderer-logo.svg" alt="Wanderer" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Wanderer</h3><span class="app-tagline">Túra tervező</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Túrák és útvonalak tervezése, GPX fájlok kezelése. Térképes megjelenítés szintvonalakkal, útvonal statisztikák.</p>
|
||
<div class="app-features"><span class="app-feature">GPX import</span><span class="app-feature">Térképek</span><span class="app-feature">Szintadatok</span><span class="app-feature">Útvonalak</span></div>
|
||
<img src="/assets/wanderer-screenshot-1.png" alt="Wanderer screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/Flomp/wanderer" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Cal.com -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/calcom-logo.svg" alt="Cal.com" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Cal.com</h3><span class="app-tagline">Időpontfoglaló</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Nyílt forráskódú Calendly alternatíva. Könnyű időpont egyeztetés ügyfelekkel, naptár integrációk és automatikus emlékeztetők.</p>
|
||
<div class="app-features"><span class="app-feature">Foglalási oldal</span><span class="app-feature">Naptár szinkron</span><span class="app-feature">Csapatok</span><span class="app-feature">Emlékeztetők</span></div>
|
||
<img src="/assets/calcom-screenshot-1.png" alt="Cal.com screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/calcom/cal.com" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== -->
|
||
<!-- 4. PRODUKTIVITÁS & TUDÁSKEZELÉS -->
|
||
<!-- ==================== -->
|
||
<div class="category-section" id="produktivitas">
|
||
<div class="category-header">
|
||
<span class="category-icon">📊</span>
|
||
<h2>Produktivitás & Tudáskezelés</h2>
|
||
<span class="app-count">9 alkalmazás</span>
|
||
</div>
|
||
<div class="app-grid">
|
||
<!-- Vikunja -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/vikunja-logo.svg" alt="Vikunja" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Vikunja</h3><span class="app-tagline">Feladatkezelő (Todoist)</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Nyílt forráskódú Todoist alternatíva. Feladatok, projektek, határidők – Kanban, Gantt és lista nézettel. Emlékeztetők és csapat együttműködés.</p>
|
||
<div class="app-features"><span class="app-feature">Kanban</span><span class="app-feature">Gantt</span><span class="app-feature">Emlékeztetők</span><span class="app-feature">Csapatok</span></div>
|
||
<img src="/assets/vikunja-screenshot-1.png" alt="Vikunja screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/go-vikunja/vikunja" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Kimai -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/kimai-logo.svg" alt="Kimai" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Kimai</h3><span class="app-tagline">Időkövetés</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Professzionális időkövetés szabadúszóknak és csapatoknak. Projektek, ügyfelek, riportok és számlázási export egyetlen rendszerben.</p>
|
||
<div class="app-features"><span class="app-feature">Projektek</span><span class="app-feature">Riportok</span><span class="app-feature">Export</span><span class="app-feature">Számlázás</span></div>
|
||
<img src="/assets/kimai-screenshot-1.png" alt="Kimai screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/kimai/kimai" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Rallly -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/rallly-logo.svg" alt="Rallly" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Rallly</h3><span class="app-tagline">Időpont szavazás (Doodle)</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Találkozók és események időpontjának egyeztetése egyszerűen. Doodle alternatíva – szavazók regisztráció nélkül, időzóna kezeléssel.</p>
|
||
<div class="app-features"><span class="app-feature">Szavazás</span><span class="app-feature">Nincs regisztráció</span><span class="app-feature">Időzónák</span><span class="app-feature">Értesítések</span></div>
|
||
<img src="/assets/rallly-screenshot-1.png" alt="Rallly screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/lukevella/rallly" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Claper -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/claper-logo.svg" alt="Claper" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Claper</h3><span class="app-tagline">Interaktív prezentációk</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Élő szavazások, kérdések és szófelhők prezentációkhoz. Mentimeter/AhaSlides alternatíva – tedd interaktívvá az előadásaidat.</p>
|
||
<div class="app-features"><span class="app-feature">Élő szavazás</span><span class="app-feature">Kérdések</span><span class="app-feature">Szófelhő</span><span class="app-feature">Reakciók</span></div>
|
||
<img src="/assets/claper-screenshot-1.png" alt="Claper screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/ClaperCo/Claper" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Ghost -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/ghost-logo.svg" alt="Ghost" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Ghost</h3><span class="app-tagline">Blog & hírlevél platform</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Modern publikációs platform bloggereknek és tartalomkészítőknek. Gyönyörű témák, beépített hírlevél, és tagság/előfizetés kezelés.</p>
|
||
<div class="app-features"><span class="app-feature">Blog</span><span class="app-feature">Hírlevél</span><span class="app-feature">Tagság</span><span class="app-feature">SEO</span></div>
|
||
<img src="/assets/ghost-screenshot-1.png" alt="Ghost screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/TryGhost/Ghost" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Paperless-ngx -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/paperless-ngx-logo.svg" alt="Paperless-ngx" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Paperless-ngx</h3><span class="app-tagline">Digitális irattár</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Szkenneld be a papír dokumentumaidat és felejtsd el őket. OCR, automatikus kategorizálás, és teljes szöveges keresés.</p>
|
||
<div class="app-features"><span class="app-feature">OCR</span><span class="app-feature">Auto kategória</span><span class="app-feature">Keresés</span><span class="app-feature">Címkék</span></div>
|
||
<img src="/assets/paperless-ngx-screenshot-1.png" alt="Paperless-ngx screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/paperless-ngx/paperless-ngx" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- BookStack -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/bookstack-logo.svg" alt="BookStack" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>BookStack</h3><span class="app-tagline">Könyv-szerű dokumentáció</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Egyszerű, önhostolt wiki platform. Rendezd tudásodat könyvekbe, fejezetekbe és oldalakra – könnyen kereshető formában.</p>
|
||
<div class="app-features"><span class="app-feature">WYSIWYG</span><span class="app-feature">Könyvek</span><span class="app-feature">Keresés</span><span class="app-feature">Jogosultságok</span></div>
|
||
<img src="/assets/bookstack-screenshot-1.png" alt="BookStack screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/BookStackApp/BookStack" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Outline -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/outline-logo.svg" alt="Outline" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Outline</h3><span class="app-tagline">Csapat tudásbázis</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Gyönyörű wiki és tudásbázis csapatok számára. Markdown támogatás, valós idejű együttműködés, és strukturált dokumentáció.</p>
|
||
<div class="app-features"><span class="app-feature">Markdown</span><span class="app-feature">Együttműködés</span><span class="app-feature">Keresés</span><span class="app-feature">Integráció</span></div>
|
||
<img src="/assets/outline-screenshot-1.png" alt="Outline screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/outline/outline" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- PrivateBin -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/privatebin-logo.svg" alt="PrivateBin" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>PrivateBin</h3><span class="app-tagline">Titkosított jegyzet megosztás</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Minimális, titkosított pastebin. A szerver nem látja a tartalmakat – tökéletes érzékeny szövegek biztonságos megosztására.</p>
|
||
<div class="app-features"><span class="app-feature">E2E titkosítás</span><span class="app-feature">Lejárat</span><span class="app-feature">Égés után</span><span class="app-feature">Jelszóvédelem</span></div>
|
||
<img src="/assets/privatebin-screenshot-1.png" alt="PrivateBin screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/PrivateBin/PrivateBin" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== -->
|
||
<!-- 5. RENDSZER & FEJLESZTÉS -->
|
||
<!-- ==================== -->
|
||
<div class="category-section" id="rendszer">
|
||
<div class="category-header">
|
||
<span class="category-icon">🔧</span>
|
||
<h2>Rendszer & Fejlesztés</h2>
|
||
<span class="app-count">9 alkalmazás</span>
|
||
</div>
|
||
<div class="app-grid">
|
||
<!-- Vaultwarden -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/vaultwarden-logo.svg" alt="Vaultwarden" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Vaultwarden</h3><span class="app-tagline">Jelszókezelő (Bitwarden)</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Könnyű Bitwarden szerver implementáció. Tárold biztonságosan a jelszavaidat, és szinkronizáld minden eszközödön.</p>
|
||
<div class="app-features"><span class="app-feature">E2E titkosítás</span><span class="app-feature">Mobil app</span><span class="app-feature">Böngésző kieg.</span><span class="app-feature">2FA</span></div>
|
||
<img src="/assets/vaultwarden-screenshot-1.png" alt="Vaultwarden screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/dani-garcia/vaultwarden" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Homepage -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/homepage-logo.svg" alt="Homepage" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Homepage</h3><span class="app-tagline">Személyes kezdőlap</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Gyönyörű és funkciókban gazdag kezdőlap a szerveredhez. Szolgáltatás státuszok, widgetek, könyvjelzők egy helyen.</p>
|
||
<div class="app-features"><span class="app-feature">Widgetek</span><span class="app-feature">Integrációk</span><span class="app-feature">Témák</span><span class="app-feature">Státusz</span></div>
|
||
<img src="/assets/homepage-screenshot-1.png" alt="Homepage screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/gethomepage/homepage" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Glance -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/glance-logo.svg" alt="Glance" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Glance</h3><span class="app-tagline">Információs dashboard</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Minimális, gyors dashboard mindenféle információval. RSS, időjárás, könyvjelzők, Reddit, YouTube és sok más egy oldalon.</p>
|
||
<div class="app-features"><span class="app-feature">RSS</span><span class="app-feature">Időjárás</span><span class="app-feature">YouTube</span><span class="app-feature">Gyors</span></div>
|
||
<img src="/assets/glance-screenshot-1.png" alt="Glance screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/glanceapp/glance" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Uptime Kuma -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/uptimekuma-logo.svg" alt="Uptime Kuma" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Uptime Kuma</h3><span class="app-tagline">Szolgáltatás monitoring</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Elegáns szolgáltatás monitorozó. Figyeld a weboldalaidat, API-kat, és kapj értesítést ha valami nem működik.</p>
|
||
<div class="app-features"><span class="app-feature">HTTP/TCP/DNS</span><span class="app-feature">Értesítések</span><span class="app-feature">Státusz oldal</span><span class="app-feature">Grafikonok</span></div>
|
||
<img src="/assets/uptimekuma-screenshot-1.png" alt="Uptime Kuma screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/louislam/uptime-kuma" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Grafana -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/grafana-logo.svg" alt="Grafana" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Grafana</h3><span class="app-tagline">Adatvizualizáció</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Professzionális monitoring és vizualizációs platform. Gyönyörű dashboardok, riasztások és adatelemzés – bármilyen adatforrásból.</p>
|
||
<div class="app-features"><span class="app-feature">Dashboardok</span><span class="app-feature">Riasztások</span><span class="app-feature">Adatforrások</span><span class="app-feature">Lekérdezések</span></div>
|
||
<img src="/assets/grafana-screenshot-1.png" alt="Grafana screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/grafana/grafana" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Termix -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/termix-logo.svg" alt="Termix" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Termix</h3><span class="app-tagline">Szerver menedzser (SSH)</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Webes SSH terminál és szerver kezelő platform. Csatlakozz szervereidhez bárhonnan böngészőből, kezelj SSH tunneleket, szerkessz fájlokat távolról.</p>
|
||
<div class="app-features"><span class="app-feature">SSH terminál</span><span class="app-feature">Tunneling</span><span class="app-feature">Fájlkezelő</span><span class="app-feature">2FA</span></div>
|
||
<img src="/assets/termix-screenshot-1.png" alt="Termix screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/Termix-SSH/Termix" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Gitea -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/gitea-logo.svg" alt="Gitea" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Gitea</h3><span class="app-tagline">Git szerver (GitHub)</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Könnyű, gyors Git hosting szolgáltatás. A saját GitHub/GitLab-od, issue tracking, CI/CD, és package registry.</p>
|
||
<div class="app-features"><span class="app-feature">Git hosting</span><span class="app-feature">Issues</span><span class="app-feature">CI/CD</span><span class="app-feature">Wiki</span></div>
|
||
<img src="/assets/gitea-screenshot-1.png" alt="Gitea screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/go-gitea/gitea" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- Code-Server -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/code-server-logo.svg" alt="Code-Server" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>Code-Server</h3><span class="app-tagline">VS Code böngészőben</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Visual Studio Code a böngészőben. Fejlessz bárhonnan, bármilyen eszközről – ugyanazzal az ismerős felülettel.</p>
|
||
<div class="app-features"><span class="app-feature">VS Code</span><span class="app-feature">Bővítmények</span><span class="app-feature">Terminál</span><span class="app-feature">Git</span></div>
|
||
<img src="/assets/code-server-screenshot-1.png" alt="Code-Server screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/coder/code-server" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
<!-- OpenGist -->
|
||
<div class="app-card">
|
||
<div class="app-card-header">
|
||
<img src="/assets/opengist-logo.svg" alt="OpenGist" class="app-logo" onerror="this.onerror=null; this.src=this.src.replace('.svg','.png')">
|
||
<div class="app-title-area"><h3>OpenGist</h3><span class="app-tagline">Kód snippetek (Gist)</span></div>
|
||
</div>
|
||
<div class="app-card-body">
|
||
<p class="app-description">Saját GitHub Gist szerver. Kód snippetek megosztása, szintaxis kiemelés, és verziókezelés Git alapokon.</p>
|
||
<div class="app-features"><span class="app-feature">Snippetek</span><span class="app-feature">Szintaxis</span><span class="app-feature">Git</span><span class="app-feature">Embed</span></div>
|
||
<img src="/assets/opengist-screenshot-1.png" alt="OpenGist screenshot" class="app-screenshot">
|
||
</div>
|
||
<div class="app-card-footer">
|
||
<a href="https://github.com/thomiceli/opengist" target="_blank" rel="noopener" class="github-link"><img src="/assets/github.svg" alt="GitHub">Forráskód</a>
|
||
<span class="open-source-badge"><img src="/assets/checkmark-green.svg" alt="">Open Source</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stats Section -->
|
||
<section class="stats-section">
|
||
<div class="container">
|
||
<div class="stats-grid">
|
||
<div class="stat-item">
|
||
<h3>49</h3>
|
||
<p>Elérhető alkalmazás</p>
|
||
</div>
|
||
<div class="stat-item">
|
||
<h3>5</h3>
|
||
<p>Kategória</p>
|
||
</div>
|
||
<div class="stat-item">
|
||
<h3>100%</h3>
|
||
<p>Nyílt forráskódú</p>
|
||
</div>
|
||
<div class="stat-item">
|
||
<h3>0 Ft</h3>
|
||
<p>Licenc költség</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="cta-section">
|
||
<div class="container">
|
||
<h2>Nem találod amit keresel?</h2>
|
||
<p>Ez csak egy részlet a telepíthető alkalmazásokból. Ha van egy konkrét igényed, keress minket és megtaláljuk a megfelelő megoldást!</p>
|
||
<a href="/kapcsolat" class="cta-button">Kapcsolatfelvétel →</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2026 felhom.eu — Saját felhőd, saját szabályaid</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Lightbox HTML -->
|
||
<div class="lightbox-overlay" id="lightbox">
|
||
<button class="lightbox-close" aria-label="Bezárás">×</button>
|
||
<div class="lightbox-content">
|
||
<button class="lightbox-nav lightbox-prev" aria-label="Előző">‹</button>
|
||
<img class="lightbox-image" id="lightbox-img" src="" alt="">
|
||
<button class="lightbox-nav lightbox-next" aria-label="Következő">›</button>
|
||
</div>
|
||
<div class="lightbox-counter" id="lightbox-counter"></div>
|
||
<div class="lightbox-dots" id="lightbox-dots"></div>
|
||
</div>
|
||
|
||
<script>
|
||
/**
|
||
* Screenshot Gallery / Lightbox functionality
|
||
* - Click on app screenshot to open lightbox
|
||
* - Automatically detects multiple screenshots (app-screenshot-1.png, app-screenshot-2.png, etc.)
|
||
* - Navigate with arrows or keyboard
|
||
*/
|
||
(function() {
|
||
'use strict';
|
||
|
||
// Debug mode - set to true for console logging
|
||
const DEBUG = false;
|
||
function log(...args) {
|
||
if (DEBUG) console.log('[Gallery]', ...args);
|
||
}
|
||
|
||
// DOM elements
|
||
const lightbox = document.getElementById('lightbox');
|
||
const lightboxImg = document.getElementById('lightbox-img');
|
||
const lightboxCounter = document.getElementById('lightbox-counter');
|
||
const lightboxDots = document.getElementById('lightbox-dots');
|
||
const closeBtn = lightbox.querySelector('.lightbox-close');
|
||
const prevBtn = lightbox.querySelector('.lightbox-prev');
|
||
const nextBtn = lightbox.querySelector('.lightbox-next');
|
||
|
||
// State
|
||
const state = {
|
||
images: [],
|
||
currentIndex: 0,
|
||
appName: ''
|
||
};
|
||
|
||
/**
|
||
* Check if an image URL exists
|
||
* @param {string} url
|
||
* @returns {Promise<boolean>}
|
||
*/
|
||
async function imageExists(url) {
|
||
return new Promise((resolve) => {
|
||
const img = new Image();
|
||
img.onload = () => resolve(true);
|
||
img.onerror = () => resolve(false);
|
||
img.src = url;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Detect all available screenshots for an app
|
||
* @param {string} appName
|
||
* @returns {Promise<string[]>}
|
||
*/
|
||
async function detectScreenshots(appName) {
|
||
const screenshots = [];
|
||
const maxScreenshots = 10; // Maximum to check
|
||
|
||
for (let i = 1; i <= maxScreenshots; i++) {
|
||
const url = `/assets/${appName}-screenshot-${i}.png`;
|
||
const exists = await imageExists(url);
|
||
|
||
if (exists) {
|
||
screenshots.push(url);
|
||
log(`Found: ${url}`);
|
||
} else {
|
||
// Stop checking after first missing number
|
||
break;
|
||
}
|
||
}
|
||
|
||
// Fallback: if no numbered screenshots found, use the clicked image
|
||
if (screenshots.length === 0) {
|
||
const fallbackUrl = `/assets/${appName}-screenshot-1.png`;
|
||
screenshots.push(fallbackUrl);
|
||
}
|
||
|
||
return screenshots;
|
||
}
|
||
|
||
/**
|
||
* Extract app name from screenshot URL
|
||
* @param {string} src
|
||
* @returns {string} - The app name
|
||
*/
|
||
function extractAppName(src) {
|
||
// Match patterns: app-screenshot-1.png or app-screenshot-1.png
|
||
const match = src.match(/\/assets\/([a-z0-9-]+)-screenshot(?:-\d+)?\.png/i);
|
||
return match ? match[1] : '';
|
||
}
|
||
|
||
/**
|
||
* Update the lightbox display
|
||
*/
|
||
function updateLightbox() {
|
||
if (state.images.length === 0) return;
|
||
|
||
const currentImg = state.images[state.currentIndex];
|
||
lightboxImg.src = currentImg;
|
||
lightboxImg.alt = `${state.appName} screenshot ${state.currentIndex + 1}`;
|
||
|
||
// Update counter
|
||
lightboxCounter.textContent = `${state.currentIndex + 1} / ${state.images.length}`;
|
||
|
||
// Update dots
|
||
const dots = lightboxDots.querySelectorAll('.lightbox-dot');
|
||
dots.forEach((dot, i) => {
|
||
dot.classList.toggle('active', i === state.currentIndex);
|
||
});
|
||
|
||
// Update nav buttons
|
||
prevBtn.disabled = state.currentIndex === 0;
|
||
nextBtn.disabled = state.currentIndex === state.images.length - 1;
|
||
|
||
// Hide nav and dots if only one image
|
||
const singleImage = state.images.length <= 1;
|
||
prevBtn.style.display = singleImage ? 'none' : 'flex';
|
||
nextBtn.style.display = singleImage ? 'none' : 'flex';
|
||
lightboxDots.style.display = singleImage ? 'none' : 'flex';
|
||
lightboxCounter.style.display = singleImage ? 'none' : 'block';
|
||
}
|
||
|
||
/**
|
||
* Create navigation dots
|
||
*/
|
||
function createDots() {
|
||
lightboxDots.innerHTML = '';
|
||
state.images.forEach((_, i) => {
|
||
const dot = document.createElement('button');
|
||
dot.className = 'lightbox-dot' + (i === state.currentIndex ? ' active' : '');
|
||
dot.setAttribute('aria-label', `Ugrás ${i + 1}. képhez`);
|
||
dot.addEventListener('click', () => goToImage(i));
|
||
lightboxDots.appendChild(dot);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* Go to specific image
|
||
* @param {number} index
|
||
*/
|
||
function goToImage(index) {
|
||
if (index >= 0 && index < state.images.length) {
|
||
state.currentIndex = index;
|
||
updateLightbox();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Open lightbox for an app
|
||
* @param {HTMLImageElement} thumbnailImg
|
||
*/
|
||
async function openLightbox(thumbnailImg) {
|
||
const appName = extractAppName(thumbnailImg.src);
|
||
if (!appName) {
|
||
log('Could not extract app name from:', thumbnailImg.src);
|
||
return;
|
||
}
|
||
|
||
log('Opening lightbox for:', appName);
|
||
|
||
// Show loading state
|
||
lightbox.classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
lightboxImg.src = thumbnailImg.src; // Show thumbnail immediately
|
||
lightboxImg.alt = thumbnailImg.alt;
|
||
lightboxCounter.textContent = 'Betöltés...';
|
||
lightboxDots.innerHTML = '';
|
||
|
||
// Detect available screenshots
|
||
state.appName = appName;
|
||
state.images = await detectScreenshots(appName);
|
||
state.currentIndex = 0;
|
||
|
||
log('Found screenshots:', state.images);
|
||
|
||
createDots();
|
||
updateLightbox();
|
||
}
|
||
|
||
/**
|
||
* Close the lightbox
|
||
*/
|
||
function closeLightbox() {
|
||
lightbox.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
state.images = [];
|
||
state.currentIndex = 0;
|
||
}
|
||
|
||
/**
|
||
* Navigate to previous image
|
||
*/
|
||
function prevImage() {
|
||
if (state.currentIndex > 0) {
|
||
state.currentIndex--;
|
||
updateLightbox();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Navigate to next image
|
||
*/
|
||
function nextImage() {
|
||
if (state.currentIndex < state.images.length - 1) {
|
||
state.currentIndex++;
|
||
updateLightbox();
|
||
}
|
||
}
|
||
|
||
// Event Listeners
|
||
|
||
// Click on screenshot thumbnails
|
||
document.addEventListener('click', (e) => {
|
||
const screenshot = e.target.closest('.app-screenshot');
|
||
if (screenshot) {
|
||
e.preventDefault();
|
||
openLightbox(screenshot);
|
||
}
|
||
});
|
||
|
||
// Close button
|
||
closeBtn.addEventListener('click', closeLightbox);
|
||
|
||
// Navigation buttons
|
||
prevBtn.addEventListener('click', prevImage);
|
||
nextBtn.addEventListener('click', nextImage);
|
||
|
||
// Click on overlay (outside image) to close
|
||
lightbox.addEventListener('click', (e) => {
|
||
if (e.target === lightbox) {
|
||
closeLightbox();
|
||
}
|
||
});
|
||
|
||
// Keyboard navigation
|
||
document.addEventListener('keydown', (e) => {
|
||
if (!lightbox.classList.contains('active')) return;
|
||
|
||
switch (e.key) {
|
||
case 'Escape':
|
||
closeLightbox();
|
||
break;
|
||
case 'ArrowLeft':
|
||
prevImage();
|
||
break;
|
||
case 'ArrowRight':
|
||
nextImage();
|
||
break;
|
||
}
|
||
});
|
||
|
||
// Touch/swipe support for mobile
|
||
let touchStartX = 0;
|
||
let touchEndX = 0;
|
||
|
||
lightbox.addEventListener('touchstart', (e) => {
|
||
touchStartX = e.changedTouches[0].screenX;
|
||
}, { passive: true });
|
||
|
||
lightbox.addEventListener('touchend', (e) => {
|
||
touchEndX = e.changedTouches[0].screenX;
|
||
const diff = touchStartX - touchEndX;
|
||
if (Math.abs(diff) > 50) { // Minimum swipe distance
|
||
if (diff > 0) {
|
||
nextImage(); // Swipe left = next
|
||
} else {
|
||
prevImage(); // Swipe right = prev
|
||
}
|
||
}
|
||
}, { passive: true });
|
||
|
||
log('Gallery initialized');
|
||
})();
|
||
</script>
|
||
<script>
|
||
(function() {
|
||
var hamburger = document.getElementById('hamburger');
|
||
var navLinks = document.querySelector('.nav-links');
|
||
var overlay = document.getElementById('mobileOverlay');
|
||
var body = document.body;
|
||
|
||
if (!hamburger || !navLinks || !overlay) {
|
||
console.warn('[mobile-menu] Missing elements:', {
|
||
hamburger: !!hamburger,
|
||
navLinks: !!navLinks,
|
||
overlay: !!overlay
|
||
});
|
||
return;
|
||
}
|
||
|
||
function openMenu() {
|
||
hamburger.classList.add('is-active');
|
||
navLinks.classList.add('is-open');
|
||
overlay.classList.add('is-visible');
|
||
body.classList.add('menu-open');
|
||
hamburger.setAttribute('aria-expanded', 'true');
|
||
hamburger.setAttribute('aria-label', 'Menü bezárása');
|
||
}
|
||
|
||
function closeMenu() {
|
||
hamburger.classList.remove('is-active');
|
||
navLinks.classList.remove('is-open');
|
||
overlay.classList.remove('is-visible');
|
||
body.classList.remove('menu-open');
|
||
hamburger.setAttribute('aria-expanded', 'false');
|
||
hamburger.setAttribute('aria-label', 'Menü megnyitása');
|
||
}
|
||
|
||
hamburger.addEventListener('click', function() {
|
||
if (navLinks.classList.contains('is-open')) {
|
||
closeMenu();
|
||
} else {
|
||
openMenu();
|
||
}
|
||
});
|
||
|
||
overlay.addEventListener('click', closeMenu);
|
||
|
||
navLinks.querySelectorAll('a').forEach(function(link) {
|
||
link.addEventListener('click', closeMenu);
|
||
});
|
||
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape' && navLinks.classList.contains('is-open')) {
|
||
closeMenu();
|
||
}
|
||
});
|
||
|
||
window.addEventListener('resize', function() {
|
||
if (window.innerWidth > 900 && navLinks.classList.contains('is-open')) {
|
||
closeMenu();
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html> |