From 5b079e83622610df2812779bb309c2123125b80d Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Mon, 5 Aug 2024 20:48:27 +0530 Subject: [PATCH 1/3] Fixed faq bugs --- assets/images/icon-plus.svg | 2 +- js/FAQs.js | 59 ++------- pages/FAQs.html | 28 ++-- styles/FAQs.css | 247 +++++++++++++----------------------- 4 files changed, 116 insertions(+), 220 deletions(-) diff --git a/assets/images/icon-plus.svg b/assets/images/icon-plus.svg index 850687cc..3f35654f 100644 --- a/assets/images/icon-plus.svg +++ b/assets/images/icon-plus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/js/FAQs.js b/js/FAQs.js index 6f0d355d..63c5c793 100644 --- a/js/FAQs.js +++ b/js/FAQs.js @@ -1,47 +1,14 @@ -function toggle(drop, isExpanded) { - const img = drop.querySelector('img'); - if (isExpanded) { - img.src="../assets/images/icon-minus.svg"; - }else { - img.src="../assets/images/icon-plus.svg"; - } -} - -//Drops and their default expansion values -const drop1 = document.querySelector(".drop1") ; let drop1isExpanded = false ; -const drop2 = document.querySelector(".drop2") ; let drop2isExpanded = false ; -const drop3 = document.querySelector(".drop3") ; let drop3isExpanded = false ; -const drop4 = document.querySelector(".drop4") ; let drop4isExpanded = false ; -const drop5 = document.querySelector(".drop5") ; let drop5isExpanded = false ; -const drop6 = document.querySelector(".drop6") ; let drop6isExpanded = false ; - - -drop1.addEventListener('click', function(){ -drop1isExpanded = !drop1isExpanded; -toggle(drop1, drop1isExpanded); -}); - -drop2.addEventListener('click', function(){ -drop2isExpanded = !drop2isExpanded; -toggle(drop2, drop2isExpanded); -}); - -drop3.addEventListener('click', function(){ -drop3isExpanded = !drop3isExpanded; -toggle(drop3, drop3isExpanded); -}); - -drop4.addEventListener('click', function(){ -drop4isExpanded = !drop4isExpanded; -toggle(drop4, drop4isExpanded); +let drops = document.querySelectorAll(".drop"); + +drops.forEach((drop) => { + drop.addEventListener("click", () => { + const icon = drop.querySelector("img"); + if (drop.classList.contains("open")) { + icon.src = "../assets/images/icon-plus.svg"; + drop.classList.remove("open"); + } else { + icon.src = "../assets/images/icon-minus.svg"; + drop.classList.add("open"); + } + }); }); - -drop5.addEventListener('click', function(){ -drop5isExpanded = !drop5isExpanded; -toggle(drop5, drop5isExpanded); -}); - -drop6.addEventListener('click', function(){ -drop6isExpanded = !drop6isExpanded; -toggle(drop6, drop6isExpanded); -}); \ No newline at end of file diff --git a/pages/FAQs.html b/pages/FAQs.html index 959f341e..b6c1893e 100644 --- a/pages/FAQs.html +++ b/pages/FAQs.html @@ -6,10 +6,9 @@ - + - FAQs @@ -17,13 +16,11 @@ -
- -
+ -
+
-
-

+

Frequently Asked Questions!

- + How do I win the game?

@@ -82,7 +78,7 @@

- + How do I set up the game? @@ -96,7 +92,7 @@

- + What happens if I complete a box? @@ -110,7 +106,7 @@

- + When does the game end?

@@ -123,7 +119,7 @@

- + Is there a strategy involved in playing this game? @@ -137,7 +133,7 @@

