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

add tutorial open and close animation

Browse Source
This commit is contained in:
zumbiepig 2024-09-05 14:32:58 -07:00
parent 44a08b90f6
commit 71a3a812d2
No known key found for this signature in database
GPG Key ID: 17C891BE28B953DE
3 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/articles/index.html
View File

@ -66,7 +66,7 @@
<div class="article-item" onclick="article.open('cloudflare-tunnel')">
<img class="article-icon" loading="lazy" src="/resources/images/icons/articles/cloudflare-tunnel.webp" />
<div class="article-details">
<strong class="article-name">How To Make A Cloudflare Tunnel Domain</strong>
<strong class="article-name">How to Set Up a Cloudflare Tunnel for an Eaglercraft Server</strong>
<p class="article-description">This brief guide walks you through configuring a Cloudflare Tunnel for your Eaglercraft server.</p>
</div>
</div>
@ -88,7 +88,7 @@
</div>
<div id="article-mc-server" class="article">
<div class="article-content">
<span class="close-button" onclick="article.close()">&times;</span>
<span class="close-button" onclick="article.close('mc-server')">&times;</span>
<h1>How To Make An Eaglercraft Server</h1>
<h5>Written by ServerDotSo and revised by zumbiepig</h5>
<p>Have you ever wondered how to make an Eaglercraft Server?</p>
@ -168,8 +168,8 @@
</div>
<div id="article-cloudflare-tunnel" class="article">
<div class="article-content">
<span class="close-button" onclick="article.close()">&times;</span>
<h1>How to Set Up A Cloudflare Tunnel for Eaglercraft Server</h1>
<span class="close-button" onclick="article.close('cloudflare-tunnel')">&times;</span>
<h1>How to Set Up a Cloudflare Tunnel for an Eaglercraft Server</h1>
<h5>Written by zumbiepig and SpeedSlicer</h5>
<p>In this guide, we'll walk you through the steps to set up a Cloudflare Tunnel for your Eaglercraft server, which is running on <code>ws://localhost:8081</code>.</p>
<h3>Prerequisites</h3>

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

@ -353,7 +353,6 @@ nav {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
@ -777,6 +776,34 @@ nav {
align-items: center;
}
@keyframes openArticle {
0% {
opacity: 0;
scale: 0;
}
80% {
scale: 1.1;
}
100% {
opacity: 1;
scale: 1;
}
}
@keyframes closeArticle {
0% {
opacity: 1;
scale: 1;
}
20% {
scale: 1.1;
}
100% {
opacity: 0;
scale: 0;
}
}
.article .article-content {
background-color: #333;
padding: 20px;

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

@ -155,11 +155,17 @@ const navigate = {
const article = {
open: function (articleId: string) {
const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
if (modal) modal.style.display = 'flex';
if (modal) {
modal.style.animation = 'openArticle 0.5s ease-in-out';
modal.style.display = 'flex';
}
},
close: function () {
const modals = document.querySelectorAll(`.article`);
modals.forEach((modal) => ((modal as HTMLElement).style.display = 'none'));
close: function (articleId: string) {
const modal = document.querySelector(`#article-${articleId}`) as HTMLElement | null;
if (modal) {
modal.style.animation = 'closeArticle 0.5s ease-in-out';
modal.addEventListener('animationend', () => (modal.style.display = 'none'), { once: true });
}
},
};