Skip to content

Commit

Permalink
Merge pull request #1181 from KRISHkg31/feature/dark-mode-button-updated
Browse files Browse the repository at this point in the history 
[Issue]:Updated Dark Mode Button
  • Loading branch information
@vimistify
vimistify authored Nov 7, 2024
2 parents a70ce91 + 7115258 commit 14cfc86
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 145 deletions.
24 changes: 24 additions & 0 deletions Feedback.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -470,6 +470,30 @@
</div>
</div>
</header>
<script>
// Select the button by its ID
const darkModeToggle = document.getElementById('dark-mode-toggle');

// Add an event listener for the 'click' event
darkModeToggle.addEventListener('click', () => {
// Toggle the 'dark-mode' class on the body element
document.body.classList.toggle('dark-mode');

// Save the dark mode preference in localStorage
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});

// Check localStorage for saved theme preference on page load
document.addEventListener('DOMContentLoaded', () => {
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark-mode');
}
});
</script>


<body>
Expand Down
24 changes: 24 additions & 0 deletions nearby.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,30 @@
<button class="light-dark-btn dark-mode-toggle" id="dark-mode-button">
<i class="fa-solid fa-moon"></i>
</button>
<script>
// Select the button by its ID
const darkModeButton = document.getElementById('dark-mode-button');

// Add an event listener for the 'click' event
darkModeButton.addEventListener('click', () => {
// Toggle the 'dark-mode' class on the body element
document.body.classList.toggle('dark-mode');

// Save the dark mode preference in localStorage
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});

// Check localStorage for saved theme preference on page load
document.addEventListener('DOMContentLoaded', () => {
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark-mode');
}
});
</script>
<h1>Find Nearby Hospital</h1>
<h2>Track or call an ambulance and check nearby hospitals for emergency services</h2>

Expand Down
163 changes: 80 additions & 83 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,133 +1,135 @@
document.addEventListener("DOMContentLoaded", function () {
const preloader = document.getElementById("preloader");
if (preloader) {
preloader.style.display = "none"; // Hide preloader after page load
} else {
console.error("Element with ID 'preloader' not found.");
}

const darkModeButton = document.getElementById("dark-mode-button");

// Check if darkModeButton exists before proceeding
if (darkModeButton) {
// Dark mode and light mode functions
const applyDarkMode = () => {
document.body.classList.add("dark-mode");
document.body.classList.remove("light-mode");
darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Set icon to sun
document.body.style.backgroundColor = "rgba(50, 50, 50, 0.95)";
document.body.style.color = "white";
};

const applyLightMode = () => {
document.body.classList.add("light-mode");
document.body.classList.remove("dark-mode");
darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Set icon to moon
document.body.style.backgroundColor = ""; // Reset to default
document.body.style.color = ""; // Reset to default
};

// Apply the current theme from sessionStorage on load
const currentTheme = sessionStorage.getItem("theme");
if (currentTheme === "dark") {
applyDarkMode();
} else {
applyLightMode();
}

// Toggle dark mode on button click
darkModeButton.addEventListener("click", () => {
if (document.body.classList.contains("dark-mode")) {
sessionStorage.setItem("theme", "light");
applyLightMode();
} else {
sessionStorage.setItem("theme", "dark");
applyDarkMode();
}
});
} else {
console.warn("Element with ID 'dark-mode-button' not found.");
}
});

let script = document.createElement('script');
script.src = "https://cdn.gtranslate.net/widgets/latest/float.js"; // URL of the external script
script.defer = true; // Ensures the script runs after parsing the HTML
document.body.appendChild(script); // Add the script to the body

window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }
window.gtranslateSettings = {
"default_language": "en",
"detect_browser_language": true,
"wrapper_selector": ".gtranslate_wrapper"
};

// Function to change the active class when a link is clicked
function changeContent(page) {
var links = document.querySelectorAll(".menu ul li a");
const links = document.querySelectorAll(".menu ul li a");

// Remove "active" class from all links
links.forEach((link) => link.classList.remove("active"));``
links.forEach((link) => link.classList.remove("active"));

// Add "active" class to the current page link
var activeLink = document.getElementById(page + "-link");
const activeLink = document.getElementById(page + "-link");
if (activeLink) {
activeLink.classList.add("active");
} else {
console.error(`Link with id ${page + '-link'} not found`);
}

console.log(page + "-link");
}

