From f8a57595093ce1081b0ca9368d0b1d6c0f768cf5 Mon Sep 17 00:00:00 2001 From: codex-leo Date: Sat, 4 Jan 2025 15:57:04 +0530 Subject: [PATCH 1/2] Add responsiveness and dark/light theme toggler --- templates/index.html | 86 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 73 insertions(+), 13 deletions(-) diff --git a/templates/index.html b/templates/index.html index 6e74c62..d0b9b71 100644 --- a/templates/index.html +++ b/templates/index.html @@ -14,7 +14,7 @@ body { font-family: 'Inter', system-ui, sans-serif; - background-color: #f0f0f0; + background-color: #ffffff; margin: 0; padding: 20px; } @@ -34,23 +34,23 @@ } .title { + font-size: 6vmin; margin: 0; flex: 1; - min-width: 300px; + min-width: 40vmax; } .search-container { flex: 1; - min-width: 300px; + min-width: 30vmin; position: relative; } .search-input { - width: 100%; + width: 90%; padding: 12px; border: 2px solid var(--dark); border-radius: 6px; - font-size: 16px; background: white; box-shadow: 4px 4px 0px var(--dark); } @@ -88,12 +88,21 @@ box-shadow: 5px 5px 0px var(--dark); transition: transform 0.2s; } + .select-box-dark { + background-color: #b7dedf; + box-shadow: 5px 5px 0px #878787; + } .select-box:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0px var(--dark); } + .select-box-dark:hover { + transform: translate(-2px, -2px); + box-shadow: 7px 7px 0px #878787; + } + select { width: 100%; padding: 10px; @@ -247,29 +256,50 @@ padding: 20px; } - .bengaluru-button { + .quick-access-container button { background: var(--secondary); color: var(--dark); border: 3px solid var(--dark); padding: 15px 30px; - font-size: 1.1rem; + font-size: 4vmin; border-radius: 8px; cursor: pointer; box-shadow: 5px 5px 0px var(--dark); transition: transform 0.2s; - min-width: 200px; + width: 30vmax; } - .bengaluru-button:hover { + .quick-access-container button:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0px var(--dark); } .famous-cities-title { text-align: center; + font-size: 5vmin; margin: 20px 0; color: var(--dark); } + .toggle-theme { + all: unset; + background-color: var(--primary); + padding: 1vmin 3vmin; + color: white; + border-radius: 5px; + transition: all 0.2s; + box-shadow: 0.5vmin 0.5vmin 0 var(--dark); + } + .toggle-theme:hover{ + transform: translate(-2px, -2px); + box-shadow: 1vmin 1vmin 0px var(--dark); + } + .dark-input { + background-color: #BEE7E8; + box-shadow: 4px 4px 0px #878787; + } + .dark-input::placeholder { + color: rgb(63, 63, 63); + } @@ -278,13 +308,14 @@

Panchayat Member Directory

+ type="text" + id="globalSearch" + class="search-input" + placeholder="Search state, district, taluk, village...">
+

Famous Cities

@@ -709,6 +740,35 @@

${member.name}

alert('Error performing search'); } } + + //theme toggler(dark/light) for main page + const themeBtn = document.querySelector('.toggle-theme') + themeBtn.addEventListener('click',() => { + const body_style = document.body.style; + const input = document.querySelector('input'); + const themeBtn = document.querySelector('.toggle-theme'); + const h3_style = document.querySelector('h3').style; //'famous cities' text + const select_box = document.querySelectorAll('.select-box'); + if(body_style.backgroundColor === 'rgb(255, 255, 255)') { + body_style.backgroundColor = 'rgb(41,41,41)'; + body_style.color = '#A7CCED'; + input.classList.add('dark-input'); + themeBtn.innerHTML = "☾"; + h3_style.color = '#a6cbf0'; + for(let box of select_box) { + box.classList.add("select-box-dark"); + } + }else { + body_style.backgroundColor = '#ffffff'; + body_style.color = 'var(--dark)'; + input.classList.remove('dark-input'); + themeBtn.innerHTML = "☼"; + h3_style.color = 'var(--dark)'; + for(let box of select_box) { + box.classList.remove("select-box-dark"); + } + } + }) From d1b90baee1310fee863d0749c6aed1aaec2c058d Mon Sep 17 00:00:00 2001 From: codex-leo Date: Sun, 5 Jan 2025 09:10:14 +0530 Subject: [PATCH 2/2] Add responsiveness for main page and a theme toggler --- templates/index.html | 49 +++++++++++++++++++++++++++++--------------- 1 file changed, 33 insertions(+), 16 deletions(-) diff --git a/templates/index.html b/templates/index.html index d0b9b71..dab7ecd 100644 --- a/templates/index.html +++ b/templates/index.html @@ -17,6 +17,18 @@ background-color: #ffffff; margin: 0; padding: 20px; + color: var(--dark); + } + header { + background-color: rgba(237, 237, 237, 0.438); + backdrop-filter: blur(15px); + padding: 5vmax; + border-radius: 15px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + } + .dark-theme-body { + background-color: rgb(41, 41, 41); + color: #A7CCED; } .container { @@ -304,6 +316,7 @@
+

Panchayat Member Directory

@@ -317,6 +330,7 @@

Panchayat Member Directory

+

Famous Cities

@@ -742,32 +756,35 @@

${member.name}

} //theme toggler(dark/light) for main page - const themeBtn = document.querySelector('.toggle-theme') - themeBtn.addEventListener('click',() => { + + let isDarkTheme = false; //theme is light by default + const themeBtn = document.querySelector('.toggle-theme'); + + themeBtn.addEventListener('click',() => { + document.body.classList.toggle('dark-theme-body'); const body_style = document.body.style; const input = document.querySelector('input'); const themeBtn = document.querySelector('.toggle-theme'); - const h3_style = document.querySelector('h3').style; //'famous cities' text + const h3 = document.querySelector('h3'); //'famous cities' text const select_box = document.querySelectorAll('.select-box'); - if(body_style.backgroundColor === 'rgb(255, 255, 255)') { - body_style.backgroundColor = 'rgb(41,41,41)'; - body_style.color = '#A7CCED'; - input.classList.add('dark-input'); - themeBtn.innerHTML = "☾"; - h3_style.color = '#a6cbf0'; - for(let box of select_box) { - box.classList.add("select-box-dark"); - } - }else { - body_style.backgroundColor = '#ffffff'; - body_style.color = 'var(--dark)'; + + if(isDarkTheme) { input.classList.remove('dark-input'); themeBtn.innerHTML = "☼"; - h3_style.color = 'var(--dark)'; + h3.style.color = 'var(--dark)' for(let box of select_box) { box.classList.remove("select-box-dark"); } + }else { + input.classList.add('dark-input'); + themeBtn.innerHTML = "☾"; + h3.style.color = '#a6cbf0'; + for(let box of select_box) { + box.classList.add("select-box-dark"); + } } + + isDarkTheme = !isDarkTheme; })