<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flashcard System with Pagination and Review Tracking</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* General Styles */
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }
        .app-header {
            width: auto;
            background-color: #6200ea;
            padding: 15px 20px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
            color: white;
            font-size: 24px;
            font-weight: 500;
            text-align: center;
        }
        .log-container {
            margin-top: 20px;
            width: 100%;
            max-width: 600px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            padding: 15px;
            overflow-y: auto;
            max-height: 200px;
        }
        .log {
            font-size: 14px;
            color: #333;
            line-height: 1.5;
        }
    </style>

    <style>
/* General Styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}



.date-changer {
    margin-bottom: 20px;
    font-size: 16px;
}

.topic-filter, #layout-select {
    width: 100%;
    font-size: 16px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background-color: #ffffff;
    color: #333;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    appearance: none;
    cursor: pointer;
    text-align: left;
}

.filter-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 300px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.filter-btn, .show-all-btn, .apply-btn {
    background-color: #6200ea;
    color: #fff;
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.filter-btn:hover, .apply-btn:hover {
    background-color: #3700b3;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Show All Button Distinct Style */
.show-all-btn {
    background-color: #03dac6;
    color: #fff;
}

.show-all-btn:hover {
    background-color: #018786;
}

.badge {
    background-color: #fff;
    color: #6200ea;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.modern-card {
    position: relative;
    background-color: white;
    border-radius: 15px;
    width: 100%; /* Use full width */
    max-width: 800px; /* Full width to avoid scrolling in vertical layout */
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s;
    border: 2px solid #ddd;
    box-sizing: border-box; /* Ensure padding is contained within the card */
}

.question {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
    padding-right: 30px; /* Space for the bookmark */
}

.answer {
    font-size: 18px;
    color: #333;
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
    display: none;
}

.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.dont-know-btn, .know-btn {
    padding: 10px 20px;
    width: auto;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
}

.dont-know-btn {
    background-color: #e53935;
}

.know-btn {
    background-color: #388e3c;
}

/* Hover effect for dont-know-btn */
.dont-know-btn:hover {
    background-color: #d32f2f; /* Darker shade of red */
}

/* Hover effect for know-btn */
.know-btn:hover {
    background-color: #2e7d32; /* Darker shade of green */
}


.bookmark {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 18px;
    color: #ddd;
    cursor: default;
    transition: color 0.3s;
}

.review-metric {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #555;
    margin-top: 15px;
}

.filter-info {
    background-color: #e3f2fd;
    color: #1e88e5;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    max-width: 600px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.topic-header {
    font-size: 24px;
    font-weight: 700;
    color: #6200ea;
    margin: 20px 0 10px;
    text-align: center;
    width: 100%;
}






/* Hide extra elements in horizontal layout */
.horizontal-layout .modern-card {
    display: none; /* Only the current flashcard will be displayed in the horizontal layout */
}

.horizontal-layout .navigation-buttons {
    display: flex; /* Show navigation buttons in horizontal layout */
}

.horizontal-layout .flashcard-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110%; /* Use full width */
    max-width: none; /* Adjust max-width if needed for screen fit */
    padding: 0 20px;
    box-sizing: border-box;
}

.horizontal-layout .modern-card {
    width: 110%; /* Stretch to fill container */
    max-width: 800px; /* Optional: adjust for full screen width */
}

/* Horizontal layout info box styling */
#horizontal-info {
    display: none; /* Only visible in horizontal layout */
    text-align: center;
    margin: 15px 0;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Roboto', sans-serif;
}

#horizontal-topic {
    font-size: 20px;
    font-weight: 700;
    color: #6200ea;
    margin-bottom: 5px;
}

#horizontal-position {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}


 .navigation-buttons {
    display: flex;
    justify-content: center; /* Center buttons on smaller screens */
        gap: 30px;
    width: 100%;
    max-width: 800px; /* Adjust as needed */
    margin: 20px auto;
    padding: 10px 20px;
    box-sizing: border-box;
    margin-bottom: 40px;
}

.navigation-buttons button {
    background-color: #6200ea; /* Primary color */
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}

.navigation-buttons button:disabled {
    background-color: #9e9e9e; /* Gray color when disabled */
    cursor: not-allowed;
    box-shadow: none;
}

.navigation-buttons button:hover:not(:disabled) {
    background-color: #3700b3; /* Darker color on hover */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}


/* Dropdown container styling */
.dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
    width: 600px;
    z-index: 1000;
}

.dropdown-content {
    color: #333;
    font-size: 16px;
}

.close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}



  /* Ensure flashcards-container stretches fully in vertical layout */
.vertical-layout .flashcard-container {
    width: 100%; /* Use full width in vertical layout */
    max-width: none; /* Remove max-width constraint */
    padding: 0; /* Optional: remove padding if added */
    box-sizing: border-box;
    margin: 0 auto; /* Center align in the container */
}

/* Ensure container and flashcards align correctly in all layouts */
.flashcard-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Add this class to body or main container when in vertical layout mode */
.vertical-layout .container {
    width: 100%; /* Ensure container width is full */
}



    #toggleButton {
        background-color: #4CAF50; /* Green background */
        border: none;
        color: white; /* White text color */
        padding: 12px 24px; /* Padding for better spacing */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px; /* Font size */
        cursor: pointer; /* Pointer cursor on hover */
        border-radius: 8px; /* Rounded corners */
        transition: background-color 0.3s ease; /* Smooth transition on hover */
    }

    #toggleButton:hover {
        background-color: #45a049; /* Darker green on hover */
    }

    #toggleButton:focus {
        outline: none; /* Remove outline on focus */
    }

    #toggleButton:active {
        background-color: #388e3c; /* Even darker green when button is clicked */
    }


    .star-btn {
    color: lightgray;
    font-size: 20px;
    margin: 0 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.star-btn.active {
    color: gold;
}

.bookmark {
    cursor: pointer;
    margin-left: auto;
}

/* Emoji styling */
        .emoji {
            font-size: 24px;  /* Larger font size */
            vertical-align: middle;
            display: inline-block;
            animation: slow-bounce 2s infinite;  /* Animation applied */
        }

        /* Slow bounce animation */
        @keyframes slow-bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px); /* Small bounce */
            }
        }




    </style>
