<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Security+ Ports & Protocols Study Guide</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Roboto+Mono:wght@400;600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Tagalog&display=swap" rel="stylesheet">
    <script>
        // Disable right-click
        document.addEventListener('contextmenu', event => event.preventDefault());

        // Disable keyboard shortcuts
        document.addEventListener('keydown', function(event) {
            if (event.ctrlKey && (event.keyCode === 85 || event.keyCode === 83 || event.keyCode === 73)) {
                event.preventDefault();
            }
        });

        // Disable text selection
        document.addEventListener('selectstart', event => event.preventDefault());

        // Disable F12
        document.addEventListener('keydown', function(event) {
            if (event.keyCode === 123) {
                event.preventDefault();
            }
        });

        // Anti-debugging
        (function(){
            function handleDevTools(isOpen) {
                if(isOpen) {
                    window.location.reload();
                }
            }
            
            setInterval(function() {
                const widthThreshold = window.outerWidth - window.innerWidth > 160;
                const heightThreshold = window.outerHeight - window.innerHeight > 160;
                handleDevTools(widthThreshold || heightThreshold);
            }, 1000);
        })();
    </script>
    <style>
        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f4f8;
        }

        /* Animated Header */
        .header {
    background: linear-gradient(-45deg, 
        rgba(2,0,36,1) 0%,
        rgba(11,11,94,1) 29%,
        rgba(0,212,255,1) 100%
    );
    background-size: 300% 300%;
    animation: gradientBG 12s ease-in-out infinite;
    color: white;
    padding: 35px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    position: relative; /* Preserve this */
    overflow: hidden; /* Preserve this */
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Keep existing header::before */
.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

/* Update text styles while keeping animations */
.header h1 {
    font-family: 'Space Mono', monospace;
    margin: 0;
    font-size: 2.6em;
    font-weight: 700;
    letter-spacing: -1px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 2px 2px 0px rgba(0,212,255,0.2);
    animation: titleFloat 3s ease-in-out infinite;
}

.header h1 i {
    font-family: 'Font Awesome 6 Free';
    font-size: 0.9em;
    margin-right: 12px;
    background: linear-gradient(90deg, #00f0ff, #00ff88);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: normal;
    text-shadow: none;
}


.header p {
    font-family: 'Roboto Mono', monospace;
    margin-top: 12px;
    font-size: 1.1em;
    letter-spacing: 0.5px;
    font-weight: 400;
    opacity: 0.9;
    text-transform: uppercase;
}

.author-credits {
    font-family: 'Space Mono', monospace;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    font-size: 0.9em;
    opacity: 0.7;
    letter-spacing: 1px;
    background: linear-gradient(90deg, 
        rgba(2,0,36,1) 0%, 
        rgba(12,12,96,1) 29%, 
        rgba(0,212,255,1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fadeIn 0.5s ease;
    position: relative;
    text-transform: uppercase;
    text-shadow: 
        0px 2px 4px rgba(0,212,255,0.3),
        0px 4px 8px rgba(2,0,36,0.3);
}

.author-credits::after {
    content: 'ᜎᜓᜇᜒᜈ᜔ᜐ᜔ ᜆᜐ᜔ᜀᜈ᜔';
    display: block;
    font-family: 'Noto Sans Tagalog', sans-serif;
    font-size: 1.4em;
    margin-top: 10px;
    opacity: 0.9;
    letter-spacing: 4px;
    background: linear-gradient(90deg, 
        rgba(2,0,36,1) 0%, 
        rgba(12,12,96,1) 29%, 
        rgba(0,212,255,1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.author-credits:hover {
    opacity: 1;
    transform: translateY(-2px);
    transition: all 0.3s ease;
    text-shadow: 
        0px 0px 8px rgba(0,212,255,0.5),
        0px 2px 4px rgba(12,12,96,0.4);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 0.7; transform: translateY(0); }
}


@keyframes titleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

        /* Mode Selection */
        .mode-selector {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .mode-button {
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 1.1em;
            transition: all 0.3s ease;
            font-weight: 600;
            min-width: 150px;
        }

        .mode-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .mode-button.active {
            background: linear-gradient(135deg, #2c5282 0%, #1a365d 100%);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
        }

        /* Content Areas */
        .content-area {
            display: none;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-top: 20px;
        }

        .content-area.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        /* Search Bar */
        .search-bar {
            width: 100%;
            padding: 15px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 1.1em;
            transition: all 0.3s ease;
        }

        .search-bar:focus {
            outline: none;
            border-color: #4299e1;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
        }

        /* Port Cards */
        .port-card {
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 20px;
            margin: 15px 0;
            background: white;
            transition: all 0.3s ease;
        }

        .port-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .port-header {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }

        .port-header h3 {
            margin: 0;
            color: #2d3748;
        }

        .port-info {
            display: none;
            margin-top: 15px;
            padding: 15px;
            border-top: 1px solid #e2e8f0;
            animation: slideDown 0.3s ease;
        }

        .port-info.active {
            display: block;
        }

        /* Flashcard Styles */
        .flashcard-container {
            max-width: 600px;
            margin: 0 auto;
            perspective: 1000px;
        }

        .flashcard {
            position: relative;
            width: 100%;
            height: 400px;
            cursor: pointer;
            transform-style: preserve-3d;
            transition: transform 0.6s;
        }

        .flashcard.flipped {
            transform: rotateY(180deg);
        }

        .flashcard-front, .flashcard-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 30px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .flashcard-back {
            transform: rotateY(180deg);
        }

        /* Quiz Styles */
        .quiz-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .quiz-option {
            display: block;
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: left;
            font-size: 1.1em;
            position: relative;
            overflow: hidden;
        }
.quiz-option.incorrect {
    background-color: #FED7D7;
    border-color: #F56565;
    opacity: 0.7;
}

.quiz-option.highlight-correct {
    background-color: #C6F6D5;
    border-color: #48BB78;
    animation: pulseGreen 1s ease infinite;
}
    @keyframes pulseGreen {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.feedback-text {
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    font-weight: 500;
}

.feedback-correct {
    background-color: #C6F6D5;
    color: #2F855A;
}

.feedback-incorrect {
    background-color: #FED7D7;
    color: #C53030;
}

        .quiz-option:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border-color: #4299e1;
        }

        .quiz-option.correct {
            background-color: #C6F6D5;
            border-color: #48BB78;
        }

        .quiz-option.incorrect {
            background-color: #FED7D7;
            border-color: #F56565;
        }

        /* Progress Bar */
        .progress-container {
            margin: 20px 0;
            text-align: center;
        }

        .progress-bar {
            height: 8px;
            background: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
            margin: 10px auto;
            max-width: 300px;
        }

        .progress {
            height: 100%;
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
            width: 0%;
            transition: width 0.3s ease;
        }

        /* Loading Indicator */
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
            font-size: 1.2em;
            color: #4299e1;
        }

        .loading::after {
            content: "Loading...";
            animation: loadingDots 1.5s infinite;
        }

        @keyframes loadingDots {
            0%, 20% { content: "Loading."; }
            40% { content: "Loading.."; }
            60% { content: "Loading..."; }
            80%, 100% { content: "Loading...."; }
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideDown {
            from { 
                opacity: 0;
                transform: translateY(-10px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Security Notes */
        .security-note {
            background: #fffbeb;
            border-left: 4px solid #f6ad55;
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 10px 10px 0;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }

            .header {
                padding: 20px;
            }

            .header h1 {
                font-size: 2em;
            }

            .mode-button {
                width: 100%;
            }

            .content-area {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="loading">Loading Study Guide...</div>

    <div class="header">
        <h1><i class="fas fa-terminal"></i>Security+ Study Guide</h1>
        <p>Ports & Protocols - CompTIA Security+ Certification</p>
    </div>

    <div class="mode-selector">
        <button class="mode-button active" onclick="switchMode('learn')">Learn Mode</button>
        <button class="mode-button" onclick="switchMode('flashcard')">Flashcard Mode</button>
        <button class="mode-button" onclick="switchMode('quiz')">Quiz Mode</button>
        <button class="mode-button" onclick="generateRandomPort()">Random Port</button>
    </div>

    <div id="learnMode" class="content-area active">
        <input type="text" class="search-bar" placeholder="Search ports, protocols, or security concepts...">
        <div id="portList"></div>
    </div>

    <div id="flashcardMode" class="content-area">
        <div class="flashcard-container">
            <div class="flashcard">
                <div class="flashcard-front">
                    <h2 id="cardProtocol"></h2>
                    <p>Click to reveal details</p>
                </div>
                <div class="flashcard-back">
                    <h3 id="cardPort"></h3>
                    <p id="cardDescription"></p>
                    <div class="security-note" id="cardSecurity"></div>
                </div>
            </div>
            <div class="progress-container">
                <div class="progress-text">Card <span id="currentCardNum">1</span> of <span id="totalCards">0</span></div>
                <div class="progress-bar">
                    <div class="progress"></div>
                </div>
            </div>
            <button class="mode-button" onclick="nextFlashcard()">Next Card</button>
        </div>
    </div>

    <div id="quizMode" class="content-area">
        <div class="quiz-container">
            <div id="quizQuestion"></div>
            <div id="quizOptions"></div>
            <div id="feedback"></div>
            <button class="mode-button" onclick="nextQuestion()">Next Question</button>
        </div>
    </div>

    <div id="randomPortMode" class="content-area">
        <div class="flashcard-container">
            <div class="port-card">
                <h2 id="randomPortName" style="text-align:center;padding:20px;">?</h2>
                <div id="randomPortInfo" style="display:none;">
                    <p id="randomPortNumber" style="text-align:center;font-size:24px;"></p>
                    <div class="security-note" id="randomPortNote"></div>
                </div>
            </div>
            <div class="button-grid">
                <button class="mode-button" onclick="showRandomPortInfo()">Show/Hide Port Info</button>
                <button class="mode-button" onclick="generateRandomPort()">Generate Random Port</button>
            </div>
        </div>
    </div>
    
    <style>
    .button-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 20px;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .button-grid .mode-button {
        width: 100%;
        text-align: center;
    }
    </style>

    <div class="author-credits">
        CRAFTED BY LORENZ T © 2025
    </div>


    <script>
        // Enhanced Port Database
        const ports = [
            {
            protocol: "FTP",
            port: "20/21",
            category: "File Transfer",
            description: "File Transfer Protocol - Data (20) and Control (21)",
            mnemonic: "20/21 - 'File Transfer Pair'",
            security: "Use SFTP or FTPS instead. FTP sends credentials in cleartext."
            },
            {
            protocol: "SSH",
            port: "22",
            category: "Secure Remote Access",
            description: "Secure Shell - Encrypted remote access protocol",
            mnemonic: "22 = 'S'ecure 'S'hell - Two S's in SSH match port 22",
            security: "Replace Telnet (23) for secure remote access. Key authentication recommended."
            },
            {
            protocol: "Telnet",
            port: "23",
            category: "Remote Access",
            description: "Legacy remote access protocol - unencrypted",
            mnemonic: "23 comes after 22 (SSH) - older, less secure version",
            security: "Avoid using Telnet. Use SSH instead for encrypted communication."
            },
            {
            protocol: "SMTP",
            port: "25",
            category: "Email",
            description: "Simple Mail Transfer Protocol - Email routing",
            mnemonic: "25 letters in 'Simple Mail Transfer Proto'",
            security: "Should be secured with TLS. Vulnerable to spam and email spoofing."
            },
            {
            protocol: "DNS",
            port: "53",
            category: "Network Services",
            description: "Domain Name System - Resolves domain names to IP addresses",
            mnemonic: "5 + 3 = 8 bits in original DNS messages",
            security: "Implement DNSSEC to prevent cache poisoning and spoofing attacks."
            },
            {
            protocol: "DHCP",
            port: "67/68",
            category: "Network Services",
            description: "Dynamic Host Configuration Protocol - IP address assignment",
            mnemonic: "67/68 - Sequential ports for server/client",
            security: "Implement DHCP snooping and authentication to prevent rogue DHCP servers."
            },
            {
            protocol: "TFTP",
            port: "69",
            category: "File Transfer",
            description: "Trivial File Transfer Protocol - Simple file transfers",
            mnemonic: "69 - 'Trivial' comes last after DHCP",
            security: "No authentication mechanism. Use only in trusted networks."
            },
            {
            protocol: "HTTP",
            port: "80",
            category: "Web",
            description: "Hypertext Transfer Protocol - Standard web traffic",
            mnemonic: "80 looks like 'ate-y' (HTTP)",
            security: "Use HTTPS instead for encrypted web traffic."
            },
            {
            protocol: "Kerberos",
            port: "88",
            category: "Authentication",
            description: "Network authentication protocol",
            mnemonic: "88 - 'Double infinity' for endless security",
            security: "Time synchronization critical. Vulnerable to golden ticket attacks."
            },
            {
            protocol: "POP3",
            port: "110",
            category: "Email",
            description: "Post Office Protocol v3 - Email retrieval",
            mnemonic: "110 - One-to-One-Zero like mailbox to client",
            security: "Use POP3S (995) for encrypted email retrieval."
            },
            {
            protocol: "IMAP",
            port: "143",
            category: "Email",
            description: "Internet Message Access Protocol - Email management",
            mnemonic: "143 - '1 for Internet, 43 for Mail'",
            security: "Use IMAPS (993) for encrypted connections."
            },
            {
            protocol: "SNMP",
            port: "161/162",
            category: "Network Management",
            description: "Simple Network Management Protocol",
            mnemonic: "161/162 - Sequential ports for management/traps",
            security: "Use SNMPv3 with authentication and encryption."
            },
            {
            protocol: "LDAP",
            port: "389",
            category: "Directory Services",
            description: "Lightweight Directory Access Protocol",
            mnemonic: "389 - '3-8-9' forms an L shape on keypad",
            security: "Use LDAPS (636) for encrypted directory access."
            },
            {
            protocol: "HTTPS",
            port: "443",
            category: "Secure Web",
            description: "HTTP over SSL/TLS - Secure web browsing",
            mnemonic: "443 = 'HTTPS' - Think '4 for Secure, 43 for web'",
            security: "Requires valid SSL/TLS certificate. Prevents man-in-the-middle attacks."
            },
            {
            protocol: "SMB",
            port: "445",
            category: "File Sharing",
            description: "Server Message Block - Windows file sharing",
            mnemonic: "445 - 'Share More Boxes'",
            security: "Disable SMBv1. Use encryption and strong authentication."
            },
            {
            protocol: "SMTP TLS",
            port: "587",
            category: "Email",
            description: "SMTP with TLS - Secure email submission",
            mnemonic: "587 - 'Secure Mail Transport'",
            security: "Preferred over port 25 for client email submission."
            },
            {
            protocol: "LDAPS",
            port: "636",
            category: "Directory Services",
            description: "LDAP over SSL - Secure directory access",
            mnemonic: "636 - 'Secure Directory Access'",
            security: "Always use LDAPS instead of LDAP for directory services."
            },
            {
            protocol: "IMAPS",
            port: "993",
            category: "Email",
            description: "IMAP over SSL - Secure email retrieval",
            mnemonic: "993 - '9-9-Secure' email",
            security: "Preferred over standard IMAP for encrypted email access."
            },
            {
            protocol: "POP3S",
            port: "995",
            category: "Email",
            description: "POP3 over SSL - Secure email retrieval",
            mnemonic: "995 - '9-9-Safe' email",
            security: "Use instead of standard POP3 for encrypted retrieval."
            },
            {
            protocol: "MySQL",
            port: "3306",
            category: "Database",
            description: "MySQL Database Server",
            mnemonic: "3306 - '3' for database engine",
            security: "Restrict remote access and encrypt connections."
            },
            {
            protocol: "RDP",
            port: "3389",
            category: "Remote Access",
            description: "Remote Desktop Protocol - Windows remote access",
            mnemonic: "3389 - '3' keys to remote access",
            security: "Use Network Level Authentication and strong passwords."
            },
            {
            protocol: "NetBIOS",
            port: "137-139",
            category: "File and Print Sharing",
            description: "Network Basic Input/Output System - Windows file/printer sharing",
            mnemonic: "137-139: Three ports for sharing",
            security: "Should be disabled if not needed. Vulnerable to name spoofing attacks."
            }
        ];

        let currentCard = 0;
        let currentQuestion = 0;

        // Initialization Function
        function init() {
            showLoading();
            try {
                loadLearnMode();
                setupFlashcard();
                updateCounts();
                setupSearch();
                hideLoading();
            } catch (error) {
                console.error('Initialization error:', error);
                alert('Error loading study guide. Please refresh the page.');
                hideLoading();
            }
        }

        // Mode Switching
        function switchMode(mode) {
            document.querySelectorAll('.content-area').forEach(area => {
                area.classList.remove('active');
            });
            
            document.getElementById(mode + 'Mode').classList.add('active');
            
            document.querySelectorAll('.mode-button').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');

            if (mode === 'flashcard') {
                updateProgress();
            } else if (mode === 'quiz') {
                showQuizQuestion();
            }
        }

        // Learn Mode Functions
        function loadLearnMode() {
            const portList = document.getElementById('portList');
            portList.innerHTML = '';

            ports.forEach(port => {
                const card = document.createElement('div');
                card.className = 'port-card';
                card.innerHTML = `
                    <div class="port-header" onclick="togglePort(this)">
                        <h3>${port.protocol} (Port ${port.port})</h3>
                        <span>▼</span>
                    </div>
                    <div class="port-info">
                        <p><strong>Category:</strong> ${port.category}</p>
                        <p><strong>Description:</strong> ${port.description}</p>
                        <div class="security-note">
                            <p><strong>Memory Tip:</strong> ${port.mnemonic}</p>
                            <p><strong>Security Notes:</strong> ${port.security}</p>
                        </div>
                    </div>
                `;
                portList.appendChild(card);
            });
        }

        function togglePort(element) {
            const info = element.nextElementSibling;
            const arrow = element.querySelector('span');
            info.classList.toggle('active');
            arrow.textContent = info.classList.contains('active') ? '▼' : '▶';
        }

        // Flashcard Functions
        function setupFlashcard() {
            showFlashcard();
            document.querySelector('.flashcard').addEventListener('click', toggleFlashcard);
        }

        function showFlashcard() {
            const port = ports[currentCard];
            document.getElementById('cardProtocol').textContent = `${port.protocol}`;
            document.getElementById('cardPort').textContent = `Port ${port.port}`;
            document.getElementById('cardDescription').textContent = port.description;
            document.getElementById('cardSecurity').textContent = port.security;
            
            const flashcard = document.querySelector('.flashcard');
            flashcard.classList.remove('flipped');
            
            updateProgress();
        }

        function toggleFlashcard() {
            const flashcard = document.querySelector('.flashcard');
            flashcard.classList.toggle('flipped');
        }

        function nextFlashcard() {
            currentCard = (currentCard + 1) % ports.length;
            showFlashcard();
        }

        // Quiz Functions
        function showQuizQuestion() {
            const port = ports[currentQuestion];
            const questionTypes = [
                {
                    question: `What port number is used for ${port.protocol}?`,
                    correctAnswer: port.port,
                    options: generatePortOptions(port.port)
                },
                {
                    question: `Which protocol typically uses port ${port.port}?`,
                    correctAnswer: port.protocol,
                    options: generateProtocolOptions(port.protocol)
                },
                {
                    question: `What is the primary security consideration for ${port.protocol}?`,
                    correctAnswer: port.security.split('.')[0],
                    options: generateSecurityOptions(port)
                }
            ];

            const questionSet = questionTypes[Math.floor(Math.random() * questionTypes.length)];
            
            document.getElementById('quizQuestion').innerHTML = `
                <h3>${questionSet.question}</h3>
            `;
            
            const optionsContainer = document.getElementById('quizOptions');
            optionsContainer.innerHTML = '';
            
            shuffleArray(questionSet.options).forEach(option => {
                const button = document.createElement('button');
                button.className = 'quiz-option';
                button.textContent = option;
                button.onclick = () => checkQuizAnswer(option, questionSet.correctAnswer);
                optionsContainer.appendChild(button);
            });

            document.getElementById('feedback').innerHTML = '';
        }

        function generatePortOptions(correctPort) {
            const options = new Set([correctPort]);
            while (options.size < 4) {
                const randomPort = ports[Math.floor(Math.random() * ports.length)].port;
                options.add(randomPort);
            }
            return Array.from(options);
        }

        function generateProtocolOptions(correctProtocol) {
            const options = new Set([correctProtocol]);
            while (options.size < 4) {
                const randomProtocol = ports[Math.floor(Math.random() * ports.length)].protocol;
                options.add(randomProtocol);
            }
            return Array.from(options);
        }

        function generateSecurityOptions(port) {
            const options = new Set([port.security]);
            const securityFeatures = ports.map(p => p.security);
            while (options.size < 4) {
                const randomFeature = securityFeatures[Math.floor(Math.random() * securityFeatures.length)];
                options.add(randomFeature);
            }
            return Array.from(options);
        }

        function checkQuizAnswer(selected, correct) {
    const options = document.querySelectorAll('.quiz-option');
    
    options.forEach(option => {
        option.disabled = true;
        if (option.textContent === selected) {
            option.classList.add(selected === correct ? 'correct' : 'incorrect');
        }
        if (option.textContent === correct) {
            option.classList.add('highlight-correct');
        }
    });

    const feedback = document.getElementById('feedback');
    feedback.innerHTML = `
        <div class="security-note ${selected === correct ? 'feedback-correct' : 'feedback-incorrect'}">
            ${selected === correct ? 
                '<p><strong>✓ Correct!</strong> Well done!</p>' : 
                `<p><strong>✗ Incorrect.</strong> The correct answer is: ${correct}</p>`
            }
        </div>
    `;
}
        function nextQuestion() {
            currentQuestion = (currentQuestion + 1) % ports.length;
            showQuizQuestion();
        }

        // Utility Functions
        function setupSearch() {
            document.querySelector('.search-bar').addEventListener('input', function(e) {
                const searchTerm = e.target.value.toLowerCase();
                const cards = document.querySelectorAll('.port-card');
                
                cards.forEach(card => {
                    const text = card.textContent.toLowerCase();
                    card.style.display = text.includes(searchTerm) ? 'block' : 'none';
                });
            });
        }

        function updateCounts() {
            document.getElementById('totalCards').textContent = ports.length;
            updateProgress();
        }

        function updateProgress() {
            const progress = ((currentCard + 1) / ports.length) * 100;
            document.querySelector('.progress').style.width = `${progress}%`;
            document.getElementById('currentCardNum').textContent = currentCard + 1;
        }

        function shuffleArray(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 showLoading() {
            document.querySelector('.loading').style.display = 'block';
        }

        function hideLoading() {
            document.querySelector('.loading').style.display = 'none';
        }

        function generateRandomPort() {
    const randomIndex = Math.floor(Math.random() * ports.length);
    const port = ports[randomIndex];
    document.querySelectorAll('.mode-button').forEach(btn => {
        btn.classList.remove('active');
    });
    
    document.querySelector('[onclick="generateRandomPort()"]').classList.add('active');
    
    document.querySelectorAll('.content-area').forEach(area => {
        area.classList.remove('active');
    });
    document.getElementById('randomPortMode').classList.add('active');
    
    document.getElementById('randomPortName').textContent = port.protocol;
    document.getElementById('randomPortNumber').textContent = `Port: ${port.port}`;
    document.getElementById('randomPortNote').innerHTML = `
        <p><strong>Category:</strong> ${port.category}</p>
        <p><strong>Description:</strong> ${port.description}</p>
        <p><strong>Memory Tip:</strong> ${port.mnemonic}</p>
        <p><strong>Security Note:</strong> ${port.security}</p>
    `;
    document.getElementById('randomPortInfo').style.display = 'none';
}

function showRandomPortInfo() {
    const info = document.getElementById('randomPortInfo');
    info.style.display = info.style.display === 'none' ? 'block' : 'none';
}
        // Initialize the application when the page loads
        window.onload = init;
    </script>
</body>
</html>