<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Piyush Bhardwaj">
    <meta name="copyright" content="Talescaper. All Rights Reserved.">
    <title>TaleScaper</title>
    <link rel="icon" href="favicon.png">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="script.js" defer></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root {
  --background-primary: #f0f2f5;
  --background-secondary: #ffffff;
  --text-normal: #2e3338;
  --text-muted: #747f8d;
  --interactive-normal: #4f545c;
  --interactive-hover: #2e3338;
  --interactive-active: #060607;
  --brand-experiment: #5865f2;
  --brand-experiment-560: #4752c4;
  --progress-bar-color: #caced6;
  --background-modifier-accent: rgba(79,84,92,0.16);
  --scrollbar-thin-thumb: rgba(79,84,92,0.3);
  --scrollbar-thin-track: transparent;
  --scrollbar-auto-thumb: rgba(79,84,92,0.3);
  --scrollbar-auto-track: rgba(0,0,0,0.1);
}

.dark-mode {
  --background-primary: #202225;
  --background-secondary: #2f3136;
  --text-normal: #dcddde;
  --text-muted: #72767d;
  --interactive-normal: #b9bbbe;
  --interactive-hover: #dcddde;
  --interactive-active: #fff;
  --brand-experiment: #7289da;
  --brand-experiment-560: #5865f2;
  --progress-bar-color: #4f545c;
  --background-modifier-accent: rgba(79,84,92,0.32);
  --scrollbar-thin-thumb: rgba(79,84,92,0.5);
  --scrollbar-auto-thumb: rgba(79,84,92,0.5);
  --scrollbar-auto-track: rgba(0,0,0,0.3);
}

body, html {
  height: 100%;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  color: var(--text-normal);
  background-color: var(--background-primary);
  transition: background-color 0.3s, color 0.3s;
  overflow-x: hidden;
  overflow: hidden;
}
body {
  margin-bottom: 10px; /* Decrease the margin at the bottom */
}

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

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

::-webkit-scrollbar-track {
  background-color: var(--scrollbar-auto-track);
}

.parallax {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 1px;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
  background: linear-gradient(135deg, #2c3e50, #3498db, #2980b9);
  height: 200%;
  width: 200%; /* Increased width to cover entire viewport */
  left: -50%; /* Offset to center the background */
}


.dark-mode .parallax__layer--back {
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
}

.content-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  min-height: auto;
}

.content {
  width: 100%;
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9); /* Make it slightly translucent in light mode */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
  position: relative;
}


.dark-mode .content {
  background-color: var(--background-secondary); /* Keep it solid in dark mode */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 1px 8px rgba(0, 0, 0, 0.4);
}

.content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.content:hover::before {
  opacity: 1;
}

.dark-mode .content::before {
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 70%
  );
}

#main-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#story-container, #history-container, #story-structure {
  background-color: var(--background-primary);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-mode #story-container,
.dark-mode #history-container,
.dark-mode #story-structure {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3);
}

#story-container {
  flex: 2;
}

#history-container, #story-structure {
  flex: 1;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}

#story-text, #history-text {
  margin-bottom: 20px;
  color: var(--text-normal);
}

.btn {
  padding: 8px 16px;
  margin: 5px;
  background-color: rgba(57, 124, 206, 0.719);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9em;
}

.btn:hover {
  background-color: rgba(63, 115, 179, 0.859);
  padding-left: 17px;
  padding-right: 17px;
  transition: all 0.25s;
}

.btn:active {
  transform: translateY(1px);
}

.dark-mode .btn {
  background-color: rgba(97, 95, 95, 0.566);
}

.dark-mode .btn:hover {
  background-color: rgba(97, 95, 95, 0.866);
}

.dark-mode .btn:active {
  background-color: rgba(97, 95, 95, 0.478);
}

#mode-toggle, #reset-btn, #save-btn, #load-btn {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

#progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--background-modifier-accent);
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
}

#progress {
  width: 0;
  height: 100%;
  background-color: var(--progress-bar-color);
  border-radius: 4px;
  transition: width 0.3s;
}

#progress-text {
  text-align: center;
  margin-top: 5px;
  color: var(--text-muted);
}

#final-story {
  display: none;
  white-space: pre-wrap;
}

#file-input {
  display: none;
}

.hidden {
  display: none;
}

.story-part {
  margin-bottom: 20px;
  padding: 15px;
  background-color: var(--background-secondary);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 100%;
  overflow-x: hidden;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.choice {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
}

.part-text, .choice-input {
  width: calc(100% - 22px); /* Adjust width to account for padding and border */
  padding: 10px;
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
  background-color: var(--background-primary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-accent);
  border-radius: 4px;
  resize: vertical;
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.part-text {
  width: 100%;
  margin-top: 5px;
}

.next-part-select {
  width: 100%;
  padding: 8px;
  font-family: 'Poppins', sans-serif;
  background-color: var(--background-primary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-accent);
  border-radius: 4px;
}

h1, h2, h3 {
  color: var(--text-normal);
}

h1 {
  text-align: center;
  font-size: 2.5em;
  font-weight: bold;
  color: var(--text-normal);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
  margin: 0;
}

.title-container {
  position: relative;
  margin-top: 20px;
}

.author-container {
  text-align: right;
  margin-top: 10px;
}

.author {
  font-size: 0.8em;
  color: var(--text-muted);
  font-style: italic;
  text-decoration: none;
}

.author:hover {
  text-decoration: underline;
}

.author-preview {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 250px;
  background-color: var(--background-secondary);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 15px;
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: left;
}

.author-preview.show {
  display: block;
}

.author-preview h3 {
  margin-top: 0;
  color: var(--text-normal);
}

.author-preview p {
  font-size: 0.9em;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: left;
}

p {
  font-size: 13px;
}

.reload {
  text-decoration: none;
}

.reload:hover {
  opacity: 0.7;
}

.reload:active {
  cursor: -webkit-grab;
}

#dark-mode-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.3s ease;
  background-color: transparent;
  padding: 5px;
  border-radius: 50%;
}

#dark-mode-toggle:hover {
  transform: scale(1.1);
}