</head>
<body>

<!-- App Header -->
<div class="app-header">
    MBBS Flashcards Study
</div>

<hr>
<p style="margin-left: 20px;"><b>Subject</b>: Anatomy</p>
<p style="margin-left: 20px;"><b>TOPIC</b>: </p>
<p style="margin-left: 20px;"><b>Reference</b>: </p>
<hr>


<!-- Main Container -->
<div class="container">

<button id="toggleButton" onclick="toggleDropdownContent(event)">How to Use the Flashcard System (Step-by-Step - Click Here)</button>

<div id="dropdownContent" class="dropdown" style="display: none;">
    <div class="dropdown-content">
        <button class="close" onclick="closeDropdown('dropdownContent')">Close</button>
        <h2>How to Use the Flashcard System</h2>

        <ol>
            <li><strong>Select Layout:</strong>
                <ul>
                    <li>Choose how you want to view flashcards:</li>
                    <li><strong>Horizontal Layout:</strong> One flashcard displayed at a time.</li>
                    <li><strong>Vertical Layout (Default):</strong> Flashcards shown one below another.</li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #007BFF;">

            <li><strong>Select Topics:</strong>
                <ul>
                    <li>Pick multiple topics you want to study.</li>
                    <li>At the end of each topic, you’ll see:
                        <ul>
                            <li>Total flashcards in that topic.</li>
                            <li>Flashcards you’ve reviewed at least once (e.g., <strong>(2/6)</strong> means 2 out of 6 reviewed).</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #28A745;">

            <li><strong>Apply Filter:</strong>
                <ul>
                    <li>Click <strong>Apply Filter</strong> to display selected topics.</li>
                    <li>All Flashcards of selected topics will appear in your chosen layout (horizontal or vertical).</li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #DC3545;">

            <li><strong>Review Flashcards:</strong>
                <ul>
                    <li>View the flashcard to read the question and try to recall the answer.</li>
        <li>After attempting to recall, use the buttons:</li>
                    <li>Use the buttons:
                        <ul>
                            <li><strong>Know:</strong> If you know the answer.</li>
                            <li><strong>Don’t Know:</strong> If unsure or don’t know the answer.</li>
                            <li>If you initially clicked "Know" but later feel unsure, click "Don’t Know" to adjust your response.</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #FFC107;">

            <li><strong>Review Stages:</strong>
                <ul>
                    <li>Each reviewed flashcard shows the next review date.</li>
                    <li>Review stages based on time intervals:
                        <ul>
                            <li><strong>First Review:</strong> 3 days after the first read.</li>
                            <li><strong>Second Review:</strong> 7 days after the first review.</li>
                            <li><strong>Third Review:</strong> 14 days after the second review.</li>
                            <li><strong>Final Review:</strong> 28 days after the third review.</li>
                            <li><strong>Completed:</strong> No further reviews needed.</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #17A2B8;">

            <li><strong>Pending Review Flashcards:</strong>
                <ul>
                    <li>Flashcards ready for review are shown in the <strong>Pending Review</strong> section.</li>
                    <li>Pending cards only show from selected topics.</li>
                    <li>To view all pending flashcards from all topics, select and apply <strong>"All Topics"</strong> in the topic section (by default, "All Topics" is applied).</li>
                    <li>When you are inside the Pending Flashcards Review section, to exit this section, click the <strong>"Show All Flashcards"</strong> button. It displays all flashcards (including pending flashcards) from the selected topics.</li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #6C757D;">

            <li><strong>Bookmark Colors:</strong>
                <ul>
                    <li>Flashcard review stages are visually represented:</li>
                    <li><strong>Red:</strong> First Review.</li>
                    <li><strong>Pink:</strong> Second Review.</li>
                    <li><strong>Blue:</strong> Third Review.</li>
                    <li><strong>Green:</strong> Final Review.</li>
                    <li><strong>Gold:</strong> Completed.</li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #343A40;">

             <li><strong>Star Mark Flashcards:</strong>
                <ul>
                    <li>Mark very important or difficult flashcards using the <strong>Star Mark</strong> button.</li>
                    <li>These star-marked flashcards are ideal for focused review before exams.</li>
                    <li>Click the <strong>Starred Flashcards</strong> button to filter and view only the star-marked flashcards from the selected topics.</li>
                    <li>When you click <strong>Starred Ready for Review</strong>, it displays all star-marked flashcards that are ready for review, including those in any review stage (First, Second, Third, or Final).</li>
                    <li>This feature ensures you spend your time efficiently by focusing on critical flashcards when time is limited.</li>
                </ul>
            </li>
            <br>
            <hr style="border: 1px solid #007BFF;">

            <li><strong>Efficient Learning:</strong>
                <ul>
                    <li>The system ensures:</li>
                    <li><strong>Easy Points Flashcards:</strong> Reviewed in fewer rounds.</li>
                    <li><strong>Moderate/Difficult Points:</strong> Reviewed more frequently in more number of rounds.</li>
                    <li>Saves your time by allocating appropriate focus on difficult flashcards.</li>
                    <li>You can utilize your time efficiently and complete your syllabus within your time schedule.</li>
                </ul>
            </li>


        </ol>
    </div>
