Add files via upload

JS/animation.js

@@ -0,0 +1,75 @@
+const canvas = document.getElementById("particle-canvas");
+const ctx = canvas.getContext("2d");
+
+// Set canvas size to match the header's dimensions
+const header = document.querySelector("header");
+canvas.width = header.offsetWidth;
+canvas.height = header.offsetHeight;
+// Create an array to hold the particles
+const particles = [];
+
+// Create a Particle class
+class Particle {
+  constructor(x, y, size, opacity, speed, direction) {
+    this.x = x;
+    this.y = y;
+    this.size = size;
+    this.opacity = opacity;
+    this.color = `rgba(255, 255, 255, ${this.opacity})`;
+    this.speed = speed;
+    this.direction = direction; // Direction can be 1 (top to bottom) or -1 (bottom to top)
+  }
+
+  draw() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+
+  update() {
+    this.y += this.direction * this.speed;
+    this.x += Math.random() * 2 - 1; // Add a slight horizontal randomness
+
+    // Recycle particles when they go out of bounds within the canvas
+    if (this.direction === 1 && this.y > canvas.height + this.size) {
+      this.y = -this.size;
+      this.x = Math.random() * canvas.width;
+    } else if (this.direction === -1 && this.y < -this.size) {
+      this.y = canvas.height + this.size;
+      this.x = Math.random() * canvas.width;
+    }
+
+    this.draw();
+  }
+}
+
+// Create and animate particles
+function animate() {
+  requestAnimationFrame(animate);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  if (particles.length < 100 && Math.random() < 0.5) {
+    const x = Math.random() * canvas.width;
+    const size = Math.random() * 2 + 1; // Smaller size
+    const opacity = Math.random() * 0.4 + 0.1; // Adjusted opacity
+    const speed = Math.random() * 1.2 + 1; // Random speed between 1 and 3
+    const direction = Math.random() < 0.5 ? 1 : -1; // Randomly choose direction
+    particles.push(
+      new Particle(
+        x,
+        direction === 1 ? -size : canvas.height + size,
+        size,
+        opacity,
+        speed,
+        direction
+      )
+    );
+  }
+
+  particles.forEach((particle) => {
+    particle.update();
+  });
+}
+
+animate();

JS/main.js