.player-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}

#toggle-progress {
  font-size: 0.9em;
  color: var(--interactive-normal);
  cursor: pointer;
  margin-right: 10px;
  transition: color 0.2s ease;
}

#toggle-progress:hover {
  color: var(--interactive-hover);
}

#replay-story {
  background-color: rgba(128, 128, 128, 0.607);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.2s ease;
}

#replay-story:hover {
  background-color: rgba(128, 128, 128, 0.707);
}

#replay-story:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  .content {
    margin: 10px;
    padding: 15px;
  }

  .choice-btn {
    font-size: 0.9em;
    padding: 8px 12px;
  }
}
.part-name {
  display: inline-block;
  margin-right: 10px;
}

.edit-part-name {
  background-color: transparent;
  border: none;
  color: var(--interactive-normal);
  cursor: pointer;
  font-size: 0.9em;
  padding: 2px;
  transition: color 0.2s ease;
  align-self: flex-start;
  position: relative;
}

.edit-part-name:hover {
  color: var(--interactive-hover);
}
.edit-part-name:active {
  color: var(--interactive-active);
}


/* Add a tooltip-like effect for better UX */
.edit-part-name::before {
  content: 'Edit name';
  position: absolute;
  background-color: var(--background-secondary);
  color: var(--text-normal);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7em;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 5px;
  white-space: nowrap;
}
.edit-part-name:hover::before {
  opacity: 1;
} 

.edit-part-name::after {
  content: 'Edit name';
  position: absolute;
  background-color: var(--background-secondary);
  color: var(--text-normal);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7em;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  margin-left: 5px;
}

.edit-part-name:hover::after {
  opacity: 1;
}
.story-part h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
#choices {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
}

.choice-btn {
  background-color: var(--background-secondary);
  border: none;
  color: var(--text-normal);
  padding: 15px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1em;
  text-align: left;
  box-shadow: 0 4px 6px rgba(71, 69, 69, 0.373);
  position: relative;
  overflow: hidden;
}

.choice-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: 0.2s;
}

.choice-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.choice-btn:hover::before {
  transform: translateX(100%);
}

.choice-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
/* Add these styles to your stylesheet.css file */

.menu-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}

.menu-toggle {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-normal);
}

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  background-color: var(--background-secondary);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;
}

.dropdown-menu a {
  color: var(--text-normal);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.2s, transform 0.2s;
}

.dropdown-menu a:hover {
  background-color: var(--background-modifier-accent);
  transform: translateX(5px);
}

.menu-button {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9em;
}

/* Dark mode styles */
.dark-mode .menu-toggle {
  color: var(--text-normal);
}

.dark-mode .dropdown-menu {
  background-color: var(--background-secondary);
}

.dark-mode .dropdown-menu a {
  color: var(--text-normal);
}

.dark-mode .dropdown-menu a:hover {
  background-color: var(--background-modifier-accent);
}

.tutorial-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--background-secondary);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tutorial-content h1 {
  color: var(--text-normal);
  font-size: 2.5em;
  margin-bottom: 0.5em;
}

.tutorial-content h2 {
  color: var(--text-muted);
  font-size: 1.8em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.tutorial-content p, .tutorial-content li {
  line-height: 1.6;
  color: var(--text-normal);
}

.tutorial-content ol, .tutorial-content ul {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.tutorial-content .btn {
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  background-color: rgba(57, 124, 206, 0.719);
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 20px;
  transition: background-color 0.2s ease, transform 0.1s ease;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9em;
}

.tutorial-content .btn:hover {
  background-color: rgba(63, 115, 179, 0.859);
  padding-left: 21px;
  padding-right: 21px;
  transition: all 0.25s;
}

.tutorial-content .btn:active {
  transform: translateY(1px);
}

.dark-mode .tutorial-content h1 {
  color: var(--text-normal);
  color: #6cadf6b3;
}

.dark-mode .tutorial-content h2 {
  color: var(--text-muted);
  color: #90afd6;
}

.dark-mode .tutorial-content .btn {
  background-color: rgba(97, 95, 95, 0.566);
}

.dark-mode .tutorial-content .btn:hover {
  background-color: rgba(97, 95, 95, 0.866);
}
/* Disable mouse darkening effect */
.disable-darkening .content::before {
  display: none;
}
.high-contrast.dark-mode .parallax {
  overflow-y: auto;
  height: 100vh;
}

.high-contrast.dark-mode .parallax__layer--back {
  display: none;
}

.high-contrast.dark-mode .content-wrapper {
  min-height: auto;
}
.high-contrast.dark-mode {
  --background-primary: #000000;
  --background-secondary: #1a1a1a;
  --text-normal: #ffffff;
  --text-muted: #cccccc;
  --interactive-normal: #564b4b;
  --interactive-hover: #f0f0f0;
  --interactive-active: #e0e0e0;
  --brand-experiment: #4a90e2;
  --brand-experiment-560: #3a75b5;
  --progress-bar-color: #ffffff;
  --background-modifier-accent: rgba(255,255,255,0.2);
  --scrollbar-thin-thumb: rgba(255,255,255,0.3);
  --scrollbar-auto-thumb: rgba(255,255,255,0.3);
  --scrollbar-auto-track: rgba(0,0,0,0.3);
  --button-background: #020e1c;
  --button-text: #ffffff;
  --button-hover-background: #24282c;
  
}

.high-contrast.dark-mode .content {
  background-color: var(--background-secondary);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1), 0 1px 8px rgba(255, 255, 255, 0.2);
}

.high-contrast.dark-mode .btn {
  background-color: var(--brand-experiment);
  color: #ffffff;
}

.high-contrast.dark-mode .btn:hover {
  background-color: var(--brand-experiment-560);
}

.high-contrast.dark-mode #story-container,
.high-contrast.dark-mode #history-container,
.high-contrast.dark-mode #story-structure {
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.2);
}