</div>

 <br>




     <!-- Dropdown for Layout Selection -->
    <div class="custom-select-container">
        <label for="layout-select"><b>Select Layout:</b></label>
        <select id="layout-select" class="custom-select" onchange="selectLayout(this.value)">
            <option value="vertical">Vertical Layout</option>
            <option value="horizontal">Horizontal Layout</option>
        </select>
    </div>

    <!-- Topic Selection Multi-select -->
    <div class="custom-select-container">
        <label for="topic-filter"><b>Select Multiple Topics & Apply Filter:</b></label>
        <select id="topic-filter" class="topic-filter" multiple>
            <!-- Options will be dynamically populated -->
        </select>
    </div>

    <!-- Apply Filter and Show All Buttons -->
    <button class="apply-btn" onclick="applySelectedTopics()">Apply Selected Topics</button><br>
    <button class="show-all-btn" onclick="showAllFlashcards()">Show All Flashcards</button>

     <div class="filter-container">
        <button class="filter-btn" onclick="filterFlashcards(0)">First Review<br> (Red) <span id="count-stage-0" class="badge">0</span></button>
        <button class="filter-btn" onclick="filterFlashcards(1)">Second Review<br> (Pink) <span id="count-stage-1" class="badge">0</span></button>
        <button class="filter-btn" onclick="filterFlashcards(2)">Third Review<br> (Blue) <span id="count-stage-2" class="badge">0</span></button>
        <button class="filter-btn" onclick="filterFlashcards(3)">Final Review<br> (Green) <span id="count-stage-3" class="badge">0</span></button>
        <button class="filter-btn" id="completed-flashcards-btn" onclick="filterFlashcards(4)">Completed Flashcards<br> 🏆 <span id="count-completed" class="badge">0 completed</span></button>
     </div>
 <div class="filter-container">
    <button class="filter-btn" onclick="showStarredFlashcards()">⭐ Starred Flashcards: <span id="count-starred" class="badge">0 Marked</span>, <span id="count-pending" class="badge">0 Pending</span></button>
    <button class="filter-btn" onclick="showStarredReadyFlashcards()">🌟 Starred Ready Review: <span id="count-starred-ready" class="badge">0 Marked</span>, <span id="count-ready-pending" class="badge">0 Pending</span></button>
</div>


    <div id="filter-info-container"></div> <!-- Filter info container for separate line display -->

<div id="horizontal-info" style="display: none;">
    <div id="horizontal-topic"></div>
    <div id="horizontal-position"></div>
</div>



    <!-- Flashcard Display Area -->
    <div id="flashcards-container" class="flashcard-container">
        <!-- Flashcards will be rendered here dynamically -->
    </div>

    <!-- Navigation for Horizontal Layout -->
    <div class="navigation-buttons" style="display: none;">
        <button id="prev-btn" onclick="navigateFlashcards('prev')" disabled>Previous</button>
        <button id="next-btn" onclick="navigateFlashcards('next')">Next</button>
    </div>
</div>




<!-- Dropdown content that replaces the modal -->
<div id="bookmarkDropdown" class="dropdown">
    <div class="dropdown-content">
        <!-- Close button -->
        <span class="close" onclick="closeDropdown('bookmarkDropdown')">&times;</span>
        <h2>Review Stage Colors</h2>
        <ul>
            <li><span style="color: red;"><i class="fas fa-bookmark"></i></span> First Review</li>
            <li><span style="color: pink;"><i class="fas fa-bookmark"></i></span> Second Review</li>
            <li><span style="color: blue;"><i class="fas fa-bookmark"></i></span> Third Review</li>
            <li><span style="color: green;"><i class="fas fa-bookmark"></i></span> Final Review</li>
            <li><span style="color: gold;"><i class="fas fa-bookmark"></i></span> Completed</li>
        </ul>
    </div>
</div>


<!-- Dropdown for Inactive Know Button Click -->
<div id="inactiveKnowDropdown" class="dropdown">
    <div class="dropdown-content">
        <span class="close" onclick="closeDropdown('inactiveKnowDropdown')">&times;</span>
        <h2>Button Inactive</h2>
        <p>The "Know" button is inactive until the review is ready. Please wait until the next review date.</p>
    </div>
</div>


<script>

 document.addEventListener('DOMContentLoaded', () => {
    openDatabase();
    const layoutSelect = document.getElementById('layout-select');
    const initialLayout = layoutSelect.value || 'vertical';
    selectLayout(initialLayout);
});

const dbName = "FlashcardDBA11";
const storeName = "flashcardProgress";
const flashcards = [
    {
        id: 1,
        topic: "topic1",
        question: "What is the capital of France?",
        answer: "The capital of France is Paris.",
        memoryTip: "Think of the Eiffel Tower as the heart of France!",
        emoji: "🇫🇷",
        emojiExplanation: "Represents France, the land of Paris."
    },
    {
        id: 2,
        topic: "topic1",
        question: "What is the largest desert?",
        answer: "The largest desert is the Sahara Desert.",
        memoryTip: "Imagine endless golden sands under a blazing sun.",
        emoji: "🏜️",
        emojiExplanation: "Symbolizes a desert landscape."
    },
    {
        id: 3,
        topic: "topic1",
        question: "Which river is the longest?",
        answer: "The Nile River is the longest.",
        memoryTip: "Picture the Nile flowing through ancient Egypt!",
        emoji: "🌊",
        emojiExplanation: "Represents a flowing river."
    },
    {
        id: 4,
        topic: "topic2",
        question: "What is the powerhouse of the cell?",
        answer: "The powerhouse of the cell is the mitochondria.",
        memoryTip: "Mitochondria sounds like 'mighty engine' powering the cell.",
        emoji: "🔋",
        emojiExplanation: "Indicates energy production, like a battery."
    },
    {
        id: 5,
        topic: "topic2",
        question: "Who developed the theory of relativity?",
        answer: "Albert Einstein developed the theory of relativity.",
        memoryTip: "Remember E=mc²—Einstein's revolutionary formula.",
        emoji: "🧠",
        emojiExplanation: "Represents genius and intellect."
    }
];


