From d8e4a2f96c32771c4836df23173f3ea609732d4d Mon Sep 17 00:00:00 2001 From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com> Date: Wed, 10 Jul 2024 12:37:00 +0530 Subject: [PATCH] Adding a FAQ Page --- css/faq.css | 210 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + pages/about.html | 2 +- pages/faq.html | 114 ++++++++++++++++++++++++ pages/features.html | 2 +- 5 files changed, 327 insertions(+), 2 deletions(-) create mode 100644 css/faq.css create mode 100644 pages/faq.html diff --git a/css/faq.css b/css/faq.css new file mode 100644 index 0000000..a9c4a7e --- /dev/null +++ b/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; +} diff --git a/index.html b/index.html index bca40f5..f300dc5 100644 --- a/index.html +++ b/index.html @@ -71,6 +71,7 @@

Edit Options

  • About
  • Features
  • Step In
    • +
  • FAQ
  • Feedback
    • diff --git a/pages/about.html b/pages/about.html index 0174332..d53aa41 100644 --- a/pages/about.html +++ b/pages/about.html @@ -58,7 +58,7 @@
    - +

    About

    diff --git a/pages/faq.html b/pages/faq.html new file mode 100644 index 0000000..8ecaf85 --- /dev/null +++ b/pages/faq.html @@ -0,0 +1,114 @@ + + + + + + FAQ - Random Disco Light Simulator + + + + + + + +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +

    + FAQ +

    +
    +
    What is the Random Disco Light Simulator?
    +
    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!
    +
    +
    +
    How do I change the colors?
    +
    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.
    +
    +
    +
    Can I add a countdown timer?
    +
    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.
    +
    +
    +
    What are some example settings?
    +
    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!
    +
    +
    +
    Can I customize the light patterns?
    +
    Yes, you can customize the light patterns by selecting different modes and intervals. This allows you to create unique and mesmerizing disco light shows.
    +
    +
    +
    Is there a way to save my settings?
    +
    Currently, there is no built-in feature to save settings, but you can manually note down your preferred settings to reuse them later.
    +
    +
    +
    Does the simulator work on mobile devices?
    +
    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.
    +
    +
    +
    Can I share my disco light show with friends?
    +
    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.
    +
    +
    + + + + + + +
    + +
    + + diff --git a/pages/features.html b/pages/features.html index c21eca0..d2f8fa6 100644 --- a/pages/features.html +++ b/pages/features.html @@ -61,7 +61,7 @@
    - +

    Features