Skip to content

Commit

Permalink
Merge pull request #429 from Naga-Himaja/new-nav-page
Browse files Browse the repository at this point in the history 
enhancement: added new navbar and footer pages that can be used across all pages
  • Loading branch information
@Rizwan102003
Rizwan102003 authored Oct 28, 2024
2 parents cdf2873 + 0796781 commit 42828a6
Show file tree
Hide file tree
Showing 5 changed files with 216 additions and 185 deletions.
20 changes: 20 additions & 0 deletions common.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
async function loadHTML(elementId, filePath) {
const element = document.getElementById(elementId);
if (element) {
try {
const response = await fetch(filePath);
if (response.ok) {
const content = await response.text();
element.innerHTML = content;
} else {
console.error(`Failed to load ${filePath}: ${response.status}`);
}
} catch (error) {
console.error(`Error fetching ${filePath}:`, error);
}
}
}

// Load navbar and footer
loadHTML("navbar", "navbar.html");
loadHTML("footer", "footer.html");
112 changes: 62 additions & 50 deletions darkmode.js
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,66 @@
// Check for saved dark mode preference in localStorage
let darkmode = localStorage.getItem("darkmode");
const themeToggleBtn = document.getElementById("theme-toggle");
const body = document.body;
const footer = document.querySelector("footer");
const footerSpan = footer.querySelector(".website-name");
const footerParagraph = footer.querySelector(".footer-about-text");
document.addEventListener("DOMContentLoaded", () => {
// Check for saved dark mode preference in localStorage
let darkmode = localStorage.getItem("darkmode");
const themeToggleBtn = document.getElementById("theme-toggle");
const themeIcon = document.getElementById("theme-toggle-icon");
const body = document.body;
const footer = document.querySelector("footer"); // Select the footer element

// Enable Dark Mode
const enableDarkMode = () => {
body.classList.add("dark-mode");
body.classList.remove("light-mode");
footer.classList.add("dark-mode-footer");
footer.classList.remove("light-mode-footer");
footerSpan.classList.add("dark-text");
footerSpan.classList.remove("light-text");
footerParagraph.classList.add("dark-text");
footerParagraph.classList.remove("light-text");
localStorage.setItem("darkmode", "active");
themeToggleBtn.querySelector(".theme-icon-light").style.opacity = '0';
themeToggleBtn.querySelector(".theme-icon-dark").style.opacity = '1';
};
// Ensure footer is found
if (!footer) {
console.error("Footer element not found.");
return; // Exit if footer is not available
}

// Disable Dark Mode (Switch to Light Mode)
const disableDarkMode = () => {
body.classList.remove("dark-mode");
body.classList.add("light-mode");
footer.classList.remove("dark-mode-footer");
footer.classList.add("light-mode-footer");
footerSpan.classList.add("light-text");
footerSpan.classList.remove("dark-text");
footerParagraph.classList.add("light-text");
footerParagraph.classList.remove("dark-text");
localStorage.setItem("darkmode", "inactive");
themeToggleBtn.querySelector(".theme-icon-light").style.opacity = '1';
themeToggleBtn.querySelector(".theme-icon-dark").style.opacity = '0';
};
const footerSpan = footer.querySelector(".website-name"); // Select the span inside the footer
const footerParagraph = footer.querySelector(".footer-about-text");

// Apply the saved theme on page load
if (darkmode === "active") {
enableDarkMode(); // Start in dark mode if the user prefers it
} else {
disableDarkMode(); // Otherwise, start in light mode
}
// Enable Dark Mode
const enableDarkMode = () => {
body.classList.add("dark-mode");
body.classList.remove("light-mode");
footer.classList.add("dark-mode-footer");
footer.classList.remove("light-mode-footer");
footerSpan.classList.add("dark-text");
footerSpan.classList.remove("light-text");
footerParagraph.classList.add("dark-text");
footerParagraph.classList.remove("light-text");
localStorage.setItem("darkmode", "active");
themeIcon.src = "images/light-mode.png"; // Light mode icon in dark mode
};

// Toggle dark mode on button click
themeToggleBtn.addEventListener("click", () => {
darkmode = localStorage.getItem("darkmode"); // Get the current state
if (darkmode === "active") {
disableDarkMode(); // Switch to light mode
} else {
enableDarkMode(); // Switch to dark mode
}
});
// Disable Dark Mode (Switch to Light Mode)
const disableDarkMode = () => {
body.classList.remove("dark-mode");
body.classList.add("light-mode");
footer.classList.remove("dark-mode-footer");
footer.classList.add("light-mode-footer");
footerSpan.classList.add("light-text");
footerSpan.classList.remove("dark-text");
footerParagraph.classList.add("light-text");
footerParagraph.classList.remove("dark-text");
localStorage.setItem("darkmode", "inactive");
themeIcon.src = "images/dark-mode.png"; // Dark mode icon in light mode
};

// Apply the saved theme on page load
if (darkmode === "active") {
enableDarkMode(); // Start in dark mode if the user prefers it
} else {
disableDarkMode(); // Otherwise, start in light mode
}

// Ensure button exists before adding event listener
if (themeToggleBtn) {
themeToggleBtn.addEventListener("click", () => {
darkmode = localStorage.getItem("darkmode"); // Get the current state
if (darkmode === "active") {
disableDarkMode(); // Switch to light mode
} else {
enableDarkMode(); // Switch to dark mode
}
});
} else {
console.error("Theme toggle button not found.");
}
});
50 changes: 50 additions & 0 deletions footer.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<footer class="footer-section">
<div class="container">
<!-- Logo and About Section -->
<div class="footer-logo-about">
<a href="index.html" class="footer-logo-link">
<img src="images/logo.png" alt="Code Social Logo" class="footer-logo">
<span class="website-name">Code Social</span>
</a>
<p class="footer-about-text">
Code Social Community is a vibrant and inclusive space for tech enthusiasts <br> to learn, grow, and
connect. Founded in 2023, our mission is to empower individuals <br> with resources, mentorship, and
opportunities to cultivate their skills, explore their interests, and <br>collaborate with
like-minded peers.
</p>
<div class="social-icons">
<a href="https://wa.me/your-whatsapp-number" target="_blank"><img src="./images/whatsapp-icon.png"
alt="WhatsApp"></a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank"><img src="./images/discord-icon.png"
alt="Discord"></a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank"><img
src="./images/linkedin-icon.png" alt="LinkedIn"></a>
</div>
</div>

