zumbiepig/MineXLauncher
zumbiepig/MineXLauncher
1
0
Fork 0
mirror of https://github.com/zumbiepig/MineXLauncher.git synced 2025-06-08 07:54:49 +00:00
Code

.

Browse Source
This commit is contained in:
zumbiepig 2024-09-04 14:11:07 -07:00
parent 4e5fc6203e
commit 54f2d6a7a9
No known key found for this signature in database
GPG Key ID: 17C891BE28B953DE
3 changed files with 79 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
public/articles/index.html
View File

@ -9,35 +9,6 @@
<link rel="stylesheet" id="theme" onload="document.documentElement.style.display = ''" /> <link rel="stylesheet" id="theme" onload="document.documentElement.style.display = ''" />
<script src="/resources/scripts/google-tag.js"></script> <script src="/resources/scripts/google-tag.js"></script>
<script src="/resources/scripts/main.js"></script> <script src="/resources/scripts/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const modal = document.getElementById('article-modal');
const modalContent = document.getElementById('article-modal-content');
const closeButton = document.querySelector('.close-button');
document.querySelectorAll('.article-item').forEach((item) => {
item.addEventListener('click', function () {
const articleName = this.querySelector('.article-name').textContent;
const articleDescription = this.querySelector('.article-description').textContent;
modalContent.innerHTML = `
<h2>${articleName}</h2>
<p>${articleDescription}</p>
`;
modal.style.display = 'block';
});
});
closeButton.addEventListener('click', function () {
modal.style.display = 'none';
});
modal.addEventListener('click', function () {
modal.style.display = 'none';
});
});
</script>
</head> </head>
<body> <body>
<div class="ads-container"> <div class="ads-container">
@ -85,7 +56,7 @@
</div> </div>
<div class="main-content"> <div class="main-content">
<div class="article-list"> <div class="article-list">
<div class="article-item"> <div class="article-item" onclick="article.open('mc-server')">
<img class="article-icon" loading="lazy" src="/resources/images/icons/articles/mc-server.webp" /> <img class="article-icon" loading="lazy" src="/resources/images/icons/articles/mc-server.webp" />
<div class="article-details"> <div class="article-details">
<strong class="article-name">How To Make An Eaglercraft Server</strong> <strong class="article-name">How To Make An Eaglercraft Server</strong>
@ -94,27 +65,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="article-modal" id="article-modal">
<span class="close-button">&times;</span>
<div id="article-content">
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</div>
</div>
</div> </div>
</div> </div>
<div class="bottom-bar"> <div class="bottom-bar">
@ -129,5 +79,44 @@
<div class="ads-container"> <div class="ads-container">
<ins class="adsbygoogle" style="display: block" data-ad-client="ca-pub-1132419379737567" data-ad-slot="3280170072" data-ad-format="auto" data-full-width-responsive="true"></ins> <ins class="adsbygoogle" style="display: block" data-ad-client="ca-pub-1132419379737567" data-ad-slot="3280170072" data-ad-format="auto" data-full-width-responsive="true"></ins>
</div> </div>
<div id="article-mc-server" class="article">
<div class="article-content">
<span class="close-button" onclick="article.close()">&times;</span>
<h1>How To Make An Eaglercraft Server</h1>
<h4>Written by zumbiepig</h4>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
<p>hello 6</p>
<p>hello</p>
</div>
</div>
</body> </body>
</html> </html>

56
public/resources/styles/themes/default.css
View File

@ -764,50 +764,48 @@ nav {
margin-bottom: 10px; margin-bottom: 10px;
} }
.article-modal { .article {
display: none; display: none;
position: fixed; position: fixed;
z-index: 1000; z-index: 10;
left: 0;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease; justify-content: center;
background-color: #333; align-items: center;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
color: #fff;
border-radius: 8px;
max-width: 80vw;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
animation: slide-down 0.3s ease-out;
} }
.close-button { .article .article-content {
background-color: #333;
padding: 20px;
border: 1px solid #888;
width: 65%;
max-width: 85%;
max-height: 85%;
border-radius: 15px;
color: #fff;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #555 #333;
position: relative;
}
.article .article-content .close-button {
color: #aaa; color: #aaa;
float: right; float: right;
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
position: absolute;
top: 15px;
right: 15px;
} }
.close-button:hover, .article .article-content .close-button:hover,
.close-button:focus { .article .article-content .close-button:focus {
color: #000; color: #fff;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
@keyframes slide-down {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

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

@ -152,6 +152,17 @@ const navigate = {
}, },
}; };
const article = {
open: function (articleId: string) {
const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
if (modal) modal.style.display = 'flex';
},
close: function () {
const modals = document.querySelectorAll(`.article`);
modals.forEach((modal) => ((modal as HTMLElement).style.display = 'none'));
},
};
/*const cookie = { /*const cookie = {
set: function (key: string, value: string | number | object | [] | boolean | null | undefined, days: number) { set: function (key: string, value: string | number | object | [] | boolean | null | undefined, days: number) {
let maxAge; let maxAge;
@ -584,5 +595,5 @@ if (window.location.pathname === '/settings/') {
if (window.location.hostname === null) { if (window.location.hostname === null) {
// Stop the minifier from removing these functions // Stop the minifier from removing these functions
console.debug([navigate, query, versionSelector, game, mods, base64Gzip]); console.debug([navigate, query, versionSelector, game, mods, base64Gzip, article]);
} }