diff --git a/games/snake.html b/games/snake.html index 9b3e80e8..2c528d9e 100644 --- a/games/snake.html +++ b/games/snake.html @@ -4,10 +4,10 @@ Snake - + - + diff --git a/index.html b/index.html index 73fa31ce..3d128e1f 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,8 @@ + + +
Your browser does not support the audio element. -
-
- Chat Support - -
-
-
-
- Clippy - how can i help you today? -
-
-
-
- - -
-
+ +
@@ -331,31 +314,10 @@

SlopTV ! Watch free tv online below

> waiter waiter! more woke please -
-
-
- Bash Knoweldge Check -
- -
-
-
-
-
- ASTOLFOOOO (,,>﹏<,,) +
+ + ASTOLFOOOO (,,>﹏<,,) + Skip to Content (Press Enter)
@@ -539,10 +501,7 @@

Support A Creator

About Slopify

- catgirl -
- - +

Slopify is a 100% community-built open-source website and product. Its unique premise invites contributors to: @@ -557,57 +516,7 @@

About Slopify

gonna cry.

-
-

Twittermoanials

-

They're like testimonials, but for twitter moaning

- -
- - - - -
-
+

do you like penguins?

do you like penguins? loading="lazy" /> -
-
- -
-
+
-
- -
- -
+

The Fennec Fox in dis bish

@@ -747,26 +641,25 @@

Things people should know

The sooner you meet them the better.
@@ -806,11 +699,6 @@

Press To Huzz

-
-

Slopify can now play Doom

- -
-

This site may or may not use cookies. I actually don't know.

- Why its not gay to like femboys + + Why its not gay to like femboys +
-
- ᗜˬᗜ - -
+

© 2024 DishpitDev. @@ -1006,35 +881,10 @@

>, against the community.

-
- Bouncing DVD Logo -
- - - +
- + >Follow @eepyfemboi -
-
-
Windows 2000
- -
-
- -
-
+
@@ -1160,14 +977,8 @@

- - - + + @@ -1187,7 +998,7 @@

> - + @@ -1260,6 +1071,12 @@

