<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Procvičování autoškoly</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .question-container { 
            width: 100%;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px; 
            border: 1px solid #ddd; 
            border-radius: 8px; 
            background-color: #f9f9f9; 
        }
        .question-header { font-size: 14px; font-weight: bold; color: #555; margin-bottom: 10px; }
        .question-text { font-size: 28px; font-weight: bold; margin-bottom: 15px; }
        .question-info { font-size: 12px; color: #777; margin-top: 10px; }
        .answer-option { 
            cursor: pointer; 
            padding: 10px; 
            margin-top: 10px; 
            border: 1px solid #ccc; 
            border-radius: 8px; 
            display: flex; 
            align-items: center; 
            gap: 10px;
        }
        .answer-label { 
            background: #f1f1f1; 
            border: 1px solid #ccc; 
            padding: 5px 10px; 
            border-radius: 4px;
        }
        .answer-option.disabled { pointer-events: none; }
        #nextBtn { 
            margin-top: 10px; 
            padding: 8px 15px; 
            background-color: #4dc26b; 
            color: #fff; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            float: right; 
            display: block; 
        }
        #nextBtn:hover { background-color: #45ae60; }
        .bottom-links {
            margin-top: 50px;
            font-size: 12px;
            text-align: center;
            display: flex;
            justify-content: space-around;
            gap: 10px;
            flex-wrap: wrap;
        }
        .bottom-links a {
            text-decoration: none;
            color: #555;
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-align: center;
        }
        .bottom-links a:hover { background-color: #f1f1f1; }
        @media (max-width: 768px) {
            #nextBtn {
                float: none;
                width: 100%;
                text-align: center;
            }
            .bottom-links {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            .bottom-links a {
                width: 100%;
                box-sizing: border-box;
            }
        }
        @media (min-width: 769px) {
            .bottom-links {
                margin-top: 15px;
                flex-direction: row;
                justify-content: center;
            }
        }
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            justify-content: center;
            align-items: center;
        }
        .modal {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            max-width: 400px;
            width: 90%;
            text-align: center;
        }
        .modal h2 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .modal ul {
            text-align: left;
            margin-bottom: 15px;
            list-style: none;
            padding: 0;
        }
        .modal ul li {
            margin: 5px 0;
        }
        .modal input[type="email"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .modal button {
            padding: 10px 20px;
            background: #4dc26b;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .modal a {
            font-size: 12px;
            color: grey;
            text-decoration: underline;
            display: block;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <div class="modal-overlay" id="modalOverlay">
        <div class="modal">
            <h2>Vyplňte svůj e-mail, pokračujte v procvičování a získejte tyto výhody:</h2>
            <ul>
                <li>✅ Neomezené procvičování 1177+ otázek</li>
                <li>✅ Procvičování chybných odpovědí</li>
                <li>✅ Bez reklam – vypněte rušivé reklamy</li>
                <li>✅ Procvičování na telefonu bez nutnosti stahovat aplikaci</li>
                <li>✅ Vždy aktuální oficiální otázky</li>
                <li>✅ Všechny budoucí aktualizace</li>
            </ul>
            <form method="post" action="https://et2.ecomailapp.cz/public/subscribe/1/43c2cd496486bcc27217c3e790fb4088">
                <input type="email" name="email" required placeholder="Zadejte svůj e-mail">
                <button type="submit">Pokračovat v procvičování »</button>
            </form>
            <a href="https://etesty2.cz" target="_blank">Zásady zpracování osobních údajů</a>
        </div>
    </div>

    <script>
        const originalQuestions = [
                { category: "Pravidla provozu na pozemních komunikacích", question: "\"Jízdní souprava\":", questionNumber: "10060041", points: 2, answers: ["je souprava složená z jednoho nebo více motorových vozidel a jednoho nebo více přípojných vozidel.", "nemůže být složena z více než jednoho motorového a dvou přípojných vozidel.", "musí být složena vždy jen z jednoho motorového vozidla a jednoho přípojného vozidla."], correct: 0 },
    { category: "Předpisy související s provozem", question: "Ztrátu řidičského průkazu je držitel řidičského oprávnění povinen:", questionNumber: "06060034", points: 2, answers: ["Neprodleně ohlásit příslušnému obecnímu úřadu obce s rozšířenou působností.", "Neprodleně ohlásit příslušnému útvaru dopravní policie.", "Neprodleně ohlásit příslušnému útvaru obecní policie."], correct: 0 },
{ category: "Pravidla provozu na pozemních komunikacích", question: "Dojde-li při jízdě vozidla v tunelu k poruše vozidla, pro kterou se toto vozidlo stalo nepojízdným:", questionNumber: "06050636", points: 2, answers: ["Jsou řidič a přepravované osoby z porouchaného vozidla povinni neprodleně opustit tunel.", "Je řidič porouchaného vozidla podle okolností oprávněn zastavovat jiná vozidla.", "Je řidič porouchaného vozidla povinen neprodleně odstranit závadu, která mu brání v další jízdě."], correct: 1 },
    { category: "Zásady bezpečné jízdy", question: "Při prudkém sešlápnutí brzdového pedálu vozidla bez protiblokovacího systému brzd (ABS) na náledí dojde:", questionNumber: "06060244", points: 2, answers: ["K zablokování kol vozidla a vozidlo se stává neřiditelným.", "K maximálnímu brzdnému účinku, při němž vozidlo zastaví s nejkratší brzdnou dráhou.", "K zablokování kol zadní nápravy vozidla, při němž vozidlo zůstává řiditelným."], correct: 0 },
{ category: "Pravidla provozu na pozemních komunikacích", question: "Při couvání řidič nesmí:", questionNumber: "06060185", points: 2, answers: ["Omezit ostatní účastníky silničního provozu.", "Ohrozit ostatní účastníky provozu na pozemní komunikaci.", "Kouřit."], correct: 1 },
{ category: "Pravidla provozu na pozemních komunikacích", question: "Světelné signály:", questionNumber: "06060176", points: 2, answers: ["Jsou nadřazeny svislým dopravním značkám upravujícím přednost.", "Jsou nadřazeny všem dopravním značkám.", "Jsou nadřazeny pokynům příslušníků nebo orgánů vojenské pořádkové služby."], correct: 0 },
{ category: "Pravidla provozu na pozemních komunikacích", question: "Dojde-li při dopravní nehodě k poškození životního prostředí, jsou účastníci dopravní nehody povinni:", questionNumber: "06060144", points: 2, answers: ["Neprodleně ohlásit tuto událost Policii České republiky.", "Neprodleně ohlásit tuto událost Inspekci životního prostředí.", "Neprodleně ohlásit tuto událost vlastníkům všech dotčených pozemků."], correct: 0 },
    { category: "Předpisy související s provozem", question: "Řidič, který dosáhl 12 bodů a pozbyl řidičské oprávnění, je oprávněn požádat o vrácení řidičského oprávnění nejdříve po uplynutí:", questionNumber: "11080028", points: 2, answers: ["1 roku ode dne pozbytí řidičského oprávnění.", "půl roku ode dne pozbytí řidičského oprávnění.", "1 roku ode dne právní moci rozhodnutí o zákazu činnosti spočívající v zákazu řízení všech motorových vozidel."], correct: 0 },
{ category: "Zdravotnická příprava", question: "Při poranění motorkáře, který je v bezvědomí a nedýchá:", questionNumber: "11020012", points: 1, answers: ["mohu sejmout přilbu jakýmkoli způsobem", "nikdy nesundávám přilbu", "je nejlepší vyproštění hlavy ve dvou zachráncích, kdy jeden pevně svírá hlavu poraněného a druhý opatrně sejme přilbu"], correct: 2 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "Je jezdec na koloběžce, který se pohybuje po pozemní komunikaci, řidičem?", questionNumber: "06060394", points: 2, answers: ["Ano.", "Ne."], correct: 0 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "\"Obec\":", questionNumber: "10060011", points: 2, answers: ["je zastavěné území, jehož začátek a konec je na pozemní komunikaci označen příslušnými dopravními značkami; na účelových komunikacích se značky neosazují.", "je zastavěné území, jehož začátek a konec je na pozemní komunikaci označen příslušnými dopravními značkami, které se vždy umísťují na účelových komunikacích.", "je území vyznačené v mapě, musí mít název a je označeno dopravní značkou 'Nejvyšší dovolená rychlost'."], correct: 0 },
    { category: "Zásady bezpečné jízdy", question: "Co může vést ke smyku vozidla při průjezdu zatáčkami?", questionNumber: "06060424", points: 2, answers: ["Jízda při středové dělicí čáře.", "Nízký tlak v pneumatikách.", "Nedostatečná rychlost jízdy."], correct: 1 },
{ category: "Pravidla provozu na pozemních komunikacích", question: "V pěší zóně:", questionNumber: "06050590", points: 2, answers: ["Nesmí řidič zastavit a stát jinde než na místech označených jako parkoviště.", "Nesmí řidič stát jinde než na místech označených jako parkoviště, zastavit ale může i mimo parkoviště.", "Nesmí řidič mimo parkoviště ani zastavit vozidlo."], correct: 1 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "Na pozemní komunikaci se jezdí:", questionNumber: "06060226", points: 2, answers: ["Vpravo, a pokud tomu nebrání zvláštní okolnosti, při pravém okraji vozovky, pokud není stanoveno jinak.", "Vpravo ve vzdálenosti nejméně 1 m od okraje vozovky.", "Výlučně při pravém okraji vozovky, a to za všech okolností."], correct: 0 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "Na krajnici smí řidič motorového vozidla vjet:", questionNumber: "06060227", points: 2, answers: ["Kdykoliv to uzná za vhodné, s výjimkou míst označených výstražnou dopravní značkou „Nebezpečná krajnice“.", "Jen pro účely stání.", "Jen při zastavení a stání nebo jestliže je to nutné při objíždění, vyhýbání, odbočování nebo otáčení, přitom musí dbát zvýšené opatrnosti."], correct: 2 },
  { category: "Předpisy o podmínkách provozu vozidel", question: "Nově registrovaná přípojná vozidla:", questionNumber: "06060432", points: 1, answers: ["Mají po zaregistrování svou přidělenou registrační značku.", "Nemusí mít žádnou registrační značku.", "Mají registrační značku shodnou s tažným vozidlem."], correct: 0 },
{ category: "Pravidla provozu na pozemních komunikacích", question: "V obytné zóně řidič:", questionNumber: "06050592", points: 2, answers: ["Nesmí mimo parkoviště ani zastavit vozidlo.", "Nesmí stát jinde než na místech označených jako parkoviště, zastavit ale může i mimo parkoviště.", "Nesmí zastavit a stát jinde než na místech označených jako parkoviště."], correct: 1 },
    { category: "Předpisy související s provozem", question: "Řidičský průkaz je neplatný, jestliže:", questionNumber: "06060027", points: 2, answers: ["Byl jeho oprávněným držitelem, byť i jen dočasně, předán jiné osobě.", "Je jakýmkoli způsobem poškozený (např. odřený či zprohýbaný).", "Je poškozený tak, že záznamy v něm uvedené jsou nečitelné."], correct: 2 },
{ category: "Pravidla provozu na pozemních komunikacích", question: "Při couvání řidič nesmí:", questionNumber: "06060185", points: 2, answers: ["Omezit ostatní účastníky silničního provozu.", "Ohrozit ostatní účastníky provozu na pozemní komunikaci.", "Kouřit."], correct: 1 },
    { category: "Zásady bezpečné jízdy", question: "Zvukové výstražné znamení smí řidič ve vztahu k životnímu prostředí použít:", questionNumber: "06060285", points: 2, answers: ["Pouze v případech stanovených zákonem.", "Kdykoliv to uzná za vhodné.", "Tam kde je to povoleno dopravní značkou."], correct: 0 },
  { category: "Předpisy o podmínkách provozu vozidel", question: "Používání pneumatik s protiskluzovými hroty:", questionNumber: "06060428", points: 1, answers: ["Je povoleno pouze v zimním období.", "Je zakázáno pro všechna vozidla, s výjimkou vozidel záchranné služby.", "Je povoleno pouze v zimním období a jen v horských oblastech."], correct: 1 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "Pěší zóna je:", questionNumber: "06060350", points: 2, answers: ["Oblast, jejíž začátek je označen dopravní značkou „Stezka pro chodce“ a konec je označen dopravní značkou „Konec stezky pro chodce“.", "Oblast, jejíž začátek je označen dopravní značkou „Pěší zóna“ a konec je označen dopravní značkou „Konec pěší zóny“.", "Každý chodník, oddělený od vozovky výškově nebo jinak, který jiní účastníci provozu než chodci nesmí použít."], correct: 1 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "\"Doklad totožnosti\":", questionNumber: "10060027", points: 2, answers: ["je každý doklad, na kterém je uvedeno jméno, příjmení a trvalý pobyt.", "je doklad, kterým občan České republiky nebo cizinec prokazuje svoji totožnost podle zvláštního právního předpisu.", "je pouze občanský průkaz."], correct: 1 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "Rychlost jízdy musí řidič přizpůsobit:", questionNumber: "06060216", points: 2, answers: ["Ročnímu období.", "Předpokládanému stavebnímu a dopravně technickému stavu pozemní komunikace.", "Zdravotnímu stavu spolujezdců."], correct: 1 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "Podél tramvaje se jezdí:", questionNumber: "06060468", points: 2, answers: ["Vpravo; vlevo se smí jet pouze tehdy, když v protisměru nejede žádná tramvaj nebo jiné vozidlo.", "Vpravo, pokud není dopravní značkou 'Objíždění tramvaje' povolena jízda vlevo.", "Vlevo."], correct: 1 },
{ category: "Zdravotnická příprava", question: "Rychlou zdravotnickou záchrannou službu přivoláme na telefonním čísle:", questionNumber: "09040014", points: 1, answers: ["158.", "150.", "155."], correct: 2 },
    { category: "Předpisy související s provozem", question: "Držitel řidičského oprávnění nesmí mít:", questionNumber: "06060041", points: 2, answers: ["Žádný řidičský průkaz, pokud mu byl vystaven mezinárodní řidičský průkaz.", "Více než jeden platný řidičský průkaz.", "Více než dva platné řidičské průkazy."], correct: 1 },
{ category: "Pravidla provozu na pozemních komunikacích", question: "Je řidič povinen dbát zvýšené opatrnosti vůči výcvikovým vozidlům autoškoly?", questionNumber: "06050386", points: 2, answers: ["Ano.", "Ne."], correct: 0 },
    { category: "Zásady bezpečné jízdy", question: "Jaké nebezpečí hrozí při jízdě na mokré dlažbě?", questionNumber: "06060422", points: 2, answers: ["Zvýšené riziko smyku a následného pádu.", "Nebezpečí nehrozí, mají-li pneumatiky předepsanou hloubku dezénu.", "Zvýšené riziko sesmeknutí řetězu z důvodu rozstřiku vody."], correct: 0 },
    { category: "Zásady bezpečné jízdy", question: "Správný tlak huštění pneumatik se zjišťuje:", questionNumber: "06060278", points: 2, answers: ["Na jízdou zahřátých pneumatikách.", "Na pneumatikách bez ohledu na jejich teplotu.", "Na studených, jízdou nezahřátých pneumatikách."], correct: 2 },
    { category: "Zásady bezpečné jízdy", question: "Při zvyšování rychlosti jízdy se zorné pole řidiče:", questionNumber: "06060280", points: 2, answers: ["Zužuje.", "Nemění.", "Rozšiřuje."], correct: 0 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "Účastníci dopravní nehody jsou povinni:", questionNumber: "06060205", points: 2, answers: ["Navzájem si předložit doklad o zaplacení pojistného.", "Navzájem si předložit osvědčení o vozidle.", "Prokázat si na požádání navzájem svou totožnost."], correct: 2 },
{ category: "Pravidla provozu na pozemních komunikacích", question: "Nesmět ohrozit znamená povinnost počínat si tak, aby:", questionNumber: "11080010", points: 2, answers: ["jinému účastníku provozu na pozemních komunikacích nevzniklo žádné nebezpečí.", "druhý řidič nemusel zastavit vozidlo.", "žádný řidič nemusel ani mírně snížit rychlost jízdy."], correct: 0 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "Přejíždět z jednoho jízdního pruhu do druhého smí řidič jen tehdy:", questionNumber: "06060221", points: 2, answers: ["Neohrozí-li a neomezí-li řidiče jedoucího v jízdním pruhu, do kterého přejíždí; přitom musí dávat znamení o změně směru jízdy.", "Když v jízdním pruhu, do kterého přejíždí, nejede žádné motorové vozidlo.", "Má-li řádně očištěná zpětná zrcátka."], correct: 0 },
{ category: "Pravidla provozu na pozemních komunikacích", question: "Při řízení provozu na křižovatce znamená pro řidiče signál se současně svítícím červeným a žlutým světlem „Pozor!“:", questionNumber: "06060145", points: 2, answers: ["Povinnost připravit se k jízdě.", "Povinnost zastavit vozidlo před světelným signalizačním zařízením, neboť bude následovat signál „Stůj!“.", "Upozornění, že řízení provozu světelnými signály bude ukončeno."], correct: 0 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "Svislé zákazové dopravní značky:", questionNumber: "06060373", points: 2, answers: ["Upozorňují na místa, kde řidiči hrozí nebezpečí.", "Ukládají účastníku provozu na pozemních komunikacích zákazy nebo omezení.", "Informují řidiče motorových vozidel o omezeních na silnici."], correct: 1 },
    { category: "Zásady bezpečné jízdy", question: "Při rychlosti 100 km/h je délka brzdné dráhy Vašeho vozidla oproti brzdné dráze při rychlosti 50 km/h:", questionNumber: "06060242", points: 2, answers: ["Přibližně dvakrát delší.", "Přibližně třikrát delší.", "Přibližně čtyřikrát delší."], correct: 2 },
{ category: "Pravidla provozu na pozemních komunikacích", question: "Dojde-li při jízdě vozidla v tunelu k poruše vozidla, pro kterou se toto vozidlo stalo nepojízdným:", questionNumber: "06060127", points: 2, answers: ["Řidič ani přepravovaná osoba nesmí kouřit ani zacházet s otevřeným ohněm. Nezávislé topení nepojízdného vozidla musí v tunelu být vypnuto.", "Řidič ani přepravovaná osoba nesmí zacházet s otevřeným ohněm, kouřit mohou pouze na místech k tomu určených. Nezávislé topení nepojízdného vozidla může v tunelu zůstat zapnuto.", "Řidič ani přepravovaná osoba nesmí kouřit ani zacházet s otevřeným ohněm. Nezávislé topení nepojízdného vozidla může v tunelu zůstat zapnuto."], correct: 0 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "\"Chodec\":", questionNumber: "10060002", points: 2, answers: ["Je výhradně kráčející osoba.", "Není osoba, která se pohybuje na lyžích, kolečkových bruslích nebo obdobném sportovním vybavení.", "Je i osoba, která se pohybuje na kolečkových bruslích nebo obdobném sportovním vybavení."], correct: 2 },
  { category: "Pravidla provozu na pozemních komunikacích", question: "Řidič nesmí předjíždět:", questionNumber: "10040013", points: 2, answers: ["v noci.", "nemá-li před sebe rozhled na vzdálenost nutnou k bezpečnému předjetí; to neplatí na jednosměrné pozemní komunikaci a při předjíždění cyklistů.", "nemá-li před sebe rozhled na takovou vzdálenost, která je nutná k bezpečnému předjetí."], correct: 2 },
        ];

        let questions = shuffle([...originalQuestions]);
        let currentQuestion = 0;

        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

        function loadQuestion() {
            const app = document.getElementById('app');
            app.innerHTML = '';

            if (currentQuestion >= questions.length) {
                showResults();
                return;
            }

            const question = questions[currentQuestion];
            const shuffledAnswers = shuffle([...question.answers]);
            const correctAnswerIndex = shuffledAnswers.indexOf(question.answers[question.correct]);

            app.innerHTML = `
                <div class="question-container">
                    <div class="question-header">Otázka ${currentQuestion + 1} z 1177</div>
                    <div class="question-text">${question.question}</div>
                    ${shuffledAnswers.map((answer, index) => `
                        <div class="answer-option" onclick="selectAnswer(${index}, ${correctAnswerIndex})">
                            <span class="answer-label">${String.fromCharCode(65 + index)}</span> ${answer}
                        </div>
                    `).join('')}
                    <div class="question-info">
                        Číslo otázky: ${question.questionNumber} | Kategorie: ${question.category} | Počet bodů: ${question.points}
                    </div>
                    <button id="nextBtn" onclick="nextQuestion()">Další otázka »</button>
                    <div class="bottom-links">
                        <a onclick="prevQuestion()">« Předchozí otázka</a>
                        <a href="#">Vypnout reklamy »</a>
                        <a href="#">Spustit ostrý test B »</a>
                    </div>
                </div>
            `;
        }

        function selectAnswer(index, correct) {
            const options = document.querySelectorAll('.answer-option');
            options.forEach((option, i) => {
                option.style.backgroundColor = i === correct ? '#d4edda' : i === index ? '#f8d7da' : '#fff';
                option.style.pointerEvents = 'none';
            });
        }

        function nextQuestion() {
            if (currentQuestion === 39) {
                showModal();
                return;
            }
            currentQuestion++;
            scrollToTop();
            loadQuestion();
        }

        function prevQuestion() {
            if (currentQuestion > 0) {
                currentQuestion--;
                scrollToTop();
                loadQuestion();
            }
        }

        function showModal() {
            const modal = document.getElementById('modalOverlay');
            modal.style.display = 'flex';
        }

        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        function showResults() {
            const app = document.getElementById('app');
            app.innerHTML = '<div class="question-container">Vše bylo procvičeno!</div>';
        }

        loadQuestion();
    </script>
</body>
</html>