120 lines
4.9 KiB
HTML
120 lines
4.9 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.lol</title>
|
|
<link rel="stylesheet" href="./common.css">
|
|
<script>
|
|
// Check if the Media Session API is supported
|
|
if ('mediaSession' in navigator) {
|
|
// Define media session actions
|
|
navigator.mediaSession.setActionHandler('play', function() {
|
|
webamp.play();
|
|
});
|
|
|
|
navigator.mediaSession.setActionHandler('pause', function() {
|
|
webamp.stop();
|
|
});
|
|
|
|
navigator.mediaSession.setActionHandler('previoustrack', function() {
|
|
webamp.previousTrack();
|
|
});
|
|
|
|
navigator.mediaSession.setActionHandler('nexttrack', function() {
|
|
webamp.nextTrack();
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
<!-- New Disguise Dropdown -->
|
|
<li class="dropdown">
|
|
<a href="#" class="dropbtn">disguise</a>
|
|
<div class="dropdown-content">
|
|
<a href="#" data-title="prigoana.lol" 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="Home - 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>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<p style="line-height: 50px; height: 200px;"> </p>
|
|
<div id="app"></div>
|
|
<p style="line-height: 50px; height: 230px;"> </p>
|
|
<div id="lastfm-widget"></div>
|
|
<div id="widget">
|
|
<p>Last played song</p>
|
|
<span id="song"></span><br>
|
|
<div id="album-cover"></div>
|
|
</div>
|
|
</main>
|
|
<footer>
|
|
</footer>
|
|
<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>
|
|
// Existing Last.fm Fetch Script
|
|
let url = 'https://lastfm-last-played.biancarosa.com.br/yetiuard/latest-song';
|
|
let songElement = document.querySelector('#song');
|
|
let albumCoverElement = document.querySelector('#album-cover');
|
|
|
|
fetch(url)
|
|
.then(response => response.json())
|
|
.then(json => {
|
|
songElement.innerHTML = `${json.track.name} - ${json.track.artist['#text']}`;
|
|
songElement.innerHTML += `<div>${json.track.album['#text']}</div>`;
|
|
albumCoverElement.innerHTML = `<img src="${json.track.image[2]['#text']}" alt="Album Cover">`;
|
|
});
|
|
|
|
// Service Worker Registration
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('./service-worker.js')
|
|
.then(registration => {
|
|
console.log('Service Worker registered with scope:', registration.scope);
|
|
})
|
|
.catch(error => {
|
|
console.log('Service Worker registration failed:', error);
|
|
});
|
|
}
|
|
|
|
// Disguise Dropdown Functionality
|
|
document.querySelectorAll('.dropdown-content a[data-title]').forEach(function(element) {
|
|
element.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
const newTitle = this.getAttribute('data-title');
|
|
const newIcon = this.getAttribute('data-icon');
|
|
|
|
// Change the document title
|
|
document.title = newTitle;
|
|
|
|
// Change the favicon
|
|
const favicon = document.getElementById('favicon');
|
|
if (favicon) {
|
|
favicon.href = newIcon;
|
|
} else {
|
|
const link = document.createElement('link');
|
|
link.id = 'favicon';
|
|
link.rel = 'icon';
|
|
link.type = 'image/x-icon';
|
|
link.href = newIcon;
|
|
document.head.appendChild(link);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|