Emilia/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

music was too loud, now need to find true dmca free music

Browse Source
This commit is contained in:
fatmeatwsl 2025-04-22 21:41:32 +02:00
parent 7fee8ea735
commit 00c6891eae
3 changed files with 50 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
sleepeesoftware.fr/css/ui.css
View File

@ -86,19 +86,56 @@ nav ul li a:hover {
margin-bottom: 1rem;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.controls button {
background: #1a1a1a;
background: var(--background-color);
border: 1px solid var(--primary-color);
color: var(--primary-color);
padding: 0.5rem 1rem;
margin: 0 0.5rem;
font-size: 1.2rem;
padding: 0.3rem 0.6rem;
font-size: 1rem;
cursor: pointer;
font-family: 'Orbitron', sans-serif;
text-shadow: 0 0 3px var(--primary-color);
text-shadow: 0 0 2px var(--primary-color);
border-radius: 4px;
}
.controls button:hover {
background: var(--primary-color);
color: var(--background-color);
}
.music-button {
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid var(--color-accent-cyan);
padding: 0.3rem 0.5rem;
margin: 0 0.2rem;
font-size: 1.1rem;
color: var(--color-accent-cyan);
font-family: 'Orbitron', sans-serif;
cursor: pointer;
text-shadow: 0 0 2px var(--color-accent-cyan);
box-shadow: 0 0 4px var(--color-accent-cyan),
0 0 8px var(--color-accent-cyan);
border-radius: 4px;
transition: box-shadow 0.2s ease;
}
.music-button:hover {
animation: btnflicker 0.5s linear infinite;
}
@keyframes btnflicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
opacity: 1;
}
20%, 22%, 24%, 55% {
opacity: 0.6;
}
}

6
sleepeesoftware.fr/index.html
View File

@ -42,9 +42,9 @@
<div id="music-player" class="terminal">
<div id="now-playing"></div>
<div class="controls">
<button id="prev-btn">⏮️</button>
<button id="play-pause-btn">▶️</button>
<button id="next-btn">⏭️</button>
<button id="prev-btn" class="music-button">⏮</button>
<button id="play-pause-btn" class="music-button">⏯</button>
<button id="next-btn" class="music-button">⏭</button>
</div>
</div>
<main id="main-content">

14
sleepeesoftware.fr/js/index.js
View File

@ -38,17 +38,13 @@ const playlist = [
{
title: 'DJ Ten - MagnetoSphere',
src: 'assets/DJ_Ten_MagnetoSphere.wav'
},
{
title: 'National Aerobic Championship Theme',
src: 'assets/National_Aerobic_Championship_Theme.wav'
}
];
let currentTrack = 0;
const audio = new Audio();
audio.loop = false;
audio.volume = 0.2;
audio.volume = 0.04;
const nowPlaying = document.getElementById('now-playing');
const playPauseBtn = document.getElementById('play-pause-btn');
@ -58,18 +54,18 @@ const prevBtn = document.getElementById('prev-btn');
function loadTrack(index) {
currentTrack = index;
audio.src = playlist[currentTrack].src;
nowPlaying.textContent = `🎵 Now Playing: ${playlist[currentTrack].title}`;
nowPlaying.textContent = `♫ Now Playing: ${playlist[currentTrack].title}`;
audio.play();
playPauseBtn.textContent = '⏸️';
playPauseBtn.textContent = '⏸';
}
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '⏸️';
playPauseBtn.textContent = '⏸';
} else {
audio.pause();
playPauseBtn.textContent = '▶️';
playPauseBtn.textContent = '▶';
}
});