diff --git a/css/styles.css b/css/styles.css index 28a2da0..03f3682 100644 --- a/css/styles.css +++ b/css/styles.css @@ -12,7 +12,7 @@ body { min-height: 100vh; overflow-x: hidden; color: #333; - transition: background-color 0.3s ease, color 0.3s ease; + transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body.dark-mode { @@ -63,7 +63,7 @@ button, .source-btn, .dsc-btn, .clr-btn { border-radius: 5px; text-decoration: none; display: inline-block; - transition: background-color 0.3s ease, transform 0.3s ease; + transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .clientbutton button { background-color: #5fff5a; @@ -105,7 +105,7 @@ button:hover { border-radius: 4px; width: 50%; max-width: 400px; - transition: border-color 0.3s ease; + transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #search-bar:focus { @@ -142,7 +142,7 @@ button:hover { border-radius: 5px; text-decoration: none; display: inline-block; - transition: background-color 0.3s ease, transform 0.3s ease; + transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; } @@ -168,7 +168,7 @@ button:hover { max-width: 400px; text-align: center; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); - transition: background-color 0.3s ease, color 0.3s ease; + transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .modal h2 { diff --git a/index.html b/index.html index 1d38346..9e3eb32 100644 --- a/index.html +++ b/index.html @@ -11,10 +11,10 @@ - - - - + + + + diff --git a/js/darkmode.js b/js/darkmode.js index 2aece65..565e32d 100644 --- a/js/darkmode.js +++ b/js/darkmode.js @@ -1,83 +1,66 @@ -$(document).ready(function() { - function updateDarkMode(isChecked) { +import { + hexToRGB, + pushStyles, + selectClass, + selectId, + selectTag, +} from "./helperFunctions"; + +global.querySelectorAll = document.querySelectorAll; + +$(function() { + function applyStyles(elements, styles) { + elements.forEach(element => pushStyles(element, styles)); + } + + function updateDarkMode(isChecked = true) { + const body = document.body.id ? selectId(document.body.id) : selectTag('body'); + const commonStyles = isChecked ? { + backgroundColor: hexToRGB('#141414'), + color: hexToRGB('#f1f1f1') + } : { + backgroundColor: '#f1f1f1', + color: 'black', + backgroundImage: "url('/images/grass-background.jpg')" + }; + + pushStyles(body, commonStyles); + + applyStyles(document.querySelectorAll('p'), { color: commonStyles.color }); + applyStyles([selectTag('h2'), selectTag('h1')], { color: commonStyles.color }); + if (isChecked) { - const body = document.querySelector('body'); - body.style.backgroundColor = '#141414'; - body.style.color = '#f1f1f1'; - body.style.backgroundImage= 'none'; - const paragraphs = document.querySelectorAll('p'); - paragraphs.forEach(function(p) { - p.style.color = '#f1f1f1'; + pushStyles(selectTag('h1'), { + textShadow: '-0px 0 white, 0 0px white, 0px 0 white, 0 -0px white' }); - const headTwo = document.querySelector('h2'); - headTwo.style.color = '#f1f1f1'; - const head = document.querySelector('h1'); - head.style.color = '#f1f1f1'; - head.classList.add('text-shadow'); - head.style.textShadow = '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black'; - - const foot = document.querySelector('.footer'); - foot.style.backgroundColor = '#6C8592'; - const gitBtn = document.querySelector('.source-btn'); - gitBtn.style.backgroundColor = '#ff6847'; - - const buttons = document.querySelectorAll('button'); - buttons.forEach(function(button) { - button.style.backgroundColor = '#30d3d2'; - }); - const versionTexts = document.querySelectorAll('.version-text'); - versionTexts.forEach(function(vt) { - vt.style.color = '#f1f1f1'; - }); - const dZone = document.querySelector('.danger-zone'); - dZone.style.color = '#ff6847'; - const dZoneText = document.querySelector('.modal'); - dZoneText.style.color = '#ff3c00'; + pushStyles(selectClass('footer'), { backgroundColor: hexToRGB('#6C8592') }); + pushStyles(selectClass('source-btn'), { backgroundColor: hexToRGB('#ff6847') }); + applyStyles(document.querySelectorAll('button'), { backgroundColor: hexToRGB('#30d3d2') }); + applyStyles(document.querySelectorAll('.version-text'), { color: hexToRGB('#f1f1f1') }); + pushStyles(document.querySelector('.danger-zone'), { color: '#ff6847' }); + pushStyles(document.querySelector('.modal'), { color: '#ff3c00' }); localStorage.setItem('darkModeOn', true); } else { - const body = document.querySelector('body'); - body.style.backgroundColor = '#f1f1f1'; - body.style.color = 'black'; - body.style.backgroundImage= "url('/images/grass-background.jpg')"; - const paragraphs = document.querySelectorAll('p'); - paragraphs.forEach(function(p) { - p.style.color = 'black'; + pushStyles(selectTag('h1'), { + textShadow: '-0px 0 white, 0 0px white, 0px 0 white, 0 -0px white' }); - const headTwo = document.querySelector('h2'); - headTwo.style.color = 'black'; - const head = document.querySelector('h1'); - head.style.color = 'black'; - head.classList.remove('text-shadow'); - head.style.textShadow = '-0px 0 white, 0 0px white, 0px 0 white, 0 -0px white'; - - const foot = document.querySelector('.footer'); - foot.style.backgroundColor = '#000000'; - foot.style.color = '#ffffff'; - const gitBtn = document.querySelector('.source-btn'); - gitBtn.style.backgroundColor = '#0095ff'; - const buttons = document.querySelectorAll('button'); - buttons.forEach(function(button) { - button.style.backgroundColor = '#4caf50'; - }); - const versionTexts = document.querySelectorAll('.version-text'); - versionTexts.forEach(function(vt) { - vt.style.color = 'black'; - }); - const dZone = document.querySelector('.danger-zone'); - dZone.style.color = '#010101'; - const dZoneText = document.querySelector('.modal'); - dZoneText.style.color = '#010101'; + pushStyles(selectClass('footer'), { backgroundColor: '#000000', color: '#ffffff' }); + pushStyles(selectClass('source-btn'), { backgroundColor: '#0095ff' }); + applyStyles(document.querySelectorAll('button'), { backgroundColor: '#4caf50' }); + applyStyles(document.querySelectorAll('.version-text'), { color: 'black' }); + pushStyles(document.querySelector('.danger-zone'), { color: '#010101' }); + pushStyles(document.querySelector('.modal'), { color: '#010101' }); localStorage.removeItem("darkModeOn"); } } - if (localStorage.getItem('darkModeOn') == true) { - document.getElementById('darkModeCheckbox').checked = true; - var checked = document.getElementById('darkModeCheckbox').checked; - updateDarkMode(checked); + + const darkModeCheckbox = document.getElementById('darkModeCheckbox'); + if (localStorage.getItem('darkModeOn') === 'true') { + darkModeCheckbox.checked = true; } + updateDarkMode(darkModeCheckbox.checked); + $("#darkModeCheckbox").on("change", function() { - var checked = document.getElementById('darkModeCheckbox').checked; - updateDarkMode(checked); + updateDarkMode(darkModeCheckbox.checked); }); - updateDarkMode(); }); diff --git a/js/ga4.js b/js/ga4.js index bb12dfe..6fdb858 100644 --- a/js/ga4.js +++ b/js/ga4.js @@ -1,54 +1,43 @@ function addGoogleAnalyticsTags() { - var currentDomain = window.location.hostname; - var trackingId; + const currentOrigin = window.location.origin; + const allowedOrigins = [ + "https://eaglercraftx1-8.github.io", + "https://eaglercraftx1-8.netlify.app", + "https://eaglercraftx1-8.onrender.com", + "https://fastest.eaglercraft.win", + "https://notproxiedclient.eaglercraft.win", + "https://client.eaglercraft.win", + "https://client2.eaglercraft.win", + "https://client3.eaglercraft.win" + ]; - console.log("Current Domain:", currentDomain); // Log the domain to debug + const trackingIds = { + "https://eaglercraftx1-8.github.io": "G-C44R8LD9MC", + "https://eaglercraftx1-8.netlify.app": "G-0R2ZXFSYVT", + "https://eaglercraftx1-8.onrender.com": "G-MND1TVBSXV", + "https://fastest.eaglercraft.win": "G-0FMCWKD9KG", + "https://notproxiedclient.eaglercraft.win": "G-QWHQVSNLB6", + "https://client.eaglercraft.win": "G-SGELV1H17J", + "https://client2.eaglercraft.win": "G-995EPK8DXR", + "https://client3.eaglercraft.win": "G-3M7CR3HRJV" + }; - switch (currentDomain) { - case "eaglercraftx1-8.github.io": - console.log("Matched GitHub Pages"); - trackingId = "G-C44R8LD9MC"; - break; - case "eaglercraftx1-8.netlify.app": - console.log("Matched Netlify"); - trackingId = "G-0R2ZXFSYVT"; - break; - case "eaglercraftx1-8.onrender.com": - console.log("Matched Render"); - trackingId = "G-MND1TVBSXV"; - break; - case "fastest.eaglercraft.win": - console.log("Matched Netlify / Fastest"); - trackingId = "G-0FMCWKD9KG"; - break; - case "notproxiedclient.eaglercraft.win": - console.log("Matched OnRender / NotProxiedClient"); - trackingId = "G-QWHQVSNLB6"; - break; - case "client.eaglercraft.win": - console.log("Matched GitHub Pages / Client 1"); - trackingId = "G-SGELV1H17J"; - break; - case "client2.eaglercraft.win": - console.log("Matched OnRender / Client 2"); - trackingId = "G-995EPK8DXR"; - break; - case "client3.eaglercraft.win": - console.log("Matched Netlify / Client3"); - trackingId = "G-3M7CR3HRJV"; - break; - default: - console.log("Using Fallback Analytics"); - trackingId = "G-81F615LDEZ"; + let trackingId = "G-81F615LDEZ"; // Default fallback tracking ID + + if (allowedOrigins.includes(currentOrigin)) { + trackingId = trackingIds[currentOrigin]; } + console.log("Current Origin:", currentOrigin); // Log the origin to debug + console.log("Using Tracking ID:", trackingId); // Log the tracking ID to debug + if (trackingId) { - var analyticsScript = document.createElement('script'); + const analyticsScript = document.createElement('script'); analyticsScript.async = true; analyticsScript.src = `https://www.googletagmanager.com/gtag/js?id=${trackingId}`; document.head.appendChild(analyticsScript); - var scriptContent = document.createElement('script'); + const scriptContent = document.createElement('script'); scriptContent.innerHTML = ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} diff --git a/js/helperFunctions.js b/js/helperFunctions.js new file mode 100644 index 0000000..aa2deb6 --- /dev/null +++ b/js/helperFunctions.js @@ -0,0 +1,47 @@ +import isValidTag from "./isValidTag"; + +/** + * @param {HTMLElement} element + * @param {string[]} classlist + */ +export function addClasslist(element, ...classlist) { + element.classList.add(...classlist); +} + +export function isArray(value) { + return value instanceof Array; +} + +export function isObject(value) { + return value instanceof Object; +} + +export function selectId(selector) { + return document.querySelector(selector.startsWith('#') ? selector : `#${selector}`); +} + +export function selectClass(selector) { + return document.querySelector(selector.startsWith('.') ? selector : `.${selector}`); +} + +export function selectTag(selector) { + return isValidTag(selector) ? document.querySelector(selector) : null; +} + +export function pushStyles(element, styles) { + for (const [key, value] of Object.entries(styles)) { + element.style[key] = value; + } +} + +export function elementHasIdOrClass(element) { + return isValidTag(selector) ? (element.id !== "" && element.className !== "") : false; +} + +export function hexToRGB(hex) { + const hexValue = hex.replace('#', ''); + const r = parseInt(hexValue.substring(0, 2), 16); + const g = parseInt(hexValue.substring(2, 4), 16); + const b = parseInt(hexValue.substring(4, 6), 16); + return `rgb(${r}, ${g}, ${b})`; +} \ No newline at end of file diff --git a/js/isValidTag.js b/js/isValidTag.js new file mode 100644 index 0000000..75ec52d --- /dev/null +++ b/js/isValidTag.js @@ -0,0 +1,8 @@ +import htmlTags from '../json/html-tags.json' with { type: 'json' }; +import htmlVoidTags from '../json/html-tags-void.json' with { type: 'json' }; + +export const unifiedTagCollection = [...htmlTags, ...htmlVoidTags]; + +export default function isValidTag(tag) { + return unifiedTagCollection.includes(tag); +} \ No newline at end of file diff --git a/js/main.js b/js/main.js index 8171448..61bf749 100644 --- a/js/main.js +++ b/js/main.js @@ -1,47 +1,56 @@ -// main.js +import { selectId, pushStyles, selectTag, addClasslist } from './helperFunctions'; + +$(function() { + function toggleVisibility(selector, condition) { + $(selector).toggle(condition); + } + + function updateDarkMode() { + const isChecked = $("#darkModeCheckbox").is(":checked"); + const body = selectTag('body'); + if (isChecked) { + addClasslist(body, 'dark-mode'); + } else { + body.classList.remove('dark-mode'); + } + } -$(document).ready(function() { - // Clr data function openClrModal() { - document.getElementById('clr-data-model').style.display = 'flex'; + pushStyles(selectId('clr-data-model'), { display: 'flex' }); } function closeClrModal() { - document.getElementById('clr-data-model').style.display = 'none'; + pushStyles(selectId('clr-data-model'), { display: 'none' }); } - document.getElementById('clr-data-model').addEventListener('click', function(event) { - if (event.target.classList.contains('cancel-btn')) { + function handleClrModalClick(event) { + const target = event.target; + if (target.classList.contains('cancel-btn')) { closeClrModal(); - } else if (event.target.tagName === 'BUTTON' && event.target.textContent === 'Yes') { + } else if (target.tagName === 'BUTTON' && target.textContent === 'Yes') { localStorage.clear(); location.reload(); } - }); - - // Search Bar Functionality - $('#search-bar').on('keyup', function() { - var query = $(this).val().toLowerCase(); - $('.filter-button').each(function() { - var buttonText = $(this).text().toLowerCase(); - if (buttonText.indexOf(query) > -1) { - $(this).show(); - } else { - $(this).hide(); - } - }); - }); - - // Show Modded Clients Functionality - function updateShowModded() { - var isChecked = $("#showModded").is(":checked"); - if (isChecked) { - $("#moddedButtons").show(); - } else { - $("#moddedButtons").hide(); - } } + function handleSearchBarKeyup() { + const query = $('#search-bar').val().toLowerCase(); + $('.filter-button').each(function() { + toggleVisibility(this, $(this).text().toLowerCase().indexOf(query) > -1); + }); + } + + function updateShowModded() { + toggleVisibility("#moddedButtons", $("#showModded").is(":checked")); + } + + $("#darkModeCheckbox").on("change", updateDarkMode); + updateDarkMode(); + + selectId('clr-data-model').addEventListener('click', handleClrModalClick); + + $('#search-bar').on('keyup', handleSearchBarKeyup); + $("#showModded").on("change", updateShowModded); updateShowModded(); }); diff --git a/js/popup.js b/js/popup.js index 25997f0..7945aae 100644 --- a/js/popup.js +++ b/js/popup.js @@ -1,44 +1,37 @@ +import { selectId, pushStyles } from "./helperFunctions"; + window.onload = function() { if (!localStorage.getItem('dontShowPopup')) { - document.getElementById('joinModal').style.display = 'flex'; + pushStyles(selectId('joinModal'), { display: 'flex' }); } } function openModal() { - document.getElementById('joinModal').style.display = 'flex'; + pushStyles(selectId('joinModal'), { display: 'flex' }); } function openCopyModal() { - document.getElementById('joinModal').style.display = 'none'; - document.getElementById('copyModal').style.display = 'flex'; - if (document.getElementById('dontShowCheckbox').checked) { + if (selectId('joinModal').style.display === 'flex') { + pushStyles(selectId('joinModal'), { display: 'none' }); + } + pushStyles(selectId('copyModal'), { display: 'flex' }); + if (selectId('dontShowCheckbox').checked) { localStorage.setItem('dontShowPopup', true); } } function closeModal() { - document.getElementById('joinModal').style.display = 'none'; - document.getElementById('copyModal').style.display = 'none'; + pushStyles(selectId('copyModal'), { display: 'none' }); if (document.getElementById('dontShowCheckbox').checked) { localStorage.setItem('dontShowPopup', true); } } function copyLink() { - const copyText = document.getElementById('discordLink').textContent; + const copyText = selectId('discordLink').textContent; navigator.clipboard.writeText(copyText).then(function() { alert("Discord link copied to clipboard!"); }, function() { alert("Failed to copy the link."); }); } - -// Clr data - -function openClrModal() { - document.getElementById('clr-data-model').style.display = 'flex'; -} - -function closeClrModal() { - document.getElementById('clr-data-model').style.display = 'none'; -} diff --git a/json/html-tags-void.json b/json/html-tags-void.json new file mode 100644 index 0000000..03eadbf --- /dev/null +++ b/json/html-tags-void.json @@ -0,0 +1,17 @@ +[ + "area", + "base", + "br", + "col", + "embed", + "hr", + "img", + "input", + "link", + "menuitem", + "meta", + "param", + "source", + "track", + "wbr" +] \ No newline at end of file diff --git a/json/html-tags.json b/json/html-tags.json new file mode 100644 index 0000000..204b9a2 --- /dev/null +++ b/json/html-tags.json @@ -0,0 +1,120 @@ +[ + "a", + "abbr", + "address", + "area", + "article", + "aside", + "audio", + "b", + "base", + "bdi", + "bdo", + "blockquote", + "body", + "br", + "button", + "canvas", + "caption", + "cite", + "code", + "col", + "colgroup", + "data", + "datalist", + "dd", + "del", + "details", + "dfn", + "dialog", + "div", + "dl", + "dt", + "em", + "embed", + "fieldset", + "figcaption", + "figure", + "footer", + "form", + "h1", + "h2", + "h3", + "h4", + "h5", + "h6", + "head", + "header", + "hgroup", + "hr", + "html", + "i", + "iframe", + "img", + "input", + "ins", + "kbd", + "label", + "legend", + "li", + "link", + "main", + "map", + "mark", + "math", + "menu", + "menuitem", + "meta", + "meter", + "nav", + "noscript", + "object", + "ol", + "optgroup", + "option", + "output", + "p", + "param", + "picture", + "pre", + "progress", + "q", + "rb", + "rp", + "rt", + "rtc", + "ruby", + "s", + "samp", + "script", + "search", + "section", + "select", + "slot", + "small", + "source", + "span", + "strong", + "style", + "sub", + "summary", + "sup", + "svg", + "table", + "tbody", + "td", + "template", + "textarea", + "tfoot", + "th", + "thead", + "time", + "title", + "tr", + "track", + "u", + "ul", + "var", + "video", + "wbr" +] \ No newline at end of file diff --git a/package.json b/package.json index d7f4ef0..93741d2 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "tsup": "^8.3.5" }, "devDependencies": { + "@types/jquery": "^3.5.32", "@types/node": "^22.10.5", "typescript": "^5.7.3" }, diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..87ea2bd --- /dev/null +++ b/vercel.json @@ -0,0 +1,14 @@ +{ + "$schema": "http://openapi.vercel.sh/vercel.json", + "headers": [ + { + "source": "/(.*)", + "headers": [ + { + "key": "Origin-Trial", + "value": "AgqJBzNb/dYyS/+JovzFbM178SHW/01lYlxzk/Njmu1kQmVJ5j3CzIHhaPgBng6QiaZ/T6Q5qJtsWNX1ORQ4IAgAAAByeyJvcmlnaW4iOiJodHRwczovL2VhZ2xlcmNyYWZ0LXhpLnZlcmNlbC5hcHA6NDQzIiwiZmVhdHVyZSI6IldlYkFzc2VtYmx5SlNQcm9taXNlSW50ZWdyYXRpb24iLCJleHBpcnkiOjE3NDQ2NzUyMDB9" + } + ] + } + ] +} \ No newline at end of file