FAQs.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="FAQs.css" />
    <title>Alien Invasion Defense - FAQ</title>
    <link rel="icon" href="favicon.png" type="image/x-icon" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
    />

    <style>

      /* General Body Styling */

    body {

cursor: none; /* Hide the default cursor */

}

/* Cursor Tail Effect - the small dots trailing behind */
.cursor-tail {

position: absolute;
width: 11px;  /* Small dot */
height: 11px;
background-color: rgba(63, 228, 253, 0.8); /* Neon green tail */
border-radius: 50%;
pointer-events: none; /* Ensure the trail doesn't interfere with clicks */
z-index: 9999;
transform: translate(-50%, -50%);
animation: trail 0.5s forwards;

}

/* Tail Effect Animation - Fades and shrinks */
@keyframes trail {

0% {
  transform: scale(1) translate(-50%, -50%);
  opacity: 1;
}
100% {
  transform: scale(0) translate(-50%, -50%);
  opacity: 0;
}

}

/* Sample content to make sure scrolling works */
.content {

height: 200vh; /* Make the page taller to enable scrolling */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

}


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

      html::-webkit-scrollbar-track {
        background: #0e1126;
      }

      html::-webkit-scrollbar-thumb {
        background: linear-gradient(45deg, #0ff0fc, #f72585);
        border-radius: 10px;
      }

      html::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(45deg, #f72585, #7209b7);
      }

      /* Mozilla Firefox scrollbar */
      html {
        scrollbar-color: #0ff0fc #0e1126;
        scrollbar-width: 20px;
      }

      /* Scroll Up Button Styles */
      #scrollUpBtn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 80px;
        background-color: #007bff;
        color: #fff;
        padding: 15px 20px;
        border: none;
        border-radius: 30px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        font-size: 18px;
        transition: all 0.3s ease;
        cursor: pointer;
        z-index: 1000;
      }

      /* Hover Effect */
      #scrollUpBtn:hover {
        background-color: #0056b3;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <!-- on scroll progress bar -->
    <div class="progress-bar-container">
      <div class="progress-bar" id="progress-bar-faqs"></div>
    </div>

    <div class="home-nav">
      <a href="/"
        ><i class="fa-solid fa-arrow-left-long"></i>&nbsp; Return to Home</a
      >
      <style>
        .home-nav a {
          text-decoration: none;
          height: 50px;
          width: 220px;
          color: white;
          font-size: 1.25rem;
          position: absolute;
          z-index: 999;
          top: 10px;
          left: 40px;
          background-color: rgba(255, 255, 255, 0.2);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 30px;
          transition: all 0.4s ease;
        }
        .home-nav a:hover {
          transform: scale(1.02);
          background-color: #fff;
          color: black;
        }
      </style>
    </div>

    <header>
      <h1>Alien Invasion Defense - FAQ</h1>
    </header>
    <div class="gtranslate_wrapper"></div>
    <script>
      window.gtranslateSettings = {
        default_language: "en",
        native_language_names: true,
        languages: ["en", "fr", "de", "it", "es", "pl", "hi"],
        wrapper_selector: ".gtranslate_wrapper",
        alt_flags: { en: "usa" },
      };
    </script>
    <script
      src="https://cdn.gtranslate.net/widgets/latest/float.js"
      defer
    ></script>
    <main>
      <!-- Expanded Gameplay Mechanics FAQ Section -->
      <section class="faq-section">
        <h2 onclick="toggleAnswer(this)">
          1. What is Alien Invasion Defense?
          <span class="arrow">▼</span>
        </h2>
        <p>
          Alien Invasion Defense is a high-stakes, strategy-based action game
          where players defend Earth from relentless waves of alien invaders.
          Armed with advanced weaponry, you must eliminate enemies, collect
          power-ups, and advance through increasingly difficult levels.
        </p>
      </section>

      <section class="faq-section">
        <h2 onclick="toggleAnswer(this)">
          2. How do I play Alien Invasion Defense?
          <span class="arrow">▼</span>
        </h2>
        <p>
          To succeed, mastering the game's controls and understanding the
          strategic elements is essential:
        </p>
        <ul>
          <li>
            <strong>Movement</strong>: Use the arrow keys or WASD to navigate
            your character around the screen, dodging alien attacks and
            positioning for optimal shooting.
          </li>
          <li>
            <strong>Shooting</strong>: Use the spacebar or left mouse button to
            fire. Timed shots and accuracy will conserve ammo and increase
            efficiency.
          </li>
          <li>
            <strong>Power-Ups</strong>: Gather various power-ups that drop
            randomly from aliens. Power-ups can enhance firepower, temporarily
            grant invincibility, or replenish health.
          </li>
        </ul>
      </section>

      <!-- Detailed Scoring System -->
      <section class="faq-section">
        <h2 onclick="toggleAnswer(this)">
          3. How does scoring work?
          <span class="arrow">▼</span>
        </h2>
        <p>
          Scoring is crucial to progressing and climbing the leaderboard. Here’s
          a breakdown of how it works:
        </p>
        <ul>
          <li>
            <strong>Standard Aliens</strong>: Basic aliens provide a small
            number of points.
          </li>
          <li>
            <strong>Elite Aliens</strong>: More difficult to defeat, these
            enemies grant higher points.
          </li>
          <li>
            <strong>Boss Aliens</strong>: At the end of certain levels, boss
            aliens appear. Defeating them significantly boosts your score and
            may drop rare power-ups.
          </li>
        </ul>
        <p>
          Note that avoiding hits and defeating aliens without taking damage
          will increase your score multiplier.
        </p>
      </section>

      <!-- Expanded Troubleshooting Section with Solutions -->
      <section class="faq-section">
        <h2 onclick="toggleAnswer(this)">
          4. Troubleshooting: Common Issues and Solutions
          <span class="arrow">▼</span>
        </h2>
        <p>
          Encountering issues while playing? Here are some common solutions:
        </p>
        <ul>
          <li>
            <strong>The Start button doesn’t work</strong>: Try refreshing the
            page or clearing your browser cache. For mobile users, switching to
            a desktop may also resolve the issue.
          </li>
          <li>
            <strong>Game lag or freeze</strong>: Close other applications and
            tabs to free up memory. Reducing screen resolution can also improve
            performance.
          </li>
          <li>
            <strong>Sound issues</strong>: Check your device’s sound settings
            and ensure the volume is up. If playing on a mobile device, try
            plugging in headphones.
          </li>
          <li>
            <strong>Screen appears blank after loading</strong>: Verify that
            your browser is updated. Try disabling browser extensions
            temporarily as they may interfere with the game.
          </li>
        </ul>
      </section>

      <!-- Advanced Gameplay Tips Section -->
      <section class="faq-section">
        <h2 onclick="toggleAnswer(this)">
          5. Advanced Tips for Scoring and Survival
          <span class="arrow">▼</span>
        </h2>
        <p>
          To climb the leaderboard and survive longer, follow these strategies:
        </p>
        <ul>
          <li>
            <strong>Master Dodging</strong>: Constant movement is key. Learn to
            predict enemy movement patterns and position yourself to avoid alien
            attacks.
          </li>
          <li>
            <strong>Prioritize Power-Ups</strong>: Not all power-ups are equal.
            Focus on health-restoring or shield power-ups to prolong survival.
          </li>
          <li>
            <strong>Target Stronger Aliens First</strong>: Elite aliens pose a
            greater threat but offer high rewards. Take them out early to clear
            space and score big.
          </li>
          <li>
            <strong>Efficient Ammo Use</strong>: Conserve shots for the moments
            when you’re lined up to hit multiple enemies. This saves ammo and
            maximizes damage output.
          </li>
        </ul>
      </section>

      <!-- Device Compatibility FAQ Section -->
      <section class="faq-section">
        <h2 onclick="toggleAnswer(this)">
          6. What devices and browsers are supported?
          <span class="arrow">▼</span>
        </h2>
        <ul>
          <li>
            <strong>Browsers</strong>: Latest versions of Chrome, Firefox, Edge,
            or Safari.
          </li>
          <li>
            <strong>Devices</strong>: Desktops, laptops, and most tablets with a
            modern web browser are supported. Performance may vary on mobile
            devices.
          </li>
        </ul>
      </section>

      <section class="faq-section">
        <h2 onclick="toggleAnswer(this)">
          7. How can I report bugs or issues?
          <span class="arrow">▼</span>
        </h2>
        <p>
          If you encounter a bug or an issue not covered here, reach out to our
          support team. Please provide:
        </p>
        <ul>
          <li>Your device type (desktop, tablet, etc.)</li>
          <li>Your browser and version number</li>
          <li>A detailed description of the issue</li>
          <li>Any screenshots or recordings, if possible</li>
        </ul>
      </section>

      <!-- Customer Care Helpline Section -->
      <section class="faq-section">
        <h2 onclick="toggleAnswer(this)">
          8. Customer Care Helpline
          <span class="arrow">▼</span>
        </h2>
        <p>
          If you need assistance with the game, call our Customer Care Helpline
          at <strong>1-800-ALIEN-GAME</strong>. Our team is available 9 AM to 6
          PM (EST) for any questions or technical support.
        </p>
      </section>

      <!-- Community Forums Button -->
      <section class="faq-section">
        <h2 onclick="toggleAnswer(this)">
          9. Join the Community Forums
          <span class="arrow">▼</span>
        </h2>
        <p>
          Connect with other players, share tips, and discuss strategies on our
          <a href="./community.html" target="_blank" class="forum-button"
            >Community Forums</a
          >.
        </p>
      </section>
    </main>
    <div class="game-background">
      <div class="form-container">
        <h1 class="title">Space Warship Q&A</h1>
        <p class="instructions">Ask your questions about the space warship and get answers!</p>
        
        <form id="question-form">
          <label for="user-question">Your Question:</label>
          <textarea id="user-question" name="question" placeholder="Type your question here..." required></textarea><br>
          
          <button type="submit">Submit Question</button>
        </form>
  
        <div id="answer-container" class="answer-container">
          <h3>Answer:</h3>
          <p id="answer"></p>
        </div>
      </div>
    </div>
    <style>
      .game-background {
  background: url('space-background.jpg') no-repeat center center/cover;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.form-container {

  margin-top: 90px;
  background: rgba(0, 0, 0, 0.8);
  padding: 30px;
  border-radius: 10px;
  color: white;
  text-align: center;
 border: 5px solid white;
  width:800px;
}

.title {
  font-size: 2.5em;
  margin-bottom: 20px;
  text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.6);
}

