6059505216
gates / gates (push) Failing after 13m11s
Part D. Every public page now wears the controller's frame around the website's
own content. One commit, as asked: never half old, half new.
20 pages switched (12 Hungarian incl. the hidden prices page, 8 English)
website/preview/ deleted entirely - A, M1, M2 and M3 studies all gone
robots.txt: the Disallow: /preview/ line removed with them
site.css?v=22 / shell.css?v=22 on every page
PROVED before pushing, not after:
* HEAD TAGS: title, meta description, keywords, author, robots, canonical, every
hreflang, all seven Open Graph tags, all four Twitter tags and the JSON-LD
captured on all 19 pages before the switch and compared after. The ONLY
difference anywhere is the dash substitution inside the two FAQ pages'
FAQPage JSON-LD - verified by applying the same substitution to the "before"
copy and getting an exact match. Nothing else moved.
* VISIBLE TEXT: identical to the live pages word for word, legal texts identical
with no substitution permitted at all.
* No page is left noindex (the two download pages' noindex,follow is their own,
pre-existing and unchanged), no page mentions /preview/, every page has a
footer, no page overflows at 390px.
THE HEAD-TAG DIFF EARNED ITS PLACE. The home page was about to ship carrying
`noindex, nofollow` from the preview, and had lost meta keywords, meta author, all
seven Open Graph tags, all four Twitter tags and the LocalBusiness JSON-LD -
because its head was hand-built while every other page carried its live one over.
The diff caught it; nothing on the rendered page would have. The generator now
uses the live head for EVERY page including the home one.
szolgaltatasok-nonpublic.html was converted too. It is in no menu and was not in
the brief's list, but leaving one page on the old chrome would have left the site
half-switched - which is the one thing part D was not allowed to do.
scripts/site_gates.py: SHELL is now the real page set; MOCKUPS is empty; gate 3's
old nav/footer loop keeps working for any page added later WITHOUT the shell, and
skips the ones that have it.
372 lines
25 KiB
HTML
372 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="no-js">
|
||
<head>
|
||
<script>document.documentElement.className=document.documentElement.className.replace('no-js','js');</script>
|
||
<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. 58 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=22">
|
||
<link rel="stylesheet" href="/assets/shell.css?v=22">
|
||
<link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
|
||
<script defer src="/assets/gallery.js?v=2"></script>
|
||
<script defer src="https://stats.felhom.eu/script.js" data-website-id="d419db57-5e1c-48df-bdb3-c29f25fb1661"></script>
|
||
</head>
|
||
<body class="shell page-index">
|
||
<header class="mobile-topbar">
|
||
<a href="/en/" class="mobile-topbar-logo"><img src="/assets/logo_notext_white.svg" alt="Felhom.eu"></a>
|
||
<button type="button" class="nav-burger" id="navBurger" aria-expanded="false" aria-controls="sidebar" aria-label="Menu">
|
||
<span class="hamburger-box"><span class="hamburger-line"></span><span class="hamburger-line"></span><span class="hamburger-line"></span></span>
|
||
</button>
|
||
</header>
|
||
<div class="nav-backdrop" id="navBackdrop" hidden></div>
|
||
<nav class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<a href="/en/" class="sidebar-logo-link">
|
||
<img src="/assets/logo_notext_white.svg" alt="" class="sidebar-logo" aria-hidden="true">
|
||
<img src="/assets/logo-wordmark.png" alt="felhom.eu" class="sidebar-word">
|
||
</a>
|
||
</div>
|
||
<ul class="nav-links">
|
||
<li><a href="/en/" class="active"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-home"/></svg>Home</a></li>
|
||
<li><a href="/en/#services"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-rocket"/></svg>Services</a></li>
|
||
<li class="nav-group">
|
||
<button type="button" class="nav-group-toggle" aria-expanded="false" aria-controls="nav-group-apps"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg>Applications<svg class="ico nav-chevron" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chevron-down"/></svg></button>
|
||
<ul id="nav-group-apps" class="nav-links nav-links-sub nav-links-nested">
|
||
<li><a href="/en/apps">All applications</a></li>
|
||
<li><a href="/en/apps#files-office">Files & Office</a></li>
|
||
<li><a href="/en/apps#media-entertainment">Media & Entertainment</a></li>
|
||
<li><a href="/en/apps#home-lifestyle">Home & Lifestyle</a></li>
|
||
<li><a href="/en/apps#productivity-knowledge">Productivity & Knowledge</a></li>
|
||
<li><a href="/en/apps#system-development">System & Development</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="/en/technology"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-layers"/></svg>Technology</a></li>
|
||
<li><a href="/en/backups"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-shield-check"/></svg>Backups</a></li>
|
||
</ul>
|
||
<div class="sidebar-bottom">
|
||
<a href="/en/testing" class="btn btn-outline sidebar-cta">Apply as a tester →</a>
|
||
<div class="nav-group-label">About Felhom</div>
|
||
<ul class="nav-links nav-links-sub">
|
||
<li><a href="/en/#how-it-works">How it works</a></li>
|
||
<li><a href="/en/faq">FAQ</a></li>
|
||
<li><a href="/en/contact">Contact</a></li>
|
||
</ul>
|
||
<div class="sidebar-footer">
|
||
<details class="lang-globe"><summary class="lang-globe-btn" aria-label="Language" title="Language"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg></summary><ul class="lang-globe-menu"><li><a href="/" lang="hu" hreflang="hu" class="lang-globe-item">Magyar</a></li><li><a href="/en/" lang="en" hreflang="en" class="lang-globe-item current" aria-current="true">English</a></li></ul></details>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<main class="content">
|
||
<div class="page-header">
|
||
<h1>Your own cloud, your own rules</h1>
|
||
<span class="domain-badge">Home server service</span>
|
||
</div>
|
||
|
||
<section class="hero-row">
|
||
<div class="hero-copy">
|
||
<p class="hero-lede">A small machine in your home: your photos, your documents, your films. A backup is made every night. We watch it, you use it.</p>
|
||
<a href="/en/testing" class="btn btn-primary btn-lg">Apply as a tester →</a>
|
||
</div>
|
||
<div class="hero-window" aria-label="A picture of the Dashboard">
|
||
<div class="hero-window-bar">
|
||
<span class="hw-dot"></span><span class="hw-dot"></span><span class="hw-dot"></span>
|
||
<span class="hero-window-title">yourhome.hu <span class="sample">sample</span></span>
|
||
</div>
|
||
<div class="hero-window-body">
|
||
<p class="hero-window-lede">This is what the box's Dashboard looks like.</p>
|
||
<div class="launch-grid launch-grid--mini">
|
||
<a class="launch-cell" href="/en/apps#immich">
|
||
<span class="launch-tile" style="background: hsl(18, 45%, 38%)"><span class="launch-mono">I</span><img class="launch-logo" src="/assets/immich-logo.svg" alt="" loading="lazy"></span>
|
||
<span class="launch-name">Immich</span>
|
||
</a>
|
||
<a class="launch-cell" href="/en/apps#jellyfin">
|
||
<span class="launch-tile" style="background: hsl(348, 45%, 38%)"><span class="launch-mono">J</span><img class="launch-logo" src="/assets/jellyfin-logo.svg" alt="" loading="lazy"></span>
|
||
<span class="launch-name">Jellyfin</span>
|
||
</a>
|
||
<a class="launch-cell" href="/en/apps#nextcloud">
|
||
<span class="launch-tile" style="background: hsl(201, 45%, 38%)"><span class="launch-mono">N</span><img class="launch-logo" src="/assets/nextcloud-logo.svg" alt="" loading="lazy"></span>
|
||
<span class="launch-name">Nextcloud</span>
|
||
</a>
|
||
<a class="launch-cell" href="/en/apps#vaultwarden">
|
||
<span class="launch-tile" style="background: hsl(66, 45%, 38%)"><span class="launch-mono">V</span><img class="launch-logo" src="/assets/vaultwarden-logo.svg" alt="" loading="lazy"></span>
|
||
<span class="launch-name">Vaultwarden</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="shell-section" id="services">
|
||
<div class="sec-head">
|
||
<h2>What the box does today</h2>
|
||
<p>Not a plan, not a promise — these work today on a live Felhom box</p>
|
||
</div>
|
||
<div class="caps">
|
||
<div class="caps-group">
|
||
<h3>What you use every day</h3>
|
||
<ul class="caps-list">
|
||
<li class="caps-item">
|
||
<h4><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-camera"/></svg> Photos, documents, media</h4>
|
||
<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>
|
||
</li>
|
||
<li class="caps-item">
|
||
<h4><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-folder"/></svg> Network shares</h4>
|
||
<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>
|
||
</li>
|
||
<li class="caps-item">
|
||
<h4><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg> 58 apps to install</h4>
|
||
<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>
|
||
</li>
|
||
<li class="caps-item">
|
||
<h4><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg> In English or Hungarian</h4>
|
||
<p>The Dashboard works in English and in Hungarian. The household picks the language, and the e-mails about the box follow it.</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="caps-group">
|
||
<h3>What protects you in the background</h3>
|
||
<ul class="caps-list">
|
||
<li class="caps-item">
|
||
<h4><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-shield-check"/></svg> Automatic backups on three levels</h4>
|
||
<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>
|
||
</li>
|
||
<li class="caps-item">
|
||
<h4><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lock"/></svg> A recovery code only you know</h4>
|
||
<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>
|
||
</li>
|
||
<li class="caps-item">
|
||
<h4><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-rotate-cw"/></svg> Restore when something goes wrong</h4>
|
||
<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>
|
||
</li>
|
||
<li class="caps-item">
|
||
<h4><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-home"/></svg> Works when the internet is down</h4>
|
||
<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>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="caps-group">
|
||
<h3>What we take care of</h3>
|
||
<ul class="caps-list">
|
||
<li class="caps-item">
|
||
<h4><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-stethoscope"/></svg> Remote monitoring, automatic updates</h4>
|
||
<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>
|
||
</li>
|
||
<li class="caps-item">
|
||
<h4><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-rotate-cw"/></svg> Careful app updates</h4>
|
||
<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>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="shell-section" id="dashboard">
|
||
<div class="sec-head">
|
||
<h2>What the Dashboard looks like</h2>
|
||
<p>Real pictures from a Felhom box — click one for the full size</p>
|
||
</div>
|
||
<div class="dash-grid">
|
||
<figure class="dash-shot">
|
||
<a href="/assets/dashboard-start-en.webp" data-gallery="dashboard"><img src="/assets/dashboard-start-en.webp" alt="The Dashboard's Launcher: tiles of the apps installed at home" width="1440" height="900" loading="lazy"></a>
|
||
<figcaption><strong>Launcher</strong> — every app you have, one click away.</figcaption>
|
||
</figure>
|
||
<figure class="dash-shot">
|
||
<a href="/assets/dashboard-apps-en.webp" data-gallery="dashboard"><img src="/assets/dashboard-apps-en.webp" alt="The Apps page: cards of installed and installable apps, with their status" width="1440" height="900" loading="lazy"></a>
|
||
<figcaption><strong>Apps</strong> — install in a few clicks, and see what runs and what is up to date.</figcaption>
|
||
</figure>
|
||
<figure class="dash-shot">
|
||
<a href="/assets/dashboard-app-en.webp" data-gallery="dashboard"><img src="/assets/dashboard-app-en.webp" alt="An app's own page: what it is for, pictures, and the first steps" width="1440" height="900" loading="lazy"></a>
|
||
<figcaption><strong>An app's page</strong> — what it is for, where your files go, and how to start.</figcaption>
|
||
</figure>
|
||
<figure class="dash-shot">
|
||
<a href="/assets/dashboard-backups-en.webp" data-gallery="dashboard"><img src="/assets/dashboard-backups-en.webp" alt="The backups page: each app's database backed up overnight, and checked" width="1440" height="900" loading="lazy"></a>
|
||
<figcaption><strong>Backups</strong> — every night each app's database is backed up and checked.</figcaption>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="shell-section" id="how-it-works">
|
||
<div class="sec-head">
|
||
<h2>How it works</h2>
|
||
<p>From the first conversation to a working system.</p>
|
||
</div>
|
||
<div class="flow">
|
||
<div class="flow-step">
|
||
<h3>A first talk</h3>
|
||
<p>We talk about what you need: which apps, and how much storage.</p>
|
||
</div>
|
||
<div class="flow-step">
|
||
<h3>Choosing the hardware</h3>
|
||
<p>We help you find the machine with the best value for what you need.</p>
|
||
</div>
|
||
<div class="flow-step">
|
||
<h3>Installation</h3>
|
||
<p>We install and set up the apps, the backups and the monitoring.</p>
|
||
</div>
|
||
<div class="flow-step">
|
||
<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="flow-step">
|
||
<h3>Running it</h3>
|
||
<p>We watch the system, update it and check the backups. You just use it.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="shell-section" id="why">
|
||
<div class="sec-head">
|
||
<h2>Why your own?</h2>
|
||
<p>The same convenience, on different terms.</p>
|
||
</div>
|
||
<div class="vs">
|
||
<div class="vs-head">
|
||
<div>With a cloud provider</div>
|
||
<div>On your own box</div>
|
||
</div>
|
||
<div class="vs-row">
|
||
<div>You pay every month for storage and premium features, and the prices only go up.</div>
|
||
<div><strong>The machine is yours, for good.</strong> No storage subscription that gets dearer every year: you pay for the electricity and, if you want it, for the management.</div>
|
||
</div>
|
||
<div class="vs-row">
|
||
<div>Your photos, documents and personal data sit on other people's servers, in other people's hands.</div>
|
||
<div><strong>Your data stays in your home</strong>, not on Google's or Microsoft's servers. It goes into the remote backup only encrypted.</div>
|
||
</div>
|
||
<div class="vs-row">
|
||
<div>The storage runs out, and when it is full you pay again.</div>
|
||
<div><strong>No 15 GB limit.</strong> Add space as your needs grow — terabytes, if you need them.</div>
|
||
</div>
|
||
<div class="vs-row">
|
||
<div>You do not decide which services you get, or when they are switched off.</div>
|
||
<div><strong>You decide which services you run.</strong> You are the boss, not the provider.</div>
|
||
</div>
|
||
</div>
|
||
<div class="band">
|
||
<div class="band-item">
|
||
<h3>What you can install</h3>
|
||
<p>58 apps — almost all of them open source</p>
|
||
<a href="/en/apps" class="btn btn-outline">See all applications →</a>
|
||
</div>
|
||
<div class="band-item">
|
||
<h3>What runs underneath</h3>
|
||
<p>Docker containers on a Proxmox base, three-level backups, an encrypted tunnel with no open port, a Dashboard in English or Hungarian. Matched to your needs, <strong>from the simplest to the most serious</strong>.</p>
|
||
<a href="/en/technology" class="btn btn-outline">More about the technology →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="shell-section" id="closed-test">
|
||
<div class="sec-head">
|
||
<h2>Closed test</h2>
|
||
<p>We are starting to use the system for real with a few households in Hungary</p>
|
||
</div>
|
||
<div class="app-info-grid">
|
||
<div class="app-info-card">
|
||
<h3>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="app-info-card">
|
||
<h3>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>
|
||
<div class="alerts-container">
|
||
<div class="alert-banner alert-banner-warning">
|
||
<span class="alert-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-triangle-alert"/></svg></span>
|
||
<span class="alert-message"><strong>Known limits, honestly.</strong> Honestly: the Dashboard has one shared household password today; there are no separate accounts for family members yet (each app can have its own users, though). Streaming to the TV (DLNA) 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.</span>
|
||
</div>
|
||
</div>
|
||
<div class="close-cta">
|
||
<p>If this interests you, write. <strong>It commits you to nothing</strong>, we just talk first.</p>
|
||
<a href="/en/testing" class="btn btn-primary btn-lg">Apply as a tester →</a>
|
||
<div class="who-mini">
|
||
<img src="/assets/operator-portrait-small.webp" alt="Viktor Nagyfenyvesi, who runs Felhom" width="160" height="200" loading="lazy">
|
||
<p>There is one person behind Felhom: <strong>Viktor Nagyfenyvesi</strong>. If you write, he answers. <a href="/en/contact#ki-all-mogotte">Who is behind it →</a></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2026 felhom.eu – Your own cloud, your own rules. Felhom serves households in Hungary.</p>
|
||
<p class="footer-legal">Operated by Nagyfenyvesi Viktor · <a href="mailto:info@felhom.eu">info@felhom.eu</a> · <a href="/adatkezeles">Privacy notice (Hungarian)</a> · <a href="/feltetelek">Terms (Hungarian)</a></p>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
<script>
|
||
(function(){
|
||
var b=document.getElementById('navBurger'),s=document.getElementById('sidebar'),k=document.getElementById('navBackdrop');
|
||
if(!b||!s||!k)return;
|
||
function open(){s.classList.add('is-open');k.hidden=false;document.body.classList.add('nav-open');b.setAttribute('aria-expanded','true');}
|
||
function close(){s.classList.remove('is-open');k.hidden=true;document.body.classList.remove('nav-open');b.setAttribute('aria-expanded','false');}
|
||
b.addEventListener('click',function(){s.classList.contains('is-open')?close():open();});
|
||
k.addEventListener('click',close);
|
||
document.addEventListener('keydown',function(e){if(e.key==='Escape'&&s.classList.contains('is-open')){close();b.focus();}});
|
||
s.querySelectorAll('a').forEach(function(l){l.addEventListener('click',close);});
|
||
window.addEventListener('resize',function(){if(window.innerWidth>768)close();});
|
||
})();
|
||
document.addEventListener('click',function(e){
|
||
var btn=e.target.closest?e.target.closest('.nav-group-toggle'):null;
|
||
if(!btn)return;
|
||
var g=btn.closest('.nav-group');if(!g)return;
|
||
var willOpen=!g.classList.contains('is-open');
|
||
document.querySelectorAll('.nav-group.is-open').forEach(function(x){
|
||
x.classList.remove('is-open');
|
||
var t=x.querySelector('.nav-group-toggle');if(t)t.setAttribute('aria-expanded','false');
|
||
});
|
||
if(willOpen){g.classList.add('is-open');btn.setAttribute('aria-expanded','true');}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|