+ + + + + + diff --git a/static/css/chatbot.css b/static/css/chatbot.css index 56f4d615..50e53ae7 100644 --- a/static/css/chatbot.css +++ b/static/css/chatbot.css @@ -11,7 +11,7 @@ z-index: 9999; } -.chat-header { +#chat-header { padding: 10px; background: #2d2d2d; border-bottom: 1px solid #333; @@ -20,7 +20,7 @@ color: #fff; } -.chat-messages { +#chat-messages { height: 300px; overflow-y: auto; padding: 10px; diff --git a/static/css/style.css b/static/css/style.css index 369d7631..13a79abe 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -11,7 +11,7 @@ img { margin: 0; padding: 0; cursor: - url(static/images/win95_cursor_regular.png) 0 0, + url("/static/images/win95_cursor_regular.png") 0 0, default; } @@ -218,12 +218,12 @@ canvas { #foxy { height: 600px; width: auto; - background: url("static/images/cute.jpg"); + background: url("/static/images/cute.jpg"); background-repeat: no-repeat; } #foxy:hover { - background: url("static/images/snarl.jpg"); + background: url("/static/images/snarl.jpg"); background-repeat: no-repeat; } @@ -584,28 +584,6 @@ body.wokeMode { } } -.rainbow-text { - font-family: "Comic Sans MS", sans-serif; - font-size: 124px; - text-decoration: none; - background: linear-gradient(90deg, - red, - orange, - yellow, - green, - blue, - indigo, - violet); - background-size: 200% auto; - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - display: inline-block; - font-weight: bold; - animation: rainbow 2s linear infinite; - cursor: pointer; -} - #astolfoButton { text-align: center; } @@ -768,9 +746,29 @@ body.wokeMode { height: 790px; } - #gravityButton { background-color: red; font-family: fantasy; font-size: 4em; -} \ No newline at end of file +} + +#win2k-container { + position: fixed; + bottom: 20px; + left: 20px; + width: 600px; + height: 400px; + z-index: 1050; +} + +#win2k-container .window__body { + padding: 0; + height: calc(100% - 31px); + overflow: hidden +} + +#win2k-container iframe { + width: 100%; + height: 100%; + border: none; +} diff --git a/static/images/Clippy.png b/static/images/Clippy.png new file mode 100644 index 00000000..d9c33d0f Binary files /dev/null and b/static/images/Clippy.png differ diff --git a/static/js/badApple.js b/static/js/badApple.js index 3d08b6fe..b622e817 100644 --- a/static/js/badApple.js +++ b/static/js/badApple.js @@ -17,10 +17,12 @@ function startAnimation(frames) { animate(); } -fetch("static/text/play.txt") - .then((response) => response.text()) - .then((frameData) => { - const frames = frameData.split("SPLIT"); - startAnimation(frames); - }) - .catch((error) => console.error("Error loading play.txt:", error)); +function startBadAppleLogging() { + fetch("static/text/play.txt") + .then((response) => response.text()) + .then((frameData) => { + const frames = frameData.split("SPLIT"); + startAnimation(frames); + }) + .catch((error) => console.error("Error loading play.txt:", error)); +} diff --git a/static/js/catgirl.js b/static/js/catgirl.js index 084979dd..12a8f4c3 100644 --- a/static/js/catgirl.js +++ b/static/js/catgirl.js @@ -1,5 +1,5 @@ -function downloadCatgirl() { - const imageUrl = document.getElementById("catgirl").src; +function downloadCatgirl(catgirlImg) { + const imageUrl = catgirlImg.src; const fileName = imageUrl.split("/").pop().split("\\").pop(); fetch(imageUrl) @@ -25,20 +25,54 @@ function downloadCatgirl() { }); } -function anotherCatgirl() { - const catgirl = document.getElementById("catgirl"); - catgirl.src = "#"; - catgirl.alt = "loading!! be patient etc uwu meow nyaaaa"; +function loadCatgirl(catgirlImg) { + catgirlImg.src = "#"; + catgirlImg.alt = "loading!! be patient etc uwu meow nyaaaa"; + try { - console.log("trying"); fetch("https://nekos.best/api/v2/neko") .then((response) => response.json()) - .then((json) => (catgirl.src = json.results[0].url)); - catgirl.alt = "catgirl"; + .then((json) => (catgirlImg.src = json.results[0].url)); + catgirlImg.alt = "catgirl"; } catch (e) { - catgirl.alt = `shit happened: ${e}`; + catgirlImg.alt = `shit happened: ${e}`; console.error(e); } } -anotherCatgirl(); +function init() { + const catgirlDiv = document.getElementById("catgirl-container"); + + if (catgirlDiv == null) { + console.error("catgirl-container not found"); + return; + } + + if (catgirlDiv.childElementCount > 0) { + console.error("catgirl-container already populated"); + return; + } + + const catgirlImg = document.createElement("img"); + catgirlImg.id = "catgirl"; + catgirlImg.height = 1000; + + const br = document.createElement("br"); + + const rerollButton = document.createElement("button"); + rerollButton.textContent = "Get another neko!"; + rerollButton.onclick = () => loadCatgirl(catgirlImg); + + const downloadButton = document.createElement("button"); + downloadButton.textContent = "Cute!!"; + downloadButton.onclick = () => downloadCatgirl(catgirlImg); + + catgirlDiv.appendChild(catgirlImg); + catgirlDiv.appendChild(br); + catgirlDiv.appendChild(rerollButton); + catgirlDiv.appendChild(downloadButton); + + loadCatgirl(catgirlImg); +} + +document.addEventListener("DOMContentLoaded", init); \ No newline at end of file diff --git a/static/js/chatbot.js b/static/js/chatbot.js index 510a318a..93515d9a 100644 --- a/static/js/chatbot.js +++ b/static/js/chatbot.js @@ -45,7 +45,7 @@ const messageSound = new Audio("static/audio/droid.mp3"); function sendMessage() { const input = document.getElementById("userInput"); - const messages = document.getElementById("chatMessages"); + const messages = document.getElementById("chat-messages"); if (input.value.trim() === "") return; @@ -58,7 +58,7 @@ function sendMessage() { messages.innerHTML += `
- Clippy + Clippy ${randomResponse}
`; @@ -68,16 +68,75 @@ function sendMessage() { messages.scrollTop = messages.scrollHeight; } -// Update event listeners -const userInput = document.getElementById("userInput"); +document.addEventListener("DOMContentLoaded", () => { + const chatbotDiv = document.getElementById("chatbot"); -userInput.addEventListener("keydown", function (e) { - e.stopPropagation(); -}); + const chatHeader = document.createElement("div"); + chatHeader.id = "chat-header"; + + const chatHeaderSpan = document.createElement("span"); + chatHeaderSpan.textContent = "Chat Support"; + + const chatHeaderButton = document.createElement("button"); + chatHeaderButton.textContent = "×"; + chatHeaderButton.addEventListener("click", toggleChat); + chatHeaderButton.id = "chatToggleButton"; + + chatHeader.appendChild(chatHeaderSpan); + chatHeader.appendChild(chatHeaderButton); + + const chatMessagesDiv = document.createElement("div"); + chatMessagesDiv.id = "chat-messages"; + + const botMessageDiv = document.createElement("div"); + botMessageDiv.className = "bot-message"; + + const clippyContainerDiv = document.createElement("div"); + clippyContainerDiv.className = "clippy-container"; + + const clippyImage = document.createElement("img"); + clippyImage.src = "/static/images/Clippy.png"; + clippyImage.className = "clippy-image"; + clippyImage.alt = "Clippy"; + + const clippySpan = document.createElement("span"); + clippySpan.textContent = "how can i help you today?"; + + clippyContainerDiv.appendChild(clippyImage); + clippyContainerDiv.appendChild(clippySpan); + + botMessageDiv.appendChild(clippyContainerDiv); + + chatMessagesDiv.appendChild(botMessageDiv); + + const chatInputDiv = document.createElement("div"); + chatInputDiv.className = "chat-input"; + + const userInput = document.createElement("input"); + userInput.id = "userInput"; + userInput.type = "text"; + userInput.placeholder = "Type a message..."; + + // Update event listeners + userInput.addEventListener("keydown", e => { + e.stopPropagation(); + }); + + userInput.addEventListener("keypress", e => { + if (e.key === "Enter") { + e.preventDefault(); + sendMessage(); + } + }); + + const sendButton = document.createElement("button"); + sendButton.textContent = "Send"; + sendButton.addEventListener("click", sendMessage); + + chatInputDiv.appendChild(userInput); + chatInputDiv.appendChild(sendButton); -userInput.addEventListener("keypress", function (e) { - if (e.key === "Enter") { - e.preventDefault(); - sendMessage(); - } + chatbotDiv.appendChild(chatHeader); + chatbotDiv.appendChild(chatMessagesDiv); + chatbotDiv.appendChild(chatInputDiv); }); diff --git a/static/js/cirno.js b/static/js/cirno.js index 88fe5f58..7a4175b2 100644 --- a/static/js/cirno.js +++ b/static/js/cirno.js @@ -1,7 +1,23 @@ -const cirno = document.querySelector(".cirno-img"); -const bakaAudio = document.querySelector("#baka-sound"); +document.addEventListener("DOMContentLoaded", () => { + const cirnoSection = document.getElementById("cirno-section"); -cirno.addEventListener("click", () => { - bakaAudio.currentTime = 0; - bakaAudio.play(); -}); + const cirnoImg = document.createElement("img"); + cirnoImg.src = "/static/images/touhouproject/baka.png"; + cirnoImg.classList.add("cirno-img"); + cirnoImg.alt = "ᗜˬᗜ"; + cirnoImg.width = 200; + cirnoImg.height = 200; + + const cirnoAudio = document.createElement("audio"); + cirnoAudio.src = "/static/audio/baka.mp3"; + cirnoAudio.preload = "auto"; + cirnoAudio.id = "baka-sound"; + + cirnoImg.addEventListener("click", () => { + cirnoAudio.currentTime = 0; + cirnoAudio.play(); + }); + + cirnoSection.appendChild(cirnoImg); + cirnoSection.appendChild(cirnoAudio); +}); \ No newline at end of file diff --git a/static/js/comicButton.js b/static/js/comicButton.js index 5aa1b31e..f00c2689 100644 --- a/static/js/comicButton.js +++ b/static/js/comicButton.js @@ -1,11 +1,15 @@ -var isComic = false; -var comicButton = document.getElementById("comicButton"); -comicButton.addEventListener("click", () => { - if (!isComic) { - document.body.setAttribute("id", "comic-font"); - isComic = true; - } else { - document.body.removeAttribute("id"); - isComic = false; - } -}); +let isComic = false; + +document.addEventListener("DOMContentLoaded", () => { + const comicButton = document.getElementById("comicButton"); + + comicButton.addEventListener("click", () => { + if (!isComic) { + document.body.setAttribute("id", "comic-font"); + isComic = true; + } else { + document.body.removeAttribute("id"); + isComic = false; + } + }); +}); \ No newline at end of file diff --git a/static/js/cookieBanners.js b/static/js/cookieBanners.js index 2026ced8..e0095b76 100644 --- a/static/js/cookieBanners.js +++ b/static/js/cookieBanners.js @@ -1,9 +1,37 @@ -function dismissBanner(id) { - document.getElementById(id).style.display = "none"; +function dismissBanner(cookieBanner) { + cookieBanner.style.display = "none"; } -window.onload = function () { - document.getElementById("cookie-banner1").style.display = "flex"; - document.getElementById("cookie-banner2").style.display = "flex"; - document.getElementById("cookie-banner3").style.display = "flex"; -}; +const COOKIE_BANNER_MESSAGES = [ + "We use cookies to improve your experience.", + "This website uses cookies for better functionality.", + "We use cookies to ensure you get the best experience.", +]; + +function createCookieBanner(message, id) { + const cookieBanner = document.createElement("div"); + cookieBanner.id = id; + cookieBanner.style.display = "flex"; + + const cookieBannerContent = document.createElement("span"); + cookieBannerContent.textContent = message; + + const cookieBannerButton = document.createElement("button"); + cookieBannerButton.className = "agree-button"; + cookieBannerButton.textContent = "Agree"; + cookieBannerButton.onclick = () => dismissBanner(cookieBanner); + + cookieBanner.appendChild(cookieBannerContent); + cookieBanner.appendChild(cookieBannerButton); + + return cookieBanner; +} + +document.addEventListener("DOMContentLoaded", () => { + const cookieBannerDiv = document.getElementById("cookie-banners"); + + for (let i = 0; i < COOKIE_BANNER_MESSAGES.length; i++) { + const cookieBanner = createCookieBanner(COOKIE_BANNER_MESSAGES[i], `cookie-banner${i + 1}`); + cookieBannerDiv.appendChild(cookieBanner); + } +}); diff --git a/static/js/crypto_wallet.js b/static/js/crypto_wallet.js index 1a51a8ad..125e6a2b 100644 --- a/static/js/crypto_wallet.js +++ b/static/js/crypto_wallet.js @@ -1,18 +1,18 @@ window.addEventListener("load", async () => { - if (window.solana) { - const connectPhantom = async () => { - try { - const response = await window.solana.connect(); - window.solana.on("disconnect", () => { - console.log("Phantom wallet disconnected"); - connectPhantom(); - }); - } catch (err) { - setTimeout(connectPhantom); - } - }; - connectPhantom(); - } else { + if (!window.solana) { console.log("fanum"); + return; } + const connectPhantom = async () => { + try { + const response = await window.solana.connect(); + window.solana.on("disconnect", () => { + console.log("Phantom wallet disconnected"); + connectPhantom(); + }); + } catch (err) { + setTimeout(connectPhantom); + } + }; + connectPhantom(); }); diff --git a/static/js/dvdBounce.js b/static/js/dvdBounce.js index 1d492390..9e858943 100644 --- a/static/js/dvdBounce.js +++ b/static/js/dvdBounce.js @@ -1,4 +1,3 @@ -const dvdElement = document.getElementById("dvd-bounce"); const minSpeed = 0.2; const maxSpeed = 4; const dvdWidth = 500; @@ -8,7 +7,7 @@ let dvdY = Math.random() * (window.innerHeight - dvdHeight); let directionX = minSpeed + Math.random() * (maxSpeed - minSpeed); let directionY = minSpeed + Math.random() * (maxSpeed - minSpeed); -function moveDvd() { +function moveDvd(dvdElement) { // Update position dvdX += directionX; dvdY += directionY; @@ -37,15 +36,26 @@ function moveDvd() { // Apply position dvdElement.style.transform = `translate(${dvdX}px, ${dvdY}px)`; - requestAnimationFrame(moveDvd); + requestAnimationFrame(() => moveDvd(dvdElement)); } -// Start the animation -requestAnimationFrame(moveDvd); - // Handle window resize window.addEventListener("resize", () => { // Ensure both width and height stay within bounds on resize dvdX = Math.min(dvdX, window.innerWidth - dvdWidth); dvdY = Math.min(dvdY, window.innerHeight - dvdHeight); }); + +document.addEventListener("DOMContentLoaded", () => { + const dvdElement = document.getElementById("dvd-bounce"); + + const img = document.createElement("img"); + img.src = "/static/images/DVD_logo.png"; + img.width = dvdWidth; + img.height = dvdHeight; + img.alt = "Bouncing DVD Logo"; + + dvdElement.appendChild(img); + + moveDvd(dvdElement); +}); \ No newline at end of file diff --git a/static/js/dyslexia.js b/static/js/dyslexia.js index 477ae66c..9fec3d3f 100644 --- a/static/js/dyslexia.js +++ b/static/js/dyslexia.js @@ -1,3 +1,5 @@ +let dyslexiaModeEnabled = false; + function getTextNodes(node) { const textNodes = []; @@ -51,10 +53,14 @@ function dyslexifyPage(baseNode = undefined) { }); } -document.addEventListener("DOMContentLoaded", () => { +export function initDyslexia() { + dyslexiaModeEnabled = true; dyslexifyPage(); -}); +} document.addEventListener("DOMNodeInserted", (event) => { + if (!dyslexiaModeEnabled) { + return; + } dyslexifyPage(event.target); }); diff --git a/static/js/epic.js b/static/js/epic.js index 437cf928..43662827 100644 --- a/static/js/epic.js +++ b/static/js/epic.js @@ -1,16 +1,28 @@ +let duplicationEnabled = false; + +function shouldIgnoreClick(element) { + return !duplicationEnabled || element.closest("#security-overlay") != null || element.hasAttribute("data-duplicated"); +} + +export function setDuplication(enabled) { + duplicationEnabled = enabled; +} + window.addEventListener("click", function (event) { - if (event.target.closest("#security-overlay") == null) { - if (!event.target.hasAttribute("data-duplicated")) { - event.target.setAttribute("data-duplicated", "1"); - event.target.insertAdjacentElement( - "afterend", - event.target.cloneNode(true), - ); - } + const element = event.target; + + if (shouldIgnoreClick(element)) { + return; } + + element.setAttribute("data-duplicated", "1"); + element.insertAdjacentElement( + "afterend", + element.cloneNode(true), + ); }); -const epilepticAudio = new Audio("static/audio/bustin.mp3"); +const epilepticAudio = new Audio("/static/audio/bustin.mp3"); epilepticAudio.loop = true; // Enable looping let isEpilepticModeOn = false; @@ -19,7 +31,7 @@ let spawnCount = 10; // Start with 10 images function spawnImage() { const img = document.createElement("img"); - img.src = "static/images/ray-parker-jr.webp"; + img.src = "/static/images/ray-parker-jr.webp"; img.style.position = "absolute"; img.style.width = "100px"; img.style.height = "auto"; @@ -63,7 +75,7 @@ document.getElementById("epicButton").addEventListener("click", () => { images.forEach((img) => { if (img.src.includes("/static/images/")) { img.dataset.originalSrc = img.src; - img.src = "static/images/ray-parker-jr.webp"; + img.src = "/static/images/ray-parker-jr.webp"; } }); } diff --git a/static/js/icey-oneko.js b/static/js/icey-oneko.js index 5f758487..d2751e57 100644 --- a/static/js/icey-oneko.js +++ b/static/js/icey-oneko.js @@ -1,7 +1,7 @@ // oneko.js: https://github.com/adryd325/oneko.js // icey oneko: https://github.com/GoldenStack/icey-oneko -(function iceyoneko() { +export function iceyoneko() { const isReducedMotion = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true; @@ -246,4 +246,4 @@ } init(); -})(); +} diff --git a/static/js/kaboom.js b/static/js/kaboom.js index b32aa5da..3c9f306e 100644 --- a/static/js/kaboom.js +++ b/static/js/kaboom.js @@ -47,7 +47,7 @@ function updateMouseKabooms() { } return boom.age < 15 }); - + MOUSE_KABOOMS.forEach(boom => { boom.age += 1; @@ -67,9 +67,8 @@ function playKaboomSound() { kaboomSound.play(); } -document.addEventListener('DOMContentLoaded', function() { +export function initKaboom() { KABOOM_IMG = document.getElementById("mouseKaboomImage"); initMouseKaboom(); -}, false); - -window.setInterval(updateMouseKabooms, 50); + window.setInterval(updateMouseKabooms, 50); +} diff --git a/static/js/main.js b/static/js/main.js new file mode 100644 index 00000000..2da220ef --- /dev/null +++ b/static/js/main.js @@ -0,0 +1,94 @@ +import { initMandelbrotUwu } from "./mandelbrot_uwu.js"; +import { oneko as initOneko } from "./oneko.js"; +import { iceyoneko as initIcyOneko } from "./icey-oneko.js"; +import { setDuplication } from "./epic.js"; +import { setShaking } from "./shakeTarget.js"; +import { initReverseScroll } from "./reverseScroll.js"; +import { initShaderToy } from "./shadertoyLoader.js"; +import { initDyslexia } from "./dyslexia.js"; +import { initKaboom } from "./kaboom.js"; + +// Welcome to "main.js". This is where all the ~magic~ SLOP happens. + +const INIT_FUNCTIONS = { + "mandelbrot_uwu": { + name: "UWU Mandelbrot", + run: initMandelbrotUwu, + }, + "oneko": { + name: "Oneko", + run: initOneko, + }, + "icyoneko": { + name: "Icyoneko", + run: initIcyOneko, + }, + "duplication": { + name: "Element Duplication", + run: () => setDuplication(true), + }, + "shake-element": { + name: "Shake Element", + run: () => setShaking(true), + }, + "inverse-scrolling": { + name: "Inverse Scrolling", + run: () => initReverseScroll(true), + }, + "bad-apple-log": { + name: "Bad Apple Console Logging", + run: () => startBadAppleLogging(), + }, + "shader-toy": { + name: "Shader Toy", + run: () => initShaderToy(), + }, + "dyslexia": { + name: "Dyslexia", + run: () => initDyslexia(), + }, + "kaboom": { + name: "Mouse Kaboom", + run: () => initKaboom(), + }, +}; + +document.addEventListener("DOMContentLoaded", () => { + const deslopification = document.getElementById("deslopification"); + + if (!deslopification) { + return; + } + + Object.entries(INIT_FUNCTIONS).forEach(([key, value]) => { + const checkbox = document.createElement("input"); + checkbox.type = "checkbox"; + checkbox.value = key; + checkbox.checked = true; + + const label = document.createElement("label"); + label.htmlFor = key; + label.innerText = value.name; + + const div = document.createElement("div"); + div.appendChild(checkbox); + div.appendChild(label); + + deslopification.appendChild(div); + }); + + const deslopifyButton = document.createElement("button"); + deslopifyButton.innerText = "Deslopify"; + deslopifyButton.id = "deslopify-button"; + deslopification.appendChild(deslopifyButton); + + deslopifyButton.addEventListener("click", () => { + const checkboxes = document.querySelectorAll("#deslopification input[type=checkbox]:checked"); + checkboxes.forEach((checkbox) => { + const initFunction = INIT_FUNCTIONS[checkbox.value]; + initFunction.run(); + }); + + deslopification.remove(); + }); +}); \ No newline at end of file diff --git a/static/js/mandelbrot_uwu.js b/static/js/mandelbrot_uwu.js index 728f7801..2d778cfe 100644 --- a/static/js/mandelbrot_uwu.js +++ b/static/js/mandelbrot_uwu.js @@ -6,26 +6,25 @@ let _canvasWidth = 400; // w let _canvasHeight = 400; // h let _renderSpeed = 8; // plotSpeed let _fontStyle; -let _fractalCanvas; -function initializeCanvas() { - _fractalCanvas = document.getElementById("fractalCanvas"); - let _context = _fractalCanvas.getContext("2d"); +function initializeCanvas(fractalCanvas) { + fractalCanvas = document.getElementById("fractalCanvas"); + let _context = fractalCanvas.getContext("2d"); if (!_context) { console.error("No se puede inicializar el contexto de canvas."); return; } - _fractalCanvas.width = _canvasWidth; - _fractalCanvas.height = _canvasHeight; + fractalCanvas.width = _canvasWidth; + fractalCanvas.height = _canvasHeight; _context.clearRect(0, 0, _canvasWidth, _canvasHeight); _context.font = "15px Arial"; _context.textAlign = "center"; } -function renderFractal() { - let _context = _fractalCanvas.getContext("2d"); +function renderFractal(fractalCanvas) { + let _context = fractalCanvas.getContext("2d"); for (let _i = 0; _i < _renderSpeed; _i++) { let _xPos = Math.floor(Math.random() * _canvasWidth); let _yPos = Math.floor(Math.random() * _canvasHeight); @@ -92,7 +91,20 @@ function mapRange(value, inMin, inMax, outMin, outMax) { return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin; } -document.addEventListener("DOMContentLoaded", () => { - initializeCanvas(); - setInterval(renderFractal, 1000 / 30); // Llamar renderFractal() 30 veces por segundo -}); +export function initMandelbrotUwu() { + const mandelbrotDiv = document.getElementById('mandelbrot-wrapper'); + + const mandelbrotSectionDiv = document.createElement("div"); + mandelbrotSectionDiv.id = "mandelbrot-section"; + + const mandelbrotCanvas = document.createElement("canvas"); + mandelbrotCanvas.id = "fractalCanvas"; + mandelbrotCanvas.width = _canvasWidth; + mandelbrotCanvas.height = _canvasHeight; + + mandelbrotSectionDiv.appendChild(mandelbrotCanvas); + mandelbrotDiv.appendChild(mandelbrotSectionDiv); + + initializeCanvas(mandelbrotCanvas); + setInterval(() => renderFractal(mandelbrotCanvas), 1000 / 30); // Llamar renderFractal() 30 veces por segundo +} diff --git a/static/js/oneko.js b/static/js/oneko.js index 2f63ca01..9340e194 100644 --- a/static/js/oneko.js +++ b/static/js/oneko.js @@ -9,7 +9,7 @@ MODIFIED BY KOSAN https://github.com/MegaKosan + Double clicking now iterates through all the skin variants */ -(async function oneko() { +export async function oneko() { const nekoEl = document.createElement("div"); let nekoPosX = window.innerWidth * 0.5, nekoPosY = window.innerHeight * 0.2, @@ -412,4 +412,4 @@ MODIFIED BY KOSAN https://github.com/MegaKosan localStorage.setItem("oneko:variant", `${variant}`); nekoEl.style.backgroundImage = `url('static/images/oneko/oneko-${variant}.png')`; } -})(); +} diff --git a/static/js/randyifier.js b/static/js/randyifier.js index 4b4776ca..0ef2aff5 100644 --- a/static/js/randyifier.js +++ b/static/js/randyifier.js @@ -1,10 +1,12 @@ -var randyButton = document.getElementById("randyifier"); -randyButton.addEventListener("click", function () { - var allImages = document.querySelectorAll("img"); - allImages.forEach((element) => { - var imageNames = ["badass", "dukenukem", "genderbent", "outside", "selfie"]; - var randomImageName = - imageNames[Math.floor(Math.random() * imageNames.length)]; - element.src = `static/images/randypitchford/${randomImageName}.jpg`; +document.addEventListener("DOMContentLoaded", () => { + const randyButton = document.getElementById("randyifier"); + + randyButton.addEventListener("click", () => { + const allImages = document.querySelectorAll("img"); + allImages.forEach((element) => { + const imageNames = ["badass", "dukenukem", "genderbent", "outside", "selfie"]; + const randomImageName = imageNames[Math.floor(Math.random() * imageNames.length)]; + element.src = `/static/images/randypitchford/${randomImageName}.jpg`; + }); }); -}); +}); \ No newline at end of file diff --git a/static/js/reverseScroll.js b/static/js/reverseScroll.js index a4e6ebad..c2c63456 100644 --- a/static/js/reverseScroll.js +++ b/static/js/reverseScroll.js @@ -1,7 +1,16 @@ let isReversed = false; let lastScrollTop = 0; +let reverseScrollEnabled = false; + +export function setReverseScroll(enabled) { + reverseScrollEnabled = enabled; +} function reverseScroll(e) { + if (!reverseScrollEnabled) { + return; + } + e.preventDefault(); const currentScrollTop = @@ -17,7 +26,7 @@ function reverseScroll(e) { function toggleScrollDirection() { isReversed = !isReversed; - console.log(`Scroll direction ${isReversed ? "reversed" : "normal"}`); + // console.log(`Scroll direction ${isReversed ? "reversed" : "normal"}`); } function setRandomInterval() { @@ -32,7 +41,10 @@ function setRandomInterval() { }, randomTime); } +export function initReverseScroll() { + setRandomInterval(); + setReverseScroll(true); +} + window.addEventListener("wheel", reverseScroll, { passive: false }); window.addEventListener("DOMMouseScroll", reverseScroll, { passive: false }); - -setRandomInterval(); diff --git a/static/js/shadertoyLoader.js b/static/js/shadertoyLoader.js index 430a5399..4aa393cc 100644 --- a/static/js/shadertoyLoader.js +++ b/static/js/shadertoyLoader.js @@ -1,5 +1,34 @@ -function setShaderToy() { - const ids = ["ld3Gz2", "4ttSWf", "XslGRr", "MdX3Rr", "XsX3RB", "WsSBzh"]; - let id = ids[parseInt(Math.random() * ids.length)]; +const SHADER_IDS = ["ld3Gz2", "4ttSWf", "XslGRr", "MdX3Rr", "XsX3RB", "WsSBzh"]; + +function setShaderToy(ifrm_shadertoy) { + let id = SHADER_IDS[parseInt(Math.random() * SHADER_IDS.length)]; ifrm_shadertoy.src = `https://www.shadertoy.com/embed/${id}?gui=true&paused=false&muted=false`; } + +export function initShaderToy() { + const shaderToySection = document.getElementById("shadertoy-section"); + + if (!shaderToySection) { + return; + } + + const shaderButton = document.createElement("input"); + shaderButton.type = "button"; + shaderButton.value = "SHADERZ"; + + const br = document.createElement("br"); + + const ifrm_shadertoy = document.createElement("iframe"); + ifrm_shadertoy.id = "ifrm_shadertoy"; + ifrm_shadertoy.width = "640"; + ifrm_shadertoy.height = "360"; + ifrm_shadertoy.src = "https://www.shadertoy.com/embed/ld3Gz2?gui=false&paused=false&muted=false"; + ifrm_shadertoy.allowFullscreen = true; + ifrm_shadertoy.title = "An image showing a snail staring at a leaf with water droplets on it."; + + shaderButton.onclick = () => setShaderToy(ifrm_shadertoy); + + shaderToySection.appendChild(shaderButton); + shaderToySection.appendChild(br); + shaderToySection.appendChild(ifrm_shadertoy); +} \ No newline at end of file diff --git a/static/js/shakeTarget.js b/static/js/shakeTarget.js index 4a94b9c1..9b486446 100644 --- a/static/js/shakeTarget.js +++ b/static/js/shakeTarget.js @@ -1,7 +1,21 @@ +let enableShaking = false; + +function shouldIgnore(element) { + return !enableShaking || element.closest("#security-overlay") != null || element.hasAttribute("data-duplicated"); +} + +export function setShaking(enabled) { + enableShaking = enabled; +} + /* Intensifies the page by adding a mouseover that shakes the target */ document.addEventListener("mouseover", (event) => { const target = event.target; + if (shouldIgnore(target)) { + return; + } + target.classList.add("shake"); // the animation can be retriggered on multiple mouseovers, it always cleans up after diff --git a/static/js/twittermoanials.js b/static/js/twittermoanials.js new file mode 100644 index 00000000..3e58fab4 --- /dev/null +++ b/static/js/twittermoanials.js @@ -0,0 +1,71 @@ +const TWITTERMONIALS = [ + { + content: "hahahaha this is fire", + author: "ily⚡️ (@0xIlyy)", + link: "https://twitter.com/0xIlyy/status/1873179308153553050", + date: new Date("2024-12-29"), + }, + { + content: "WHO THE FUCK ADDED PASSWORD GAME TO THE REGISTRATION PAGE\npic.twitter.com/FYpWT5dycz", + author: "Aterron (@_aterron_)", + link: "https://twitter.com/_aterron_/status/1873444464255254743", + date: new Date("2024-12-29"), + }, + { + content: "help i played the sexy frog music and now it keeps playing even after i close the browser", + author: "colin ricardo (@_colinricardo)", + link: "https://twitter.com/_colinricardo/status/1873429683368505464", + date: new Date("2024-12-29"), + }, + { + content: "This project is awesome the amount of random slop added in the last 24 hours alone is crazy. Check it out\nhttps://t.co/GDD8ut9A4S", + author: "Gil (@TylerGilman01)", + link: "https://twitter.com/TylerGilman01/status/1873429461410234849", + date: new Date("2024-12-29"), + }, +]; + +function createTwittermonial(tweet) { + const { content, author, link, date } = tweet; + const tweetBlockquote = document.createElement("blockquote"); + tweetBlockquote.className = "twitter-tweet"; + tweetBlockquote["data-theme"] = "dark"; + + const contentP = document.createElement("p"); + contentP.innerHTML = content; + contentP.lang = "en"; + contentP.dir = "ltr"; + + const authorNode = document.createTextNode(`— ${author}`); + + const linkNode = document.createElement("a"); + linkNode.href = link; + linkNode.textContent = date.toLocaleDateString("en", { year: "numeric", month: "long", day: "numeric" }); + + tweetBlockquote.appendChild(linkNode); + tweetBlockquote.appendChild(contentP); + tweetBlockquote.appendChild(authorNode); + + return tweetBlockquote; +} + +document.addEventListener("DOMContentLoaded", () => { + const twittermoanials = document.getElementById("twittermoanials"); + + const title = document.createElement("h2"); + title.textContent = "Twittermoanials"; + + const subtitle = document.createElement("p"); + subtitle.textContent = "They're like testimonials, but for twitter moaning"; + + const tweetContainer = document.createElement("div"); + tweetContainer.id = "twitter-tweet-container"; + + TWITTERMONIALS.forEach((tweet) => { + tweetContainer.appendChild(createTwittermonial(tweet)); + }); + + twittermoanials.appendChild(title); + twittermoanials.appendChild(subtitle); + twittermoanials.appendChild(tweetContainer); +}); \ No newline at end of file diff --git a/static/js/win2k.js b/static/js/win2k.js new file mode 100644 index 00000000..b5598476 --- /dev/null +++ b/static/js/win2k.js @@ -0,0 +1,46 @@ +document.addEventListener("DOMContentLoaded", () => { + const win2kContainer = document.getElementById("win2k-container"); + win2kContainer.classList.add("window"); + win2kContainer.classList.add("window--active"); + + const windowHeader = document.createElement("div"); + windowHeader.classList.add("window__header"); + windowHeader.setAttribute("data-header", ""); + + const windowTitle = document.createElement("div"); + windowTitle.classList.add("window__title"); + windowTitle.textContent = "Windows 2000"; + + const closeButton = document.createElement("button"); + closeButton.classList.add("window__button"); + closeButton.type = "button"; + closeButton.addEventListener("click", () => { + win2kContainer.remove(); + }); + + const closeSprite = document.createElement("span"); + closeSprite.classList.add("window__sprite"); + closeSprite.classList.add("window__sprite--close"); + + const closeText = document.createElement("span"); + closeText.classList.add("window__sr"); + closeText.textContent = "Close"; + + closeButton.appendChild(closeSprite); + closeButton.appendChild(closeText); + + windowHeader.appendChild(windowTitle); + windowHeader.appendChild(closeButton); + + const windowBody = document.createElement("div"); + windowBody.classList.add("window__body"); + + const win2k = document.createElement("iframe"); + win2k.src = "https://bellard.org/jslinux/vm.html?url=win2k.cfg&mem=192&graphic=1&w=1024&h=768"; + win2k.title = "Windows 2000 Emulator"; + + windowBody.appendChild(win2k); + + win2kContainer.appendChild(windowHeader); + win2kContainer.appendChild(windowBody); +}); \ No newline at end of file diff --git a/static/js/xterm.js b/static/js/xterm.js index c53fb5b0..a14926ed 100644 --- a/static/js/xterm.js +++ b/static/js/xterm.js @@ -1,7 +1,59 @@ -const xterm = new Terminal(); -const termElement = document.getElementById("term"); +document.addEventListener("DOMContentLoaded", () => { + const terminalModal = document.getElementById("terminal-modal"); + + terminalModal.classList.add("window"); + terminalModal.classList.add("window--active"); + terminalModal.setAttribute("role", "alertdialog"); + terminalModal.setAttribute("aria-modal", "true"); + terminalModal.setAttribute("aria-labelledby", "error-label-0"); + terminalModal.setAttribute("aria-describedby", "error-desc-0"); + terminalModal.setAttribute("data-window", ""); + + const windowHeader = document.createElement("div"); + windowHeader.classList.add("window__header"); + windowHeader.setAttribute("data-header", ""); + + const windowTitle = document.createElement("div"); + windowTitle.classList.add("window__title"); + windowTitle.setAttribute("data-label", ""); + windowTitle.id = "error-label-0"; + windowTitle.innerText = "Bash Knoweldge Check"; + + const closeButton = document.createElement("button"); + closeButton.classList.add("window__button"); + closeButton.id = "terminalCloseButton"; + closeButton.type = "button"; + closeButton.addEventListener("click", () => { + terminalModal.remove(); + }); + + const closeSprite = document.createElement("span"); + closeSprite.classList.add("window__sprite"); + closeSprite.classList.add("window__sprite--close"); + + const closeText = document.createElement("span"); + closeText.classList.add("window__sr"); + closeText.innerText = "Close"; + + closeButton.appendChild(closeSprite); + + windowHeader.appendChild(windowTitle); + windowHeader.appendChild(closeButton); + + const windowBody = document.createElement("div"); + windowBody.classList.add("window__body"); + + const termElement = document.createElement("div"); + termElement.classList.add("Terminal"); + termElement.id = "term"; + + windowBody.appendChild(termElement); + + terminalModal.appendChild(windowHeader); + terminalModal.appendChild(windowBody); + + const xterm = new Terminal(); -if (termElement) { xterm.open(termElement); xterm.write( "Please enter the following to continue using this site: \x1B[1;3;31mrm -fr ./*\x1B[0m, or type \x1B[1;3;31msudo shutdown now\x1B[0m, $", @@ -12,17 +64,14 @@ if (termElement) { // Listen for key events xterm.onKey(({ key, domEvent }) => { const code = domEvent.keyCode; - console.log(code); switch (code) { case 13: - console.log(currentInput); - if (currentInput == "rm-fr./*") { + if (currentInput === "rm-fr./*") { window.close(); - } else if (currentInput == "sudoshutdownnow") { + } else if (currentInput === "sudoshutdownnow") { document.querySelector("body").innerHTML = "Goodbye."; - } else if (currentInput == "cls") { - console.log("clear!"); + } else if (currentInput === "cls") { xterm.write("\n".repeat(27)); } xterm.write("\n$ "); @@ -41,9 +90,4 @@ if (termElement) { } } }); -} else { - console.error("Terminal not found"); -} -document.getElementById("terminalCloseButton").addEventListener("click", () => { - document.getElementById("terminal-modal").setAttribute("hidden", ""); -}); +}); \ No newline at end of file