Mods, banners and unconstruction

public/css/style.css

@@ -25,6 +25,10 @@ footer {
 }
  */
 
+.pr-5 {
+  padding-right: 1rem !important;
+}
+
 #mod-container img.mod-logo {
   margin: 0px;
   width: 100%;
@@ -39,3 +43,61 @@ hr {
   margin-top: 16px;
   margin-bottom: 16px;
 }
+
+#patreon-banner {
+  height: calc(100vw * (250 / 1920) + ((1920px - 100vw) / 15));
+  user-select: none;
+  cursor: pointer;
+}
+
+#patreon-banner .banner-bg {
+  position: absolute;
+  transform: translateX(-50%);
+  z-index: -1;
+  height: calc(100vw * (250 / 1920) + ((1920px - 100vw) / 15));
+}
+
+#patreon-banner .banner-text {
+  --banner-text-width: calc((100vw * (250 / 1920) + ((1920px - 100vw) / 15)) * 2.5);
+
+  font-family: "Century Gothic", "Arial Narrow", Arial, sans-serif;
+  font-size: calc(var(--banner-text-width) / 30);
+  font-weight: 600;
+  color: white;
+
+  text-shadow: black 0 0 15px;
+
+  display: flex;
+  margin-left: auto;
+  margin-right: 5%;
+  min-width: 330px;
+  max-width: var(--banner-text-width);
+  height: 100%;
+
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#patreon-banner .banner-text p {
+  padding: 0;
+  margin: 0;
+}
+
+#patreon-banner .banner-text .smol {
+  font-size: 1em;
+}
+#patreon-banner .banner-text .big {
+  font-size: 2em;
+}
+#patreon-banner .banner-text .humongous {
+  font-size: 3.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+
+#patreon-banner .banner-text .humongous img {
+  max-height: 3.5rem;
+}

public/index.html

@@ -17,9 +17,30 @@
         src="/img/infernal-studios-logo.webp"
         style="margin: 0px; width: 40vw"
       />
-      <h1 class="mb-1">This site is under construction.</h1>
-      <h2>Come back later!</h2>
-      <hr />
+
+      <div class="py-2"></div>
+
+      <div id="patreon-banner" draggable="false">
+        <noscript>
+          <img class="banner-bg" src="/img/patreon-banner-textless-1.webp" />
+        </noscript>
+        <div class="banner-text">
+          <p class="smol">Want to support the creation of mods like these?</p>
+          <p class="big">Consider supporting us on</p>
+          <p class="humongous">
+            <img src="/img/patreon-logo.webp" class="pr-5" draggable="false" />
+            <noscript>
+              <a href="/patreon"> PATREON </a>
+            </noscript>
+            <script>
+              document.write("PATREON");
+            </script>
+          </p>
+        </div>
+      </div>
+
+      <div class="py-2"></div>
+
       <h3>
         <a href="/discord">Discord</a>
         &bull;

public/script/index.js

@@ -1,5 +1,10 @@
 /* eslint-disable no-undef */
 
