From 563aef03d6fcc807d1c00a623e8b1855b14c3f9a Mon Sep 17 00:00:00 2001 From: Vijay Shanker Sharma Date: Thu, 1 Aug 2024 12:18:20 +0530 Subject: [PATCH 1/4] Add sun and moon icons to dark mode toggle for improved UI --- index.html | 94 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 65 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index 7779868d..39c7d5a9 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Awesome GitHub Profile READMEs +
- - Light Mode -
+ +

Awesome GitHub Profile READMEs

@@ -239,7 +277,6 @@

Awesome GitHub Profile READMEs

+ + - + \ No newline at end of file diff --git a/retriveprofile.js b/retriveprofile.js new file mode 100644 index 00000000..1fe82688 --- /dev/null +++ b/retriveprofile.js @@ -0,0 +1,43 @@ +document.addEventListener("DOMContentLoaded", function () { + let contributors = []; + + function renderProfiles(filter = "") { + const container = document.querySelector(".profiles"); + container.innerHTML = ""; + contributors.forEach((contributor) => { + if (contributor.login.toLowerCase().includes(filter.toLowerCase())) { + const card = document.createElement("a"); + card.href = `https://github.com/${contributor.login}`; + card.className = "profile"; + card.target = "_blank"; + + const img = document.createElement("img"); + img.src = contributor.avatar_url; + img.alt = `Avatar of ${contributor.login}`; + img.style.maxWidth = "100%"; + img.style.borderRadius = "10px"; + + const name = document.createElement("p"); + name.textContent = contributor.login; + + card.appendChild(img); + card.appendChild(name); + + container.appendChild(card); + } + }); + } + + fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc") + .then((response) => response.json()) + .then((data) => { + contributors = data.contributors; + renderProfiles(); + }); + + const searchBar = document.querySelector(".search-input"); + searchBar.addEventListener("input", () => { + renderProfiles(searchBar.value); + }); + }); + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..ab8d87ba --- /dev/null +++ b/styles.css @@ -0,0 +1,239 @@ +body { + font-family: "Roboto", sans-serif; + background-color: #f0f0f0; + color: #333; + margin: 0; + padding: 0; + transition: background-color 0.3s ease, color 0.3s ease; + } + + .container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; + text-align: center; + } + + .main-heading { + margin-bottom: 40px; + } + + .tags { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 20px; + } + + .tag { + display: inline-block; + margin: 5px; + padding: 10px 15px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 20px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + .search-bar { + margin-bottom: 20px; + } + + .search-input { + width: 50%; + padding: 15px; + font-size: 16px; + border: 2px solid #ddd; + border-radius: 25px; + box-shadow: none; + transition: border-color 0.3s ease, box-shadow 0.3s ease; + } + + .search-input:hover, + .search-input:focus { + border-color: #aaa; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + } + + .profiles { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + .profile { + background-color: #fff; + border: 1px solid #ddd; + border-radius: 10px; + margin: 10px; + width: 250px; + padding: 15px; + margin-top: 30; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + animation: fadeIn 0.5s ease-out; + transition: transform 0.3s ease, box-shadow 0.3s ease; + } + + .profile:hover { + transform: scale(1.05); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + } + + .profile img { + max-width: 100%; + border-radius: 10px; + } + + .profile p { + color: #333; + } + + .grey-banner { + background-color: #333333; + color: white; + padding: 10px 15px; + border-bottom-left-radius: 10px; + font-size: 0.8em; + font-weight: 500; + width: 200px; + text-align: center; + display: inline-block; + margin: 20px auto; + cursor: pointer; + } + + /* Dark Mode Styles */ + body.dark-mode { + background-color: #000000; + color: #f0f0f0; + } + + body.dark-mode .tag { + background-color: #555; + border-color: #444; + color: #fff; + } + + body.dark-mode .search-input { + background-color: #555; + border-color: #444; + color: #fff; + } + + body.dark-mode .profile { + background-color: #444; + border-color: #555; + } + + body.dark-mode .profile p { + color: #f0f0f0; + } + + /* Toggle Switch Styles */ + .toggle-switch label { + position: relative; + top: 7px; + left: 7px; + width: 55px; + /* Adjust width to fit switch button and icons */ + height: 30px; + /* Adjust height if needed */ + background-color: #ccc; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + padding: 0 5px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: background-color 0.5s ease; + } + + /* Switch Button */ + .switch-button { + position: absolute; + top: 2px; + left: 3px; + width: 27px; + height: 27px; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + transition: transform 0.5s ease, background-color 0.5s ease; + } + + /* Icon Styles */ + .sun-icon, + .moon-icon { + user-select: none; + font-size: 25px; + position: absolute; + top: 50%; + transform: translateY(-50%); + transition: opacity 0.5s ease, color 0.5s ease; + } + + /* Sun Icon */ + .sun-icon { + color: #f39c12; + left: 1px; + /* Position from the left edge */ + opacity: 1; + /* Initially visible */ + } + + /* Moon Icon */ + .moon-icon { + color: #bdc3c7; + right: 1px; + /* Position from the right edge */ + opacity: 0; + /* Initially hidden */ + } + + #theme-toggle { + opacity: 0; + position: absolute; + width: 0; + height: 0; + } + + + /* Checkbox Checked State */ + #theme-toggle:checked+label { + background-color: #555; + } + + #theme-toggle:checked+label .sun-icon { + opacity: 0; + /* Hide sun icon when checked */ + } + + #theme-toggle:checked+label .moon-icon { + opacity: 1; + /* Show moon icon when checked */ + } + + #theme-toggle:checked+label .switch-button { + transform: translateX(30px); + /* Adjust to fit switch width */ + background-color: black; + } + @media (max-width:500px){ + .toggle-switch{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + } + } \ No newline at end of file From 07630d908c25c68a37475f25f16f7d42b4f64281 Mon Sep 17 00:00:00 2001 From: Vijay Shanker Sharma Date: Fri, 2 Aug 2024 21:36:37 +0530 Subject: [PATCH 3/4] changes on toggle --- styles.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/styles.css b/styles.css index ce3b5857..b8faf6d8 100644 --- a/styles.css +++ b/styles.css @@ -193,6 +193,15 @@ body { opacity: 0; /* Initially hidden */ } + /* Hide the checkbox itself */ + #theme-toggle { + opacity: 0; + position: absolute; + width: 0; + height: 0; + } + + /* Checkbox Checked State */ #theme-toggle:checked + label { background-color: #555; From de98de3bbd23d36662d7876794543ea3dffa5571 Mon Sep 17 00:00:00 2001 From: Vijay Shanker Sharma Date: Fri, 2 Aug 2024 21:37:26 +0530 Subject: [PATCH 4/4] changes on toggle --- styles.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/styles.css b/styles.css index b8faf6d8..360cbc7a 100644 --- a/styles.css +++ b/styles.css @@ -143,6 +143,8 @@ body { /* Switch Label */ .toggle-switch label { position: relative; + top: 7px; + left: 7px; width: 55px; /* Adjust width to fit switch button and icons */ height: 30px; /* Adjust height if needed */ background-color: #ccc;