Add files via upload

csiddu · Oct 6, 2024 · eb100ab · eb100ab
1 parent fdaf046
commit eb100ab
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 0 deletions.
diff --git a/Drak mode/index.html b/Drak mode/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="components.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <nav class="navbar navbar-expand-lg bg-none">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="index.html">Frontend Treasure</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active" href="index.html">Home</a>
+                    </li>
+                </ul>
+                <form class="d-flex" role="search">
+                    <input class="form-control me-3" type="search" placeholder="Search for the components"
+                        aria-label="Search" id="searchInput" />
+                    <button class="btn btn-outline-success" type="button" onclick="searchComponents()">
+                        Search
+                    </button>
+                </form>
+            </div>
+        </div>
+        <nav class="navbar navbar-expand-lg bg-none">
+            <div class="container-fluid">
+                <a class="navbar-brand" href="index.html">Frontend Treasure</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active" href="index.html">Home</a>
+                        </li>
+                    </ul>
+                    <form class="d-flex" role="search">
+                        <input class="form-control me-3" type="search" placeholder="Search for the components"
+                            aria-label="Search" id="searchInput" />
+                        <button class="btn btn-outline-success" type="button" onclick="searchComponents()">
+                            Search
+                        </button>
+                    </form>
+                    <!-- Dark Mode Toggle Button -->
+                    <button class="btn btn-outline-light ms-3" id="darkModeToggle">Dark Mode</button>
+                </div>
+            </div>
+        </nav>
+
+    </nav>
+
+    <div class="wrapper" id="component-items">
+
+        <!-- components will be fetched here -->
+
+    </div>
+    <footer>
+        <div class=" bg-black " >
+          <div class="">
+            <div class="pt-2 ps-3 pe-3 d-md-flex text-center justify-content-md-between align-items-center">
+              <h3 class="text-white">Follow Us</h3>
+              <ul class="list-inline text-dark mt-1 ">
+                <li class="list-inline-item m-2">
+                  <a href="https://www.instagram.com/csi_ddu/" class="text-white text-decoration-none">
+                    <i class="fab fa-instagram"></i> Instagram
+                  </a>
+                </li>
+                <li class="list-inline-item m-2">
+                  <a
+                    href="https://www.linkedin.com/company/computer-society-of-india-ddu/mycompany/"
+                    class="text-white  text-decoration-none"
+                  >
+                    <i class="fab fa-linkedin "></i> LinkedIn
+                  </a>
+                </li>
+                <li class="list-inline-item m-2">
+                  <a href="https://medium.com/@csi_ddu" class="text-white  text-decoration-none">
+                    <i class="fab fa-medium"></i> Medium
+                  </a>
+                </li>
+                <li class="list-inline-item m-2">
+                  <a href="https://discord.gg/2aUM8ArA" class="text-white  text-decoration-none">
+                    <i class="fab fa-discord"></i> Discord
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </footer>
+      <!-- JS Section -->
+      <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+        crossorigin="anonymous"></script>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Drak mode/script.js b/Drak mode/script.js
@@ -0,0 +1,10 @@
+// Dark Mode Toggle
+const darkModeToggle = document.getElementById('darkModeToggle');
+darkModeToggle.addEventListener('click', () => {
+    document.body.classList.toggle('dark-mode');
+    if (document.body.classList.contains('dark-mode')) {
+        darkModeToggle.textContent = 'Light Mode';
+    } else {
+        darkModeToggle.textContent = 'Dark Mode';
+    }
+});
diff --git a/Drak mode/style.css b/Drak mode/style.css
@@ -0,0 +1,19 @@
+/* Dark Mode Styles */
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+body.dark-mode .navbar {
+    background-color: #1c1c1c;
+}
+
+body.dark-mode .btn-outline-light {
+    color: #ffffff;
+    border-color: #ffffff;
+}
+
+body.dark-mode .btn-outline-light:hover {
+    background-color: #ffffff;
+    color: #121212;
+}