+function preloadImage(url) {
+  const img = new Image();
+  img.src = url;
+}
+
 const mods = [
   {
     name: "Infernal Expansion",
@@ -41,20 +46,60 @@ const mods = [
     urlIdentifier: "shieldexpansion",
     logo: "/img/shield-expansion-logo.webp",
   },
+  {
+    name: "Enemy Expansion",
+    urlIdentifier: "enemyexpansion",
+    logo: "/img/enemy-expansion-logo.webp",
+  },
+  {
+    name: "Json Entity Models",
+    urlIdentifier: "jsonentitymodels",
+    logo: "/img/json-entity-models-logo.webp",
+  },
+  {
+    name: "Advancement Based Spawning",
+    urlIdentifier: "advancementbasedspawning",
+    logo: "/img/advancement-based-spawning-logo.webp",
+  },
+  null,
+  {
+    name: "Way More Waystones",
+    urlIdentifier: "waymorewaystones",
+    logo: "/img/way-more-waystones-cs-logo.webp",
+    disable: ["curseforge", "modrinth"],
+  },
+  {
+    name: "Everything Descriptions",
+    urlIdentifier: "everythingdescriptions",
+    logo: "/img/everything-descriptions-cs-logo.webp",
+    disable: ["curseforge", "modrinth"],
+  },
   null,
   {
     name: "Resurvival",
     urlIdentifier: "resurvival",
     logo: "/img/resurvival-logo.webp",
+    disable: ["github", "modrinth"],
   },
 ];
 
 for (let i = 0; i < mods.length; i++) {
-  if (mods[i] !== null) {
-    new Image().src = mods[i].logo;
-  }
+  if (mods[i] === null) continue;
+  preloadImage(mods[i].logo);
+}
+
+const patreonBannerImgs = [
+  "/img/patreon-banner-textless-1.webp",
+  "/img/patreon-banner-textless-2.webp",
+  "/img/patreon-banner-textless-3.webp",
+];
+
+for (let i = 0; i < patreonBannerImgs.length; i++) {
+  preloadImage(patreonBannerImgs[i]);
 }
+preloadImage("/img/patreon-logo.webp");
 
+// Mods list
 window.addEventListener("DOMContentLoaded", () => {
   const modContainer = document.getElementById("mod-container");
   modContainer.innerHTML = "<!-- The following code inside this element is generated by a script -->";
@@ -72,24 +117,50 @@ window.addEventListener("DOMContentLoaded", () => {
     const modElement = document.createElement("div");
     modElement.classList.add("column", "col-4", "px-2", "col-lg-auto", "col-mx-auto", "align-middle");
     const mod = mods[i];
-    modElement.innerHTML = `
+    mod.disable ??= [];
+
+    let modHTML = `
       <h4>
         <img alt="${mod.name} Logo" class="mod-logo" src="${mod.logo}" />
       </h4>
       <h4 class="text-center">
-        <ul class="breadcrumb breadcrumb-equal">
-          <li class="breadcrumb-item">
-            <a href="/${mod.urlIdentifier}/curseforge">CurseForge</a>
-          </li>
-          <li class="breadcrumb-item">
-            <a href="/${mod.urlIdentifier}/modrinth">Modrinth</a>
-          </li>
-          <li class="breadcrumb-item">
-            <a href="/${mod.urlIdentifier}/github">GitHub</a>
-          </li>
-        </ul>
-      </h4>
-    `;
+        <ul class="breadcrumb breadcrumb-equal">`;
+
+    if (!mod.disable.includes("curseforge"))
+      modHTML += `<li class="breadcrumb-item">
+        <a href="/${mod.urlIdentifier}/curseforge">CurseForge</a>
+      </li>`;
+
+    if (!mod.disable.includes("modrinth"))
+      modHTML += `<li class="breadcrumb-item">
+        <a href="/${mod.urlIdentifier}/modrinth">Modrinth</a>
+      </li>`;
+
+    if (!mod.disable.includes("github"))
+      modHTML += `<li class="breadcrumb-item">
+        <a href="/${mod.urlIdentifier}/github">GitHub</a>
+      </li>`;
+
+    modHTML += `</ul></h4>`;
+
+    modElement.innerHTML = modHTML;
     modContainerDiv.appendChild(modElement);
   }
 });
+
+// Patreon banner
+window.addEventListener("DOMContentLoaded", () => {
+  /** @type {HTMLDivElement} */
+  const bannerContainer = document.getElementById("patreon-banner");
+
+  const bannerImg = new Image();
+  bannerImg.classList.add("banner-bg");
+  bannerImg.src = patreonBannerImgs[Math.floor(Math.random() * patreonBannerImgs.length)];
+
+  // We want the img to be first in the html
+  bannerContainer.insertBefore(bannerImg, bannerContainer.firstChild);
+
+  bannerContainer.addEventListener("click", () => {
+    window.location.href = "/patreon";
+  });
+});