Adding a FAQ Page

css/faq.css

@@ -0,0 +1,210 @@
+* {
+    color: white;
+    font-size: 16px;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    margin: auto;
+    background-color: black;
+    font-family: 'Playfair Display', serif;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#particles-js {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
+.snowflakes {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: -1;
+}
+
+.snowflake {
+    position: absolute;
+    width: 0.3rem;
+    height: 0.5rem;
+    background-color: #ffffffec;
+    animation: snowfall linear infinite;
+    animation-duration: 5s;
+    border-radius: 50%;
+    opacity: 0.7;
+}
+
+@keyframes snowfall {
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(600px);
+    }
+}
+
+.navHeader {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    background-color: #3f1515;
+    z-index: 100;
+}
+
+.navHeader nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+}
+
+.navHeader .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.navHeader .navMain {
+    display: flex;
+    align-items: center;
+}
+
+.navHeader .sidebarOne {
+    display: flex;
+    align-items: center;
+}
+
+.navHeader .sidebarOne li {
+    margin: 0 10px;
+}
+
+.navHeader .sidebarOne .cross i {
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.navHeader .sidebarOne .logo img {
+    height: 40px;
+}
+
+.navHeader .sidebarOne a {
+    color: #fff;
+    text-decoration: none;
+    padding: 8px 15px;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.navHeader .sidebarOne a:hover {
+    background-color: #5e0b0b;
+}
+
+.faqBox {
+    background: #1c1c1c;
+    border-radius: 10px;
+    margin: 20px;
+    padding: 20px;
+    transition: background 0.3s;
+}
+
+.faqBox:hover {
+    background: #292929;
+}
+
+.faqBox .question {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: #f09819;
+}
+
+.faqBox .answer {
+    font-size: 18px;
+    line-height: 1.5;
+    color: #ddd;
+}
+
+.footer {
+    text-align: center;
+    padding: 20px;
+    background: #3f1515;
+    position: relative;
+    bottom: 0;
+    width: 100%;
+}
+
+.footer .socialIcons {
+    margin-bottom: 10px;
+}
+
+.footer .icons a {
+    color: #fff;
+    font-size: 24px;
+    margin: 0 10px;
+    transition: color 0.3s;
+}
+
+.footer .icons a:hover {
+    color: #f09819;
+}
+
+#accountNotAvailableModal {
+    display: none;
+    position: fixed;
+    z-index: 9999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.9);
+}
+
+.account-not-available-modal-content {
+    background-color: #1c1c1c;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 600px;
+    color: #fff;
+    text-align: center;
+    border-radius: 10px;
+}
+
+.account-not-available-modal-content h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #f09819;
+}
+
+.account-not-available-modal-content p {
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+.account-not-available-modal-content .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.account-not-available-modal-content .close:hover,
+.account-not-available-modal-content .close:focus {
+    color: #f09819;
+    text-decoration: none;
+    cursor: pointer;
+}

index.html

@@ -71,6 +71,7 @@ <h2>Edit Options</h2>
           <li><a href="pages/about.html">About</a></li>
           <li><a href="pages/features.html">Features</a></li>
           <li><a href="./Login/index1.html">Step In</a></li>
+          <li><a href="./pages/faq.html">FAQ</a></li>
           <li><a href="pages/feedback.html">Feedback</a></li>
           <li><a href="#" id="google_translate_element"></a></li>
         </ul>

pages/about.html

@@ -58,7 +58,7 @@
         </div>
     </div>
     <div class="box" id="box">
-        <a href="/index.html" class="backbtn"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
+        <a href="../index.html" class="backbtn"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
         <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px; color: #ffffff; display: block;">
             About
         </h1>

pages/faq.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FAQ - Random Disco Light Simulator</title>
+    <link rel="icon" href="../assets/images/favicon/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="../css/style.css">
+    <link rel="stylesheet" href="../css/faq.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+</head>
+<body>
+    <div>
+        <button id="backToTopBtn" title="Back to Top" aria-label="Back to Top"><i class="fas fa-arrow-up"></i></button>
+    </div>
+    <div class="snowflakes" style="display: block;">
+        <div id="particles-js"></div>
+    </div>
+    <div class="navHeader">
+        <div class="header-content">
+            <nav>
+                <button id="muteBtn" class="mute-btn" style="display: none;">
+                    <i id="muteIcon" class="fas fa-volume-up"></i>
+                </button>
+                <ul class="navMain">
+                    <li><a href="../index.html" class="back-button"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</a></li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+    <div class="box" id="box">
+        <a href="../index.html" class="back-button"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
+        <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 40px; color: #f09819; display: block;">
+            FAQ
+        </h1>
+        <div class="faqBox">
+            <div class="question">What is the Random Disco Light Simulator?</div>
+            <div class="answer">The Random Disco Light Simulator is a fun and interactive project that brings the excitement of a disco dance floor to your screen. Whether you're a developer, a party enthusiast, or just curious, this simulator is designed to brighten up your day!</div>
+        </div>
+        <div class="faqBox">
+            <div class="question">How do I change the colors?</div>
+            <div class="answer">You can specify the number of random colors you want to be shown, set the interval (in milliseconds) at which the colors should change, and choose from conic, linear, or radial views to customize the visual effect.</div>
+        </div>
+        <div class="faqBox">
+            <div class="question">Can I add a countdown timer?</div>
+            <div class="answer">Yes, you can set a timer (in seconds) for how long the simulation should run. Additionally, you can optionally add a sound effect to enhance the disco experience.</div>
+        </div>
+        <div class="faqBox">
+            <div class="question">What are some example settings?</div>
+            <div class="answer">Try these input combinations and see the magic unfold: 1000 colors, 1 millisecond interval, conic view, 60 seconds timer. Experiment with different settings and have fun creating your own disco light show!</div>
+        </div>
+        <div class="faqBox">
+            <div class="question">Can I customize the light patterns?</div>
+            <div class="answer">Yes, you can customize the light patterns by selecting different modes and intervals. This allows you to create unique and mesmerizing disco light shows.</div>
+        </div>
+        <div class="faqBox">
+            <div class="question">Is there a way to save my settings?</div>
+            <div class="answer">Currently, there is no built-in feature to save settings, but you can manually note down your preferred settings to reuse them later.</div>
+        </div>
+        <div class="faqBox">
+            <div class="question">Does the simulator work on mobile devices?</div>
+            <div class="answer">Yes, the Random Disco Light Simulator is designed to work on various devices, including desktops, tablets, and mobile phones. However, performance may vary based on the device's capabilities.</div>
+        </div>
+        <div class="faqBox">
+            <div class="question">Can I share my disco light show with friends?</div>
+            <div class="answer">Yes, you can share your disco light show by sharing the URL with your friends. They can visit the same link to experience the light show you have created.</div>
+        </div>
+    </div>
+    <footer class="footer">
+        <div class="socialIcons">
+            <span class="icons">
+                <a href="" aria-label="Linkedin" title="linkedin"><i class="fab fa-linkedin ico"></i></a>
+            </span>
+            <span class="icons">
+                <a href="" aria-label="Instagram" title="instagram"><i class="fa-brands fa-instagram ico"></i></a>
+            </span>
+            <span class="icons">
+                <a href="https://github.com/sk66641/Random-Disco-Light-Simulator" title="github">
+                    <i class="fab fa-github ico"></i>
+                </a>
+            </span>
+            <span class="icons">
+                <a href="" aria-label="X" title="Twitter"><i class="fa-brands fa-x-twitter ico"></i></a>
+            </span>
+            <span class="icons">
+                <a href="" aria-label="Discord" title="discord"><i class="fa-brands fa-discord ico"></i></a>
+            </span>
+        </div>
+        <div class="copyright">
+            <p class="copyright" style="text-align: center">
+                &copy;
+                <script>document.write(new Date().getFullYear())</script> Random-Disco-Light-Simulator. All rights reserved.
+            </p>
+        </div>
+    </footer>
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="../js/background.js"></script>
+    <script src="../js/script.js"></script>
+    <script src="../js/backToTopBtn.js"></script> 
+    <script src="../js/social.js"></script> 
+    <div id="accountNotAvailableModal" class="account-not-available-modal">
+        <div class="account-not-available-modal-content">
+            <span class="close" id="closeAccountNotAvailableModal">&times;</span>
+            <h2>Account Not Available</h2>
+            <p>We apologize for the inconvenience, but our social media accounts are currently unavailable. We are working diligently to bring them online as soon as possible.</p>
+            <p>In the meantime, if you have any questions or need assistance, please feel free to reach out to us through our website's feedback form. We appreciate your understanding and patience during this time.</p>
+            <p>Thank you for your continued support!</p>
+        </div>
+    </div>
+</body>
+</html>

pages/features.html

@@ -61,7 +61,7 @@
         </div>
     </div>
     <div class="box" id="box">
-        <a href="/index.html" class="backbtn"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
+        <a href="../index.html" class="backbtn"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
         <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 30px; color: #ffffff;">
             Features
         </h1>