diff --git a/index.html b/index.html index 996cd9c7f..c1ff79ea0 100644 --- a/index.html +++ b/index.html @@ -1,162 +1,157 @@ - - - - - - - - - Front-End Projects | Home Page - - - - - - - - - - - - - -
-

Loading...

-
-
-
-
-
-
-
+ + + + + + + + + Front-End Projects | Home Page + + + + + + + + + + + + + +
+

Loading...

+
+
+
+
+
+
+
+ + +
+ +
- -
- + + - - - - -
- - -
-
-

Front End
Projects

-

A Repository where different types of Front - End Projects are present. If you have any front end - project then you can contribute to this open source repository.

-
-   Contribute - Now    -
-
- front-end coder -
-
- - - -
-
-
-

PROJECTS

-

Projects

-
-
- - -
+ +
+ + +
+
+

Front End
Projects

+

A Repository where different types of Front - End Projects are present. If you have any front end + project then you can contribute to this open source repository.

-
-
+   Contribute + Now    +
+
+ front-end coder +
+ - + -
+
+
-

CONTRIBUTORS

-

Contributors

+

PROJECTS

+

Projects

-
    -
  • -
+
+ + +
+
+
+
-
+ +
+
+

CONTRIBUTORS

+

Contributors

+
+ -
+ + + - - - - - - - + + + + + - + } + // code for preloader ends + + \ No newline at end of file diff --git a/script.js b/script.js index f5dc616e2..3faf7eb23 100644 --- a/script.js +++ b/script.js @@ -9,7 +9,7 @@ let filteredProjects = (searchQuery && searchQuery != "") ? projects.filter((pro const projects_div = document.getElementsByClassName("projects")[0] for (let project of filteredProjects) { const project_div = document.createElement("div"); - project_div.className="project"; + project_div.className = "project"; const img = document.createElement("img") img.src = project.img; @@ -20,11 +20,11 @@ for (let project of filteredProjects) { const heading = document.createElement("h2"); heading.innerHTML = project.title; project_info.appendChild(heading); - + const row = document.createElement("div"); - row.className="row"; + row.className = "row"; const tech = document.createElement("tech"); - tech.className="tech"; + tech.className = "tech"; for (let t of project.tags) { const span = document.createElement("span"); @@ -40,21 +40,21 @@ for (let project of filteredProjects) { const project_link = document.createElement("a"); project_link.href = project['project-link']; project_link.innerHTML = ``; - project_link.target="_blank" + project_link.target = "_blank" links.appendChild(project_link); const github_link = document.createElement("a"); github_link.href = project['github-link']; github_link.innerHTML = ``; - github_link.target="_blank" + github_link.target = "_blank" links.appendChild(github_link); row.appendChild(links); project_info.appendChild(row); const desc = document.createElement('p'); - desc.className="description"; - desc.innerHTML=project.description; + desc.className = "description"; + desc.innerHTML = project.description; project_info.appendChild(desc); project_div.appendChild(project_info); @@ -67,10 +67,10 @@ if (searchQuery && searchQuery != "") document.getElementById("search").value = searchQuery const searchForm = document.getElementById("searchForm"); -searchForm.addEventListener("submit",(e) => { +searchForm.addEventListener("submit", (e) => { const searchText = document.getElementById("search"); e.preventDefault(); - + if (searchText.value == (searchQuery ? searchQuery : "")) { return; } @@ -81,10 +81,10 @@ searchForm.addEventListener("submit",(e) => { // For contributors list fetch("https://api.github.com/repos/TusharKesarwani/Front-End-Projects/contributors?per_page=50", { - headers: { - 'Authorization': '' - } - }).then(response => response.json()) + headers: { + 'Authorization': '' + } +}).then(response => response.json()) .then(data => { // Extract the data for each contributor const contributors = data.map(contributor => ({ @@ -100,36 +100,64 @@ fetch("https://api.github.com/repos/TusharKesarwani/Front-End-Projects/contribut li.innerHTML = `${contributor.username}`; contributorsList.appendChild(li); }); - + }); - //-----------for scrollbar button--------------- +//-----------for scrollbar button--------------- - function calculateScrollValue(){ +function calculateScrollValue() { - let scrollProgress=document.getElementById('progress'); - let progressValue=document.getElementById('progress-value'); + let scrollProgress = document.getElementById('progress'); + let progressValue = document.getElementById('progress-value'); - let pos=document.documentElement.scrollTop; - let calcHeight=document.documentElement.scrollHeight-document.documentElement.clientHeight; + let pos = document.documentElement.scrollTop; + let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; - let scrollValue=Math.round((pos*100)/calcHeight); + let scrollValue = Math.round((pos * 100) / calcHeight); + + // for hiding scrollbar button + if (pos > 100) { + scrollProgress.style.display = 'grid'; + } + else { + scrollProgress.style.display = 'none'; + } - // for hiding scrollbar button - if(pos>100){ - scrollProgress.style.display='grid'; - } - else{ - scrollProgress.style.display='none'; - } + scrollProgress.addEventListener('click', () => { + document.documentElement.scrollTop = 0; + }) + scrollProgress.style.background = `conic-gradient(#0D4360 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`; - scrollProgress.addEventListener('click',()=>{ - document.documentElement.scrollTop=0; - }) - scrollProgress.style.background=`conic-gradient(#0D4360 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`; - +} +window.onscroll = calculateScrollValue; +window.onload = calculateScrollValue; + +// Dark Mode Toggle Logic +const themeToggleBtn = document.getElementById("theme-toggle"); +if (themeToggleBtn) { + const body = document.body; + const icon = themeToggleBtn.querySelector("i"); + + // Check local storage for theme preference + if (localStorage.getItem("theme") === "dark") { + body.classList.add("dark-mode"); + icon.classList.remove("fa-moon"); + icon.classList.add("fa-sun"); } - window.onscroll=calculateScrollValue; - window.onload=calculateScrollValue; + + themeToggleBtn.addEventListener("click", () => { + body.classList.toggle("dark-mode"); + + if (body.classList.contains("dark-mode")) { + localStorage.setItem("theme", "dark"); + icon.classList.remove("fa-moon"); + icon.classList.add("fa-sun"); + } else { + localStorage.setItem("theme", "light"); + icon.classList.remove("fa-sun"); + icon.classList.add("fa-moon"); + } + }); +} diff --git a/style.css b/style.css index 389a351be..faf890ff2 100644 --- a/style.css +++ b/style.css @@ -585,16 +585,25 @@ main .left p { transition-duration: 0.5s; } +.head { + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + .title { color: #0d4360; font-size: 3rem; - margin-top: -6rem; + position: absolute; + z-index: 2; } .bg-title { font-size: 6rem; color: rgb(234, 233, 233); - margin-left: -6rem; + position: relative; + z-index: 1; } @keyframes imgUp { @@ -817,11 +826,9 @@ footer a { } .title { font-size: 2.5rem; - margin-top: -5rem; } .bg-title { font-size: 6rem; - margin-left: -4rem; } .projects { margin: 4rem 1rem; @@ -896,11 +903,9 @@ footer a { } .title { font-size: 2rem; - margin-top: -3rem; } .bg-title { font-size: 4rem; - margin-left: -2rem; } .projects { margin-top: 1rem; @@ -972,11 +977,9 @@ footer a { } .title { font-size: 1.5rem; - margin-top: -2rem; } .bg-title { font-size: 3rem; - margin-left: -1rem; } .projects { margin: 0rem; @@ -1004,3 +1007,96 @@ footer a { padding: 2rem 1rem; } } + +/* Dark Mode Styles */ +body.dark-mode { + background-color: #121212; + color: #ffffff; +} + +body.dark-mode p { + color: #b3b3b3; +} + +body.dark-mode nav { + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); +} + +body.dark-mode .github-btn { + background-color: #2b2b2b; + color: #ffffff; +} + +body.dark-mode .github-btn:hover { + background-color: #05f2c7; + color: #1a1a1a; +} + +body.dark-mode .theme-btn:hover { + color: #05f2c7 !important; +} + +body.dark-mode main .left h1 { + color: #ffffff; +} + +body.dark-mode main .left p { + color: #b3b3b3; +} + +body.dark-mode .github-btn-cta { + background-color: #1a1a1a; + border: 1px solid #05f2c7; + width: max-content; + padding: 0.6rem 1.5rem; +} + +body.dark-mode .project-section { + background-color: #1a1a1a; + border-color: #333; +} + +body.dark-mode .title { + color: #ffffff; +} + +body.dark-mode .bg-title { + color: #2b2b2b; +} + +body.dark-mode .project-header #searchForm { + border-color: #05f2c7; +} + +body.dark-mode .project-header #search { + background-color: transparent; + color: #ffffff; +} + +body.dark-mode .project-header #search::placeholder { + color: #888; +} + +body.dark-mode .project-header button { + background-color: transparent; + color: #ffffff; +} + +body.dark-mode .project { + background-color: #2b2b2b; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +body.dark-mode .project:hover { + box-shadow: 0 0 15px rgba(5, 242, 199, 0.2); +} + +body.dark-mode .contributors { + background-color: #1a1a1a; + border-color: #333; +} + +body.dark-mode .contributors .list-section { + background-color: #2b2b2b; +} +