🚀Initial commit

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: [vansh-codes]
+# You can visit my GitHub sponsors profile at: https://github.com/sponsors/vansh-codes

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,28 @@
+name: "🐞 Chaos Report"
+description: "Found a bug in the world of ChaosWeb? Let us know if it's more than just intentional chaos!"
+title: "CHAOS REPORT:"
+labels: ["chaos", "bug"]
+body:
+  - type: checkboxes
+    attributes:
+      label: "Is there an actual issue here?"
+      description: "Please check if what you're experiencing is an actual bug or just a part of the chaotic experience."
+      options:
+        - label: "I have verified this isn't part of ChaosWeb's intentional disorder"
+          required: true
+  - type: textarea
+    attributes:
+      label: "Describe the unexpected!"
+      description: "A brief description of what went wrong, and why you think it's a real bug and not just more chaos."
+    validations:
+      required: true
+  - type: checkboxes
+    attributes:
+      label: "Confirm"
+      options:
+        - label: "I understand ChaosWeb is intentionally designed to be messy"
+          required: true
+        - label: "I agree to follow this project's Code of Conduct"
+          required: true
+        - label: "I found a genuine bug amidst the chaos"
+        - label: "I'm enjoying the mess!"

.github/ISSUE_TEMPLATE/confusion.yml

@@ -0,0 +1,26 @@
+name: "🌀 Confusion Report"
+description: "Lost in the chaos? Share your moments of confusion here!"
+title: "CONFUSION:"
+labels: ["confusion", "feedback"]
+body:
+  - type: textarea
+    attributes:
+      label: "What left you confused?"
+      description: "Describe the part of ChaosWeb that bewildered you the most. Let us know how lost you felt and where!"
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "What were you expecting?"
+      description: "Share what you *thought* would happen before things went off the rails."
+    validations:
+      required: true
+  - type: checkboxes
+    attributes:
+      label: "Confirm"
+      options:
+        - label: "I understand that confusion is a part of the ChaosWeb experience"
+          required: true
+        - label: "I agree to follow this project's Code of Conduct"
+          required: true
+        - label: "I want to work on improving this confusing element"

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,27 @@
+name: "✨ Chaos Feature Suggestion"
+description: "Got an idea to make ChaosWeb even more chaotic? Share your twisted vision with us!"
+title: "Chaotic Feat:"
+labels: ["enhancement", "chaos"]
+body:
+  - type: textarea
+    attributes:
+      label: "Describe your chaotic idea"
+      description: "Tell us how you'd like to make ChaosWeb even messier or more unpredictable."
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: "Add Screenshots or Sketches"
+      description: "Visual aids are welcome in this chaotic world! Add any screenshots or sketches to help explain your idea."
+    validations:
+      required: true
+  - type: checkboxes
+    attributes:
+      label: "Confirm"
+      options:
+        - label: "I understand that my idea will add to the chaos and I'm okay with it"
+          required: true
+        - label: "I agree to follow this project's Code of Conduct"
+          required: true
+        - label: "I'm a GSSoC'24 Extd Contributor"
+        - label: "I want to work on this feature"

.github/workflows/autocomment-iss-close.yml

@@ -0,0 +1,29 @@
+name: Comment on Issue Close
+
+on:
+  issues:
+    types: [closed]
+
+jobs:
+  greet-on-close:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: Greet User
+        uses: actions/github-script@v5
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const issue = context.payload.issue;
+            const issueCreator = issue.user.login;
+            const issueNumber = issue.number;
+
+            const greetingMessage = `Hello @${issueCreator}! Your chaotic issue #${issueNumber} has been closed. Thank you for your contribution!`;
+
+            github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: issueNumber,
+              body: greetingMessage
+            });

.github/workflows/autocomment-pr-merge.yml

@@ -0,0 +1,36 @@
+name: Auto Comment on PR Merge
+
+on:
+  pull_request:
+    types: [closed]
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    if: github.event.pull_request.merged == true
+
+    steps:
+    - name: Checkout Repository
+      uses: actions/checkout@v2
+
+    - name: Add Comment to Issue
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: |
+        COMMENT=$(cat <<EOF
+        {
+          "body": "🎉 Your chaotic pull request has been successfully merged! 🎉 Thank you for your valuable contribution to our chaos. Your chaos are greatly appreciated. Feel free to reach out if you have any more contributions or if there's anything chaotic we can assist you with. Keep up the chaotic work! 🚀"
+        }
+        EOF
+        )
+        curl -X POST \
+          -H "Authorization: Bearer $GITHUB_TOKEN" \
+          -H "Accept: application/vnd.github.v3+json" \
+          https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}/comments \
+          -d "$COMMENT"

.github/workflows/autocomment-pr-raise.yml