.instructions {
  font-size: 1.2em;
  margin-bottom: 20px;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 1.1em;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  font-size: 1.2em;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #45a049;
}

.answer-container {
  margin-top: 20px;
  text-align: left;
  display: none;
}

.answer-container h3 {
  font-size: 1.8em;
  margin-bottom: 10px;
}

.answer-container p {
  font-size: 1.2em;
  color: #ffcc00;
}
    </style>
    <script>
      document.getElementById("question-form").addEventListener("submit", function(event) {
  event.preventDefault();

  const userQuestion = document.getElementById("user-question").value.trim();
  const answerContainer = document.getElementById("answer-container");
  const answerText = document.getElementById("answer");

  if (userQuestion) {
    // Simple example of answering based on the question content
    let answer = "Sorry, I don't have an answer for that.";

    if (userQuestion.toLowerCase().includes("weapon")) {
      answer = "The primary weapon of the space warship is the Laser Cannon.";
    } else if (userQuestion.toLowerCase().includes("shield")) {
      answer = "The warship uses an energy shield to protect itself from enemy attacks.";
    } else if (userQuestion.toLowerCase().includes("speed")) {
      answer = "The space warship can travel at FTL (faster-than-light) speeds!";
    }

    answerText.textContent = answer;
    answerContainer.style.display = "block";  // Show the answer container
  } else {
    answerText.textContent = "Please ask a valid question.";
    answerContainer.style.display = "block";
  }
});

    </script>

    <footer class="bg-body-tertiary text-center">
      <!-- Grid container -->
      <div class="container p-4">
        <!-- Section: Social media -->
        <section class="mb-4">
          <!-- Facebook -->
          <a
            data-mdb-ripple-init
            class="btn btn-outline btn-floating m-1"
            href="#!"
            style="margin: 15px"
            role="button"
            ><i class="fab fa-facebook-f"></i
          ></a>

          <!-- Twitter -->
          <a
            data-mdb-ripple-init
            class="btn btn-outline btn-floating m-1"
            href="#!"
            style="margin: 15px"
            role="button"
            ><i class="fab fa-twitter"></i
          ></a>

          <!-- Google -->
          <a
            data-mdb-ripple-init
            class="btn btn-outline btn-floating m-1"
            href="#!"
            style="margin: 15px"
            role="button"
            ><i class="fab fa-google"></i
          ></a>

          <!-- Instagram -->
          <a
            data-mdb-ripple-init
            class="btn btn-outline btn-floating m-1"
            href="#!"
            style="margin: 15px"
            role="button"
            ><i class="fab fa-instagram"></i
          ></a>

          <!-- Linkedin -->
          <a
            data-mdb-ripple-init
            class="btn btn-outline btn-floating m-1"
            href="#!"
            style="margin: 15px"
            role="button"
            ><i class="fab fa-linkedin-in"></i
          ></a>

          <!-- Github -->
          <a
            data-mdb-ripple-init
            class="btn btn-outline btn-floating m-1"
            href="#!"
            style="margin: 15px"
            role="button"
            ><i class="fab fa-github"></i
          ></a>
        </section>
        <section class="mx-4 mb-4">
          <p>
            Welcome to Alien Invasion Defense, a fast-paced space shooting game!
            Defend your base from waves of alien invaders and become the
            ultimate space defender. 🌌 With simple controls, sleek graphics,
            and exciting gameplay, get ready for an epic battle. Use your
            weapons to destroy alien ships, survive multiple waves, and protect
            your base with 3 lives. 👾
          </p>
        </section>
      </div>

      <!-- Copyright -->
      <div
        class="text-center p-3"
        style="background-color: rgba(0, 0, 0, 0.05)"
      >
        © <span id="currentYear"></span> Alien-Invasion-Defense. All rights
        reserved.
      </div>
      <!-- Copyright -->
    </footer>

    <button id="scrollUpBtn" onclick="scrollToTop()">↑</button>

    <script src="FAQs.js"></script>

    <script>
      document.getElementById("currentYear").textContent =
        new Date().getFullYear();

      window.embeddedChatbotConfig = {
        chatbotId: "W_g3OYohwvFoV5lha0KUf",
        domain: "www.chatbase.co",
      };
      window.onload = function () {
        // Show the scroll-up button when the user scrolls down
        window.onscroll = function () {
          const scrollUpBtn = document.getElementById("scrollUpBtn");
          if (
            document.body.scrollTop > 100 ||
            document.documentElement.scrollTop > 100
          ) {
            scrollUpBtn.style.display = "block";
          } else {
            scrollUpBtn.style.display = "none";
          }
          const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
          const scrollPosition = window.pageYOffset;
          const scrollPercentage = (scrollPosition / totalHeight) * 100;
          document.getElementById(
            "progress-bar-faqs"
          ).style.width = `${scrollPercentage}%`;
        };
      };

      function scrollToTop() {
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      }

      function toggleAnswer(header) {
        const answer = header.nextElementSibling;
        const arrow = header.querySelector(".arrow");
        if (answer.style.display === "block") {
          answer.style.display = "none";
          arrow.innerHTML = "▼";
        } else {
          answer.style.display = "block";
          arrow.innerHTML = "▲";
        }
      }
    </script>
    <script
      src="https://www.chatbase.co/embed.min.js"
      chatbotId="W_g3OYohwvFoV5lha0KUf"
      domain="www.chatbase.co"
      defer
    ></script>

    <script>
      // Create a trailing dot element dynamically
      function createTrailDot(x, y) {
        const trailDot = document.createElement('div');
        trailDot.classList.add('cursor-tail');
        trailDot.style.left = `${x}px`;
        trailDot.style.top = `${y}px`;
        document.body.appendChild(trailDot);

        // Remove the trail dot after the animation completes (0.5s)
        setTimeout(() => {
          trailDot.remove();
        }, 500); // Match the duration of the animation in CSS
      }

      // Function to move the cursor and generate trailing dots
      function moveCursor(event) {
        const x = event.pageX;
        const y = event.pageY;

        // Create a new trail dot at the cursor position
        createTrailDot(x, y);
      }

      // Listen to mousemove event to trigger the cursor and trail
      document.addEventListener('mousemove', moveCursor);
    </script>
    
  </body>
</html>