felhom.eu/website/preview/m1/kapcsolat.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: kapcsolatfelvétel a vezérlőpult felületén.">
    <title>Kapcsolat · 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">Hogyan működik</a></li>
                    <li><a href="teszteles.html">Tesztelés</a></li>
                    <li><a href="kapcsolat.html" class="active">Kapcsolat</a></li>
            </ul>
            <div class="sidebar-footer">
                <span class="version">mockup</span>
            </div>
        </div>
    </nav>
    <main class="content">
        <div class="page-header"><h2>Kapcsolat</h2></div>
        <p class="form-hint">Írj nekünk bátran. A mockupban az űrlap nem küld semmit.</p>

        <div class="alerts-container">
            <div class="alert-banner alert-banner-info">
                <span class="alert-icon"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-info"/></svg></span>
                <span class="alert-message">Ez egy bemutató oldal: a küldés gomb szándékosan ki van kapcsolva. Az éles űrlap a <a class="alert-link" href="/kapcsolat">felhom.eu/kapcsolat</a> címen működik.</span>
            </div>
        </div>

        <form class="mockup-form" onsubmit="return false">
            <div class="form-row">
                <div class="form-group">
                    <label for="name">Név <span class="required">*</span></label>
                    <input class="form-control" type="text" id="name" name="name" placeholder="Teljes neved">
                </div>
                <div class="form-group">
                    <label for="email">Email <span class="required">*</span></label>
                    <input class="form-control" type="email" id="email" name="email" placeholder="pelda@email.hu">
                </div>
            </div>
            <div class="form-group">
                <label for="subject">Tárgy <span class="required">*</span></label>
                <select class="form-control" id="subject" name="subject">
                    <option value="" disabled selected>Válassz témát...</option>
                    <option value="zart-teszt">Zárt teszt: jelentkezem tesztelőnek</option>
                    <option value="erdeklodes">Érdeklődés: szeretném megismerni a szolgáltatást</option>
                    <option value="arajanlat">Árajánlat kérés: konkrét igényeim vannak</option>
                    <option value="tamogatas">Támogatás: meglévő szerveremet érintő kérdés</option>
                    <option value="egyeb">Egyéb</option>
                </select>
            </div>
            <div class="form-group">
                <label for="message">Üzenet <span class="required">*</span></label>
                <textarea class="form-control" id="message" name="message" rows="5" placeholder="Írd le, miben segíthetünk..."></textarea>
            </div>
            <div class="checkbox-group">
                <input type="checkbox" id="privacy" name="privacy">
                <label for="privacy">Elolvastam az <a href="/adatkezeles" target="_blank" rel="noopener">Adatkezelési tájékoztatót</a>, és hozzájárulok, hogy a megadott nevemet, e-mail-címemet, üzenetemet és csatolt fájljaimat a megkeresésem megválaszolására kezeljék. Az üzenetet levélküldő és levelezési szolgáltatók továbbítják. A hozzájárulásomat bármikor visszavonhatom az info@felhom.eu címen.</label>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary" disabled>Üzenet küldése →</button>
                <span class="nav-off-hint is-inline">a mockupban nem küld, az éles oldalon működik</span>
            </div>
        </form>

        <div class="app-info-grid">
            <div class="app-info-card">
                <h3>Közvetlen email</h3>
                <p><a class="app-info-link" href="mailto:info@felhom.eu">info@felhom.eu</a></p>
            </div>
            <div class="app-info-card">
                <h3>Ki áll mögötte</h3>
                <p>A Felhom mögött egy ember áll: <strong>Nagyfenyvesi Viktor</strong>. Ha írsz, ő válaszol.</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>