achievements.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Badge Information - SwapReads</title>
    <link rel="stylesheet" href="achievements.css" />
    <style>
    /* Circle styles */
    .circle {
      height: 24px;
      width: 24px;
      border-radius: 50%;
      background-color: black;
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 99999999;
      transition: transform 0.1s ease-out;
    }
    </style>
    
  </head>
  <body>
           <!-- Circles -->
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div> 
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>

     <script>

  // Coordinates for the cursor
  const coords = { x: 0, y: 0 };
  const circles = document.querySelectorAll(".circle");

  // Colors for the circles
  const colors = [
    "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
    "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
    "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
    "#680060", "#60005f", "#48005f", "#3d005e"
  ];

  // Assign colors and initial position to each circle
  circles.forEach(function (circle, index) {
    circle.x = 0;
    circle.y = 0;
    circle.style.backgroundColor = colors[index % colors.length];
  });

  // Update the coordinates when the mouse moves
  window.addEventListener("mousemove", function (e) {
    coords.x = e.clientX;
    coords.y = e.clientY;
  });

  // Animation function to move the circles
  function animateCircles() {
    let x = coords.x;
    let y = coords.y;

    circles.forEach(function (circle, index) {
      // Update the position and scale of each circle
      circle.style.left = x - 12 + "px";
      circle.style.top = y - 12 + "px";
      circle.style.scale = (circles.length - index) / circles.length;

      circle.x = x;
      circle.y = y;

      // Get the next circle in the sequence
      const nextCircle = circles[index + 1] || circles[0];
      x += (nextCircle.x - x) * 0.15;
      y += (nextCircle.y - y) * 0.15;
    });

    // Repeat the animation
    requestAnimationFrame(animateCircles);
  }

  // Start the animation
  animateCircles();

</script>
    
    <div class="container">
      <h1>Badge Achievement Information</h1>
      <table id="badgeTable">
        <thead>
          <tr>
            <th>Badge Image</th>
            <th>How to Earn</th>
            <th>Points</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <img
                src="assets/images/website-login.png"
                alt="Badge 1"
                class="badge-img"
              />
            </td>
            <td>Signup to SwapReads</td>
            <td>10 points</td>
          </tr>
          <tr>
            <td>
              <img
                src="assets/images/your-first-read.png"
                alt="Badge 2"
                class="badge-img"
              />
            </td>
            <td>Complete your First Book</td>
            <td>30 points</td>
          </tr>
          <tr>
            <td>
              <img
                src="assets/images/first-5-read.png"
                alt="Badge 3"
                class="badge-img"
              />
            </td>
            <td>Complete five books in a Row</td>
            <td>60 points</td>
          </tr>
          <tr>
            <td>
              <img
                src="assets/images/part-of-our-community.png"
                alt="Badge 4"
                class="badge-img"
              />
            </td>
            <td>Signup to our NewsLetter</td>
            <td>20 points</td>
          </tr>
          <tr>
            <td>
              <img
                src="assets/images/share-books.png"
                alt="Badge 5"
                class="badge-img"
              />
            </td>
            <td>Share a SwapRead Book</td>
            <td>40 points</td>
          </tr>
          <tr>
            <td>
              <img
                src="assets/images/10-books-30-days.png"
                alt="Badge 6"
                class="badge-img"
              />
            </td>
            <td>Complete Reading 10 Books in 30 Days</td>
            <td>90 points</td>
          </tr>
          <tr>
            <td>
              <img
                src="assets/images/swap-read-mega-1.png"
                alt="Badge 7"
                class="badge-img"
              />
            </td>
            <td>Earn all the badges to Win this Mega Badge</td>
            <td>300 points</td>
          </tr>
          <!-- Add more badges as needed -->
        </tbody>
      </table>

      <div class="prompt">
        <p style="font-weight: bold; font-size: 21px">
          Want to see which badges you've earned? Log in to find out!
        </p>
        <button id="loginButton">Login to your Profile</button>
      </div>
    </div>

    <script>
      // JavaScript for navigation to login page
      document.getElementById("loginButton").onclick = function () {
        window.location.href = "assets/html/login.html"; // Replace with the actual login page URL
      };
    </script>
  </body>
</html>