const topics = {
    topic1: "1. MATHS",
    topic2: "2. SCIENCE"
};

let filteredTopics = [];
let filterStage = null;
let reviewStages = {};
let completedFlashcards = [];
let currentDate = new Date();
const reviewStageColors = { 0: 'red', 1: 'pink', 2: 'blue', 3: 'green' };
let db;
let isStarFilterActive = false;
let isStarReadyFilterActive = false;
let currentFlashcardIndex = 0;
let isHorizontal = false;
let starMarked = {};

function toggleStar(starElement, flashcardId) {
    const isStarred = !starMarked[flashcardId]; // Toggle starred status
    starMarked[flashcardId] = isStarred; // Update local state

    const transaction = db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);
    const request = store.get(flashcardId);

    request.onsuccess = (event) => {
        let data = event.target.result;

        if (data) {
            // Only update the starred field, keep review metrics unchanged
            data.starred = isStarred;
            store.put(data); // Save the updated data with starred status
        } else {
            // Add a new entry with only the starred field (no review metrics)
            store.put({
                id: flashcardId,
                starred: isStarred // Only starred field
            });
        }

        // Update UI
        starElement.classList.toggle('fas', isStarred);
        starElement.classList.toggle('far', !isStarred);
        starElement.style.color = isStarred ? 'gold' : 'lightgray';

        updateStarredCount();
        renderFlashcards(); // Re-render flashcards to reflect changes
    };

    request.onerror = (event) => {
        console.error('Error updating star status:', event.target.errorCode);
    };
}



function openDatabase() {
    const request = indexedDB.open(dbName, 1); // Ensure the version is correct

    request.onupgradeneeded = (event) => {
        db = event.target.result;
        if (!db.objectStoreNames.contains(storeName)) {
            const store = db.createObjectStore(storeName, { keyPath: 'id' });
            store.createIndex('reviewStage', 'reviewStage', { unique: false });
            store.createIndex('dueDate', 'dueDate', { unique: false });
            store.createIndex('starred', 'starred', { unique: false }); // Ensure 'starred' is defined
        }
    };

    request.onsuccess = (event) => {
        db = event.target.result;
        loadProgress(() => {
            updateTopicProgress();
            updateStarredCount();
            renderFlashcards();
        });
    };

    request.onerror = (event) => {
        console.error('Database error:', event.target.errorCode);
    };
}


function saveProgress(id, reviewStage = 0, dueDate = null, revealedTimestamp = null, starred = false) {
    const transaction = db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);

    const data = {
        id,
        reviewStage,
        dueDate,
        revealedTimestamp,
        starred // Include starred in the saved data
    };

    store.put(data); // Save both review metrics and starred status together
}



function loadProgress(callback) {
    const transaction = db.transaction([storeName], 'readonly');
    const store = transaction.objectStore(storeName);
    const request = store.getAll();

    request.onsuccess = (event) => {
        const progressData = event.target.result;

        progressData.forEach(progress => {
            if (progress.reviewStage !== undefined && progress.dueDate !== undefined) {
                // Only initialize reviewStages for flashcards with valid review metrics
                reviewStages[progress.id] = {
                    reviewStage: progress.reviewStage,
                    dueDate: progress.dueDate,
                    revealedTimestamp: progress.revealedTimestamp || null
                };
            }
            starMarked[progress.id] = progress.starred ?? false; // Initialize starred state
        });

        console.log('Progress loaded:', progressData);
        if (callback) callback();
    };

    request.onerror = (event) => {
        console.error('Load error:', event.target.errorCode);
    };
}




// Flashcard functions
function selectLayout(value) {
    if (value === 'horizontal') {
        switchToHorizontalLayout();
    } else {
        switchToVerticalLayout();
    }
    applyCurrentFilters();
}

function switchToHorizontalLayout() {
    isHorizontal = true;
    document.body.classList.add('horizontal-layout');
    document.body.classList.remove('vertical-layout');
    currentFlashcardIndex = 0;
    document.getElementById('horizontal-info').style.display = 'block';
    document.querySelector('.navigation-buttons').style.display = 'flex';
    applyCurrentFilters();
}

function switchToVerticalLayout() {
    isHorizontal = false;
    document.body.classList.add('vertical-layout');
    document.body.classList.remove('horizontal-layout');
    document.getElementById('horizontal-info').style.display = 'none';
    document.querySelector('.navigation-buttons').style.display = 'none';
    applyCurrentFilters();
}

function showFlashcard(index) {
    const flashcards = document.querySelectorAll('.modern-card');
    if (index < 0 || index >= flashcards.length) return;

    flashcards.forEach(flashcard => flashcard.style.display = 'none');

    const currentFlashcard = flashcards[index];
    const topic = currentFlashcard.dataset.topic;
    const topicFlashcards = Array.from(flashcards).filter(f => f.dataset.topic === topic);
    const currentPosition = topicFlashcards.indexOf(currentFlashcard) + 1;
    const totalInTopic = topicFlashcards.length;

    document.getElementById('horizontal-topic').textContent = topics[topic];
    document.getElementById('horizontal-position').textContent = `Flashcard ${currentPosition} of ${totalInTopic}`;

    currentFlashcard.style.display = 'block';

    document.getElementById('prev-btn').disabled = index === 0;
    document.getElementById('next-btn').disabled = index === flashcards.length - 1;
}