.high-contrast.dark-mode .choice-btn {
  background-color: var(--background-secondary);
  color: var(--text-normal);
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
}

.high-contrast.dark-mode .choice-btn:hover {
  box-shadow: 0 6px 12px rgba(255, 255, 255, 0.15);
}

.high-contrast.dark-mode .dropdown-menu {
  background-color: var(--background-secondary);
  box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2);
}

.high-contrast.dark-mode .dropdown-menu a:hover {
  background-color: var(--background-modifier-accent);
}

/* Ensure the content of story parts is visible in high contrast mode */
.high-contrast.dark-mode .story-part,
.high-contrast.dark-mode .part-text,
.high-contrast.dark-mode .choice-input,
.high-contrast.dark-mode .next-part-select {
  background-color: var(--background-secondary);
  color: var(--text-normal);
  border-color: var(--text-muted);
}

/* Adjust progress bar for high contrast */
.high-contrast.dark-mode #progress-bar {
  background-color: var(--background-modifier-accent);
}

.high-contrast.dark-mode #progress {
  background-color: var(--progress-bar-color);
}
.high-contrast.dark-mode .btn {
  background-color: var(--button-background);
  color: var(--button-text);
  border: 2px solid var(--button-text);
  transition: background-color 0.3s, color 0.3s;
}

.high-contrast.dark-mode .btn:hover {
  background-color: var(--button-hover-background);
  color: var(--button-text);
}

/* Remove padding changes on hover */
.high-contrast.dark-mode .btn:hover {
  padding-left: 16px;
  padding-right: 16px;
}

/* Choice button styles for high contrast mode */
.high-contrast.dark-mode .choice-btn {
  background-color: var(--background-secondary);
  color: var(--text-normal);
  border: 2px solid var(--text-normal);
  box-shadow: none;
  transition: background-color 0.3s, color 0.3s;
}

.high-contrast.dark-mode .choice-btn:hover {
  background-color: var(--text-normal);
  color: var(--background-secondary);
  transform: none;
  box-shadow: none;
}
.high-contrast.dark-mode .choice-btn::before {
  display: none;
}
.high-contrast.dark-mode #story-container,
.high-contrast.dark-mode #history-container,
.high-contrast.dark-mode #story-structure {
  box-shadow: none;
  border: 1px solid var(--text-muted);
}

.high-contrast.dark-mode .dropdown-menu {
  background-color: var(--background-secondary);
  box-shadow: none;
  border: 1px solid var(--text-normal);
}

.high-contrast.dark-mode .dropdown-menu a:hover {
  background-color: var(--text-normal);
  color: var(--background-secondary);
}

/* Ensure the content of story parts is visible in high contrast mode */
.high-contrast.dark-mode .story-part,
.high-contrast.dark-mode .part-text,
.high-contrast.dark-mode .choice-input,
.high-contrast.dark-mode .next-part-select {
  background-color: var(--background-secondary);
  color: var(--text-normal);
  border-color: var(--text-normal);
}

/* Adjust progress bar for high contrast */
.high-contrast.dark-mode #progress-bar {
  background-color: var(--background-modifier-accent);
  border: 1px solid var(--text-normal);
}

.high-contrast.dark-mode #progress {
  background-color: var(--progress-bar-color);
}
#undo-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  color: var(--text-normal);
  padding: 5px;
  margin-right: 10px;
  transition: transform 0.2s ease-in-out;
}

#undo-btn:hover {
  color: var(--interactive-hover);
  transform: scale(1.1);
}

#undo-btn:active {
  transform: scale(0.95);
}
#redo-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  color: var(--text-normal);
  padding: 5px;
  margin-right: 10px;
  transition: transform 0.2s ease-in-out;
}

#redo-btn:hover {
  color: var(--interactive-hover);
  transform: scale(1.1);
}

#redo-btn:active {
  transform: scale(0.95);
}
@media (max-width: 768px) {
            #dark-mode-toggle {
                left: 20px;
                right: auto;
            }
        }
a{
  text-decoration: none;
  color: #22374f;
  }
  .tooltip-btn svg {
    width: 22px;  /* Increased size */
    height: 22px; /* Increased size */
    fill: #555;   /* Subtle color */
    background-color: transparent; /* Ensure no background */
    opacity: 0.8; /* Slightly increased opacity */
}

.tooltip-btn:hover svg {
    opacity: 1; /* Full visibility on hover */
    transform: translateY(1px);
}
.tooltip-btn:active svg {
  opacity: 1; /* Full visibility on hover */
  transform: translateY(-0.2px);
}
  .tooltip-btn {
    position: relative;
    cursor: pointer;
    font-size: 18px; /* Adjust size as needed */
    color: inherit;  /* Inherit the color from parent */
    background-color: transparent; /* Ensure no background */
  }

.tooltip-btn::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.tooltip-btn:hover::before {
    visibility: visible;
    opacity: 1;
}

.tooltip-btn::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.tooltip-btn:hover::after {
    visibility: visible;
    opacity: 1;
}
.undo-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 30%; /* Adjust this value to move tooltip left */
  transform: translateX(-30%); /* Adjust this value to align the tooltip correctly */
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.undo-tooltip:hover::before {
  visibility: visible;
  opacity: 1;
}

.undo-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 30%; /* Match this with the left value of ::before */
  transform: translateX(-30%); /* Match this with the transform value of ::before */
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.undo-tooltip:hover::after {
  visibility: visible;
  opacity: 1;
}

    </style>
