initial commit

2026-05-14 22:16:52 +00:00 · 2024-04-25 11:27:33 -07:00
parent 56933d6adf
commit f0557a21f1
4 changed files with 333 additions and 0 deletions
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PINK NODDERS</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="emote-container">
+        <img src="pink-nodders.gif" alt="PINK NODDERS" class="emote NOCLONE rotneon">
+        <!-- <div class="caption">PINK NODDERS</div> -->
+    </div>
+
+    <div id="cherryBlossomPopup" class="popup">
+        <div class="popup-content">
+            <button class="close-btn" onclick="document.getElementById('cherryBlossomPopup').style.display = 'none'">X</button>
+            <h2>Cherry Blossom Popup</h2>
+            <input type="number" placeholder="HOW MANY PINK NODDERS">
+            <div class="button-group">
+                <button class="theme-button" onclick="changeNodders()">CHANGE NODDERS</button>
+                <button class="theme-button" onclick="dupNodders()">DUPLICATE NODDERS</button>
+                <button class="theme-button" onclick="changeBK()">BACKGROUND NODDERS</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="fullscreenTextContainer">
+        <h1>I N S A N I T Y</h1>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,142 @@
+// Function to generate a random number within a range
+function random(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+// Function to create an emote element
+function createEmote() {
+    const emote = document.createElement('img');
+    emote.src = 'pink-nodders.gif';
+    emote.classList.add('emote');
+    const d = Math.random() * 100;
+
+    emote.style.width = `${d}px`;
+    emote.style.height = `${d}px`;
+
+    document.body.appendChild(emote);
+    return emote;
+}
+
+// Function to update the emote position
+function updatePosition(emote) {
+    emote.style.left = `${random(0, window.innerWidth - 150)}px`; // 150 is the emote width
+    emote.style.top = `${random(0, window.innerHeight - 150)}px`; // 150 is the emote height
+}
+
+// Create multiple emotes and make them bounce around
+const aLength = (localStorage.getItem('alen')) ? Number(localStorage.getItem('alen')) : 20;
+let emotes = Array.from({ length: aLength }, createEmote);
+
+// Update each emote's initial position
+emotes.forEach(updatePosition);
+
+// Function to animate emotes
+function animateEmotes() {
+    emotes.forEach(emote => {
+        const xMove = random(-100, 100);
+        const yMove = random(-100, 100);
+        emote.style.transform = `translate(${xMove}px, ${yMove}px)`;
+        // Update the position after the transition
+        setTimeout(() => updatePosition(emote), 1000);
+    });
+}
+
+function changeNodders() {
+    const aLengthNew = document.querySelector('#cherryBlossomPopup').querySelector('input[type="number"]').value;
+    localStorage.setItem('alen', aLengthNew);
+    document.querySelectorAll('.emote:not(.NOCLONE)').forEach(el => el.remove());
+
+    emotes = Array.from({ length: aLengthNew }, createEmote);
+    emotes.push(document.querySelector('.NOCLONE'));
+    emotes.forEach(updatePosition);
+}
+
+
+function dupNodders() {
+    document.querySelectorAll('.emote:not(.NOCLONE)').forEach(el => el.click());
+}
+
+function changeBK() {
+    let r = 255; // Red value at full to emphasize pink
+    const g = Math.floor(Math.random() * 156 + 100); // Green value between 100 and 255
+    const b = Math.floor(Math.random() * 156 + 100); // Blue value between 100 and 255
+    let alpha = 0.5; // Set transparency to make it softer
+
+    // random chance of hard color
+    const isRand = Math.floor(100 * Math.random());
+    if (isRand === 1 || isRand >= 99) {
+        r = Math.floor(Math.random() * 156 + 100);
+        alpha = 1;
+    }
+
+    const backgroundColor = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    document.body.style.backgroundColor = backgroundColor;
+}
+
+// Animate emotes every second
+document.addEventListener('DOMContentLoaded', () => {
+    emotes.push(document.querySelector('.NOCLONE'));
+    setInterval(animateEmotes, 2000);
+
+    const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a', 'Enter'];
+    let userInput = [];
+
+    let intId = setInterval(() => {userInput = []}, 3000);
+
+    document.addEventListener('keydown', (event) => {
+        userInput.push(event.key);
+
+        clearInterval(intId);
+        intId = setInterval(() => {userInput = []}, 3000);
+
+        // Remove the first element if it exceeds the length
+        if (userInput.length > konamiCode.length) userInput.shift();
+
+        // Check if the userInput array matches the konamiCode
+        if (userInput.join('') === konamiCode.join('')) {
+            let gradient = document.getElementById('neonRainbowGradient');
+            if (!gradient) {
+                gradient = document.createElement('div');
+                gradient.id = 'neonRainbowGradient';
+                gradient.className = 'neon-rainbow';
+                document.body.appendChild(gradient);
+            }
+            else gradient.remove();
+        }
+        else if (event.ctrlKey && event.key === 's') {
+            event.preventDefault();
+            console.log("%cINSANITY", "color:red;font-weight:bold;font-size:100px;");
+            emotes.forEach(e => e.classList.add('rotneon'));
+
+            const container = document.querySelector("#fullscreenTextContainer");
+            container.style.opacity = 1;
+            container.style.zIndex = 1000;
+            setTimeout(() => {
+                container.style.zIndex = 0;
+                container.style.opacity = 0;
+            }, 3000);
+        }
+    });
+});
+
+// Listen for click events on emotes for possible future interactivity
+document.addEventListener('click', e => {
+    if (e.target.classList.contains('NOCLONE')) {
+        const popupEl = document.getElementById('cherryBlossomPopup');
+        popupEl.style.display = "block";
+        popupEl.querySelector('input[type="number"]').value = emotes.length;
+    }
+    else if (e.target.classList.contains('emote')) {
+        const pink_clone = e.target.cloneNode(true);
+        document.body.appendChild(pink_clone);
+
+        // Move the original element to the left relative to its current position
+        e.target.style.transform = `translateX(-${e.target.offsetWidth}px)`;
+
+        // Move the cloned element to the right relative to the original position
+        pink_clone.style.transform = `translateX(${e.target.offsetWidth}px)`;
+
+        emotes.push(pink_clone);
+
+    }
+});
@@ -0,0 +1,154 @@
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f3f3f3;
+    font-family: 'Arial', sans-serif;
+}
+
+.emote-container {
+    text-align: center;
+}
+
+
+.emote {
+    position: absolute;
+    border-radius: 50%;
+    will-change: transform;
+    transition: transform 1s ease, left 1s ease, top 1s ease;
+    cursor: pointer;
+}
+
+
+@keyframes colorShift {
+    0% { filter: hue-rotate(0deg); transform: rotate(0deg); }
+    50% { filter: hue-rotate(180deg); }
+    100% { filter: hue-rotate(360deg); transform: rotate(360deg);;}
+}
+
+.rotneon {
+    filter: brightness(150%) saturate(120%);
+    animation: colorShift 5s infinite;
+}
+
+.NOCLONE {
+    z-index: 300;
+}
+
+
+.popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+}
+
+.popup-content {
+    position: relative;
+    width: 300px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    border-radius: 10px;
+    text-align: center;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-image: url('cherry-blossom-bg.jpg'); /* Background image of cherry blossoms */
+}
+
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    border: none;
+    background: none;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.theme-button {
+    display: block; /* Makes the button block to fill the width of the container */
+    margin: 10px auto; /* Automatically centers the button horizontally */
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    background-color: pink;
+    color: white;
+    cursor: pointer;
+    font-size: 14px;
+    outline: none;
+    width: 90%;
+}
+
+h2 {
+    color: #333;
+}
+
+input[type="number"] {
+    padding: 8px;
+    margin-top: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    width: 80%;
+}
+
+@keyframes moveGradient {
+    0% { background-position: 0% 50%; }
+    100% { background-position: -800% 50%; }
+}
+
+@keyframes rotateGradient {
+    0% {
+        transform: rotate(0deg) scale(1);
+    }
+    100% {
+        transform: rotate(360deg) scale(3);
+    }
+}
+
+.neon-rainbow {
+    height: 200vh;
+    width: 200vw;
+    position: fixed;
+    z-index: -1;
+
+    background: linear-gradient(90deg, #ff0, #f0f, #00f, #0ff, #0f0, #ff0, #f00, #ff0, #ff0);
+    background-size: 800% 100%;
+
+    animation: moveGradient 15s linear infinite, rotateGradient 20s linear infinite;
+}
+
+
+#fullscreenTextContainer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 4em;
+    color: white;
+    opacity: 0;
+    transition: opacity 2s ease-in-out;
+    font-weight: bold;
+
+    text-shadow: 
+        0 0 5px #ff5ec9, /* Glowing effect */
+        0 0 10px #fc86ab, /* Glowing effect */
+        0 0 20px #ff5ec9, /* Glowing effect */
+        0 0 40px #fc86ab; /* Glowing effect */
+}
+
+.hidden {
+    opacity: 0;
+}