zumbiepig/MineXLauncher
zumbiepig/MineXLauncher
1
0
Fork 0
mirror of https://github.com/zumbiepig/MineXLauncher.git synced 2025-06-08 09:24:48 +00:00
Code

.

Browse Source
This commit is contained in:
zumbiepig 2024-09-07 10:41:14 -07:00
parent a5b3d3e0a2
commit 88ef4f565e
No known key found for this signature in database
GPG Key ID: 17C891BE28B953DE
3 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/articles/index.html
View File

@ -65,14 +65,14 @@
<div class="article-list">
<div onclick="article.open('mc-server')">
<img loading="lazy" src="/resources/images/icons/articles/mc-server.webp" />
<div class="article-details">
<div class="details">
<strong>How To Make An Eaglercraft Server</strong>
<p>Have you ever wondered how to make an Eaglercraft Server? Read this article to find out how!</p>
</div>
</div>
<div onclick="article.open('cloudflare-tunnel')">
<img loading="lazy" src="/resources/images/icons/articles/cloudflare-tunnel.webp" />
<div class="article-details">
<div class="details">
<strong>Setting Up a Cloudflare Tunnel for an Eaglercraft Server</strong>
<p>This brief guide walks you through configuring a Cloudflare Tunnel for your Eaglercraft server.</p>
</div>

18
src/resources/scripts/main.ts
View File

