Removed quest files from quest folder

app/src/pages/QuestsPage.js

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import NavigationPanel from "../components/NavigationPanel";
+import Frame from "../components/TopPanel";
+import PageContent from "../components/PageContent";
+import styles from "./QuestsPage.module.css";
+
+const QuestsPage = () => {
+  // State to manage all quests
+  const [quests, setQuests] = useState([{ title: "Sample Title", text: "Sample Text" }]);
+  // State to manage quests in progress
+  const [inProgressQuests, setInProgressQuests] = useState([]);
+
+  // Function to add a new empty quest
+  const addQuest = () => {
+    setQuests([...quests, { title: "", text: "" }]);
+  };
+
+  // Function to handle changes in quest title
+  const handleTitleChange = (index, event) => {
+    const newQuests = [...quests];
+    newQuests[index].title = event.target.value;
+    setQuests(newQuests);
+  };
+
+  // Function to handle changes in quest description
+  const handleTextChange = (index, event) => {
+    const newQuests = [...quests];
+    newQuests[index].text = event.target.value;
+    setQuests(newQuests);
+  };
+
+  // Function to move a quest from available quests to in progress quests
+  const addQuestToInProgress = () => {
+    if (quests.length > 0) {
+      // Move the first quest from available quests to in progress quests
+      setInProgressQuests([quests[0]]);
+      // Remove the first quest from available quests
+      setQuests(quests.slice(1));
+    }
+  };
+
+  return (
+    <div className={styles.QuestsPage}>
+      <NavigationPanel />
+      <label className={styles.pageLabel} htmlFor="page_label">
+        <div className={styles.questsPageTitle}>Quests Page</div>
+      </label>
+      <Frame />
+      <PageContent
+        pageContentHeight="511px"
+        pageContentPosition="absolute"
+        pageContentTop="178px"
+        pageContentLeft="26px"
+      />
+      {/* In progress quests section */}
+      <div className={`${styles.questSection} ${styles.inProgressQuests}`}>
+        <h2 className={styles.questTitle}>In Progress Quests</h2>
+        {inProgressQuests.length === 0 && <p>No quests in progress</p>}
+        {/* Render quests in progress */}
+        {inProgressQuests.map((quest, index) => (
+          <div key={index} className={styles.questBlock}>
+            <h3 className={styles.questBlockTitle}>{quest.title}</h3>
+            <p className={styles.questBlockText}>{quest.text}</p>
+          </div>
+        ))}
+      </div>
+      {/* Available quests section */}
+      <div className={`${styles.questSection} ${styles.availableQuests}`}>
+        <h2 className={styles.questTitle}>Available Quests</h2>
+        {quests.length === 0 && <p>No available quests</p>}
+        {/* Render available quests */}
+        {quests.map((quest, index) => (
+          <div key={index} className={styles.questBlock}>
+            <input
+              type="text"
+              value={quest.title}
+              onChange={(event) => handleTitleChange(index, event)}
+              placeholder="Quest Title"
+              className={styles.questBlockTitle}
+            />
+            <textarea
+              value={quest.text}
+              onChange={(event) => handleTextChange(index, event)}
+              placeholder="Quest Description"
+              className={styles.questBlockText}
+            />
+          </div>
+        ))}
+        {/* Button to add a quest to In Progress Quests */}
+        {quests.length > 0 && <button onClick={addQuestToInProgress} className={styles.button}>Add Quest</button>}
+      </div>
+    </div>
+  );
+};
+export default QuestsPage;

app/src/pages/QuestsPage.module.css

@@ -0,0 +1,116 @@
+.questsPageTitle {
+    text-align: left;
+    font-size: 32px;
+    align-self: stretch;
+    position: relative;
+    font-weight: 900;
+    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+}
+.pageLabel {
+    cursor: pointer;
+    position: absolute;
+    top: 128px;
+    left: 17px;
+    width: 366px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+}
+.QuestsPage {
+    width: 100%;
+    height: 852px;
+    position: relative;
+    border: 2px solid var(--color-black);
+    box-sizing: border-box;
+    overflow: hidden;
+    min-width: 393px;
+    max-width: 393px;
+    min-height: 852px;
+    max-height: 852px;
+    color: var(--color-black);
+    font-family: var(--font-roboto);
+}
+@media screen and (max-width: 1200px) {
+    .QuestsPage {
+        height: 852px;
+        min-width: 393px;
+        max-width: 393px;
+        min-height: 852px;
+        max-height: 852px;
+    }
+}
+.button {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 18px;
+    margin-top: 20px;
+}
+
+.questSection {
+    padding: 10px;
+  }
+
+.questTitle {
+    text-align: left;
+    font-size: 16px;
+}
+
+.questBlock {
+    background-color: rgb(79, 116, 176);
+    display: block;
+    height: auto; /* allows content to determine height*/
+    margin-top: 20px;
+    margin-right: 1%;
+    margin-left: 1%;
+    overflow: hidden;
+    padding: 10px;
+    box-sizing: border-box; /* adds padding to width and height */
+    border-radius: 25px;
+}
+
+.questBlockTitle {
+
+}
+
+.questBlockText{
+
+}
+
+.inProgressQuests {
+    margin-top: 200px;
+    background-color: rgb(127, 127, 127);
+    display: block;
+    padding: 25px;
+    box-sizing: border-box; /* adds padding to width and height */
+    border-radius: 25px 25px 0px 0px;
+    font-size: smaller;
+    color: white; /* Text color */
+}
+
+.availableQuests {
+    background-color: rgb(137, 136, 176);
+    display: block;
+    padding: 25px;
+    padding-bottom: 100px;
+    box-sizing: border-box; /* adds padding to width and height */
+    border-radius: 0px 0px 25px 25px;
+    font-size: smaller;
+    color: white; /* Text color */
+}
+
+.button {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 18px;
+    position: absolute; 
+  }