@@ -0,0 +1,37 @@
+name: Auto Comment on PR
+
+on:
+  pull_request_target:
+    types: [opened]
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    steps:
+    - name: Add Comment to Pull Request
+      run: |
+        COMMENT=$(cat <<EOF
+        {
+          "body": "Thank you for submitting your chaotic pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our chaotic [CONTRIBUTING.md](https://github.com/vansh-codes/ChaosWeb/blob/main/CONTRIBUTING). If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊"
+        }
+        EOF
+        )
+        RESPONSE=$(curl -s -o response.json -w "%{http_code}" \
+          -X POST \
+          -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+          -H "Accept: application/vnd.github.v3+json" \
+          https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}/comments \
+          -d "$COMMENT")
+        cat response.json
+        if [ "$RESPONSE" -ne 201 ]; then
+          echo "Failed to add comment"
+          exit 1
+        fi
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1 @@
+.vscode

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Vansh Chaurasiya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README

@@ -0,0 +1,84 @@
+# ChaosWeb: The Disorderly UI Experiment
+
+Welcome to **ChaosWeb** — a web design experiment where nothing behaves as it should, and everything is delightfully out of order! If you’re tired of the conventional and predictable nature of websites, **ChaosWeb** offers a creative break from the norm with unpredictable navigation, bizarre sliders, and a world where scrolling defies gravity.
+
+## 🚀 What is ChaosWeb?
+
+**ChaosWeb** is a quirky and deliberately chaotic HTML, CSS, and JavaScript website project designed to challenge the norms of web design. It’s a place where everything is intentionally messy and unpredictable. The goal isn’t usability, but rather to create an anti-UI experience that’s confusing, frustrating, yet strangely fun to explore.
+
+## 🤯 Example Features of the Chaos:
+
+- **Unreliable Navbar:** Click on a menu item, and watch as a completely unrelated dropdown opens up.
+- **Reverse Scrolling:** Scroll vertically to see horizontal movement, and horizontally to scroll vertically. Nothing is as it seems!
+- **Slider Madness:** Navigate through the website using a custom-built slider instead of the standard browser scrollbar.
+- **Displaced Clicks:** Random elements react to your clicks, but not the ones you expect.
+- **Distorted UI Elements:** Watch buttons, dropdowns, and sliders randomly change positions and behavior.
+- **Wierd Animations**: Animations that are sick to watch.
+- **Misleading Animations:** Hover effects and animations that lead your cursor astray.
+- **Hidden Secrets:** Easter eggs of disorder await the most curious adventurers.
+
+## 🤹‍♂️ The Experience
+
+ChaosWeb is not about smooth navigation or polished interfaces. It’s about creating a chaotic user journey full of surprises, designed to subvert your expectations. Users will find themselves laughing, confused, and maybe even a bit annoyed, as they explore the mess.
+
+### Live Preview:
+**[Live Demo](#)** (Link coming soon!)
+
+---
+
+## 🛠️ Tech Stack
+
+- **HTML**: The foundation of the chaos.
+- **CSS**: Styles that never behave as you’d expect.
+- **JavaScript**: Bringing the madness to life with unpredictable interactions.
+
+## 🎯 Purpose
+
+This project serves as an exploration of **anti-user experience (anti-UX)** and the deliberate breakage of web design rules. It's a playground for developers to experiment with unusual UI/UX patterns, break away from the ordinary, and perhaps learn something new by going against the grain.
+
+---
+
+## 🧪 How to Install & Run
+
+1. **Clone the Repository**:
+   ```bash
+   git clone https://github.com/YourUsername/ChaosWeb.git
+   ```
+
+2. **Navigate to the project directory**:
+   ```bash
+   cd ChaosWeb
+   ```
+
+3. **Open in Browser**:
+   Open `index.html` in your preferred web browser and enjoy the chaos!
+
+---
+
+## 🚧 Future Features
+
+- **Randomized Element Movement**: Elements that float, drift, and change positions as you scroll.
+- **Inverted Controls**: Buttons that do the opposite of what you think they will.
+- **Mystery Popups**: Popups that appear and disappear at random, leaving users puzzled.
+- **More Easter Eggs**: Add hidden interactions that will reward curious users.
+
+---
+
+## 🤝 Contributing
+
+If you have ideas to make ChaosWeb even more chaotic, feel free to fork the repo and submit a pull request! Let’s make the internet messy together.
+
+---
+
+## 🔥 Why Build This?
+
+Because sometimes, breaking the rules is fun. **ChaosWeb** is a way to shake off the constraints of traditional web design and embrace the joy of unpredictability. If you’re a developer looking to play around with unconventional ideas, this is the perfect sandbox for you.
+
+---
+
+**Have fun exploring the chaos of the web!**
+
+---
+
+### License
+This project is licensed under the MIT License.

index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChaosWeb - The Disorderly UI Experiment</title>
+</head>
+<body>
+    <h1 id="chaos-header">ChaosWeb - The Disorderly UI Experiment</h1>
+
+    <style>
+        @keyframes wave {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-10px);
+            }
+        }
+
+        #chaos-header span {
+            display: inline-block;
+            animation: wave 1s infinite;
+        }
+
+        #chaos-header span:nth-child(odd) {
+            animation-delay: 0.1s;
+        }
+
+        #chaos-header span:nth-child(even) {
+            animation-delay: 0.2s;
+        }
+    </style>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const header = document.getElementById('chaos-header');
+            const words = header.textContent.split(' ');
+            header.innerHTML = words.map(word => `<span>${word}</span>`).join(' ');
+        });
+    </script>
+</body>
+</html>