write the full cmplet code don't skip anything, or comment syaing add this here no write the full code, fix the css and html for the custom modulo make it better user friendly write now its a mess and the user cant scrool and the screeen si very big just fix it up and maek the css better: <!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;

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

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

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

      /* 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%
          );
          filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr="#DC5F42",
            endColorstr="#E07844",
            GradientType=1
          );
        }

        .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: linear-gradient(
            to top,
            #fff0f5 0%,
            #ffe4e1 20%,
            #ffb6c1 40%,
            #ffaabb 60%,
            #ff99aa 80%,
            #ff8899 100%
          );
          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);
        }
      }

      /* 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;
        --dracoify-text: #ff6b8a;
        --dracoify-light-gray: #f0e6ff;
        --dracoify-gray: #e6d0ff;
        --dracoify-navbar-bg: rgba(255, 182, 193, 0.2);
        --dracoify-accent: #ff8fa3;
        --dracoify-banner-emoji: "🍓";
        --dracoify-selected-color: #d8a2ff;
        --dracoify-banner-text-color: #ffffff;

        /* Gradient for Strawberry Theme */
        .dracoify-banner {
          background: linear-gradient(
            to top,
            #fff0f5 0%,
            #ffe4e1 20%,
            #ffb6c1 40%,
            #ffaabb 60%,
            #ff99aa 80%,
            #ff8899 100%
          );
          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);
        }
      }

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

        /* Gradient for Tropical Sorbet Theme */
        .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%
          );
          filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr="#64ff78",
            endColorstr="#b0f63f",
            GradientType=0
          );
        }

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

      /* Custom Theme */
      body.custom-theme {
        /* Custom theme variables will be injected via JavaScript */
      }

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

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

      /* 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: 200px;
        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-navbar-actions .divider {
        height: 1px;
        background-color: var(--dracoify-gray);
        margin: 5px 10px;
      }

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

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

      /* 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 {
        display: inline-block;
        margin: 0 auto 20px auto;
      }

      /* Custom Theme Modal Styles */
      #custom-theme-modal .modal-content {
        width: 90%;
        max-width: 600px;
        padding: 20px;
        text-align: left;
      }

      #custom-theme-modal .modal-content h2 {
        text-align: center;
      }

      .theme-customizer {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .theme-customizer-group {
        display: flex;
        align-items: center;
      }

      .theme-customizer-label {
        width: 150px;
        font-size: 16px;
        margin-right: 10px;
      }

      .theme-customizer-input {
        flex: 1;
      }

      .color-input {
        width: 100%;
        padding: 5px 10px;
        font-size: 14px;
      }

      .gradient-preview {
        height: 100px;
        background: linear-gradient(to right, #ffffff, #000000);
        margin-top: 10px;
        border-radius: 8px;
      }

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

      .gradient-type-select {
        width: 100%;
        padding: 5px 10px;
        font-size: 14px;
        background-color: var(--dracoify-light-gray);
        border: 1px solid var(--dracoify-gray);
        color: var(--dracoify-text);
        border-radius: 4px;
      }

      .gradient-stop-inputs {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .gradient-stop-group {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .add-gradient-stop-button {
        margin-top: 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>
              <!-- Divider -->
              <div class="divider"></div>
              <!-- Custom Themes -->
              <div class="theme-option" data-theme="customize">
                Customize Theme
              </div>
              <!-- User Custom Presets will be added here dynamically -->
              <div id="user-custom-themes"></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 -->
            <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>
            </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>

    <!-- Custom Theme Modal -->
    <div id="custom-theme-modal" class="modal">
      <div class="modal-content">
        <h2>Create Custom Theme</h2>
        <div class="theme-customizer">
          <div class="theme-customizer-group">
            <label class="theme-customizer-label">Theme Name:</label>
            <input
              type="text"
              id="custom-theme-name"
              class="dracoify-input"
              placeholder="Enter theme name"
            />
          </div>
          <div class="theme-customizer-group">
            <label class="theme-customizer-label">Background Color:</label>
            <input
              type="color"
              id="custom-bg-color"
              class="color-input"
              value="#ffffff"
            />
          </div>
          <div class="theme-customizer-group">
            <label class="theme-customizer-label">Text Color:</label>
            <input
              type="color"
              id="custom-text-color"
              class="color-input"
              value="#000000"
            />
          </div>
          <div class="theme-customizer-group">
            <label class="theme-customizer-label">Accent Color:</label>
            <input
              type="color"
              id="custom-accent-color"
              class="color-input"
              value="#9370db"
            />
          </div>
          <div class="theme-customizer-group">
            <label class="theme-customizer-label">Navbar Background:</label>
            <input
              type="color"
              id="custom-navbar-bg"
              class="color-input"
              value="#f0f0f0"
            />
          </div>
          <div class="theme-customizer-group">
            <label class="theme-customizer-label">Banner Text Color:</label>
            <input
              type="color"
              id="custom-banner-text-color"
              class="color-input"
              value="#ffffff"
            />
          </div>
          <div class="theme-customizer-group">
            <label class="theme-customizer-label">Banner Emoji:</label>
            <input
              type="text"
              id="custom-banner-emoji"
              class="dracoify-input"
              placeholder="Enter emoji"
            />
          </div>
          <!-- Gradient Type -->
          <div class="theme-customizer-group">
            <label class="theme-customizer-label">Gradient Type:</label>
            <select id="gradient-type" class="gradient-type-select">
              <option value="linear">Linear</option>
              <option value="radial">Radial</option>
            </select>
          </div>
          <!-- Gradient Stops -->
          <div class="gradient-stop-inputs" id="gradient-stop-inputs">
            <div class="gradient-stop-group">
              <input
                type="color"
                class="color-input gradient-color"
                value="#ffffff"
              />
              <input
                type="number"
                class="dracoify-input gradient-stop"
                min="0"
                max="100"
                value="0"
              />
              <button class="dracoify-button remove-stop-button">
                <i class="fi fi-rr-trash"></i>
              </button>
            </div>
            <div class="gradient-stop-group">
              <input
                type="color"
                class="color-input gradient-color"
                value="#000000"
              />
              <input
                type="number"
                class="dracoify-input gradient-stop"
                min="0"
                max="100"
                value="100"
              />
              <button class="dracoify-button remove-stop-button">
                <i class="fi fi-rr-trash"></i>
              </button>
            </div>
          </div>
          <button
            class="dracoify-button add-gradient-stop-button"
            id="add-gradient-stop-button"
          >
            <i class="fi fi-rr-add"></i> Add Gradient Stop
          </button>
          <!-- Gradient Preview -->
          <div class="gradient-preview" id="gradient-preview"></div>
        </div>
        <div class="theme-customizer-buttons">
          <button id="save-custom-theme-button" class="dracoify-button">
            <i class="fi fi-rr-disk"></i> Save Theme
          </button>
          <button id="cancel-custom-theme-button" class="dracoify-button">
            <i class="fi fi-rr-cross"></i> Cancel
          </button>
        </div>
      </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");

        // Theme Handling
        const themeSelect = document.getElementById("theme-select");
        const themeOptions = document.getElementById("theme-options");
        const themeOptionItems = document.querySelectorAll(".theme-option");
        const userCustomThemesContainer = document.getElementById(
          "user-custom-themes"
        );
        let currentTheme = localStorage.getItem("theme") || "dark";
        let customThemes = JSON.parse(localStorage.getItem("customThemes")) || [];
        changeTheme(currentTheme);

        // Load custom themes into the theme options
        function loadCustomThemes() {
          userCustomThemesContainer.innerHTML = "";
          if (customThemes.length > 0) {
            customThemes.forEach((theme) => {
              const themeOption = document.createElement("div");
              themeOption.classList.add("theme-option");
              themeOption.setAttribute("data-theme", theme.name);
              themeOption.textContent = theme.name;
              userCustomThemesContainer.appendChild(themeOption);
            });
          }
        }
        loadCustomThemes();

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

        themeOptions.addEventListener("click", function (event) {
          if (event.target.classList.contains("theme-option")) {
            const selectedTheme = event.target.getAttribute("data-theme");
            if (selectedTheme === "customize") {
              openCustomThemeModal();
            } else {
              changeTheme(selectedTheme);
              themeOptions.classList.remove("open");
              themeSelect.classList.remove("open");
              themeSelect.textContent = event.target.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",
            "custom-theme",
          ];
          document.body.classList.remove(...themeClasses);

          // If it's a custom theme
          if (
            !themeClasses.includes(themeName + "-theme") &&
            themeName !== "customize"
          ) {
            // Apply custom theme
            const customTheme = customThemes.find((t) => t.name === themeName);
            if (customTheme) {
              applyCustomThemeStyles(customTheme);
              document.body.classList.add("custom-theme");
            }
          } else {
            // Add new theme class
            document.body.classList.add(themeName + "-theme");
            // Remove any inline styles from custom themes
            clearCustomThemeStyles();
          }

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

        function applyCustomThemeStyles(theme) {
          const root = document.documentElement;
          root.style.setProperty("--dracoify-bg", theme.bgColor);
          root.style.setProperty("--dracoify-text", theme.textColor);
          root.style.setProperty("--dracoify-accent", theme.accentColor);
          root.style.setProperty("--dracoify-navbar-bg", theme.navbarBgColor);
          root.style.setProperty(
            "--dracoify-banner-text-color",
            theme.bannerTextColor
          );
          root.style.setProperty(
            "--dracoify-selected-color",
            theme.accentColor
          );
          root.style.setProperty(
            "--dracoify-banner-emoji",
            `"${theme.bannerEmoji}"`
          );

          // Set banner gradient
          const banner = document.querySelector(".dracoify-banner");
          banner.style.background = theme.gradientCSS;
        }

        function clearCustomThemeStyles() {
          const root = document.documentElement;
          root.style.removeProperty("--dracoify-bg");
          root.style.removeProperty("--dracoify-text");
          root.style.removeProperty("--dracoify-accent");
          root.style.removeProperty("--dracoify-navbar-bg");
          root.style.removeProperty("--dracoify-banner-text-color");
          root.style.removeProperty("--dracoify-selected-color");
          root.style.removeProperty("--dracoify-banner-emoji");

          const banner = document.querySelector(".dracoify-banner");
          banner.style.background = "";
        }

        // 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 === customThemeModal) {
            closeCustomThemeModal();
          }
        };

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

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

        // Custom Theme Modal Functionality
        const customThemeModal = document.getElementById("custom-theme-modal");
        const customThemeNameInput = document.getElementById(
          "custom-theme-name"
        );
        const customBgColorInput = document.getElementById("custom-bg-color");
        const customTextColorInput = document.getElementById(
          "custom-text-color"
        );
        const customAccentColorInput = document.getElementById(
          "custom-accent-color"
        );
        const customNavbarBgInput = document.getElementById("custom-navbar-bg");
        const customBannerTextColorInput = document.getElementById(
          "custom-banner-text-color"
        );
        const customBannerEmojiInput = document.getElementById(
          "custom-banner-emoji"
        );
        const gradientTypeSelect = document.getElementById("gradient-type");
        const gradientStopInputsDiv = document.getElementById(
          "gradient-stop-inputs"
        );
        const addGradientStopButton = document.getElementById(
          "add-gradient-stop-button"
        );
        const gradientPreviewDiv = document.getElementById("gradient-preview");
        const saveCustomThemeButton = document.getElementById(
          "save-custom-theme-button"
        );
        const cancelCustomThemeButton = document.getElementById(
          "cancel-custom-theme-button"
        );

        function openCustomThemeModal() {
          customThemeModal.style.display = "flex";
          contentWrapper.classList.add("blurred");
          document.body.style.overflow = "hidden";
          updateGradientPreview();
        }

        function closeCustomThemeModal() {
          customThemeModal.style.display = "none";
          contentWrapper.classList.remove("blurred");
          document.body.style.overflow = "";
          resetCustomThemeForm();
        }

        function resetCustomThemeForm() {
          customThemeNameInput.value = "";
          customBgColorInput.value = "#ffffff";
          customTextColorInput.value = "#000000";
          customAccentColorInput.value = "#9370db";
          customNavbarBgInput.value = "#f0f0f0";
          customBannerTextColorInput.value = "#ffffff";
          customBannerEmojiInput.value = "";
          gradientTypeSelect.value = "linear";
          gradientStopInputsDiv.innerHTML = `
            <div class="gradient-stop-group">
              <input
                type="color"
                class="color-input gradient-color"
                value="#ffffff"
              />
              <input
                type="number"
                class="dracoify-input gradient-stop"
                min="0"
                max="100"
                value="0"
              />
              <button class="dracoify-button remove-stop-button">
                <i class="fi fi-rr-trash"></i>
              </button>
            </div>
            <div class="gradient-stop-group">
              <input
                type="color"
                class="color-input gradient-color"
                value="#000000"
              />
              <input
                type="number"
                class="dracoify-input gradient-stop"
                min="0"
                max="100"
                value="100"
              />
              <button class="dracoify-button remove-stop-button">
                <i class="fi fi-rr-trash"></i>
              </button>
            </div>
          `;
          updateGradientPreview();
        }

        function updateGradientPreview() {
          const gradientType = gradientTypeSelect.value;
          const stopGroups = gradientStopInputsDiv.querySelectorAll(
            ".gradient-stop-group"
          );
          const stops = [];

          stopGroups.forEach((group) => {
            const color = group.querySelector(".gradient-color").value;
            const stop = group.querySelector(".gradient-stop").value;
            stops.push({ color, stop });
          });

          stops.sort((a, b) => a.stop - b.stop);

          let gradientCSS = "";
          if (gradientType === "linear") {
            gradientCSS = `linear-gradient(to top, `;
          } else {
            gradientCSS = `radial-gradient(circle, `;
          }

          const gradientStops = stops
            .map((s) => `${s.color} ${s.stop}%`)
            .join(", ");
          gradientCSS += gradientStops + ")";

          gradientPreviewDiv.style.background = gradientCSS;
        }

        gradientTypeSelect.addEventListener("change", updateGradientPreview);

        gradientStopInputsDiv.addEventListener("input", function (event) {
          if (
            event.target.classList.contains("gradient-color") ||
            event.target.classList.contains("gradient-stop")
          ) {
            updateGradientPreview();
          }
        });

        gradientStopInputsDiv.addEventListener("click", function (event) {
          if (event.target.closest(".remove-stop-button")) {
            const stopGroup = event.target.closest(".gradient-stop-group");
            if (gradientStopInputsDiv.children.length > 2) {
              gradientStopInputsDiv.removeChild(stopGroup);
              updateGradientPreview();
            } else {
              showCustomModal(
                "Cannot Remove Stop",
                "At least two gradient stops are required."
              );
            }
          }
        });

        addGradientStopButton.addEventListener("click", function () {
          const newStopGroup = document.createElement("div");
          newStopGroup.classList.add("gradient-stop-group");
          newStopGroup.innerHTML = `
            <input
              type="color"
              class="color-input gradient-color"
              value="#ff0000"
            />
            <input
              type="number"
              class="dracoify-input gradient-stop"
              min="0"
              max="100"
              value="50"
            />
            <button class="dracoify-button remove-stop-button">
              <i class="fi fi-rr-trash"></i>
            </button>
          `;
          gradientStopInputsDiv.appendChild(newStopGroup);
          updateGradientPreview();
        });

        saveCustomThemeButton.addEventListener("click", function () {
          const themeName = customThemeNameInput.value.trim();
          if (themeName === "") {
            showCustomModal(
              "Theme Name Required",
              "Please enter a name for your custom theme."
            );
            return;
          }

          // Check for duplicate theme names
          if (customThemes.some((theme) => theme.name === themeName)) {
            showCustomModal(
              "Duplicate Theme Name",
              "A theme with this name already exists. Please choose a different name."
            );
            return;
          }

          // Gather theme properties
          const bgColor = customBgColorInput.value;
          const textColor = customTextColorInput.value;
          const accentColor = customAccentColorInput.value;
          const navbarBgColor = customNavbarBgInput.value;
          const bannerTextColor = customBannerTextColorInput.value;
          const bannerEmoji = customBannerEmojiInput.value || "";

          // Gather gradient stops
          const gradientType = gradientTypeSelect.value;
          const stopGroups = gradientStopInputsDiv.querySelectorAll(
            ".gradient-stop-group"
          );
          const stops = [];

          stopGroups.forEach((group) => {
            const color = group.querySelector(".gradient-color").value;
            const stop = group.querySelector(".gradient-stop").value;
            stops.push({ color, stop });
          });

          stops.sort((a, b) => a.stop - b.stop);

          // Build gradient CSS
          let gradientCSS = "";
          if (gradientType === "linear") {
            gradientCSS = `linear-gradient(to top, `;
          } else {
            gradientCSS = `radial-gradient(circle, `;
          }

          const gradientStops = stops
            .map((s) => `${s.color} ${s.stop}%`)
            .join(", ");
          gradientCSS += gradientStops + ")";

          // Create theme object
          const newTheme = {
            name: themeName,
            bgColor,
            textColor,
            accentColor,
            navbarBgColor,
            bannerTextColor,
            bannerEmoji,
            gradientCSS,
          };

          // Save to custom themes array
          customThemes.push(newTheme);
          localStorage.setItem("customThemes", JSON.stringify(customThemes));

          // Reload custom themes in the dropdown
          loadCustomThemes();

          // Close modal
          closeCustomThemeModal();

          // Apply the new theme
          changeTheme(themeName);
        });

        cancelCustomThemeButton.addEventListener("click", function () {
          closeCustomThemeModal();
        });
      });
    </script>
  </body>
</html>