Added Emoji-Land section

vansh-codes · Oct 16, 2024 · 7774d63 · 7774d63
1 parent 09759ec
commit 7774d63
Show file tree

Hide file tree

Showing 8 changed files with 265 additions and 0 deletions.
diff --git a/emojiland.html b/emojiland.html
@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChaosWeb - Emoji Land</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background: black;
+        }
+
+        #emoji-land {
+            width: 100vw;
+            height: 100vh;
+            position: relative;
+        }
+
+        canvas {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        .emoji {
+            position: absolute;
+            font-size: 30px;
+            transition: transform 0.5s ease;
+            cursor: pointer;
+        }
+
+        .emoji:hover {
+            transform: scale(5) !important;
+        }
+
+        @keyframes randomChangeSize {
+            0% { font-size: 20px; }
+            50% { font-size: 70px; }
+            100% { font-size: 20px; }
+        }
+
+        @keyframes glitchBackground {
+            0% { background-color: black; }
+            33% { background-color: lightgrey; }
+            66% { background-color: darkgrey; }
+            100% { background-color: black; }
+        }
+
+        body {
+            animation: glitchBackground 0.4s infinite;
+        }
+
+        #welcome {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(0, 0, 0, 0.8);
+            z-index: 1000;
+            animation: fadeOut 1s forwards 4s;
+            font-family: 'Courier New', Courier, monospace;
+        }
+
+        .neon {
+            color: #ffff00;
+            font-size: 50px;
+            text-shadow: 0 0 10px #ffff6c, 0 0 20px #ffff96, 0 0 30px #ffffcf, 0 0 40px #ffffff;
+            display: inline-block;
+        }        
+
+        @keyframes fadeOut {
+            0% { opacity: 1; }
+            100% { opacity: 0; visibility: hidden; }
+        }
+
+        @keyframes charEnter {
+            0% { transform: rotate(360deg) scale(0); opacity: 0; }
+            100% { transform: rotate(0deg) scale(1); opacity: 1; }
+        }
+
+        @keyframes alignText {
+            0% { transform: translateY(50px); opacity: 0; }
+            100% { transform: translateY(0); opacity: 1; }
+        }
+
+        .char {
+            opacity: 0;
+            animation: charEnter 2s ease forwards;
+            display: inline-block;
+        }
+
+        .char.show {
+            animation: charEnter 2s ease forwards, alignText 1s ease-in-out 1.5s forwards;
+        }   
+    </style>
+</head>
+<body>
+    <div id="welcome">
+        <span class="neon">
+            <span class="char">W</span>
+            <span class="char">e</span>
+            <span class="char">l</span>
+            <span class="char">c</span>
+            <span class="char">o</span>
+            <span class="char">m</span>
+            <span class="char">e</span>
+            <span>&nbsp;</span>
+            <span class="char">t</span>
+            <span class="char">o</span>
+            <span>&nbsp;</span>
+            <span class="char">E</span>
+            <span class="char">m</span>
+            <span class="char">o</span>
+            <span class="char">j</span>
+            <span class="char">i</span>
+            <span>-</span>
+            <span class="char">L</span>
+            <span class="char">a</span>
+            <span class="char">n</span>
+            <span class="char">d</span>
+        </span>
+    </div>
+
+    <section id="emoji-land">
+        <canvas id="emojiCanvas"></canvas>
+    </section>
+
+    <!-- Audio files -->
+    <audio id="dramaticSound" src="sfx/Emoji-Land/drammatic-cinematic-glitch.mp3"></audio>
+    <audio id="introMusic" src="sfx/Emoji-Land/intro-music-black-box-dirty-glitch.mp3"></audio>
+    <audio id="electricWasps" src="sfx/Emoji-Land/electric-wasps.mp3"></audio>
+    <audio id="hurricane" src="sfx/Emoji-Land/hurricane.mp3"></audio>
+    <audio id="glitchSound" src="sfx/Emoji-Land/glitch-sound.mp3"></audio>
+    <audio id="digitalChaos" src="sfx/Emoji-Land/digital-chaos.mp3"></audio>
+
+    <script>
+        const canvas = document.getElementById('emojiCanvas');
+        const ctx = canvas.getContext('2d');
+
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        const emojis = ['😎', '🤯', '😱', '👻', '🤖', '👽', '💀', '😵‍💫', '😈', '🤡', '🔥', '🌪️', '💥', 
+        '🎃', '💣', '⚡', '🤪', '😜', '🌀', '👾', '😬', '🤢', '😠', '🛸', '🐉', '👺', '🥴', '🫨'];
+
+        const audioFiles = {
+            '😎': 'introMusic',
+            '🤯': 'dramaticSound',
+            '😱': 'electricWasps',
+            '👻': 'hurricane',
+            '🤖': 'electricWasps',
+            '👽': 'hurricane',
+            '💀': 'dramaticSound',
+            '😵‍💫': 'electricWasps',
+            '😈': 'hurricane',
+            '🤡': 'glitchSound',
+            '🔥': 'digitalChaos',
+            '🌪️': 'hurricane',
+            '💥': 'dramaticSound',
+            '🎃': 'hurricane',
+            '💣': 'dramaticSound',
+            '⚡': 'electricWasps',
+            '🤪': 'digitalChaos',
+            '😜': 'introMusic',
+            '🌀': 'dramaticSound',
+            '👾': 'electricWasps',
+            '😬': 'hurricane',
+            '🤢': 'glitchSound',
+            '😠': 'digitalChaos',
+            '🛸': 'introMusic',
+            '🐉': 'dramaticSound',
+            '👺': 'electricWasps',
+            '🥴': 'hurricane',
+            '🫨': 'glitchSound',
+        };        
+
+        let emojiElements = [];
+
+        function randomPosition(max) {
+            return Math.floor(Math.random() * max);
+        }
+
+        function randomEmoji() {
+            return emojis[Math.floor(Math.random() * emojis.length)];
+        }
+
+        function randomDuration() {
+            return (Math.random() * 3) + 1; 
+        }
+
+        function createEmoji() {
+            const emojiDiv = document.createElement('div');
+            const emoji = randomEmoji();
+            emojiDiv.innerHTML = emoji;
+            emojiDiv.classList.add('emoji');
+            emojiDiv.style.left = `${randomPosition(window.innerWidth)}px`;
+            emojiDiv.style.top = `${randomPosition(window.innerHeight)}px`;
+            emojiDiv.style.fontSize = '20px'; // Initial size
+            emojiDiv.style.animation = `randomChangeSize ${randomDuration()}s infinite ease-in-out`; // Each emoji animates differently
+
+            const audioId = audioFiles[emoji];
+            const audio = document.getElementById(audioId);
+
+            emojiDiv.onmouseover = () => {
+                if (audio) {
+                    audio.currentTime = 0; 
+                    audio.play();
+                }
+            };
+
+            emojiDiv.onmouseout = () => {
+                if (audio) {
+                    audio.pause(); 
+                    audio.currentTime = 0; 
+                }
+            };
+
+            document.body.appendChild(emojiDiv);
+            emojiElements.push(emojiDiv);
+        }
+
+        function populateEmojiLand() {
+            for (let i = 0; i < 120; i++) {
+                createEmoji();
+            }
+        }
+
+        function showWelcomeText() {
+            const chars = document.querySelectorAll('.char');
+            let delay = 0;
+            chars.forEach(char => {
+                setTimeout(() => {
+                    char.classList.add('show');
+                }, delay);
+                delay += 150; 
+            });
+        }
+
+        const welcomeScreen = document.getElementById('welcome');
+        setTimeout(() => {
+            welcomeScreen.style.visibility = 'visible';
+            showWelcomeText();
+        }, 500); 
+
+        setTimeout(() => {
+            populateEmojiLand();
+        }, 4000); 
+
+        window.addEventListener('resize', () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        });
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
diff --git a/sfx/Emoji-Land/digital-chaos.mp3 b/sfx/Emoji-Land/digital-chaos.mp3
diff --git a/sfx/Emoji-Land/drammatic-cinematic-glitch.mp3 b/sfx/Emoji-Land/drammatic-cinematic-glitch.mp3
diff --git a/sfx/Emoji-Land/electric-wasps.mp3 b/sfx/Emoji-Land/electric-wasps.mp3
diff --git a/sfx/Emoji-Land/glitch-sound.mp3 b/sfx/Emoji-Land/glitch-sound.mp3
diff --git a/sfx/Emoji-Land/hurricane.mp3 b/sfx/Emoji-Land/hurricane.mp3
diff --git a/sfx/Emoji-Land/intro-music-black-box-dirty-glitch.mp3 b/sfx/Emoji-Land/intro-music-black-box-dirty-glitch.mp3