New

vansh-codes · Nov 7, 2024 · e2a9512 · e2a9512
1 parent e4526de
commit e2a9512
Show file tree

Hide file tree

Showing 2 changed files with 250 additions and 0 deletions.
diff --git a/Sample.html b/Sample.html
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ultimate Chaos Web</title>
+    <style>
+        /* Basic Reset */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        /* Body Styling */
+        body, html {
+            overflow: hidden;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+            font-family: Arial, sans-serif;
+            text-align: center;
+        }
+
+        /* Hypnotic Background */
+        .hypnotic-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle, #ff00ff, #00ffff);
+            animation: hypnotic 2s linear infinite;
+            z-index: -1;
+            transition: background 0.3s ease;
+        }
+
+        @keyframes hypnotic {
+            0% { transform: rotate(0deg) scale(1); }
+            100% { transform: rotate(720deg) scale(1.1); }
+        }
+
+        /* Layered Pattern Overlay */
+        .hypnotic-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05) 10px, transparent 15px, rgba(255, 255, 255, 0.1) 20px);
+            animation: overlayAnimation 1s linear infinite alternate;
+            z-index: -1;
+            mix-blend-mode: overlay;
+        }
+
+        @keyframes overlayAnimation {
+            0% { transform: scale(1) rotate(0deg); }
+            50% { transform: scale(1.2) rotate(20deg); }
+            100% { transform: scale(1) rotate(-20deg); }
+        }
+
+        /* Chaotic Text */
+        .chaos-text {
+            position: absolute;
+            animation: flicker 0.1s infinite alternate;
+            color: #ff00ff;
+            cursor: pointer;
+            transition: transform 0.5s ease;
+            font-size: 3rem; /* Default size */
+        }
+
+        @keyframes flicker {
+            0%, 100% { opacity: 1; color: #ff00ff; }
+            50% { opacity: 0.5; color: #00ffff; }
+        }
+
+        /* Floating Icons */
+        .floating-icon {
+            position: absolute;
+            font-size: 5rem; /* Increased size */
+            color: #ffcc00;
+            opacity: 0.8;
+            cursor: pointer;
+            transition: transform 0.5s ease;
+        }
+
+        /* Random Movement */
+        .random-move {
+            animation: randomMove 5s infinite alternate;
+        }
+
+        @keyframes randomMove {
+            0% { transform: translate(0, 0); }
+            25% { transform: translate(50px, -50px); }
+            50% { transform: translate(-50px, 50px); }
+            75% { transform: translate(50px, 30px); }
+            100% { transform: translate(-30px, -30px); }
+        }
+
+        /* Clone Styling */
+        .clone {
+            position: absolute;
+            font-size: 2rem;
+            opacity: 0.7;
+            animation: fall 1s ease forwards;
+        }
+
+        @keyframes fall {
+            from { transform: translateY(0); }
+            to { transform: translateY(100vh); opacity: 0; }
+        }
+
+        /* Spiral Letter Styling */
+        .spiral-letter {
+            position: absolute;
+            font-size: 3rem;
+            color: #ffcc00;
+            opacity: 0.7;
+            animation: spiral 5s linear forwards;
+        }
+
+        @keyframes spiral {
+            0% {
+                transform: translate(0, 0) scale(1) rotate(0deg);
+                opacity: 1;
+            }
+            100% {
+                transform: translate(-50%, -50%) scale(0.1) rotate(720deg);
+                opacity: 0;
+            }
+        }
+
+        /* Burst Animation */
+        @keyframes burst {
+            0% {
+                transform: scale(1);
+                opacity: 1;
+            }
+            100% {
+                transform: scale(3) rotate(360deg);
+                opacity: 0;
+            }
+        }
+
+        /* Screen Flicker Animation */
+        @keyframes screenFlicker {
+            0%, 100% { opacity: -1; }
+            50% { opacity: 0.9; }
+            75% { opacity: 0.8; }
+        }
+
+        .hypnotic-background, .hypnotic-overlay {
+            animation: hypnotic 2s linear infinite, screenFlicker 0.1s infinite alternate;
+        }
+
+    </style>
+</head>
+<body>
+    <!-- Hypnotic Background and Overlay -->
+    <div class="hypnotic-background" id="hypnoticBackground"></div>
+    <div class="hypnotic-overlay" id="hypnoticOverlay"></div>
+
+    <!-- Main Content -->
+    <div class="chaos-text" id="chaosText">Ultimate Chaos Web</div>
+
+    <!-- Floating Icons -->
+    <div class="floating-icon random-move" style="left: 15%; top: 25%;" onclick="createClones(event)">💥</div>
+    <div class="floating-icon random-move" style="left: 75%; top: 45%;" onclick="createClones(event)">🎉</div>
+    <div class="floating-icon random-move" style="left: 35%; top: 70%;" onclick="createClones(event)">🔥</div>
+    <div class="floating-icon random-move" style="left: 55%; top: 30%;" onclick="createClones(event)">🎈</div>
+    <div class="floating-icon random-move" style="left: 80%; top: 20%;" onclick="createClones(event)">🌟</div>
+    <div class="floating-icon random-move" style="left: 10%; top: 60%;" onclick="createClones(event)">🚀</div>
+    <div class="floating-icon random-move" style="left: 90%; top: 70%;" onclick="createClones(event)">🌈</div>
+    <div class="floating-icon random-move" style="left: 50%; top: 50%;" onclick="createClones(event)">🎶</div>
+
+    <script>
+        const chaosText = document.getElementById('chaosText');
+        const hypnoticBackground = document.getElementById('hypnoticBackground');
+        const hypnoticOverlay = document.getElementById('hypnoticOverlay');
+
+        // Random letters array
+        const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+        // Function to apply chaos effect on text
+        function applyChaos() {
+            const maxWidth = window.innerWidth - chaosText.offsetWidth;
+            const maxHeight = window.innerHeight - chaosText.offsetHeight;
+            const randomX = Math.floor(Math.random() * maxWidth);
+            const randomY = Math.floor(Math.random() * maxHeight);
+            const randomSize = Math.floor(Math.random() * 5 + 2) + 'rem'; // Random size
+
+            chaosText.style.left = `${randomX}px`;
+            chaosText.style.top = `${randomY}px`;
+            chaosText.style.fontSize = randomSize; // Change size randomly
+
+            // Change background colors randomly
+            const randomColor1 = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+            const randomColor2 = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+            hypnoticBackground.style.background = `radial-gradient(circle, ${randomColor1}, ${randomColor2})`;
+
+            // Randomize overlay size and rotation
+            const randomScale = Math.random() * 0.5 + 0.75;
+            const randomRotation = Math.floor(Math.random() * 360);
+            hypnoticOverlay.style.transform = `scale(${randomScale}) rotate(${randomRotation}deg)`;
+        }
+
+        // Create clones of the clicked icon and scatter them
+        function createClones(event) {
+            const icon = event.target.innerText;
+            const fragment = document.createDocumentFragment();
+
+            // Enlarge the clicked emoji
+            event.target.style.animation = 'burst 0.5s forwards';
+
+            for (let i = 0; i < 100; i++) {
+                const clone = document.createElement('div');
+                clone.classList.add('clone');
+                clone.textContent = icon;
+                clone.style.left = `${Math.random() * window.innerWidth}px`;
+                clone.style.top = `${Math.random() * window.innerHeight}px`;
+                clone.style.fontSize = `${Math.random() * 2 + 1}rem`;
+                clone.style.animationDelay = `${Math.random() * 2}s`;
+                fragment.appendChild(clone);
+            }
+
+            // Append the clones to the document
+            document.body.appendChild(fragment);
+
+            // Remove clones after animation
+            setTimeout(() => {
+                document.body.querySelectorAll('.clone').forEach(clone => clone.remove());
+            }, 1000);
+        }
+
+        // Apply chaos at intervals
+        setInterval(applyChaos, 3000);
+    </script>
+</body>
+</html>