From b435a8027e3d3120965f006cb808b61d9636794a Mon Sep 17 00:00:00 2001 From: siddhant-2002 Date: Wed, 5 Jun 2024 08:50:58 +0530 Subject: [PATCH] section 1 button in dark theme section1 buttons get fixed --- css/desktop_9.css | 8 +++ css/sec1.css | 127 +++++++++++++++++------------------ index.html | 16 ++--- js/Landingpage.js | 14 ++-- js/theme.js | 165 ++++++++++++++++++++++++---------------------- 5 files changed, 172 insertions(+), 158 deletions(-) diff --git a/css/desktop_9.css b/css/desktop_9.css index 17ba155..4056e3e 100644 --- a/css/desktop_9.css +++ b/css/desktop_9.css @@ -18,6 +18,7 @@ color: white; } + #themeImg{ width: 25px; height: 25px; @@ -81,6 +82,13 @@ nav { margin-left: 10px; } +/* dark sec 1 */ + +.dark-button { + background-color: #1A1A1A; + color: white; +} + .calendar_container { display: flex; align-items: center; diff --git a/css/sec1.css b/css/sec1.css index 5cc0c87..d0b890a 100644 --- a/css/sec1.css +++ b/css/sec1.css @@ -1,89 +1,90 @@ -:root { - --element-color: black; - --element1-color:rgba(0, 0, 0, 0.5); - --element2-color:rgba(0, 0, 0, 0.8); -} - - +/* :root { + --element-color: black; + --element1-color: rgba(0, 0, 0, 0.5); + --element2-color: rgba(0, 0, 0, 0.8); +} */ .sec1 { - height: 20rem; - margin-top: 110px; - width: 100%; + height: 20rem; + margin-top: 110px; + width: 100%; } .s1part1 { - height: 7rem; - width: 97%; - margin: 3.2rem 2%; - border-radius: 2rem; - background-color: #7D41E2; - box-shadow: 0 2px 1px rgba(0, 0, 0, 0.199); - display: flex; - justify-content: center; - align-items: center; - + height: 7rem; + width: 97%; + margin: 3.2rem 2%; + border-radius: 2rem; + background-color: #7d41e2; + box-shadow: 0 2px 1px rgba(0, 0, 0, 0.199); + display: flex; + justify-content: center; + align-items: center; } .s1part1 span { - font-size: 2.7em; - font-weight: bold; - color: white; + font-size: 2.7em; + font-weight: bold; + color: white; } .search { - height: 3rem; - width: 34rem; - border-radius: 2rem; - position: relative; - top: -2.5rem; - background-color: white; - border: none; - box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.155); - color: rgba(0, 0, 0, 0.148); - left: 50%; - transform: translate(-50%, -50%); + height: 3rem; + width: 34rem; + border-radius: 2rem; + position: relative; + top: -2.5rem; + background-color: white; + border: none; + box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.155); + color: rgba(0, 0, 0, 0.148); + left: 50%; + transform: translate(-50%, -50%); } .search[placeholder] { - color: black; - padding-left: 1rem; + color: black; + padding-left: 1rem; } .s1part2 { - /* border: 1px solid black; */ - height: 5vw; - width: 40vw; - position: relative; - left: 33vw; - bottom: 3vw; - display: flex; - align-items: center; + /* border: 1px solid black; */ + height: 5vw; + width: 40vw; + position: relative; + left: 33vw; + bottom: 3vw; + display: flex; + align-items: center; } .s1part2 a:hover { - text-decoration: underline; + text-decoration: underline; } -.buttons{ - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - margin: -2rem 0.7rem; - +.buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin: -2rem 0.7rem; + /* color: white; */ } .s1btn1 { - width:fit-content; - padding: .9rem; - margin: 0 0.7rem; - border: none; - border-radius: 1rem; - background-color: #ff765d; - color: white; + width: fit-content; + padding: 0.9rem; + margin: 0 0.7rem; + border: none; + border-radius: 1rem; + background-color: transparent; + /* background-color: #ff765d; */ + /* color: white; */ +} +.s1btn1:hover { + background-color: #ff765d; } .s1part2 a { - margin: 0 0.7vw; - text-decoration: none; - color: var(--element-color); -} \ No newline at end of file + margin: 0 0.7vw; + text-decoration: none; + color: var(--element-color); +} diff --git a/index.html b/index.html index 08787cf..8953c34 100644 --- a/index.html +++ b/index.html @@ -112,16 +112,16 @@ -
+
- - - - - - + + + + + +
- +
diff --git a/js/Landingpage.js b/js/Landingpage.js index 274f943..14f8bb9 100644 --- a/js/Landingpage.js +++ b/js/Landingpage.js @@ -6,13 +6,13 @@ console.log("FucY") function buttonClick(ele) { NavBar= document.getElementsByClassName("s1btn1"); console.log("Hi") - for(i=0; i { - const currentYear = currentDate.getFullYear(); - const currentMonth = currentDate.getMonth(); - - const firstDay = new Date(currentYear, currentMonth, 1); - const lastDay = new Date(currentYear, currentMonth + 1, 0); - const totalDays = lastDay.getDate(); - const firstDayIndex = firstDay.getDay(); - const lastDayIndex = lastDay.getDay(); - - const monthYearString = currentDate.toLocaleString('default', { month: 'long', year: 'numeric' }); - monthYearElement.textContent = monthYearString; - - let datesHTML = ''; - - for (let i = firstDayIndex; i > 0; i--) { - const prevDate = new Date(currentYear, currentMonth, 0 - i + 1); - datesHTML += `
${prevDate.getDate()}
`; - } - for (let i = 1; i <= totalDays; i++) { - const date = new Date(currentYear, currentMonth, i); - const activeClass = date.toDateString() === new Date().toDateString() ? 'active' : ''; - datesHTML += `
${i}
`; - } - for (let i = 1; i <= 6 - lastDayIndex; i++) { - const nextDate = new Date(currentYear, currentMonth + 1, i); - datesHTML += `
${nextDate.getDate()}
`; - } - - datesElement.innerHTML = datesHTML; + const currentYear = currentDate.getFullYear(); + const currentMonth = currentDate.getMonth(); + + const firstDay = new Date(currentYear, currentMonth, 1); + const lastDay = new Date(currentYear, currentMonth + 1, 0); + const totalDays = lastDay.getDate(); + const firstDayIndex = firstDay.getDay(); + const lastDayIndex = lastDay.getDay(); + + const monthYearString = currentDate.toLocaleString("default", { + month: "long", + year: "numeric", + }); + monthYearElement.textContent = monthYearString; + + let datesHTML = ""; + + for (let i = firstDayIndex; i > 0; i--) { + const prevDate = new Date(currentYear, currentMonth, 0 - i + 1); + datesHTML += `
${prevDate.getDate()}
`; + } + for (let i = 1; i <= totalDays; i++) { + const date = new Date(currentYear, currentMonth, i); + const activeClass = + date.toDateString() === new Date().toDateString() ? "active" : ""; + datesHTML += `
${i}
`; + } + for (let i = 1; i <= 6 - lastDayIndex; i++) { + const nextDate = new Date(currentYear, currentMonth + 1, i); + datesHTML += `
${nextDate.getDate()}
`; + } + + datesElement.innerHTML = datesHTML; }; -prevBtn.addEventListener('click', () => { - currentDate.setMonth(currentDate.getMonth() - 1); - updateCalendar(); +prevBtn.addEventListener("click", () => { + currentDate.setMonth(currentDate.getMonth() - 1); + updateCalendar(); }); -nextBtn.addEventListener('click', () => { - currentDate.setMonth(currentDate.getMonth() + 1); - updateCalendar(); +nextBtn.addEventListener("click", () => { + currentDate.setMonth(currentDate.getMonth() + 1); + updateCalendar(); }); updateCalendar(); - -themeBtn.addEventListener('click',function(){ - body.classList.toggle("darktheme"); - navbar.classList.toggle("darktheme"); - if(body.classList.contains("darktheme")){ - themeBtn.src ="assests/sun.png" - } - else{ - themeBtn.src ="assests/moon.png" - document.body.style.transition="1s" - } - -}) +themeBtn.addEventListener("click", function () { + body.classList.toggle("darktheme"); + navbar.classList.toggle("darktheme"); + let sec1Elements = document.querySelectorAll(".s1btn1"); + sec1Elements.forEach((element) => { + element.classList.add("dark-button"); + }); + if (body.classList.contains("darktheme")) { + themeBtn.src = "assests/sun.png"; + } else { + themeBtn.src = "assests/moon.png"; + document.body.style.transition = "1s"; + } +}); function click() { - const overlay = document.getElementById('overlay'); - console.log("Baby"); - overlay.style.display = overlay.style.display == "flex" ? "none": "flex"; - } -const loginButton = document.getElementById('loginButton'); -const overlay = document.getElementById('overlay'); - -loginButton.addEventListener('click', () => { - overlay.style.display = 'flex'; - console.log("Hello"); + const overlay = document.getElementById("overlay"); + console.log("Baby"); + overlay.style.display = overlay.style.display == "flex" ? "none" : "flex"; +} +const loginButton = document.getElementById("loginButton"); +const overlay = document.getElementById("overlay"); + +loginButton.addEventListener("click", () => { + overlay.style.display = "flex"; + console.log("Hello"); }); -overlay.addEventListener('click', (event) => { - if (event.target === overlay) { - overlay.style.display = 'none'; - } +overlay.addEventListener("click", (event) => { + if (event.target === overlay) { + overlay.style.display = "none"; + } }); function click() { - const overlay1 = document.getElementById('overlay1'); - console.log("Baby"); - overlay1.style.display = overlay1.style.display == "flex" ? "none": "flex"; + const overlay1 = document.getElementById("overlay1"); + console.log("Baby"); + overlay1.style.display = overlay1.style.display == "flex" ? "none" : "flex"; } -const Calender = document.getElementById('Calender'); -const overlay1 = document.getElementById('overlay1'); +const Calender = document.getElementById("Calender"); +const overlay1 = document.getElementById("overlay1"); -Calender.addEventListener('click', () => { -overlay1.style.display = 'flex'; -console.log("Hello"); +Calender.addEventListener("click", () => { + overlay1.style.display = "flex"; + console.log("Hello"); }); -overlay1.addEventListener('click', (event) => { -if (event.target === overlay1) { - overlay1.style.display = 'none'; -} -}); \ No newline at end of file +overlay1.addEventListener("click", (event) => { + if (event.target === overlay1) { + overlay1.style.display = "none"; + } +});