@ -161,7 +161,7 @@ const navigate = {
const article = {
open: function (articleId: string) {
const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
const modalContent = document.querySelector(`#article-${articleId} .article-content`) as HTMLElement | null;
const modalContent = document.querySelector(`#article-${articleId} div`) as HTMLElement | null;
if (!articleAnimationLock && modal && modalContent) {
articleAnimationLock = true;
modal.style.animation = '0.5s ease-in-out 1 normal article';
@ -329,7 +329,7 @@ const mods = {
mods.push(mod);
mods.sort();
storage.local.set('mods', mods);
const modInstallElem = document.querySelector(`#mod-install-${modId}`);
const modInstallElem = document.querySelector(`#mod-${modId}`);
if (modInstallElem) {
modInstallElem.textContent = 'Uninstall';
modInstallElem.classList.add('installed');
@ -337,7 +337,7 @@ const mods = {
} else {
mods.splice(modIndex, 1);
storage.local.set('mods', mods);
const modInstallElem = document.querySelector(`#mod-install-${modId}`);
const modInstallElem = document.querySelector(`#mod-${modId}`);
if (modInstallElem) {
modInstallElem.textContent = 'Install';
modInstallElem.classList.remove('installed');
@ -614,21 +614,21 @@ if (window.location.pathname === '/settings/') {
// @ts-expect-error
addonData[addonType].forEach((addon) => {
const modItem = document.createElement('div');
modItem.innerHTML = `<img loading="lazy" src="/resources/mods/icons/${addon.id}.webp" /><div class="mod-details"><strong>${
modItem.innerHTML = `<img loading="lazy" src="/resources/mods/icons/${addon.id}.webp" /><div class="details"><strong>${
addon.name
}</strong><p class="mod-author">By <a href="${addon.authorLink}" target="_blank">${addon.author}</a></p><p class="mod-description">${addon.description}</p></div><div class="mod-links">${
}</strong><p class="author">By <a href="${addon.authorLink}" target="_blank">${addon.author}</a></p><p class="description">${addon.description}</p></div><div class="links">${
addonType === 'mods'
? `<a href="/resources/mods/downloads/${addon.id}.js" class="mod-download" download>Download</a><a class="mod-install" id="mod-install-${addon.id}" onclick="mods.toggle('${addon.id}')">Install</a>`
: `<a href="/resources/mods/downloads/${addon.id}.zip" class="mod-download" download>Download</a>`
? `<a href="/resources/mods/downloads/${addon.id}.js" class="download" download>Download</a><a class="install" id="mod-${addon.id}" onclick="mods.toggle('${addon.id}')">Install</a>`
: `<a href="/resources/mods/downloads/${addon.id}.zip" class="download" download>Download</a>`
}</div>`;
modList?.appendChild(modItem);
});
if (addonType === 'mods') {
const installedMods = storage.local.get('mods') ?? [];
const modElements = document.querySelectorAll('.mod-install');
const modElements = document.querySelectorAll('.mod-list > div .links .install');
modElements.forEach((modElement) => {
const modId = /^mod-install-(.*)$/.exec(modElement.id)?.[1];
const modId = /^mod-(.*)$/.exec(modElement.id)?.[1];
if (installedMods.includes(`/resources/mods/downloads/${modId}.js`)) {
modElement.textContent = 'Uninstall';
modElement.classList.add('installed');

54
src/resources/styles/themes/default.css
View File

@ -407,7 +407,7 @@ body {
scrollbar-color: #555 #333;
}
.mod-list div {
.mod-list > div {
background-color: #333;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
@ -417,7 +417,7 @@ body {
padding-bottom: 35px;
}
.mod-list div img {
.mod-list > div img {
width: 80px;
height: 80px;
margin: 0 auto 10px;
@ -425,34 +425,34 @@ body {
object-fit: cover;
}
.mod-list div .mod-details {
.mod-list > div .details {
padding: 10px 0;
}
.mod-list div .mod-details strong {
.mod-list > div .details strong {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
color: #fff;
}
.mod-list div .mod-details .mod-author {
.mod-list > div .details .author {
font-size: 12px;
color: #ccc;
margin-bottom: 5px;
}
.mod-list div .mod-details .mod-author a {
.mod-list > div .details .author a {
color: #0000ee;
}
.mod-list div .mod-details .mod-description {
.mod-list > div .details .description {
font-size: 14px;
color: #bbb;
margin-bottom: 10px;
}
.mod-list div .mod-links {
.mod-list > div .links {
display: flex;
justify-content: space-around;
width: calc(100% - 10px);
@ -462,8 +462,8 @@ body {
justify-content: center;
}
.mod-list div .mod-links .mod-download,
.mod-list div .mod-links .mod-install {
.mod-list > div .links .download,
.mod-list > div .links .install {
flex: 1;
margin: 0 5px;
padding: 5px;
@ -473,29 +473,29 @@ body {
transition: background-color 0.3s;
}
.mod-list div .mod-links .mod-download {
.mod-list > div .links .download {
background-color: #555;
}
.mod-list div .mod-links .mod-download:hover {
.mod-list > div .links .download:hover {
cursor: pointer;
background-color: #777;
}
.mod-list div .mod-links .mod-install {
.mod-list > div .links .install {
background-color: #4c4;
}
.mod-list div .mod-links .mod-install:hover {
.mod-list > div .links .install:hover {
cursor: pointer;
background-color: #00b300;
}
.mod-list div .mod-links .mod-install.installed {
.mod-list > div .links .install.installed {
background-color: #ff0000;
}
.mod-list div .mod-links .mod-install.installed:hover {
.mod-list > div .links .install.installed:hover {
background-color: #cc0000;
}
@ -509,7 +509,7 @@ body {
scrollbar-color: #555 #333;
}
.article-list div {
.article-list > div {
background-color: #333;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
@ -519,13 +519,13 @@ body {
padding-bottom: 0;
}
.article-list div:hover {
.article-list > div:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
cursor: pointer;
background-color: #3d3d3d;
}
.article-list div img {
.article-list > div img {
width: 80px;
height: 80px;
margin: 0 auto 10px;
@ -533,18 +533,18 @@ body {
object-fit: cover;
}
.article-list div .article-details {
.article-list > div .details {
padding: 10px 0;
}
.article-list div .article-details strong {
.article-list > div .details strong {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
color: #fff;
}
.article-list div .article-details p {
.article-list > div .details p {
font-size: 14px;
color: #bbb;
margin-bottom: 10px;
@ -561,7 +561,7 @@ body {
align-items: center;
}
.article div {
.article > div {
background-color: #333;
padding: 20px;
border: 1px solid #888;
@ -576,7 +576,7 @@ body {
position: relative;
}
.article div span {
.article > div span {
color: #aaa;
float: right;
font-size: 28px;
@ -586,14 +586,14 @@ body {
right: 15px;
}
.article div span:hover,
.article div span:focus {
.article > div span:hover,
.article > div span:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.article div div a {
.article > div div a {
color: #0000ee;
}