WRITE THE FULL COMPLETE CODE: I want a new thing called create on the sidebar make it a pencil ui icon also, when the user presses it when this is a page that it takes them to just lie the get-started page not a modulo, its there the user can type a title of there flashcard set, also a description of what they want the flashcard set to be, next I want it so that the user can start and add by typing the term and then defintion and they can drag the flash card to mvoe it in the hieracy if they want, majke there an add card button so they can add more deifntion and term one by a time, I want it whenn the user is done creating they press create, when they press create the flashcard will be in the navbar side everything that the demo flashcard set we created before with paris annd etc remove and instead now its flashcards the user creates and when they press the flashcard set they choose there flashcard will load with there term and defintion whichh they can flip and toggle the rflahslist, fullscreen basically every function that our demo flashcard  section as before  now the user can click the flashcard set they created but make every functionaity that we did in fflashcard section to this part, now writ ethe full compelte code and dont skip anything, or add comment saying add this here no write the full code: <!DOCTYPE html>
<html lang="en">
  <head>
    <base href="https://example.notion.site/" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dracoify - Notion-inspired UI</title>
    <link
      rel="stylesheet"
      href="https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css"
    />
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap");

      :root {
        --dracoify-font: "Poppins", sans-serif;
        --navbar-height: 45px;
        --footer-height: 60px;
      }

      /* Dark Theme */
      body.dark-theme {
        --dracoify-bg: #121212;
        --dracoify-text: #e0e0e0;
        --dracoify-light-gray: #1e1e1e;
        --dracoify-gray: #4a4a4a;
        --dracoify-brown: #a06f78;
        --dracoify-orange: #e67e5c;
        --dracoify-purple: #8c7ae6;
        --dracoify-green: #5cb85c;
        --dracoify-blue: #5c9ce6;
        --dracoify-pink: #e67a9e;
        --dracoify-red: #e65c5c;
        --dracoify-navbar-bg: rgba(18, 18, 18, 0.5);
        --dracoify-accent: #e67e5c;
        --dracoify-banner-emoji: "🌠";
        --dracoify-selected-color: var(--dracoify-purple);
        --dracoify-banner-text-color: #e0e0e0; /* you can change the color */

        /* Gradient for Dark Theme */
        .dracoify-banner {
          background: hsla(240, 30%, 10%, 1);
          background: linear-gradient(
            to bottom,
            hsla(240, 30%, 10%, 1) 0%,
            hsla(235, 35%, 12%, 1) 20%,
            hsla(230, 40%, 14%, 1) 40%,
            hsla(225, 45%, 16%, 1) 60%,
            hsla(220, 50%, 18%, 1) 80%,
            hsla(240, 10%, 7%, 1) 100%
          );

          background: -moz-linear-gradient(
            to bottom,
            hsla(240, 30%, 10%, 1) 0%,
            hsla(235, 35%, 12%, 1) 20%,
            hsla(230, 40%, 14%, 1) 40%,
            hsla(225, 45%, 16%, 1) 60%,
            hsla(220, 50%, 18%, 1) 80%,
            hsla(240, 10%, 7%, 1) 100%
          );

          background: -webkit-linear-gradient(
            to bottom,
            hsla(240, 30%, 10%, 1) 0%,
            hsla(235, 35%, 12%, 1) 20%,
            hsla(230, 40%, 14%, 1) 40%,
            hsla(225, 45%, 16%, 1) 60%,
            hsla(220, 50%, 18%, 1) 80%,
            hsla(240, 10%, 7%, 1) 100%
          );

          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0F0F1A", endColorstr="#121212", GradientType=1);
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-text-color); /* Set text color */
        }
      }

      /* Light Theme */
      body.light-theme {
        --dracoify-bg: #fafafa;
        --dracoify-text: #333333;
        --dracoify-light-gray: #f0f0f0;
        --dracoify-gray: #e0e0e0;
        --dracoify-brown: #a67f8e;
        --dracoify-orange: #ffa07a;
        --dracoify-purple: #9370db;
        --dracoify-green: #7fbf7f;
        --dracoify-blue: #6495ed;
        --dracoify-pink: #ffb6c1;
        --dracoify-red: #f08080;
        --dracoify-navbar-bg: rgba(250, 250, 250, 0.5);
        --dracoify-accent: #6495ed;
        --dracoify-banner-emoji: "🌤️";
        --dracoify-selected-color: var(--dracoify-purple);
        --dracoify-banner-text-color: #ffffff; /* you can change the color */

        /* Gradient for Light Theme */
        .dracoify-banner {
          background: hsla(11, 69%, 56%, 1);
          background: radial-gradient(
            circle,
            hsla(11, 69%, 56%, 1) 0%,
            hsla(20, 72%, 57%, 1) 24%,
            hsla(35, 79%, 61%, 1) 52%,
            hsla(36, 83%, 61%, 1) 76%,
            hsla(23, 74%, 60%, 1) 100%
          );
          background: -moz-radial-gradient(
            circle,
            hsla(11, 69%, 56%, 1) 0%,
            hsla(20, 72%, 57%, 1) 24%,
            hsla(35, 79%, 61%, 1) 52%,
            hsla(36, 83%, 61%, 1) 76%,
            hsla(23, 74%, 60%, 1) 100%
          );
          background: -webkit-radial-gradient(
            circle,
            hsla(11, 69%, 56%, 1) 0%,
            hsla(20, 72%, 57%, 1) 24%,
            hsla(35, 79%, 61%, 1) 52%,
            hsla(36, 83%, 61%, 1) 76%,
            hsla(23, 74%, 60%, 1) 100%
          );
          filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr="#DC5F42",
            endColorstr="#E07844",
            GradientType=1
          );
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-text-color); /* Set text color */
        }
      }

      /* Coconut Theme */
      body.coconut-theme {
        --dracoify-bg: #fff8e7;
        --dracoify-text: #5c3d2e;
        --dracoify-light-gray: #f5e8d0;
        --dracoify-gray: #a67a5b;
        --dracoify-brown: #8b4513;
        --dracoify-orange: #d2691e;
        --dracoify-purple: #bb8fce;
        --dracoify-green: #228b22;
        --dracoify-blue: #4d94ff;
        --dracoify-pink: #ff66b3;
        --dracoify-red: #ff6666;
        --dracoify-navbar-bg: rgba(255, 248, 231, 0.5);
        --dracoify-accent: #8b4513;
        --dracoify-banner-emoji: "🥥";
        --dracoify-selected-color: var(--dracoify-purple);
        --dracoify-banner-text-color: #ffffff; /* you can change the color */

        .dracoify-banner {
          background: hsla(11, 69%, 56%, 1);
          background: radial-gradient(
            circle,
            hsla(11, 69%, 56%, 1) 0%,
            hsla(20, 72%, 57%, 1) 24%,
            hsla(35, 79%, 61%, 1) 52%,
            hsla(36, 83%, 61%, 1) 76%,
            hsla(23, 74%, 60%, 1) 100%
          );
          background: -moz-radial-gradient(
            circle,
            hsla(11, 69%, 56%, 1) 0%,
            hsla(20, 72%, 57%, 1) 24%,
            hsla(35, 79%, 61%, 1) 52%,
            hsla(36, 83%, 61%, 1) 76%,
            hsla(23, 74%, 60%, 1) 100%
          );
          background: -webkit-radial-gradient(
            circle,
            hsla(11, 69%, 56%, 1) 0%,
            hsla(20, 72%, 57%, 1) 24%,
            hsla(35, 79%, 61%, 1) 52%,
            hsla(36, 83%, 61%, 1) 76%,
            hsla(23, 74%, 60%, 1) 100%
          );
          filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr="#DC5F42",
            endColorstr="#E07844",
            GradientType=1
          );
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-text-color); /* Set text color */
        }
      }

      /* Cotton Candy Theme */
      body.cotton-candy-theme {
        --dracoify-bg: #ffe6f7;
        --dracoify-text: #663366;
        --dracoify-light-gray: #ffccf2;
        --dracoify-gray: #cc99cc;
        --dracoify-navbar-bg: rgba(255, 230, 247, 0.5);
        --dracoify-accent: #ff99cc;
        --dracoify-banner-emoji: "🍬";
        --dracoify-selected-color: #cc6699;
        --dracoify-banner-text-color: #ffffff; /* you can change the color */

        /* Gradient for Cotton Candy Theme */
        .dracoify-banner {
          background: linear-gradient(
            to top,
            #fff0f5 0%, /* Matches --dracoify-bg for smooth blend */
            #ffe4e1 20%, /* Light pink, close to --dracoify-light-gray */
            #ffb6c1 40%, /* Matches --dracoify-gray */
            #ffaabb 60%, /* Slightly darker pink */
            #ff99aa 80%, /* Another light pink shade */
            #ff8899 100% /* Light strawberry pink at the top */
          );
          background: -webkit-linear-gradient(
            bottom,
            #fff0f5 0%,
            #ffe4e1 20%,
            #ffb6c1 40%,
            #ffaabb 60%,
            #ff99aa 80%,
            #ff8899 100%
          );
          background: -moz-linear-gradient(
            bottom,
            #fff0f5 0%,
            #ffe4e1 20%,
            #ffb6c1 40%,
            #ffaabb 60%,
            #ff99aa 80%,
            #ff8899 100%
          );
          filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr="#fff0f5",
            endColorstr="#ff8899",
            GradientType=0
          );
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-text-color); /* Set text color */
        }
      }

      /* Mars Theme */
      body.mars-theme {
        --dracoify-bg: #330000;
        --dracoify-text: #ffcccc;
        --dracoify-light-gray: #660000;
        --dracoify-gray: #993333;
        --dracoify-navbar-bg: rgba(51, 0, 0, 0.5);
        --dracoify-accent: #cc6666;
        --dracoify-banner-emoji: "🚀";
        --dracoify-selected-color: #cc3333;
        --dracoify-banner-text-color: #F5E6D3;

        .dracoify-banner {
          background: #330000;
          background: linear-gradient(
            to top,
            #330000 0%,
            #330000 5%,
            #4a0e0e 15%,
            #661111 30%,
            #8b3232 50%,
            #a84b4b 70%,
            #c76a57 85%,
            #e5917c 100%
          );
          background: -moz-linear-gradient(
            to top,
            #330000 0%,
            #330000 5%,
            #4a0e0e 15%,
            #661111 30%,
            #8b3232 50%,
            #a84b4b 70%,
            #c76a57 85%,
            #e5917c 100%
          );
          background: -webkit-linear-gradient(
            to top,
            #330000 0%,
            #330000 5%,
            #4a0e0e 15%,
            #661111 30%,
            #8b3232 50%,
            #a84b4b 70%,
            #c76a57 85%,
            #e5917c 100%
          );
          filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr="#330000",
            endColorstr="#e5917c",
            GradientType=0
          );
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-text-color);
        }
      }

      /* Strawberry Theme */
      body.strawberry-theme {
        --dracoify-bg: #fff0f5; /* Light pink background */
        --dracoify-text: #ff6b8a; /* Lighter, more aesthetic red for text */
        --dracoify-light-gray: #f0e6ff; /* Light lavender for light accents */
        --dracoify-gray: #e6d0ff; /* Lighter purple for medium accents */
        --dracoify-navbar-bg: rgba(255, 182, 193, 0.2); /* Semi-transparent light pink */
        --dracoify-accent: #ff8fa3; /* Soft, aesthetic strawberry red */
        --dracoify-banner-emoji: "🍓"; /* Keeping the strawberry emoji */
        --dracoify-selected-color: #d8a2ff; /* Light purple for selections */
        --dracoify-banner-text-color: #ffffff; /* White for banner text for better contrast */
      }

      .dracoify-banner {
        background: linear-gradient(
          to top,
          #fff0f5 0%, /* Matches --dracoify-bg for smooth blend */
          #ffe4e1 20%, /* Light pink, close to --dracoify-light-gray */
          #ffb6c1 40%, /* Matches --dracoify-gray */
          #ffaabb 60%, /* Slightly darker pink */
          #ff99aa 80%, /* Another light pink shade */
          #ff8899 100% /* Light strawberry pink at the top */
        );
        background: -webkit-linear-gradient(
          bottom,
          #fff0f5 0%,
          #ffe4e1 20%,
          #ffb6c1 40%,
          #ffaabb 60%,
          #ff99aa 80%,
          #ff8899 100%
        );
        background: -moz-linear-gradient(
          bottom,
          #fff0f5 0%,
          #ffe4e1 20%,
          #ffb6c1 40%,
          #ffaabb 60%,
          #ff99aa 80%,
          #ff8899 100%
        );
        filter: progid:DXImageTransform.Microsoft.gradient(
          startColorstr="#fff0f5",
          endColorstr="#ff8899",
          GradientType=0
        );
      }

      .dracoify-h1 {
        color: var(--dracoify-banner-text-color); /* Set text color */
      }

      /* Sunset Spice Theme */
      body.sunset-spice-theme {
        --dracoify-bg: #fdeddb;
        --dracoify-text: #ff6600;
        --dracoify-light-gray: #ffddb3;
        --dracoify-gray: #ffbb66;
        --dracoify-navbar-bg: rgb(253, 237, 219, 0.5);
        --dracoify-accent: #cc6600;
        --dracoify-banner-emoji: "🌅";
        --dracoify-selected-color: #ff6600;
        --dracoify-banner-text-color: #ffffff; /* you can change the color */

        .dracoify-banner {
          background: #fdeddb;
          background: linear-gradient(
            to top,
            #fdeddb 0%, /* Start with the lightest color */
            #fde4cb 20%, /* Gradually transition to the next light tone */
            #f15c52 40%, /* Introduce the red, but keep it spaced out */
            #f67453 60%, /* Smooth the transition by blending red to orange */
            #faa166 80%, /* Transition from orange */
            #fddb9f 100% /* End with a light tone for a softer finish */
          );
          background: -moz-linear-gradient(
            to top,
            #fdeddb 0%,
            #fde4cb 20%,
            #f15c52 40%,
            #f67453 60%,
            #faa166 80%,
            #fddb9f 100%
          );
          background: -webkit-linear-gradient(
            to top,
            #fdeddb 0%,
            #fde4cb 20%,
            #f15c52 40%,
            #f67453 60%,
            #faa166 80%,
            #fddb9f 100%
          );
          filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr="#fdeddb",
            endColorstr="#fddb9f",
            GradientType=0
          );
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-text-color);
        }
      }

      /* Tropical Sorbet Theme */
      body.tropical-sorbet-theme {
        --dracoify-bg: #f5ffe8;
        --dracoify-text: #fe5fbe;
        --dracoify-light-gray: #f5ffe8;
        --dracoify-gray: #f0bedd;
        --dracoify-navbar-bg: rgb(230, 245, 210, 0.5);
        --dracoify-accent: #f5ffe8;
        --dracoify-banner-emoji: "🍧";
        --dracoify-selected-color: #f5ffe8;
        --dracoify-banner-text-color: #fe5fbe; /* you can change the color */

        /* Gradient for Tropical Sorbet Theme */
        .dracoify-banner {
          background: hsla(128, 100%, 70%, 1);
          background: linear-gradient(
            to bottom,
            hsla(128, 100%, 70%, 1) 0%, /* Start with green at the top */
            hsla(83, 91%, 61%, 1) 24%, /* Gradual transition to a lighter green */
            hsla(80, 100%, 78%, 1) 53%, /* Lighter, more vibrant green */
            hsla(69, 100%, 91%, 1) 75%, /* Very light green, almost white */
            hsla(90, 100%, 96%, 1) 100% /* End with a very pale green */
          );
          background: -moz-linear-gradient(
            to bottom,
            hsla(128, 100%, 70%, 1) 0%,
            hsla(83, 91%, 61%, 1) 24%,
            hsla(80, 100%, 78%, 1) 53%,
            hsla(69, 100%, 91%, 1) 75%,
            hsla(90, 100%, 96%, 1) 100%
          );
          background: -webkit-linear-gradient(
            to bottom,
            hsla(128, 100%, 70%, 1) 0%,
            hsla(83, 91%, 61%, 1) 24%,
            hsla(80, 100%, 78%, 1) 53%,
            hsla(69, 100%, 91%, 1) 75%,
            hsla(90, 100%, 96%, 1) 100%
          );
          filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr="#64ff78",
            endColorstr="#b0f63f",
            GradientType=0
          );
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-text-color); /* Set text color */
        }
      }

      /* General Styles */
      body {
        font-family: var(--dracoify-font);
        background-color: var(--dracoify-bg);
        color: var(--dracoify-text);
        margin: 0;
        padding: 0;
        line-height: 1.5;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
      }

      /* Custom Scrollbar Styles */
      ::-webkit-scrollbar {
        width: 8px;
      }

      ::-webkit-scrollbar-track {
        background: var(--dracoify-light-gray);
      }

      ::-webkit-scrollbar-thumb {
        background: var(--dracoify-gray);
        border-radius: 4px;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: var(--dracoify-purple);
      }

      /* For Firefox */
      body {
        scrollbar-width: thin;
        scrollbar-color: var(--dracoify-gray) var(--dracoify-light-gray);
      }

      /* Smooth scrolling */
      html {
        scroll-behavior: smooth;
      }

      /* Wrapper for content that will be blurred */
      #content-wrapper {
        flex: 1 0 auto;
      }

      /* Apply blur to the content wrapper when blurred class is added */
      #content-wrapper.blurred {
        filter: blur(5px);
      }

      .dracoify-navbar {
        display: flex;
        align-items: center;
        padding: 6px 12px 6px 14px;
        height: var(--navbar-height);
        background-color: var(--dracoify-navbar-bg);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0 0 10px 10px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
      }

      .dracoify-navbar-breadcrumb {
        display: flex;
        align-items: center;
      }

      .dracoify-navbar-breadcrumb-item {
        font-size: 14px;
        font-weight: 500;
        color: var(--dracoify-gray);
        margin-right: 8px;
      }

      .dracoify-navbar-breadcrumb-item:last-child {
        color: var(--dracoify-text);
      }

      .dracoify-navbar-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
      }

      .dracoify-navbar-action {
        width: 32px;
        height: 32px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 2px;
        cursor: pointer;
        color: var(--dracoify-text);
        transition: background-color 0.2s ease;
      }

      .dracoify-navbar-action:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      /* Remove the three dots and plus sign */
      .dracoify-navbar-action {
        display: none;
      }

      /* Updated Theme Selector Styles */
      .dracoify-navbar-actions .theme-select-wrapper {
        position: relative;
        display: inline-block;
        margin-left: 10px;
      }

      .dracoify-navbar-actions .theme-select {
        background-color: transparent;
        border: none;
        color: var(--dracoify-text);
        font-size: 14px;
        cursor: pointer;
        appearance: none;
        padding-right: 20px;
        position: relative;
        font-family: var(--dracoify-font);
        font-weight: 500;
        transition: color 0.3s ease;
      }

      .dracoify-navbar-actions .theme-select:hover {
        color: var(--dracoify-accent);
      }

      .dracoify-navbar-actions .theme-select::after {
        content: "";
        position: absolute;
        right: 7px;
        top: 50%;
        margin-top: -4px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid var(--dracoify-text);
        pointer-events: none;
        transition: transform 0.3s ease;
      }

      .dracoify-navbar-actions .theme-select.open::after {
        transform: rotateX(180deg);
      }

      /* Updated to align theme options to the right */
      .dracoify-navbar-actions .theme-options {
        display: none;
        position: absolute;
        right: 0; /* Changed from left: 0 to right: 0 */
        top: 100%;
        background-color: var(--dracoify-light-gray);
        border: 1px solid var(--dracoify-gray);
        border-radius: 4px;
        z-index: 1000;
        min-width: 150px;
        overflow: hidden;
      }

      .dracoify-navbar-actions .theme-options.open {
        display: block;
        animation: dropdown-slide 0.3s ease forwards;
      }

      @keyframes dropdown-slide {
        from {
          opacity: 0;
          transform: scaleY(0);
          transform-origin: top;
        }
        to {
          opacity: 1;
          transform: scaleY(1);
          transform-origin: top;
        }
      }

      .dracoify-navbar-actions .theme-option {
        padding: 10px 15px;
        cursor: pointer;
        color: var(--dracoify-text);
        transition: background-color 0.2s ease;
        font-size: 14px;
        white-space: nowrap; /* Prevent text from wrapping */
      }

      .dracoify-navbar-actions .theme-option:hover {
        background-color: var(--dracoify-gray);
      }

      .dracoify-sidebar {
        position: fixed;
        left: 0;
        top: var(--navbar-height);
        bottom: 0;
        width: 240px;
        background-color: var(--dracoify-bg);
        border-right: 1px solid var(--dracoify-light-gray);
        padding: 14px;
        overflow-y: auto;
        z-index: 99;
        transition: width 0.3s ease;
      }

      .dracoify-sidebar.collapsed {
        width: 60px;
      }

      .dracoify-sidebar-header {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        padding-left: 10px;
        cursor: pointer;
      }

      .dracoify-sidebar-title {
        font-size: 14px;
        font-weight: 500;
        margin-left: 8px;
        color: var(--dracoify-text);
        transition: opacity 0.3s ease;
      }

      .dracoify-sidebar.collapsed .dracoify-sidebar-title {
        opacity: 0;
      }

      .dracoify-sidebar-pages {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }

      .dracoify-sidebar-page {
        display: flex;
        align-items: center;
        padding: 4px 0 4px 10px;
        cursor: pointer;
        border-radius: 3px;
        margin-bottom: 1px;
        position: relative;
      }

      .dracoify-sidebar-page:hover {
        background-color: var(--dracoify-light-gray);
      }

      .dracoify-sidebar-page-icon {
        width: 18px;
        height: 18px;
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--dracoify-text);
      }

      .dracoify-sidebar-page-title {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity 0.3s ease;
      }

      .dracoify-sidebar.collapsed .dracoify-sidebar-page-title {
        opacity: 0;
      }

      .dracoify-sidebar-page-lock {
        margin-left: auto;
        margin-right: 10px;
        color: var(--dracoify-gray);
        transition: opacity 0.3s ease;
      }

      .dracoify-sidebar.collapsed .dracoify-sidebar-page-lock {
        opacity: 0;
      }

      .dracoify-content {
        margin-left: 240px;
        margin-top: var(--navbar-height);
        padding: 0 0 30vh;
        transition: margin-left 0.3s ease;
        flex: 1 0 auto;
      }

      .dracoify-content.sidebar-collapsed {
        margin-left: 60px;
      }

      .dracoify-section-content {
        padding: 0 96px;
        text-align: center;
      }

      .dracoify-block {
        margin-bottom: 1em;
      }

      /* Updated Gradient from Theme Classes */

      .dracoify-h1 {
        font-size: 40px;
        font-weight: 700;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        /* Removed background clipping to have solid text color */
      }

      .dracoify-banner {
        width: 100%;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 16px;
        color: var(--dracoify-banner-text-color);
        position: relative;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
      }

      .dracoify-banner-title {
        font-size: 32px;
        font-weight: 700;
        margin: 0;
      }

      .dracoify-toggle {
        cursor: pointer;
      }

      .dracoify-toggle-arrow {
        display: inline-block;
        width: 24px;
        height: 24px;
        transition: transform 0.2s;
        color: var(--dracoify-text);
      }

      .dracoify-toggle-content {
        margin-left: 24px;
        display: none;
      }

      .dracoify-toggle.open .dracoify-toggle-arrow {
        transform: rotate(90deg);
      }

      .dracoify-toggle.open .dracoify-toggle-content {
        display: block;
      }

      .dracoify-button {
        background-color: var(--dracoify-light-gray);
        font-size: 14px;
        border: none;
        color: var(--dracoify-text);
        font-family: var(--dracoify-font);
        font-weight: 400;
        padding: 10px 20px;
        border-radius: 3px;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.6s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .dracoify-button i {
        margin-right: 8px;
        font-size: 16px;
      }

      .dracoify-button:hover {
        background-color: var(--dracoify-gray);
      }

      .dracoify-form-group {
        margin-bottom: 1.5em;
      }

      .dracoify-form-label {
        display: block;
        margin-bottom: 0.5em;
        font-size: 16px;
      }

      .dracoify-input {
        width: 100%;
        padding: 10px 12px;
        padding-right: 35px;
        background-color: var(--dracoify-light-gray);
        border: 1px solid var(--dracoify-gray);
        border-radius: 3px;
        color: var(--dracoify-text);
        font-size: 14px;
        box-sizing: border-box;
      }

      .dracoify-input::placeholder {
        color: var(--dracoify-gray);
      }

      /* Adjusting the API Key Input Field Size */
      #api-key {
        max-width: 400px;
      }

      /* Custom File Upload */
      .custom-file-upload {
        position: relative;
        display: inline-block;
      }

      .custom-file-upload input[type="file"] {
        display: none;
      }

      .custom-file-upload .upload-button {
        background-color: var(--dracoify-light-gray);
        font-size: 14px;
        border: 1px solid var(--dracoify-gray);
        color: var(--dracoify-text);
        font-family: var(--dracoify-font);
        font-weight: 400;
        padding: 10px 20px;
        border-radius: 3px;
        cursor: pointer;
        transition: background-color 0.2s;
        display: inline-flex;
        align-items: center;
      }

      .custom-file-upload .upload-button i {
        margin-right: 8px;
        font-size: 16px;
      }

      .custom-file-upload .upload-button:hover {
        background-color: var(--dracoify-gray);
      }

      .file-list {
        margin-top: 10px;
      }

      .file-list-item {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
      }

      .file-list-item i {
        margin-right: 8px;
        color: var(--dracoify-purple);
      }

      .file-list-item span {
        font-size: 14px;
        color: var(--dracoify-text);
      }

      footer {
        background-color: var(--dracoify-bg);
        color: var(--dracoify-text);
        padding: 20px 0;
        text-align: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--footer-height);
        z-index: 100;
      }

      .footer-content {
        max-width: 1200px;
        margin: 0 auto;
      }

      /* Flashcard Gallery */
      .flashcard-gallery {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        perspective: 1000px;
      }

      .gallery-nav {
        background: none;
        border: none;
        color: var(--dracoify-text);
        cursor: pointer;
        padding: 10px;
        transition: color 0.3s ease;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .gallery-nav:hover {
        color: var(--dracoify-purple);
        background-color: rgba(255, 255, 255, 0.1);
      }

      .flashcard-container {
        width: 700px;
        height: 400px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      .flashcard {
        width: 500px;
        height: 300px;
        position: absolute;
        cursor: pointer;
        transition: transform 0.6s, opacity 0.6s;
        touch-action: pan-y;
      }

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

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

      .flashcard-front,
      .flashcard-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        background-color: var(--dracoify-light-gray);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--dracoify-text);
        font-size: 24px;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
      }

      .flashcard-back {
        background-color: var(--dracoify-gray);
        color: #fff;
        transform: rotateY(180deg);
      }

      .flashcard-list {
        margin-top: 30px;
        max-height: 600px;
        overflow-y: auto;
        transition: filter 0.3s ease;
      }

      .flashcard-list.blurry {
        /* No blur effect */
      }

      .flashcard-item {
        background-color: var(--dracoify-light-gray);
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        display: flex;
        flex-direction: column;
      }

      .flashcard-item h4 {
        margin: 0 0 10px 0;
        color: var(--dracoify-purple);
      }

      .flashcard-item p {
        margin: 0;
        color: var(--dracoify-text);
      }

      .dracoify-quiz-form {
        margin-top: 20px;
      }

      .dracoify-quiz-question {
        margin-bottom: 20px;
        text-align: left;
        position: relative;
      }

      .dracoify-quiz-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 15px;
      }

      .dracoify-quiz-option {
        background-color: var(--dracoify-light-gray);
        border-radius: 8px;
        padding: 15px;
        cursor: pointer;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .dracoify-quiz-option:hover {
        background-color: var(--dracoify-gray);
      }

      .dracoify-quiz-option.selected {
        background-color: var(--dracoify-selected-color);
        color: white;
      }

      .dracoify-quiz-option span {
        font-size: 16px;
        font-weight: 500;
      }

      .dracoify-quiz-form .dracoify-button {
        margin-top: 30px;
      }

      /* Modal Popup Styles */
      .modal {
        display: none;
        position: fixed;
        z-index: 200;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .modal-content {
        background-color: var(--dracoify-light-gray);
        padding: 30px 20px;
        border-radius: 8px;
        width: 80%;
        max-width: 400px;
        text-align: center;
        color: var(--dracoify-text);
        position: relative;
        margin: 0 auto;
      }

      .modal-content i {
        font-size: 48px;
        color: var(--dracoify-purple);
        margin-bottom: 20px;
      }

      .modal-content h2 {
        margin-top: 0;
        font-size: 28px;
      }

      .modal-content p {
        font-size: 18px;
        margin-bottom: 30px;
      }

      .modal-content .dracoify-button {
        margin-top: 20px;
      }

      /* Flashcards Fullscreen Modal Styles */
      .flashcards-fullscreen-content {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: var(--dracoify-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .close-fullscreen {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 36px;
        color: var(--dracoify-text);
        cursor: pointer;
        z-index: 201;
      }

      .flashcard-fullscreen-container {
        width: 100%;
        height: 100%;
        position: relative;
        touch-action: pan-y;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1000px; /* Added perspective for 3D flip */
      }

      .fullscreen-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 200;
      }

      .fullscreen-nav.left-nav {
        left: 10px;
      }

      .fullscreen-nav.right-nav {
        right: 10px;
      }

      .flashcard-fullscreen-container .flashcard {
        width: 90%;
        max-width: 600px;
        height: 80%;
        max-height: 500px;
        margin: 0 auto;
      }

      /* Feedback Icons for Quiz */
      .feedback-icon {
        margin-right: 8px;
        color: var(--dracoify-purple);
        font-size: 20px;
        vertical-align: middle;
      }

      .feedback-icon.correct {
        color: green;
      }

      .feedback-icon.incorrect {
        color: red;
      }

      .correct-answer {
        margin-top: 10px;
        font-size: 14px;
        color: var(--dracoify-text);
      }

      /* Correct Answer Highlight */
      .dracoify-quiz-option.correct {
        background-color: var(--dracoify-selected-color);
        color: white;
      }

      /* Wrong Answer Red Outline */
      .dracoify-quiz-option.incorrect {
        border: 2px solid red;
      }

      /* Override the background color for incorrect selected options */
      .dracoify-quiz-option.selected.incorrect {
        background-color: transparent;
        border: 2px solid red;
        color: var(--dracoify-text);
      }

      /* Flip Animation for Toggle Button */
      .flip-animation {
        animation: flip 0.6s forwards;
      }

      @keyframes flip {
        from {
          transform: rotateY(0deg);
        }
        to {
          transform: rotateY(360deg);
        }
      }

      /* Centering the Toggle Flashcard List Button */
      #toggle-list-button,
      #fullscreen-button {
        display: inline-block;
        margin: 0 auto 20px auto; /* Center the buttons and add bottom margin */
      }

      /* Additional Styles for Fullscreen Button */
      #fullscreen-button {
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <!-- Wrapper for content that will be blurred -->
    <div id="content-wrapper">
      <!-- Top Navbar -->
      <nav class="dracoify-navbar">
        <div class="dracoify-navbar-breadcrumb">
          <span class="dracoify-navbar-breadcrumb-item">Workspace</span>
          <span class="dracoify-navbar-breadcrumb-item">/</span>
          <span class="dracoify-navbar-breadcrumb-item">Getting Started</span>
        </div>
        <div class="dracoify-navbar-actions">
          <!-- Theme Selector -->
          <div class="theme-select-wrapper">
            <div class="theme-select" id="theme-select">Select Theme</div>
            <div class="theme-options" id="theme-options">
              <div class="theme-option" data-theme="dark">Dark Mode</div>
              <div class="theme-option" data-theme="light">Light Mode</div>
              <div class="theme-option" data-theme="coconut">Coconut</div>
              <div class="theme-option" data-theme="cotton-candy">
                Cotton Candy
              </div>
              <div class="theme-option" data-theme="mars">Mars</div>
              <div class="theme-option" data-theme="strawberry">Strawberry</div>
              <div class="theme-option" data-theme="tropical-sorbet">
                Tropical Sorbet
              </div>
            </div>
          </div>
        </div>
      </nav>

      <!-- Sidebar -->
      <aside class="dracoify-sidebar" id="sidebar">
        <div class="dracoify-sidebar-header" id="sidebar-header">
          <i class="fi fi-rr-angle-left" id="sidebar-toggle-icon"></i>
          <span class="dracoify-sidebar-title">Your Workspace</span>
        </div>
        <ul class="dracoify-sidebar-pages">
          <li class="dracoify-sidebar-page" data-page="Getting Started">
            <div class="dracoify-sidebar-page-icon">
              <i class="fi fi-rr-document"></i>
            </div>
            <span class="dracoify-sidebar-page-title">Getting Started</span>
          </li>
          <li class="dracoify-sidebar-page" data-page="Flashcards">
            <div class="dracoify-sidebar-page-icon">
              <i class="fi fi-rr-copy-alt"></i>
            </div>
            <span class="dracoify-sidebar-page-title">Flashcards</span>
            <i
              class="fi fi-rr-lock dracoify-sidebar-page-lock"
              id="flashcards-lock-icon"
            ></i>
          </li>
          <li class="dracoify-sidebar-page" data-page="AI Quiz">
            <div class="dracoify-sidebar-page-icon">
              <i class="fi fi-rr-brain"></i>
            </div>
            <span class="dracoify-sidebar-page-title">AI Quiz</span>
            <i
              class="fi fi-rr-lock dracoify-sidebar-page-lock"
              id="aiquiz-lock-icon"
            ></i>
          </li>
        </ul>
      </aside>

      <!-- Main Content -->
      <main class="dracoify-content" id="main-content">
        <!-- Getting Started Section -->
        <div class="dracoify-section" data-section="Getting Started">
          <div class="dracoify-banner">
            <h1 class="dracoify-banner-title">Hey, I'm Draco 😊</h1>
          </div>
          <div class="dracoify-section-content">
            <div class="dracoify-block dracoify-text">
              To get started, please follow the steps below to unlock access to
              Flashcards and AI Quiz:
            </div>

            <!-- Step 1: API Key -->
            <div class="dracoify-block">
              <h2 class="dracoify-h2">1. API Key</h2>
              <div class="dracoify-block dracoify-text">
                Please enter your API Key below:
              </div>
              <!-- API Key Input Field -->
              <div class="dracoify-form-group">
                <label for="api-key" class="dracoify-form-label">
                  API Key:
                </label>
                <div
                  style="position: relative; margin: 0 auto; max-width: 400px"
                >
                  <input
                    type="password"
                    id="api-key"
                    class="dracoify-input"
                    placeholder="Enter your API Key"
                  />
                  <i
                    class="fi fi-rr-key"
                    style="
                      position: absolute;
                      right: 10px;
                      top: 50%;
                      transform: translateY(-50%);
                      color: var(--dracoify-gray);
                      pointer-events: none;
                    "
                  ></i>
                </div>
              </div>
            </div>

            <!-- Step 2: Upload Files -->
            <div class="dracoify-block">
              <h2 class="dracoify-h2">2. Upload Files</h2>
              <div class="dracoify-block dracoify-text">
                Please upload your files to continue. You can upload multiple
                files.
              </div>
              <!-- File Upload Input -->
              <div class="dracoify-form-group">
                <label class="dracoify-form-label">Upload Files:</label>
                <div class="custom-file-upload">
                  <label for="file-upload" class="upload-button">
                    <i class="fi fi-rr-upload"></i> Choose Files
                  </label>
                  <input type="file" id="file-upload" multiple />
                </div>
                <div id="file-list" class="file-list"></div>
              </div>
            </div>

            <!-- Unlock Button -->
            <div class="dracoify-block">
              <button class="dracoify-button" id="unlock-button">
                <i class="fi fi-rr-unlock"></i> Unlock Now
              </button>
            </div>
          </div>
        </div>

        <!-- Flashcards Section -->
        <div
          id="flashcard-section"
          class="dracoify-section"
          data-section="Flashcards"
          style="display: none"
        >
          <div class="dracoify-banner">
            <h1 class="dracoify-banner-title">Flashcards</h1>
          </div>
          <div class="dracoify-section-content">
            <div class="flashcard-gallery">
              <button class="gallery-nav left-nav">
                <i class="fi fi-rr-angle-left"></i>
              </button>
              <div class="flashcard-container">
                <div class="flashcard">
                  <div class="flashcard-inner">
                    <div class="flashcard-front">
                      <h3>What is the capital of France?</h3>
                    </div>
                    <div class="flashcard-back">
                      <p>Paris</p>
                    </div>
                  </div>
                </div>
              </div>
              <button class="gallery-nav right-nav">
                <i class="fi fi-rr-angle-right"></i>
              </button>
            </div>

            <!-- Actions: Toggle Flashcard List and Fullscreen -->
            <div style="margin-bottom: 20px;">
              <button
                id="toggle-list-button"
                class="dracoify-button"
                style="margin-bottom: 10px;"
              >
                <i class="fi fi-rr-eye"></i> Toggle Flashcard List
              </button>
              <button
                id="fullscreen-button"
                class="dracoify-button"
                style="margin-bottom: 10px; margin-left: 10px;"
              >
                <i class="fi fi-rr-arrows-alt"></i> Fullscreen
              </button>
            </div>

            <div class="flashcard-list" style="display: none">
              <div class="flashcard-item">
                <h4>What is the capital of France?</h4>
                <p>Paris</p>
              </div>
              <div class="flashcard-item">
                <h4>Which planet is known as the Red Planet?</h4>
                <p>Mars</p>
              </div>
              <div class="flashcard-item">
                <h4>What is the largest ocean on Earth?</h4>
                <p>Pacific Ocean</p>
              </div>
              <div class="flashcard-item">
                <h4>Who wrote 'Romeo and Juliet'?</h4>
                <p>William Shakespeare</p>
              </div>
              <div class="flashcard-item">
                <h4>What is the chemical symbol for Gold?</h4>
                <p>Au</p>
              </div>
            </div>
          </div>
        </div>

        <!-- AI Quiz Section -->
        <div
          id="ai-quiz-section"
          class="dracoify-section"
          data-section="AI Quiz"
          style="display: none"
        >
          <div class="dracoify-banner">
            <h1 class="dracoify-banner-title">AI Quiz</h1>
          </div>
          <div class="dracoify-section-content">
            <form id="ai-quiz-form" class="dracoify-quiz-form">
              <div class="dracoify-quiz-question" data-correct-answer="c">
                <div class="dracoify-block dracoify-text">
                  1. What is the capital of France?
                </div>
                <div class="dracoify-quiz-options">
                  <div class="dracoify-quiz-option" data-value="a">
                    <span>London</span>
                  </div>
                  <div class="dracoify-quiz-option" data-value="b">
                    <span>Berlin</span>
                  </div>
                  <div class="dracoify-quiz-option" data-value="c">
                    <span>Paris</span>
                  </div>
                  <div class="dracoify-quiz-option" data-value="d">
                    <span>Rome</span>
                  </div>
                </div>
              </div>

              <div class="dracoify-quiz-question" data-correct-answer="b">
                <div class="dracoify-block dracoify-text">
                  2. Which planet is known as the Red Planet?
                </div>
                <div class="dracoify-quiz-options">
                  <div class="dracoify-quiz-option" data-value="a">
                    <span>Venus</span>
                  </div>
                  <div class="dracoify-quiz-option" data-value="b">
                    <span>Mars</span>
                  </div>
                  <div class="dracoify-quiz-option" data-value="c">
                    <span>Jupiter</span>
                  </div>
                  <div class="dracoify-quiz-option" data-value="d">
                    <span>Saturn</span>
                  </div>
                </div>
              </div>

              <button type="submit" class="dracoify-button">
                <i class="fi fi-rr-check"></i> Submit Quiz
              </button>
              <button
                type="button"
                id="review-wrong-button"
                class="dracoify-button"
                style="display: none"
              >
                <i class="fi fi-rr-exclamation"></i> Wrong Answers
              </button>
            </form>
          </div>
        </div>
      </main>

      <!-- Footer -->
      <footer>
        <div class="footer-content">
          <p>Made with ❤️ by Draco</p>
        </div>
      </footer>
    </div>
    <!-- End of content-wrapper -->

    <!-- Modal Popup -->
    <div id="unlock-modal" class="modal">
      <div class="modal-content">
        <i class="fi fi-rr-unlock"></i>
        <h2>You did it!</h2>
        <p>Enjoy AI Quiz and Flashcards</p>
        <button id="close-modal-button" class="dracoify-button">
          <i class="fi fi-rr-smile"></i> Awesome!
        </button>
      </div>
    </div>

    <!-- Custom Modal for Alerts -->
    <div id="custom-modal" class="modal">
      <div class="modal-content">
        <i class="fi fi-rr-info"></i>
        <h2 id="modal-title">Alert</h2>
        <p id="modal-message">This is a custom alert message.</p>
        <button id="modal-ok-button" class="dracoify-button">
          <i class="fi fi-rr-check"></i> OK
        </button>
      </div>
    </div>

    <!-- Flashcards Fullscreen Modal -->
    <div id="flashcards-fullscreen-modal" class="modal">
      <div class="flashcards-fullscreen-content">
        <button class="close-fullscreen" id="close-fullscreen-button">
          &times;
        </button>
        <div class="flashcard-fullscreen-container">
          <div class="flashcard">
            <div class="flashcard-inner">
              <div class="flashcard-front">
                <h3>What is the capital of France?</h3>
              </div>
              <div class="flashcard-back">
                <p>Paris</p>
              </div>
            </div>
          </div>
        </div>
        <button
          class="gallery-nav left-nav fullscreen-nav"
          id="fullscreen-left-nav"
        >
          <i class="fi fi-rr-angle-left"></i>
        </button>
        <button
          class="gallery-nav right-nav fullscreen-nav"
          id="fullscreen-right-nav"
        >
          <i class="fi fi-rr-angle-right"></i>
        </button>
      </div>
    </div>

    <!-- JavaScript -->
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const sidebarPages = document.querySelectorAll(".dracoify-sidebar-page");
        const mainContent = document.getElementById("main-content");
        const sections = document.querySelectorAll(".dracoify-section");

        let isReviewingWrongAnswers = false;
        let featuresUnlocked = false;

        const contentWrapper = document.getElementById("content-wrapper");

        // Updated Theme Handling
        const themeSelect = document.getElementById("theme-select");
        const themeOptions = document.getElementById("theme-options");
        const themeOptionItems = document.querySelectorAll(".theme-option");
        let currentTheme = localStorage.getItem("theme") || "dark";
        changeTheme(currentTheme);

        themeSelect.addEventListener("click", function () {
          themeOptions.classList.toggle("open");
          themeSelect.classList.toggle("open");
        });

        themeOptionItems.forEach((option) => {
          option.addEventListener("click", function () {
            const selectedTheme = this.getAttribute("data-theme");
            changeTheme(selectedTheme);
            themeOptions.classList.remove("open");
            themeSelect.classList.remove("open");
            themeSelect.textContent = this.textContent;
          });
        });

        function changeTheme(themeName) {
          // Remove existing theme classes
          const themeClasses = [
            "dark-theme",
            "light-theme",
            "coconut-theme",
            "cotton-candy-theme",
            "mars-theme",
            "strawberry-theme",
            "tropical-sorbet-theme",
          ];
          document.body.classList.remove(...themeClasses);
          // Add new theme class
          document.body.classList.add(themeName + "-theme");
          // Save to localStorage
          localStorage.setItem("theme", themeName);
          currentTheme = themeName;
          // Update the select text
          const selectedOption = document.querySelector(
            `.theme-option[data-theme="${themeName}"]`
          );
          if (selectedOption) {
            themeSelect.textContent = selectedOption.textContent;
          }
        }

        // Close theme dropdown when clicking outside
        document.addEventListener("click", function (event) {
          if (
            !themeSelect.contains(event.target) &&
            !themeOptions.contains(event.target)
          ) {
            themeOptions.classList.remove("open");
            themeSelect.classList.remove("open");
          }
        });

        // Unlock Button Functionality
        const unlockButton = document.getElementById("unlock-button");
        unlockButton.addEventListener("click", function () {
          const apiKeyInput = document.getElementById("api-key").value.trim();
          const fileUploadInput = document.getElementById("file-upload");

          if (apiKeyInput === "") {
            showCustomModal("Missing API Key", "Please enter your API Key.");
            return;
          }

          if (fileUploadInput.files.length === 0) {
            showCustomModal(
              "No Files Uploaded",
              "Please upload at least one file."
            );
            return;
          }

          // Assuming validation passes, unlock the features
          featuresUnlocked = true;

          // Show the modal popup
          const unlockModal = document.getElementById("unlock-modal");
          unlockModal.style.display = "flex";

          // Blur the background
          contentWrapper.classList.add("blurred");

          // Prevent body from scrolling
          document.body.style.overflow = "hidden";

          // Remove lock icons from sidebar
          const flashcardsLockIcon = document.getElementById(
            "flashcards-lock-icon"
          );
          const aiQuizLockIcon = document.getElementById("aiquiz-lock-icon");
          if (flashcardsLockIcon) {
            flashcardsLockIcon.style.display = "none";
          }
          if (aiQuizLockIcon) {
            aiQuizLockIcon.style.display = "none";
          }
        });

        // Close Modal Functionality
        const unlockModal = document.getElementById("unlock-modal");
        const closeModalButton = document.getElementById("close-modal-button");
        closeModalButton.addEventListener("click", function () {
          unlockModal.style.display = "none";
          contentWrapper.classList.remove("blurred");
          document.body.style.overflow = "";

          // Show Flashcards section if it was previously selected
          const currentSection = document.querySelector(
            '.dracoify-section:not([style*="display: none"])'
          );
          if (
            currentSection &&
            currentSection.getAttribute("data-section") !== "Getting Started"
          ) {
            showSection(currentSection.getAttribute("data-section"));
          }
        });

        // Close the modal when clicking outside of it
        window.onclick = function (event) {
          if (event.target === unlockModal) {
            unlockModal.style.display = "none";
            contentWrapper.classList.remove("blurred");
            document.body.style.overflow = "";
          }

          if (event.target === customModal) {
            customModal.style.display = "none";
            contentWrapper.classList.remove("blurred");
            document.body.style.overflow = "";
          }

          if (event.target === flashcardsFullscreenModal) {
            closeFlashcardsFullscreen();
          }
        };

        // Function to show a specific section
        function showSection(sectionName) {
          sections.forEach((section) => {
            if (section.getAttribute("data-section") === sectionName) {
              section.style.display = "block";
            } else {
              section.style.display = "none";
            }
          });

          // Update breadcrumb
          const breadcrumbItems = document.querySelectorAll(
            ".dracoify-navbar-breadcrumb-item"
          );
          breadcrumbItems[breadcrumbItems.length - 1].textContent = sectionName;
        }

        // Sidebar Navigation
        sidebarPages.forEach((page) => {
          page.addEventListener("click", function () {
            const pageTitle = this.getAttribute("data-page");
            if (
              !featuresUnlocked &&
              (pageTitle === "Flashcards" || pageTitle === "AI Quiz")
            ) {
              showCustomModal(
                "Feature Locked",
                "Please complete the steps in Getting Started to unlock this feature."
              );
              return;
            }
            showSection(pageTitle);
          });
        });

        // Flashcards Functionality
        const flashcardContainer = document.querySelector(
          ".flashcard-gallery .flashcard-container"
        );
        const leftNav = document.querySelector(".flashcard-gallery .left-nav");
        const rightNav = document.querySelector(
          ".flashcard-gallery .right-nav"
        );
        const flashcardList = [
          { term: "What is the capital of France?", definition: "Paris" },
          {
            term: "Which planet is known as the Red Planet?",
            definition: "Mars",
          },
          {
            term: "What is the largest ocean on Earth?",
            definition: "Pacific Ocean",
          },
          {
            term: "Who wrote 'Romeo and Juliet'?",
            definition: "William Shakespeare",
          },
          { term: "What is the chemical symbol for Gold?", definition: "Au" },
        ];
        let currentCardIndex = 0;
        let isTransitioning = false;

        function createFlashcard(index) {
          const flashcardElement = document.createElement("div");
          flashcardElement.classList.add("flashcard");
          flashcardElement.innerHTML = `
            <div class="flashcard-inner">
              <div class="flashcard-front">
                <h3>${flashcardList[index].term}</h3>
              </div>
              <div class="flashcard-back">
                <p>${flashcardList[index].definition}</p>
              </div>
            </div>
          `;

          flashcardElement.addEventListener("click", () => {
            flashcardElement.classList.toggle("flipped");
          });

          return flashcardElement;
        }

        function updateFlashcard(direction) {
          if (isTransitioning) return;
          isTransitioning = true;

          const currentFlashcard =
            flashcardContainer.querySelector(".flashcard");
          const newCardIndex =
            (currentCardIndex + direction + flashcardList.length) %
            flashcardList.length;
          const newFlashcard = createFlashcard(newCardIndex);

          flashcardContainer.appendChild(newFlashcard);

          requestAnimationFrame(() => {
            newFlashcard.style.transform = `translateX(${
              direction > 0 ? "100%" : "-100%"
            })`;
            newFlashcard.style.opacity = 1;

            requestAnimationFrame(() => {
              newFlashcard.style.transform = "translateX(0)";
              currentFlashcard.style.transform = `translateX(${
                direction > 0 ? "-100%" : "100%"
              })`;
              currentFlashcard.style.opacity = 0;

              setTimeout(() => {
                flashcardContainer.removeChild(currentFlashcard);
                currentCardIndex = newCardIndex;
                isTransitioning = false;
              }, 600);
            });
          });
        }

        leftNav.addEventListener("click", () => {
          updateFlashcard(-1);
        });

        rightNav.addEventListener("click", () => {
          updateFlashcard(1);
        });

        // Initialize Flashcard
        function initializeFlashcards() {
          flashcardContainer.innerHTML = "";
          const initialFlashcard = createFlashcard(currentCardIndex);
          flashcardContainer.appendChild(initialFlashcard);
          initialFlashcard.style.opacity = 1;
          initialFlashcard.style.transform = "translateX(0)";
        }

        initializeFlashcards();

        // Toggle Flashcard List Visibility with Flip Animation
        const flashcardListDiv = document.querySelector(".flashcard-list");
        const toggleListButton = document.getElementById("toggle-list-button");

        toggleListButton.addEventListener("click", () => {
          flashcardListDiv.style.display =
            flashcardListDiv.style.display === "none" ? "block" : "none";

          // Add flip animation to button
          toggleListButton.classList.add("flip-animation");
          toggleListButton.addEventListener(
            "animationend",
            () => {
              toggleListButton.classList.remove("flip-animation");
            },
            { once: true }
          );
        });

        // Navbar Actions
        const navbarActions = document.querySelectorAll(
          ".dracoify-navbar-action"
        );
        navbarActions.forEach((action) => {
          action.addEventListener("click", function () {
            showCustomModal(
              "Action Clicked",
              "You clicked on a navbar action."
            );
          });
        });

        // Sidebar Collapse
        const sidebarHeader = document.getElementById("sidebar-header");
        const sidebar = document.getElementById("sidebar");
        const sidebarToggleIcon = document.getElementById(
          "sidebar-toggle-icon"
        );

        sidebarHeader.addEventListener("click", function () {
          sidebar.classList.toggle("collapsed");
          mainContent.classList.toggle("sidebar-collapsed");
          if (sidebar.classList.contains("collapsed")) {
            sidebarToggleIcon.classList.remove("fi-rr-angle-left");
            sidebarToggleIcon.classList.add("fi-rr-angle-right");
          } else {
            sidebarToggleIcon.classList.add("fi-rr-angle-left");
            sidebarToggleIcon.classList.remove("fi-rr-angle-right");
          }
        });

        // AI Quiz Functionality
        const aiQuizForm = document.getElementById("ai-quiz-form");
        const quizOptions = document.querySelectorAll(".dracoify-quiz-option");
        let quizCompleted = false;

        quizOptions.forEach((option) => {
          option.addEventListener("click", function () {
            if (quizCompleted) return;
            const questionOptions = this.closest(
              ".dracoify-quiz-options"
            ).querySelectorAll(".dracoify-quiz-option");
            questionOptions.forEach((opt) => opt.classList.remove("selected"));
            this.classList.add("selected");
          });
        });

        aiQuizForm.addEventListener("submit", function (event) {
          event.preventDefault();

          if (quizCompleted) return;

          const quizQuestions = document.querySelectorAll(
            ".dracoify-quiz-question"
          );
          let totalQuestions = quizQuestions.length;
          let correctAnswersCount = 0;

          quizQuestions.forEach((question, index) => {
            const correctAnswer = question.getAttribute("data-correct-answer");
            const selectedOption = question.querySelector(
              ".dracoify-quiz-option.selected"
            );
            const questionText = question.querySelector(
              ".dracoify-block.dracoify-text"
            );

            // Remove existing feedback icons
            const existingIcon = question.querySelector(".feedback-icon");
            if (existingIcon) {
              existingIcon.parentNode.removeChild(existingIcon);
            }

            // Create feedback icon
            const feedbackIcon = document.createElement("i");
            feedbackIcon.classList.add("feedback-icon", "fi");

            if (selectedOption) {
              const selectedValue = selectedOption.getAttribute("data-value");
              if (selectedValue === correctAnswer) {
                // Correct
                correctAnswersCount++;
                feedbackIcon.classList.add("fi-rr-check", "correct");
                selectedOption.classList.add("correct");
              } else {
                // Wrong
                feedbackIcon.classList.add("fi-rr-cross-small", "incorrect");
                selectedOption.classList.add("incorrect", "tooltip");
                const tooltipText = document.createElement("span");
                tooltipText.classList.add("tooltiptext");
                tooltipText.textContent = "You got this answer incorrect 😢";
                selectedOption.appendChild(tooltipText);

                // Highlight correct answer
                const correctOption = question.querySelector(
                  `.dracoify-quiz-option[data-value="${correctAnswer}"]`
                );
                if (correctOption) {
                  correctOption.classList.add("correct");
                }

                // Show correct answer text
                const correctAnswerText = correctOption
                  ? correctOption.textContent.trim()
                  : "";
                const correctAnswerDiv = document.createElement("div");
                correctAnswerDiv.classList.add("correct-answer");
                correctAnswerDiv.textContent = `Correct answer: ${correctAnswerText}`;
                question.appendChild(correctAnswerDiv);
              }
            } else {
              // Skipped
              feedbackIcon.classList.add("fi-rr-cross-small", "incorrect");

              // Indicate skipped and show correct answer
              const correctOption = question.querySelector(
                `.dracoify-quiz-option[data-value="${correctAnswer}"]`
              );
              if (correctOption) {
                correctOption.classList.add("correct");
                const correctAnswerText = correctOption.textContent.trim();
                const correctAnswerDiv = document.createElement("div");
                correctAnswerDiv.classList.add("correct-answer");
                correctAnswerDiv.textContent =
                  "You skipped this one but the correct answer was: " +
                  correctAnswerText;
                question.appendChild(correctAnswerDiv);
              }
            }

            // Append feedback icon next to question text
            questionText.insertAdjacentElement("afterbegin", feedbackIcon);
          });

          // Calculate score percentage
          let scorePercentage = Math.round(
            (correctAnswersCount / totalQuestions) * 100
          );

          // Update banner with score
          const dracoifyBannerText = document.querySelector(
            "#ai-quiz-section .dracoify-banner"
          );
          dracoifyBannerText.innerHTML = `<h1 class="dracoify-banner-title">AI Quiz</h1><div class="dracoify-banner-text"><i class="fi fi-rr-award"></i> You scored ${correctAnswersCount}/${totalQuestions} (${scorePercentage}%)</div>`;

          // Disable submit button after grading
          const submitButton = aiQuizForm.querySelector(
            'button[type="submit"]'
          );
          submitButton.disabled = true;
          submitButton.textContent = "Quiz Completed";

          // Show "Wrong Answers" button
          document.getElementById("review-wrong-button").style.display =
            "block";

          // Set quiz as completed
          quizCompleted = true;

          // Scroll to the top of the quiz section
          document
            .getElementById("ai-quiz-section")
            .scrollIntoView({ behavior: "smooth" });
        });

        document
          .getElementById("review-wrong-button")
          .addEventListener("click", function () {
            const quizQuestions = document.querySelectorAll(
              ".dracoify-quiz-question"
            );
            isReviewingWrongAnswers = !isReviewingWrongAnswers;

            if (isReviewingWrongAnswers) {
              // Change button text to "Show All Questions"
              this.innerHTML =
                '<i class="fi fi-rr-eye"></i> Show All Questions';

              quizQuestions.forEach((question) => {
                const isIncorrect = question.querySelector(
                  ".feedback-icon.incorrect"
                );
                if (!isIncorrect) {
                  // Hide correct questions
                  question.style.display = "none";
                } else {
                  // Show incorrect questions
                  question.style.display = "block";
                }
              });
            } else {
              // Change button text back to "Wrong Answers"
              this.innerHTML =
                '<i class="fi fi-rr-exclamation"></i> Wrong Answers';

              // Show all questions
              quizQuestions.forEach((question) => {
                question.style.display = "block";
              });
            }
          });

        // Display selected file names
        const fileUploadInput = document.getElementById("file-upload");
        const fileList = document.getElementById("file-list");

        fileUploadInput.addEventListener("change", function () {
          while (fileList.firstChild) {
            fileList.removeChild(fileList.firstChild);
          }

          for (let i = 0; i < this.files.length; i++) {
            const fileItem = document.createElement("div");
            fileItem.classList.add("file-list-item");
            fileItem.innerHTML =
              '<i class="fi fi-rr-file"></i><span>' +
              this.files[i].name +
              "</span>";
            fileList.appendChild(fileItem);
          }
        });

        // Custom Modal Functionality
        const customModal = document.getElementById("custom-modal");
        const modalTitle = document.getElementById("modal-title");
        const modalMessage = document.getElementById("modal-message");
        const modalOkButton = document.getElementById("modal-ok-button");

        modalOkButton.addEventListener("click", function () {
          customModal.style.display = "none";
          contentWrapper.classList.remove("blurred");
          document.body.style.overflow = "";
        });

        function showCustomModal(title, message) {
          modalTitle.textContent = title;
          modalMessage.textContent = message;
          customModal.style.display = "flex";
          contentWrapper.classList.add("blurred");
          document.body.style.overflow = "hidden";
        }

        // Flashcards Fullscreen Functionality
        const flashcardsFullscreenModal = document.getElementById(
          "flashcards-fullscreen-modal"
        );
        const closeFullscreenButton = document.getElementById(
          "close-fullscreen-button"
        );
        const fullscreenLeftNav = document.getElementById(
          "fullscreen-left-nav"
        );
        const fullscreenRightNav = document.getElementById(
          "fullscreen-right-nav"
        );
        const flashcardFullscreenContainer = document.querySelector(
          ".flashcard-fullscreen-container"
        );

        let isFullscreenTransitioning = false;

        function createFullscreenFlashcard(index) {
          const flashcardElement = document.createElement("div");
          flashcardElement.classList.add("flashcard");
          flashcardElement.innerHTML = `
            <div class="flashcard-inner">
              <div class="flashcard-front">
                <h3>${flashcardList[index].term}</h3>
              </div>
              <div class="flashcard-back">
                <p>${flashcardList[index].definition}</p>
              </div>
            </div>
          `;

          flashcardElement.addEventListener("click", () => {
            flashcardElement.classList.toggle("flipped");
          });

          return flashcardElement;
        }

        function openFlashcardsFullscreen() {
          flashcardsFullscreenModal.style.display = "flex";
          contentWrapper.classList.add("blurred");
          document.body.style.overflow = "hidden";
          initializeFullscreenFlashcards();
        }

        function closeFlashcardsFullscreen() {
          flashcardsFullscreenModal.style.display = "none";
          contentWrapper.classList.remove("blurred");
          document.body.style.overflow = "";
        }

        closeFullscreenButton.addEventListener(
          "click",
          closeFlashcardsFullscreen
        );

        function initializeFullscreenFlashcards() {
          flashcardFullscreenContainer.innerHTML = "";
          const fullscreenFlashcard = createFullscreenFlashcard(currentCardIndex);
          flashcardFullscreenContainer.appendChild(fullscreenFlashcard);
          fullscreenFlashcard.style.opacity = 1;
          fullscreenFlashcard.style.transform = "translateX(0)";
        }

        function updateFullscreenFlashcard(direction) {
          if (isFullscreenTransitioning) return;
          isFullscreenTransitioning = true;

          const currentFlashcard =
            flashcardFullscreenContainer.querySelector(".flashcard");
          const newCardIndex =
            (currentCardIndex + direction + flashcardList.length) %
            flashcardList.length;
          const newFlashcard = createFullscreenFlashcard(newCardIndex);

          flashcardFullscreenContainer.appendChild(newFlashcard);

          requestAnimationFrame(() => {
            newFlashcard.style.transform = `translateX(${
              direction > 0 ? "100%" : "-100%"
            })`;
            newFlashcard.style.opacity = 1;

            requestAnimationFrame(() => {
              newFlashcard.style.transform = "translateX(0)";
              currentFlashcard.style.transform = `translateX(${
                direction > 0 ? "-100%" : "100%"
              })`;
              currentFlashcard.style.opacity = 0;

              setTimeout(() => {
                flashcardFullscreenContainer.removeChild(currentFlashcard);
                currentCardIndex = newCardIndex;
                isFullscreenTransitioning = false;
              }, 600);
            });
          });
        }

        fullscreenLeftNav.addEventListener("click", () => {
          updateFullscreenFlashcard(-1);
        });

        fullscreenRightNav.addEventListener("click", () => {
          updateFullscreenFlashcard(1);
        });

        // Ensure flashcards are properly initialized on window resize
        window.addEventListener("resize", () => {
          initializeFlashcards();
        });

        // Open Flashcards Fullscreen on Double-click
        const flashcardGallery = document.querySelector(".flashcard-gallery");
        flashcardGallery.addEventListener("dblclick", openFlashcardsFullscreen);

        // Fullscreen Button Functionality
        const fullscreenButton = document.getElementById("fullscreen-button");
        fullscreenButton.addEventListener("click", openFlashcardsFullscreen);
      });
    </script>
  </body>
</html>