diff --git a/DevDetectiveApp/Ayush-Vish/assets/android-chrome-192x192.png b/DevDetectiveApp/Ayush-Vish/assets/android-chrome-192x192.png new file mode 100644 index 000000000..1b29de4ba Binary files /dev/null and b/DevDetectiveApp/Ayush-Vish/assets/android-chrome-192x192.png differ diff --git a/DevDetectiveApp/Ayush-Vish/assets/android-chrome-512x512.png b/DevDetectiveApp/Ayush-Vish/assets/android-chrome-512x512.png new file mode 100644 index 000000000..2f39d24f5 Binary files /dev/null and b/DevDetectiveApp/Ayush-Vish/assets/android-chrome-512x512.png differ diff --git a/DevDetectiveApp/Ayush-Vish/assets/apple-touch-icon.png b/DevDetectiveApp/Ayush-Vish/assets/apple-touch-icon.png new file mode 100644 index 000000000..c850eacad Binary files /dev/null and b/DevDetectiveApp/Ayush-Vish/assets/apple-touch-icon.png differ diff --git a/DevDetectiveApp/Ayush-Vish/assets/favicon-16x16.png b/DevDetectiveApp/Ayush-Vish/assets/favicon-16x16.png new file mode 100644 index 000000000..f82b01da4 Binary files /dev/null and b/DevDetectiveApp/Ayush-Vish/assets/favicon-16x16.png differ diff --git a/DevDetectiveApp/Ayush-Vish/assets/favicon-32x32.png b/DevDetectiveApp/Ayush-Vish/assets/favicon-32x32.png new file mode 100644 index 000000000..72dba564a Binary files /dev/null and b/DevDetectiveApp/Ayush-Vish/assets/favicon-32x32.png differ diff --git a/DevDetectiveApp/Ayush-Vish/assets/favicon.ico b/DevDetectiveApp/Ayush-Vish/assets/favicon.ico new file mode 100644 index 000000000..6d652abe6 Binary files /dev/null and b/DevDetectiveApp/Ayush-Vish/assets/favicon.ico differ diff --git a/DevDetectiveApp/Ayush-Vish/assets/images/company-icon.svg b/DevDetectiveApp/Ayush-Vish/assets/images/company-icon.svg new file mode 100644 index 000000000..1751a2229 --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/assets/images/company-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/DevDetectiveApp/Ayush-Vish/assets/images/location-icon.svg b/DevDetectiveApp/Ayush-Vish/assets/images/location-icon.svg new file mode 100644 index 000000000..533476f00 --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/assets/images/location-icon.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/DevDetectiveApp/Ayush-Vish/assets/images/moon-icon.svg b/DevDetectiveApp/Ayush-Vish/assets/images/moon-icon.svg new file mode 100644 index 000000000..998ffd3c7 --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/assets/images/moon-icon.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/DevDetectiveApp/Ayush-Vish/assets/images/search-icon.svg b/DevDetectiveApp/Ayush-Vish/assets/images/search-icon.svg new file mode 100644 index 000000000..9cd81ca31 --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/assets/images/search-icon.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/DevDetectiveApp/Ayush-Vish/assets/images/sun-icon.svg b/DevDetectiveApp/Ayush-Vish/assets/images/sun-icon.svg new file mode 100644 index 000000000..623f24109 --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/assets/images/sun-icon.svg @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/DevDetectiveApp/Ayush-Vish/assets/images/twitter-icon.svg b/DevDetectiveApp/Ayush-Vish/assets/images/twitter-icon.svg new file mode 100644 index 000000000..f16f42dd3 --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/assets/images/twitter-icon.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/DevDetectiveApp/Ayush-Vish/assets/images/website-icon.svg b/DevDetectiveApp/Ayush-Vish/assets/images/website-icon.svg new file mode 100644 index 000000000..92ddd9722 --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/assets/images/website-icon.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/DevDetectiveApp/Ayush-Vish/assets/site.webmanifest b/DevDetectiveApp/Ayush-Vish/assets/site.webmanifest new file mode 100644 index 000000000..45dc8a206 --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/assets/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/DevDetectiveApp/Ayush-Vish/gitattributes.txt b/DevDetectiveApp/Ayush-Vish/gitattributes.txt new file mode 100644 index 000000000..efc100355 --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/gitattributes.txt @@ -0,0 +1,4 @@ +* text-auto + +* jpg binary +* png binary \ No newline at end of file diff --git a/DevDetectiveApp/Ayush-Vish/index.html b/DevDetectiveApp/Ayush-Vish/index.html new file mode 100644 index 000000000..4ebf668f9 --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/index.html @@ -0,0 +1,102 @@ + + + + + + + DevDetective - CodeHelp + + + + + + + + + + + + + + +
+ +
+

