Major improvements to archive as well as server list

This commit is contained in:
LeoTurlock 2024-05-03 19:44:37 +02:00
parent 6e817b4b5b
commit a87faad887
12 changed files with 590 additions and 74 deletions

View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -8,6 +9,7 @@
<link rel="stylesheet" href="./nav_bar.css">
<link rel="stylesheet" href="./archive_stylesheet.css">
</head>
<body>
<div id="nav_bar">
@ -22,7 +24,8 @@
<p>Home</p>
</a>
<a class="link-nav_bar" href="./archive.html">
<img class="icon_link" src="./assets/icons/SF Symbols/square_stack_3d_down_right_fill.png" alt="archive_icon">
<img class="icon_link" src="./assets/icons/SF Symbols/square_stack_3d_down_right_fill.png"
alt="archive_icon">
<p>Archive</p>
</a>
<a class="link-nav_bar" href="./servers.html">
@ -40,10 +43,10 @@
</a>
</div>
<a class="link-nav_bar blurple" id="link_discord" href="https://discord.gg/xi" target="_blank">
<img class="icon_link" src="./assets/images/Discord-icon-modified.png" alt="">
<img class="icon_link" src="./assets/images/Discord-icon-modified.png" alt="discord_icon">
<p>Discord</p>
</a>
</div>
</div>
<div id="view">
<div class="page-title">
@ -51,64 +54,28 @@
<h1>Archive</h1>
<hr>
</div>
<div class="accordion">
<div class="accordion-item">
<input class="accordion-checkbox" type="checkbox" name="accordion" id="item1">
<label for="item1">
<div class="accordion-title">
<img class="chevron" src="./assets/icons/SF Symbols/arrowtriangle_right_circle_fill.png" alt="chevron_down">
<img class="accordion-icon" src="./assets/images/ResentIcon.png" alt="">
<p>Resent</p>
</div>
</label>
<div class="accordion-content">
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="./assets/images/ResentIcon.png" alt="">
<p>Resent 3.3.2 - patch 1 US </p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="./assets/images/ResentIcon.png" alt="">
<p>Resent 3.4 - patch 1 US</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.4_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.4_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="./assets/images/ResentIcon.png" alt="">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<div class="page-subtitle">
<p>Clients</p>
</div>
<div class="box-container">
<a class="box" href="./clients/1.3/1_3Clients.html">
<div class="box-content">
<p>Eaglercraft 1.3 Clients</p>
</div>
</div>
<div class="accordion-item">
<input type="checkbox" name="accordion" id="item2">
<label for="item2">Accordion Item 2</label>
<div class="accordion-content">
<p>Content for item 2.</p>
</a>
<a class="box" href="./clients/1.5/1_5Clients.html">
<div class="box-content">
<p>Eaglercraft 1.5 Clients</p>
</div>
</div>
</a>
<a class="box" href="./clients/1.8/1_8Clients.html">
<div class="box-content">
<p>EaglercraftX 1.8 Clients</p>
</div>
</a>
</div>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -71,7 +71,7 @@ class ServerEmbed {
self.isSpriteSheetLoaded = true;
setInterval(() => self.redraw(), 50);
});
this.spriteSheet.src = "icons.png";
this.spriteSheet.src = "./assets/scripts/icons.png";
this.socket = null;
this.connected = false;
this.dirty = false;

BIN
assets/scripts/icons.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

View File

