A few issues we have first thign first the toast noticaiton goes away so quick make it last for 3 seconds, next make the create flashcard tab more user friendly for the user, also a big issue we have is that when I pres creat flashccard set I want it so that flashcard set is under the falshcard in the side bar right now its not fix it so it displays when the user clicks create flashcard set, also make it a nest under flashcard, now write the full complete code, dont skip anything: <!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;

        .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%
          );
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-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;

        .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%
          );
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-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;

        .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%
          );
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-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;

        /* Gradient for Cotton Candy Theme */
        .dracoify-banner {
          background: hsla(330, 100%, 95%, 1);
          background: linear-gradient(
            to top,
            hsla(330, 100%, 95%, 1) 0%,
            hsla(320, 100%, 90%, 1) 20%,
            hsla(310, 100%, 85%, 1) 40%,
            hsla(300, 100%, 80%, 1) 60%,
            hsla(290, 100%, 85%, 1) 80%,
            hsla(280, 100%, 90%, 1) 100%
          );
          background: -moz-linear-gradient(
            to top,
            hsla(330, 100%, 95%, 1) 0%,
            hsla(320, 100%, 90%, 1) 20%,
            hsla(310, 100%, 85%, 1) 40%,
            hsla(300, 100%, 80%, 1) 60%,
            hsla(290, 100%, 85%, 1) 80%,
            hsla(280, 100%, 90%, 1) 100%
          );
          background: -webkit-linear-gradient(
            to top,
            hsla(330, 100%, 95%, 1) 0%,
            hsla(320, 100%, 90%, 1) 20%,
            hsla(310, 100%, 85%, 1) 40%,
            hsla(300, 100%, 80%, 1) 60%,
            hsla(290, 100%, 85%, 1) 80%,
            hsla(280, 100%, 90%, 1) 100%
          );
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFE5F2", endColorstr="#F2E5FF", GradientType=0);
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-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%
          );
        }

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

      /* Strawberry Theme */
      body.strawberry-theme {
        --dracoify-bg: #fff0f5;
        --dracoify-text: #ff6b8a;
        --dracoify-light-gray: #f0e6ff;
        --dracoify-gray: #e6d0ff;
        --dracoify-navbar-bg: rgb(230, 245, 210, 0.5);
        --dracoify-accent: #ff8fa3;
        --dracoify-banner-emoji: "🍓";
        --dracoify-selected-color: #d8a2ff;
        --dracoify-banner-text-color: #ffffff;
      }

      /* 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;

        .dracoify-banner {
          background: hsla(128, 100%, 70%, 1);
          background: 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: -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%
          );
        }

        .dracoify-h1 {
          color: var(--dracoify-banner-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-h1 {
        font-size: 40px;
        font-weight: 700;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
      }

      /* 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(8px);
        -webkit-backdrop-filter: blur(8px);
        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);
      }

      .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;
        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;
      }

      .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,
      .dracoify-sidebar-subpage {
        display: flex;
        align-items: center;
        padding: 4px 0 4px 10px;
        cursor: pointer;
        border-radius: 3px;
        margin-bottom: 1px;
        position: relative;
      }

      .dracoify-sidebar-subpage {
        padding-left: 30px;
      }

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

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

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

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

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

      .dracoify-sidebar.collapsed .dracoify-sidebar-page-lock,
      .dracoify-sidebar.collapsed .dracoify-sidebar-subpage-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;
      }

      .dracoify-h1 {
        font-size: 40px;
        font-weight: 700;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
      }

      .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;
        text-align: left;
      }

      .dracoify-form-label {
        display: block;
        margin-bottom: 0.5em;
        font-size: 16px;
        color: var(--dracoify-text);
      }

      .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);
      }

      /* Remove border on focus for all inputs */
      .dracoify-input:focus,
      .dracoify-banner-input:focus {
        outline: none;
        border: none;
      }

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

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

      .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;
      }

      .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-container {
        list-style-type: none;
        padding: 0;
        margin-top: 20px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
      }

      .flashcard-list-item {
        background-color: var(--dracoify-light-gray);
        border: 1px solid var(--dracoify-gray);
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: grab;
      }

      .flashcard-list-item.dragging {
        opacity: 0.5;
      }

      .flashcard-list-item .flashcard-details {
        text-align: left;
      }

      .flashcard-list-item .flashcard-details h4 {
        margin: 0 0 5px 0;
        color: var(--dracoify-purple);
        font-size: 16px;
      }

      .flashcard-list-item .flashcard-details p {
        margin: 0;
        color: var(--dracoify-text);
        font-size: 14px;
      }

      .flashcard-list-item i {
        cursor: grab;
        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;
      }

      /* 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;
      }

      .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;
      }

      /* Additional Styles for Fullscreen Button */
      #fullscreen-button {
        margin-left: 10px;
      }

      /* Toast Container Styles */
      .toast-container {
        position: fixed;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        z-index: 300;
      }

      .toast {
        visibility: hidden;
        min-width: 50px;
        max-width: 80vw;
        margin: 0 auto;
        background-color: var(--dracoify-light-gray);
        color: var(--dracoify-text);
        border-radius: 8px;
        font-size: 17px;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        padding: 10px 20px;
        box-sizing: border-box;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
      }

      .toast.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
      }

      .toast.hide {
        opacity: 0;
        transform: translateY(20px);
      }

      .toast-icon {
        margin-right: 12px;
        font-size: 24px;
      }

      .toast.success .toast-icon {
        color: var(--dracoify-green);
      }

      .toast.error .toast-icon {
        color: var(--dracoify-red);
      }

      .toast.info .toast-icon {
        color: var(--dracoify-blue);
      }

      .toast-content {
        opacity: 1;
      }

      /* Modal Styles */
      .modal {
        display: none;
        position: fixed;
        z-index: 500;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
      }

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

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

      .modal-content h2 {
        margin-top: 0;
        margin-bottom: 10px;
      }

      .modal-content p {
        margin-top: 0;
        margin-bottom: 20px;
      }

      /* Close button for modal */
      .modal-close {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--dracoify-text);
        cursor: pointer;
      }

      /* New Styles for Create Section Banner */
      .dracoify-banner.create-banner {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
      }

      .image-upload-container {
        width: 150px;
        height: 150px;
        margin-right: 20px;
        position: relative;
      }

      .image-upload-box {
        width: 100%;
        height: 100%;
        background-color: var(--dracoify-light-gray);
        border: 2px dashed var(--dracoify-gray);
        border-radius: 8px;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-position: center;
      }

      .image-upload-icon {
        font-size: 32px;
        color: var(--dracoify-gray);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        position: absolute;
      }

      .image-upload-box:hover .image-upload-icon {
        opacity: 1;
      }

      .dracoify-banner-input {
        background-color: transparent;
        border: none;
        font-size: 32px;
        font-weight: bold;
        color: var(--dracoify-text);
        text-align: center;
        padding: 5px;
        width: 100%;
        max-width: 600px;
      }

      @media screen and (max-width: 768px) {
        .dracoify-section-content {
          padding: 0 20px;
        }
        .dracoify-banner.create-banner {
          flex-direction: column;
        }
        .image-upload-container {
          margin-left: 0;
          margin-bottom: 20px;
        }
        .dracoify-banner-input {
          max-width: 100%;
        }
      }
    </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>
          <!-- Added lock icon to Create section -->
          <li class="dracoify-sidebar-page" data-page="Create">
            <div class="dracoify-sidebar-page-icon">
              <i class="fi fi-rr-pencil"></i>
            </div>
            <span class="dracoify-sidebar-page-title">Create</span>
            <i
              class="fi fi-rr-lock dracoify-sidebar-page-lock"
              id="create-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>
              <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>

            <ul class="flashcard-list" style="display: none"></ul>
          </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>

        <!-- Create Section -->
        <div
          id="create-section"
          class="dracoify-section"
          data-section="Create"
          style="display: none"
        >
          <div class="dracoify-banner create-banner">
            <div class="image-upload-container">
              <div class="image-upload-box" id="flashcard-set-image-box">
                <i class="fi fi-rr-pencil image-upload-icon"></i>
                <input
                  type="file"
                  id="flashcard-set-image"
                  accept="image/*"
                  style="display: none;"
                />
              </div>
            </div>
            <input
              type="text"
              id="flashcard-set-name"
              class="dracoify-banner-input"
              placeholder="Enter the flashcard set name"
              required
            />
          </div>
          <div class="dracoify-section-content">
            <div class="dracoify-block dracoify-text">
              Welcome to the Create section! Here you can create your own flashcard
              sets.
            </div>

            <!-- Add Flashcards Form -->
            <div class="dracoify-block">
              <h2 class="dracoify-h2">Add Flashcards</h2>
              <form id="create-flashcard-form" class="dracoify-form-group">
                <label for="flashcard-term" class="dracoify-form-label">
                  Term:
                </label>
                <input
                  type="text"
                  id="flashcard-term"
                  class="dracoify-input"
                  placeholder="Enter the term"
                  required
                />
                <label for="flashcard-definition" class="dracoify-form-label">
                  Definition:
                </label>
                <input
                  type="text"
                  id="flashcard-definition"
                  class="dracoify-input"
                  placeholder="Enter the definition"
                  required
                />
                <button
                  type="button"
                  class="dracoify-button"
                  id="add-flashcard-button"
                >
                  <i class="fi fi-rr-plus"></i> Add Flashcard
                </button>
              </form>

              <ul
                id="flashcard-list-container"
                class="flashcard-list-container"
              ></ul>
            </div>

            <!-- Create Flashcard Set Button -->
            <div class="dracoify-block">
              <button
                type="button"
                class="dracoify-button"
                id="create-flashcard-set-button"
              >
                <i class="fi fi-rr-check"></i> Create Flashcard Set
              </button>
            </div>
          </div>
        </div>
      </main>

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

    <!-- Toast Container -->
    <div id="toast-container" class="toast-container"></div>

    <!-- Unlock Modal Popup -->
    <div id="unlock-modal" class="modal">
      <div class="modal-content">
        <button class="modal-close" id="close-modal-button">&times;</button>
        <i class="fi fi-rr-smile"></i>
        <h2>Congrats!</h2>
        <p>
          You got access to use all the features now with the powerful AI tool.
        </p>
        <button id="modal-ok-button" class="dracoify-button">
          <i class="fi fi-rr-thumbs-up"></i> Awesome!
        </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>
        <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>

    <!-- Include SortableJS -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

    <!-- 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");

        // Flashcard Sets Management
        let flashcardSets = {};
        let currentFlashcardSet = null;

        // 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) {
          const themeClasses = [
            "dark-theme",
            "light-theme",
            "coconut-theme",
            "cotton-candy-theme",
            "mars-theme",
            "strawberry-theme",
            "tropical-sorbet-theme",
          ];
          document.body.classList.remove(...themeClasses);
          document.body.classList.add(themeName + "-theme");
          localStorage.setItem("theme", themeName);
          currentTheme = themeName;
          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 === "") {
            showToast("Missing API Key", "Please enter your API Key.", "error");
            return;
          }

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

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

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

          // 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");
          const createLockIcon = document.getElementById("create-lock-icon");
          if (flashcardsLockIcon) {
            flashcardsLockIcon.style.display = "none";
          }
          if (aiQuizLockIcon) {
            aiQuizLockIcon.style.display = "none";
          }
          if (createLockIcon) {
            createLockIcon.style.display = "none";
          }

          // Enable Create section in sidebar
          const createPage = document.querySelector(
            '.dracoify-sidebar-page[data-page="Create"]'
          );
          if (createPage) {
            const lockIcon = createPage.querySelector(".dracoify-sidebar-page-lock");
            if (lockIcon) {
              lockIcon.style.display = "none";
            }
          }
        });

        // Close Modal Functionality
        const unlockModal = document.getElementById("unlock-modal");
        const closeModalButton = document.getElementById("close-modal-button");
        const modalOkButton = document.getElementById("modal-ok-button");

        function closeUnlockModal() {
          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"));
          }
        }

        closeModalButton.addEventListener("click", closeUnlockModal);
        modalOkButton.addEventListener("click", closeUnlockModal);

        // Close the modal when clicking outside of it
        window.onclick = function (event) {
          if (event.target === unlockModal) {
            closeUnlockModal();
          }

          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" ||
                pageTitle === "Create")
            ) {
              showToast(
                "Feature Locked",
                "Please complete the steps in Getting Started to unlock this feature.",
                "error"
              );
              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");
        let flashcardList = []; // Current set's flashcards
        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 || flashcardList.length === 0) 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 = "";
          if (flashcardList.length > 0) {
            const initialFlashcard = createFlashcard(currentCardIndex);
            flashcardContainer.appendChild(initialFlashcard);
            initialFlashcard.style.opacity = 1;
            initialFlashcard.style.transform = "translateX(0)";
          } else {
            const emptyMessage = document.createElement("div");
            emptyMessage.textContent = "No flashcards available. Please add some!";
            emptyMessage.style.color = "var(--dracoify-gray)";
            emptyMessage.style.fontSize = "18px";
            flashcardContainer.appendChild(emptyMessage);
          }
        }

        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 () {
            showToast(
              "Action Clicked",
              "You clicked on a navbar action.",
              "info"
            );
          });
        });

        // 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");

                // 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);
          }
        });

        // Toast Notification Functionality
        function showToast(title, message, type = "info") {
          const toastContainer = document.getElementById("toast-container");
          const toast = document.createElement("div");
          toast.classList.add("toast", type);
          toast.innerHTML = `<i class="toast-icon fi ${getIconClass(
            type
          )}"></i><div class="toast-content"><strong>${title}</strong><br>${message}</div>`;
          toastContainer.appendChild(toast);

          // Show the toast
          setTimeout(() => {
            toast.classList.add("show");
          }, 100);

          // Hide the toast after duration
          setTimeout(() => {
            toast.classList.add("hide");
          }, 8000); // Increased duration to make toast stay longer

          // Remove the toast after the animation
          toast.addEventListener(
            "transitionend",
            () => {
              toast.remove();
            },
            { once: true }
          );
        }

        function getIconClass(type) {
          switch (type) {
            case "success":
              return "fi-rr-checkbox";
            case "error":
              return "fi-rr-cross-circle";
            case "info":
            default:
              return "fi-rr-info";
          }
        }

        // 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() {
          if (!currentFlashcardSet || flashcardSets[currentFlashcardSet].length === 0) {
            showToast(
              "No Flashcards",
              "Please add flashcards to view in fullscreen.",
              "info"
            );
            return;
          }
          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 = "";
          if (flashcardSets[currentFlashcardSet].length > 0) {
            const fullscreenFlashcard = createFullscreenFlashcard(currentCardIndex);
            flashcardFullscreenContainer.appendChild(fullscreenFlashcard);
            fullscreenFlashcard.style.opacity = 1;
            fullscreenFlashcard.style.transform = "translateX(0)";
          } else {
            const emptyMessage = document.createElement("div");
            emptyMessage.textContent =
              "No flashcards available. Please add some!";
            emptyMessage.style.color = "var(--dracoify-gray)";
            emptyMessage.style.fontSize = "18px";
            flashcardFullscreenContainer.appendChild(emptyMessage);
          }
        }

        function updateFullscreenFlashcard(direction) {
          if (
            isFullscreenTransitioning ||
            !currentFlashcardSet ||
            flashcardSets[currentFlashcardSet].length === 0
          )
            return;
          isFullscreenTransitioning = true;

          const currentFlashcard =
            flashcardFullscreenContainer.querySelector(".flashcard");
          const newCardIndex =
            (currentCardIndex + direction + flashcardSets[currentFlashcardSet].length) %
            flashcardSets[currentFlashcardSet].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);

        // Create Flashcard Functionality
        const createFlashcardButton = document.getElementById(
          "add-flashcard-button"
        );
        const flashcardListContainer = document.getElementById(
          "flashcard-list-container"
        );

        createFlashcardButton.addEventListener("click", () => {
          const termInput = document.getElementById("flashcard-term").value.trim();
          const definitionInput = document
            .getElementById("flashcard-definition")
            .value.trim();

          if (termInput === "" || definitionInput === "") {
            showToast(
              "Incomplete Information",
              "Please provide both term and definition.",
              "error"
            );
            return;
          }

          // Add new flashcard to the current set
          if (!currentFlashcardSet) {
            showToast(
              "No Flashcard Set Selected",
              "Please create a flashcard set first.",
              "error"
            );
            return;
          }

          flashcardSets[currentFlashcardSet].push({ term: termInput, definition: definitionInput });
          addFlashcardToList(currentFlashcardSet, flashcardSets[currentFlashcardSet].length - 1);
          showToast(
            "Flashcard Created",
            `Flashcard for "${termInput}" has been created successfully!`,
            "success"
          );

          // Clear input fields
          document.getElementById("flashcard-term").value = "";
          document.getElementById("flashcard-definition").value = "";

          // Refresh Flashcard Gallery if visible
          const currentSectionName = document.querySelector(
            '.dracoify-section:not([style*="display: none"])'
          ).getAttribute("data-section");
          if (currentSectionName === "Flashcards") {
            currentCardIndex = flashcardSets[currentFlashcardSet].length - 1;
            initializeFlashcards();
          }
        });

        function addFlashcardToList(setName, index) {
          const flashcardItem = document.createElement("li");
          flashcardItem.classList.add("flashcard-list-item");
          flashcardItem.setAttribute("data-index", index);
          flashcardItem.innerHTML = `
                        <div class="flashcard-details">
                          <h4>${flashcardSets[setName][index].term}</h4>
                          <p>${flashcardSets[setName][index].definition}</p>
                        </div>
                        <i class="fi fi-rr-grip-dots"></i>
                      `;
          flashcardListContainer.appendChild(flashcardItem);
        }

        // Initialize existing flashcards in the list
        // Not necessary initially as there are no sets

        // Initialize SortableJS for flashcard-list-container
        Sortable.create(flashcardListContainer, {
          handle: ".fi-rr-grip-dots",
          animation: 150,
          onEnd: function (evt) {
            const oldIndex = evt.oldIndex;
            const newIndex = evt.newIndex;
            flashcardSets[currentFlashcardSet].splice(newIndex, 0, flashcardSets[currentFlashcardSet].splice(oldIndex, 1)[0]);
            initializeFlashcards();
          },
        });

        // Handle Image Upload in Banner
        const flashcardSetImageBox = document.getElementById(
          "flashcard-set-image-box"
        );
        const flashcardSetImageInput = document.getElementById(
          "flashcard-set-image"
        );

        flashcardSetImageBox.addEventListener("click", () => {
          flashcardSetImageInput.click();
        });

        flashcardSetImageInput.addEventListener("change", function () {
          if (this.files && this.files[0]) {
            const reader = new FileReader();
            reader.onload = function (e) {
              flashcardSetImageBox.style.backgroundImage = `url(${e.target.result})`;
              flashcardSetImageBox.style.backgroundSize = "cover";
              flashcardSetImageBox.style.backgroundPosition = "center";
              flashcardSetImageBox.style.border = "none";
              // Hide the pencil icon
              const imageUploadIcon =
                flashcardSetImageBox.querySelector(".image-upload-icon");
              if (imageUploadIcon) {
                imageUploadIcon.style.display = "none";
              }
            };
            reader.readAsDataURL(this.files[0]);
          }
        });

        // Create Flashcard Set Functionality
        const createFlashcardSetButton = document.getElementById(
          "create-flashcard-set-button"
        );

        createFlashcardSetButton.addEventListener("click", () => {
          const flashcardSetName = document
            .getElementById("flashcard-set-name")
            .value.trim();
          if (flashcardSetName === "") {
            showToast(
              "Missing Flashcard Set Name",
              "Please enter a name for the flashcard set.",
              "error"
            );
            return;
          }

          if (flashcardSets[flashcardSetName]) {
            showToast(
              "Duplicate Set Name",
              "A flashcard set with this name already exists.",
              "error"
            );
            return;
          }

          // Get the image file if any
          // const flashcardSetImageFile = flashcardSetImageInput.files[0];

          // Initialize the set
          flashcardSets[flashcardSetName] = [];
          currentFlashcardSet = flashcardSetName;

          // Add the set to the sidebar
          addFlashcardSetToSidebar(flashcardSetName);

          showToast(
            "Flashcard Set Created",
            `Your flashcard set "${flashcardSetName}" has been created successfully!`,
            "success"
          );

          // Clear the forms and flashcard list
          document.getElementById("flashcard-set-name").value = "";
          flashcardSetImageInput.value = "";
          flashcardSetImageBox.style.backgroundImage = "";
          flashcardSetImageBox.style.border = "2px dashed var(--dracoify-gray)";
          const imageUploadIcon =
            flashcardSetImageBox.querySelector(".image-upload-icon");
          if (imageUploadIcon) {
            imageUploadIcon.style.display = "block";
          }
          document.getElementById("flashcard-term").value = "";
          document.getElementById("flashcard-definition").value = "";
          flashcardList = [];
          flashcardListContainer.innerHTML = "";
          initializeFlashcards();

          // Automatically navigate to the new set
          showSection("Flashcards");
          loadFlashcardSet(flashcardSetName);
        });

        function addFlashcardSetToSidebar(setName) {
          const sidebarPagesList = document.querySelector(".dracoify-sidebar-pages");
          const flashcardsPage = document.querySelector(
            '.dracoify-sidebar-page[data-page="Flashcards"]'
          );

          const subpage = document.createElement("li");
          subpage.classList.add("dracoify-sidebar-subpage");
          subpage.setAttribute("data-set", setName);
          subpage.innerHTML = `
            <div class="dracoify-sidebar-subpage-icon">
              <i class="fi fi-rr-folder"></i>
            </div>
            <span class="dracoify-sidebar-subpage-title">${setName}</span>
          `;

          subpage.addEventListener("click", function (e) {
            e.stopPropagation();
            loadFlashcardSet(setName);
            showSection("Flashcards");
          });

          sidebarPagesList.insertBefore(subpage, aiQuizLockIcon ? aiQuizLockIcon.parentElement.nextSibling : null);
        }

        function loadFlashcardSet(setName) {
          currentFlashcardSet = setName;
          flashcardList = flashcardSets[setName];
          currentCardIndex = 0;
          initializeFlashcards();
        }

        // Initialize Flashcard Sets from Existing Data (if any)
        // For demonstration, starts empty

        // Footer Handling
        const footer = document.querySelector("footer");
        footer.style.display = "block";
      });
    </script>
  </body>
</html>