function navigateFlashcards(direction) {
    const flashcards = document.querySelectorAll('.modern-card');
    if (direction === 'next' && currentFlashcardIndex < flashcards.length - 1) {
        currentFlashcardIndex++;
    } else if (direction === 'prev' && currentFlashcardIndex > 0) {
        currentFlashcardIndex--;
    }
    showFlashcard(currentFlashcardIndex);
}

function updateTopicProgress() {
    const topicSelect = document.getElementById('topic-filter');
    topicSelect.innerHTML = '';

    const allOption = document.createElement('option');
    allOption.value = 'all';
    allOption.textContent = 'All Topics';
    topicSelect.appendChild(allOption);

    Object.keys(topics).forEach(topicKey => {
        const topicName = topics[topicKey];
        const totalFlashcards = flashcards.filter(card => card.topic === topicKey).length;
        const reviewedFlashcards = flashcards.filter(card => card.topic === topicKey && reviewStages[card.id]).length;

        const option = document.createElement('option');
        option.value = topicKey;

        if (reviewedFlashcards === totalFlashcards && totalFlashcards > 0) {
            option.textContent = `${topicName} (${reviewedFlashcards}/${totalFlashcards}) ✅`;
        } else {
            option.textContent = `${topicName} (${reviewedFlashcards}/${totalFlashcards})`;
        }

        topicSelect.appendChild(option);
    });
}

function applySelectedTopics() {
    const topicSelect = document.getElementById('topic-filter');
    const selectedOptions = Array.from(topicSelect.selectedOptions);
    const selectedTopicValues = selectedOptions.map(option => option.value);

    if (selectedTopicValues.includes('all')) {
        filteredTopics = [];
    } else {
        filteredTopics = selectedTopicValues.filter(value => value !== 'all');
    }

    currentFlashcardIndex = 0;
    renderFlashcards();
}

function renderFlashcards() {
    const flashcardsContainer = document.getElementById('flashcards-container');
    const filterInfoContainer = document.getElementById('filter-info-container');

    flashcardsContainer.innerHTML = ''; // Clear the container
    filterInfoContainer.innerHTML = ''; // Clear the filter info

    const allTopicsSelected = filteredTopics.length === 0 || filteredTopics.length === Object.keys(topics).length;

    // Update topics and review stage info dynamically
    const selectedTopicsText = allTopicsSelected
        ? 'All Topics'
        : filteredTopics.slice(0, 2).map(topic => topics[topic] || 'All Topics').join(', ') +
          (filteredTopics.length > 2 ? ', <button id="showMoreBtn" onclick="showAllTopics()">More</button>' : '');

    let selectedFilterText = ''; // Dynamic filter text based on active filters

    if (isStarFilterActive) {
        selectedFilterText = `⭐ Showing: Star-marked flashcards of selected topics <br>
            <span style="font-size: 0.9em; color: gray;">(To Exit the Review stage, Click "Show All Flashcards" Button)</span>`;
    } else if (isStarReadyFilterActive) {
        selectedFilterText = `🌟 Showing: Star-marked Ready-for-review flashcards of selected topics <br>
            <span style="font-size: 0.9em; color: gray;">(To Exit the Review stage, Click "Show All Flashcards" Button)</span>`;
    } else if (filterStage !== null) {
        selectedFilterText = `
            Review Stage: ${getReviewStageLabel(filterStage)} <br>
            <span style="font-size: 0.9em; color: gray;">(To Exit the Review stage, Click "Show All Flashcards" Button)</span>`;
    } else {
        selectedFilterText = `Showing all flashcards of selected topics`;
    }

    // Create and display filter info
    const filterInfo = document.createElement('div');
    filterInfo.className = 'filter-info';

    // Topics selected line
    const topicsLine = document.createElement('div');
    topicsLine.innerHTML = `<strong style="color: black;">Topics selected:</strong>  ${selectedTopicsText}`;
    filterInfo.appendChild(topicsLine);

    // Add an <hr> for separation
    const separator = document.createElement('hr');
    separator.style.border = '1px solid #ccc';
    separator.style.margin = '10px 0';
    filterInfo.appendChild(separator);

    // Review stage or filter line
    const filterLine = document.createElement('div');
    filterLine.innerHTML = selectedFilterText; // Use innerHTML to support HTML rendering
    filterInfo.appendChild(filterLine);

    filterInfoContainer.appendChild(filterInfo);

    let currentTopic = null;

    flashcards.forEach(flashcard => {
        const reviewStageData = reviewStages[flashcard.id];
        const isStarred = starMarked[flashcard.id];
        const isDue = reviewStageData && new Date(reviewStageData.dueDate) <= currentDate;
        const isTopicMatch = filteredTopics.length === 0 || filteredTopics.includes(flashcard.topic);

        // Match against the "Starred" filter
        let isStarredMatch = isStarFilterActive ? isStarred : true;
        // Match against the "Starred Ready Review" filter
        let isReadyMatch = isStarReadyFilterActive ? (isStarred && isDue) : true;

        // Match against the stage filter
        let isStageMatch = filterStage === null || (reviewStageData?.reviewStage === filterStage && isDue);
        if (filterStage === 4) {
            isStageMatch = reviewStageData?.reviewStage === 4;
        }

        // Only show flashcards that match the active filters
        if (isTopicMatch && isStarredMatch && isStageMatch && isReadyMatch) {
            if (!isHorizontal && currentTopic !== flashcard.topic) {
                currentTopic = flashcard.topic;
                const topicHeader = document.createElement('div');
                topicHeader.className = 'topic-header';
                topicHeader.textContent = topics[flashcard.topic];
                flashcardsContainer.appendChild(topicHeader);
            }

            const isAnswerVisible = reviewStageData?.revealedTimestamp &&
                (new Date() - new Date(reviewStageData.revealedTimestamp)) < 24 * 60 * 60 * 1000;

            const memoryTip = flashcard.memoryTip || '';
            const emojiSymbol = flashcard.emoji || '✨';
            const emojiExplanation = flashcard.emojiExplanation || '';

            const card = document.createElement('div');
            card.className = 'modern-card';
            card.dataset.flashcardId = flashcard.id;
            card.dataset.topic = flashcard.topic;

            card.innerHTML = `
                <div class="question">${flashcard.question}</div>
                <div class="answer" style="display: ${isAnswerVisible ? 'block' : 'none'}">
                    ${flashcard.answer}
                    <br>
                    <hr style="border: 1px solid black; margin: 10px 0;">
                    <em><strong>Memory Tip:</strong> ${memoryTip}</em>
                    <br><br>
                    <span class="emoji">${emojiSymbol}</span>
                </div>
                <div class="review-metric"></div>
                <div class="buttons">
                    <button class="dont-know-btn" onclick="handleReviewClick(${flashcard.id}, false)">Don't Know</button>
                    <i class="${isStarred ? 'fas' : 'far'} fa-star star-btn"
                       style="color: ${isStarred ? 'gold' : 'lightgray'};"
                       onclick="toggleStar(this, ${flashcard.id})"></i>
                    <button class="know-btn" onclick="handleReviewClick(${flashcard.id}, true)" ondblclick="handleInactiveKnowClick(event)">Know</button>
                </div>
                <i class="fas fa-bookmark bookmark" onclick="toggleDropdown(event, 'bookmarkDropdown')"></i>
            `;
            flashcardsContainer.appendChild(card);
        }
    });

    applyReviewMetrics();
    updatePendingCounts();

    if (isHorizontal) {
        showFlashcard(currentFlashcardIndex);
    }

    attachBookmarkListeners();
}

