ION_Archive/PINK-NODDERS
1
0
Fork 0
mirror of https://github.com/ION606/PINK-NODDERS.git synced 2026-05-14 22:16:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
ION606
2024-04-25 11:27:33 -07:00
parent 56933d6adf
commit f0557a21f1
4 changed files with 333 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+37
View File
@@ -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>
pink-nodders.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

script.js
+142
View File
@@ -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);
}
});
style.css
+154
View File
@@ -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;
}