- + What if I need help or have more questions about gameplay? diff --git a/styles/FAQs.css b/styles/FAQs.css index 58369fe3..d6eb04e5 100644 --- a/styles/FAQs.css +++ b/styles/FAQs.css @@ -1,17 +1,18 @@ /* General Body Styles */ body { - background: linear-gradient( - 135deg, - #f7b42c, - #fc575e - ); /* Gradient background from orange to pink */ + background: transparent; margin: 0; padding: 0; font-family: "WorkSans-Regular", Arial, sans-serif; - display: flex; - justify-content: center; - padding-top: 10px; - overflow: auto !important; +} + +#myVideo { + position: fixed; + right: 0; + bottom: 0; + min-width: 100%; + min-height: 100%; + z-index: -1; } /* FAQ Container Styles */ @@ -19,23 +20,20 @@ body { background-color: white; border-radius: 10px; padding: 20px; - max-width: 600px; - width: 90%; box-shadow: 10px 10px 15px rgba(101, 99, 99, 0.5); - margin: 100px auto 20px; - flex: 1; - z-index: 0; + width: 60%; + margin: 6rem auto; } /* Heading Styles */ -h1 { +#faq-head { font-family: "WorkSans-Bold", Arial, sans-serif; display: flex; + justify-content: center; align-items: center; -} - -h1:hover { - text-shadow: #ca2cff !important; + padding: 1rem; + margin-bottom: 1rem; + text-shadow: #ca2cff 1px 1px 5px; } /* FAQ Image Styles */ @@ -52,7 +50,7 @@ h1:hover { background: linear-gradient( 135deg, #f7f7f7, - #eaeaea + #bababa ); /* Subtle gradient for questions */ transition: background-color 0.3s, transform 0.3s, text-shadow 0.3s; /* Added text-shadow transition */ border-radius: 8px; @@ -61,51 +59,102 @@ h1:hover { /* Hover Effect */ .question:hover { background: linear-gradient( - 135deg, - #ffbff2, - #d34eff + 15deg, + #cc3f47, + #de6f3d, + #f09f33, + #de6f3d, + #cc3f47 ); /* Bright gradient on hover */ transform: scale(1.05); /* Slight zoom effect */ border-radius: 12px; /* Slight rounding for emphasis */ - text-shadow: 2px 2px 5px rgba(255, 114, 79, 0.844); /* Text shadow effect on hover */ + text-shadow: #fff 3px 3px 5px; /* Text shadow effect on hover */ } /* Summary Styles */ -.question summary { +.drop { cursor: pointer; - padding: 7px; + display: flex; + align-items: center; + padding: 0.5rem 1rem; transition: color 0.3s; outline: none; /* Remove default focus outline */ } -.question summary:hover { +.drop:hover { color: #333; /* Darker text on hover */ } -.question summary img { - float: right; +.drop img { transition: transform 0.3s; } -.question summary:hover img { +.drop:hover img { transform: rotate(90deg); /* Rotate icon on hover */ } /* Answer Styles */ .question p { font-family: "WorkSans-Regular", Arial, sans-serif; - font-size: 1.0625rem; /* 17px */ - color: #555; /* Slightly darker text */ - background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */ + font-size: 1.25rem; + line-height: 1.2; + color: #555; + background: rgba(255, 255, 255, 0.8); padding: 10px; border-radius: 5px; transition: background-color 300ms ease-in-out, color 300ms ease-in-out; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for depth */ } -/* Remove bottom-background video styles */ -.bottom-background { - display: none; +.author { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(to right, #00093c, #2d0b00); + color: #fff; + padding: 15px; + position: fixed; + bottom: 0; + z-index: 1000; +} + +.fotbar { + display: flex; + gap: -22px; +} + +.fotbar a { + color: white; + text-decoration: none; + padding: 10px; + border-radius: 5px; + font-size: 18px; + background-color: transparent; +} + +.author p { + color: white; + padding: 10px; + margin-right: 10px; + font-size: 20px; + font-weight: 600; +} + +.social-icons { + display: flex; + gap: 10px; + margin-right: 20px; +} + +.author a { + color: white !important; +} + +.social-icons a { + color: white; + text-decoration: none; + font-size: 20px; } /* Mobile Styles */ @@ -137,6 +186,10 @@ h1:hover { .back-to-home img { width: 18px; } + + .author { + position: relative !important; + } } @media (max-width: 480px) { @@ -169,112 +222,6 @@ h1:hover { } } -.attribution { - font-size: 11px; - text-align: center; -} - -.attribution a { - color: hsl(228, 45%, 44%); -} - -html, -body { - height: 100%; - margin: 0; - overflow: auto !important; - /* Allow scrolling */ - height: 105%; -} - -body { - background-color: #e7b537; - display: flex; - flex-direction: column; - font-family: "WorkSans-Regular", Arial, sans-serif; -} - -@media screen and (max-width: 450px) { - .contributor-card { - max-width: 90%; - } - - .navbar { - flex-direction: column; - padding: 5px !important; - } - - .faqcontainer { - background-color: white; - border-radius: 20px; - padding: 20px; - max-width: 600px; - width: 90%; - box-shadow: 10px 10px 15px rgba(101, 99, 99, 0.5); - margin: 100px auto 20px; - /* Increased margin-top to avoid content being hidden under navbar */ - flex: 1; - z-index: 0; - /* Ensure it's below the fixed elements */ - margin-top: 54px; - } - - .author { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background: linear-gradient(to right, #00093c, #2d0b00); - color: #fff; - padding: 0px; - position: fixed; - bottom: 0; - z-index: 1000; - height: 67px; - flex-shrink: 0; - box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); - /* Added shadow for better visibility */ - } - - .author .fotbar { - display: flex; - gap: -22px; - } - - .author .fotbar a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - font-size: 18px; - background-color: transparent; - } - - .author p { - color: white; - padding: 10px; - margin-right: -550px; - font-size: 20px; - font-weight: 600; - } - - .author .social-icons { - display: flex; - gap: 10px; - margin-right: 20px; - } - - .author a { - color: white !important; - } - - .author .social-icons a { - color: white; - text-decoration: none; - font-size: 20px; - } -} - @media screen and (max-width: 1190px) { .author a { font-size: small; @@ -293,11 +240,7 @@ body { @media screen and (max-width: 550px) { .author { - display: none !important; - } - - .navbar { - display: none !important; + padding: 10px; } .author p { @@ -312,14 +255,4 @@ body { .author .social-icons a { font-size: 15px; } - - .faqcontainer { - margin-top: 49px; - } -} - -@media (max-width: 768px) { - .author { - position: relative !important; - } } From 92aa494505f66bf7adf3545998987b9cc40c2335 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Mon, 5 Aug 2024 21:10:14 +0530 Subject: [PATCH 2/3] styling done --- assets/images/icon-star.svg | 2 +- styles/FAQs.css | 15 ++++++++++----- styles/global.css | 7 ++++--- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/assets/images/icon-star.svg b/assets/images/icon-star.svg index 66fb9e70..b56b9aa3 100644 --- a/assets/images/icon-star.svg +++ b/assets/images/icon-star.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/styles/FAQs.css b/styles/FAQs.css index d6eb04e5..248d21a0 100644 --- a/styles/FAQs.css +++ b/styles/FAQs.css @@ -20,7 +20,7 @@ body { background-color: white; border-radius: 10px; padding: 20px; - box-shadow: 10px 10px 15px rgba(101, 99, 99, 0.5); + box-shadow: 15px 15px 20px rgb(0, 0, 0, 0.5); width: 60%; margin: 6rem auto; } @@ -33,7 +33,7 @@ body { align-items: center; padding: 1rem; margin-bottom: 1rem; - text-shadow: #ca2cff 1px 1px 5px; + text-shadow: #3e196e 2px 2px 5px; } /* FAQ Image Styles */ @@ -99,11 +99,16 @@ body { font-size: 1.25rem; line-height: 1.2; color: #555; - background: rgba(255, 255, 255, 0.8); + background: rgba(255, 255, 255, 0.5); padding: 10px; border-radius: 5px; - transition: background-color 300ms ease-in-out, color 300ms ease-in-out; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for depth */ + transition: all 2s ease-in; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Light shadow for depth */ +} + +.question:hover p { + background: #ffdfdf; + text-shadow: #0000003e 0px 3px 3px; } .author { diff --git a/styles/global.css b/styles/global.css index 54c6a46d..1d4d1855 100644 --- a/styles/global.css +++ b/styles/global.css @@ -19,11 +19,12 @@ } ::-webkit-scrollbar { - width: 8px; + width: 4px; + background: #333; } + ::-webkit-scrollbar-thumb { - background-color: rgba(231, 181, 55, 0.979); - border-radius: 15px; + background-color: #d3ceba; } @media (max-width: 768px) { From 20ef8d154c6a4411cc1cc1c686eb12b35478be5e Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Mon, 5 Aug 2024 21:26:27 +0530 Subject: [PATCH 3/3] Fixed navbar --- pages/FAQs.html | 10 ++++++---- pages/about.html | 10 ++++++---- pages/contributors.html | 10 ++++++---- styles/FAQs.css | 6 +++--- 4 files changed, 21 insertions(+), 15 deletions(-) diff --git a/pages/FAQs.html b/pages/FAQs.html index b6c1893e..80aae8ea 100644 --- a/pages/FAQs.html +++ b/pages/FAQs.html @@ -45,10 +45,12 @@ diff --git a/pages/about.html b/pages/about.html index 4cc5e61f..4b19490c 100644 --- a/pages/about.html +++ b/pages/about.html @@ -70,10 +70,12 @@ diff --git a/pages/contributors.html b/pages/contributors.html index b120c09e..10b55eb8 100644 --- a/pages/contributors.html +++ b/pages/contributors.html @@ -62,10 +62,12 @@ diff --git a/styles/FAQs.css b/styles/FAQs.css index 248d21a0..a1af15d4 100644 --- a/styles/FAQs.css +++ b/styles/FAQs.css @@ -121,7 +121,7 @@ body { padding: 15px; position: fixed; bottom: 0; - z-index: 1000; + z-index: 100; } .fotbar { @@ -165,8 +165,8 @@ body { /* Mobile Styles */ @media (max-width: 768px) { .faqcontainer { - width: 95%; - padding: 15px; + width: 80%; + padding: 1rem; } h1 {