function showAllTopics() {
    const showMoreBtn = document.getElementById('showMoreBtn');
    const topicsLine = showMoreBtn.parentElement;
    const allTopicsText = filteredTopics.map(topic => topics[topic] || 'All Topics').join(', ');
    topicsLine.innerHTML = `<strong style="color: black;">Topics selected:</strong>  ${allTopicsText} <button id="hideMoreBtn" onclick="hideAllTopics()">Hide</button>`;
}

function hideAllTopics() {
    const hideMoreBtn = document.getElementById('hideMoreBtn');
    const topicsLine = hideMoreBtn.parentElement;
    const selectedTopicsText = filteredTopics.slice(0, 2).map(topic => topics[topic] || 'All Topics').join(', ') +
          (filteredTopics.length > 2 ? ', <button id="showMoreBtn" onclick="showAllTopics()">More</button>' : '');
    topicsLine.innerHTML = `<strong style="color: black;">Topics selected:</strong>  ${selectedTopicsText}`;
}



function showStarredFlashcards() {
    // Set the filter for starred flashcards to active and reset others
    isStarFilterActive = true;
    isStarReadyFilterActive = false; // Disable "Ready for Review" filter
    filterStage = null; // Reset the review stage filter

    renderFlashcards(); // Re-render flashcards based on updated filters
    updateStarredCount(); // Update the count of starred flashcards
}



function showStarredReadyFlashcards() {
    // Set the filter for starred and ready-to-review flashcards to active and reset others
    isStarReadyFilterActive = true;
    isStarFilterActive = false; // Disable the "Starred" filter
    filterStage = null; // Reset the review stage filter

    renderFlashcards(); // Re-render flashcards based on updated filters
    updateStarredCount(); // Update the count of starred ready-to-review flashcards
}



function attachBookmarkListeners() {
    const bookmarks = document.querySelectorAll('.bookmark');
    bookmarks.forEach(bookmark => {
        bookmark.addEventListener('click', (event) => {
            toggleDropdown(event, 'bookmarkDropdown');
        });
    });
}

function filterFlashcards(stage) {
    filterStage = stage;
    isStarFilterActive = false;
    isStarReadyFilterActive = false;
    currentFlashcardIndex = 0;
    renderFlashcards();
}

function showAllFlashcards() {
    if (filteredTopics.length === 0) {
        const topicSelect = document.getElementById('topic-filter');
        const selectedOptions = Array.from(topicSelect.selectedOptions);
        filteredTopics = selectedOptions.map(option => option.value).filter(value => value !== 'all');
    }
    filterStage = null;
    isStarFilterActive = false;
    isStarReadyFilterActive = false;
    currentFlashcardIndex = 0;
    renderFlashcards();
}

