Merge pull request #61 from anshika-75/main

Adding Header#31
rajatrajputdev · Oct 7, 2024 · e4de42e · e4de42e
2 parents a0e3b57 + 41edb45
commit e4de42e
Show file tree

Hide file tree

Showing 2 changed files with 286 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -1,35 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Badge Website</title>
 
     <link rel="stylesheet" href="styles.css" />
     <!-- Updated the link to a newer version to include the X(twitter) icon -->
     <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
+        rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
     />
     <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="./Favicon/apple-touch-icon.png"
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="./Favicon/apple-touch-icon.png"
     />
     <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="./Favicon/favicon-32x32.png"
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="./Favicon/favicon-32x32.png"
     />
     <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="./Favicon/favicon-16x16.png"
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="./Favicon/favicon-16x16.png"
     />
     <link rel="manifest" href="/site.webmanifest" />
     <link rel="icon" href="Favicon/favicon.ico?v=2">
+
+</head>
+<body>
+    <!-- Header Section -->
+    <header>
+        <div class="header-container">
+            <h1>Badge Website</h1>
+            <nav>
+                <ul>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#badges">Badges</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                </ul>
+            </nav>
+            <button id="theme-toggle" class="theme-toggle">
+                <i class="fas fa-sun"></i>
+            </button>
+        </div>
+    </header>
+
+    <div class="badge">
+        <img
+            src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
+            alt="Badge Website"
+        />
+        <div class="badge-details">
+            <h2 id="typingeffect">Season of AI | Beginner AI Learner</h2>
+            <p>Awarded to: <strong>[email protected]</strong></p>
+            <p>
+                Issued on: <strong>Jul 28, 2024</strong> at <strong>1:11 AM</strong>
+            </p>
+        </div>
+        <div class="download-card">
+            <a download href="badge.png" class="download-button">Download Badge</a>
+        </div>
+
+        <!-- Share Section with Social Media Icons -->
+        <div class="share-section">
+            <p>Share your badge:</p>
+            <a
+                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Beginner%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge"
+                target="_blank"
+                class="share-button twitter"
+            >
+                <i class="fa-brands fa-square-x-twitter"></i>
+            </a>
+            <a
+                href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Beginner%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Beginner%20AI%20Learner%20Badge!%20Check%20it%20out:"
+                target="_blank"
+                class="share-button linkedin"
+            >
+                <i class="fab fa-linkedin"></i>
+            </a>
+            <a
+                href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech"
+                target="_blank"
+                class="share-button facebook"
+            >
+                <i class="fab fa-facebook-f"></i>
+            </a>
+        </div>
+
   </head>
   <body>
 
@@ -85,23 +147,122 @@ <h1>Badge Website</h1>
           <img src="assets/icons/chevron-right.png" alt="Next" width="32" height="32">
         </button>
       </div>
+
     </div>
 
     <footer>
-      <div class="footer-text">
-        <p>
-          Follow us on
-          <a href="https://github.com/rajatuiwebdev/badge-website">Github</a> |
-          <a href="https://www.linkedin.com/in/rajatrajput2004/">LinkedIn</a>
-        </p>
-        <p>&copy; 2024 Rajat Rajput | All rights reserved</p>
-      </div>
+        <div class="footer-text">
+            <p>
+                Follow us on
+                <a href="https://github.com/rajatuiwebdev/badge-website">Github</a> |
+                <a href="https://www.linkedin.com/in/rajatrajput2004/">LinkedIn</a>
+            </p>
+            <p>&copy; 2024 Rajat Rajput | All rights reserved</p>
+        </div>
     </footer>
 
     <!-- QRious Library -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
 
     <script>
+
+        // Typing effect for badge title
+        const badgeTitle = document.getElementById('typingeffect');
+        const badgeTitleText = badgeTitle.innerText; 
+        badgeTitle.innerText = '';  
+        let index = 0;
+        let typingSpeed = 100; 
+        let start = true; 
+
+        function typeEffect() {
+            if (start) {
+                if (index < badgeTitleText.length) {
+                    badgeTitle.innerText = badgeTitleText.substring(0, index+1);
+                    index++;
+                    setTimeout(typeEffect, typingSpeed);
+                } else {
+                    start = false;
+                    setTimeout(typeEffect, 2000); 
+                }
+            } else {
+                if (index > 0) {
+                    badgeTitle.innerText = badgeTitleText.substring(0, index - 1);
+                    index--;
+                    setTimeout(typeEffect, typingSpeed); 
+                } else {
+                    start = true;
+                    setTimeout(typeEffect, 500);
+                }
+            }
+        }
+
+        window.onload = typeEffect; 
+
+        function createConfetti() {
+            const confettiContainer = document.createDocumentFragment();
+            const totalDuration = 5000; // 10 seconds in milliseconds
+            const intervalTime = 100; // Time in milliseconds to create a new confetti
+            const totalConfetti = (totalDuration / intervalTime) * 3; // Total confetti to be created in 10 seconds
+
+            let count = 0;
+            const intervalId = setInterval(() => {
+                const confetti = document.createElement('div');
+                confetti.classList.add('confetti');
+                confetti.style.backgroundColor = getRandomColor();
+                confetti.style.left = `${Math.random() * 100}vw`;
+
+                // Random fall duration for each confetti piece
+                const fallDuration = Math.random() * 3 + 1;
+                confetti.style.animationDuration = `${fallDuration}s, ${fallDuration * 0.5}s`; // Match fade-out duration
+
+                confettiContainer.appendChild(confetti);
+                document.body.appendChild(confetti);
+
+                count++;
+                if (count >= totalConfetti) {
+                    clearInterval(intervalId); // Stop after creating confetti for 10 seconds
+                }
+            }, intervalTime);
+        }
+
+        function getRandomColor() {
+            // Red color palette
+            const colorsRed = [
+                '#ff0a54',
+                '#ff477e',
+                '#ff7096',
+                '#ff85a1',
+                '#fbb1bd',
+            ];
+            // Blue color palette
+            const colorsBlu = [
+                '#0d6efd',
+                '#0a58ca',
+                '#007bff',
+                '#6cb2eb',
+                '#81d4fa',
+            ];
+
+            // populating confetti with blue color
+            return colorsBlu[Math.floor(Math.random() * colorsBlu.length)];
+        }
+
+        window.addEventListener('load', () => {
+            createConfetti();
+        });
+
+        // Theme toggle functionality
+        const themeToggleButton = document.getElementById('theme-toggle');
+        const body = document.body;
+
+        themeToggleButton.addEventListener('click', () => {
+            body.classList.toggle('dark-theme');
+            const isDarkTheme = body.classList.contains('dark-theme');
+            themeToggleButton.innerHTML = isDarkTheme 
+                ? '<i class="fas fa-moon"></i>' 
+                : '<i class="fas fa-sun"></i>';
+        });
+
         document.addEventListener("DOMContentLoaded", function() {
           const sidebar = document.querySelector('.sidebar');
           sidebar.style.display = 'none';
@@ -334,6 +495,7 @@ <h2 class="typingeffect">${badge.title}</h2>
           filterBadges();
         }
       });
+
     </script>
-  </body>
+</body>
 </html>