@ -0,0 +1,367 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EaglerArchive</title>
<link rel="stylesheet" href="../../stylesheet.css">
<link rel="stylesheet" href="../../nav_bar.css">
<link rel="stylesheet" href="../archive_stylesheet.css">
</head>
<body>
<div id="nav_bar">
<div id="EaglerArchive">
<a id="link_EaglerArchive" href="../../index.html">
<img id="logo" src="../../assets/images/EaglerArchive.png" alt="EaglerArchive">
<p>EaglerArchive</p>
</a>
<a class="link-nav_bar" href="../../index.html">
<img class="icon_link" src="../../assets/icons/SF Symbols/house_fill.png" alt="home_icon">
<p>Home</p>
</a>
<a class="link-nav_bar" href="../../archive.html">
<img class="icon_link" src="../../assets/icons/SF Symbols/square_stack_3d_down_right_fill.png"
alt="archive_icon">
<p>Archive</p>
</a>
<a class="link-nav_bar" href="../../servers.html">
<img alt="server_icon" src="../../assets/icons/SF Symbols/hexagon.png" class="icon_link">
<p>Servers</p>
</a>
<a class="link-nav_bar" href="../../info.html">
<img class="icon_link" src="../../assets/icons/SF Symbols/exclamationmark.png" alt="info_icon">
<p>Info</p>
</a>
<a class="link-nav_bar" href="../../about.html">
<img class="icon_link" src="../../assets/icons/SF Symbols/question.png" alt="about_icon">
<p>About</p>
</a>
</div>
<a class="link-nav_bar blurple" id="link_discord" href="https://discord.gg/xi" target="_blank">
<img class="icon_link" src="../../assets/images/Discord-icon-modified.png" alt="discord_icon">
<p>Discord</p>
</a>
</div>
<div id="view">
<div class="page-title">
<hr>
<h1>Archive</h1>
<hr>
</div>
<div class="page-subtitle">
<p>1.8 Clients</p>
</div>
<div class="accordion">
<div class="accordion-item">
<input class="accordion-checkbox" type="checkbox" name="accordion" id="item1">
<label for="item1">
<div class="accordion-title">
<img class="chevron" src="../../assets/icons/SF Symbols/arrowtriangle_right_circle_fill.png"
alt="chevron_down">
<img class="accordion-icon" src="../../assets/images/eaglercraft.png" alt="Resent_icon">
<p>Eagtek</p>
</div>
</label>
<div class="accordion-content" id="eagler_content">
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/eaglercraft.png" alt="Resent_icon">
<p>EaglercraftX 1.8.8</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/eaglercraft.png" alt="Resent_icon">
<p>Resent 3.3.2 - patch 1 - US </p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/eaglercraft.png" alt="Resent_icon">
<p>Resent 3.3.2 - patch 1 - US </p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<input class="accordion-checkbox" type="checkbox" name="accordion" id="item2">
<label for="item2">
<div class="accordion-title">
<img class="chevron" src="../../assets/icons/SF Symbols/arrowtriangle_right_circle_fill.png"
alt="chevron_down">
<img class="accordion-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
</label>
<div class="accordion-content" id="resent_content">
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 3.3.2 - patch 1 - US </p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 3.4 - patch 1 - US</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.4_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.4_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 3.6 - patch 1 - US</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.6_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.6_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 3.7 - patch 1 - International</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.7_International.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.7_International.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 3.8 - patch 1 - International</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.8_Patch-1_Offline_International.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.8_Patch-1_Offline_International.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 4.0 - patch - </p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent-4.0-Patch-0-English.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent-4.0-Patch-0-English.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<input type="checkbox" name="accordion" id="item2">
<label for="item2">Accordion Item 2</label>
<div class="accordion-content">
<p>Content for item 2.</p>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -17,6 +17,7 @@
.accordion-icon {
width: 50px;
margin-right: 10px;
border-radius: 50%;
}
.accordion-item {
@ -40,11 +41,10 @@
overflow: hidden;
background-color: #555;
border-radius: 0 0 10px 10px;
transition: max-height 0.1s ease-out;
}
.accordion-item input:checked ~ .accordion-content {
max-height: calc(71px * 18); /* You can adjust this value depending on your content */
max-height: 100%; /* You can adjust this value depending on your content */
}

View File

@ -96,7 +96,11 @@
</div>
</a>
<div class="box"></div>
<div class="box">
<div class="box-content">
<div class="folder invert-icon"></div>
</div>
</div>
</div>

View File

