From e335873403e9eb130ea3ae99acd473c73388825f Mon Sep 17 00:00:00 2001
From: Anshdeep <anshdeep0504@gmail.com>
Date: Wed, 30 Oct 2024 21:56:45 +0530
Subject: [PATCH] chaosssss

---
 chaosweb-v@2/index.html | 173 ++++++++++++++++++++++++++++------------
 1 file changed, 123 insertions(+), 50 deletions(-)
diff --git a/chaosweb-v@2/index.html b/chaosweb-v@2/index.html
index d040f92..a7fa78c 100644
--- a/chaosweb-v@2/index.html
+++ b/chaosweb-v@2/index.html
@@ -1,56 +1,129 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/logo.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ChaosWeb</title>
-    <!-- Link to the external CSS file -->
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <!-- First Parallax Section -->
-    <div class="parallax"></div>
-
-    <!-- Content Section -->
-    <div class="content">
-      <h1>Welcome to ChaosWeb</h1>
-    </div>
-
-    <!-- Second Parallax Section -->
-    <div class="parallax-2"></div>
-
-    <!-- Content Section -->
-    <div class="content">
-      <h1>Scroll for the Chaos</h1>
-    </div>
-    <div id="root"></div>
-    
-    <script type="module" src="/src/main.jsx"></script>
-    <script>
-      // The base title that should not fully change
-      const titleText = "Chaotic Title!";
-      const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
-  
-      // Function to randomize certain characters only
-      function randomizeTitle() {
-        let chaoticTitle = '';
-        for (let i = 0; i < titleText.length; i++) {
-          // Randomize only certain characters, while leaving others untouched
-          if (titleText[i] !== ' ' && Math.random() > 0.7) {  // Adjust randomness threshold here (0.7)
-            chaoticTitle += characters.charAt(Math.floor(Math.random() * characters.length));
-          } else {
-            chaoticTitle += titleText[i];  // Keep the original character
-          }
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/logo.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ChaosWeb</title>
+  <link rel="stylesheet" href="style.css" />
+  <style>
+    /* Parallax sections */
+    .parallax, .parallax-2 {
+      background: url('parallax-image.jpg') no-repeat fixed center;
+      height: 500px;
+      background-size: cover;
+    }
+
+    /* Content styling */
+    .content {
+      text-align: center;
+      margin: 50px;
+      font-family: Arial, sans-serif;
+    }
+
+    /* Chaotic text styling */
+    .chaos-text {
+      font-size: 3rem;
+      color: #33ccff;
+      display: inline-block;
+      position: relative;
+      animation: chaoticRotation 0.3s infinite alternate ease-in-out, 
+                 chaoticScale 0.2s infinite alternate ease-in-out, 
+                 chaoticColor 0.1s infinite alternate;
+    }
+
+    /* Keyframes for chaotic animations */
+    @keyframes chaoticRotation {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(10deg); }
+    }
+
+    @keyframes chaoticScale {
+      0% { transform: scale(1); }
+      100% { transform: scale(1.2); }
+    }
+
+    @keyframes chaoticColor {
+      0%, 100% { color: #33ccff; }
+      25% { color: #ff5733; }
+      50% { color: #33ff57; }
+      75% { color: #5733ff; }
+    }
+
+    /* Adding random glitches and position shifts */
+    @keyframes glitch {
+      0% { transform: translate(0px, 0px); }
+      25% { transform: translate(-5px, 5px); }
+      50% { transform: translate(5px, -5px); }
+      75% { transform: translate(-5px, -5px); }
+      100% { transform: translate(5px, 5px); }
+    }
+    .chaos-text.glitch {
+      animation: chaoticRotation 0.3s infinite alternate ease-in-out,
+                 chaoticScale 0.2s infinite alternate ease-in-out,
+                 chaoticColor 0.1s infinite alternate,
+                 glitch 0.05s infinite alternate ease-in-out;
+    }
+  </style>
+</head>
+<body>
+  <!-- First Parallax Section -->
+  <div class="parallax"></div>
+
+  <!-- Content Section -->
+  <div class="content">
+    <h1 class="chaos-text glitch" id="chaosText">Welcome to ChaosWeb</h1>
+  </div>
+
+  <!-- Second Parallax Section -->
+  <div class="parallax-2"></div>
+
+  <!-- Content Section -->
+  <div class="content">
+    <h1 class="chaos-text glitch" id="chaosScrollText">Scroll for the Chaos</h1>
+  </div>
+
+  <div id="root"></div>
+
+  <script type="module" src="/src/main.jsx"></script>
+  <script>
+    // JavaScript for dynamic title changes
+    const titleText = "Chaotic Title!";
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+
+    function randomizeTitle() {
+      let chaoticTitle = '';
+      for (let i = 0; i < titleText.length; i++) {
+        if (titleText[i] !== ' ' && Math.random() > 0.5) {
+          chaoticTitle += characters.charAt(Math.floor(Math.random() * characters.length));
+        } else {
+          chaoticTitle += titleText[i];
         }
-        // Set the new title in the document
-        document.title = chaoticTitle;
-        
       }
-  
-      // Update the title every 500 milliseconds
-      setInterval(randomizeTitle, 500);
+      document.title = chaoticTitle;
+    }
+    setInterval(randomizeTitle, 300);
+
+    // JavaScript for chaotic effects on both text elements
+    const chaosText = document.getElementById('chaosText');
+    const chaosScrollText = document.getElementById('chaosScrollText');
+
+    function applyExtremeChaosEffect(element) {
+      const randomRotation = Math.floor(Math.random() * 30) - 15;
+      const randomScale = 1 + Math.random() * 0.3;
+      const randomColor = `hsl(${Math.floor(Math.random() * 360)}, 100%, 50%)`;
       
-    </script>
-  </body>
+      element.style.transform = `rotate(${randomRotation}deg) scale(${randomScale})`;
+      element.style.color = randomColor;
+      element.style.marginLeft = `${Math.floor(Math.random() * 20) - 10}px`;
+      element.style.marginTop = `${Math.floor(Math.random() * 20) - 10}px`;
+    }
+
+    // Apply chaotic effect every 100ms to both elements
+    setInterval(() => {
+      applyExtremeChaosEffect(chaosText);
+      applyExtremeChaosEffect(chaosScrollText);
+    }, 100);
+  </script>
+</body>
 </html>