// Language-based content visibility
const currentLanguage = window.gtranslateSettings.current_language;
const ambuFlowText = document.querySelector(".main_heading h2[data-link_h2='AmbuFlow...']");

if (currentLanguage === 'gu' || currentLanguage === 'hi') {
ambuFlowText.style.display = 'none'; // Hide text for Gujarati and Hindi
} else {
ambuFlowText.style.display = 'block'; // Show text for other languages
}


// Function that runs when the window loads
window.onload = function () {
// Assuming you are using the URL or some global variable to determine the page
var currentPage = window.location.pathname.split("/").pop().replace(".html", "");
const currentPage = window.location.pathname.split("/").pop().replace(".html", "");
if (currentPage) {
changeContent(currentPage);
}

// Add delay to each letter drop
// Add delay to each letter drop animation
const letters = document.querySelectorAll('.letter');
letters.forEach((letter, index) => {
letter.style.animationDelay = `${index * 0.1}s`;
});
};

// JS for dark mode functionality
// adding code for dark mode
document.addEventListener("DOMContentLoaded", () => {
const darkModeButton = document.getElementById("dark-mode-button");
// Dark mode functionality

// Check sessionStorage for dark mode preference
const currentTheme = sessionStorage.getItem("theme");
if (currentTheme === "dark") {
document.body.classList.add("dark-mode");
document.body.classList.remove("light-mode");
darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Change icon
} else {
document.body.classList.add("light-mode");
document.body.classList.remove("dark-mode");
darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Change icon
}

darkModeButton.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
document.body.classList.toggle("light-mode");

// Save preference to sessionStorage
if (document.body.classList.contains("dark-mode")) {
sessionStorage.setItem("theme", "dark");
darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Change icon
} else {
sessionStorage.setItem("theme", "light");
darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Change icon
}
});
});

//For Translator
window.gtranslateSettings = {
"default_language": "en",
"detect_browser_language": true,
"wrapper_selector": ".gtranslate_wrapper",
"alt_flags": { "en": "usa" }
}
// Translator toggle functionality
const translateBtn = document.getElementById('translateBtn');
const gTranslate = document.getElementById('gTranslate');

translateBtn.addEventListener('click', function () {
if (gTranslate.style.display === 'none') {
gTranslate.style.display = 'block';
} else {
gTranslate.style.display = 'none';
}
translateBtn.addEventListener('click', () => {
gTranslate.style.display = gTranslate.style.display === 'none' ? 'block' : 'none';
});

// Close the translator popup when clicking outside
document.addEventListener('click', function (event) {
document.addEventListener('click', (event) => {
if (!gTranslate.contains(event.target) && event.target !== translateBtn) {
gTranslate.style.display = 'none';
}
});

// Newsletter form submission handler

document
.getElementById("newsletter-form")
.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent the form from submitting normally

const emailInput = document.getElementById("email");
const confirmationMessage = document.getElementById("confirmation-message");

// Optionally send the email to your backend
const email = emailInput.value;

// Simulate a successful submission (you could replace this with an actual API call)
console.log(`Email submitted: ${email}`); // For debugging

// Display the confirmation message
confirmationMessage.textContent =
"Thank you for subscribing! Please check your email for further instructions.";
confirmationMessage.classList.remove("hidden");

// Clear the form
emailInput.value = "";
});
document.getElementById("newsletter-form").addEventListener("submit", function (event) {
event.preventDefault(); // Prevent the form from submitting normally
const emailInput = document.getElementById("email");
const confirmationMessage = document.getElementById("confirmation-message");

const email = emailInput.value;
console.log(`Email submitted: ${email}`); // For debugging
confirmationMessage.textContent = "Thank you for subscribing! Please check your email for further instructions.";
confirmationMessage.classList.remove("hidden");
emailInput.value = ""; // Clear the form
});

// Accordion functionality
const accordions = document.querySelectorAll(".accordion");
Expand Down Expand Up @@ -157,18 +159,13 @@ accordions.forEach((accordion, index) => {
});
});



// Back to top button functionality
const backToTopButton = document.getElementById('back-to-top');

// Show the button when scrolled down 100px from the top
window.onscroll = function () {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
backToTopButton.style.display = "block";
} else {
backToTopButton.style.display = "none";
}
};


Loading

0 comments on commit 14cfc86

Please sign in to comment.