Add staging popup

static/css/main.css

@@ -155,4 +155,48 @@ h1, h2, h3, h4, h5, h6 {
 
 .green {
     color: #69E781;
+}
+
+.info-popup {
+	z-index: 10;
+	position: absolute;
+	width: 500px;
+    background-color: var(--content-background);
+	color: var(--content-text);
+	border-radius: 5px;
+	border: 1px solid var(--content-text);
+	padding: 20px;
+	top: 50%;
+	left: 50%;
+	margin-right: -50%;
+	transform: translate(-50%, -50%);
+}
+
+.discord-button {
+	text-decoration: none;
+	border-radius: 5px;
+	padding: 5px;
+	font-weight: bold;
+	color: white;
+	background-color: var(--library-color);
+	margin-left: 50px;
+	margin-right: 5px;
+}
+
+.github-button {
+	text-decoration: none;
+	border-radius: 5px;
+	padding: 5px;
+	font-weight: bold;
+	color: white;
+	background-color: var(--magic-color);
+	margin-right: 5px;
+}
+
+.exit-button {
+	border-radius: 5px;
+	padding: 5px;
+	font-weight: bold;
+	color: white;
+	background-color: red;
 }

static/js/main.js

@@ -2,4 +2,8 @@ window.onload = function () {
 	if (localStorage.getItem("data-theme")) {
 		document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme"));
 	}
+}
+
+function closePopup(e) {
+	e.parentElement.outerHTML = "";
 }

templates/search.hbs

@@ -42,6 +42,15 @@
     <img src="/static/images/icon/up.svg" alt="up">
 </a>
 
+<div class="info-popup">
+    <h3>Welcome to Fabricate Staging!</h3>
+    <p>Fabricate is a work-in progress mod distribution platform that has full backwards compatibility with curseforge! Please keep in mind that we are in early beta so not everything works.</p>
+    <small>made possible by our contributors</small>
+    <a class="discord-button" href="https://discord.gg/JRMJpRX">Discord</a>
+    <a class="github-button" href="https://github.com/Geometrically/fabricate">GitHub</a>
+    <a onclick="closePopup(this)" class="exit-button">Close</a>
+</div>
+
 <div class="main-flex">
     <div class="left-flex">
         <div class="filters">