Skip to content

Commit

Permalink
Dark mode to FAQ
Browse files Browse the repository at this point in the history
  • Loading branch information
@nagalakshmi08
nagalakshmi08 committed Jun 24, 2024
1 parent 832b100 commit f8853a4
Show file tree
Hide file tree
Showing 4 changed files with 196 additions and 9 deletions.
1 change: 1 addition & 0 deletions faq/Expand-less-dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions faq/Expand-more-dark.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
88 changes: 79 additions & 9 deletions faqpage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@
<h3>AgriLearnNetwork</h3>
</a>

<div class="theme-toggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</div>

<i class="bx bx-menu" id="menu-icon"></i>
<nav class="navbar">
<a href="index.html#home"><i class="fa-solid fa-house"></i> Home</a>
Expand Down Expand Up @@ -53,7 +58,7 @@ <h3>AgriLearnNetwork</h3>
<!-- Question-1 -->
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><img src="./faq/Expand-more.svg" alt="Expand"></span>
<span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
<h3>What is AgriLearnNetwork?</h3>
</div>
<div class="accordion-body">
Expand All @@ -66,7 +71,7 @@ <h3>What is AgriLearnNetwork?</h3>
<!-- Question-2 -->
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><img src="./faq/Expand-more.svg" alt="Expand"></span>
<span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
<h3>Who can benefit from AgriLearnNetwork?</h3>
</div>
<div class="accordion-body">
Expand All @@ -79,7 +84,7 @@ <h3>Who can benefit from AgriLearnNetwork?</h3>
<!--Question-3-->
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><img src="./faq/Expand-more.svg" alt="Expand"></span>
<span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
<h3>What features does AgriLearnNetwork offer?</h3>
</div>
<div class="accordion-body">
Expand All @@ -97,7 +102,7 @@ <h3>What features does AgriLearnNetwork offer?</h3>
<!--Question-6-->
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><img src="./faq/Expand-more.svg" alt="Expand"></span>
<span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
<h3>What types of farming does AgriLearnNetwork support?</h3>
</div>
<div class="accordion-body">
Expand All @@ -109,7 +114,7 @@ <h3>What types of farming does AgriLearnNetwork support?</h3>
<!--Question-7-->
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><img src="./faq/Expand-more.svg" alt="Expand"></span>
<span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
<h3>Is AgriLearnNetwork free to use?</h3>
</div>
<div class="accordion-body">
Expand All @@ -120,7 +125,7 @@ <h3>Is AgriLearnNetwork free to use?</h3>
<!--Question-8-->
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><img src="./faq/Expand-more.svg" alt="Expand"></span>
<span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
<h3>Can I get personalized advice from experts on Agrilearn Network?</h3>
</div>
<div class="accordion-body">
Expand All @@ -131,7 +136,7 @@ <h3>Can I get personalized advice from experts on Agrilearn Network?</h3>
<!--Question-9-->
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><img src="./faq/Expand-more.svg" alt="Expand"></span>
<span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
<h3>How can I stay updated with the latest agricultural trends and news?</h3>
</div>
<div class="accordion-body">
Expand All @@ -143,7 +148,7 @@ <h3>How can I stay updated with the latest agricultural trends and news?</h3>
<!--Question-10-->
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><img src="./faq/Expand-more.svg" alt="Expand"></span>
<span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
<h3>Does AgriLearnNetwork offer any training programs or courses?</h3>
</div>
<div class="accordion-body">
Expand All @@ -154,7 +159,7 @@ <h3>Does AgriLearnNetwork offer any training programs or courses?</h3>
<!--Question-11-->
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span><img src="./faq/Expand-more.svg" alt="Expand"></span>
<span><img src="./faq/Expand-more.svg" alt="Expand" data-light-icon="./faq/Expand-more.svg" data-dark-icon="./faq/Expand-more-dark.svg"></span>
<h3>How do I participate in community forums on AgriLearnNetwork?</h3>
</div>
<div class="accordion-body">
Expand Down Expand Up @@ -243,6 +248,68 @@ <h2>Quick Links</h2>
<script src="script.js"></script>


