EaglercraftX-Client-Collections/EaglercraftX-Site
4
5
Fork 2
Code Issues Pull Requests Actions Projects Wiki Activity

css is a pain bruh

Browse Source 
i re-did the transitions, used fuse.js for client fuzzy searching, and added some more useful features
This commit is contained in:
quartinal 2025-01-19 16:56:50 -08:00
parent 5f96c40cee
commit dbfca4d47e
8 changed files with 327 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

562
css/styles.css
View File

@ -1,269 +1,293 @@
/* General Styles */ /* General Styles */
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
background-color: #f1f1f1; background-color: var(--ctp-macchiato-overlay0);
background-image: url("/images/grass-background.png"); background-size: auto;
background-size: auto; margin: 0;
margin: 0; padding: 0;
padding: 0; text-align: center;
text-align: center; display: flex;
display: flex; flex-direction: column;
flex-direction: column; min-height: 100vh;
min-height: 100vh; overflow-x: hidden;
overflow-x: hidden; color: var(--ctp-macchiato-mantle);
color: #333; transition: background-color 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), color 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
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 {
body.dark-mode { background-color: var(--ctp-macchiato-mantle);
background-color: #141414; color: var(--ctp-macchiato-text);
color: #f1f1f1; }
}
header {
header { background-color: var(--ctp-macchiato-green);
background-color: #4caf50; color: var(--ctp-macchiato-crust);
color: black; padding: 20px 0;
padding: 20px 0; text-align: center;
text-align: center; transition: background-color 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), color 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
} }
header h1 { header h1 {
margin: 0; margin: 0;
} }
main { main {
flex: 1; flex: 1;
padding: 20px; padding: 20px;
} }
.darkmodediv {
padding-left: 480px; .darkmodediv {
padding-right: 480px; padding-left: 480px;
background: grey; padding-right: 480px;
} background: var(--ctp-macchiato-rosewater);
}
.counter, .info, .clients, .danger-zone {
margin-bottom: 20px; .counter, .info, .clients, .danger-zone {
} margin-bottom: 20px;
}
.Container18, .Container15, .ContainerOther {
display: flex; .Container18, .Container15, .ContainerOther {
flex-wrap: wrap; display: flex;
justify-content: center; flex-wrap: wrap;
gap: 10px; justify-content: center;
margin: 20px 0; gap: 40px;
} margin: 20px 0;
}
button, .source-btn, .dsc-btn, .clr-btn {
background-color: #4caf50; button, .source-btn, .dsc-btn, .clr-btn {
color: white; background-color: var(--ctp-macchiato-green);
padding: 10px 20px; color: var(--ctp-macchiato-mantle);
font-size: 16px; padding: 10px 20px;
cursor: pointer; font-size: 16px;
border: none; cursor: pointer;
border-radius: 5px; border: none;
text-decoration: none; border-radius: 5px;
display: inline-block; text-decoration: none;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-block;
} transition: background-color 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
.clientbutton button { }
background-color: #5fff5a;
} .clientbutton button {
button:hover { background-color: var(--ctp-macchiato-green);
transform: scale(1.05) }
}
.clr-btn:hover { button:hover {
background-color: #ff3c00; transform: scale(+1.14) translateX(-20px);
transform: scale(1.05); }
}
.dsc-btn:hover { button:focus {
background-color: #9656ce; outline: 3px solid var(--ctp-macchiato-overlay2);
transform: scale(1.05); outline-offset: 2px;
} }
.source-btn:hover {
background-color: #000; .clr-btn:hover {
transform: scale(1.05); background-color: var(--ctp-macchiato-peach);
} transform: scale(+1.14) translateX(-20px);
.source-btn { }
background-color: #000; /* Black color for GitHub button */
} .dsc-btn:hover {
background-color: var(--ctp-macchiato-mauve);
.dsc-btn { transform: scale(+1.14) translateX(-20px);
background-color: #9656ce; color: var(--ctp-macchiato-mantle);
} }
.clr-btn { .source-btn:hover {
background-color: #ff3c00; background-color: var(--ctp-macchiato-mantle);
} transform: scale(+1.14) translateX(-20px);
}
.search-container {
margin: 20px 0; .source-btn {
} background-color: var(--ctp-macchiato-mantle); /* Black color for GitHub button */
}
#search-bar {
padding: 10px; .dsc-btn {
border: 1px solid #ccc; background-color: var(--ctp-macchiato-crust);
border-radius: 4px; color: var(--ctp-macchiato-lavender);
width: 50%; transition: 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
max-width: 400px; }
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} .clr-btn {
background-color: var(--ctp-macchiato-peach);
#search-bar:focus { }
border-color: #4caf50;
outline: none; .search-container {
} margin: 20px 0;
}
.footer {
background-color: #808080; #search-bar {
color: white; /* Light text color for footer */ background-color: var(--ctp-macchiato-mantle);
padding: 10px; padding: 10px;
text-align: center; border-radius: 35px;
opacity: 0.9; width: 50%;
} outline: none;
border: 4px solid var(--ctp-macchiato-green);
.footer a { color: var(--ctp-macchiato-text);
color: white; /* Light text color for footer links */ }
text-decoration: none;
margin: 0 10px; #search-bar:focus {
opacity: 1; border-width: 5px;
} }
.footer a:hover { #search-bar::placeholder {
text-decoration: underline; color: var(--ctp-macchiato-text);
opacity: 1; }
}
.footer {
.footer button { display: flex;
color: white; justify-content: center;
padding: 10px 20px; align-items: center;
font-size: 16px; gap: 40px;
cursor: pointer; background-color: var(--ctp-macchiato-overlay1);
border: none; color: var(--ctp-macchiato-mantle); /* Light text color for footer */
border-radius: 5px; padding: 10px;
text-decoration: none; text-align: center;
display: inline-block; opacity: 0.9;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), color 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
opacity: 1; }
}
.footer a {
/* Modal Styles */ color: var(--ctp-macchiato-text); /* Light text color for footer links */
.modal { text-decoration: none;
display: none; margin: 0 10px;
position: fixed; opacity: 1;
z-index: 1; }
left: 0;
top: 0; .footer a:hover {
width: 100%; text-decoration: underline;
height: 100%; opacity: 1;
background-color: rgba(0, 0, 0, 0.5); }
justify-content: center;
align-items: center; .footer button {
} color: var(--ctp-macchiato-mantle);
padding: 10px 20px;
.modal-content { font-size: 16px;
background-color: white; cursor: pointer;
padding: 20px; border: none;
border-radius: 10px; border-radius: 5px;
width: 80%; text-decoration: none;
max-width: 400px; display: inline-block;
text-align: center; transition: background-color 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); opacity: 1;
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 Styles */
.modal h2 { .modal {
color: #333; display: none;
} position: fixed;
z-index: 1;
.modal p { left: 0;
color: #555; top: 0;
margin-bottom: 20px; width: 100%;
} height: 100%;
background-color: var(--ctp-macchiato-mantle);
.modal button { justify-content: center;
background-color: #4caf50; align-items: center;
color: white; }
padding: 10px 20px;
font-size: 16px; .modal-content {
cursor: pointer; background-color: var(--ctp-macchiato-text);
border: none; padding: 20px;
border-radius: 5px; border-radius: 10px;
margin: 5px; width: 80%;
} max-width: 400px;
text-align: center;
.modal button.cancel-btn { box-shadow: 0px 4px 8px var(--ctp-macchiato-mantle);
background-color: #f44336; transition: background-color 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), color 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
} }
.modal button:hover { .modal h2 {
background-color: #45a049; color: var(--ctp-macchiato-surface1);
} }
.modal button.cancel-btn:hover { .modal p {
background-color: #e53935; color: var(--ctp-macchiato-mantle);
} margin-bottom: 20px;
}
.copy-link {
background-color: #f4f4f4; .modal button {
padding: 10px; background-color: var(--ctp-macchiato-green);
border: 1px solid #ddd; color: var(--ctp-macchiato-text);
border-radius: 5px; padding: 10px 20px;
margin-bottom: 15px; font-size: 16px;
} cursor: pointer;
border: none;
.copy-btn { border-radius: 5px;
background-color: #9656ce; margin: 5px;
} }
.copy-btn:hover { .modal button.cancel-btn {
background-color: #5b209a; background-color: var(--ctp-macchiato-peach);
} }
/* Dark Mode Styles */ .modal button:hover {
body.dark-mode .modal-content { background-color: var(--ctp-macchiato-green);
background-color: #333; }
color: #f1f1f1;
} .modal button.cancel-btn:hover {
background-color: var(--ctp-macchiato-maroon);
body.dark-mode .modal h2 { }
color: #f1f1f1;
} .copy-link {
background-color: var(--ctp-macchiato-lavender);
body.dark-mode .modal p { padding: 10px;
color: #ccc; border: 1px solid var(--ctp-macchiato-text);
} border-radius: 5px;
margin-bottom: 15px;
body.dark-mode #search-bar { }
background-color: #444;
color: #f1f1f1; .copy-btn {
border-color: #555; background-color: var(--ctp-macchiato-mauve);
} }
body.dark-mode #search-bar:focus { .copy-btn:hover {
border-color: #4caf50; filter: brightness(1.2);
} }
body.dark-mode .footer { /* Dark Mode Styles */
background-color: #444; /* Dark gray color for footer in dark mode */ body.dark-mode .modal-content {
color: white; /* Light text color for footer in dark mode */ background-color: var(--ctp-macchiato-mantle);
} color: var(--ctp-macchiato-text);
}
body.dark-mode .footer a {
color: white; /* Light text color for footer links in dark mode */ body.dark-mode .modal h2 {
} color: var(--ctp-macchiato-text);
}
body.dark-mode .footer button.server-list {
background-color: #000; /* Black color for Server List button in dark mode */ body.dark-mode .modal p {
} color: var(--ctp-macchiato-text);
}
body.dark-mode .footer button.server-list:hover {
background-color: #333; /* Slightly lighter shade for hover effect in dark mode */ body.dark-mode #search-bar {
} background-color: var(--ctp-macchiato-overlay0);
color: var(--ctp-macchiato-text);
body.dark-mode .footer button.eaglerrinth-mod-list { border-color: var(--ctp-macchiato-overlay1);
background-color: #9656ce; /* Same color as Discord link button in dark mode */ }
}
body.dark-mode #search-bar:focus {
body.dark-mode .footer button.eaglerrinth-mod-list:hover { border-color: var(--ctp-macchiato-green);
background-color: #a751f2; /* Slightly lighter shade for hover effect in dark mode */ }
}
body.dark-mode .footer {
background-color: var(--ctp-macchiato-overlay0); /* Dark gray color for footer in dark mode */
color: var(--ctp-macchiato-text); /* Light text color for footer in dark mode */
}
body.dark-mode .footer a {
color: var(--ctp-macchiato-text); /* Light text color for footer links in dark mode */
}
body.dark-mode .footer button.server-list {
background-color: var(--ctp-macchiato-crust); /* Black color for Server List button in dark mode */
}
body.dark-mode .footer button.server-list:hover {
background-color: var(--ctp-macchiato-overlay1); /* Slightly lighter shade for hover effect in dark mode */
}
body.dark-mode .footer button.eaglerrinth-mod-list {
background-color: var(--ctp-macchiato-mauve); /* Same color as Discord link button in dark mode */
}
body.dark-mode .footer button.eaglerrinth-mod-list:hover {
filter: brightness(1.2); /* Slightly lighter shade for hover effect in dark mode */
}