@ -36,9 +36,12 @@
}
#nav_bar {
z-index: 1000;
display: flex;
flex-direction:row;
justify-content: space-between;
position: fixed;
width: 100%;
background-color: #333;
color: white;
@ -46,7 +49,7 @@
padding-left: var(--side_distance);
padding-right: calc(var(--side_distance) - 10px);
box-shadow: 0px 5px 0px 0px rgb(0, 0, 0, 0.2);
box-shadow: 0px 7.5px 7.5px 0px rgba(0, 0, 0, 0.5);
}
.icon_link {

View File

@ -4,8 +4,134 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./stylesheet.css">
<link rel="stylesheet" href="./nav_bar.css">
<link rel="stylesheet" href="./servers_stylesheet.css">
<script type="text/javascript">
window.addEventListener("load", () => {
go();
});
async function go() {
document.getElementsByClassName("server-embed")[0].innerHTML = "";
await new ServerEmbed(document.getElementById("vanilla-embed")).ping("wss://vanillacraftsmp.us.to"),
await new ServerEmbed(document.getElementById("zentic-embed")).ping("wss://zentic.cc")
await new ServerEmbed(document.getElementById("serverId")).ping("")
await new ServerEmbed(document.getElementById("serverId")).ping("")
await new ServerEmbed(document.getElementById("serverId")).ping("")
}
</script>
</head>
<body>
<div id="nav_bar">
<div id="EaglerArchive">
<a id="link_EaglerArchive" href="./index.html">
<img id="logo" src="./assets/images/EaglerArchive.png" alt="EaglerArchive">
<p>EaglerArchive</p>
</a>
<a class="link-nav_bar" href="./index.html">
<img class="icon_link" src="./assets/icons/SF Symbols/house_fill.png" alt="home_icon">
<p>Home</p>
</a>
<a class="link-nav_bar" href="./archive.html">
<img class="icon_link" src="./assets/icons/SF Symbols/square_stack_3d_down_right_fill.png"
alt="archive_icon">
<p>Archive</p>
</a>
<a class="link-nav_bar" href="./servers.html">
<img alt="server_icon" src="./assets/icons/SF Symbols/hexagon.png" class="icon_link">
<p>Servers</p>
</a>
<a class="link-nav_bar" href="./info.html">
<img class="icon_link" src="./assets/icons/SF Symbols/exclamationmark.png" alt="info_icon">
<p>Info</p>
</a>
<a class="link-nav_bar" href="./about.html">
<img class="icon_link" src="./assets/icons/SF Symbols/question.png" alt="about_icon">
<p>About</p>
</a>
</div>
<a class="link-nav_bar blurple" id="link_discord" href="https://discord.gg/xi" target="_blank">
<img class="icon_link" src="./assets/images/Discord-icon-modified.png" alt="discord_icon">
<p>Discord</p>
</a>
</div>
<div id="view">
<div class="page-title">
<hr>
<h1>Servers</h1>
<hr>
</div>
<div class="page-subtitle">
<p>EaglercraftX 1.8 Server List</p>
</div>
<div class="server-embed-container">
<p class="server-name">VanillaCraftSMP</p>
<div id="vanilla-embed" class="server-embed"></div>
<script type="text/javascript" src="./assets/scripts/embed.js"></script>
<div class="server-info">
<div>
<p>Info:</p>
</div>
<div>
<p>IPs:</p>
</div>
</div>
</div>
<div class="server-embed-container">
<p class="server-name">Zentic</p>
<div id="zentic-embed" class="server-embed"></div>
<script type="text/javascript" src="./assets/scripts/embed.js"></script>
<div class="server-info">
<div>
<h3>Info:</h3>
<ul>
<li>
<p>Bedwars</p>
</li>
<li>
<p>Practice</p>
</li>
</ul>
</div>
<div>
<h3>IPs:</h3>
</div>
</div>
</div>
<div class="server-embed-container">
<p class="server-name">Server Name</p>
<!----- change this id -------------------------------------- -->
<div id="serverid" class="server-embed"></div>
<script type="text/javascript" src="./assets/scripts/embed.js"></script>
<div class="server-info">
<div>
<p>Info:</p>
</div>
<div>
<p>IPs:</p>
</div>
</div>
</div>
</div>
</body>
</html>

30
servers_stylesheet.css Normal file
View File

@ -0,0 +1,30 @@
.server-embed-container {
margin-bottom: 20px;
padding: 10px;
border-radius: 20px;
background-color: #333;
}
.server-name {
font-size: 20px;
font-family: 'SF-Bold';
}
.server-embed {
width: 900px;
height: 140px;
background-color: black;
margin: 10px 0;
}
.server-info div {
margin-bottom: 10px;
}
.server-info div:first-child {
font-family: 'SF-Bold';
}
.server-info li {
margin-left: 25px;
}

View File

@ -38,13 +38,7 @@ body {
width: 100%;;
padding-left: var(--side_distance);
padding-right: var(--side_distance);
}
#view .page-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-bottom: 30px;
}
#view hr {
@ -60,12 +54,35 @@ body {
text-align: center;
}
.page-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-top: 65px;
}
.page-subtitle {
display: flex;
flex-direction: row;
margin-bottom: 20px;
}
.page-subtitle p {
font-family: 'SF-Bold';
font-size: 30px;
margin: 0;
}
.folder {
background-image: url('./assets/folder-closed.png');
width: 269px;
height: 212px;
margin: 0 auto;
background-image: url('./assets/images/folder_closed.png');
}
.folder:hover {
background-image: url('./assets/folder-open.png');
background-image: url('./assets/images/folder_open.png');
}
.box-container {
@ -80,6 +97,7 @@ body {
color: white;
font-size: 30px;
text-align: center;
justify-content: center;
padding: 25px;
border-radius: 20px;
text-decoration: none;
@ -92,12 +110,13 @@ body {
text-decoration: none;
text-align: center;
justify-content: center;
align-items: center;
color: white;
transition: background-color 0.75s ease, color 0.75s ease, filter 0.75s ease;
}
.box-content img {
transition: filter 0.75s ease;
transition: all 0.75s ease;
}
.box:hover {