<script>
document.addEventListener('DOMContentLoaded', function () {
const themeToggle = document.querySelector('.theme-toggle');
const body = document.body;
const accordions = document.querySelectorAll('.accordion-header img');

// Check for saved user preference, if any, on load of the website
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
body.classList.add(currentTheme);

if (currentTheme === 'dark-theme') {
themeToggle.querySelector('.fa-sun').style.display = 'none';
themeToggle.querySelector('.fa-moon').style.display = 'inline';
toggleIcons(true);
}
}

themeToggle.addEventListener('click', function () {
const isDarkMode = body.classList.toggle('dark-theme');

if (isDarkMode) {
themeToggle.querySelector('.fa-sun').style.display = 'none';
themeToggle.querySelector('.fa-moon').style.display = 'inline';
localStorage.setItem('theme', 'dark-theme');
} else {
themeToggle.querySelector('.fa-sun').style.display = 'inline';
themeToggle.querySelector('.fa-moon').style.display = 'none';
localStorage.setItem('theme', 'light-theme');
}

toggleIcons(isDarkMode);
});

function toggleAccordion(header) {
const accordionBody = header.nextElementSibling;
const icon = header.querySelector('img');
const isOpen = accordionBody.style.display === "block";

accordionBody.style.display = isOpen ? "none" : "block";

if (isOpen) {
icon.src = icon.getAttribute('data-light-icon');
} else {
icon.src = icon.getAttribute('data-dark-icon');
}
}

function toggleIcons(isDarkMode) {
accordions.forEach(icon => {
icon.src = isDarkMode ? icon.getAttribute('data-dark-icon') : icon.getAttribute('data-light-icon');
});
}

// Initialize the icons based on the current theme
toggleIcons(body.classList.contains('dark-theme'));
});

</script>



<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>

Expand Down Expand Up @@ -337,6 +404,9 @@ <h2>Quick Links</h2>
cursor.style.cssText = cursor2.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px;";
});
</script>



</body>

</html>
115 changes: 115 additions & 0 deletions faqpagestyle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -805,3 +805,118 @@ font-size: 36px;
box-shadow: 0 0 1rem var(--main-color);
}


/* Theme Toggle Button */
.theme-toggle {
position: fixed;
top: 26px;
right: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: yellow;
border-radius: 50%;
width: 40px;
height: 40px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s, box-shadow 0.3s;
z-index: 1000;
}

.theme-toggle i {
font-size: 20px;
color: rgb(3, 3, 38);
}

.theme-toggle .fa-moon {
display: none;
}

/* Dark Mode Styles */

body.dark-mode .header {
background-color: #1e1e1e;
}

body.dark-mode .theme-toggle {
background-color: #ffffff;
}

body.dark-mode .theme-toggle .fa-sun {
display: none;
}

body.dark-mode .theme-toggle .fa-moon {
display: inline;
}

body.dark-theme {
background-color: #121212;
color: #ffffff;
}

body.dark-theme .header,
body.dark-theme .footer,
body.dark-theme .navbar {
background-color: black;
}

body.dark-theme .theme-toggle {
background-color: rgb(3, 3, 38);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

body.dark-theme .theme-toggle .fa-sun {
display: none;
}

body.dark-theme .theme-toggle .fa-moon {
display: inline;
color: #f1c40f;
}

body.dark-theme .navbar a {
color: #f1c40f !important; /* Ensure the color is applied */
}



@media screen and (max-width: 1216px) {
.theme-toggle {
margin-top: 10rem; /* Ensure theme toggle is below the menu icon */
}
}

body.dark-theme .faq .accordion-container {
background-color: #1e1e1e;
border: 1px solid #444;
box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px;
}

body.dark-theme .faq .accordion {
border: 1px solid #444;
}

body.dark-theme .faq .accordion-header {
background-color: #333;
color: white;
}

body.dark-theme .faq .accordion-header:hover {
background-color: #444;
}

body.dark-theme .faq .accordion-header h3 {
color: white;
}

body.dark-theme .logo {
color: #B19222;
}

body.dark-theme .faq .accordion-body {
background-color: #1e1e1e;
color: #ccc;
}

0 comments on commit f8853a4

Please sign in to comment.