</head>
<body>
    <div class="parallax">
        <div class="parallax__layer parallax__layer--back"></div>
        <div class="parallax__layer parallax__layer--base">
            <div class="content-wrapper">
                <div class="content">
                    <header>
                        <div class="title-container">
                            <h1>TaleScaper<a href="Simulation.html" data-tooltip="Click here for a Fun Simulation" class="tooltip-btn">.</a></h1>
                            <div class="author-container">
                                <a href="#" class="author" id="author-link">~by Piyush Bhardwaj</a>
                                <div class="author-preview" id="author-preview">
                                    <h3>About This Page</h3>
                                    <p>Made by 15 year old developer. With the help of this page, you can create complex non-linear stories with limitless possibilities. This page was made through numerous iterations with the help of AI. It may be overwhelming currently, but updates are on the way.</p>
                                    <p>GitHub: <a href="https://github.com/CyberGeek121" target="_blank" style="color: rgba(31, 118, 194, 0.796);">github.com/CyberGeek121</a></p>
                                </div>
                            </div>
                        </div>
                        <!-- Add this just after the title-container div in your index.html file -->
                    <div class="menu-container">
                        <button id="menu-toggle" class="menu-toggle">&#8942;</button>
                        <div id="dropdown-menu" class="dropdown-menu">
                        <a href="Tutorial.html" class="menu-button">Tutorial</a>
                        <!-- Add more menu items here in the future -->
                        </div>
                    </div>
                        <div class="controls">
                            <button id="mode-toggle" class="btn">Switch to Play Mode</button>
                            <button id="reset-btn" class="btn">Reset</button>
                            <button id="save-btn" class="btn">Save</button>
                            <button id="load-btn" class="btn">Load</button>
                            <input type="file" id="file-input" accept=".json" style="display: none;">
                        </div>
                    
                        <button id="dark-mode-toggle" class="dark-mode-btn">🌙</button>
                    </header>
                    
                    <main>
                        <div id="creator-mode">
                                <h2>
                                    <span id="undo-btn" data-tooltip="Undo ('CTRL+Z')" class="tooltip-btn undo-tooltip">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
                                            <path fill="currentColor" d="M9 11h8a1 1 0 110 2H9.41l2.3 2.29a1 1 0 11-1.42 1.42l-4-4a1 1 0 010-1.42l4-4a1 1 0 011.42 1.42L9.41 11z"></path>
                                        </svg>
                                    </span>
                                Story Creator Mode
                                <span id="redo-btn" data-tooltip="Redo ('CTRL+Y')" class="tooltip-btn">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
                                        <path fill="currentColor" d="M15 11H7a1 1 0 000 2h7.59l-2.3 2.29a1 1 0 001.42 1.42l4-4a1 1 0 000-1.42l-4-4a1 1 0 00-1.42 1.42L15.59 11z"></path>
                                    </svg>
                                </span>
                                </h2>
                            <div id="story-structure">
                                <!-- Story parts will be dynamically added here -->
                            </div>
                            <button id="add-part-btn" class="btn">Add New Part</button>
                        </div>
                        
                        <div id="player-mode" class="hidden">
                            <h2>Story Player Mode</h2>
                            <div class="player-controls">
                                <span id="toggle-progress">Show Progress</span>
                                <button id="replay-story" data-tooltip="Replay Story" class="tooltip-btn">↺</button>
                            </div>
                            <div id="main-container">
                                <div id="story-container">
                                    <div id="progress-container" style="display: none;">
                                        <div id="progress-bar"><div id="progress"></div></div>
                                        <div id="progress-text">Part 1</div>
                                    </div>
                                    <div id="story-text"></div>
                                    <div id="choices"></div>
                                    <div id="final-story"></div>
                                </div>
                                <div id="history-container">
                                    <h3>Interaction History</h3>
                                    <div id="history-text"></div>
                                </div>
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    </div>

    <!-- Template for story part (hidden, used by JavaScript) -->
    <div class="story-part">
        <h3>
            <span class="part-name">Part 1</span>
            <button class="edit-part-name" data-part="${index}">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                </svg>
            </button>
        </h3>
            <textarea class="part-text" placeholder="Enter your story part here..."></textarea>
            <div class="choices">
                <!-- Choices will be dynamically added here -->
            </div>
            <button class="add-choice-btn btn">Add Choice</button>
            <button class="remove-part-btn btn">Remove Part</button>
        </div>
    </template>
    </div>
    <script>// Improved Story Creator Script with Enhanced Undo Functionality and Bug Fixes

        document.addEventListener('DOMContentLoaded', function() {
            // DOM Elements
            const elements = {
                modeToggle: document.getElementById('mode-toggle'),
                creatorMode: document.getElementById('creator-mode'),
                playerMode: document.getElementById('player-mode'),
                storyStructure: document.getElementById('story-structure'),
                addPartBtn: document.getElementById('add-part-btn'),
                saveBtn: document.getElementById('save-btn'),
                storyText: document.getElementById('story-text'),
                choicesContainer: document.getElementById('choices'),
                progressBar: document.getElementById('progress'),
                progressText: document.getElementById('progress-text'),
                finalStory: document.getElementById('final-story'),
                historyText: document.getElementById('history-text'),
                resetBtn: document.getElementById('reset-btn'),
                loadBtn: document.getElementById('load-btn'),
                fileInput: document.getElementById('file-input'),
                darkModeToggle: document.getElementById('dark-mode-toggle'),
                toggleProgressBtn: document.getElementById('toggle-progress'),
                progressContainer: document.getElementById('progress-container'),
                replayBtn: document.getElementById('replay-story'),
                content: document.querySelector('.content'),
                authorLink: document.getElementById('author-link'),
                authorPreview: document.getElementById('author-preview'),
                undoBtn: document.getElementById('undo-btn'),
                redoBtn: document.getElementById('redo-btn')
            };
        
            // State
            let storyParts = [{ name: 'Part 1', text: '', choices: [] }];
            let currentPart = 0;
            let history = [];
        
            // Undo/Redo Module
            const undoRedoModule = (function() {
                let undoStack = [];
                let redoStack = [];
                const maxUndoSteps = 20;
        
                function pushAction(action) {
                    undoStack.push(action);
                    if (undoStack.length > maxUndoSteps) undoStack.shift();
                    redoStack = []; // Clear redo stack when a new action is performed
                    updateUndoRedoButtons();
                }
        
                function undo() {
                    if (undoStack.length === 0) return null;
                    const action = undoStack.pop();
                    redoStack.push(action);
                    updateUndoRedoButtons();
                    return { action, isUndo: true };
                }
        
                function redo() {
                    if (redoStack.length === 0) return null;
                    const action = redoStack.pop();
                    undoStack.push(action);
                    updateUndoRedoButtons();
                    return { action, isUndo: false };
                }
        
                function updateUndoRedoButtons() {
                    if (elements.undoBtn) elements.undoBtn.disabled = undoStack.length === 0;
                    if (elements.redoBtn) elements.redoBtn.disabled = redoStack.length === 0;
                }
        
                return { pushAction, undo, redo };
            })();
        
            // Efficient deep clone function
            const cloneDeep = obj => {
                if (obj === null || typeof obj !== 'object') {
                    return obj;
                }
                if (Array.isArray(obj)) {
                    return obj.map(cloneDeep);
                }
                return Object.fromEntries(
                    Object.entries(obj).map(([key, value]) => [key, cloneDeep(value)])
                );
            };
        
            // Apply action function
            function applyAction(actionData) {
                const { action, isUndo } = actionData;
                switch (action.type) {
                    case 'add':
                        if (isUndo) {
                            storyParts.pop();
                        } else {
                            storyParts.push(cloneDeep(action.part));
                        }
                        break;
                    case 'remove':
                        if (isUndo) {
                            storyParts.splice(action.index, 0, cloneDeep(action.part));
                        } else {
                            storyParts.splice(action.index, 1);
                        }
                        break;
                    case 'edit':
                        if (isUndo) {
                            storyParts[action.index] = cloneDeep(action.oldPart);
                        } else {
                            storyParts[action.index] = cloneDeep(action.newPart);
                        }
                        break;
                    case 'editName':
                        storyParts[action.index].name = isUndo ? action.oldName : action.newName;
                        break;
                    case 'addChoice':
                        if (isUndo) {
                            storyParts[action.partIndex].choices.pop();
                        } else {
                            storyParts[action.partIndex].choices.push(cloneDeep(action.choice));
                        }
                        break;
                    case 'removeChoice':
                        if (isUndo) {
                            storyParts[action.partIndex].choices.splice(action.choiceIndex, 0, cloneDeep(action.choice));
                        } else {
                            storyParts[action.partIndex].choices.splice(action.choiceIndex, 1);
                        }
                        break;
                    case 'editChoice':
                        storyParts[action.partIndex].choices[action.choiceIndex] = isUndo ? cloneDeep(action.oldChoice) : cloneDeep(action.newChoice);
                        break;
                }
                updateStoryStructure();
                saveToLocalStorage();
            }
        
            // Helper Functions
            function isPartNameDuplicate(newName, currentPartIndex) {
                return storyParts.some((part, index) => 
                    part.name.toLowerCase() === newName.toLowerCase() && index !== currentPartIndex
                );
            }
        
            // Local Storage Functions
            function loadFromLocalStorage() {
                try {
                    const savedStoryParts = localStorage.getItem('storyParts');
                    const savedCurrentPart = localStorage.getItem('currentPart');
                    const savedHistory = localStorage.getItem('history');
        
                    if (savedStoryParts) storyParts = JSON.parse(savedStoryParts);
                    if (savedCurrentPart) currentPart = parseInt(savedCurrentPart, 10);
                    if (savedHistory) history = JSON.parse(savedHistory);
                } catch (error) {
                    console.error('Error loading from local storage:', error);
                    // Fallback to default state
                    storyParts = [{ name: 'Part 1', text: '', choices: [] }];
                    currentPart = 0;
                    history = [];
                }
            }
        
            function saveToLocalStorage() {
                try {
                    localStorage.setItem('storyParts', JSON.stringify(storyParts));
                    localStorage.setItem('currentPart', currentPart.toString());
                    localStorage.setItem('history', JSON.stringify(history));
                } catch (error) {
                    console.error('Error saving to local storage:', error);
                    alert('Failed to save your progress. Please make sure you have enough storage space.');
                }
            }
        
            // Story Structure Update
            function updateStoryStructure() {
                if (!elements.storyStructure) return;
        
                elements.storyStructure.innerHTML = storyParts.map((part, index) => `
                    <div class="story-part">
                        <h3>
                            <span class="part-name">${part.name}</span>
                            <button class="edit-part-name" data-part="${index}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                </svg>
                            </button>
                        </h3>
                        <textarea class="part-text" placeholder="Enter your story part here...">${part.text}</textarea>
                        <div class="choices">
                            ${part.choices.map((choice, choiceIndex) => `
                                <div class="choice">
                                    <input type="text" class="choice-input" placeholder="Enter choice text" value="${choice.text}" data-part="${index}" data-choice="${choiceIndex}">
                                    <select class="next-part-select" data-part="${index}" data-choice="${choiceIndex}">
                                        ${storyParts.map((_, i) => `<option value="${i}" ${i === choice.nextPart ? 'selected' : ''}>${storyParts[i].name}</option>`).join('')}
                                    </select>
                                    <button class="remove-choice-btn btn" data-part="${index}" data-choice="${choiceIndex}">Remove Choice</button>
                                </div>
                            `).join('')}
                        </div>
                        <button class="add-choice-btn btn" data-part="${index}">Add Choice</button>
                        <button class="remove-part-btn btn" data-part="${index}">Remove Part</button>
                    </div>
                `).join('');
        
                addStoryPartEventListeners();
                saveToLocalStorage();
            }
        
            // Event Listeners for Story Parts
            function addStoryPartEventListeners() {
                // Part text input with debounce
                document.querySelectorAll('.part-text').forEach(textarea => {
                    let timeoutId;
                    textarea.addEventListener('input', (e) => {
                        clearTimeout(timeoutId);
                        timeoutId = setTimeout(() => {
                            const partIndex = Array.from(elements.storyStructure.children).indexOf(e.target.closest('.story-part'));
                            const oldPart = cloneDeep(storyParts[partIndex]);
                            storyParts[partIndex].text = e.target.value;
                            undoRedoModule.pushAction({ 
                                type: 'edit', 
                                index: partIndex, 
                                oldPart: oldPart,
                                newPart: cloneDeep(storyParts[partIndex])
                            });
                            saveToLocalStorage();
                        }, 500);
                    });
                });
        
                // Add choice
                document.querySelectorAll('.add-choice-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const partIndex = parseInt(e.target.dataset.part);
                        const newChoice = { text: '', nextPart: partIndex };
                        storyParts[partIndex].choices.push(newChoice);
                        undoRedoModule.pushAction({ type: 'addChoice', partIndex: partIndex, choice: newChoice });
                        updateStoryStructure();
                    });
                });
        
                // Choice input and next part select
                document.querySelectorAll('.choice-input, .next-part-select').forEach(element => {
                    element.addEventListener('change', (e) => {
                        const partIndex = parseInt(e.target.dataset.part);
                        const choiceIndex = parseInt(e.target.dataset.choice);
                        const oldChoice = cloneDeep(storyParts[partIndex].choices[choiceIndex]);
                        if (e.target.classList.contains('choice-input')) {
                            storyParts[partIndex].choices[choiceIndex].text = e.target.value;
                        } else {
                            storyParts[partIndex].choices[choiceIndex].nextPart = parseInt(e.target.value);
                        }
                        undoRedoModule.pushAction({ 
                            type: 'editChoice', 
                            partIndex: partIndex, 
                            choiceIndex: choiceIndex, 
                            oldChoice: oldChoice,
                            newChoice: cloneDeep(storyParts[partIndex].choices[choiceIndex])
                        });
                        saveToLocalStorage();
                    });
                });
        
                // Remove choice
                document.querySelectorAll('.remove-choice-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const partIndex = parseInt(e.target.dataset.part);
                        const choiceIndex = parseInt(e.target.dataset.choice);
                        const removedChoice = cloneDeep(storyParts[partIndex].choices[choiceIndex]);
                        storyParts[partIndex].choices.splice(choiceIndex, 1);
                        undoRedoModule.pushAction({ type: 'removeChoice', partIndex: partIndex, choiceIndex: choiceIndex, choice: removedChoice });
                        updateStoryStructure();
                    });
                });
        
                // Remove part
                document.querySelectorAll('.remove-part-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const partIndex = parseInt(e.target.dataset.part);
                        const removedPart = cloneDeep(storyParts[partIndex]);
                        storyParts.splice(partIndex, 1);
                        undoRedoModule.pushAction({ type: 'remove', index: partIndex, part: removedPart });
                        updateStoryStructure();
                    });
                });
        
                // Edit part name
                document.querySelectorAll('.edit-part-name').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const partIndex = parseInt(e.currentTarget.dataset.part);
                        const currentName = storyParts[partIndex].name;
                        let newName = prompt('Enter new name for this part:', currentName);
                        
                        if (newName && newName !== currentName) {
                            if (isPartNameDuplicate(newName, partIndex)) {
                                alert('A part with this name already exists. Please choose a different name.');
                            } else {
                                const oldName = storyParts[partIndex].name;
                                storyParts[partIndex].name = newName;
                                undoRedoModule.pushAction({ type: 'editName', index: partIndex, oldName: oldName, newName: newName });
                                updateStoryStructure();
                            }
                        }
                    });
                });
            }
        
            // Story Management Functions
            function saveStory() {
                const storyData = JSON.stringify(storyParts);
                const blob = new Blob([storyData], {type: 'application/json'});
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'story.json';
                a.click();
                URL.revokeObjectURL(url);
            }
        
            function resetStory() {
                if (confirm('Are you sure you want to reset the story? This action cannot be undone.')) {
                    storyParts = [{ name: 'Part 1', text: '', choices: [] }];
                    currentPart = 0;
                    history = [];
                    undoRedoModule.pushAction({ type: 'reset' });
                    updateStoryStructure();
                    updateStory();
                    localStorage.clear();
                }
            }
        
            function loadStory(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        try {
                            const loadedStoryParts = JSON.parse(e.target.result);
                            undoRedoModule.pushAction({ 
                                type: 'load', 
                                oldStoryParts: cloneDeep(storyParts),
                                newStoryParts: loadedStoryParts
                            });
                            storyParts = loadedStoryParts;
                            updateStoryStructure();
                            resetPlayMode();
                            saveToLocalStorage();
                            alert('Story loaded successfully!');
                        } catch (error) {
                            console.error('Error parsing JSON:', error);
                            alert('Invalid file format. Please select a valid JSON file.');
                        }
                    };
                    reader.readAsText(file);
                }
            }
        
            // UI Management Functions
            function toggleProgress() {
                if (elements.progressContainer) {
                    elements.progressContainer.style.display = elements.progressContainer.style.display === 'none' ? 'block' : 'none';
                    elements.toggleProgressBtn.textContent = elements.progressContainer.style.display === 'none' ? 'Show Progress' : 'Hide Progress';
                }
            }
        
            function resetPlayMode() {
                currentPart = 0;
                history = [];
                updateStory();
                updateHistory();
                if (elements.progressBar) elements.progressBar.style.width = '0%';
                if (elements.progressText) elements.progressText.textContent = 'Part 1';
                if (elements.finalStory) elements.finalStory.style.display = 'none';
                if (elements.storyText) elements.storyText.style.display = 'block';
                if (elements.choicesContainer) elements.choicesContainer.style.display = 'block';
            }
        
            function toggleDarkMode() {
                document.body.classList.toggle('dark-mode');
                const isDarkMode = document.body.classList.contains('dark-mode');
                localStorage.setItem('darkMode', isDarkMode);
                if (elements.darkModeToggle) elements.darkModeToggle.textContent = isDarkMode ? '☀️' : '🌙';
                updateMenuOptions();
            }
        
            // Story Playback Functions
            function updateStory() {
                if (!elements.storyText || !elements.choicesContainer) return;
        
                const part = storyParts[currentPart];
                elements.storyText.textContent = part.text;
                elements.choicesContainer.innerHTML = part.choices.map((choice, index) => `
                    <button class="choice-btn" data-index="${index}">${choice.text}</button>
                `).join('');
        
                document.querySelectorAll('.choice-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const choiceIndex = parseInt(e.target.dataset.index);
                        const choice = part.choices[choiceIndex];
                        
                        if (choice.nextPart === currentPart) {
                            alert('This choice leads back to the same part. Please assign a different next part to avoid loops.');
                            return;
                        } else if (choice.nextPart >= storyParts.length) {
                            alert('This choice leads to a non-existent part. Please create the next part or assign a valid existing part.');
                            return;
                        }
        
                        history.push({ part: currentPart, choice: choiceIndex });
                        currentPart = choice.nextPart;
                        updateStory();
                        updateHistory();
                        updateProgress();
                    });
                });
        
                if (part.choices.length === 0) {
                    if (elements.finalStory) {
                        elements.finalStory.style.display = 'block';
                        elements.finalStory.textContent = history.map(h => storyParts[h.part].text).join('\n\n');
                    }
                } else {
                    if (elements.finalStory) elements.finalStory.style.display = 'none';
                }
            }
        
            function updateHistory() {
                if (!elements.historyText) return;
                elements.historyText.innerHTML = history.map((h, index) => `
                    <p>
                        <strong>Part ${index + 1}:</strong> ${storyParts[h.part].text}<br>
                        <em>Choice: ${storyParts[h.part].choices[h.choice].text}</em>
                    </p>
                `).join('');
            }
        
            function updateProgress() {
                if (!elements.progressBar || !elements.progressText) return;
                const progress = (currentPart + 1) / storyParts.length;
                elements.progressBar.style.width = `${progress * 100}%`;
                elements.progressText.textContent = `Part ${currentPart + 1} of ${storyParts.length}`;
            }
        
            // Event Listeners
            if (elements.modeToggle) {
                elements.modeToggle.addEventListener('click', () => {
                    elements.creatorMode.classList.toggle('hidden');
                    elements.playerMode.classList.toggle('hidden');
                    elements.modeToggle.textContent = elements.creatorMode.classList.contains('hidden') ? 'Switch to Creator Mode' : 'Switch to Play Mode';
                    if (!elements.creatorMode.classList.contains('hidden')) {
                        updateStoryStructure();
                    } else {
                        resetPlayMode();
                    }
                });
            }
        
            if (elements.addPartBtn) {
                elements.addPartBtn.addEventListener('click', () => {
                    const newPartNumber = storyParts.length + 1;
                    const newPart = { name: `Part ${newPartNumber}`, text: '', choices: [] };
                    storyParts.push(newPart);
                    undoRedoModule.pushAction({ type: 'add', part: newPart });
                    updateStoryStructure();
                });
            }
        
            if (elements.saveBtn) elements.saveBtn.addEventListener('click', saveStory);
            if (elements.resetBtn) elements.resetBtn.addEventListener('click', resetStory);
            if (elements.loadBtn) elements.loadBtn.addEventListener('click', () => elements.fileInput.click());
            if (elements.fileInput) elements.fileInput.addEventListener('change', loadStory);
            if (elements.toggleProgressBtn) elements.toggleProgressBtn.addEventListener('click', toggleProgress);
            if (elements.replayBtn) elements.replayBtn.addEventListener('click', resetPlayMode);
            if (elements.darkModeToggle) elements.darkModeToggle.addEventListener('click', toggleDarkMode);
            if (elements.undoBtn) elements.undoBtn.addEventListener('click', () => {
                const actionData = undoRedoModule.undo();
                if (actionData) applyAction(actionData);
            });
            if (elements.redoBtn) elements.redoBtn.addEventListener('click', () => {
                const actionData = undoRedoModule.redo();
                if (actionData) applyAction(actionData);
            });
        
            // Keyboard shortcuts for undo and redo
            document.addEventListener('keydown', (e) => {
                if (e.ctrlKey && e.key === 'z') {
                    e.preventDefault();
                    const actionData = undoRedoModule.undo();
                    if (actionData) applyAction(actionData);
                } else if (e.ctrlKey && e.key === 'y') {
                    e.preventDefault();
                    const actionData = undoRedoModule.redo();
                    if (actionData) applyAction(actionData);
                }
            });
        
            // Mouse tracking for darkening effect
            if (elements.content) {
                elements.content.addEventListener('mousemove', (e) => {
                    const rect = elements.content.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    elements.content.style.setProperty('--mouse-x', `${x}px`);
                    elements.content.style.setProperty('--mouse-y', `${y}px`);
                });
            }
        
            // Author preview functionality
            const authorLink = document.getElementById('author-link');
            const authorPreview = document.getElementById('author-preview');
        
            let previewTimeout;
        
            authorLink.addEventListener('mouseenter', () => {
                clearTimeout(previewTimeout);
                authorPreview.style.display = 'block';
            });
        
            authorLink.addEventListener('mouseleave', () => {
                previewTimeout = setTimeout(() => {
                    if (!authorPreview.matches(':hover')) {
                        authorPreview.style.display = 'none';
                    }
                }, 50);
            });
        
            authorPreview.addEventListener('mouseenter', () => {
                clearTimeout(previewTimeout);
            });
        
            authorPreview.addEventListener('mouseleave', () => {
                authorPreview.style.display = 'none';
            });
        
            // Menu functionality
            const menuToggle = document.getElementById('menu-toggle');
            const dropdownMenu = document.getElementById('dropdown-menu');
        
            if (menuToggle && dropdownMenu) {
                menuToggle.addEventListener('click', function() {
                    dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
                });
        
                // Close the menu when clicking outside
                window.addEventListener('click', function(event) {
                    if (!event.target.matches('.menu-toggle') && !event.target.closest('.dropdown-menu')) {
                        dropdownMenu.style.display = 'none';
                    }
                });
            }
        
            // Function to update menu options
            function updateMenuOptions() {
                if (document.body.classList.contains('dark-mode')) {
                    if (!document.getElementById('disable-darkening')) {
                        const disableDarkeningOption = document.createElement('a');
                        disableDarkeningOption.href = '#';
                        disableDarkeningOption.id = 'disable-darkening';
                        disableDarkeningOption.className = 'menu-button';
                        disableDarkeningOption.textContent = document.body.classList.contains('disable-darkening') ? 'Enable Mouse Darkening' : 'Disable Mouse Darkening';
                        dropdownMenu.appendChild(disableDarkeningOption);
        
                        const highContrastOption = document.createElement('a');
                        highContrastOption.href = '#';
                        highContrastOption.id = 'high-contrast-mode';
                        highContrastOption.className = 'menu-button';
                        highContrastOption.textContent = document.body.classList.contains('high-contrast') ? 'Normal Contrast Mode' : 'High Contrast Mode';
                        dropdownMenu.appendChild(highContrastOption);
                    }
                } else {
                    const disableDarkeningOption = document.getElementById('disable-darkening');
                    const highContrastOption = document.getElementById('high-contrast-mode');
                    if (disableDarkeningOption) dropdownMenu.removeChild(disableDarkeningOption);
                    if (highContrastOption) dropdownMenu.removeChild(highContrastOption);
                }
            }
        
            // Event listeners for new options
            dropdownMenu.addEventListener('click', function(e) {
                if (e.target.id === 'disable-darkening') {
                    document.body.classList.toggle('disable-darkening');
                    e.target.textContent = document.body.classList.contains('disable-darkening') ? 'Enable Mouse Darkening' : 'Disable Mouse Darkening';
                    savePreferences();
                } else if (e.target.id === 'high-contrast-mode') {
                    document.body.classList.toggle('high-contrast');
                    e.target.textContent = document.body.classList.contains('high-contrast') ? 'Normal Contrast Mode' : 'High Contrast Mode';
                    savePreferences();
                }
            });
        
            // Remove unwanted tooltip on the right
            const styleElement = document.createElement('style');
            styleElement.textContent = `
                .edit-part-name::after {
                    content: none;
                }
            `;
            document.head.appendChild(styleElement);
        
            // Load and save preferences
            function loadPreferences() {
                const disableDarkening = localStorage.getItem('disableDarkening') === 'true';
                const highContrast = localStorage.getItem('highContrast') === 'true';
        
                if (disableDarkening) {
                    document.body.classList.add('disable-darkening');
                }
                if (highContrast) {
                    document.body.classList.add('high-contrast');
                }
                updateMenuOptions();
            }
        
            function savePreferences() {
                localStorage.setItem('disableDarkening', document.body.classList.contains('disable-darkening'));
                localStorage.setItem('highContrast', document.body.classList.contains('high-contrast'));
            }
        
            // Initial call to set up menu and load preferences
            loadPreferences();
            loadFromLocalStorage();
            updateStoryStructure();
            updateStory();
        
            // Check for saved dark mode preference
            if (localStorage.getItem('darkMode') === 'true') {
                document.body.classList.add('dark-mode');
                if (elements.darkModeToggle) elements.darkModeToggle.textContent = '☀️';
                updateMenuOptions();
            }
        });
        document.querySelectorAll('.tooltip-btn').forEach(btn => {
            btn.removeAttribute('title'); // Remove the default title attribute
        });
        </script>
