diff --git a/public/css/style.css b/public/css/style.css index 2d10a1f..baaecdc 100644 --- a/public/css/style.css +++ b/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; +} diff --git a/public/img/advancement-based-spawning-logo.webp b/public/img/advancement-based-spawning-logo.webp new file mode 100644 index 0000000..b67c4e8 Binary files /dev/null and b/public/img/advancement-based-spawning-logo.webp differ diff --git a/public/img/enemy-expansion-logo.webp b/public/img/enemy-expansion-logo.webp new file mode 100644 index 0000000..f97bae9 Binary files /dev/null and b/public/img/enemy-expansion-logo.webp differ diff --git a/public/img/everything-descriptions-cs-logo.webp b/public/img/everything-descriptions-cs-logo.webp new file mode 100644 index 0000000..b81cc59 Binary files /dev/null and b/public/img/everything-descriptions-cs-logo.webp differ diff --git a/public/img/everything-descriptions-logo.webp b/public/img/everything-descriptions-logo.webp new file mode 100644 index 0000000..ba9122b Binary files /dev/null and b/public/img/everything-descriptions-logo.webp differ diff --git a/public/img/json-entity-models-logo.webp b/public/img/json-entity-models-logo.webp new file mode 100644 index 0000000..2574eb2 Binary files /dev/null and b/public/img/json-entity-models-logo.webp differ diff --git a/public/img/patreon-banner-textless-1.webp b/public/img/patreon-banner-textless-1.webp new file mode 100644 index 0000000..2fd359a Binary files /dev/null and b/public/img/patreon-banner-textless-1.webp differ diff --git a/public/img/patreon-banner-textless-2.webp b/public/img/patreon-banner-textless-2.webp new file mode 100644 index 0000000..f5e633a Binary files /dev/null and b/public/img/patreon-banner-textless-2.webp differ diff --git a/public/img/patreon-banner-textless-3.webp b/public/img/patreon-banner-textless-3.webp new file mode 100644 index 0000000..7d1fe17 Binary files /dev/null and b/public/img/patreon-banner-textless-3.webp differ diff --git a/public/img/patreon-logo.webp b/public/img/patreon-logo.webp new file mode 100644 index 0000000..7673bd1 Binary files /dev/null and b/public/img/patreon-logo.webp differ diff --git a/public/img/resurvival-logo.webp b/public/img/resurvival-logo.webp index cb68fbf..3abab70 100644 Binary files a/public/img/resurvival-logo.webp and b/public/img/resurvival-logo.webp differ diff --git a/public/img/way-more-waystones-cs-logo.webp b/public/img/way-more-waystones-cs-logo.webp new file mode 100644 index 0000000..40d44b7 Binary files /dev/null and b/public/img/way-more-waystones-cs-logo.webp differ diff --git a/public/img/way-more-waystones-logo.webp b/public/img/way-more-waystones-logo.webp new file mode 100644 index 0000000..e536136 Binary files /dev/null and b/public/img/way-more-waystones-logo.webp differ diff --git a/public/index.html b/public/index.html index c5946f1..dfa90c0 100644 --- a/public/index.html +++ b/public/index.html @@ -17,9 +17,30 @@ src="/img/infernal-studios-logo.webp" style="margin: 0px; width: 40vw" /> -

This site is under construction.

-

Come back later!

-
+ +
+ +
+ + +
+ +
+

Discord • diff --git a/public/script/index.js b/public/script/index.js index 0d49d0b..379d205 100644 --- a/public/script/index.js +++ b/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 = ""; @@ -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 = `

- -

- `; + `; + + 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"; + }); +});