Fixes #106

frontend/src/App.js

@@ -10,6 +10,7 @@ import './App.css';
 import PrivateComponent from './components/PrivateComp/PrivateComponent';
 import Logout from './components/Logout/logout';
 import PublicRoute from './components/PublicRoute/PublicRoute';
+import VideoComponent from './components/UserGuide/UserGuide';
 
 function App() {
   const location = useLocation();
@@ -31,6 +32,7 @@ function App() {
         <Route element={<PrivateComponent />}>
           <Route path="/generate" element={<Generate />} />
           <Route path="/feedback" element={<Feedback />} />
+          <Route path="/userguide" element={<VideoComponent />}/>
         </Route>
 
         {/* Default and other routes */}

frontend/src/components/Nav/Navbar.js

@@ -32,14 +32,14 @@ const Navbar = () => {
           <>
             <Link to="/logout">LOGOUT</Link>
             <Link to="/generate">GENERATE</Link>
-            <Link to="/my-comics">MY COMICS</Link>
+            <Link to="/userguide">USER GUIDE</Link>
             <Link to="/feedback">FEEDBACK</Link>
           </>
         ) : (
           <>
             <Link to="/signup">SIGNUP</Link>
             <Link to="/generate">GENERATE</Link>
-            <Link to="/my-comics">MY COMICS</Link>
+            <Link to="/userguide">USER GUIDE</Link>
             <Link to="/feedback">FEEDBACK</Link>
           </>
         )}

frontend/src/components/UserGuide/UserGuide.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import videoSrc from '../../assets/guide.mp4'; // Adjust the path as necessary
+import './userguide.css'; // Import the CSS file
+
+const VideoComponent = () => {
+  return (
+    <div>
+      <div className="video-container">
+        <h1>A Wizard's Guide To Crafting Magic</h1>
+        <video controls width="700" className="video">
+          <source src={videoSrc} type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      </div>
+      <hr />
+      <div className="sections-container">
+        <div className="section characters-section">
+          <h2 className="characters-heading">Characters</h2>
+          <ul className="characters-list">
+            <li>Create up to 3 characters for your tale.</li>
+            <li>Provide only the <b>physical description</b> of the characters and not the actions.</li>
+            <li>Take note of the spellings, uppercase/lowercase details, etc.</li>
+          </ul>
+        </div>
+        <div className="section scenes-section">
+          <h2 className="scenes-heading">Scenes</h2>
+          <ul className="scenes-list">
+            <li>Create up to 6 scenes for your comic.</li>
+            <li><b>DO NOT</b> use any pronouns like 'he/she/they/them' for scene descriptions. Stick to character names.</li>
+            <li>Do not reference previous scenes. Build each scene like a new one, with detailed descriptions.</li>
+          </ul>
+        </div>
+        <div className="section storyboard-section">
+          <h2 className="storyboard-heading">Storyboard</h2>
+          <ul className="storyboard-list">
+            <li>Provide the email ID at which you wish to receive the generated comic.The specified email may or may not be the same as the email used for account creation.</li>
+            <li>Only Gmail addresses (ending in @gmail.com) are allowed.Other email providers are not supported.</li>
+            <li>Describe the storyline in a way that gives an overview and sums up all the scenes thus interconnecting them.</li>
+          </ul>
+        </div>
+      </div>
+      <div className="instructions-container">
+      <h2 className="instructions-heading">Instructions for the Right Pane</h2>
+        <ul className="instructions-list">
+          <li>Click the buttons in a sequential order only <br /> <i>Generate Character --> Download --> Click to Craft your Comic </i></li>
+          <li>This section will take time to bring in your best results, so hang in tight!</li>
+          <li>Once the loading screen disappears, you are free to click the next button.</li>
+          <li>Download feature gives you a sneak peek of what is cooking for you!</li>
+          <li>Once a comic is done, refresh the page to craft another comic.</li>
+        </ul>
+      </div>
+      <div className="happy-crafting-container">
+        <h1>Happy Crafting!</h1>
+      </div>
+    </div>
+  );
+};
+
+export default VideoComponent;

frontend/src/components/UserGuide/userguide.css

@@ -0,0 +1,145 @@
+.video-container {
+    text-align: center;
+    color: #C08552;
+    font-size: 1.6rem;
+    font-weight: bolder;
+    font-family: "Comic Sans MS", cursive, sans-serif;
+    text-shadow: -3px 0px 0px #000, 1px -1px 0 #000, -1px 1px 0 #000,
+    1px 1px 0 #000;
+}
+
+.video {
+    display: block;
+    margin: 0 auto;
+}
+
+.sections-container {
+    display: flex;
+    justify-content: space-between;
+    margin: 20px; /* Space around the container */
+}
+
+.section {
+    flex: 1;
+    padding: 20px; /* Space inside each section */
+    margin: 0 10px; /* Space between each section */
+    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
+    background: linear-gradient(to bottom right, #f0f0f0, #476A6F); /* Gradient background for sections */
+    border-radius: 10px; /* Rounded corners for the sections */
+    border: 1px solid #ddd; /* Border for the sections */
+}
+
+.section:not(:last-child) {
+    border-right: 1px solid #ccc;
+}
+
+/* Specific styles for Characters section */
+.characters-heading {
+    font-size: 1.5rem; /* Increase font size */
+    font-weight: 700; /* Increase font weight */
+    color: #000000; /* Text color */
+    background: linear-gradient(to right, #F08700, #F08700); /* Gradient text background */
+    -webkit-background-clip: text; /* Clips the background to the text */
+    color: transparent; /* Makes text color transparent to show gradient */
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Text shadow */
+}
+
+.characters-list {
+    list-style-type: disc; /* Default bullet points for sections */
+    padding-left: 20px;
+}
+
+.characters-list li {
+    font-size: 1rem; /* Font size for list items */
+    color: #000000; /* Text color */
+    margin-bottom: 10px; /* Space between list items */
+}
+
+/* Specific styles for Scenes section */
+.scenes-heading {
+    font-size: 1.5rem; /* Increase font size */
+    font-weight: 700; /* Increase font weight */
+    color: #000000; /* Text color */
+    background: linear-gradient(to right, #F08700, #F08700); /* Gradient text background */
+    -webkit-background-clip: text; /* Clips the background to the text */
+    color: transparent; /* Makes text color transparent to show gradient */
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Text shadow */
+}
+
+.scenes-list {
+    list-style-type: disc; /* Default bullet points for sections */
+    padding-left: 20px;
+}
+
+.scenes-list li {
+    font-size: 1rem; /* Font size for list items */
+    color: #000000; /* Text color */
+    margin-bottom: 10px; /* Space between list items */
+}
+
+/* Specific styles for Storyboard section */
+.storyboard-heading {
+    font-size: 1.5rem; /* Increase font size */
+    font-weight: 700; /* Increase font weight */
+    color: #000000; /* Text color */
+    background: linear-gradient(to right, #F08700, #F08700); /* Gradient text background */
+    -webkit-background-clip: text; /* Clips the background to the text */
+    color: transparent; /* Makes text color transparent to show gradient */
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Text shadow */
+}
+
+.storyboard-list {
+    list-style-type: disc; /* Default bullet points for sections */
+    padding-left: 20px;
+}
+
+.storyboard-list li {
+    font-size: 1rem; /* Font size for list items */
+    color: #000000; /* Text color */
+    margin-bottom: 10px; /* Space between list items */
+}
+
+/* Specific styles for Instructions section */
+.instructions-container {
+    text-align: center;
+    margin: 20px; /* Space around the container */
+    background: linear-gradient(to bottom right, #f0f0f0, #476A6F); /* Consistent gradient background */
+    padding: 20px; /* Space inside the container */
+    border-radius: 10px; /* Rounded corners */
+    border: 1px solid #ddd; /* Border for the container */
+}
+
+.instructions-heading {
+    font-size: 1.5rem; /* Font size for heading */
+    font-weight: 700; /* Increase font weight */
+    background: linear-gradient(to right, #F08700, #F08700); /* Gradient text background */
+    -webkit-background-clip: text; /* Clips the background to the text */
+    color: transparent; /* Makes text color transparent to show gradient */
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Text shadow */
+}
+
+.instructions-list {
+    list-style-type: none; /* Remove bullets */
+    padding-left: 0; /* Remove left padding */
+}
+
+.instructions-list li {
+    font-size: 1rem; /* Font size for list items */
+    color: #000000; /* Text color */
+    margin-bottom: 10px; /* Space between list items */
+}
+
+.happy-crafting-container { 
+    padding: 20px; /* Space inside the container */
+}
+
+.happy-crafting-container h1 {
+    text-align: center;
+    font-size: 3rem; /* Font size for heading */
+    background: linear-gradient(to right, #c84f03, #E9B44C); /* Gradient text background */
+    margin: 0; /* Remove margin */
+    font-weight: bolder;
+    font-family: "Comic Sans MS", cursive, sans-serif;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Text shadow */
+    font-style: italic;
+}