332 lines
10 KiB
HTML
332 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link id="favicon" rel="icon" type="image/x-icon" href="./favicon.png">
|
|
<link rel="manifest" href="./manifest.json">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>prigoana.com</title>
|
|
<link rel="stylesheet" href="./common.css">
|
|
<script>
|
|
if ('mediaSession' in navigator) {
|
|
const actions = {
|
|
play: () => webamp.play(),
|
|
pause: () => webamp.stop(),
|
|
previoustrack: () => webamp.previousTrack(),
|
|
nexttrack: () => webamp.nextTrack()
|
|
};
|
|
Object.entries(actions).forEach(([action, handler]) =>
|
|
navigator.mediaSession.setActionHandler(action, handler)
|
|
);
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background-color: #000;
|
|
}
|
|
* {
|
|
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
|
|
}
|
|
#background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
filter: blur(10px);
|
|
z-index: -1;
|
|
transition: background-image 1s ease-in-out;
|
|
}
|
|
|
|
#album-cover {
|
|
display: none; /* Hide the album cover element */
|
|
}
|
|
|
|
#album-cover img.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
#song {
|
|
opacity: 0;
|
|
transition: opacity 1s ease-in-out;
|
|
}
|
|
|
|
#song.updated {
|
|
opacity: 1;
|
|
}
|
|
|
|
#lastfm-widget, #widget {
|
|
padding: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.navbar {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
list-style: none;
|
|
padding: 10px;
|
|
margin: 0;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.navbar li {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #000000;
|
|
min-width: 160px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
|
z-index: 1;
|
|
}
|
|
|
|
.dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-content a {
|
|
color: rgb(255, 255, 255);
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-content a:hover {
|
|
background-color: #4c4a4a;
|
|
}
|
|
|
|
#settings-modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.8); /* Dark background */
|
|
}
|
|
|
|
#modal-content {
|
|
background-color: #201f1f; /* Dark theme for modal */
|
|
padding: 20px;
|
|
margin: 15% auto;
|
|
width: 300px;
|
|
border-radius: 5px;
|
|
color: white;
|
|
}
|
|
|
|
#modal-content input {
|
|
width: 94%;
|
|
padding: 8px;
|
|
margin: 10px 0;
|
|
border: 1px solid #444;
|
|
background-color: #222;
|
|
color: white;
|
|
}
|
|
|
|
#modal-content button {
|
|
padding: 10px 15px;
|
|
border: none;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
background-color: #2e2e2e;
|
|
color: aliceblue;
|
|
}
|
|
|
|
#modal-content button:hover {
|
|
background-color: #9a9393;
|
|
}
|
|
|
|
#gear-icon {
|
|
display: none;
|
|
}
|
|
|
|
/* Responsive Navbar for small screens */
|
|
@media (max-width: 600px) {
|
|
.navbar {
|
|
flex-wrap: wrap; /* Enable wrapping */
|
|
justify-content: center; /* Center items */
|
|
}
|
|
|
|
.navbar li {
|
|
margin-bottom: 10px; /* Add spacing between items when wrapped */
|
|
}
|
|
}a {
|
|
text-decoration: underline;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="background"></div>
|
|
<header>
|
|
<div class="terminal">
|
|
<ul class="navbar">
|
|
<li><a href="./projects">projects</a></li>
|
|
<li><a href="./about">about</a></li>
|
|
<li><a href="./guides">guides</a></li>
|
|
<li><a href="./media">media</a></li>
|
|
<li class="dropdown">
|
|
<a href="#">disguise</a>
|
|
<div class="dropdown-content">
|
|
<a href="#" data-title="prigoana.com" data-icon="./favicon.png">Base</a>
|
|
<a href="#" data-title="Home" data-icon="https://www.gstatic.com/classroom/ic_product_classroom_144.png">Classroom</a>
|
|
<a href="#" data-title="Google Drive" data-icon="https://ssl.gstatic.com/docs/doclist/images/drive_2022q3_32dp.png">Drive</a>
|
|
<a href="#" data-title="Google Docs" data-icon="https://ssl.gstatic.com/docs/documents/images/kix-favicon-2023q4.ico">Docs</a>
|
|
</div>
|
|
</li>
|
|
<li><a href="#" onclick="openSettingsModal()">settings</a></li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="settings-modal">
|
|
<div id="modal-content"><center>
|
|
<h3>Update Last.fm Username</h3></center>
|
|
<input type="text" id="username-input" placeholder="Enter your Last.fm username" value="">
|
|
<button onclick="updateUsername()">Update</button>
|
|
<button onclick="closeSettingsModal()">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<p style="height: 200px;"></p>
|
|
<div id="app"></div><p style="height: 160px;"></p>
|
|
<div id="lastfm-widget"></div>
|
|
<div id="widget">
|
|
<p>Last played song</p>
|
|
<span id="song"></span><br>
|
|
<div id="album-cover"></div>
|
|
<p>You're visitor #<span id="visitorCount">0</span></p>
|
|
</div>
|
|
<script src="https://unpkg.com/webamp/built/webamp.bundle.min.js"></script>
|
|
<script src="https://unpkg.com/butterchurn/lib/butterchurn.min.js"></script>
|
|
<script src="https://unpkg.com/butterchurn-presets/lib/butterchurnPresets.min.js"></script>
|
|
<script src="./index.js"></script>
|
|
<script>
|
|
let username = localStorage.getItem('lastfmUsername') || 'eduardprigoana';
|
|
const url = `https://lastplayed.prigoana.com/${username}/`;
|
|
const songElement = document.querySelector('#song');
|
|
const albumCoverElement = document.querySelector('#album-cover');
|
|
const backgroundElement = document.getElementById('background');
|
|
const placeholderImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
|
|
let previousAlbumImage = "";
|
|
|
|
function updateSongDisplay(track) {
|
|
const { name, artist, album, image, url } = track;
|
|
songElement.classList.remove('updated');
|
|
|
|
// Create an anchor element with the trxack URL
|
|
const songLink = document.createElement('a');
|
|
songLink.href = url;
|
|
songLink.target = '_blank'; // Opens in a new tab
|
|
songLink.innerHTML = `${name} <br> ${artist['#text']}<div>${album['#text']}</div>`;
|
|
|
|
// Replace the current song element content with the anchor link
|
|
songElement.innerHTML = ''; // Clear previous content
|
|
songElement.appendChild(songLink); // Add the new clickable song link
|
|
|
|
setTimeout(() => songElement.classList.add('updated'), 50);
|
|
|
|
let albumImage = image[2]['#text'] || placeholderImage;
|
|
if (albumImage === 'https://lastfm.freetls.fastly.net/i/u/174s/2a96cbd8b46e442fc41c2b86b821562f.png') {
|
|
albumImage = placeholderImage;
|
|
}
|
|
|
|
if (albumImage !== previousAlbumImage) {
|
|
const currentImage = albumCoverElement.querySelector('img');
|
|
if (currentImage) currentImage.classList.remove('visible');
|
|
albumCoverElement.innerHTML = `<img src="${albumImage}" alt="Album Cover">`;
|
|
const newImage = albumCoverElement.querySelector('img');
|
|
newImage.onload = () => newImage.classList.add('visible');
|
|
backgroundElement.style.backgroundImage = `url(${albumImage})`;
|
|
previousAlbumImage = albumImage;
|
|
} else {
|
|
backgroundElement.style.backgroundImage = `url(${albumImage})`;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
async function fetchLastPlayedSong() {
|
|
try {
|
|
const response = await fetch(url);
|
|
const { track } = await response.json();
|
|
if (!window.lastPlayedSong || track.name !== window.lastPlayedSong.name) {
|
|
window.lastPlayedSong = track;
|
|
updateSongDisplay(track);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching LastFM data:', error);
|
|
}
|
|
}
|
|
|
|
fetchLastPlayedSong();
|
|
setInterval(fetchLastPlayedSong, 1000);
|
|
|
|
function openSettingsModal() {
|
|
document.getElementById('settings-modal').style.display = 'block';
|
|
}
|
|
|
|
function closeSettingsModal() {
|
|
document.getElementById('settings-modal').style.display = 'none';
|
|
}
|
|
|
|
function updateUsername() {
|
|
const newUsername = document.getElementById('username-input').value;
|
|
if (newUsername && newUsername !== username) {
|
|
username = newUsername;
|
|
localStorage.setItem('lastfmUsername', username);
|
|
window.location.reload();
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('.dropdown-content a[data-title]').forEach(element => {
|
|
element.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
const newTitle = element.getAttribute('data-title');
|
|
const newIcon = element.getAttribute('data-icon');
|
|
document.title = newTitle;
|
|
document.getElementById('favicon').href = newIcon;
|
|
});
|
|
});
|
|
// Function to fetch the visitor count from the API
|
|
async function fetchVisitorCount() {
|
|
try {
|
|
// Make an API request
|
|
const response = await fetch('https://count.prigoana.com/prigoana.com/');
|
|
|
|
// If the response is successful, parse the response as text
|
|
if (response.ok) {
|
|
const visitorNumber = await response.text();
|
|
// Display the visitor count in the span element with id 'visitorCount'
|
|
document.getElementById('visitorCount').innerText = visitorNumber;
|
|
} else {
|
|
// If the request failed, show an error message
|
|
document.getElementById('visitorCount').innerText = '0';
|
|
}
|
|
} catch (error) {
|
|
// Handle any network or other errors
|
|
console.error('Error fetching visitor count:', error);
|
|
document.getElementById('visitorCount').innerText = '0';
|
|
}
|
|
}
|
|
|
|
// Call the function to fetch the visitor count when the page loads
|
|
fetchVisitorCount();
|
|
</script>
|
|
</body>
|
|
</html>
|