BIN
eagler-files/modded/wasm/1.8/EaglyMC/classes.wasm
View File

Binary file not shown.

BIN
eagler-files/modded/wasm/1.8/EaglyMC/classes.wasm-deobfuscator.wasm
View File

Binary file not shown.

BIN
eagler-files/modded/wasm/1.8/EaglyMC/loader.wasm
View File

Binary file not shown.

6
index.html
View File

@ -15,7 +15,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Eaglercraft, EaglercraftX, Eaglercraft X, EaglercraftX 1.8, Eaglercraft X 1.8, EaglercraftX 1-8, Eaglercraft X 1-8, Eagler, Minecraft, MC, MC Web, MC Online, Minecraft Online, Minecraft Web, Eaglercraft 1.9, Eaglercraft 1-9, Eaglercraft 1.9, Eaglercraft 1-9, Eaglercraft 1.5.2, Eaglercraft 1-5-2, Eaglercraft Clients, Games, Games, 1.8, 1.8.8, 1-8, 1-8-8, 1.9, 1-9, 1.5, 1.5.2, 1-5, 1-5-2"> <meta name="keywords" content="Eaglercraft, EaglercraftX, Eaglercraft X, EaglercraftX 1.8, Eaglercraft X 1.8, EaglercraftX 1-8, Eaglercraft X 1-8, Eagler, Minecraft, MC, MC Web, MC Online, Minecraft Online, Minecraft Web, Eaglercraft 1.9, Eaglercraft 1-9, Eaglercraft 1.9, Eaglercraft 1-9, Eaglercraft 1.5.2, Eaglercraft 1-5-2, Eaglercraft Clients, Games, Games, 1.8, 1.8.8, 1-8, 1-8-8, 1.9, 1-9, 1.5, 1.5.2, 1-5, 1-5-2">
<link rel="icon" type="image/x-icon" href="images/eaglercommunity.png"> <link rel="icon" type="image/x-icon" href="images/eaglercommunity.png">
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eruda"></script> <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2593894696548093" crossorigin="anonymous"></script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2593894696548093" crossorigin="anonymous"></script>
@ -24,7 +25,8 @@
<script type="module" src="js/main.js"></script> <script type="module" src="js/main.js"></script>
<script type="module" src="js/popupPrompt.js"></script> <script type="module" src="js/popupPrompt.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bowser"></script> <script src="https://cdn.jsdelivr.net/npm/bowser"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js"></script>
<meta property="og:title" content="Eaglercraft Client Collections" /> <meta property="og:title" content="Eaglercraft Client Collections" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://www.eaglercraft.win" /> <meta property="og:url" content="https://www.eaglercraft.win" />

