EaglercraftX-Client-Collections/Eaglercraft-Archive
4
1
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Added Folder Code

Browse Source 
Still downloading all the eaglercraft archive files

Signed-off-by: PrestonT500 <preston.truong1@outlook.com>
This commit is contained in:
PrestonT500 2024-11-28 22:29:45 -08:00
parent 3b7868af54
commit 44ed39364d
4 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
icons/folder-closed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
icons/folder-open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

52
index.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eaglercraft Archive</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Eaglercraft Archive</h1>
<h2>Archive Versions</h2>
<div class="folder" onclick="toggleFolder('folder1', this)">
<img src="icons/folder-closed.png" alt="Folder Icon" class="folder-icon">
<span>Eaglercraft 1.8</span>
</div>
<div id="folder1" class="folder-items">
<div><a href="" download></a></div>
</div>
<div class="folder" onclick="toggleFolder('folder2', this)">
<img src="icons/folder-closed.png" alt="Folder Icon" class="folder-icon">
<span>Eaglercraft b1.3</span>
</div>
<div id="folder2" class="folder-items">
<div><a href="" download></a></div>
</div>
<div class="folder" onclick="toggleFolder('folder3', this)">
<img src="icons/folder-closed.png" alt="Folder Icon" class="folder-icon">
<span>Eaglercraft 1.5</span>
</div>
<div id="folder3" class="folder-items">
<div><a href="" download></a></div>
</div>
<script>
function toggleFolder(id, folderElement) {
const folder = document.getElementById(id);
const icon = folderElement.querySelector('.folder-icon');
folder.classList.toggle('open');
if (folder.classList.contains('open')) {
icon.src = "icons/folder-open.png";
} else {
icon.src = "icons/folder-closed.png";
}
}
</script>
</body>
</html>

40
style.css Normal file
View File

@ -0,0 +1,40 @@
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.folder {
cursor: pointer;
display: flex;
align-items: center;
margin-bottom: 5px;
}
.folder img {
width: 20px;
margin-right: 10px;
}
.folder-items {
display: none;
margin-left: 30px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.folder-items.open {
display: block;
max-height: 500px;
}
.folder-items a {
text-decoration: none;
color: blue;
margin-bottom: 5px;
display: inline-block;
}
.folder-items a:hover {
text-decoration: underline;
}