From e99a3d82e013f866b4f245976b184376fdcbf882 Mon Sep 17 00:00:00 2001 From: Ridhima10 Date: Sat, 22 Jun 2024 20:36:27 +0530 Subject: [PATCH] fixed menu in index file --- server/views/index.ejs | 501 ++++++++++++++++++++++++++++------------- 1 file changed, 344 insertions(+), 157 deletions(-) diff --git a/server/views/index.ejs b/server/views/index.ejs index 1ea589d..956edc0 100644 --- a/server/views/index.ejs +++ b/server/views/index.ejs @@ -537,58 +537,8 @@ -
@@ -603,49 +553,50 @@
- + @@ -657,23 +608,7 @@ - +
@@ -1394,52 +1329,304 @@ animateCircles(); - /*=============== SHOW MENU ===============*/ - const navMenu = document.getElementById('nav-menu'), - navToggle = document.getElementById('nav-toggle'), - navClose = document.getElementById('nav-close') - - /* Menu show */ - navToggle.addEventListener('click', () => { - navMenu.classList.add('show-menu') - - }) - - /* Menu hidden */ - navClose.addEventListener('click', () => { - navMenu.classList.remove('show-menu') - }) - - /*=============== SEARCH ===============*/ - const search = document.getElementById('search'), - searchBtn = document.getElementById('search-btn'), - searchClose = document.getElementById('search-close') - - /* Search show */ - searchBtn.addEventListener('click', () => { - search.classList.add('show-search') - }) - - /* Search hidden */ - searchClose.addEventListener('click', () => { - search.classList.remove('show-search') - }) - - const toggleButton = document.getElementById("theme-toggle"); - const body = document.body; - - searchIcon.addEventListener("click", () => { - nav.classList.toggle("openSearch"); - nav.classList.remove("openNav"); - if (searchResult.value.length === 0) { - resultContainer.style.display = "none"; - } - if (nav.classList.contains("openSearch")) { - return searchIcon.classList.replace("uil-search", "uil-times"); - } - searchIcon.classList.replace("uil-times", "uil-search"); - }); - + // const data = [ +// { place: 1, name: "Steven A" }, +// { place: 2, name: "Raghav M" }, +// { place: 3, name: "Ryan Z" }, +// { place: 4, name: "Joseph R" }, +// { place: 5, name: "Muwaffaq I" }, +// { place: 6, name: "Joshua L" }, +// { place: 7, name: "Nick M" }, +// { place: 8, name: "Ravindra R" }, +// { place: 9, name: "Ricardo M" }, +// { place: 10, name: "Shubham R" }, +// { place: 11, name: "Flavio S" }, +// { place: 12, name: "Igor S" }, +// { place: 13, name: "Mycah H" }, +// { place: 14, name: "hemant d" }, +// { place: 15, name: "Santhosh S" }, +// { place: 16, name: "Joseph D" }, +// { place: 17, name: "Kevin C" }, +// { place: 18, name: "yasser m" }, +// { place: 19, name: "Miguel Ángel M" }, +// { place: 20, name: "Peter K" }, +// { place: 21, name: "Atikur R" }, +// { place: 22, name: "Matthew Y" }, +// { place: 23, name: "Anwar S" }, +// { place: 24, name: "Jake Y" }, +// { place: 25, name: "Lokesh R" }, +// { place: 26, name: "Christopher P" }, +// { place: 27, name: "Mingxin O" }, +// { place: 28, name: "August E" }, +// { place: 29, name: "Samsruti D" }, +// { place: 30, name: "Harsh V" }, +// { place: 31, name: "Keenan P" }, +// { place: 32, name: "Rouz A" }, +// { place: 33, name: "Ron R" }, +// { place: 34, name: "Sean O" }, +// { place: 35, name: "Michael D" }, +// { place: 36, name: "Devishree R" }, +// { place: 37, name: "Ali R" }, +// { place: 38, name: "Alvin A" }, +// { place: 39, name: "Arthur N" }, +// { place: 40, name: "Choulhyouc L" }, +// { place: 41, name: "Zeeshan H" }, +// { place: 42, name: "Goran Đ" }, +// { place: 43, name: "sovannarong k" }, +// { place: 44, name: "Luke M" }, +// { place: 45, name: "Chenzhe X" }, +// { place: 46, name: "Jae Hee L" }, +// { place: 47, name: "Jason P" }, +// { place: 48, name: "Sebastiano D" }, +// { place: 49, name: "Julia S" }, +// { place: 50, name: "Sana" }, +// ]; + +function compare(a, b) { + if (a.contributions < b.contributions) { + return 1; + } + if (a.contributions > b.contributions) { + return -1; + } + return 0; +} +async function getContributors(repoName, page = 1) { + let request = await fetch(`https://api.github.com/repos/GameSphere-MultiPlayer/Community-Page/contributors?page=1&anon=true`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + } + }); + + + + // print data from the fetch on screen + let contributorsList = await request.json(); + contributorsList.sort(compare); + var data = [] + var size = contributorsList.length + for (var i = 0; i < size; i++) { + data.push({ place: i + 1, name: (contributorsList[i].login==undefined)? contributorsList[i].name : contributorsList[i].login}); + } + console.log(data) + + return data; +}; + +var medals = ['medal-gold', 'medal-silver', 'medal-bronze'] +window.onload = async function () { + const data = await getContributors("Community-Page") + + console.log(data.length) + var i = 0; + data.forEach(item => { + if (i > 2) { + const rankingTable = document.getElementById('rankingTableBody'); + const row = document.createElement('div'); + row.className = 'ranking-table-row'; + + const placeCell = document.createElement('div'); + placeCell.className = 'ranking-table-data'; + placeCell.textContent = item.place; + + const nameCell = document.createElement('div'); + nameCell.className = 'ranking-table-data'; + nameCell.textContent = item.name; + + const completeCell = document.createElement('div'); + completeCell.className = 'ranking-table-data'; + + const completeIndicator = document.createElement('div'); + completeIndicator.className = 'complete'; + completeCell.appendChild(completeIndicator); + + row.appendChild(placeCell); + row.appendChild(nameCell); + row.appendChild(completeCell); + + rankingTable.appendChild(row); + } else { + const rankingTable = document.getElementById("top3") + const row = document.createElement('div'); + row.className = 'ranking-table-row-leader-' + (i + 1); + + const placeCell = document.createElement('div'); + placeCell.className = 'ranking-table-data-leader-' + (i + 1); + + const medalcell = document.createElement('div') + console.log(medals[i]) + medalcell.className = medals[i]; + + placeCell.appendChild(medalcell); + + const nameCell = document.createElement('div'); + nameCell.className = 'ranking-table-data'; + nameCell.textContent = item.name; + + const completeCell = document.createElement('div'); + completeCell.className = 'ranking-table-data'; + + const completeIndicator = document.createElement('div'); + completeIndicator.className = 'complete'; + completeCell.appendChild(completeIndicator); + + row.appendChild(placeCell); + row.appendChild(nameCell); + row.appendChild(completeCell); + + rankingTable.appendChild(row); + } + i++; + }); + console.log("RUNNED") +} + +const nav = document.querySelector(".nav"), + searchIcon = document.querySelector("#searchIcon"), + navOpenBtn = document.querySelector(".navOpenBtn"), + navCloseBtn = document.querySelector(".navCloseBtn"), + searchResult = document.getElementById("searchResult"), + resultContainer = document.querySelector(".searching_results"); + +searchResult.addEventListener("input", () => { + if (searchResult.value.length === 0) { + resultContainer.style.display = "none"; + } + if (nav.classList.contains("openSearch") && searchResult.value.length > 0) { + resultContainer.style.display = "flex"; + let result = data.filter((item) => + item.name.toLowerCase().includes(searchResult.value.toLowerCase()) + ); + console.log(result) + resultContainer.innerHTML = ""; + if (result.length !== 0) { + result.forEach((item, index) => { + const div = document.createElement("div"); + const p = document.createElement("p"); + const span = document.createElement("span"); + p.textContent = item.name; + span.textContent = item.place; + div.appendChild(p); + div.appendChild(span); + resultContainer.appendChild(div); + }); + } + else { + resultContainer.style.display = "none"; + } + } +}); + +const toggleButton = document.getElementById("theme-toggle"); +const body = document.body; + +searchIcon.addEventListener("click", () => { + nav.classList.toggle("openSearch"); + nav.classList.remove("openNav"); + if (searchResult.value.length === 0) { + resultContainer.style.display = "none"; + } + if (nav.classList.contains("openSearch")) { + return searchIcon.classList.replace("uil-search", "uil-times"); + } + searchIcon.classList.replace("uil-times", "uil-search"); +}); + +// page start with dark mode + +body.classList.add("dark-mode"); +// Toggle between "toggle off and toggle on"// + +toggleButton.addEventListener("click", () => { + body.classList.toggle("dark-mode"); + body.classList.toggle("light-mode"); + + if (body.classList.contains("light-mode")) { + toggleButton.classList.remove("bi-toggle-off"); + toggleButton.classList.add("bi-toggle-on"); + document.getElementById("menuBarsColor").style.color = "black"; + document.querySelectorAll("a").forEach((link) => link.style.color = "black"); + } else { + toggleButton.classList.remove("bi-toggle-on"); + toggleButton.classList.add("bi-toggle-off"); + document.getElementById("menuBarsColor").style.color = "white"; + document.querySelectorAll("a").forEach((link) => link.style.color = "white"); + } +}); + +navOpenBtn.addEventListener("click", () => { + nav.classList.add("openNav"); + nav.classList.remove("openSearch"); + searchIcon.classList.replace("uil-times", "uil-search"); +}); +navCloseBtn.addEventListener("click", () => { + nav.classList.remove("openNav"); +}); + +document.addEventListener("DOMContentLoaded", function () { + const discordButton = document.getElementById("discord-button"); + const discordPopup = document.getElementById("discord-popup"); + const closeBtn = document.getElementById("close-btn"); + + discordButton.addEventListener("click", function () { + discordPopup.style.display = "block"; + }); + + closeBtn.addEventListener("click", function () { + discordPopup.remove(); + }); +}); + +document.addEventListener("DOMContentLoaded", function () { + const discordPopup = document.getElementById("discord-popup"); + const closeBtn = document.getElementById("close-btn"); + + discordButton.addEventListener("click", function () { + discordPopup.style.display = "block"; + }); + + closeBtn.addEventListener("click", function () { + discordPopup.style.display = "none"; + }); +}); +const success = () => { + showAlert("You have successfully subscribed!", "success"); +}; + +const showAlert = (message, type) => { + const alertBox = document.getElementById("customAlert"); + const alertText = document.getElementById("alertText"); + + alertText.textContent = message; + + if (type === "success") { + alertBox.style.borderColor = "#4CAF50"; + alertText.style.color = "#4CAF50"; + } else { + alertBox.style.borderColor = "#f44336"; + alertText.style.color = "#f44336"; + } + + alertBox.classList.add("show"); + + document.getElementById("closeAlert").addEventListener("click", () => { + alertBox.classList.remove("show"); + }); +}; + +const subscriptionForm = document.getElementById("subscriptionForm"); +const emailInput = document.getElementById("emailInput"); + +subscriptionForm.addEventListener("submit", function (event) { + if (!emailInput.checkValidity()) { + showAlert("Please enter a valid email address.", "error"); + emailInput.focus(); + event.preventDefault(); + } else { + success(); + } +});