diff --git a/assets/css/style.css b/assets/css/style.css index 140ced9..0eb12cf 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -770,3 +770,19 @@ br { #review-person:hover { text-decoration: underline; } + +#badges { + display: flex; + padding: 3px; + background-color: var(--surface0); + border: 2px solid var(--surface1); + align-items: center; + justify-content: center; + gap: 3px; + border-radius: 8px; + margin-bottom: 10px; +} + +#badges > img { + border-radius: 50%; +} diff --git a/assets/js/badgesapi.js b/assets/js/badgesapi.js new file mode 100644 index 0000000..36a6f9f --- /dev/null +++ b/assets/js/badgesapi.js @@ -0,0 +1,29 @@ +import { user } from "./index.js"; +const apiUrl = "https://badges.atums.world"; + + +export async function getBadges(user) { + const response = await fetch(`${apiUrl}/${user}`); + if (!response.ok) throw new Error(`Error fetching reviews: ${response.status} ${response.statusText}`); + const data = await response.json(); + return data; +} + +export async function populateBadges(element) { + const target = document.querySelector(element); + const data = await getBadges(user); + + target.innerHTML = ""; + + data.badges.forEach(badge => { + const badgeEl = document.createElement("div"); + const badgeImg = document.createElement("img"); + badgeImg.src = badge.badge; + badgeEl.classList.add("tooltip"); + badgeEl.setAttribute("data-tooltip", badge.tooltip); + badgeImg.style.width = "32px"; + + badgeEl.appendChild(badgeImg); + target.appendChild(badgeEl); + }) +} diff --git a/assets/js/index.js b/assets/js/index.js index af43ccc..707d791 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -1,10 +1,12 @@ import * as wakatime from "./wakatime.js"; import * as github from "./github.js"; import * as reviewdb from "./reviewdb.js"; +import * as badgeapi from "./badgesapi.js"; + const timeElem = document.getElementById('time'); const timezone = 'Europe/Berlin'; -timeElem.setAttribute('data-tooltip', timezone); +export const user = "1201415921802170388"; function getTime(timezone) { const now = new Date(); @@ -85,7 +87,6 @@ setInterval(() => { ageElem.setAttribute("data-tooltip", updateAge(null, 10, "years old")); }, 10); -const user = "1201415921802170388"; function lan() { lanyard({userId: user}).then(data => { @@ -289,6 +290,7 @@ function fetchWeather(location) { wakatime.fetchWakatime("#wakapi"); github.writeGithubStats("#github-full"); reviewdb.writeReviews("#reviews"); +badgeapi.populateBadges("#badges"); const messages = [ "Coding", diff --git a/index.html b/index.html index 89ae213..e4a1e63 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,8 @@
Profile Picture

zyqunix

-
+
Badges
+
Coding, Listening to Music, Reverse Engineering, Playing Counter-Strike