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

29
js/main.js
View File

@ -34,10 +34,31 @@ $(function() {
}
function handleSearchBarKeyup() {
const query = $('#search-bar').val().toLowerCase();
$('.filter-button').each(function() {
toggleVisibility(this, $(this).text().toLowerCase().indexOf(query) > -1);
const filterButtons = $('.filter-button').map(function() {
return { element: this, text: $(this).text() };
}).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() {
@ -53,4 +74,4 @@ $(function() {
$("#showModded").on("change", updateShowModded);
updateShowModded();
});
});

1
js/popupPrompt.js
View File

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