Merge branch 'main' of https://github.com/Rakesh9100/Eventica

deepeshahlawat · Jan 2, 2025 · 73ddb1d · 73ddb1d
2 parents 2c01955 + 599ba00
commit 73ddb1d
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 2 deletions.
diff --git a/assets/about/about.css b/assets/about/about.css
@@ -12,6 +12,26 @@ body {
     height: 100%;
 }
 
+/* Dark mode Css*/
+
+body.dark-mode .about-section {
+    background-color: #1e1e1e;
+    color: #f4f4f4;
+}
+
+body.dark-mode .about-image {
+    filter: brightness(80%);
+}
+
+body.dark-mode .feature-item {
+    background-color: #282828;
+    color: #f4f4f4;
+}
+
+body.dark-mode .about-content {
+    background-color: rgba(40, 44, 52, 1);
+}
+
 .about-section {
     padding: 6rem 0 4rem;
     background: linear-gradient(135deg, #4a90e2, #e74c3c);

diff --git a/assets/about/about.html b/assets/about/about.html
@@ -45,6 +45,11 @@
                         <button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
                     </div>
                 </div>
+                <div class="dark-mode-switcher">
+                    <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                </div>
             </div>
         </div>
     </nav>

diff --git a/assets/contact/contact.css b/assets/contact/contact.css
@@ -1,3 +1,26 @@
+/* Dark mode Css */
+
+body.dark-mode .contact-section {
+    background-color: #1e1e1e;
+    color: #f4f4f4;
+}
+
+body.dark-mode .contact-form {
+    background-color: #282828;
+    color: #f4f4f4;
+}
+
+body.dark-mode .contact-form input,
+body.dark-mode .contact-form textarea {
+    background-color: #333;
+    color: #f4f4f4;
+}
+
+body.dark-mode .submit-button {
+    background-color: #444;
+    color: #f4f4f4;
+}
+
 .contact-section {
     padding: 80px 0;
     background-color: #f8f9fa;
@@ -37,14 +60,24 @@ textarea {
     border: 1px solid #e0e0e0;
     border-radius: 4px;
     font-size: 16px;
-    transition: border-color 0.3s ease;
+    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+input[type="text"]:hover,
+input[type="email"]:hover,
+textarea:hover {
+    border-color: var(--primary-color);
+    transform: scale(1.02);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 input[type="text"]:focus,
 input[type="email"]:focus,
 textarea:focus {
     outline: none;
     border-color: var(--primary-color);
+    transform: scale(1.03);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 textarea {
@@ -61,7 +94,7 @@ textarea {
     font-weight: 600;
     border-radius: 4px;
     cursor: pointer;
-    transition: 
+    transition:
         background-color 0.3s ease-in-out,
         opacity 0.3s ease-in-out,
         transform 0.3s ease-in-out,

diff --git a/assets/contact/contact.html b/assets/contact/contact.html
@@ -45,6 +45,11 @@
                         <button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
                     </div>
                 </div>
+                <div class="dark-mode-switcher">
+                    <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                </div>
             </div>
         </div>
     </nav>

diff --git a/assets/pastevents/pastevents.css b/assets/pastevents/pastevents.css
@@ -11,6 +11,32 @@ body {
     color: var(--text-color);
 }
 
+/* Dark mode Css */
+
+body.dark-mode .past-events-section {
+    background-color: #1e1e1e;
+    color: #f4f4f4;
+}
+
+body.dark-mode .event-grid {
+    background-color: #282828;
+    color: #f4f4f4;
+}
+
+body.dark-mode .event-card {
+    background-color: #333;
+    color: #f4f4f4;
+}
+
+body.dark-mode .past-event-card {
+    background-color: #333;
+}
+
+body.dark-mode .past-event-date,
+.past-event-time {
+    color: var(--light-text-color);
+}
+
 .past-events-section {
     padding: 6rem 0;
 }

diff --git a/assets/pastevents/pastevents.html b/assets/pastevents/pastevents.html
@@ -45,6 +45,11 @@
                         <button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
                     </div>
                 </div>
+                <div class="dark-mode-switcher">
+                    <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                </div>
             </div>
         </div>
     </nav>

diff --git a/index.html b/index.html
@@ -50,6 +50,11 @@
                         <button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
                     </div>
                 </div>
+                <div class="dark-mode-switcher">
+                    <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                </div>
             </div>
         </div>
     </nav>

diff --git a/script.js b/script.js
@@ -228,6 +228,11 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
+// Dark mode toggle
+document.getElementById('dark-mode-toggle').addEventListener('click', () => {
+    document.body.classList.toggle('dark-mode');
+});
+
 // Mobile menu functionality
 const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
 const navItems = document.querySelector('.nav-items');

diff --git a/style.css b/style.css
@@ -146,6 +146,7 @@ body {
     height: 40px;
     border-radius: 50%;
     display: flex;
+    margin-left: 1rem;
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s ease;
@@ -462,6 +463,80 @@ body {
     padding: 2rem 0;
 }
 
+/* Dark mode Css */
+
+body.dark-mode {
+    --background-color: #181818;
+    --text-color: #f4f4f4;
+    --light-text-color: #bbbbbb;
+}
+
+body.dark-mode .navbar {
+    background-color: rgba(24, 24, 24, 0.9);
+}
+
+body.dark-mode .footer {
+    background-color: #181818;
+}
+
+/* Dark mode toggle button Css */
+
+#dark-mode-toggle {
+    background-color: var(--primary-color);
+    border: none;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s ease;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#dark-mode-toggle:hover {
+    background-color: var(--secondary-color);
+}
+
+#dark-mode-toggle i {
+    color: #fff;
+    font-size: 20px;
+}
+
+.dark-mode .events {
+    background-color: #2a2a2a;
+}
+
+.dark-mode .navbar {
+    background-color: #2a2a2a !important; /* Dark gray background */
+    transition: background-color 0.3s ease;
+}
+
+body.dark-mode .nav-links a {
+    color: #f4f4f4;
+}
+
+body.dark-mode .nav-links a:hover {
+    color: var(--primary-color);
+}
+
+.event-description {
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+    color: var(--text-color);
+}
+
+body.dark-mode .event-card {
+    background-color: #333;
+    color: #f4f4f4;
+}
+
+body.dark-mode .event-date,
+.event-time {
+    color: var(--light-text-color);
+}
+
 /* Media queries for responsiveness */
 
 @media (max-width: 1024px) {