Fixed and resolved more than one issue (#1385)

Rakesh9100 · Dec 1, 2024 · 3045c65 · 3045c65
1 parent 254e868
commit 3045c65
Show file tree

Hide file tree

Showing 20 changed files with 1,013 additions and 148 deletions.
diff --git a/404.html b/404.html
@@ -86,15 +86,10 @@
     <section class="comp-section" id="404">
         <div class="compcontainer">
             <div class="logo">
-                <img src="./assets/images/logo.png" alt="Logo">
+                <img src="./assets/images/404.gif" alt="Logo" style="width: 640px !important; height: 450px !important; object-fit: cover; border-radius: 25px;">
             </div>
-            <h1 class="heading">404</h1>
-            <h3 class="sub-head">Page Not Found</h3>
-            <p class="paragraph">
-                Sorry, but the page you were looking for could not be found.
-            </p>
             <a href="index.html">
-                <button class="started">Go Back Home</button>
+                <button class="started" style="margin-top: 32px;">Go Back Home</button>
             </a>
         </div>
     </section>

diff --git a/Components/Buttons/Confetti-Button/index.html b/Components/Buttons/Confetti-Button/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <title>Confetti Button</title>
+</head>
+
+<body>
+    <button class="confetti-button">Celebrate!</button>
+
+    <script src="./script.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
+</body>
+</html>
diff --git a/Components/Buttons/Confetti-Button/script.js b/Components/Buttons/Confetti-Button/script.js
@@ -0,0 +1,50 @@
+const confettiButton = document.querySelector('.confetti-button');
+
+confettiButton.addEventListener('click', () => {
+    const confettiCount = 80;
+    const buttonRect = confettiButton.getBoundingClientRect();
+
+    for (let i = 0; i < confettiCount; i++) {
+        const confetti = document.createElement('div');
+        confetti.classList.add('confetti');
+
+        // Assign random shapes and sizes for variety
+        const shapes = ['circle', 'square', 'triangle'];
+        const shape = shapes[Math.floor(Math.random() * shapes.length)];
+
+        if (shape === 'circle') {
+            confetti.style.width = confetti.style.height = '12px';
+            confetti.style.borderRadius = '50%';
+        } else if (shape === 'square') {
+            confetti.style.width = confetti.style.height = '10px';
+        } else if (shape === 'triangle') {
+            confetti.style.width = 0;
+            confetti.style.height = 0;
+            confetti.style.borderLeft = '5px solid transparent';
+            confetti.style.borderRight = '5px solid transparent';
+            confetti.style.borderBottom = `10px solid hsl(${Math.random() * 360}, 100%, 50%)`;
+        }
+
+        confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`; // Random confetti colors
+        confetti.style.left = `${buttonRect.left + buttonRect.width / 2}px`; // Start from center of button
+        confetti.style.top = `${buttonRect.top + buttonRect.height / 2}px`; // Start from center of button
+
+        // Random direction for X and Y
+        confetti.style.setProperty('--x-direction', Math.random() - 0.5); // Horizontal spread
+        confetti.style.setProperty('--y-direction', Math.random() - 0.5); // Initial upward/downward motion
+        confetti.style.setProperty('--gravity', Math.random() * 1.2 + 0.4); // Simulate gravity to pull downward
+
+        document.body.appendChild(confetti);
+
+        // Confetti motion using GSAP
+        gsap.to(confetti, {
+            x: (Math.random() - 0.5) * 1200, // Spread horizontally
+            y: (Math.random() - 0.5) * 1200, // Spread vertically
+            rotation: Math.random() * 1440, // Spin confetti with more rotations
+            duration: 2 + Math.random(), // Randomized duration for each piece
+            opacity: 0,
+            scale: Math.random() * 1.5 + 0.5, // Randomize size slightly
+            onComplete: () => confetti.remove(), // Remove confetti after animation
+        });
+    }
+});
diff --git a/Components/Buttons/Confetti-Button/style.css b/Components/Buttons/Confetti-Button/style.css
@@ -0,0 +1,60 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #282c34;
+    margin: 0;
+    overflow: hidden;
+}
+
+.confetti-button {
+    font-size: 20px;
+    color: #fff;
+    background-color: #00b4d8;
+    border: none;
+    padding: 15px 30px;
+    border-radius: 50px;
+    cursor: pointer;
+    position: relative;
+    z-index: 2;
+    box-shadow: 0 8px 25px rgba(0, 180, 216, 0.5);
+    transition: background-color 0.3s ease;
+}
+
+.confetti-button:hover {
+    background-color: #90e0ef;
+}
+
+.confetti-button:active {
+    background-color: #0077b6;
+}
+
+.confetti {
+    position: absolute;
+    width: 10px;
+    height: 20px;
+    border-radius: 2px;
+    pointer-events: none;
+    animation: fly 2.5s ease-out forwards;
+    z-index: 1;
+    opacity: 1;
+    transform-origin: center center;
+}
+
+/* Rotation and motion animation */
+@keyframes fly {
+    0% {
+        opacity: 1;
+        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
+    }
+
+    50% {
+        transform: translateY(calc(400px * var(--y-direction))) translateX(calc(400px * var(--x-direction))) rotate(360deg) scale(1.2);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(calc(600px * var(--gravity))) translateX(calc(800px * var(--x-direction))) rotate(720deg) scale(0.8);
+    }
+}
diff --git a/Components/Buttons/Fizzy-Button/index.html b/Components/Buttons/Fizzy-Button/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <title>Fizzy Button</title>
+</head>
+
+<body>
+    <button class="fizzy-button">Click Me!</button>
+
+    <script src="script.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
+</body>
+</html>
diff --git a/Components/Buttons/Fizzy-Button/script.js b/Components/Buttons/Fizzy-Button/script.js
@@ -0,0 +1,28 @@
+const button = document.querySelector('.fizzy-button');
+
+button.addEventListener('click', () => {
+    const particleCount = 100; // Large number of particles for extra fizz
+    const bodyRect = document.body.getBoundingClientRect();
+
+    for (let i = 0; i < particleCount; i++) {
+        const particle = document.createElement('div');
+        particle.classList.add('particle');
+        particle.style.width = particle.style.height = `${Math.random() * 15 + 5}px`;
+        particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
+
+        // Particles can appear anywhere on the screen
+        particle.style.left = `${Math.random() * window.innerWidth}px`;
+        particle.style.top = `${Math.random() * window.innerHeight}px`;
+
+        document.body.appendChild(particle);
+
+        gsap.to(particle, {
+            x: (Math.random() - 0.5) * 1000, // Bigger spread for a wider fizz effect
+            y: (Math.random() - 0.5) * 1000,
+            duration: 2,
+            opacity: 0,
+            scale: Math.random() * 2.5 + 1,
+            onComplete: () => particle.remove(),
+        });
+    }
+});
diff --git a/Components/Buttons/Fizzy-Button/style.css b/Components/Buttons/Fizzy-Button/style.css
@@ -0,0 +1,52 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #2b2d42;
+    margin: 0;
+    overflow: hidden;
+}
+
+.fizzy-button {
+    font-size: 20px;
+    color: #fff;
+    background-color: #f72585;
+    border: none;
+    padding: 15px 30px;
+    border-radius: 50px;
+    cursor: pointer;
+    position: relative;
+    z-index: 2;
+    box-shadow: 0 8px 25px rgba(247, 37, 133, 0.5);
+    transition: background-color 0.3s ease;
+}
+
+.fizzy-button:hover {
+    background-color: #ff4d6d;
+}
+
+.fizzy-button:active {
+    background-color: #b5179e;
+}
+
+.particle {
+    position: absolute;
+    background-color: #ff5722;
+    border-radius: 50%;
+    pointer-events: none;
+    animation: fizz 2s ease-out forwards;
+    z-index: 1;
+}
+
+@keyframes fizz {
+    from {
+        transform: scale(0);
+        opacity: 1;
+    }
+
+    to {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
diff --git a/Components/Tables/Expandable-Row-Table/index.html b/Components/Tables/Expandable-Row-Table/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Expandable Row Table</title>
+</head>
+
+<body>
+    <h2>Expandable Row Table</h2>
+
+    <table>
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Age</th>
+                <th>City</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr onclick="toggleDetails(this)">
+                <td>John Doe <span class="expand-icon">▶</span></td>
+                <td>30</td>
+                <td>New York</td>
+            </tr>
+            <tr class="details">
+                <td colspan="3">More about John: Loves coding, enjoys long walks.</td>
+            </tr>
+            <tr onclick="toggleDetails(this)">
+                <td>Jane Smith <span class="expand-icon">▶</span></td>
+                <td>25</td>
+                <td>Los Angeles</td>
+            </tr>
+            <tr class="details">
+                <td colspan="3">More about Jane: Enjoys hiking and outdoor activities.</td>
+            </tr>
+            <tr onclick="toggleDetails(this)">
+                <td>Sam Brown <span class="expand-icon">▶</span></td>
+                <td>35</td>
+                <td>Chicago</td>
+            </tr>
+            <tr class="details">
+                <td colspan="3">More about Sam: Loves photography and traveling.</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Components/Tables/Expandable-Row-Table/script.js b/Components/Tables/Expandable-Row-Table/script.js
@@ -0,0 +1,10 @@
+function toggleDetails(row) {
+    const nextRow = row.nextElementSibling;
+    const icon = row.querySelector('.expand-icon');
+
+    if (nextRow.classList.contains('details')) {
+        const isVisible = nextRow.style.display === 'table-row';
+        nextRow.style.display = isVisible ? 'none' : 'table-row';
+        icon.classList.toggle('open', !isVisible);
+    }
+}