function applyReviewMetrics() {
    document.querySelectorAll('.modern-card').forEach(card => {
        const flashcardId = parseInt(card.dataset.flashcardId);
        const reviewMetric = card.querySelector('.review-metric');
        const bookmark = card.querySelector('.bookmark');
        const knowButton = card.querySelector('.know-btn');

        if (reviewStages[flashcardId]) {
            const { reviewStage, dueDate } = reviewStages[flashcardId];
            reviewMetric.dataset.reviewStage = reviewStage;
            reviewMetric.dataset.dueDate = dueDate;

            const timeRemaining = (new Date(dueDate).getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24);

            if (reviewStage === 4) {
                reviewMetric.textContent = '🏆 Final Review: Completed';
                reviewMetric.style.color = 'gold';
                bookmark.style.color = 'gold';
                card.style.borderColor = 'gold';
                knowButton.disabled = true;
                knowButton.style.backgroundColor = 'gray';
            } else if (timeRemaining <= 0) {
                reviewMetric.textContent = '🔔 Ready for Review';
                reviewMetric.style.color = '#388e3c';
                knowButton.disabled = false;
                knowButton.style.backgroundColor = '#388e3c';
                bookmark.style.color = reviewStageColors[reviewStage];
                card.style.borderColor = reviewStageColors[reviewStage];
            } else {
                const stageColor = reviewStageColors[reviewStage];
                reviewMetric.textContent = `${getReviewText(reviewStage, dueDate)}`;
                reviewMetric.style.color = stageColor;
                bookmark.style.color = stageColor;
                card.style.borderColor = stageColor;
                knowButton.disabled = true;
                knowButton.style.backgroundColor = 'gray';
            }
        } else {
            bookmark.style.color = '';
            card.style.borderColor = '';
            reviewMetric.textContent = '';
        }
    });
}


function handleReviewClick(flashcardId, isKnow) {
    const flashcard = document.querySelector(`[data-flashcard-id="${flashcardId}"]`);
    const answer = flashcard.querySelector('.answer');
    let reviewStage = reviewStages[flashcardId]?.reviewStage || 0;
    const dueDate = new Date(currentDate);
    const revealedTimestamp = new Date().toISOString();
    const isStarred = starMarked[flashcardId] || false; // Keep the current starred state

    answer.style.display = 'block';

    if (isKnow) {
        reviewStage = getNextStage(reviewStage, dueDate); // Move to next stage
    } else {
        reviewStage = 0;
        dueDate.setDate(dueDate.getDate() + 3); // Set the review in 3 days
    }

    // Save both review metrics and starred status together
    reviewStages[flashcardId] = { reviewStage, dueDate: dueDate.toISOString(), revealedTimestamp };
    saveProgress(flashcardId, reviewStage, dueDate.toISOString(), revealedTimestamp, isStarred); // Save starred state with review metrics

    applyReviewMetrics();
    updatePendingCounts();
    updateTopicProgress();
}


function getNextStage(reviewStage, dueDate) {
    if (reviewStage === 0) {
        dueDate.setDate(dueDate.getDate() + 7);
        return 1;
    } else if (reviewStage === 1) {
        dueDate.setDate(dueDate.getDate() + 14);
        return 2;
    } else if (reviewStage === 2) {
        dueDate.setDate(dueDate.getDate() + 28);
        return 3;
    }
    return 4;
}

function getReviewText(reviewStage, dueDate) {
    const timeRemaining = (new Date(dueDate) - currentDate) / (1000 * 60 * 60 * 24);
    return `${["First Review", "Second Review", "Third Review", "Final Review"][reviewStage]} in ${Math.ceil(timeRemaining)} days`;
}

function getReviewStageLabel(stage) {
    const labels = ["First Review", "Second Review", "Third Review", "Final Review"];
    return labels[stage] || " 🏆 Completed Flashcards List";
}

function updatePendingCounts() {
    const counts = [0, 0, 0, 0, 0];
    flashcards.forEach(flashcard => {
        const flashcardData = reviewStages[flashcard.id];
        if (flashcardData) {
            if (flashcardData.reviewStage < 4 && new Date(flashcardData.dueDate) <= currentDate) {
                counts[flashcardData.reviewStage]++;
            } else if (flashcardData.reviewStage === 4) {
                counts[4]++;
            }
        }
    });
    counts.forEach((count, index) => {
        if (index < 4) {
            document.getElementById(`count-stage-${index}`).textContent = `${count} pending`;
        } else {
            document.getElementById('count-completed').textContent = `${count} completed`;
        }
    });
}

function simulateDateTimeChange() {
    const dateInput = document.getElementById('current-date').value;
    const timeInput = document.getElementById('current-time').value;

    if (dateInput && timeInput) {
        currentDate = new Date(`${dateInput}T${timeInput}:00`);
    } else {
        currentDate = new Date();
    }
    refreshFlashcards();
}

function refreshFlashcards() {
    applyReviewMetrics();
    updatePendingCounts();
}

function applyCurrentFilters() {
    if (filterStage !== null) {
        filterFlashcards(filterStage);
    } else {
        renderFlashcards();
    }

    if (isHorizontal) {
        currentFlashcardIndex = 0;
        showFlashcard(currentFlashcardIndex);
    }
}

// Toggle dropdown near the clicked bookmark icon, centered horizontally in the viewport
function toggleDropdown(event, dropdownId) {
    event.stopPropagation();

    const dropdown = document.getElementById(dropdownId);
    const isVisible = dropdown.style.display === "block";

    if (isVisible) {
        dropdown.style.display = "none";
        return;
    }

    dropdown.style.display = "block";
    dropdown.style.position = "absolute";

    const rect = event.target.getBoundingClientRect();

    dropdown.style.top = `${rect.bottom + window.scrollY}px`;
    dropdown.style.left = "50%";
    dropdown.style.transform = "translateX(-50%)";
    dropdown.style.maxWidth = "90vw";
}

// Close dropdown when clicking outside of it
window.addEventListener('click', function (event) {
    const dropdown = document.getElementById('bookmarkDropdown');
    if (dropdown && dropdown.style.display === "block" && !dropdown.contains(event.target)) {
        dropdown.style.display = "none";
    }
});

function closeDropdown(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    if (dropdown) {
        dropdown.style.display = "none";
    }
}

// Handle inactive "Know" button click to show dropdown
function handleInactiveKnowClick(event) {
    if (event.target.disabled) {
        toggleDropdownBelowButton(event, 'inactiveKnowDropdown');
    }
}