<!-- Links Section -->
<div class="footer-links">
<div class="footer-column">
<p class="footer-title">Quick Links</p>
<ul class="footer-list">
<li><a href="#">About Us</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Community Guidelines</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="footer-column">
<p class="footer-title">Help</p>
<ul class="footer-list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Volunteer Opportunities</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
</div>
</div>

<!-- Footer Bottom -->
<hr class="footer-divider">
<p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code Social</p>
</footer>
141 changes: 6 additions & 135 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="common.js" defer></script>
<script src="script.js" defer></script>
<script type="text/javascript" src="darkmode.js" defer></script>
<script src="common.js" defer></script>
<script src="darkmode.js" defer></script>
<link rel="icon" type="image/png" href="images/logo copy.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

Expand Down Expand Up @@ -322,89 +324,7 @@


</script>

<nav class="navbar">
<a href="index.html" class="flex"><img src="images/logo.png" class="logo">

<div class="website-name tracking-tight ">
<!-- <div class="dynamic-text"> -->
<div class="static-text">
CODE
</div>
<ul class="dynamic-text">
<li> <span class="social">SOCIAL</span></li>
</ul>
</div>

</a>



<!-- Hamburger Menu -->
<div class="hamburger-menu">
<div class="toggle-button">
<img src="/images/hamburger.png" alt="open" id="hamburger-img">

</div>
</div>

<!-- Navbar Links -->
<ul class="navbar-links flex ">
<li class="ml-20">
<a href="events.html">Live Events</a>
<ul class="dropdown ">
<li><a href="register.html">Register Now</a></li>
<li><a href="maintenance.html">Why don't you react?</a></li>
</ul>
</li>
<li class="community">
<a href="maintenance.html">Join Our Community</a>
<ul class="dropdown">
<li><a href="maintenance.html">WhatsApp</a></li>
<li><a href="maintenance.html">Discord</a></li>
</ul>
</li>
<li>
<a href="learning.html">Learning</a>
<ul class="dropdown">
<li><a href="./Resources.html">Free Learning Resources</a></li>
<li><a href="#">Mentorship Programs</a></li>
<li><a href="#">Peer-to-Peer Sessions</a></li>
</ul>
</li>
<li class="hamburger-menu">
<div class="toggle-button">
<span class="about-text">
<a href="maintenance.html">About us</a>
</span>
<button class="bar"></button>
<button class="bar"></button>
<button class="bar"></button>
</div>
<ul class="dropdown">
<li><a href="mentorship.html">Meet Our Team</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="contactUs.html">Contact Us</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
</li>

<li>
<a href="maintenance.html">Follow Us</a>
</li>
<!-- Dark Mode Toggle -->
<button id="theme-toggle" class="theme-toggle-btn">
<span class="theme-icon theme-icon-light" style="opacity: 1;">☀️</span>
<span class="theme-icon theme-icon-dark" style="opacity: 0;">🌙</span>
<span class="theme-slider"></span>
</button>



</ul>
</nav>


<div id="navbar"></div>
<section class="about-community">
<h2>About Community</h2>
<p>
Expand Down Expand Up @@ -468,59 +388,10 @@ <h3>Add Event</h3>
</div>
</section>
<hr>
<footer class="footer-section">
<div class="container">
<!-- Logo and About Section -->
<div class="footer-logo-about">
<a href="index.html" class="footer-logo-link">
<img src="images/logo.png" alt="Code Social Logo" class="footer-logo">
<span class="website-name">Code Social</span>
</a>
<p class="footer-about-text">
Code Social Community is a vibrant and inclusive space for tech enthusiasts <br> to learn, grow, and
connect. Founded in 2023, our mission is to empower individuals <br> with resources, mentorship, and
opportunities to cultivate their skills, explore their interests, and <br>collaborate with
like-minded peers.
</p>
<div class="social-icons">
<a href="https://wa.me/your-whatsapp-number" target="_blank"><img src="./images/whatsapp-icon.png"
alt="WhatsApp"></a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank"><img src="./images/discord-icon.png"
alt="Discord"></a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank"><img
src="./images/linkedin-icon.png" alt="LinkedIn"></a>
</div>
</div>

<!-- Links Section -->
<div class="footer-links">
<div class="footer-column">
<p class="footer-title">Quick Links</p>
<ul class="footer-list">
<li><a href="#">About Us</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="#">Community Guidelines</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="footer-column">
<p class="footer-title">Help</p>
<ul class="footer-list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Volunteer Opportunities</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
</div>
</div>

<!-- Footer Bottom -->
<hr class="footer-divider">
<p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code Social</p>
</footer>

<div id="footer"></div>

<script>
<script>

const addEventButton = document.getElementById('add-event');

Expand Down
Loading

0 comments on commit 42828a6

Please sign in to comment.