@@ -0,0 +1,231 @@
+const config = {
+  topCustomers: [
+    "MidoAlawieh",
+    "RubyEyedReaper",
+    "24Hrs_TK",
+    "ItzStormizn",
+    "Mavyy",
+  ],
+  serverInfo: {
+    discordServerID: "1121855226278846584",
+    serverIp: "mc.sentrycraft.net",
+  },
+};
+
+const discordOnline = document.querySelector(".discord-online");
+const minecraftOnline = document.querySelector(".mc-online");
+// Get the header element's computed height
+const headerI = document.querySelector("header");
+const headerHeight = window.getComputedStyle(headerI).height;
+
+// Set the same height for the bgi and color elements
+const bgi = document.querySelector(".bgi");
+const color = document.querySelector(".color");
+
+if (bgi && color) {
+  bgi.style.height = headerHeight;
+  color.style.height = headerHeight;
+}
+
+let toggler = document.querySelector(".toggler");
+let mobNav = document.querySelector(".mobile-nav");
+let closer = document.querySelector(".closer");
+let overlay = document.getElementsByClassName("overlay")[0];
+
+toggler.addEventListener("click", () => {
+  mobNav.classList.add("open");
+  overlay.classList.add("shown");
+});
+closer.addEventListener("click", () => {
+  mobNav.classList.remove("open");
+  overlay.classList.remove("shown");
+});
+console.log(overlay);
+overlay.addEventListener("click", () => {
+  mobNav.classList.remove("open");
+  overlay.classList.remove("shown");
+});
+
+// Get the text element by its ID
+const copyText = document.getElementsByClassName("ip");
+const copyPopUp = document.querySelector(".copy-popup");
+// Add a click event listener to the text element
+for (let i = 0; i < copyText.length; i++) {
+  if (copyText[i]) {
+    copyText[i].addEventListener("click", () => {
+      const tempTextArea = document.createElement("textarea");
+      tempTextArea.value = "sentrycraft.net";
+      document.body.appendChild(tempTextArea);
+      tempTextArea.select();
+      document.execCommand("copy");
+      document.body.removeChild(tempTextArea);
+      copyPopUp.classList.add("copied");
+      console.log("hey");
+      setTimeout(() => {
+        copyPopUp.classList.add("hide");
+        setTimeout(() => {
+          copyPopUp.classList.remove("copied");
+          copyPopUp.classList.remove("hide");
+        }, 2500);
+      }, 1500);
+    });
+  }
+}
+
+let mobileToggle = document.querySelector(".mobile-store-title");
+let mobileCates = document.querySelector(".mobile-cates");
+
+if (mobileToggle !== null) {
+  mobileToggle.addEventListener("click", () => {
+    if (mobileCates.style.height === "0px" || mobileCates.style.height === "") {
+      mobileCates.style.height = mobileCates.scrollHeight + "px";
+    } else {
+      mobileCates.style.height = "0px";
+    }
+    mobileToggle.classList.toggle("store-open");
+  });
+}
+
+let customerHeads = document.querySelector(".customer-heads");
+
+for (let i in config.topCustomers) {
+  if (customerHeads) {
+    let headParent = document.createElement("div");
+    headParent.classList.add("head");
+    headParent.setAttribute("username", config.topCustomers[i]);
+    let head = document.createElement("img");
+    head.setAttribute(
+      "src",
+      `https://mc-heads.net/avatar/${config.topCustomers[i]}/45`
+    );
+    head.setAttribute("alt", `${config.topCustomers[i]}`);
+    headParent.appendChild(head);
+    customerHeads.appendChild(headParent);
+  }
+}
+
+let storeNavs = document.querySelectorAll(".store-nav, .mobile-store-nav");
+let storeInfo = document.querySelector(".store-info");
+let currentlyActive = storeInfo;
+
+function handleNavClick(navElement) {
+  let cateClass = navElement.classList[0];
+  let storeItems = document.querySelector(`.${cateClass}-items`);
+  let activeNav = document.querySelectorAll(".active-nav");
+  let toActive = document.querySelectorAll(`.${cateClass}`);
+
+  // Check if the clicked navElement is already active
+  if (!navElement.classList.contains("active-nav")) {
+    currentlyActive.classList.remove("show");
+    activeNav.forEach((nav) => {
+      nav.classList.remove("active-nav");
+    });
+    storeItems.classList.remove("hidden");
+    toActive.forEach((nav) => {
+      nav.classList.add("active-nav");
+    });
+    storeItems.classList.add("fade");
+    setTimeout(() => {
+      storeItems.classList.add("show");
+    }, 100);
+    storeItems.addEventListener(
+      "transitionend",
+      () => {
+        storeItems.classList.remove("fade");
+      },
+      { once: true }
+    );
+    currentlyActive.classList.add("hidden");
+    currentlyActive = storeItems;
+  }
+}
+
+storeNavs.forEach((nav) => {
+  nav.addEventListener("click", (event) => {
+    event.preventDefault();
+    handleNavClick(nav);
+  });
+});
+
+let rule = document.getElementsByClassName("rule");
+let ruleDesc = document.getElementsByClassName("rule-desc");
+if (rule != null) {
+  for (let i = 0; i < rule.length; i++) {
+    rule[i].addEventListener("click", () => {
+      if (
+        ruleDesc[i].style.height === "0px" ||
+        ruleDesc[i].style.height === ""
+      ) {
+        ruleDesc[i].style.height = ruleDesc[i].scrollHeight + "px";
+        rule[i].classList.toggle("rule-open");
+      } else {
+        ruleDesc[i].style.height = "0px";
+        rule[i].classList.toggle("rule-open");
+      }
+    });
+  }
+}
+
+const getDiscordOnlineUsers = async () => {
+  try {
+    const discordServerId = config.serverInfo.discordServerID;
+
+    const apiWidgetUrl = `https://discord.com/api/guilds/${discordServerId}/widget.json`;
+    let response = await fetch(apiWidgetUrl);
+    let data = await response.json();
+    if (!data.presence_count) {
+      discordOnline.innerText = "none";
+    } else {
+      console.log(data.presence_count);
+      discordOnline.innerText = `${await data.presence_count} Members Online`;
+    }
+  } catch (e) {
+    discordOnline.innerText = "none";
+  }
+};
+
+const getMinecraftOnlinePlayer = async () => {
+  try {
+    const serverIp = config.serverInfo.serverIp;
+
+    const apiUrl = `https://api.mcsrvstat.us/2/${serverIp}`;
+    let response = await fetch(apiUrl);
+    let data = await response.json();
+
+    minecraftOnline.innerText = `${data.players.online} Players Online`;
+  } catch (e) {
+    console.log(e);
+    minecraftOnline.innerHTML = "None";
+  }
+};
+
+getDiscordOnlineUsers();
+getMinecraftOnlinePlayer();
+
+// Get a reference to the ::after pseudo-element by its id
+// Create a function to update the scrolling indicator
+// Function to update the scrolling indicator
+// Function to update scrolling indicators
+function updateScrollIndicators() {
+  const sectionContentContainers =
+    document.querySelectorAll(".section-content");
+
+  sectionContentContainers.forEach((container) => {
+    const scrollIndicator = container.querySelector(".scroll-indicator");
+    const scrollPercentage =
+      (window.scrollY /
+        (document.documentElement.scrollHeight - window.innerHeight)) *
+      100;
+    const topPosition = `calc(${scrollPercentage}% - 30px)`;
+
+    if (scrollIndicator) {
+      scrollIndicator.style.top = topPosition;
+    }
+  });
+}
+
+// Add a scroll event listener to update all scrolling indicators
+window.addEventListener("scroll", updateScrollIndicators);
+
+// Initially update the scrolling indicators when the page loads
+window.addEventListener("load", updateScrollIndicators);