Merge branch 'main' into new-branch-2

Rakesh9100 · Aug 10, 2024 · 0600ea7 · 0600ea7
2 parents 4294d25 + fb3f71c
commit 0600ea7
Show file tree

Hide file tree

Showing 45 changed files with 2,076 additions and 184 deletions.
diff --git a/Components/Backgrounds/Aurora-Borealis-Background/index.html b/Components/Backgrounds/Aurora-Borealis-Background/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aurora Borealis Background</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="aurora-container">
+        <div class="aurora"></div>
+    </div>
+</body>
+</html>
diff --git a/Components/Backgrounds/Aurora-Borealis-Background/style.css b/Components/Backgrounds/Aurora-Borealis-Background/style.css
@@ -0,0 +1,59 @@
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    background: #000;
+}
+
+.aurora-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.aurora {
+    width: 200%;
+    height: 200%;
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    background: linear-gradient(45deg, transparent, rgba(0, 255, 0, 0.1), rgba(0, 255, 255, 0.2), rgba(0, 0, 255, 0.1), transparent);
+    animation: moveAurora 15s infinite linear, colorShift 10s infinite linear;
+    opacity: 0.7;
+}
+
+/* Additional aurora layer for more depth */
+.aurora:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, transparent, rgba(255, 0, 255, 0.1), rgba(255, 255, 0, 0.2), rgba(255, 0, 0, 0.1), transparent);
+    animation: moveAurora 20s infinite linear reverse, colorShift 15s infinite linear;
+    opacity: 0.7;
+}
+
+@keyframes moveAurora {
+    0% {
+        transform: translateX(-10%) translateY(-10%) rotate(0deg);
+    }
+    50% {
+        transform: translateX(10%) translateY(10%) rotate(180deg);
+    }
+    100% {
+        transform: translateX(-10%) translateY(-10%) rotate(360deg);
+    }
+}
+
+@keyframes colorShift {
+    0% {
+        filter: hue-rotate(0deg);
+    }
+    100% {
+        filter: hue-rotate(360deg);
+    }
+}
diff --git a/Components/Backgrounds/Squares-Animation-Background/index.html b/Components/Backgrounds/Squares-Animation-Background/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Square Animation Background</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="hero"> 
+        <div class="hero__title">Squares Animation</div>
+        <div class="cube"></div>
+        <div class="cube"></div>
+        <div class="cube"></div>
+        <div class="cube"></div>
+        <div class="cube"></div>
+        <div class="cube"></div>
+      </div>
+</body>
+</html>
diff --git a/Components/Backgrounds/Squares-Animation-Background/style.css b/Components/Backgrounds/Squares-Animation-Background/style.css
@@ -0,0 +1,93 @@
+@import url("https://fonts.googleapis.com/css?family=Montserrat:700");
+
+*{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+.hero {
+  background-color: #975212;
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+  font-family: "Montserrat", sans-serif;
+}
+
+.hero__title {
+  color: #f6fa17;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 50px;
+  z-index: 1;
+}
+
+.cube {
+  position: absolute;
+  top: 80vh;
+  left: 45vw;
+  width: 10px;
+  height: 10px;
+  border: solid 1px #d38b2d;
+  transform-origin: top left;
+  transform: scale(0) rotate(0deg) translate(-50%, -50%);
+  -webkit-animation: cube 12s ease-in forwards infinite;
+          animation: cube 12s ease-in forwards infinite;
+}
+.cube:nth-child(2n) {
+  border-color: #eec84a;
+}
+.cube:nth-child(2) {
+  -webkit-animation-delay: 2s;
+          animation-delay: 2s;
+  left: 25vw;
+  top: 40vh;
+}
+.cube:nth-child(3) {
+  -webkit-animation-delay: 4s;
+          animation-delay: 4s;
+  left: 75vw;
+  top: 50vh;
+}
+.cube:nth-child(4) {
+  -webkit-animation-delay: 6s;
+          animation-delay: 6s;
+  left: 90vw;
+  top: 10vh;
+}
+.cube:nth-child(5) {
+  -webkit-animation-delay: 8s;
+          animation-delay: 8s;
+  left: 10vw;
+  top: 85vh;
+}
+.cube:nth-child(6) {
+  -webkit-animation-delay: 10s;
+          animation-delay: 10s;
+  left: 50vw;
+  top: 10vh;
+}
+
+@-webkit-keyframes cube {
+  from {
+    transform: scale(0) rotate(0deg) translate(-50%, -50%);
+    opacity: 1;
+  }
+  to {
+    transform: scale(20) rotate(960deg) translate(-50%, -50%);
+    opacity: 0;
+  }
+}
+
+@keyframes cube {
+  from {
+    transform: scale(0) rotate(0deg) translate(-50%, -50%);
+    opacity: 1;
+  }
+  to {
+    transform: scale(20) rotate(960deg) translate(-50%, -50%);
+    opacity: 0;
+  }
+}
diff --git a/Components/Buttons/Celebration-Button/index.html b/Components/Buttons/Celebration-Button/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Celebration Button</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <button id="celebrateButton" class="party-popper">🎉</button>
+    <canvas id="confettiCanvas"></canvas>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Components/Buttons/Celebration-Button/script.js b/Components/Buttons/Celebration-Button/script.js
@@ -0,0 +1,71 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const button = document.getElementById('celebrateButton');
+    const canvas = document.getElementById('confettiCanvas');
+    const context = canvas.getContext('2d');
+    const confettiElements = [];
+    let isCelebrating = false;
+    let animationFrameId;
+
+    // Set canvas size
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    class Confetti {
+      constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.size = Math.random() * 10 + 5;
+        this.speed = 3.1; // Constant speed
+        this.angle = Math.random() * 360;
+        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
+      }
+
+      update() {
+        this.y += this.speed;
+        this.angle += this.speed;
+        if (this.y > canvas.height) {
+          this.y = -10;
+          this.x = Math.random() * canvas.width;
+        }
+      }
+
+      draw() {
+        context.fillStyle = this.color;
+        context.beginPath();
+        context.ellipse(this.x, this.y, this.size, this.size / 2, this.angle, 0, 2 * Math.PI);
+        context.fill();
+      }
+    }
+
+    function addConfetti() {
+      for (let i = 0; i < 100; i++) {
+        confettiElements.push(new Confetti(Math.random() * canvas.width, Math.random() * canvas.height));
+      }
+    }
+
+    function animate() {
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      confettiElements.forEach(confetti => {
+        confetti.update();
+        confetti.draw();
+      });
+      animationFrameId = requestAnimationFrame(animate);
+    }
+
+    function toggleConfetti() {
+      if (isCelebrating) {
+        // Stop the confetti
+        cancelAnimationFrame(animationFrameId);
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        confettiElements.length = 0; // Clear confetti elements
+      } else {
+        // Start the confetti
+        addConfetti();
+        animate();
+      }
+      isCelebrating = !isCelebrating;
+    }
+
+    button.addEventListener('click', toggleConfetti);
+  });
+
diff --git a/Components/Buttons/Celebration-Button/style.css b/Components/Buttons/Celebration-Button/style.css
@@ -0,0 +1,40 @@
+body, html {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+
+  }
+
+  .container {
+    position: static;
+  }
+
+  .party-popper {
+    background-color: #ffcc00;
+    border: none;
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    font-size: 2rem;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s;
+  }
+
+  .party-popper:hover {
+    transform: scale(1.1);
+  }
+
+  #confettiCanvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+  }
+
diff --git a/Components/Buttons/Send-Message-Button/index.html b/Components/Buttons/Send-Message-Button/index.html
@@ -0,0 +1,58 @@
+<!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="styles.css">
+  <title>Send Message Button</title>
+</head>
+<body>
+  <button class="button">
+    <div class="outline"></div>
+    <div class="state state--default">
+      <div class="icon">
+        <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g style="filter: url(#shadow)">
+            <path d="M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299 8.33001L18.3999 16.82C17.0699 20.8 15.3999 21.63 14.2199 21.63ZM7.63988 7.03001C4.85988 7.96001 3.86988 9.06001 3.86988 9.78001C3.86988 10.5 4.85988 11.6 7.63988 12.52L10.1599 13.36C10.3799 13.43 10.5599 13.61 10.6299 13.83L11.4699 16.35C12.3899 19.13 13.4999 20.12 14.2199 20.12C14.9399 20.12 16.0399 19.13 16.9699 16.35L19.7999 7.86001C20.3099 6.32001 20.2199 5.06001 19.5699 4.41001C18.9199 3.76001 17.6599 3.68001 16.1299 4.19001L7.63988 7.03001Z" fill="currentColor"></path>
+            <path d="M10.11 14.4C9.92005 14.4 9.73005 14.33 9.58005 14.18C9.29005 13.89 9.29005 13.41 9.58005 13.12L13.16 9.53C13.45 9.24 13.93 9.24 14.22 9.53C14.51 9.82 14.51 10.3 14.22 10.59L10.64 14.18C10.5 14.33 10.3 14.4 10.11 14.4Z" fill="currentColor"></path>
+          </g>
+          <defs>
+            <filter id="shadow">
+              <feDropShadow dx="0" dy="1" stdDeviation="0.6" flood-opacity="0.5"></feDropShadow>
+            </filter>
+          </defs>
+        </svg>
+      </div>
+      <p>
+        <span style="--i:0">S</span>
+        <span style="--i:1">e</span>
+        <span style="--i:2">n</span>
+        <span style="--i:3">d</span>
+        <span style="--i:4">M</span>
+        <span style="--i:5">e</span>
+        <span style="--i:6">s</span>
+        <span style="--i:7">s</span>
+        <span style="--i:8">a</span>
+        <span style="--i:9">g</span>
+        <span style="--i:10">e</span>
+      </p>
+    </div>
+    <div class="state state--sent">
+      <div class="icon">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="1em" width="1em" stroke-width="0.5px" stroke="black">
+          <g style="filter: url(#shadow)">
+            <path fill="currentColor" d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z"></path>
+            <path fill="currentColor" d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z"></path>
+          </g>
+        </svg>
+      </div>
+      <p>
+        <span style="--i:5">S</span>
+        <span style="--i:6">e</span>
+        <span style="--i:7">n</span>
+        <span style="--i:8">t</span>
+      </p>
+    </div>
+  </button>
+</body>
+</html>