EduardPrigoana/prigoana.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

eyhrearhyrgrw

Browse source
This commit is contained in:
EduardSkibidiEdger 2024-12-01 22:54:08 +02:00
parent 630e63588e
commit 260e9f8b1f
1 changed files with 120 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

171
index.html
View file

@ -21,8 +21,6 @@
}
</script>
<style>
body {
margin: 0;
padding: 0;
@ -45,31 +43,113 @@
z-index: -1;
transition: background-image 1s ease-in-out;
}
#album-cover {
display: none; /* Hide the album cover element */
}
#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;
}
#gear-icon {
.navbar {
display: flex;
list-style: none;
padding: 10px;
margin: 0;
}
.navbar li {
margin-right: 20px;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 20px;
right: 20px;
width: 30px;
height: 30px;
cursor: url(./link.cur), auto;
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: black;
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: 97%;
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; /* Removed gear icon */
}
</style>
</head>
@ -83,7 +163,7 @@
<li><a href="./guides">guides</a></li>
<li><a href="./media">media</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">disguise</a>
<a href="#">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>
@ -91,25 +171,28 @@
<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>
<svg id="gear-icon" onclick="openUsernamePrompt()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="10" dy="10" stdDeviation="15" flood-color="black"/>
</filter>
</defs>
<path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" filter="url(#drop-shadow)"/>
</svg><p style="height: 210px;"></p>
<div id="app"></div><p style="height: 190px;"></p>
<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>
</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>
@ -122,7 +205,7 @@
const backgroundElement = document.getElementById('background');
const placeholderImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=";
let previousAlbumImage = "";
function updateSongDisplay(track) {
const { name, artist, album, image } = track;
songElement.classList.remove('updated');
@ -145,7 +228,7 @@
backgroundElement.style.backgroundImage = `url(${albumImage})`;
}
}
async function fetchLastPlayedSong() {
try {
const response = await fetch(url);
@ -158,25 +241,27 @@
console.error('Error fetching LastFM data:', error);
}
}
fetchLastPlayedSong();
setInterval(fetchLastPlayedSong, 3000);
function openUsernamePrompt() {
const newUsername = prompt('Enter your Last.fm username:', username);
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();
}
}
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js').catch(error =>
console.log('Service Worker registration failed:', error)
);
}
document.querySelectorAll('.dropdown-content a[data-title]').forEach(element => {
element.addEventListener('click', function (event) {
event.preventDefault();
@ -186,22 +271,6 @@
document.getElementById('favicon').href = newIcon;
});
});
// New onTrackDidChange functionality
const unsubscribe = webamp.onTrackDidChange((trackInfo) => {
if (trackInfo && trackInfo.metaData) {
const { title = "Unknown Title", artist = "Unknown Artist" } = trackInfo.metaData;
console.log("New track playing:", { title, artist });
} else if (trackInfo) {
console.log("New track URL:", trackInfo.url);
} else {
console.log("No track is currently playing.");
}
});
// Example: Unsubscribe when no longer needed
// unsubscribe();
</script>
</body>
</html>