6
js/ga4.js
View File

@ -8,7 +8,8 @@ function addGoogleAnalyticsTags() {
"https://notproxiedclient.eaglercraft.win", "https://notproxiedclient.eaglercraft.win",
"https://client.eaglercraft.win", "https://client.eaglercraft.win",
"https://client2.eaglercraft.win", "https://client2.eaglercraft.win",
"https://client3.eaglercraft.win" "https://client3.eaglercraft.win",
"https://play.eaglercraft.win"
]; ];
const trackingIds = { const trackingIds = {
@ -19,7 +20,8 @@ function addGoogleAnalyticsTags() {
"https://notproxiedclient.eaglercraft.win": "G-QWHQVSNLB6", "https://notproxiedclient.eaglercraft.win": "G-QWHQVSNLB6",
"https://client.eaglercraft.win": "G-SGELV1H17J", "https://client.eaglercraft.win": "G-SGELV1H17J",
"https://client2.eaglercraft.win": "G-995EPK8DXR", "https://client2.eaglercraft.win": "G-995EPK8DXR",
"https://client3.eaglercraft.win": "G-3M7CR3HRJV" "https://client3.eaglercraft.win": "G-3M7CR3HRJV",
"https://play.eaglercraft.win": "G-759HWVCM2S"
}; };
let trackingId = "G-81F615LDEZ"; // Default fallback tracking ID let trackingId = "G-81F615LDEZ"; // Default fallback tracking ID

29
js/main.js
View File

@ -34,10 +34,31 @@ $(function() {
} }
function handleSearchBarKeyup() { function handleSearchBarKeyup() {
const query = $('#search-bar').val().toLowerCase(); const filterButtons = $('.filter-button').map(function() {
$('.filter-button').each(function() { return { element: this, text: $(this).text() };
toggleVisibility(this, $(this).text().toLowerCase().indexOf(query) > -1); }).get();
const fuse = new Fuse(filterButtons, {
keys: ['text'],
threshold: 0.3
}); });
const query = $('#search-bar').val().toLowerCase();
if (query === '') {
// Show all buttons if the search query is empty
$('.filter-button').each(function() {
toggleVisibility(this, true);
});
} else {
const results = fuse.search(query);
$('.filter-button').each(function() {
toggleVisibility(this, false);
});
results.forEach(result => {
toggleVisibility(result.item.element, true);
});
}
} }
function updateShowModded() { function updateShowModded() {
@ -53,4 +74,4 @@ $(function() {
$("#showModded").on("change", updateShowModded); $("#showModded").on("change", updateShowModded);
updateShowModded(); updateShowModded();
}); });

1
js/popupPrompt.js
View File

@ -9,6 +9,7 @@ window.onload = () => {
switch (response.toLowerCase()) { switch (response.toLowerCase()) {
case 'y': case 'y':
/** @type {HTMLAnchorElement} */
const discordLink = document.querySelector('a.dsc-btn'); const discordLink = document.querySelector('a.dsc-btn');
if (discordLink) { if (discordLink) {
const opened = window.open(discordLink.href); const opened = window.open(discordLink.href);