From bf0103b8497aae44c1804b834fab2cf72ebbf9c2 Mon Sep 17 00:00:00 2001
From: DeenuRSD <124046429+DeenuRSD@users.noreply.github.com>
Date: Sat, 19 Oct 2024 02:45:54 +0530
Subject: [PATCH] Update index.html

---
 index.html | 491 ++++++++++++++---------------------------------------
 1 file changed, 130 insertions(+), 361 deletions(-)
diff --git a/index.html b/index.html
index fc49ab1..5dba2a1 100644
--- a/index.html
+++ b/index.html
@@ -1,369 +1,138 @@
 <!DOCTYPE html>
 <html lang="en">
-  <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" />
-    <link
-      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"
-    />
-    <link
-      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"
-    />
-    <link rel="manifest" href="/site.webmanifest" />
-    <link rel="icon" href="Favicon/favicon.ico?v=2" />
-  </head>
-  <body>
-    <!-- Header Section -->
-    <header>
-      <div class="header-container">
-        <div class="logo">
-          <img src="Favicon/favicon-32x32.png" alt="Logo" />
-          <a href="/"><h1>Badge Website</h1></a>
-        </div>
-        <nav class="nav-links">
-          <ul>
-            <li><a href="/">Home</a></li>
-            <li><a href="./pages/about.html">About</a></li>
-            <li><a href="./pages/contact.html">Contact</a></li>
-            <li><a href="./pages/badges.html">Badges</a></li>
-          </ul>
-        </nav>
-      </div>
-    </header>
-
-    <div class="badge-grid">
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Beginner AI Learner</h2>
-              <p>Awarded to: <strong>hello.rajat.rajput@gmail.com</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="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <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>
-          </div>
-        </div>
-  
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2>
-              <p>Awarded to: <strong>example.user@example.com</strong></p>
-              <p>
-                Issued on: <strong>Sep 17, 2024</strong> at
-                <strong>3:55 PM</strong>
-              </p>
-            </div>
-            <div class="download-card">
-              <a download href="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <div class="share-section">
-              <p>Share your badge:</p>
-              <a
-                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%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=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%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>
-          </div>
-        </div>
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2>
-              <p>Awarded to: <strong>example.user@example.com</strong></p>
-              <p>
-                Issued on: <strong>Sep 17, 2024</strong> at
-                <strong>3:55 PM</strong>
-              </p>
-            </div>
-            <div class="download-card">
-              <a download href="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <div class="share-section">
-              <p>Share your badge:</p>
-              <a
-                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%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=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%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>
-          </div>
-        </div>
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2>
-              <p>Awarded to: <strong>example.user@example.com</strong></p>
-              <p>
-                Issued on: <strong>Sep 17, 2024</strong> at
-                <strong>3:55 PM</strong>
-              </p>
-            </div>
-            <div class="download-card">
-              <a download href="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <div class="share-section">
-              <p>Share your badge:</p>
-              <a
-                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%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=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%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>
-          </div>
-        </div>
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2>
-              <p>Awarded to: <strong>example.user@example.com</strong></p>
-              <p>
-                Issued on: <strong>Sep 17, 2024</strong> at
-                <strong>3:55 PM</strong>
-              </p>
-            </div>
-            <div class="download-card">
-              <a download href="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <div class="share-section">
-              <p>Share your badge:</p>
-              <a
-                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%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=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%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>
-          </div>
-        </div>
-  
-        <div class="badge-container">
-          <div class="badge">
-            <img
-              src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png"
-              alt="Badge Image"
-            />
-            <div class="badge-details">
-              <h2 class="typingeffect">Season of AI | Advance AI Learner</h2>
-              <p>Awarded to: <strong>example.user@example.com</strong></p>
-              <p>
-                Issued on: <strong>Dec 17, 2024</strong> at
-                <strong>8:55 PM</strong>
-              </p>
-            </div>
-            <div class="download-card">
-              <a download href="assets/images/badge.png" class="download-button"
-                >Download Badge</a
-              >
-            </div>
-            <div class="share-section">
-              <p>Share your badge:</p>
-              <a
-                href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Advance%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=Advance%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Advance%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>
-          </div>
-        </div>
-      </div>
-  
-      <style>
-        .badge-grid {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          grid-template-rows: repeat(2, auto);
-          gap: 10px; /* Reduced gap between cards */
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login & Signup</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+        }
+        .container {
+            width: 90%;
+            max-width: 600px;
+            margin: 50px auto;
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        }
+        h2 {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        form {
+            display: flex;
+            flex-direction: column;
+        }
+        label {
+            margin-bottom: 5px;
+        }
+        input[type="text"],
+        input[type="email"],
+        input[type="password"] {
+            padding: 10px;
+            margin-bottom: 15px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        button {
+            padding: 10px;
+            background-color: #5cb85c;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
         }
-        .badge-container {
-          background: linear-gradient(
-            35deg,
-            rgba(10, 151, 207, 0.9) 50%,
-            rgba(15, 61, 214, 0.9) 50%
-          );
-          padding: 5px;
-          border-radius: 8px;
-          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-          transform: scale(0.7); /* Further reduce the size of the card */
+        button:hover {
+            background-color: #4cae4c;
         }
-      </style>
+        .toggle {
+            text-align: center;
+            margin-top: 10px;
+        }
+        .badges {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin-top: 20px;
+        }
+        .badge {
+            background-color: #007bff;
+            color: white;
+            padding: 10px;
+            margin: 5px;
+            border-radius: 5px;
+            text-align: center;
+            flex: 1 1 45%; /* Responsive sizing */
+            min-width: 150px;
+        }
+        @media (max-width: 600px) {
+            .badge {
+                flex: 1 1 100%; /* Stack badges on small screens */
+            }
+        }
+    </style>
+</head>
+<body>
 
-    <footer>
-      <div class="footer-container">
-        <div class="footer-text" style="text-align: center">
-          <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>
-    </footer>
+<div class="container">
+    <h2 id="formTitle">Login</h2>
+    <form id="authForm">
+        <label for="email">Email:</label>
+        <input type="email" id="email" required>
+        <label for="password">Password:</label>
+        <input type="password" id="password" required>
+        <button type="submit">Login</button>
+    </form>
+    <div class="toggle">
+        <p>Don't have an account? <a href="#" id="toggleForm">Sign Up</a></p>
+    </div>
 
-    <!-- QRious Library -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
-    <!-- Typing effect script -->
-    <script src="js/typing.js"></script>
+    <div class="badges">
+        <div class="badge">Badge 1</div>
+        <div class="badge">Badge 2</div>
+        <div class="badge">Badge 3</div>
+        <div class="badge">Badge 4</div>
+    </div>
+</div>
+
+<script>
+    const toggleForm = document.getElementById('toggleForm');
+    const formTitle = document.getElementById('formTitle');
+    const authForm = document.getElementById('authForm');
+
+    toggleForm.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (formTitle.innerText === "Login") {
+            formTitle.innerText = "Sign Up";
+            authForm.innerHTML = `
+                <label for="name">Name:</label>
+                <input type="text" id="name" required>
+                <label for="email">Email:</label>
+                <input type="email" id="email" required>
+                <label for="password">Password:</label>
+                <input type="password" id="password" required>
+                <button type="submit">Sign Up</button>
+            `;
+            toggleForm.innerText = "Already have an account? Login";
+        } else {
+            formTitle.innerText = "Login";
+            authForm.innerHTML = `
+                <label for="email">Email:</label>
+                <input type="email" id="email" required>
+                <label for="password">Password:</label>
+                <input type="password" id="password" required>
+                <button type="submit">Login</button>
+            `;
+            toggleForm.innerText = "Don't have an account? Sign Up";
+        }
+    });
+</script>
 
-    <!-- Typing effect for badge title -->
-    <script src="js/typing-badge-title.js"></script>
-  </body>
+</body>
 </html>
