website refresh: true numbers (56 apps), claims checked against the capability map, ten missing apps, an English twin of every public page (public, choice B), 404 page; site gates 13-18 + 11 decoys; R-902 opened
gates / gates (push) Failing after 13m1s
gates / gates (push) Failing after 13m1s
Part A: claim table documentation/audits/website-refresh-2026-10-08/claims.md; "100% open source" corrected from the licence read; unbacked claims cut (firewall, RAID, snapshots, new-machine restore, self-managed mode, household VPN, "never lost"). Part B: dawarich, docmost, grimmory, homebox, karakeep, mealie, metube, radicale, recipe-importer, sparkyfitness cards; plant-it and wger cut (not offered). Part C: /en/ twins, nav language switch, hreflang both ways, sitemap with xhtml:link, og-image-en.png. Part D: site_gates.py twins/lang/same-apps/no-Hungarian/FAQ-JSON-LD/tail. Operator ruling 9 + choice B in 10-localisation.md §11, §10.7. Register: R-902 (contact mailer source in no repo); R-813, R-784, R-559 annotated. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012qRErfCoiTkvDK9N5XHbzb
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,331 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Backups — a 3-2-1 backup strategy for home servers | Felhom.eu</title>
|
||||
<meta name="description" content="Professional 3-2-1 backups for a home server in Hungary. Automatic backups on three levels: on the box, on a second drive, and encrypted on remote storage.">
|
||||
<meta name="keywords" content="backup, 3-2-1 backup rule, off-site backup, data backup, home server backup, encrypted backup, automatic backup">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://felhom.eu/en/backups">
|
||||
<link rel="alternate" hreflang="hu" href="https://felhom.eu/biztonsagimentes">
|
||||
<link rel="alternate" hreflang="en" href="https://felhom.eu/en/backups">
|
||||
<link rel="alternate" hreflang="x-default" href="https://felhom.eu/biztonsagimentes">
|
||||
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:url" content="https://felhom.eu/en/backups">
|
||||
<meta property="og:title" content="3-2-1 backups for a home server">
|
||||
<meta property="og:description" content="Professional-grade data safety at home. Automatic backups, and an encrypted copy far away too.">
|
||||
<meta property="og:image" content="https://felhom.eu/assets/og-image-en.png">
|
||||
<meta property="og:locale" content="en_GB">
|
||||
<meta property="og:site_name" content="Felhom.eu">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="3-2-1 backups for a home server">
|
||||
<meta name="twitter:description" content="Professional data protection for your home server. Automatic backups, off-site copies.">
|
||||
<meta name="twitter:image" content="https://felhom.eu/assets/og-image-en.png">
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Article",
|
||||
"headline": "A 3-2-1 backup strategy for home servers",
|
||||
"description": "How to protect your data at home with a professional backup strategy.",
|
||||
"author": {"@type": "Organization", "name": "Felhom.eu"},
|
||||
"publisher": {"@type": "Organization", "name": "Felhom.eu", "logo": {"@type": "ImageObject", "url": "https://felhom.eu/assets/logo.png"}},
|
||||
"mainEntityOfPage": "https://felhom.eu/en/backups"
|
||||
}
|
||||
</script>
|
||||
<!-- shared assets: bump ?v= together on any site.css/icons.svg change -->
|
||||
<link rel="stylesheet" href="/assets/site.css?v=2">
|
||||
<link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
|
||||
<script defer src="https://stats.felhom.eu/script.js" data-website-id="d419db57-5e1c-48df-bdb3-c29f25fb1661"></script>
|
||||
</head>
|
||||
<body class="page-biztonsagimentes">
|
||||
<nav>
|
||||
<div class="container">
|
||||
<a href="/en/" class="logo">
|
||||
<img src="/assets/logo.png" alt="Felhom.eu logo">
|
||||
<span class="logo-text">felhom.eu</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/en/#services">Services</a></li>
|
||||
<li><a href="/en/apps">Apps</a></li>
|
||||
<li><a href="/en/technology">Technology</a></li>
|
||||
<li><a href="/en/backups" class="active">Backups</a></li>
|
||||
<li><a href="/en/faq">FAQ</a></li>
|
||||
<li><a href="/en/contact">Contact</a></li>
|
||||
<li><a href="/biztonsagimentes" lang="hu" hreflang="hu" class="lang-switch">Magyar</a></li>
|
||||
</ul>
|
||||
<button class="hamburger" id="hamburger" aria-label="Open menu" 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><span>Backups</span></h1>
|
||||
<p>Your data's safety comes first. With a professional backup strategy, we make sure there is something to bring back from after a fault or an accident.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bevezető -->
|
||||
<section class="content-section">
|
||||
<div class="container">
|
||||
<div class="info-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-circle-help"/></svg> Why does it matter?</h3>
|
||||
<p>When someone picks a cloud service – Google Drive, iCloud or any other – one of the most important things is <strong>data safety</strong>. The question is not whether someone can get at our data, but whether it <strong>survives</strong>.</p>
|
||||
<p>The big providers solve this with billion-dollar infrastructure: several data centres, redundant storage, automatic backups. But can a home server be just as safe?</p>
|
||||
<div class="highlight-box">
|
||||
<p><strong>The answer: yes.</strong> With the right backup strategy, your home server can be as safe as any cloud provider – and you are in charge of everything.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3-2-1 szabály -->
|
||||
<section class="content-section alt-bg">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>The 3-2-1 <span>backup rule</span></h2>
|
||||
<p>The industry standard that professional system administrators and companies use around the world</p>
|
||||
</div>
|
||||
|
||||
<div class="backup-rule">
|
||||
<div class="rule-number">3</div>
|
||||
<div class="rule-content">
|
||||
<h3>Three copies of your data</h3>
|
||||
<p>Always keep at least three copies of everything important: the original and two backups. If one is damaged or lost, there are still two in reserve.</p>
|
||||
<div class="example-box">
|
||||
<div class="label">Example</div>
|
||||
<p>Your family photos are on the server (1), on an external hard drive (2), and in a remote place (3).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="backup-rule">
|
||||
<div class="rule-number">2</div>
|
||||
<div class="rule-content">
|
||||
<h3>Two different kinds of storage</h3>
|
||||
<p>Keep your data on at least two kinds of storage device. Different devices fail in different ways – if one kind breaks, the other is probably fine.</p>
|
||||
<div class="example-box">
|
||||
<div class="label">Example</div>
|
||||
<p>You keep your data on the server's internal SSD, and the backup goes to an external HDD or a NAS.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="backup-rule">
|
||||
<div class="rule-number">1</div>
|
||||
<div class="rule-content">
|
||||
<h3>One off-site (remote) copy</h3>
|
||||
<p>Keep at least one copy in a different physical place. That protects against local disasters: a fire, a flood, a burglary or even a lightning strike cannot put all your data at risk.</p>
|
||||
<div class="example-box">
|
||||
<div class="label">Example</div>
|
||||
<p>The backup is copied on its own to a friend's or relative's server, or goes encrypted into the cloud.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="backup-diagram">
|
||||
<h3>What it looks like in practice</h3>
|
||||
<div class="diagram-visual">
|
||||
<div class="diagram-node primary">
|
||||
<div class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-monitor"/></svg></div>
|
||||
<div class="label">Server</div>
|
||||
<div class="sublabel">Original data</div>
|
||||
</div>
|
||||
<div class="diagram-arrow">→</div>
|
||||
<div class="diagram-node">
|
||||
<div class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-hard-drive"/></svg></div>
|
||||
<div class="label">Local backup</div>
|
||||
<div class="sublabel">External HDD/NAS</div>
|
||||
</div>
|
||||
<div class="diagram-arrow">→</div>
|
||||
<div class="diagram-node">
|
||||
<div class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg></div>
|
||||
<div class="label">Off-site backup</div>
|
||||
<div class="sublabel">Remote place</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Offsite megoldások -->
|
||||
<section class="content-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Off-site <span>backup options</span></h2>
|
||||
<p>The "1" in the 3-2-1 rule – the most important, and often the most neglected</p>
|
||||
</div>
|
||||
|
||||
<div class="methods-grid">
|
||||
<div class="method-card">
|
||||
<div class="method-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-users"/></svg></div>
|
||||
<h3>The "buddy system"</h3>
|
||||
<p>The simplest and cheapest option: swap backups with someone you trust. You back up to their server, they back up to yours.</p>
|
||||
<ul class="method-pros">
|
||||
<li>No monthly fee</li>
|
||||
<li>Full control over the data</li>
|
||||
<li>Safety for both of you</li>
|
||||
<li>End-to-end encryption is possible</li>
|
||||
</ul>
|
||||
<div class="example-box">
|
||||
<div class="label">How does it work?</div>
|
||||
<p>Encrypted backups sync on their own over a VPN connection.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-card">
|
||||
<div class="method-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-building-2"/></svg></div>
|
||||
<h3>Home ↔ Office</h3>
|
||||
<p>If you have a workplace or your own office, use it! Two sites give you natural distance.</p>
|
||||
<ul class="method-pros">
|
||||
<li>Uses what is already there</li>
|
||||
<li>A safe, familiar place</li>
|
||||
<li>Quick to recover from when needed</li>
|
||||
</ul>
|
||||
<div class="example-box">
|
||||
<div class="label">Tip</div>
|
||||
<p>A small, quiet mini PC in a corner of the office can be a perfect backup target.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-card">
|
||||
<div class="method-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-cloud"/></svg></div>
|
||||
<h3>Encrypted cloud backup</h3>
|
||||
<p>If there is no trusted friend or second site, the cloud is the answer. Important: the data is encrypted before it is uploaded!</p>
|
||||
<ul class="method-pros">
|
||||
<li>Professional infrastructure</li>
|
||||
<li>Storage spread across places</li>
|
||||
<li>No hardware needed</li>
|
||||
</ul>
|
||||
<ul class="method-pros method-cons">
|
||||
<li>A monthly or yearly fee (depending on how much is stored)</li>
|
||||
</ul>
|
||||
<div class="example-box">
|
||||
<div class="label">Note</div>
|
||||
<p>The storage fee depends on how much data is backed up. This is the option a Felhom box uses.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mi hogyan csináljuk -->
|
||||
<section class="content-section alt-bg">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>How <span>we do it</span></h2>
|
||||
<p>Backups are set up by default on every server we install</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-wrench"/></svg> Automatic backups</h3>
|
||||
<p>Every night the server makes backups by itself, on three levels: <strong>on the box</strong>, on a <strong>second drive</strong> (if there is one), and <strong>encrypted on remote storage</strong>. You do not have to remember anything – the system takes care of it.</p>
|
||||
<p>The backups are incremental: only the changes are saved. That saves space and time, and a full restore is still there when you need it.</p>
|
||||
|
||||
<div class="highlight-box">
|
||||
<p><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-monitor"/></svg> <strong>Not only the data:</strong> thanks to the Proxmox base, not only your files and databases are backed up but your <strong>whole system</strong> too — the whole box goes into a backup, and it can be restored from it. If the box itself breaks, your apps' data can be brought back from the encrypted remote backup onto the reinstalled system — with the recovery code.</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-box">
|
||||
<p><strong>Where the remote backup goes:</strong> on a Felhom box the remote copy goes, encrypted, to storage we provide. The "buddy system" and the office are general options for the 3-2-1 rule — we do not set them up today.</p>
|
||||
</div>
|
||||
|
||||
<h3 style="margin-top: 24px;"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lock"/></svg> The recovery code — only you know it</h3>
|
||||
<p>Your remote backup is encrypted, and the key to the encryption is a <strong>recovery code</strong>. The code appears exactly once: on your screen, when it is set up. We keep no copy of it.</p>
|
||||
<p>This is a deliberate choice, and it has two sides. One: <strong>nobody</strong> but you can read your remote backup — not even us. The other: if the box is destroyed and the code is lost too, then <strong>we cannot restore</strong> the remote backup either. So the code goes on paper, and somewhere safe.</p>
|
||||
|
||||
<h3 style="margin-top: 24px;"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chart-column"/></svg> Monitoring and notifications</h3>
|
||||
<p>We watch the backups all the time. If there is a problem – a failed backup, storage filling up, a connection fault – it shows up in our monitoring, and an e-mail goes out about it. One aim of the closed test is to polish these notifications in real use.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<h2>A question about <span>backups?</span></h2>
|
||||
<p>Let's talk about what is best in your situation. We help you find the balance between safety and cost.</p>
|
||||
<a href="/en/contact" class="cta-button">Get in touch →</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 felhom.eu — Your own cloud, your own rules. Felhom serves households in Hungary.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<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', 'Close menu');
|
||||
}
|
||||
|
||||
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', 'Open menu');
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,601 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact — ask for a personal offer for your home server | Felhom.eu</title>
|
||||
<meta name="description" content="Write to us and we will make a personal offer for your home server in Hungary. A question? We help! E-mail: info@felhom.eu">
|
||||
|
||||
<meta name="keywords" content="contact, request an offer, home server offer, Felhom contact">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://felhom.eu/en/contact">
|
||||
<link rel="alternate" hreflang="hu" href="https://felhom.eu/kapcsolat">
|
||||
<link rel="alternate" hreflang="en" href="https://felhom.eu/en/contact">
|
||||
<link rel="alternate" hreflang="x-default" href="https://felhom.eu/kapcsolat">
|
||||
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://felhom.eu/en/contact">
|
||||
<meta property="og:title" content="Contact — Felhom.eu">
|
||||
<meta property="og:description" content="Write to us and we will make a personal offer for your home server.">
|
||||
<meta property="og:image" content="https://felhom.eu/assets/og-image-en.png">
|
||||
<meta property="og:locale" content="en_GB">
|
||||
<meta property="og:site_name" content="Felhom.eu">
|
||||
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="Contact — Felhom.eu">
|
||||
<meta name="twitter:description" content="A question? Write to us: info@felhom.eu">
|
||||
<meta name="twitter:image" content="https://felhom.eu/assets/og-image-en.png">
|
||||
<!-- shared assets: bump ?v= together on any site.css/icons.svg change -->
|
||||
<link rel="stylesheet" href="/assets/site.css?v=2">
|
||||
<link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
|
||||
<script defer src="https://stats.felhom.eu/script.js" data-website-id="d419db57-5e1c-48df-bdb3-c29f25fb1661"></script>
|
||||
</head>
|
||||
<body class="page-kapcsolat">
|
||||
<nav>
|
||||
<div class="container">
|
||||
<a href="/en/" class="logo">
|
||||
<img src="/assets/logo.png" alt="Felhom.eu logo">
|
||||
<span class="logo-text">felhom.eu</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/en/#services">Services</a></li>
|
||||
<li><a href="/en/apps">Apps</a></li>
|
||||
<li><a href="/en/technology">Technology</a></li>
|
||||
<li><a href="/en/backups">Backups</a></li>
|
||||
<li><a href="/en/faq">FAQ</a></li>
|
||||
<li><a href="/en/contact" class="active">Contact</a></li>
|
||||
<li><a href="/kapcsolat" lang="hu" hreflang="hu" class="lang-switch">Magyar</a></li>
|
||||
</ul>
|
||||
<button class="hamburger" id="hamburger" aria-label="Open menu" 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>
|
||||
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<h1>Write to <span>us!</span></h1>
|
||||
<p>A question, or want to talk about what you need? Fill in the form and we will answer soon. We answer in English or Hungarian.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main>
|
||||
<section class="content-section" style="padding-top: 0;">
|
||||
<div class="container">
|
||||
<div class="contact-layout">
|
||||
|
||||
<!-- Form -->
|
||||
<div class="contact-form-card">
|
||||
<div id="formStatus" class="form-status"></div>
|
||||
|
||||
<form id="contactForm" novalidate>
|
||||
<div style="position:absolute;left:-9999px;" aria-hidden="true">
|
||||
<input type="text" name="website" tabindex="-1" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="name">Name <span class="required">*</span></label>
|
||||
<input type="text" id="name" name="name" placeholder="Your full name" required>
|
||||
<div class="error-message" id="nameError">Enter your name.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">E-mail <span class="required">*</span></label>
|
||||
<input type="email" id="email" name="email" placeholder="you@example.com" required>
|
||||
<div class="error-message" id="emailError">Enter a valid e-mail address.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subject">Subject <span class="required">*</span></label>
|
||||
<select id="subject" name="subject" required>
|
||||
<option value="" disabled selected>Choose a topic...</option>
|
||||
<option value="zart-teszt">Closed test — I want to be a tester</option>
|
||||
<option value="erdeklodes">Interest — I would like to learn about the service</option>
|
||||
<option value="arajanlat">Request a quote — I have specific needs</option>
|
||||
<option value="tamogatas">Support — a question about my existing server</option>
|
||||
<option value="egyeb">Other</option>
|
||||
</select>
|
||||
<div class="error-message" id="subjectError">Choose a topic.</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">Message <span class="required">*</span></label>
|
||||
<textarea id="message" name="message" placeholder="Tell us how we can help..." required></textarea>
|
||||
<div class="error-message" id="messageError">Write your message.</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Attach files <span style="color: var(--text-3); font-weight: 400;">(optional)</span></label>
|
||||
<div class="file-upload-zone" id="dropZone">
|
||||
<input type="file" id="fileInput" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.webp,.txt,.csv,.zip,.7z">
|
||||
<div class="upload-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-paperclip"/></svg></div>
|
||||
<div class="upload-text">
|
||||
<strong>Click here</strong> or drag your files here
|
||||
</div>
|
||||
<div class="upload-hint">PDF, images, documents · max. 20 MB in total</div>
|
||||
</div>
|
||||
<div class="file-list" id="fileList"></div>
|
||||
<div class="file-total-size" id="fileTotalSize"></div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="privacy" name="privacy" required>
|
||||
<label for="privacy">
|
||||
I agree that Felhom.eu uses the details I give in this form to answer my enquiry. The details are not passed on to third parties.
|
||||
</label>
|
||||
</div>
|
||||
<div class="error-message" id="privacyError" style="margin-top: -16px; margin-bottom: 16px;">Your consent to the use of your details is needed.</div>
|
||||
|
||||
<button type="submit" class="submit-button" id="submitBtn">
|
||||
<span class="btn-text">Send message →</span>
|
||||
<span class="spinner"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="contact-sidebar">
|
||||
<div class="sidebar-card">
|
||||
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-mail"/></svg></span> E-mail us directly</h3>
|
||||
<p>If you would rather send an e-mail:</p>
|
||||
<a href="mailto:info@felhom.eu" class="direct-email">
|
||||
<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-mail"/></svg> info@felhom.eu
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-card">
|
||||
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-clock"/></svg></span> Reply time</h3>
|
||||
<p>We usually answer <strong style="color: var(--blue-bright);">within 24 hours</strong> on working days.</p>
|
||||
<p>If a support question is urgent, say so in the subject.</p>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-card">
|
||||
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lightbulb"/></svg></span> How can we help?</h3>
|
||||
<ul class="sidebar-list">
|
||||
<li><span class="li-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-monitor"/></svg></span> Advice on a server set-up</li>
|
||||
<li><span class="li-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg></span> Installing and setting up apps</li>
|
||||
<li><span class="li-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lock"/></svg></span> Setting up backups</li>
|
||||
<li><span class="li-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg></span> Setting up remote access</li>
|
||||
<li><span class="li-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-wrench"/></svg></span> Maintaining an existing server</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 felhom.eu — Your own cloud, your own rules. Felhom serves households in Hungary.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
'use strict';
|
||||
|
||||
// ==============================================
|
||||
// CONFIGURATION
|
||||
// ==============================================
|
||||
const CONFIG = {
|
||||
// TODO: Replace with your actual form backend endpoint.
|
||||
// Options:
|
||||
// 1. Self-hosted: Deploy a small container (e.g. Go/Python) that receives POST and sends via SMTP
|
||||
// 2. Formspree: 'https://formspree.io/f/YOUR_FORM_ID'
|
||||
// 3. Cloudflare Workers: Deploy a worker that forwards to email
|
||||
//
|
||||
// For now, falls back to mailto: if no endpoint is configured.
|
||||
formEndpoint: '/api/contact',
|
||||
|
||||
maxTotalFileSize: 20 * 1024 * 1024, // 20 MB
|
||||
maxSingleFileSize: 10 * 1024 * 1024, // 10 MB per file
|
||||
maxFiles: 5,
|
||||
allowedExtensions: ['pdf','doc','docx','xls','xlsx','png','jpg','jpeg','gif','webp','txt','csv','zip','7z'],
|
||||
};
|
||||
|
||||
// ==============================================
|
||||
// DOM REFS
|
||||
// ==============================================
|
||||
const form = document.getElementById('contactForm');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
const formStatus = document.getElementById('formStatus');
|
||||
const dropZone = document.getElementById('dropZone');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const fileListEl = document.getElementById('fileList');
|
||||
const fileTotalSizeEl = document.getElementById('fileTotalSize');
|
||||
|
||||
let attachedFiles = [];
|
||||
|
||||
// Preselect the subject from ?tema= (the closed-test CTA on the landing page
|
||||
// links here as /en/contact?tema=zart-teszt — the same values as the Hungarian page). Unknown values are ignored.
|
||||
(function preselectSubject() {
|
||||
const wanted = new URLSearchParams(window.location.search).get('tema');
|
||||
if (!wanted) return;
|
||||
const select = document.getElementById('subject');
|
||||
if (!select) return;
|
||||
const match = Array.from(select.options).some(o => o.value === wanted);
|
||||
if (match) {
|
||||
select.value = wanted;
|
||||
} else {
|
||||
console.warn('[contact] unknown ?tema= value, ignoring:', wanted);
|
||||
}
|
||||
})();
|
||||
|
||||
// ==============================================
|
||||
// VALIDATION
|
||||
// ==============================================
|
||||
function validateField(field) {
|
||||
const errorEl = document.getElementById(field.id + 'Error');
|
||||
let valid = true;
|
||||
|
||||
if (field.type === 'checkbox') {
|
||||
valid = field.checked;
|
||||
} else if (field.required && !field.value.trim()) {
|
||||
valid = false;
|
||||
} else if (field.type === 'email' && field.value.trim()) {
|
||||
valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(field.value.trim());
|
||||
}
|
||||
|
||||
if (valid) {
|
||||
field.classList.remove('error');
|
||||
if (errorEl) errorEl.classList.remove('visible');
|
||||
} else {
|
||||
field.classList.add('error');
|
||||
if (errorEl) errorEl.classList.add('visible');
|
||||
}
|
||||
|
||||
return valid;
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
const fields = ['name', 'email', 'subject', 'message', 'privacy'];
|
||||
let allValid = true;
|
||||
|
||||
fields.forEach(id => {
|
||||
const field = document.getElementById(id);
|
||||
if (!validateField(field)) allValid = false;
|
||||
});
|
||||
|
||||
return allValid;
|
||||
}
|
||||
|
||||
// Live validation on blur
|
||||
['name', 'email', 'subject', 'message', 'privacy'].forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
const event = el.type === 'checkbox' ? 'change' : 'blur';
|
||||
el.addEventListener(event, () => validateField(el));
|
||||
// Clear error on input
|
||||
el.addEventListener('input', () => {
|
||||
if (el.classList.contains('error')) validateField(el);
|
||||
});
|
||||
});
|
||||
|
||||
// ==============================================
|
||||
// FILE HANDLING
|
||||
// ==============================================
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
||||
}
|
||||
|
||||
function getFileIcon(name) {
|
||||
const ext = name.split('.').pop().toLowerCase();
|
||||
const icons = {
|
||||
pdf: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-file-text"/></svg>', doc: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-file-text"/></svg>', docx: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-file-text"/></svg>', xls: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chart-column"/></svg>', xlsx: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chart-column"/></svg>',
|
||||
png: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-image"/></svg>', jpg: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-image"/></svg>', jpeg: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-image"/></svg>', gif: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-image"/></svg>', webp: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-image"/></svg>',
|
||||
txt: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-file-text"/></svg>', csv: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chart-column"/></svg>', zip: '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg>', '7z': '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg>',
|
||||
};
|
||||
return icons[ext] || '<svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-paperclip"/></svg>';
|
||||
}
|
||||
|
||||
function getTotalFileSize() {
|
||||
return attachedFiles.reduce((sum, f) => sum + f.size, 0);
|
||||
}
|
||||
|
||||
function addFiles(fileArray) {
|
||||
for (const file of fileArray) {
|
||||
// Check extension
|
||||
const ext = file.name.split('.').pop().toLowerCase();
|
||||
if (!CONFIG.allowedExtensions.includes(ext)) {
|
||||
showStatus(`The file type of "${file.name}" is not allowed.`, 'error-state');
|
||||
continue;
|
||||
}
|
||||
|
||||
// Check single file size
|
||||
if (file.size > CONFIG.maxSingleFileSize) {
|
||||
showStatus(`"${file.name}" is too large (max. ${formatFileSize(CONFIG.maxSingleFileSize)} per file).`, 'error-state');
|
||||
continue;
|
||||
}
|
||||
|
||||
// Check max file count
|
||||
if (attachedFiles.length >= CONFIG.maxFiles) {
|
||||
showStatus(`You can attach at most ${CONFIG.maxFiles} files.`, 'error-state');
|
||||
break;
|
||||
}
|
||||
|
||||
// Check total size
|
||||
if (getTotalFileSize() + file.size > CONFIG.maxTotalFileSize) {
|
||||
showStatus(`The files together are over the ${formatFileSize(CONFIG.maxTotalFileSize)} limit.`, 'error-state');
|
||||
break;
|
||||
}
|
||||
|
||||
// Check duplicate
|
||||
if (attachedFiles.some(f => f.name === file.name && f.size === file.size)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
attachedFiles.push(file);
|
||||
}
|
||||
|
||||
renderFileList();
|
||||
}
|
||||
|
||||
function removeFile(index) {
|
||||
attachedFiles.splice(index, 1);
|
||||
renderFileList();
|
||||
// Reset file input so same file can be re-added
|
||||
fileInput.value = '';
|
||||
}
|
||||
|
||||
function renderFileList() {
|
||||
if (attachedFiles.length === 0) {
|
||||
fileListEl.innerHTML = '';
|
||||
fileTotalSizeEl.textContent = '';
|
||||
return;
|
||||
}
|
||||
|
||||
fileListEl.innerHTML = attachedFiles.map((file, i) => `
|
||||
<div class="file-item">
|
||||
<span class="file-icon">${getFileIcon(file.name)}</span>
|
||||
<div class="file-info">
|
||||
<div class="file-name" title="${file.name}">${file.name}</div>
|
||||
<div class="file-size">${formatFileSize(file.size)}</div>
|
||||
</div>
|
||||
<button type="button" class="file-remove" data-index="${i}" title="Remove">×</button>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// Bind remove buttons
|
||||
fileListEl.querySelectorAll('.file-remove').forEach(btn => {
|
||||
btn.addEventListener('click', () => removeFile(parseInt(btn.dataset.index)));
|
||||
});
|
||||
|
||||
// Total size indicator
|
||||
const total = getTotalFileSize();
|
||||
const pct = (total / CONFIG.maxTotalFileSize) * 100;
|
||||
fileTotalSizeEl.textContent = `${formatFileSize(total)} / ${formatFileSize(CONFIG.maxTotalFileSize)}`;
|
||||
fileTotalSizeEl.className = 'file-total-size';
|
||||
if (pct > 90) fileTotalSizeEl.classList.add('error-text');
|
||||
else if (pct > 70) fileTotalSizeEl.classList.add('warning');
|
||||
}
|
||||
|
||||
// File input change
|
||||
fileInput.addEventListener('change', () => {
|
||||
if (fileInput.files.length) {
|
||||
addFiles(Array.from(fileInput.files));
|
||||
fileInput.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Drag & drop
|
||||
['dragenter', 'dragover'].forEach(evt => {
|
||||
dropZone.addEventListener(evt, e => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('dragover');
|
||||
});
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(evt => {
|
||||
dropZone.addEventListener(evt, e => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('dragover');
|
||||
});
|
||||
});
|
||||
|
||||
dropZone.addEventListener('drop', e => {
|
||||
if (e.dataTransfer.files.length) {
|
||||
addFiles(Array.from(e.dataTransfer.files));
|
||||
}
|
||||
});
|
||||
|
||||
// ==============================================
|
||||
// STATUS MESSAGES
|
||||
// ==============================================
|
||||
function showStatus(message, type) {
|
||||
formStatus.textContent = message;
|
||||
formStatus.className = 'form-status ' + type;
|
||||
formStatus.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
|
||||
if (type === 'error-state') {
|
||||
setTimeout(() => {
|
||||
formStatus.className = 'form-status';
|
||||
}, 6000);
|
||||
}
|
||||
}
|
||||
|
||||
// ==============================================
|
||||
// FORM SUBMISSION
|
||||
// ==============================================
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
formStatus.className = 'form-status';
|
||||
|
||||
if (!validateForm()) {
|
||||
// Build specific error message
|
||||
const missing = [];
|
||||
if (!document.getElementById('name').value.trim()) missing.push('name');
|
||||
const emailVal = document.getElementById('email').value.trim();
|
||||
if (!emailVal || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailVal)) missing.push('email');
|
||||
if (!document.getElementById('subject').value) missing.push('subject');
|
||||
if (!document.getElementById('message').value.trim()) missing.push('message');
|
||||
if (!document.getElementById('privacy').checked) missing.push('consent');
|
||||
|
||||
if (missing.length === 1 && missing[0] === 'consent') {
|
||||
showStatus('Tick the consent box to send the form.', 'error-state');
|
||||
} else {
|
||||
showStatus('Fill in every required field.', 'error-state');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
submitBtn.classList.add('loading');
|
||||
submitBtn.disabled = true;
|
||||
|
||||
const formData = {
|
||||
name: document.getElementById('name').value.trim(),
|
||||
email: document.getElementById('email').value.trim(),
|
||||
subject: document.getElementById('subject').value,
|
||||
message: document.getElementById('message').value.trim(),
|
||||
};
|
||||
|
||||
// Subject label mapping
|
||||
const subjectLabels = {
|
||||
'zart-teszt': 'Application — closed test (EN)',
|
||||
erdeklodes: 'Interest (EN)',
|
||||
arajanlat: 'Quote request (EN)',
|
||||
tamogatas: 'Support (EN)',
|
||||
egyeb: 'Other (EN)',
|
||||
};
|
||||
|
||||
try {
|
||||
if (CONFIG.formEndpoint) {
|
||||
// --- Backend submission ---
|
||||
const data = new FormData();
|
||||
data.append('name', formData.name);
|
||||
data.append('email', formData.email);
|
||||
data.append('subject', subjectLabels[formData.subject] || formData.subject);
|
||||
data.append('message', formData.message);
|
||||
|
||||
attachedFiles.forEach(file => {
|
||||
data.append('attachments', file);
|
||||
});
|
||||
|
||||
const response = await fetch(CONFIG.formEndpoint, {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Server error: ${response.status}`);
|
||||
}
|
||||
|
||||
showStatus('Your message has been sent. We will answer soon.', 'success');
|
||||
form.reset();
|
||||
attachedFiles = [];
|
||||
renderFileList();
|
||||
|
||||
} else {
|
||||
// --- Fallback: mailto ---
|
||||
const subjectLine = `[Felhom.eu] ${subjectLabels[formData.subject] || formData.subject}`;
|
||||
const body = [
|
||||
`Name: ${formData.name}`,
|
||||
`Email: ${formData.email}`,
|
||||
``,
|
||||
formData.message,
|
||||
].join('\n');
|
||||
|
||||
const mailtoUrl = `mailto:info@felhom.eu?subject=${encodeURIComponent(subjectLine)}&body=${encodeURIComponent(body)}`;
|
||||
window.location.href = mailtoUrl;
|
||||
|
||||
if (attachedFiles.length > 0) {
|
||||
showStatus('Your e-mail program has opened. Add the attached files to the e-mail by hand: a mailto: link cannot carry attachments.', 'error-state');
|
||||
} else {
|
||||
showStatus('Your e-mail program has opened with your message. Send the e-mail to get in touch.', 'success');
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Form submission error:', err);
|
||||
showStatus(`Something went wrong while sending. Try again, or write to info@felhom.eu directly.`, 'error-state');
|
||||
} finally {
|
||||
submitBtn.classList.remove('loading');
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
// ==============================================
|
||||
// DEBUG HELPER
|
||||
// ==============================================
|
||||
// Uncomment to test form states:
|
||||
// window.debugForm = {
|
||||
// showSuccess: () => showStatus('Your message has been sent.', 'success'),
|
||||
// showError: () => showStatus('Something went wrong.', 'error-state'),
|
||||
// getFiles: () => console.log(attachedFiles),
|
||||
// getFormData: () => {
|
||||
// const fd = new FormData(form);
|
||||
// for (const [k,v] of fd.entries()) console.log(k, v);
|
||||
// },
|
||||
// };
|
||||
|
||||
})();
|
||||
</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', 'Close menu');
|
||||
}
|
||||
|
||||
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', 'Open menu');
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -31,11 +31,18 @@
|
||||
<body class="page-letoltes">
|
||||
<nav>
|
||||
<div class="container">
|
||||
<a href="/" class="logo">
|
||||
<a href="/en/" class="logo">
|
||||
<img src="/assets/logo.png" alt="Felhom.eu logo">
|
||||
<span class="logo-text">felhom.eu</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/en/#services">Services</a></li>
|
||||
<li><a href="/en/apps">Apps</a></li>
|
||||
<li><a href="/en/technology">Technology</a></li>
|
||||
<li><a href="/en/backups">Backups</a></li>
|
||||
<li><a href="/en/faq">FAQ</a></li>
|
||||
<li><a href="/en/contact">Contact</a></li>
|
||||
<li><a href="/letoltes" lang="hu" hreflang="hu" class="lang-switch">Magyar</a></li>
|
||||
</ul>
|
||||
<button class="hamburger" id="hamburger" aria-label="Open menu" aria-expanded="false">
|
||||
<span class="hamburger-box">
|
||||
@@ -53,7 +60,6 @@
|
||||
<div class="container">
|
||||
<h1>The Felhom <span>installer</span></h1>
|
||||
<p>This page is for someone who has received an installation guide from their operator. The installer turns a whole machine into a Felhom server.</p>
|
||||
<p><a href="/letoltes" lang="hu" hreflang="hu">Magyar</a></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -90,7 +96,7 @@
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 felhom.eu — Your own cloud, your own rules</p>
|
||||
<p>© 2026 felhom.eu — Your own cloud, your own rules. Felhom serves households in Hungary.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
|
||||
+1047
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,575 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="description" content="A home server in your own home in Hungary: photos, documents, media. 56 apps to install, automatic backups on three levels, a dashboard in English or Hungarian. A closed test is starting now.">
|
||||
<title>Felhom.eu — Your own cloud, your own rules | A home server service in Hungary</title>
|
||||
|
||||
<!-- SEO meta -->
|
||||
<meta name="keywords" content="home server, own cloud, self-hosting, Google Drive alternative, iCloud alternative, privacy, open source, server installation, server management, Nextcloud, Immich, Hungary">
|
||||
<meta name="author" content="Felhom.eu">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://felhom.eu/en/">
|
||||
<link rel="alternate" hreflang="hu" href="https://felhom.eu/">
|
||||
<link rel="alternate" hreflang="en" href="https://felhom.eu/en/">
|
||||
<link rel="alternate" hreflang="x-default" href="https://felhom.eu/">
|
||||
|
||||
<!-- Open Graph (Facebook, LinkedIn) -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://felhom.eu/en/">
|
||||
<meta property="og:title" content="Felhom.eu — Your own cloud, your own rules">
|
||||
<meta property="og:description" content="A home server in your own home in Hungary: photos, documents, media — with automatic backups and a recovery code only you know. A closed test is starting now.">
|
||||
<meta property="og:image" content="https://felhom.eu/assets/og-image-en.png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:image:alt" content="Felhom.eu — Your own cloud, your own rules. Closed test starting.">
|
||||
<meta property="og:locale" content="en_GB">
|
||||
<meta property="og:site_name" content="Felhom.eu">
|
||||
|
||||
<!-- Twitter/X Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Felhom.eu — Your own cloud, your own rules">
|
||||
<meta name="twitter:description" content="A home server in your own home in Hungary: photos, documents, media — with automatic backups and a recovery code only you know.">
|
||||
<meta name="twitter:image" content="https://felhom.eu/assets/og-image-en.png">
|
||||
|
||||
<!-- Structured Data (JSON-LD) -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "Felhom.eu",
|
||||
"description": "Professional home server installation and management in Hungary.",
|
||||
"url": "https://felhom.eu",
|
||||
"logo": "https://felhom.eu/assets/logo.png",
|
||||
"email": "info@felhom.eu",
|
||||
"areaServed": {
|
||||
"@type": "Country",
|
||||
"name": "Hungary"
|
||||
},
|
||||
"serviceType": ["Server installation", "Server management", "Self-hosting"],
|
||||
"knowsLanguage": ["hu", "en"],
|
||||
"sameAs": []
|
||||
}
|
||||
</script>
|
||||
<!-- shared assets: bump ?v= together on any site.css/icons.svg change -->
|
||||
<link rel="stylesheet" href="/assets/site.css?v=2">
|
||||
<link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
|
||||
<script defer src="https://stats.felhom.eu/script.js" data-website-id="d419db57-5e1c-48df-bdb3-c29f25fb1661"></script>
|
||||
</head>
|
||||
<body class="page-index">
|
||||
<nav>
|
||||
<div class="container">
|
||||
<a href="/en/" class="logo">
|
||||
<img src="/assets/logo.png" alt="Felhom.eu logo">
|
||||
<span class="logo-text">felhom.eu</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/en/#services">Services</a></li>
|
||||
<li><a href="/en/apps">Apps</a></li>
|
||||
<li><a href="/en/technology">Technology</a></li>
|
||||
<li><a href="/en/backups">Backups</a></li>
|
||||
<li><a href="/en/faq">FAQ</a></li>
|
||||
<li><a href="/en/contact">Contact</a></li>
|
||||
<li><a href="/" lang="hu" hreflang="hu" class="lang-switch">Magyar</a></li>
|
||||
</ul>
|
||||
<button class="hamburger" id="hamburger" aria-label="Open menu" 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>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h1>Your own cloud,<br><span>your own rules</span></h1>
|
||||
<p>Professional home server installation and management, for households in Hungary. You are in charge; we help.</p>
|
||||
<a href="#closed-test" class="cta-button">I want to be a tester →</a>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<img src="/assets/logo.png" alt="Felhom.eu - home server service">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section" id="what-it-does">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>What the box <span>does today</span></h2>
|
||||
<p>Not a plan, not a promise — these work today on a live Felhom box</p>
|
||||
</div>
|
||||
<div class="why-grid">
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-camera"/></svg> Photos, documents, media</h3>
|
||||
<p>Your phone's photos upload to your own machine on their own. Your scanned papers are read and made searchable. Your films and music play in the browser and in mobile apps.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-folder"/></svg> Network shares</h3>
|
||||
<p>The box's folders appear in Windows File Explorer and the Mac Finder — you drag files onto them like onto any other folder. Each share can be set to read-only.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-shield-check"/></svg> Automatic backups on three levels</h3>
|
||||
<p>Every night the box makes a backup on the box, a second copy on a second drive (if there is one), and an encrypted copy on remote storage. Your shared folders are in the second-drive copy and in the remote copy too.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lock"/></svg> A recovery code only you know</h3>
|
||||
<p>The key to your remote backup's encryption is a recovery code that appears exactly once — on your screen. We do not know it and cannot recreate it. That also means that without the code, we cannot read the remote backup either: keep it somewhere safe.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg> 56 apps to install</h3>
|
||||
<p>You install them from the Dashboard in a few clicks — no command line. Almost all of them are open source (the exceptions are marked on the apps page), and every one runs on your machine.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-stethoscope"/></svg> Remote monitoring, automatic updates</h3>
|
||||
<p>We watch how the box is doing. The Dashboard updates itself to the latest release, and the box's system gets its security updates too — you do not have to do anything. If something breaks, we see it.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-rotate-cw"/></svg> Careful app updates</h3>
|
||||
<p>A new version of an app reaches you only after we have tried it. Before the update the box makes a fresh backup, and if the new version does not start properly, the box puts the previous one back by itself, with your data.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg> In English or Hungarian</h3>
|
||||
<p>The Dashboard works in English and in Hungarian. The household picks the language, and the e-mails about the box follow it.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-home"/></svg> Works when the internet is down</h3>
|
||||
<p>The box is in your home. If the internet goes down, you still reach your photos and files on your home network — they do not depend on a faraway provider's permission.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-rotate-cw"/></svg> Restore when something goes wrong</h3>
|
||||
<p>A deleted file can be brought back from the backup. If the box itself breaks, your apps' data can be brought back from the encrypted remote backup onto the reinstalled system — with the recovery code.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section alt-bg">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Why not the <span>cloud providers?</span></h2>
|
||||
<p>The big tech companies offer convenient services, but there are some downsides...</p>
|
||||
</div>
|
||||
<div class="problem-grid">
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-coins"/></svg></div>
|
||||
<h3>Costs that never stop</h3>
|
||||
<p>You pay every month for storage and premium features, and the prices only go up.</p>
|
||||
</div>
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-eye"/></svg></div>
|
||||
<h3>Your data, in someone else's hands</h3>
|
||||
<p>Your photos, documents and personal data sit on other people's servers, in other people's hands.</p>
|
||||
</div>
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lock"/></svg></div>
|
||||
<h3>Limited control</h3>
|
||||
<p>You do not decide which services you get, or when they are switched off.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section" id="why">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Why choose <span>your own server?</span></h2>
|
||||
<p>What makes it worth it</p>
|
||||
</div>
|
||||
<div class="why-grid">
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-shield-check"/></svg> Privacy</h3>
|
||||
<p>Your data stays in your home, not on Google's or Microsoft's servers. It goes into the remote backup only encrypted.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-coins"/></svg> A one-off investment</h3>
|
||||
<p>The machine is yours, for good. No storage subscription that gets dearer every year: you pay for the electricity and, if you want it, for the management.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-zap"/></svg> Room to grow</h3>
|
||||
<p>No 15 GB limit. Add space as your needs grow — terabytes, if you need them.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-sliders-horizontal"/></svg> Full control</h3>
|
||||
<p>You decide which services you run. You are the boss, not the provider.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="content-section alt-bg" id="how-it-works">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>How it <span>works</span></h2>
|
||||
<p>Five simple steps from the start to a working system</p>
|
||||
</div>
|
||||
<div class="process-steps">
|
||||
<div class="process-step">
|
||||
<div class="step-number">1</div>
|
||||
<span class="process-connector">→</span>
|
||||
<h3>A first talk</h3>
|
||||
<p>We talk about what you need: which apps, and how much storage.</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">2</div>
|
||||
<span class="process-connector">→</span>
|
||||
<h3>Choosing the hardware</h3>
|
||||
<p>We help you find the machine with the best value for what you need.</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">3</div>
|
||||
<span class="process-connector">→</span>
|
||||
<h3>Installation</h3>
|
||||
<p>We install and set up the apps, the backups and the monitoring.</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">4</div>
|
||||
<span class="process-connector">→</span>
|
||||
<h3>Handover</h3>
|
||||
<p>We show you the system, help you bring over your existing data, and answer all your questions.</p>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">5</div>
|
||||
<h3>Running it</h3>
|
||||
<p>We watch the system, update it and check the backups. You just use it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="content-section" id="services">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>What you get <span>from us</span></h2>
|
||||
<p>Turnkey solutions, done professionally</p>
|
||||
</div>
|
||||
<div class="service-list">
|
||||
<div class="service-item">
|
||||
<span class="service-number">01</span>
|
||||
<div class="service-content">
|
||||
<h3>Buying and setting up the server</h3>
|
||||
<p>We help you choose the right hardware for your needs, and we set everything up.</p>
|
||||
</div>
|
||||
<span class="service-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-monitor"/></svg></span>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-number">02</span>
|
||||
<div class="service-content">
|
||||
<h3>Installing apps</h3>
|
||||
<p>Nextcloud, Plex, Jellyfin, Home Assistant and many more — whatever you want.</p>
|
||||
</div>
|
||||
<span class="service-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg></span>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-number">03</span>
|
||||
<div class="service-content">
|
||||
<h3>Safe remote access</h3>
|
||||
<p>Reach your server from anywhere, safely, over an encrypted connection.</p>
|
||||
</div>
|
||||
<span class="service-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg></span>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-number">04</span>
|
||||
<div class="service-content">
|
||||
<h3>Automatic backups</h3>
|
||||
<p>Regular, automatic backups on three levels: on the box, on a second drive, and encrypted on remote storage.</p>
|
||||
</div>
|
||||
<span class="service-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-hard-drive"/></svg></span>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<span class="service-number">05</span>
|
||||
<div class="service-content">
|
||||
<h3>Support and maintenance</h3>
|
||||
<p>If anything goes wrong, we are here. Regular updates, proactive monitoring.</p>
|
||||
</div>
|
||||
<span class="service-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-wrench"/></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section alt-bg" id="apps">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Apps to <span>install</span></h2>
|
||||
<p>Software you run on your own server, almost all of it open source</p>
|
||||
</div>
|
||||
|
||||
<div class="apps-showcase">
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-folder"/></svg></span>
|
||||
<h3>Files</h3>
|
||||
<p>Nextcloud, FileBrowser, Gokapi, Zipline</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-camera"/></svg></span>
|
||||
<h3>Photos & Media</h3>
|
||||
<p>Immich, Jellyfin, Plex, Audiobookshelf</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-clapperboard"/></svg></span>
|
||||
<h3>Media automation</h3>
|
||||
<p>Sonarr, Radarr, Seerr</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-file-text"/></svg></span>
|
||||
<h3>Documents</h3>
|
||||
<p>Paperless-ngx, Docmost, BookStack, Outline</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lock"/></svg></span>
|
||||
<h3>Security</h3>
|
||||
<p>Vaultwarden, PrivateBin</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-home"/></svg></span>
|
||||
<h3>Home & Lifestyle</h3>
|
||||
<p>Tandoor, Mealie, Homebox, Actual Budget</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-map"/></svg></span>
|
||||
<h3>Travel & Leisure</h3>
|
||||
<p>AdventureLog, Wanderer, Dawarich, Cal.com</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chart-column"/></svg></span>
|
||||
<h3>Start pages</h3>
|
||||
<p>Homepage, Glance, Uptime Kuma</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-gamepad-2"/></svg></span>
|
||||
<h3>Games</h3>
|
||||
<p>RoMM, Crafty Controller</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-code"/></svg></span>
|
||||
<h3>For developers</h3>
|
||||
<p>Gitea, Code-Server, OpenGist</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="apps-cta">
|
||||
<p class="apps-count">
|
||||
<strong>56</strong> apps — almost all of them <strong>open source</strong>
|
||||
</p>
|
||||
<a href="/en/apps" class="cta-button-secondary">
|
||||
See all apps →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section" id="technology">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Professional <span>technology</span></h2>
|
||||
<p>Industry-grade tools, at home</p>
|
||||
</div>
|
||||
|
||||
<div class="apps-showcase">
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-container"/></svg></span>
|
||||
<h3>Containers</h3>
|
||||
<p>Each app isolated, on Docker</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-target"/></svg></span>
|
||||
<h3>Dashboard</h3>
|
||||
<p>An interface in English or Hungarian</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-layers"/></svg></span>
|
||||
<h3>Proxmox</h3>
|
||||
<p>A stable virtualisation base</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-shield-check"/></svg></span>
|
||||
<h3>Three-level backups</h3>
|
||||
<p>On the box, on a second drive, encrypted far away</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg></span>
|
||||
<h3>Network</h3>
|
||||
<p>HTTPS, an encrypted tunnel, no open port</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-hard-drive"/></svg></span>
|
||||
<h3>Storage</h3>
|
||||
<p>SSD + HDD, a second drive for backups</p>
|
||||
</div>
|
||||
<div class="app-category-preview">
|
||||
<span class="cat-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-monitor"/></svg></span>
|
||||
<h3>Hardware</h3>
|
||||
<p>From a mini PC to a rack server</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="apps-cta">
|
||||
<p class="apps-count">
|
||||
Matched to your needs — from the <strong style="color: var(--text-1);">simplest</strong> to the <strong>most serious</strong>
|
||||
</p>
|
||||
<a href="/en/technology" class="cta-button-secondary">
|
||||
More about the technology →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section alt-bg" id="backups">
|
||||
<div class="container">
|
||||
<div class="backup-content">
|
||||
<div class="backup-text">
|
||||
<h2>Your data, <span>kept safe</span></h2>
|
||||
<p>The big cloud providers spend millions so that your data is not lost. Did you know you can get the same from your home server?</p>
|
||||
<p>Following the 3-2-1 backup rule, we build professional-grade data safety – after a disaster there is still an encrypted copy, far from your home.</p>
|
||||
<a href="/en/backups" class="cta-button-secondary">
|
||||
The backup strategy in detail →
|
||||
</a>
|
||||
</div>
|
||||
<div class="backup-visual">
|
||||
<div class="backup-rule-mini">
|
||||
<span class="number">3</span>
|
||||
<div class="rule-text">
|
||||
<h4>Three copies</h4>
|
||||
<p>The original + two backups</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="backup-rule-mini">
|
||||
<span class="number">2</span>
|
||||
<div class="rule-text">
|
||||
<h4>Two kinds of storage</h4>
|
||||
<p>Kept on different devices</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="backup-rule-mini">
|
||||
<span class="number">1</span>
|
||||
<div class="rule-text">
|
||||
<h4>One far away</h4>
|
||||
<p>An off-site backup, to be safe</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section" id="closed-test">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Closed <span>test</span></h2>
|
||||
<p>We are starting to use the system for real with a few households in Hungary</p>
|
||||
</div>
|
||||
<div class="why-grid">
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-home"/></svg> Real use</h3>
|
||||
<p>Not a demo: the box stays with you, and you put your real photos and documents on it. We help with the installation and the move, and then you use it every day.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-message-square"/></svg> Feedback</h3>
|
||||
<p>In return we ask you to tell us what annoys you, what is unclear and what does not work. An "I couldn't find this button" is worth the most to us — it tells us what to fix.</p>
|
||||
</div>
|
||||
<div class="why-card">
|
||||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-triangle-alert"/></svg> Known limits</h3>
|
||||
<p>Honestly: the Dashboard has <strong>one shared household password</strong> today; there are no separate accounts for family members yet (each app can have its own users, though). <strong>Streaming to the TV (DLNA)</strong> is not there yet: for now the media library plays in the browser and in mobile apps. And because this is a test, expect to find bugs — that is the point.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="apps-cta">
|
||||
<p class="apps-count">
|
||||
If this interests you, write to us — <strong>it commits you to nothing</strong>, first we just talk
|
||||
</p>
|
||||
<a href="/en/contact?tema=zart-teszt" class="cta-button">
|
||||
I want to be a tester →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact" id="contact">
|
||||
<div class="container">
|
||||
<div class="contact-box">
|
||||
<h2>Interested? <span>Let's talk!</span></h2>
|
||||
<div class="contact-methods">
|
||||
<a href="/en/contact" class="contact-link"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-message-square"/></svg> Contact form</a>
|
||||
<a href="mailto:info@felhom.eu" class="contact-link"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-mail"/></svg> info@felhom.eu</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 felhom.eu — Your own cloud, your own rules. Felhom serves households in Hungary.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
(function() {
|
||||
const hamburger = document.getElementById('hamburger');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
const overlay = document.getElementById('mobileOverlay');
|
||||
const 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', 'Close menu');
|
||||
}
|
||||
|
||||
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', 'Open menu');
|
||||
}
|
||||
|
||||
hamburger.addEventListener('click', function() {
|
||||
if (navLinks.classList.contains('is-open')) {
|
||||
closeMenu();
|
||||
} else {
|
||||
openMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Close on overlay click
|
||||
overlay.addEventListener('click', closeMenu);
|
||||
|
||||
// Close on nav link click
|
||||
navLinks.querySelectorAll('a').forEach(function(link) {
|
||||
link.addEventListener('click', closeMenu);
|
||||
});
|
||||
|
||||
// Close on Escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && navLinks.classList.contains('is-open')) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Close on resize if open (e.g., rotating device)
|
||||
window.addEventListener('resize', function() {
|
||||
if (window.innerWidth > 900 && navLinks.classList.contains('is-open')) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,498 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Technology — Docker, the Dashboard and Proxmox for a home server | Felhom.eu</title>
|
||||
<meta name="description" content="Industry-grade technology at home, in Hungary: Docker containers, a Dashboard in English or Hungarian, Proxmox virtualisation. HTTPS and an encrypted tunnel — with no open port.">
|
||||
|
||||
<meta name="keywords" content="Docker, dashboard, Proxmox, container, virtualisation, reverse proxy, HTTPS, encrypted tunnel, home server technology">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://felhom.eu/en/technology">
|
||||
<link rel="alternate" hreflang="hu" href="https://felhom.eu/technologiak">
|
||||
<link rel="alternate" hreflang="en" href="https://felhom.eu/en/technology">
|
||||
<link rel="alternate" hreflang="x-default" href="https://felhom.eu/technologiak">
|
||||
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:url" content="https://felhom.eu/en/technology">
|
||||
<meta property="og:title" content="Professional technology for a home server">
|
||||
<meta property="og:description" content="Docker, a Dashboard in English or Hungarian, Proxmox — industry-grade tools at home.">
|
||||
<meta property="og:image" content="https://felhom.eu/assets/og-image-en.png">
|
||||
<meta property="og:locale" content="en_GB">
|
||||
<meta property="og:site_name" content="Felhom.eu">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Professional technology for a home server">
|
||||
<meta name="twitter:description" content="Docker, a Dashboard in English or Hungarian, Proxmox — industry tools, at home.">
|
||||
<meta name="twitter:image" content="https://felhom.eu/assets/og-image-en.png">
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Article",
|
||||
"headline": "The technology behind a Felhom home server",
|
||||
"description": "Docker containers, a Dashboard in English or Hungarian and Proxmox virtualisation for a home server.",
|
||||
"author": {"@type": "Organization", "name": "Felhom.eu"},
|
||||
"publisher": {"@type": "Organization", "name": "Felhom.eu", "logo": {"@type": "ImageObject", "url": "https://felhom.eu/assets/logo.png"}},
|
||||
"mainEntityOfPage": "https://felhom.eu/en/technology"
|
||||
}
|
||||
</script>
|
||||
<!-- shared assets: bump ?v= together on any site.css/icons.svg change -->
|
||||
<link rel="stylesheet" href="/assets/site.css?v=2">
|
||||
<link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
|
||||
<script defer src="https://stats.felhom.eu/script.js" data-website-id="d419db57-5e1c-48df-bdb3-c29f25fb1661"></script>
|
||||
</head>
|
||||
<body class="page-technologiak">
|
||||
<nav>
|
||||
<div class="container">
|
||||
<a href="/en/" class="logo">
|
||||
<img src="/assets/logo.png" alt="Felhom.eu logo">
|
||||
<span class="logo-text">felhom.eu</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/en/#services">Services</a></li>
|
||||
<li><a href="/en/apps">Apps</a></li>
|
||||
<li><a href="/en/technology" class="active">Technology</a></li>
|
||||
<li><a href="/en/backups">Backups</a></li>
|
||||
<li><a href="/en/faq">FAQ</a></li>
|
||||
<li><a href="/en/contact">Contact</a></li>
|
||||
<li><a href="/technologiak" lang="hu" hreflang="hu" class="lang-switch">Magyar</a></li>
|
||||
</ul>
|
||||
<button class="hamburger" id="hamburger" aria-label="Open menu" 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>The <span>technology</span></h1>
|
||||
<p>Modern, proven tools for running a home server. This is how we build the system.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Table of Contents -->
|
||||
<section class="content-section" style="padding-top: 0;">
|
||||
<div class="container">
|
||||
<div class="toc-nav">
|
||||
<h3>Contents</h3>
|
||||
<ul class="toc-links">
|
||||
<li><a href="#containers">Why containers?</a></li>
|
||||
<li><a href="#dashboard">The control layer (Dashboard)</a></li>
|
||||
<li><a href="#proxmox">Virtualisation (Proxmox)</a></li>
|
||||
<li><a href="#network">Network and security</a></li>
|
||||
<li><a href="#storage">Storage</a></li>
|
||||
<li><a href="#hardware">Hardware set-ups</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Miért konténerek? -->
|
||||
<section class="content-section alt-bg" id="containers">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Why <span>containers?</span></h2>
|
||||
<p>The cornerstone of running a modern server</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg></span> What is a container?</h3>
|
||||
<p>Imagine that every app runs in its own sealed "box". The box holds the app and everything it depends on – so it works the same way anywhere, on any server.</p>
|
||||
<p>Containers (Docker) changed how servers are run: simpler installs, easier updates, and more reliable operation.</p>
|
||||
|
||||
<div class="highlight-box">
|
||||
<p><strong>An analogy:</strong> as if every app lived in its own flat in a block of flats. It has its own front door and its own meters, and it does not bother the neighbours – but they still share one building.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-grid">
|
||||
<div class="comparison-card">
|
||||
<div class="card-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-monitor"/></svg></div>
|
||||
<h3>Traditional install</h3>
|
||||
<div class="subtitle">"Straight onto the system"</div>
|
||||
<p>The apps are installed straight onto the operating system. They can clash with each other, and they are hard to remove.</p>
|
||||
<ul class="feature-list cons">
|
||||
<li>Dependencies can get tangled</li>
|
||||
<li>Hard to reproduce on another server</li>
|
||||
<li>Update = risk</li>
|
||||
<li>Removing an app leaves "rubbish" behind</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="comparison-card recommended">
|
||||
<div class="card-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-container"/></svg></div>
|
||||
<h3>Container install</h3>
|
||||
<div class="subtitle">Docker</div>
|
||||
<p>Every app runs on its own. A clean, tidy system that is easy to manage.</p>
|
||||
<ul class="feature-list">
|
||||
<li>Fully isolated apps</li>
|
||||
<li>One command = installed</li>
|
||||
<li>Simple updates, and a simple way back</li>
|
||||
<li>Reproducible anywhere</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Single Node - vezérlőpult -->
|
||||
<section class="content-section" id="dashboard">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>The control layer: <span>the Dashboard</span></h2>
|
||||
<p>The interface of every Felhom box, in English or Hungarian</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-target"/></svg></span> What does the Dashboard do?</h3>
|
||||
<p>The Dashboard is on every Felhom box: it is the interface, in English or Hungarian, that runs your system on its Proxmox base. It was designed for home servers: you install apps in a few clicks and never touch a command line — Docker and Proxmox do the work in the background.</p>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li>A web interface in English or Hungarian – the household chooses, and no command-line knowledge is needed</li>
|
||||
<li>App catalog – 56 apps to install in a few clicks</li>
|
||||
<li>Resource view – memory and storage use as it happens</li>
|
||||
<li>Automatic backups – databases and files, with their status watched</li>
|
||||
<li>App updates – only versions we have tried, a fresh backup first, and if the new version does not start, the box goes back to the previous one by itself</li>
|
||||
<li>System monitoring – health watched all the time, with alerts</li>
|
||||
</ul>
|
||||
|
||||
<div class="highlight-box">
|
||||
<p><strong>Good for:</strong> a home media server, a family cloud, personal projects, a small office.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack-diagram">
|
||||
<h3>How a Felhom box is built</h3>
|
||||
<div class="stack-layers">
|
||||
<div class="stack-layer">
|
||||
<div class="layer-label">Control + apps</div>
|
||||
<div class="layer-content highlight">
|
||||
<div class="layer-name">Dashboard + Apps</div>
|
||||
<div class="layer-tech">An interface in English or Hungarian · Nextcloud, Jellyfin, Immich…</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stack-layer">
|
||||
<div class="layer-label">Container engine</div>
|
||||
<div class="layer-content">
|
||||
<div class="layer-name">Docker</div>
|
||||
<div class="layer-tech">The apps run in isolated containers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stack-layer">
|
||||
<div class="layer-label">System environment</div>
|
||||
<div class="layer-content">
|
||||
<div class="layer-name">Isolated system environment</div>
|
||||
<div class="layer-tech">Your box — a cleanly separated system</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stack-layer">
|
||||
<div class="layer-label">Base layer</div>
|
||||
<div class="layer-content">
|
||||
<div class="layer-name">Proxmox VE</div>
|
||||
<div class="layer-tech">Virtualisation base · backing up the whole box, restoring</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stack-layer">
|
||||
<div class="layer-label">Hardware</div>
|
||||
<div class="layer-content">
|
||||
<div class="layer-name">The server machine</div>
|
||||
<div class="layer-tech">Mini PC, tower or server</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Proxmox -->
|
||||
<section class="content-section alt-bg" id="proxmox">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>The base layer: <span>Proxmox</span></h2>
|
||||
<p>Every Felhom machine is built on this stable base</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-layers"/></svg></span> What is Proxmox?</h3>
|
||||
<p>Proxmox VE is a free, professional virtualisation platform — the same kind of technology data centres and companies use. It is the base of every Felhom system: we build every machine on it, and the isolated system environment your apps run in sits on top of it.</p>
|
||||
|
||||
<div class="highlight-box">
|
||||
<p><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-layers"/></svg> <strong>The base, not an option:</strong> Proxmox is on every Felhom box. You do not need to know about it or deal with it — it works quietly in the background, and it is what makes your system safe and able to be backed up.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-target"/></svg></span> What does the Proxmox base give you?</h3>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>A backup before each update</strong> – before an app is updated, a fresh backup is made, and if the new version does not start, the box puts the previous one back by itself</li>
|
||||
<li><strong>The whole system is backed up</strong> – not only your data: the whole box goes into a backup too, and it can be restored from it</li>
|
||||
<li><strong>Clean separation</strong> – the control layer and your apps run well apart, which makes the system more stable and safer</li>
|
||||
<li><strong>A fast, repeatable install</strong> – setting up a new box is quick and predictable, the same way every time</li>
|
||||
</ul>
|
||||
|
||||
<div class="highlight-box">
|
||||
<p><strong>One base, one job:</strong> on a Felhom box, Proxmox runs a single isolated system environment — the one your apps work in.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Hálózat -->
|
||||
<section class="content-section alt-bg" id="network">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Network and <span>security</span></h2>
|
||||
<p>How do you reach your server safely, from anywhere?</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-rotate-cw"/></svg></span> Reverse Proxy</h3>
|
||||
<p>A reverse proxy is a "doorkeeper" that takes incoming requests and passes them to the right app. It also handles the HTTPS encryption.</p>
|
||||
|
||||
<div class="network-flow">
|
||||
<div class="flow-node">
|
||||
<div class="node-icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg></div>
|
||||
<div class="node-label">Internet</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node">
|
||||
<div class="node-icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lock"/></svg></div>
|
||||
<div class="node-label">Reverse Proxy</div>
|
||||
<div class="node-tech">Traefik</div>
|
||||
</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="flow-node">
|
||||
<div class="node-icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg></div>
|
||||
<div class="node-label">App</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="feature-list">
|
||||
<li><strong>Traefik</strong> – every app on its own subdomain, over HTTPS</li>
|
||||
<li><strong>Encrypted tunnel</strong> – the box itself builds the connection outwards, so no port has to be opened at home</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-shield"/></svg></span> Protection</h3>
|
||||
<ul class="feature-list">
|
||||
<li><strong>No open port</strong> – from outside, the box is reached only through the encrypted tunnel</li>
|
||||
<li><strong>Own sign-in</strong> – every app has its own accounts, and the Dashboard has a password</li>
|
||||
<li><strong>Family gate</strong> – some apps sit behind each family member's own sign-in, so a stranger never even reaches the app</li>
|
||||
<li><strong>Security updates</strong> – the box's system gets them by itself</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tárolás -->
|
||||
<section class="content-section" id="storage">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Storage and <span>data safety</span></h2>
|
||||
<p>Where and how should you keep your data?</p>
|
||||
</div>
|
||||
|
||||
<div class="comparison-grid">
|
||||
<div class="comparison-card">
|
||||
<div class="card-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-zap"/></svg></div>
|
||||
<h3>SSD (NVMe/SATA)</h3>
|
||||
<div class="subtitle">Fast storage</div>
|
||||
<ul class="feature-list">
|
||||
<li>Operating system</li>
|
||||
<li>Databases</li>
|
||||
<li>Apps</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="comparison-card">
|
||||
<div class="card-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-database"/></svg></div>
|
||||
<h3>HDD</h3>
|
||||
<div class="subtitle">Large capacity</div>
|
||||
<ul class="feature-list">
|
||||
<li>Media library</li>
|
||||
<li>Photo archive</li>
|
||||
<li>Backups</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" style="margin-top: 32px;">
|
||||
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-rotate-cw"/></svg></span> Backups on three levels – how we protect your data</h3>
|
||||
<p>Every night a Felhom box makes a <strong>backup on the box</strong>, a <strong>second copy on a second drive</strong>, and an <strong>encrypted copy on remote storage</strong>. The levels protect together: the local one is fast, and the remote one survives even if the box itself is physically harmed.</p>
|
||||
|
||||
<div class="warning-box">
|
||||
<p><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-triangle-alert"/></svg> <strong>More disks are not a backup on their own!</strong> RAID-like set-ups protect against hardware failure, but not against an accidental delete or ransomware. That is why our backups always sit on a separate level, not in the disks.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Hardver konfigurációk -->
|
||||
<section class="content-section alt-bg" id="hardware">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Hardware <span>set-ups</span></h2>
|
||||
<p>Which machine do you need? A few example set-ups</p>
|
||||
</div>
|
||||
|
||||
<div class="hardware-grid">
|
||||
<div class="hardware-card">
|
||||
<div class="hardware-card-header">
|
||||
<div class="hw-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg></div>
|
||||
<h3>Mini PC + NAS</h3>
|
||||
<div class="hw-subtitle">Starter / Home</div>
|
||||
</div>
|
||||
<div class="hardware-card-body">
|
||||
<p>Compact, quiet and energy-saving.</p>
|
||||
<ul class="spec-list">
|
||||
<li><span class="spec-label">CPU</span><span class="spec-value">Intel N100</span></li>
|
||||
<li><span class="spec-label">RAM</span><span class="spec-value">16-32 GB</span></li>
|
||||
<li><span class="spec-label">SSD</span><span class="spec-value">256-512 GB</span></li>
|
||||
<li><span class="spec-label">Power use</span><span class="spec-value">15-35W</span></li>
|
||||
</ul>
|
||||
<div class="price-range">
|
||||
<div class="label">Estimated cost</div>
|
||||
<div class="price">80.000 - 150.000 Ft</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hardware-card">
|
||||
<div class="hardware-card-header">
|
||||
<div class="hw-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-radio-tower"/></svg></div>
|
||||
<h3>Tower server</h3>
|
||||
<div class="hw-subtitle">Advanced / Family</div>
|
||||
</div>
|
||||
<div class="hardware-card-body">
|
||||
<p>More power and more storage.</p>
|
||||
<ul class="spec-list">
|
||||
<li><span class="spec-label">CPU</span><span class="spec-value">Intel i5/i7</span></li>
|
||||
<li><span class="spec-label">RAM</span><span class="spec-value">32-64 GB</span></li>
|
||||
<li><span class="spec-label">Storage</span><span class="spec-value">4-8 TB</span></li>
|
||||
<li><span class="spec-label">Power use</span><span class="spec-value">50-120W</span></li>
|
||||
</ul>
|
||||
<div class="price-range">
|
||||
<div class="label">Estimated cost</div>
|
||||
<div class="price">200.000 - 400.000 Ft</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hardware-card">
|
||||
<div class="hardware-card-header">
|
||||
<div class="hw-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-building-2"/></svg></div>
|
||||
<h3>Rack server</h3>
|
||||
<div class="hw-subtitle">Business / on request</div>
|
||||
</div>
|
||||
<div class="hardware-card-body">
|
||||
<p>Industrial quality, high reliability.</p>
|
||||
<ul class="spec-list">
|
||||
<li><span class="spec-label">CPU</span><span class="spec-value">Xeon / EPYC</span></li>
|
||||
<li><span class="spec-label">RAM</span><span class="spec-value">64-256 GB ECC</span></li>
|
||||
<li><span class="spec-label">Storage</span><span class="spec-value">8-24 bay</span></li>
|
||||
<li><span class="spec-label">Extra</span><span class="spec-value">IPMI, red. PSU</span></li>
|
||||
</ul>
|
||||
<div class="price-range">
|
||||
<div class="label">Estimated cost (used)</div>
|
||||
<div class="price">150.000 - 600.000 Ft</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-card" style="margin-top: 48px;">
|
||||
<h3><span class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lightbulb"/></svg></span> Which one should you choose?</h3>
|
||||
<div class="highlight-box">
|
||||
<p><strong>Our advice:</strong> start small! A good mini PC is enough for most homes, and you can expand it later. A rack server is a business / on-request set-up — a home rarely needs one.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<h2>Not sure which <span>set-up is right for you?</span></h2>
|
||||
<p>Let's talk through what you need, and we will help you find the right set-up.</p>
|
||||
<a href="/en/contact" class="cta-button">Get in touch →</a>
|
||||
<a href="/en/apps" class="cta-button-secondary">Browse the apps →</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2026 felhom.eu — Your own cloud, your own rules. Felhom serves households in Hungary.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<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', 'Close menu');
|
||||
}
|
||||
|
||||
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', 'Open menu');
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user