make the sumbit button also work like the enter key on the getting started, now write the full complete code, dont skip anything, or add comment saying add this here no write theh full complete code: <!DOCTYPE html>
<html lang="en">
  <head>
    <base href="https://example.notion.site/" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dracoify - Notion-inspired UI</title>
    <link
      rel="stylesheet"
      href="https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.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: rgb(230, 245, 210, 0.5);
        --dracoify-accent: #ff99cc;
        --dracoify-banner-emoji: "🍬";
        --dracoify-selected-color: #cc6699;
        --dracoify-banner-text-color: #ffffff;

        .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,
      .flashcard-sets {
        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-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;
      }

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

    /* Styles for Getting Started Page */
    .getting-started-content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .chat-container {
      width: 100%;
      max-width: 800px;
      margin: 20px auto;
      background-color: var(--dracoify-light-gray);
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .chat-header {
      background-color: var(--dracoify-purple);
      color: white;
      padding: 15px;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }

    .chat-header i {
      margin-right: 10px;
    }

    #apiKeyForm {
      padding: 20px;
      text-align: center;
    }

    #apiKeyInput {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid var(--dracoify-gray);
      border-radius: 4px;
      font-size: 16px;
    }

    #submitApiKey {
      background-color: var(--dracoify-purple);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

    #apiKeyStatus {
      margin-top: 10px;
      font-style: italic;
      color: var(--dracoify-text);
    }

    #chatInterface {
      display: none;
    }

    .chat-messages {
      height: 300px;
      overflow-y: auto;
      padding: 20px;
    }

    .message {
      margin-bottom: 15px;
      padding: 10px;
      border-radius: 8px;
      max-width: 70%;
    }

    .user-message {
      background-color: var(--dracoify-blue);
      color: white;
      align-self: flex-end;
      margin-left: auto;
    }

    .bot-message {
      background-color: var(--dracoify-gray);
      color: var(--dracoify-text);
    }

    .typing-indicator {
      padding: 10px;
      display: none;
      font-style: italic;
      color: var(--dracoify-text);
    }

    .error-message {
      color: var(--dracoify-red);
      padding: 10px;
      text-align: center;
    }

    .chat-input {
      display: flex;
      padding: 10px;
    }

    #userInput {
      flex-grow: 1;
      padding: 10px;
      border: 1px solid var(--dracoify-gray);
      border-radius: 4px;
      font-size: 16px;
    }

    .send-button {
      background-color: var(--dracoify-purple);
      color: white;
      border: none;
      padding: 10px 20px;
      margin-left: 10px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    </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">Flashcards</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-rocket-lunch"></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>
            <!-- Nested Flashcard Sets -->
            <ul class="flashcard-sets" style="display: none;"></ul>
          </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>
          </li>
          <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>
          </li>
        </ul>
      </aside>

      <!-- Main Content -->
      <main class="dracoify-content" id="main-content">
        <!-- Getting Started Section -->
        <div
          id="getting-started-section"
          class="dracoify-section"
          data-section="Getting Started"
        >
          <div class="dracoify-banner">
            <h1 class="dracoify-banner-title">Hey, Draco 😊</h1>
          </div>
          <div class="dracoify-section-content getting-started-content">
            <div class="chat-container">
              <div class="chat-header">
                <i class="fas fa-robot"></i> Draco
              </div>
              <div id="apiKeyForm">
                <input
                  type="text"
                  id="apiKeyInput"
                  placeholder="Enter your API key here..."
                />
                <button id="submitApiKey" onclick="submitApiKey()">
                  <i class="fas fa-check"></i>
                </button>
              </div>
              <div id="apiKeyStatus"></div>
              <div id="chatInterface">
                <div class="chat-messages" id="chatArea"></div>
                <div class="typing-indicator" id="typingIndicator">
                  Draco is thinking...
                </div>
                <div class="error-message" id="errorMessage"></div>
                <div class="chat-input">
                  <input
                    type="text"
                    id="userInput"
                    placeholder="Type your message here..."
                  />
                  <button class="send-button" onclick="sendMessage()">
                    <i class="fas fa-paper-plane"></i>
                  </button>
                </div>
              </div>
            </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>

    <!-- 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");
        const contentWrapper = document.getElementById("content-wrapper");
        const themeSelect = document.getElementById("theme-select");
        const themeOptions = document.getElementById("theme-options");
        let currentTheme = localStorage.getItem("theme") || "light";
        let flashcardSets = {};
        let currentFlashcardSet = null;
        let isReviewingWrongAnswers = false;

        // Apply the saved theme on page load
        document.body.classList.add(currentTheme + "-theme");

        // Update theme select text
        const selectedOption = document.querySelector(
          `.theme-option[data-theme="${currentTheme}"]`
        );
        if (selectedOption) {
          themeSelect.textContent = selectedOption.textContent;
        }

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

        // Theme Option Selection
        const themeClasses = [
          "dark-theme",
          "light-theme",
          "coconut-theme",
          "cotton-candy-theme",
          "mars-theme",
          "strawberry-theme",
          "tropical-sorbet-theme",
        ];
        const themeOptionElements = document.querySelectorAll(".theme-option");

        themeOptionElements.forEach((option) => {
          option.addEventListener("click", function () {
            const themeName = this.getAttribute("data-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;
            }

            themeOptions.classList.remove("open");
            themeSelect.classList.remove("open");
          });
        });

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

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

            // If Flashcards is clicked, toggle the visibility of flashcard sets
            if (pageTitle === "Flashcards") {
              const flashcardSetsContainer = this.querySelector(".flashcard-sets");
              if (flashcardSetsContainer) {
                flashcardSetsContainer.style.display =
                  flashcardSetsContainer.style.display === "none"
                    ? "block"
                    : "none";
              }
            }
          });
        });

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

        // 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 (3 seconds)
          setTimeout(() => {
            toast.classList.add("hide");
          }, 3000);

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

          // 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 flashcardsPage = document.querySelector(
            '.dracoify-sidebar-page[data-page="Flashcards"]'
          );
          const flashcardSetsContainer = flashcardsPage.querySelector(
            ".flashcard-sets"
          );

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

          flashcardSetsContainer.appendChild(subpage);
        }

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

        // Footer Handling
        const footer = document.querySelector("footer");
        footer.style.display = "block";

        // AI Chat Functionality
        let API_KEY = "";
        const API_URL =
          "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro-002:generateContent";
        let conversationHistory = [];

        async function submitApiKey() {
          const apiKeyInput = document.getElementById("apiKeyInput");
          API_KEY = apiKeyInput.value.trim();
          if (API_KEY) {
            document.getElementById("apiKeyStatus").textContent = "Checking...";
            const isValidKey = await checkApiKey();
            if (isValidKey) {
              document.getElementById("apiKeyForm").style.display = "none";
              document.getElementById("apiKeyStatus").style.display = "none";
              document.getElementById("chatInterface").style.display = "block";
              addMessage(
                "Congratulations! You can now talk to the AI. How can I help you today?",
                false
              );
            } else {
              document.getElementById("apiKeyStatus").textContent =
                "Invalid API key";
            }
          } else {
            document.getElementById("apiKeyStatus").textContent =
              "Please enter a valid API key.";
          }
        }

        async function checkApiKey() {
          try {
            const response = await fetch(`${API_URL}?key=${API_KEY}`, {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                contents: [
                  {
                    role: "user",
                    parts: [{ text: "hey draco" }],
                  },
                ],
              }),
            });

            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            return true;
          } catch (error) {
            console.error("Error:", error);
            return false;
          }
        }

        function addMessage(message, isUser) {
          const chatArea = document.getElementById("chatArea");
          const messageElement = document.createElement("div");
          messageElement.classList.add("message");
          messageElement.classList.add(isUser ? "user-message" : "bot-message");
          messageElement.textContent = message;
          chatArea.appendChild(messageElement);
          chatArea.scrollTop = chatArea.scrollHeight;
        }

        async function sendMessage() {
          const userInput = document.getElementById("userInput");
          const message = userInput.value.trim();
          if (message) {
            addMessage(message, true);
            userInput.value = "";
            conversationHistory.push({
              role: "user",
              parts: [{ text: message }],
            });
            showTypingIndicator();
            const response = await getBotResponse(message);
            hideTypingIndicator();
            addMessage(response, false);
            if (
              response !==
              "I'm sorry, I encountered an error while processing your request. Please try again."
            ) {
              conversationHistory.push({
                role: "model",
                parts: [{ text: response }],
              });
            }
          }
        }

        async function getBotResponse(message) {
          try {
            const response = await fetch(`${API_URL}?key=${API_KEY}`, {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                contents: [
                  {
                    role: "user",
                    parts: [
                      {
                        text: `You are Draco, an AI assistant. Respond to the following message in the context of our conversation: ${message}`,
                      },
                    ],
                  },
                  ...conversationHistory,
                ],
              }),
            });

            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            console.log("API Response:", data);

            if (
              data.candidates &&
              data.candidates[0] &&
              data.candidates[0].content &&
              data.candidates[0].content.parts &&
              data.candidates[0].content.parts[0]
            ) {
              return data.candidates[0].content.parts[0].text;
            } else {
              throw new Error("Unexpected response structure");
            }
          } catch (error) {
            console.error("Error:", error);
            document.getElementById("errorMessage").textContent = `Error: ${error.message}`;
            return "I'm sorry, I encountered an error while processing your request. Please try again.";
          }
        }

        function showTypingIndicator() {
          document.getElementById("typingIndicator").style.display = "block";
          document.getElementById("errorMessage").textContent = "";
        }

        function hideTypingIndicator() {
          document.getElementById("typingIndicator").style.display = "none";
        }

        document
          .getElementById("userInput")
          .addEventListener("keypress", function (e) {
            if (e.key === "Enter") {
              sendMessage();
            }
          });

        document
          .getElementById("apiKeyInput")
          .addEventListener("keypress", function (e) {
            if (e.key === "Enter") {
              submitApiKey();
            }
          });
      });
    </script>
  </body>
</html>