</body>
</html>
 . In the following code I'd like you to make changes. I just have a limited amount of messages that I can send so please be useful and try to do work first of all accurately but then in like 1-2 attempts if possible. Thanks. So I'll try to be as descriptive as possible, so please stick to the prompts and also do not introduce and bloats or system glitches. I'd like to have a "node mode" as a text on the right of the div with class container in (index.html) which only appears in Story Creator mode. In Story Player mode, it disappears. Clicking on it opens like a canvas with functioning undo and redo options (also can be used using keyboard shortcuts), "Talescaper", "Back". First of all, all changes should be locally saved. Now here, in the canvas, you can drag and drop elements from a plus button at the bottom. The button make a block appears which is like a text area. It should be draggable. Anything you write in it, in real time gets saved as a story part in the Creator Mode. Clicking on plus button again adds a new block hence a new story part.  You can connect story parts using nodes. It should be a system like Unreal Engine or the Unity Animation nodes. So The nodes and like represent by lines (dynamically curved for accessibility and these should appear behind blocks). These nodes are used to connect two or mode story parts. These nodes appear and work when you double click on a block and drag them to the required block hence creating a connection. In the middle of every node is a smaller block for options. So you can customize the options and blocks to make it easier to make stories as they show the story visually using representation like a flowchart. These changes reflect upon the Story creator mode and vice versa. Visually the theme of this node mode should be fixed in a dark theme.