From 54f2d6a7a9a9e6d82895f25acdedada3b8ca37a5 Mon Sep 17 00:00:00 2001
From: zumbiepig <121742281+zumbiepig@users.noreply.github.com>
Date: Wed, 4 Sep 2024 14:11:07 -0700
Subject: [PATCH] .

---
 public/articles/index.html                 | 91 ++++++++++------------
 public/resources/styles/themes/default.css | 56 +++++++------
 src/resources/scripts/main.ts              | 13 +++-
 3 files changed, 79 insertions(+), 81 deletions(-)
diff --git a/public/articles/index.html b/public/articles/index.html
index 8a59ed1..a23f392 100644
--- a/public/articles/index.html
+++ b/public/articles/index.html
@@ -9,35 +9,6 @@
 		<link rel="stylesheet" id="theme" onload="document.documentElement.style.display = ''" />
 		<script src="/resources/scripts/google-tag.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>
 	<body>
 		<div class="ads-container">
@@ -85,7 +56,7 @@
 					</div>
 					<div class="main-content">
 						<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" />
 								<div class="article-details">
 									<strong class="article-name">How To Make An Eaglercraft Server</strong>
@@ -94,27 +65,6 @@
 							</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 class="bottom-bar">
@@ -129,5 +79,44 @@
 		<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>
 		</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>
 </html>
diff --git a/public/resources/styles/themes/default.css b/public/resources/styles/themes/default.css
index a061894..4276e57 100644
--- a/public/resources/styles/themes/default.css
+++ b/public/resources/styles/themes/default.css
@@ -764,50 +764,48 @@ nav {
 	margin-bottom: 10px;
 }
 
-.article-modal {
+.article {
 	display: none;
 	position: fixed;
-	z-index: 1000;
-	left: 0;
+	z-index: 10;
 	top: 0;
+	left: 0;
 	width: 100%;
 	height: 100%;
 	overflow: auto;
 	background-color: rgba(0, 0, 0, 0.5);
-	transition: opacity 0.3s ease;
-	background-color: #333;
-	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;
+	justify-content: center;
+	align-items: center;
 }
 
-.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;
 	float: right;
 	font-size: 28px;
 	font-weight: bold;
+	position: absolute;
+	top: 15px;
+	right: 15px;
 }
 
-.close-button:hover,
-.close-button:focus {
-	color: #000;
+.article .article-content .close-button:hover,
+.article .article-content .close-button:focus {
+	color: #fff;
 	text-decoration: none;
 	cursor: pointer;
 }
-
-@keyframes slide-down {
-	from {
-		transform: translateY(-50px);
-		opacity: 0;
-	}
-	to {
-		transform: translateY(0);
-		opacity: 1;
-	}
-}
diff --git a/src/resources/scripts/main.ts b/src/resources/scripts/main.ts
index a6648ce..976b867 100644
--- a/src/resources/scripts/main.ts
+++ b/src/resources/scripts/main.ts
@@ -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 = {
 	set: function (key: string, value: string | number | object | [] | boolean | null | undefined, days: number) {
 		let maxAge;
@@ -584,5 +595,5 @@ if (window.location.pathname === '/settings/') {
 
 if (window.location.hostname === null) {
 	// Stop the minifier from removing these functions
-	console.debug([navigate, query, versionSelector, game, mods, base64Gzip]);
+	console.debug([navigate, query, versionSelector, game, mods, base64Gzip, article]);
 }