DevDetective

+
+

DARK

+
+
+
+ +
+
+ +
+ +
+

no search results

+
+ +
+ +
+
+
+ +
+
+

+ +
+

+
+
+ +

+ +
+
+

Repos

+

+
+
+

Followers

+

+
+
+

Following

+

+
+
+ +
+
+
+

+
+
+
+ +
+
+
+ +
+
+
+

+
+
+ +
+
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/DevDetectiveApp/Ayush-Vish/script.js b/DevDetectiveApp/Ayush-Vish/script.js new file mode 100644 index 000000000..a78dc0c61 --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/script.js @@ -0,0 +1,180 @@ +//Variables +const searchbar = document.querySelector(".searchbar-container"); +const profilecontainer = document.querySelector(".profile-container"); +const root = document.documentElement.style; +const get = (param) => document.getElementById(`${param}`); +const url = "https://api.github.com/users/"; +const noresults = get("no-results"); +const btnmode = get("btn-mode"); +const modetext = get("mode-text"); +const modeicon = get("mode-icon"); +const btnsubmit = get("submit"); +const input = get("input"); +const avatar = get("avatar"); +const userName = get("name"); +const user = get("user"); +const date = get("date"); +const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; +const bio = get("bio"); +const repos = get("repos"); +const followers = get("followers"); +const following = get("following"); +const user_location = get("location"); +const page = get("page"); +const twitter = get("twitter"); +const company = get("company"); +let darkMode = false; + +// Event Listeners +btnsubmit.addEventListener("click", function () { + if (input.value !== "") { + getUserData(url + input.value); + } +}); + +input.addEventListener( + "keydown", + function (e) { + if (e.key == "Enter") { + if (input.value !== "") { + getUserData(url + input.value); + } + } + }, + false +); + +input.addEventListener("input", function () { + noresults.style.display = "none"; +}); + +btnmode.addEventListener("click", function () { + if (darkMode == false) { + darkModeProperties(); + } else { + lightModeProperties(); + } +}); + +// Functions + +//API CALL +function getUserData(gitUrl) { + fetch(gitUrl) + .then((response) => response.json()) + .then((data) => { + console.log(data); + updateProfile(data); + }) + .catch((error) => { + throw error; + }); +} + + +//RENDER +function updateProfile(data) { + if (data.message !== "Not Found") { + noresults.style.display = "none"; + function checkNull(param1, param2) { + if (param1 === "" || param1 === null) { + param2.style.opacity = 0.5; + param2.previousElementSibling.style.opacity = 0.5; + return false; + } else { + return true; + } + } + avatar.src = `${data.avatar_url}`; + userName.innerText = data.name === null ? data.login : data.name; + user.innerText = `@${data.login}`; + user.href = `${data.html_url}`; + datesegments = data.created_at.split("T").shift().split("-"); + date.innerText = `Joined ${datesegments[2]} ${months[datesegments[1] - 1]} ${datesegments[0]}`; + bio.innerText = data.bio == null ? "This profile has no bio" : `${data.bio}`; + repos.innerText = `${data.public_repos}`; + followers.innerText = `${data.followers}`; + following.innerText = `${data.following}`; + user_location.innerText = checkNull(data.location, user_location) ? data.location : "Not Available"; + page.innerText = checkNull(data.blog, page) ? data.blog : "Not Available"; + page.href = checkNull(data.blog, page) ? data.blog : "#"; + twitter.innerText = checkNull(data.twitter_username, twitter) ? data.twitter_username : "Not Available"; + twitter.href = checkNull(data.twitter_username, twitter) ? `https://twitter.com/${data.twitter_username}` : "#"; + company.innerText = checkNull(data.company, company) ? data.company : "Not Available"; + searchbar.classList.toggle("active"); + profilecontainer.classList.toggle("active"); + } else { + noresults.style.display = "block"; + } +} + + + +//SWITCH TO DARK MODE - activateDarkMode() +function darkModeProperties() { + root.setProperty("--lm-bg", "#141D2F"); + root.setProperty("--lm-bg-content", "#1E2A47"); + root.setProperty("--lm-text", "white"); + root.setProperty("--lm-text-alt", "white"); + root.setProperty("--lm-shadow-xl", "rgba(70,88,109,0.15)"); + modetext.innerText = "LIGHT"; + modeicon.src = "./assets/images/sun-icon.svg"; + root.setProperty("--lm-icon-bg", "brightness(1000%)"); + darkMode = true; + console.log("darkmode changed to " + darkMode); + localStorage.setItem("dark-mode", true); console.log("setting dark mode to false"); + + console.log("setting dark mode to true"); + +} + +//SWITCH TO LIGHT MODE - activateLightMode() +function lightModeProperties() { + root.setProperty("--lm-bg", "#F6F8FF"); + root.setProperty("--lm-bg-content", "#FEFEFE"); + root.setProperty("--lm-text", "#4B6A9B"); + root.setProperty("--lm-text-alt", "#2B3442"); + root.setProperty("--lm-shadow-xl", "rgba(70, 88, 109, 0.25)"); + modetext.innerText = "DARK"; + modeicon.src = "./assets/images/moon-icon.svg"; + root.setProperty("--lm-icon-bg", "brightness(100%)"); + darkMode = false; + console.log("darkmode changed to " + darkMode); + + localStorage.setItem("dark-mode", false); + console.log("setting dark mode to false"); +} + + +//INITIALISE UI +function init() { + //initialise dark-mode variable to false; + //darkMode = true -> dark mode enable karna h + //darMode = false -> light mode enable karna h + darkMode = false; + + //HW +// const prefersDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; + + const value = localStorage.getItem("dark-mode"); + + if(value === null) { + console.log("null k andar"); + localStorage.setItem("dark-mode", darkMode); + lightModeProperties(); + } + else if(value == "true") { + console.log("truer k andar"); + darkModeProperties(); + } + else if(value == "false") { + console.log("false k andar"); + lightModeProperties(); + } + + + //by default, pranaygupta ki info show krre h UI pr + getUserData(url + "Ayush-Vish"); +} + +init(); \ No newline at end of file diff --git a/DevDetectiveApp/Ayush-Vish/styles.css b/DevDetectiveApp/Ayush-Vish/styles.css new file mode 100644 index 000000000..5bb6f3a4e --- /dev/null +++ b/DevDetectiveApp/Ayush-Vish/styles.css @@ -0,0 +1,403 @@ +:root { + --lm-bg: #f6f8ff; + --lm-bg-content: #fefefe; + --lm-text: #4b6a9b; + --lm-text-alt: #2b3442; + --lm-shadow: 0px 16px 30px -10px rgba(70, 96, 187, 0.2); + --lm-shadow-inactive: 0px 16px 30px -10px rgba(0, 0, 0, 0.2); + --lm-icon-bg: brightness(100%); + /* Btn */ + --btn: #0079ff; + --btn-hover: #60abff; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Space Mono", monospace; +} + +body { + background-color: var(--lm-bg); + font-size: 13px; + color: var(--lm-text); + width: 100%; + position: relative; + height: 100vh; +} + +.container { + width: 327px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + gap: 36px; +} + +#app { + width: 100%; + display: flex; + flex-direction: column; + gap: 16px; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; +} + +#btn-mode { + display: flex; + justify-content: space-between; + align-items: center; + width: 90px; + letter-spacing: 2.5px; + color: var(--lm-text); + font-weight: bold; +} + +#btn-mode:hover { + cursor: pointer; +} + +.searchbar-container { + position: relative; + background-color: var(--lm-bg-content); + border-radius: 15px; + box-shadow: var(--lm-shadow); + display: flex; + height: 100%; + padding: 6px; + justify-content: space-between; + align-items: center; + background-image: url(./assets/images/search-icon.svg); + background-repeat: no-repeat; + background-position-x: 24px; + background-position-y: center; + background-size: 20px; +} + +#input { + border: none; + width: 80%; + outline: none; + background: none; + color: var(--lm-text); + padding-left: 50px; +} + +#input::placeholder { + color: var(--lm-text); + letter-spacing: -0.5px; + font-size: 13px; +} + +.searchbar-container img { + height: 20px; + width: 20px; + padding: 0 10px 0px 16px; +} + +.btn-search { + min-width: 84px; + padding: 12px 16px; + background-color: var(--btn); + border: none; + border-radius: 10px; + color: white; + font-size: 14px; + font-weight: bold; +} + +.btn-search:hover { + cursor: pointer; + background-color: var(--btn-hover); +} + +.btn-search:active { + transform: scale(0.975); +} + +.profile-container { + background-color: var(--lm-bg-content); + border-radius: 15px; + box-shadow: var(--lm-shadow); + padding: 24px; +} + +.profile-content { + display: flex; + flex-direction: column; + gap: 24px; + justify-content: space-evenly; +} + +.profile-header { + display: flex; + gap: 20px; + margin-bottom: 10px; +} + +#avatar { + width: 70px; + border-radius: 90px; +} + +.profile-name { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.profile-name h2 { + font-size: 16px; + font-weight: bold; + color: var(--lm-text-alt); +} + +#user { + color: var(--btn); +} + +.profile-info-wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#bio { + line-height: 25px; + opacity: 0.75; +} + +.profile-stats-wrapper { + display: flex; + justify-content: space-between; + background-color: var(--lm-bg); + text-align: center; + border-radius: 10px; + padding: 18px; +} + +.profile-stat { + display: flex; + flex-direction: column; + width: 100%; + gap: 8px; +} + +.stat-title { + font-size: 11px; +} + +.stat-value { + font-size: 16px; + font-weight: bold; + color: var(--lm-text-alt); +} + +.profile-bottom-wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 16px 0; +} + +.profile-info { + width: 50%; + display: flex; + gap: 14px; + justify-content: center; + align-items: center; +} + +.bottom-icons { + width: 20px; + filter: var(--lm-icon-bg); +} + +.profile-info p { + overflow-wrap: break-word; +} + +.profile-info a { + color: var(--lm-text); + word-break: break-all; +} + +.error { + position: absolute; + color: red; + font-weight: bold; + right: 10px; + top: -25px; +} + +.dm-text { + color: var(--dm-text); +} + +.dm-bg { + background-color: var(--dm-bg); +} + +.dm-bg-sec { + background-color: var(--dm-bg-content); +} + +.active { + box-shadow: var(--lm-shadow); +} + +/* tablet */ +@media screen and (min-width: 768px) { + .container { + width: 573px; + } + + .searchbar-container { + padding: 10px; + } + + #input { + font-size: 18px; + width: 75%; + } + + #input::placeholder { + font-size: 18px; + } + + .btn-search { + padding: 14px 28px; + font-size: 16px; + } + + #app { + gap: 24px; + } + + .profile-container { + padding: 40px; + } + + .profile-header { + margin-bottom: 0; + } + + #avatar { + width: 117px; + } + + .profile-content { + gap: 30px; + } + + .profile-info-wrapper { + justify-content: center; + } + + .profile-name h2 { + font-size: 26px; + } + + #user { + font-size: 16px; + } + + #date { + font-size: 15px; + } + + #bio { + font-size: 15px; + } + + .error { + font-size: 15px; + top: -30px; + } + + .profile-stats-wrapper { + padding: 18px 32px; + } + + .profile-stat { + text-align: start; + } + + .stat-title { + font-size: 13px; + } + + .stat-value { + font-size: 22px; + } + + .profile-bottom-wrapper { + flex-wrap: wrap; + flex-direction: row; + } + + .profile-info { + width: 47.5%; + font-size: 15px; + } +} + +/* Desktop */ +@media screen and (min-width: 1280px) { + .container { + width: 730px; + } + + .profile-container { + position: relative; + } + + .profile-content { + width: 480px; + margin-left: auto; + gap: 16px; + } + + #avatar { + position: absolute; + left: 0; + margin-left: 40px; + } + + .profile-info-wrapper { + flex-direction: row; + justify-content: space-between; + width: 100%; + } + + .profile-name { + gap: 2px; + } + + #date { + padding-top: 10px; + } + + .profile-stats-wrapper { + margin: 20px 0; + } + + .error { + top: 50%; + right: 20%; + transform: translateY(-50%); + font-size: 15px; + } + + #input { + width: 65%; + } +}