admin
dd89e1bf99
gates / gates (push) Failing after 6m48s
Measured at 390px: the sidebar stayed an in-flow flex child and squeezed the content column to ~208px, so the launcher grid collapsed to ONE column and the front page became 15 597px tall on a phone; the contact page overflowed horizontally (scrollWidth 467 in a 375 viewport). The cause was not missing CSS - the controller's off-canvas rules were all copied. They are gated on a 'js' class that layout.html sets in an inline head script and the mockup shell did not. Copied that hook verbatim, so the drawer engages only where the drawer script can open it, and the no-js path (sidebar static and full width, burger hidden) is the controller's own.
92 lines
5.7 KiB
HTML
92 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="hu" class="no-js">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<meta name="description" content="Mockup: hogyan jutsz el a működő otthoni szerverig.">
|
|
<title>Hogyan működik · Felhom.eu mockup</title>
|
|
<script>
|
|
/* The controller's own progressive-enhancement hook (layout.html): flip no-js -> js before
|
|
the first CSS-dependent paint, so the off-canvas drawer engages ONLY where the drawer
|
|
script can open it. Without it the sidebar stays an in-flow flex child on a phone and
|
|
squeezes the content column - which is exactly what happened here first time. */
|
|
document.documentElement.className=document.documentElement.className.replace('no-js','js');
|
|
</script>
|
|
<link rel="stylesheet" href="/preview/mockup.css?v=1">
|
|
<link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
|
|
</head>
|
|
<body class="mockup">
|
|
<header class="mobile-topbar">
|
|
<a href="index.html" 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="Menü">
|
|
<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">
|
|
<img src="/assets/logo_notext_white.svg" alt="Felhom.eu" class="sidebar-logo">
|
|
</div>
|
|
<ul class="nav-links">
|
|
<li><a href="index.html"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-rocket"/></svg>Indítópult</a></li>
|
|
<li><a href="alkalmazasok.html"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-cloud"/></svg>Alkalmazások</a></li>
|
|
<li><a href="mentesek.html"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-shield"/></svg>Biztonsági mentés</a></li>
|
|
<li><span class="nav-off" title="a saját dobozodon működik"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-hard-drive"/></svg>Tárhely<span class="nav-off-hint">a saját dobozodon működik</span></span></li>
|
|
<li><span class="nav-off" title="a saját dobozodon működik"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-layout-grid"/></svg>Megosztás<span class="nav-off-hint">a saját dobozodon működik</span></span></li>
|
|
<li><span class="nav-off" title="a saját dobozodon működik"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-cpu"/></svg>Rendszermonitor<span class="nav-off-hint">a saját dobozodon működik</span></span></li>
|
|
<li><span class="nav-off" title="a saját dobozodon működik"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-settings"/></svg>Beállítások<span class="nav-off-hint">a saját dobozodon működik</span></span></li>
|
|
</ul>
|
|
<div class="sidebar-bottom">
|
|
<div class="nav-group-label">A Felhomról</div>
|
|
<ul class="nav-links nav-links-sub">
|
|
<li><a href="hogyan.html" class="active">Hogyan működik</a></li>
|
|
<li><a href="teszteles.html">Tesztelés</a></li>
|
|
<li><a href="kapcsolat.html">Kapcsolat</a></li>
|
|
</ul>
|
|
<div class="sidebar-footer">
|
|
<span class="version">mockup</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main class="content">
|
|
<div class="page-header"><h2>Hogyan működik?</h2></div>
|
|
<p class="form-hint">Az első beszélgetéstől a működő rendszerig.</p>
|
|
<div class="app-info-grid how-grid">
|
|
<div class="app-info-card">
|
|
<h3>Egyeztetés</h3>
|
|
<p>Megbeszéljük az igényeidet: milyen alkalmazásokra van szükséged, és mekkora tárhelyet szeretnél.</p>
|
|
</div>
|
|
<div class="app-info-card">
|
|
<h3>Hardver kiválasztás</h3>
|
|
<p>Segítünk megtalálni a legjobb ár-érték arányú gépet, ami az igényeidnek megfelel.</p>
|
|
</div>
|
|
<div class="app-info-card">
|
|
<h3>Telepítés</h3>
|
|
<p>Feltelepítjük és bekonfiguráljuk az alkalmazásokat, a mentéseket, és a monitoringot.</p>
|
|
</div>
|
|
<div class="app-info-card">
|
|
<h3>Átadás</h3>
|
|
<p>Bemutatjuk a rendszert, segítünk áthozni a meglévő adataidat, és válaszolunk minden kérdésedre.</p>
|
|
</div>
|
|
<div class="app-info-card">
|
|
<h3>Üzemeltetés</h3>
|
|
<p>Figyeljük a rendszert, frissítünk, mentéseket ellenőrzünk. Te csak használod.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</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;b.setAttribute('aria-expanded','true');}
|
|
function close(){s.classList.remove('is-open');k.hidden=true;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')close();});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|