diff --git a/assets/css/style.css b/assets/css/style.css index e10f1fb..a1d2eb8 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -582,7 +582,7 @@ div[class="cards sitemap shadow"] > h4 { top: 50%; left: 50%; transform: translate(-50%, -50%); - background-color: var(--surface0)ee; + background-color: rgba(49, 50, 68, 0.8); width: 600px; padding: 20px; border-radius: 10px; @@ -695,8 +695,37 @@ div[class="cards sitemap shadow"] > h4 { position: fixed; left: 0; top: 0; - backdrop-filter: blur(10px); + backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: 0.3s; } + +summary { + font-size: large; + user-select: none; + cursor: pointer; +} + +details > summary { + list-style: none; +} + +details > summary::-webkit-details-marker { + display: none; +} + +details > summary::before { + content: "➤"; + display: inline-block; + margin-right: 6px; + transition: transform 0.2s ease; +} + +details[open] > summary::before { + transform: rotate(90deg); +} + +br { + margin: 4px 0; +} \ No newline at end of file diff --git a/assets/js/index.js b/assets/js/index.js index a882b2a..2653d91 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -1,3 +1,4 @@ +import * as wakatime from "./wakatime.js"; const timeElem = document.getElementById('time'); const timezone = 'Europe/Berlin'; @@ -240,6 +241,8 @@ function fetchWeather(location) { }); } +wakatime.fetchWakatime("#wakapi", "zyqunix", "all_time"); + const messages = [ "Coding", "Listening to Music", @@ -346,4 +349,4 @@ document.addEventListener("keydown", function (e) { if (e.key === "Escape") closeOverlay("music-pop", "overlay"); }); -document.getElementById('refresh').addEventListener('click', fetchSong); +document.getElementById('refresh').addEventListener('click', fetchSong); \ No newline at end of file diff --git a/assets/js/wakatime.js b/assets/js/wakatime.js new file mode 100644 index 0000000..c17a812 --- /dev/null +++ b/assets/js/wakatime.js @@ -0,0 +1,203 @@ +const langColors = { + "C++": '#8DA9C4', + CSS: '#B39DDB', + TypeScript: '#90CAF9', + TSX: '#90CAF9', + JavaScript: '#FFF59D', + JSX: '#FFF59D', + Python: '#81A1C1', + Rust: '#EBC8A9', + HTML: '#F7A17A', + JSON: '#A8A8A8', + Java: '#F0B37E', + Kotlin: '#C8A2F0', + C: '#AAAAAA', + unknown: '#888888' +}; + +const editorColors = { + vscodium: '#6C9EFF', + neovim: '#A0C4FF', + intellijidea: '#C3AED6', + notepad: '#B7D7E8', + visualstudio: '#5C9BD1', + androidstudio: '#A5D6A7' +}; + +const osColors = { + windows: '#A0C4FF', + "windows-shitc": "#A0C4FF", + arch: '#89CFF0', + macos: '#C0C0C0', + linux: '#B0D8A6', + ubuntu: '#F4A261', + fedora: '#90CAF9', + debian: '#D8BFD8' +}; + +const projectColors = [ + '#A8DADC', + '#FFD6A5', + '#FFAAA7', + '#CDB4DB', + '#B5EAEA', + '#FFE066', + '#6BCB77', + '#FF9F1C', + '#83C5BE', + '#EF476F', + '#F7CAC9', + '#FDEBD0', + '#D0F4DE', + '#E4C1F9', + '#FFF1B6', + '#A0CED9', + '#B8D8BA', + '#FFBCBC', + '#E2F0CB', + '#F5E6E8', + '#C9D6DF' +]; + +const categoryColors = { + coding: '#A8DADC', + building: '#F4A261', + debugging: '#E9C46A' +} + +export function fetchWakatime(targetId, user, range) { + const target = document.querySelector(`${targetId}`); + target.innerHTML = ""; + fetch(`https://wakapi.atums.world/api/v1/users/${user}/stats/${range}`).then(response => response.json()).then(data => { + + const langDetails = document.createElement("details"); + const langSummary = document.createElement("summary"); + langSummary.innerText = "Languages"; + langSummary.classList.add("tooltip"); + langSummary.setAttribute("data-tooltip", "Most Used Languages"); + langDetails.appendChild(langSummary); + langDetails.style.marginTop = "15px"; + target.appendChild(langDetails); + + const topLangs = data.data.languages.slice(0, 10); + topLangs.forEach(lang => { + const el = document.createElement("div"); + el.innerText = `${lang.name}: ${lang.text}`; + el.id = lang.name.toLowerCase(); + el.classList.add("proglang"); + el.style.margin = "5px"; + el.style.padding = "10px"; + el.style.borderRadius = "5px"; + el.style.backgroundColor = langColors[lang.name]; + el.style.color = "var(--base)"; + langDetails.appendChild(el); + }); + + const edDetails = document.createElement("details"); + const edSummary = document.createElement("summary"); + edSummary.innerText = "Editors"; + edSummary.classList.add("tooltip"); + edSummary.setAttribute("data-tooltip", "Most Used Editors"); + edDetails.appendChild(edSummary); + edDetails.style.marginTop = "15px"; + target.appendChild(edDetails); + + const topEditors = data.data.editors.slice(0, 5); + topEditors.forEach(editor => { + const el = document.createElement("div"); + el.innerText = `In ${editor.name} for ${editor.text} (${editor.percent}%)`; + el.style.margin = "5px"; + el.style.padding = "10px"; + el.style.borderRadius = "5px"; + el.style.color = "var(--base)"; + el.style.backgroundColor = editorColors[editor.name.toLowerCase().replace(/\s+/g, '').replace(/[^a-zA-Z]/g, '')]; + edDetails.appendChild(el); + }); + + const prDetails = document.createElement("details"); + const prSummary = document.createElement("summary"); + prSummary.innerText = "Projects"; + prSummary.classList.add("tooltip"); + prSummary.setAttribute("data-tooltip", "Most Used Projects"); + prDetails.appendChild(prSummary); + prDetails.style.marginTop = "15px"; + target.appendChild(prDetails); + + const topProjects = data.data.projects.slice(0, 10); + topProjects.forEach(project => { + const el = document.createElement("div"); + el.innerText = `Coded ${project.name} for ${project.text}`; + el.style.margin = "5px"; + el.style.padding = "10px"; + el.style.borderRadius = "5px"; + el.style.color = "var(--base)"; + el.style.backgroundColor = projectColors[Math.floor(Math.random() * projectColors.length)]; + prDetails.appendChild(el); + }); + + const osDetails = document.createElement("details"); + const osSummary = document.createElement("summary"); + osSummary.innerText = "Operating Systems"; + osSummary.classList.add("tooltip"); + osSummary.setAttribute("data-tooltip", "Most Used Operating Systems"); + osDetails.appendChild(osSummary); + osDetails.style.marginTop = "15px"; + target.appendChild(osDetails); + + const topOS = data.data.operating_systems; + topOS.forEach(machine => { + const el = document.createElement('div'); + el.innerText = `Coded on ${machine.name} for ${machine.text}`; + el.style.margin = "5px"; + el.style.padding = "10px"; + el.style.borderRadius = "5px"; + el.style.color = "var(--base)"; + el.style.backgroundColor = osColors[machine.name.toLowerCase()]; + osDetails.appendChild(el); + }); + + const caDetails = document.createElement("details"); + const caSummary = document.createElement("summary"); + caSummary.innerText = "Categories"; + caSummary.classList.add("tooltip"); + caSummary.setAttribute("data-tooltip", "Time Spent by Category"); + caDetails.appendChild(caSummary); + caDetails.style.marginTop = "15px"; + target.appendChild(caDetails); + + const categories = data.data.categories; + categories.forEach(category => { + const el = document.createElement('div'); + el.style.margin = "5px"; + el.style.padding = "10px"; + el.style.borderRadius = "5px"; + el.style.color = "var(--base)"; + el.style.backgroundColor = categoryColors[category.name.toLowerCase()]; + el.innerText = `Has done ${category.name} for ${category.text}`; + caDetails.appendChild(el); + }); + + const miscDetails = document.createElement("details"); + const miscSummary = document.createElement("summary"); + miscSummary.innerText = "Miscellaneous"; + miscSummary.classList.add("tooltip"); + miscSummary.setAttribute("data-tooltip", "Miscellaneous Coding Info"); + miscDetails.appendChild(miscSummary); + miscDetails.style.marginTop = "15px"; + target.appendChild(miscDetails); + + const el = document.createElement("div"); + el.innerHTML = ` + Total Coding Time: ${data.data.human_readable_total} +
+ Daily Average: ${data.data.human_readable_daily_average} +
+ Days Since Register: ${data.data.days_including_holidays} + `; + miscDetails.appendChild(el); + + document.getElementById("stats_since").innerText = `Registered on ${data.data.start}`; + }).catch(() => { + target.innerHTML = ``; + }); +} diff --git a/index.html b/index.html index a83e90a..1349f5f 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,12 @@ zyq's Portfolio - + +
- Profile Picture + Profile Picture

zyqunix
@@ -40,10 +40,7 @@

Coding Stats

Since January 5th, 2025

- - Total time coded since Jan 5 2025 -

Forgejo

-

GitHub

+
@@ -135,7 +132,7 @@

❤️ Made with love by zyqunix in Germany

- +