// Function to toggle dropdown visibility below the button
function toggleDropdownBelowButton(event, dropdownId) {
    event.stopPropagation();

    const dropdown = document.getElementById(dropdownId);
    const isVisible = dropdown.style.display === "block";

    if (isVisible) {
        dropdown.style.display = "none";
        return;
    }

    const dropdowns = document.querySelectorAll('.dropdown');
    dropdowns.forEach(d => {
        d.style.display = 'none';
    });

    dropdown.style.display = "block";
    dropdown.style.position = "absolute";

    const rect = event.target.getBoundingClientRect();
    dropdown.style.top = `${rect.bottom + window.scrollY}px`;
    dropdown.style.left = "50%";
    dropdown.style.transform = "translateX(-50%)";
    dropdown.style.maxWidth = "90vw";
}

// Close dropdown when clicking outside of it
window.addEventListener('click', function (event) {
    const dropdown = document.getElementById('inactiveKnowDropdown');
    if (dropdown && dropdown.style.display === "block" && !dropdown.contains(event.target)) {
        dropdown.style.display = "none";
    }
});

// Optional: Close dropdown function for specific dropdowns
function closeDropdown(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    if (dropdown) {
        dropdown.style.display = "none";
    }
}


function updateStarredCount() {
   const count = flashcards.filter(flashcard => {
        const isTopicMatch = filteredTopics.length === 0 || filteredTopics.includes(flashcard.topic);
        return isTopicMatch && starMarked[flashcard.id];
    }).length;

    const starFilterBtn = document.querySelector('.filter-btn[onclick="showStarredFlashcards()"]');
      if (starFilterBtn) {
        starFilterBtn.innerHTML = `Starred Flashcards <br> ⭐    <span id="count-starred" class="badge">${count} marked</span>`;
    }
      const starReadyFilterBtn = document.querySelector('.filter-btn[onclick="showStarredReadyFlashcards()"]');
        const countReady = flashcards.filter(flashcard => {
             const isTopicMatch = filteredTopics.length === 0 || filteredTopics.includes(flashcard.topic);
               const reviewStageData = reviewStages[flashcard.id];
               const isDue = reviewStageData && new Date(reviewStageData.dueDate) <= currentDate;
               return isTopicMatch &&  starMarked[flashcard.id] && isDue;
          }).length;
        if (starReadyFilterBtn) {
         starReadyFilterBtn.innerHTML = ` Starred Ready for Review <br> 🌟 <span id="count-starred-ready" class="badge">${countReady} pending</span>`
        }
}

// Function to Toggle the Dropdown Below the Button
function toggleDropdownContent(event) {
    event.stopPropagation();

    const dropdown = document.getElementById('dropdownContent');
    const isVisible = dropdown.style.display === "block";

    if (isVisible) {
        dropdown.style.display = "none";
        return;
    }

    const dropdowns = document.querySelectorAll('.dropdown');
    dropdowns.forEach(d => {
        d.style.display = 'none';
    });

    dropdown.style.display = "block";
    dropdown.style.position = "absolute";

    const rect = event.target.getBoundingClientRect();
    dropdown.style.top = `${rect.bottom + window.scrollY}px`;
    dropdown.style.left = "50%";
    dropdown.style.transform = "translateX(-50%)";
    dropdown.style.maxWidth = "90vw";
}

// Close dropdown when clicking outside of it
window.addEventListener('click', function (event) {
    const dropdown = document.getElementById('dropdownContent');
    const toggleButton = document.getElementById('toggleButton');

    if (dropdown && dropdown.style.display === "block" &&
        !dropdown.contains(event.target) &&
        event.target !== toggleButton) {
        dropdown.style.display = "none";
    }
});

// Function to Close Dropdown Explicitly
function closeDropdown(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    if (dropdown) {
        dropdown.style.display = "none";
    }
}

</script>



<script>
// Function to Toggle the Dropdown Below the Button
function toggleDropdownContent(event) {
    event.stopPropagation();  // Prevent immediate closing due to outside click listener

    const dropdown = document.getElementById('dropdownContent');
    const isVisible = dropdown.style.display === "block";

    // Hide dropdown if already visible
    if (isVisible) {
        dropdown.style.display = "none";
        return;
    }

    // Hide any other open dropdowns
    const dropdowns = document.querySelectorAll('.dropdown');
    dropdowns.forEach(d => {
        d.style.display = 'none';
    });

       // Show and position dropdown
    dropdown.style.display = "block";
    dropdown.style.position = "absolute";

    const rect = event.target.getBoundingClientRect();

    // Set top position just below the clicked bookmark icon
    dropdown.style.top = `${rect.bottom + window.scrollY}px`;

    // Center horizontally in the viewport, using transform for responsive centering
    dropdown.style.left = "50%";
    dropdown.style.transform = "translateX(-50%)";  // Center align horizontally

    // Optional: Set max width for small screens
    dropdown.style.maxWidth = "90vw";  // Allow dropdown to adjust within viewport
}

// Close dropdown when clicking outside of it
window.addEventListener('click', function(event) {
    const dropdown = document.getElementById('dropdownContent');
    const toggleButton = document.getElementById('toggleButton'); // Assuming the button to open dropdown has ID "toggleButton"

    // Close dropdown if clicked outside of it and not on the toggle button
    if (dropdown && dropdown.style.display === "block" &&
        !dropdown.contains(event.target) &&
        event.target !== toggleButton) {
        dropdown.style.display = "none";
    }
});

// Function to Close Dropdown Explicitly
function closeDropdown(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    if (dropdown) {
        dropdown.style.display = "none";
    }
}


</script>




<!-- Include the rest of your JavaScript here -->

</body>
</html>
