AI weboldal átvétel ellenőrzőlistája v0 demóval

Teljes, másolható index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI átvételi ellenőrző lista – v0 demo</title>
    <style>
        *{box-sizing:border-box;margin:0;padding:0}
        body{background:#202632;color:#e6eef8;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:16px}
        .demo__card{background:#2a313f;border-radius:24px;padding:28px;max-width:720px;width:100%;box-shadow:0 12px 28px rgba(0,0,0,.5)}
        h1{font-size:1.9rem;font-weight:600;line-height:1.3;margin-bottom:.1rem;letter-spacing:-.02em}
        .subtitle{color:#9fb0c7;margin-bottom:2rem;border-left:5px solid #39a0ff;padding-left:14px;font-weight:350}
        .checklist-label{display:block;font-weight:500;margin-bottom:1rem;font-size:1.1rem;color:#cddbea}
        .field{display:flex;align-items:flex-start;gap:12px;padding:8px 0;border-bottom:1px dashed #3d4657;cursor:pointer}
        .field:hover{background:#2b3441;border-radius:10px;padding-left:6px;padding-right:6px}
        .field input[type="checkbox"]{width:20px;height:20px;margin-top:2px;accent-color:#39a0ff;flex-shrink:0;cursor:pointer}
        .field label{font-size:1rem;line-height:1.45;cursor:pointer;color:#e6eef8}
        .controls{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 10px}
        .btn{background:#39a0ff;border:none;border-radius:14px;padding:12px 20px;font-weight:600;font-size:1rem;color:#101419;cursor:pointer;transition:filter .15s, transform .05s;box-shadow:0 4px 8px rgba(0,0,0,.2)}
        .btn:hover{filter:brightness(1.08)}
        .btn:active{transform:scale(0.97)}
        .btn–reset{background:#4a5a70;color:#e6eef8;font-weight:500}
        .btn–reset:hover{background:#5b6d85}
        .feedback{margin-top:18px;padding:14px 18px;border-radius:16px;background:#0d1117;border-left:6px solid #39a0ff;min-height:48px;font-weight:450;font-size:1.05rem;box-shadow: inset 0 1px 4px rgba(0,0,0,.4)}
        .feedback.success{border-left-color:#35d07f;background:#142c1e}
        .feedback.error{border-left-color:#ff6b6b;background:#2e1520}
        .demo__meta{display:flex;justify-content:space-between;align-items:center;margin-top:18px;color:#93a5bb;font-size:.92rem}
        .footer-note{font-size:.8rem;text-align:right}
        .visible-result{background:#1a1e26;padding:0.75rem 1rem;border-radius:14px;margin-top:12px;border:1px solid #3d4755;display:flex;align-items:center;gap:8px}
        .visible-result span{color:#b2c8e2}
    </style>
</head>
<body>
<div class="demo__card">
    <h1>AI átvételi ellenőrzőlista</h1>
    <div class="subtitle">v0 – önálló interaktív demó</div>

    <!-- ellenőrzőlista elemek (dinamikusan is mehetne, de explicit listák a kódban) -->
    <div id="checklist-container">
        <div class="field">
            <input type="checkbox" id="item1" class="chk-item" value="✅ annotációk hitelesek">
            <label for="item1">Annotációk / AI szövegek emberi átnézése</label>
        </div>
        <div class="field">
            <input type="checkbox" id="item2" class="chk-item" value="✅ hardver kompatibilitás">
            <label for="item2">Hardver-kompatibilitás legalább 2 böngészőben</label>
        </div>
        <div class="field">
            <input type="checkbox" id="item3" class="chk-item" value="✅ hibaüzenetek érthetőek">
            <label for="item3">Hibaüzenetek és visszajelzések – érthető, nem mesterséges</label>
        </div>
        <div class="field">
            <input type="checkbox" id="item4" class="chk-item" value="✅ szenzitív adatok kezelése">
            <label for="item4">Szenzitív adat használata? (tiltott a kódban)</label>
        </div>
        <div class="field">
            <input type="checkbox" id="item5" class="chk-item" value="✅ beépített magyarázat">
            <label for="item5">AI generált elem látható, magyarázattal ellátva</label>
        </div>
        <div class="field">
            <input type="checkbox" id="item6" class="chk-item" value="✅ nincs külső hívás">
            <label for="item6">Külső script / API hívás nélkül működik</label>
        </div>
        <div class="field">
            <input type="checkbox" id="item7" class="chk-item" value="✅ szöveg textContent">
            <label for="item7">Felhasználói szöveg: textContent használat, nincs innerHTML</label>
        </div>
        <div class="field">
            <input type="checkbox" id="item8" class="chk-item" value="✅ validáció és reset">
            <label for="item8">Validáció, visszajelzés és reset gomb működik</label>
        </div>
    </div>

    <div class="controls">
        <button type="button" id="validateBtn" class="btn">🔍 Ellenőrzés</button>
        <button type="button" id="resetBtn" class="btn btn–reset">↺ Visszaállítás</button>
    </div>

    <div id="feedbackMsg" class="feedback" aria-live="polite">
        <span>Kattints az „Ellenőrzés” gombra – legalább 6 pontot pipálj ki.</span>
    </div>

    <div id="visibleResult" class="visible-result">
        <span>📋 kijelölve:</span> <strong id="countDisplay">0</strong>/8
    </div>

    <div class="demo__meta">
        <span>AI-v0.concept | ellenőrzőlista</span>
        <span class="footer-note">forrás: v0.app/docs (minta)</span>
    </div>
</div>

<script>
    (function() {
        // DOM elemek
        const checkboxes = document.querySelectorAll('.chk-item');
        const validateBtn = document.getElementById('validateBtn');
        const resetBtn = document.getElementById('resetBtn');
        const feedbackDiv = document.getElementById('feedbackMsg');
        const countDisplay = document.getElementById('countDisplay');

        // segéd: frissíti a számlálót
        function updateCounter() {
            let checkedCount = 0;
            checkboxes.forEach(cb => {
                if (cb.checked) checkedCount++;
            });
            countDisplay.textContent = checkedCount;
        }

        // kezdeti frissítés
        updateCounter();

        // reset gomb: törli az összes jelölést, frissít, visszajelzés
        resetBtn.addEventListener('click', function() {
            checkboxes.forEach(cb => {
                cb.checked = false;
            });
            updateCounter();
            // feedback alaphelyzetbe állítása
            feedbackDiv.textContent = 'Lista visszaállítva – válassz legalább 6 elemet.';
            feedbackDiv.className = 'feedback';
        });

        // validálás + visszajelzés (nem form submit)
        validateBtn.addEventListener('click', function() {
            let selectedVals = [];
            let selectedCount = 0;
            checkboxes.forEach(cb => {
                if (cb.checked) {
                    selectedVals.push(cb.value);
                    selectedCount++;
                }
            });

            // validáció: legalább 6 kell
            if (selectedCount < 6) {
                feedbackDiv.textContent = '⛔ Legalább 6 pontot kell kipipálnod a sikeres átvételi ellenőrzéshez. (Most: ' + selectedCount + '/8)';
                feedbackDiv.className = 'feedback error';
                return;
            }

            // Ha megvan a 6+ → sikeres, összefoglaló megjelenítése (textContent)
            const listText = selectedVals.join('; ');
            // üzenet összeállítása textContent-tel – NEM innerHTML
            const message = '✅ Átvételi ellenőrzés sikeres – ' + selectedCount + ' pont teljesítve.\n' + (selectedVals.length > 0 ? 'Kiválasztott: ' + listText : '');
            feedbackDiv.textContent = message;
            feedbackDiv.className = 'feedback success';
        });

        // Tetszőleges checkbox változás → számláló frissítése / feedback törlése (opcionális)
        checkboxes.forEach(cb => {
            cb.addEventListener('change', function() {
                updateCounter();
                // ha nincs érvényes állapot, alap szöveg (csak ha nem success/error)
                // de nem töröljük a hibát; a felhasználó később úgyis rányom a gombra.
            });
        });

        // kiegészítő: ha valaki egérrel állítja is, a számláló megy
        // extra: kattintás a label-re is működik (HTML ok)
        // Ha szeretnénk, hogy a „visible result” csak a checkbox változáskor frissüljön, már kész.
        // Nincs külső script, sem form submission.
    })();
</script>

</body>
</html>