aidan/aidxnFUN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

initial commit

Browse Source
This commit is contained in:
lou 2024-10-12 19:16:51 -04:00
parent c6d6875c31
commit 03095e1aba
19 changed files with 361 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/css/base.css Normal file
View File

@ -0,0 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.glow {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

BIN
src/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
src/img/os/arch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/img/os/debian.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/img/os/gentoo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/img/os/mint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/img/os/opensuse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/img/os/oracle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
src/img/os/ubuntu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/img/os/void.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/img/os/windows-server.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

25
src/js/main.js Normal file
View File

@ -0,0 +1,25 @@
document.addEventListener('DOMContentLoaded', () => {
const notificationBanner = document.getElementById('notification-banner');
const dismissButton = document.getElementById('dismiss-btn');
if (localStorage.getItem('notificationDismissed')) {
notificationBanner.style.display = 'none';
}
dismissButton.addEventListener('click', () => {
notificationBanner.style.display = 'none';
localStorage.setItem('notificationDismissed', 'true');
});
});
const openMenuBtn = document.getElementById('open-menu-btn');
const closeMenuBtn = document.getElementById('close-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
openMenuBtn.addEventListener('click', () => {
mobileMenu.style.display = 'block';
});
closeMenuBtn.addEventListener('click', () => {
mobileMenu.style.display = 'none';
});

41
src/js/music.js Normal file
View File

@ -0,0 +1,41 @@
const albumlabel = document.getElementById("albumlabel");
const albumart = document.getElementById("album-art");
const song = document.getElementById("song");
const artist = document.getElementById("artist");
const album = document.getElementById("album");
const loader = document.getElementById("loader");
const musicContent = document.getElementById("music-content");
async function getLatestSong() {
const api = "https://lastfm-last-played.biancarosa.com.br/aidxn_/latest-song";
try {
const lsResponse = await fetch(api);
if (lsResponse.ok) {
const latestSongJSON = await lsResponse.json();
if (!latestSongJSON.track["@attr"]) {
albumlabel.textContent = "Last Listen:";
} else if (latestSongJSON.track["@attr"].nowplaying) {
albumlabel.textContent = "Now Playing:";
} else {
console.warn("[WARN] Invalid now playing status.");
albumlabel.textContent = "Last Listen:";
}
albumart.src = latestSongJSON.track.image[1]["#text"] || "/img/placeholder.png";
song.textContent = latestSongJSON.track.name;
artist.textContent = latestSongJSON.track.artist["#text"];
album.textContent = latestSongJSON.track.album["#text"];
loader.classList.add("hidden");
musicContent.classList.remove("hidden");
} else {
console.error(`Error: ${lsResponse.status}`);
}
} catch (error) {
console.error(`Error: ${error.message}`);
}
}
(async function() {
await getLatestSong();
})();

72
views/about.ejs Normal file
View File

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aidxn.fun | about</title>
<link href="/css/main.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-slate-900 to-black text-white">
<%- include('shards/header.ejs', { req: req }) %>
<header class="flex flex-col items-center justify-center h-[40vh] p-6">
<h1 class="text-5xl font-bold mb-2 text-center">About Me</h1>
<p class="text-lg text-gray-300 max-w-xl text-center mt-3">
Looking to learn more?
</p>
</header>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<h3 class="text-2xl font-bold mb-4 text-white">What you're looking for</h3>
<p class="text-slate-300 mb-4">Heyo! I'm Aidan, and I'm a human being, like you. I'm a Wikipedia editor, hobbyist programmer (Python, Node.js and PHP) and student. I am a troubled teen industry survivor and I also <i>love</i> music! I love walking (pretty much anywhere), particularly Boston and some Mass suburbs. I'm a cryptocurrency user and love it way more than credit cards/cash. However, I am strongly opposed to the adoption of Web3 technology.</p>
<p class="text-slate-300 mb-4">I strive, as a person, to understand my peers in life. I consider myself to be extremely understanding and accepting, albeit nobody is perfect, and I still hold my biases.</p>
<p class="text-slate-300 mb-4">Thus, I've tried to do about almost everything and learn about almost everything to get a better understanding of the world around me. I love to debate, talk and learn about other people's views, while keeping it judgement-free. I believe this has helped me find more diverse relationships.</p>
<p class="text-slate-300 mb-4">In politics, I'm a strong Democrat and a supporter of the <a class="underline" href="https://uspirates.org">Pirate Party</a>. I hope, by the time I die, that everyone may have fair human rights, open source is standard and the troubled teen industry is torn down or rebuilt into a truly healing environment. Also, let's try our best not to let AI take over too fast, eh?</p>
<p class="text-slate-300 mb-4">If you want, you can check out my LastFM profile <a class="underline" href="https://last.fm/user/aidxn_">here</a>. If you don't already know what LastFM is, you can see more about my music taste there. It's where the sidebar fetches now playing stats from, too!</p>
<h3 class="text-2xl font-bold mt-6 mb-4 text-white">Technology</h3>
<p class="text-slate-300 mb-4">I have a lot of experience with varying types of technologies. From servers to old XP machines, I've tried it all. I currently administer two Linux servers, both running Ubuntu.</p>
<h3 class="text-2xl font-bold mt-6 mb-4 text-white">Linux Distro Experience</h3>
<ul class="space-y-3">
<li class="flex items-center">
<img src="img/os/ubuntu.png" alt="Ubuntu logo" class="h-8 w-8 mr-3"><span class="text-slate-300"> Ubuntu 18.04, 20.04, 22.04, 24.04 (includes server versions of each)</span>
</li>
<li class="flex items-center">
<img src="img/os/windows-server.png" alt="Windows Server logo" class="h-8 w-8 mr-3"><span class="text-slate-300"> Windows Server 2012 R2, 2016, 2019, 2022</span>
</li>
<li class="flex items-center">
<img src="img/os/debian.png" alt="Debian logo" class="h-8 w-8 mr-3"><span class="text-slate-300"> Debian 9</span>
</li>
<li class="flex items-center">
<img src="img/os/arch.png" alt="Arch Linux logo" class="h-8 w-8 mr-3"><span class="text-slate-300"> Arch Linux</span>
</li>
<li class="flex items-center">
<img src="img/os/void.png" alt="Void Linux logo" class="h-8 w-8 mr-3"><span class="text-slate-300"> Void Linux</span>
</li>
<li class="flex items-center">
<img src="img/os/gentoo.png" alt="Gentoo logo" class="h-8 w-8 mr-3"><span class="text-slate-300"> Gentoo Linux</span>
</li>
<li class="flex items-center">
<img src="img/os/mint.png" alt="Linux Mint logo" class="h-8 w-8 mr-3"><span class="text-slate-300"> Linux Mint</span>
</li>
<li class="flex items-center">
<img src="img/os/opensuse.png" alt="OpenSUSE logo" class="h-8 w-8 mr-3"><span class="text-slate-300"> OpenSUSE</span>
</li>
<li class="flex items-center">
<img src="img/os/oracle.png" alt="Oracle logo" class="h-8 w-8 mr-3"><span class="text-slate-300"> Oracle Linux 8</span>
</li>
</ul>
<h3 class="text-2xl font-bold mt-6 mb-4 text-white">Cloud</h3>
<p class="text-slate-300 mb-4">I also work a <i>LOT</i> in the cloud, but not the type you might be thinking about. I almost have an obsession with enterprise cloud computing. Hell, you're actually connected to one... right now! Here are some of my favorite platforms, ranked.</p>
<p class="text-slate-300 mb-4">This section is a work in progress, for those who don't know cloud computing. I'm working to make the wording clearer, so the non-technical folk can still understand everything here!</p>
<ol class="list-decimal list-inside space-y-3">
<li class="text-slate-300">Oracle Cloud</li>
<li class="text-slate-300">Azure</li>
<li class="text-slate-300">AWS</li>
</ol>
<p class="text-slate-300 mt-4">You can learn more about my opinions on cloud platforms <a class="underline" href="/cloud">on this page</a>.</p>
</div>
<script src="js/main.js"></script>
<%- include('shards/footer.ejs') %>

46
views/contact.ejs Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aidxn.fun | Contact</title>
<link href="/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="bg-gradient-to-br from-slate-900 to-black text-white">
<%- include('shards/header.ejs', { req: req }) %>
<header class="flex flex-col items-center justify-center h-[40vh] p-6">
<h1 class="text-5xl font-bold mb-2 text-center">Contact</h1>
<p class="text-lg text-gray-300 max-w-xl text-center mt-3">Looking to contact me? You found it!</p>
</header>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<h3 class="text-2xl font-bold mb-4 text-white">Contact Details</h3>
<p class="text-slate-300 mb-4">This one can be a hard one for most people, as I'm not a fan of modern social media, albeit I give in here and there.</p>
<p class="text-slate-300 mb-4">Now, the part you came for!</p>
<p class="text-slate-300 mb-4">If you're looking for my email, simply replace the brackets with the character it's referencing, like so: test[at]test[dot]com becomes test@test.com</p>
<p class="text-slate-300 mb-6">This is in order to prevent bots from contacting me.</p>
<ul class="space-y-4">
<li class="flex items-center">
<i class="fas fa-envelope text-pink-500 mr-2"></i>
<b>Email:</b> <span class="text-slate-300 ml-1">imlou[at]disroot[dot]org (PGP encryption preferred)</span>
</li>
<li class="flex items-center">
<i class="fas fa-comments text-green-400 mr-2"></i>
<b>Signal:</b> <span class="text-slate-300 ml-1">[at]iusearchbtw.17</span>
</li>
<li class="flex items-center">
<i class="fab fa-telegram-plane text-blue-400 mr-2"></i>
<b>Telegram:</b> <span class="text-slate-300 ml-1">[at]iusearchbtw42</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt text-yellow-400 mr-2"></i>
<b>Phone:</b> <span class="text-slate-300 ml-1">Not given out to untrusted people. Contact elsewhere<i class="ml-1">first!</i></span>
</li>
</ul>
</div>
<script src="js/main.js"></script>
<%- include('shards/footer.ejs') %>

50
views/index.ejs Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aidxn.fun</title>
<link href="/css/main.css" rel="stylesheet">
</head>
<body class="bg-[#111827] text-slate-300">
<%- include('shards/header.ejs', { req: req }) %>
<div class="relative isolate px-6 pt-13 lg:px-8">
<div class="mx-auto py-32 sm:py-48 lg:py-56">
<div class="text-center">
<h1 class="text-balance text-4xl font-bold tracking-tight text-slate-200 sm:text-6xl mb-2">Welcome to aidxnFUN</h1>
<p class="mt-6 text-lg leading-8 text-slate-200">Welcome to my slice of the web... It's good to see you</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<h1 class="text-4xl font-bold mb-4 text-white">Welcome!</h1>
<p class="text-slate-300">My name is Aidan, but if you are on <a class="underline" href="https://tilde.club">tilde.club</a>, you will know me as <a class="underline" href="https://tilde.club/~lxu">~lxu</a>! I'm a technology enthusiast, and a Wikipedia editor, among other things.</p>
<p class="text-slate-300 mt-3">Here, you can learn more about me, enjoy a sleek design, and even have some fun along the way!</p>
<p class="text-slate-300 mt-3">This website is currently hosted in Frankfurt, Germany. Page load speeds may be impacted, however my website's data is hosted under stricter data protection laws. I'm not a millionaire, and thus helps me save money on hosting, and serve a wider range of countries with better speeds.</p>
<p class="text-slate-300 mt-3">The content and code of this website is hereby released under the public domain. You are free to use this servers content for whatever you please, and you can additionally view this website's source code on GitHub <a class="underline" href="https://github.com/ihatenodejs/aidxnFUN/">here</a>.</p>
</div>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<h1 class="text-4xl font-bold mb-4 text-white">Where to start</h1>
<p class="text-slate-300">This website has a lot of content, albeit spread apart. If you're interested in learning about me as a person, I'd obviously suggest <a class="underline" href="/about">my about page</a>.</p>
<p class="text-slate-300 mt-3">If you merely need to contact me, check out the <a class="underline" href="/contact">contact page</a> on the sidebar (or you could click that link).</p>
<p class="text-slate-300 mt-3">This website is always a work in progress, and not every page is going to be finished, however I aim for every page to be functional and relevant. Content is always being added, as I progress through my life. Why not start early?</p>
</div>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<h1 class="text-4xl font-bold mb-4 text-white">About the design</h1>
<p class="text-slate-300">With this revision, I was aiming to provide a modern design, with an easy-to-navigate interface.</p>
<p class="text-slate-300 mt-3">For this design, I chose Tailwind CSS. I appreciate their flexibility, though their documentation is terrible on purpose. They encourage purchasing their components subscription (which costs a lot of money!) all over the place. It has been a poor experience, but I have been able to figure it out with the help of their free elements, documentation, prior knowledge, and the docs.</p>
<p class="text-slate-300 mt-3">This code is also under Public Domain, and can be found <a class="underline" href="https://github.com/ihatenodejs/aidxnFUN">here</a>. Feel free to use the code and content how you wish. If you would like to respect my best wishes, please do not use this content or code for AI. Thanks, if you respect me! :]</p>
</div>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<h1 class="text-4xl font-bold mb-4 text-white">Music</h1>
<%- include('shards/music.ejs') %>
<h1 class="text-3xl text-white py-3.5">My Music Taste</h1>
<p class="text-slate-300">I am mainly into hip hop and rap, but I appreciate a slower song, as opposed to the fast nature of some rap songs. I feel like I seek songs that match my current energy level, and I can tend to have a low energy level during the day.</p>
<p class="text-slate-300 mt-3">Some of my favorite artists include tobi lou, Skizzy Mars, and Kali Uchis. Some of my classics are Mike Stud (before his name change to "mike."), Skizzy Mars, tobi lou, The Neighbourhood, and Ryan Caraveo.</p>
</div>
</div>
<script src="js/main.js"></script>
<script src="js/music.js"></script>
<%- include('shards/footer.ejs') %>

21
views/shards/footer.ejs Normal file
View File

@ -0,0 +1,21 @@
<footer class="rounded-lg border border-gray-300/50 backdrop-blur-md shadow-lg glow m-4">
<div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-200">Content and code released under public domain</span>
<ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-200 sm:mt-0">
<li>
<a href="/" class="hover:underline me-4 md:me-6">Home</a>
</li>
<li>
<a href="/about" class="hover:underline me-4 md:me-6">About</a>
</li>
<li>
<a href="/privacy" class="hover:underline me-4 md:me-6">Privacy Policy</a>
</li>
<li>
<a href="/contact" class="hover:underline">Contact</a>
</li>
</ul>
</div>
</footer>
</body>
</html>

78
views/shards/header.ejs Normal file
View File

@ -0,0 +1,78 @@
<div id="notification-banner" class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-800/50 backdrop-blur-md px-6 py-2.5 rounded-lg shadow-lg">
<div class="absolute left-0 top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl">
<div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
</div>
<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
<p class="text-sm leading-6 text-gray-100">
<strong class="font-semibold">old.aidxn.fun</strong>
<svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true">
<circle cx="1" cy="1" r="1" />
</svg>
Do you prefer a retro design? Check out old.aidxn.fun!
</p>
<a href="https://old.aidxn.fun" class="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900">Go retro <span aria-hidden="true">&rarr;</span></a>
</div>
<div class="flex flex-1 justify-end">
<button type="button" id="dismiss-btn" class="-m-3 p-3 focus-visible:outline-offset-[-4px]">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5 text-gray-100" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
</button>
</div>
</div>
<header>
<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
<div class="flex lg:flex-1">
<a href="/" class="-m-1.5 p-1.5">
<span class="sr-only">aidxnFUN</span>
<img class="h-8 w-auto" src="/img/logo.png" alt="">
</a>
</div>
<div class="flex lg:hidden">
<button type="button" id="open-menu-btn" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="/" class="text-sm font-semibold leading-6 text-slate-200">Home</a>
<a href="/about" class="text-sm font-semibold leading-6 text-slate-200">About</a>
<a href="/contact" class="text-sm font-semibold leading-6 text-slate-200">Contact</a>
<a href="/verify" class="text-sm font-semibold leading-6 text-slate-200">Verify Message</a>
<a href="/status" class="text-sm font-semibold leading-6 text-slate-200">Status</a>
<a href="/projects" class="text-sm font-semibold leading-6 text-slate-200">Projects</a>
</div>
</nav>
<div class="lg:hidden" role="dialog" aria-modal="true" id="mobile-menu" style="display: none;">
<div class="fixed inset-0 z-10 bg-gray-800 bg-opacity-80"></div>
<div class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between">
<a href="/" class="-m-1.5 p-1.5">
<span class="sr-only">aidxnFUN</span>
<img class="h-8 w-auto" src="/img/logo.png" alt="">
</a>
<button type="button" id="close-menu-btn" class="-m-2.5 rounded-md p-2.5 text-slate-200">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<div class="space-y-2 py-6">
<a href="/" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Home</a>
<a href="/about" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">About</a>
<a href="/contact" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Contact</a>
<a href="/verify" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Verify Message</a>
<a href="/status" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Status</a>
<a href="/projects" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Projects</a>
</div>
</div>
</div>
</div>
</div>
</header>

21
views/shards/music.ejs Normal file
View File

@ -0,0 +1,21 @@
<div>
<h1 id="albumlabel" class="text-3xl text-white mb-3"></h1>
<div id="music-widget" class="relative w-72 p-4 rounded-lg border border-gray-300/50
backdrop-blur-md bg-white/10 shadow-lg transition-all">
<div id="loader" class="flex justify-center items-center h-24">
<div class="w-6 h-6 border-4 border-t-transparent border-gray-300 rounded-full animate-spin"></div>
</div>
<div id="music-content" class="hidden space-y-2">
<div class="flex items-center space-x-3">
<img id="album-art" src="" alt="Album Art"
class="w-16 h-16 rounded-md object-cover border border-gray-400/20" />
<div class="flex flex-col overflow-hidden">
<h2 id="song" class="text-lg font-semibold text-white truncate">Loading</h2>
<p id="artist" class="text-sm text-gray-300 truncate">Loading</p>
<p id="album" class="text-xs text-gray-400 italic truncate">Loading</p>
</div>
</div>
</div>
</div>
</div>