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 830a11bcec
commit 1feb488b21
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 class="article-list">
<div onclick="article.open('mc-server')"> <div onclick="article.open('mc-server')">
<img loading="lazy" src="/resources/images/icons/articles/mc-server.webp" /> <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> <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> <p>Have you ever wondered how to make an Eaglercraft Server? Read this article to find out how!</p>
</div> </div>
</div> </div>
<div onclick="article.open('cloudflare-tunnel')"> <div onclick="article.open('cloudflare-tunnel')">
<img loading="lazy" src="/resources/images/icons/articles/cloudflare-tunnel.webp" /> <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> <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> <p>This brief guide walks you through configuring a Cloudflare Tunnel for your Eaglercraft server.</p>
</div> </div>

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

@ -161,7 +161,7 @@ const navigate = {
const article = { const article = {
open: function (articleId: string) { open: function (articleId: string) {
const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null; 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) { if (!articleAnimationLock && modal && modalContent) {
articleAnimationLock = true; articleAnimationLock = true;
modal.style.animation = '0.5s ease-in-out 1 normal article'; modal.style.animation = '0.5s ease-in-out 1 normal article';
@ -329,7 +329,7 @@ const mods = {
mods.push(mod); mods.push(mod);
mods.sort(); mods.sort();
storage.local.set('mods', mods); storage.local.set('mods', mods);
const modInstallElem = document.querySelector(`#mod-install-${modId}`); const modInstallElem = document.querySelector(`#mod-${modId}`);
if (modInstallElem) { if (modInstallElem) {
modInstallElem.textContent = 'Uninstall'; modInstallElem.textContent = 'Uninstall';
modInstallElem.classList.add('installed'); modInstallElem.classList.add('installed');
@ -337,7 +337,7 @@ const mods = {
} else { } else {
mods.splice(modIndex, 1); mods.splice(modIndex, 1);
storage.local.set('mods', mods); storage.local.set('mods', mods);
const modInstallElem = document.querySelector(`#mod-install-${modId}`); const modInstallElem = document.querySelector(`#mod-${modId}`);
if (modInstallElem) { if (modInstallElem) {
modInstallElem.textContent = 'Install'; modInstallElem.textContent = 'Install';
modInstallElem.classList.remove('installed'); modInstallElem.classList.remove('installed');
@ -614,21 +614,21 @@ if (window.location.pathname === '/settings/') {
// @ts-expect-error // @ts-expect-error
addonData[addonType].forEach((addon) => { addonData[addonType].forEach((addon) => {
const modItem = document.createElement('div'); 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 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' 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}.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="mod-download" download>Download</a>` : `<a href="/resources/mods/downloads/${addon.id}.zip" class="download" download>Download</a>`
}</div>`; }</div>`;
modList?.appendChild(modItem); modList?.appendChild(modItem);
}); });
if (addonType === 'mods') { if (addonType === 'mods') {
const installedMods = storage.local.get('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) => { 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`)) { if (installedMods.includes(`/resources/mods/downloads/${modId}.js`)) {
modElement.textContent = 'Uninstall'; modElement.textContent = 'Uninstall';
modElement.classList.add('installed'); modElement.classList.add('installed');

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

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