mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-05 14:00:31 +02:00
remake entire wakatime
Some checks failed
Deploy static content to Pages / deploy (push) Failing after 4s
Some checks failed
Deploy static content to Pages / deploy (push) Failing after 4s
This commit is contained in:
zyqunix
parent
28da635859
commit
de5a113001
4 changed files with 243 additions and 11 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
203
assets/js/wakatime.js
Normal file
203
assets/js/wakatime.js
Normal file
|
|
@ -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}
|
||||
<br>
|
||||
Daily Average: ${data.data.human_readable_daily_average}
|
||||
<br>
|
||||
Days Since Register: ${data.data.days_including_holidays}
|
||||
`;
|
||||
miscDetails.appendChild(el);
|
||||
|
||||
document.getElementById("stats_since").innerText = `Registered on ${data.data.start}`;
|
||||
}).catch(() => {
|
||||
target.innerHTML = `<img class="stat-img" src="https://github-readme-stats.vercel.app/api/wakatime?username=${user}&theme=transparent&hide_border=true&layout=compact">`;
|
||||
});
|
||||
}
|
||||
13
index.html
13
index.html
|
|
@ -7,12 +7,12 @@
|
|||
<title>zyq's Portfolio</title>
|
||||
<link href="assets/css/style.css" rel="stylesheet" />
|
||||
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
|
||||
<script src="https://app.rybbit.io/api/script.js" data-site-id="1005" defer ></script>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="info">
|
||||
<img
|
||||
src="https://cdn.discordapp.com/avatars/1201415921802170388/3ccc13a2825eb8c98b5371fa0706e450.webp?size=1024&width=640&height=640" alt="Profile Picture" id="profile-picture"/>
|
||||
<img src="https://cdn.discordapp.com/avatars/1201415921802170388/3ccc13a2825eb8c98b5371fa0706e450.webp?size=1024&width=640&height=640" alt="Profile Picture" id="profile-picture"/>
|
||||
<h1 class="name tooltip" data-tooltip="zyqunix / Fabio / fentboiswag / монгол">zyqunix</h1>
|
||||
<span><div class="time tooltip" id="time"></div><div class="weather" id="weather"></div></span></span>
|
||||
<div class="age tooltip" id="age"></div>
|
||||
|
|
@ -40,10 +40,7 @@
|
|||
<div class="stats cards">
|
||||
<h2 id="coding_stats">Coding Stats</h2>
|
||||
<p id="stats_since">Since January 5th, 2025</p>
|
||||
<img class="stat-img" src="https://github-readme-stats.vercel.app/api/wakatime?username=zyqunix&theme=transparent&hide_border=true&layout=compact">
|
||||
<a href="https://wakatime.com/@16d25646-eee1-4662-ae82-fd0e157942da"><img src="https://wakatime.com/badge/user/16d25646-eee1-4662-ae82-fd0e157942da.svg" alt="Total time coded since Jan 5 2025" /></a>
|
||||
<h3><a href="https://git.creations.works/zyqunix" target="_blank">Forgejo</a></h3>
|
||||
<h3><a href="https://github.com/zyqunix" target="_blank">GitHub</a></h3>
|
||||
<div id="wakapi"></div>
|
||||
</div>
|
||||
|
||||
<div class="contact cards">
|
||||
|
|
@ -135,7 +132,7 @@
|
|||
<p id="bw">❤️ Made with love by zyqunix in Germany</p>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/index.js"></script>
|
||||
<script src="assets/js/index.js" type="module"></script>
|
||||
<script src="assets/js/lang.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue