body {
background-image: url(https://stardust28.neocities.org/Colored%20check%20by%20%23studiocrugnola.jpg);
background-repeat: repeat;
font-family: "Comic Sans MS", Georgia, serif;
margin: 0;
}
#yay {
font-family: "Bai Jamjuree", sans-serif;
}
nav {
margin: 20px 0;
}
.header {
text-align: center;
margin: 30px 0;
}
nav a {
text-decoration: none;
color: black;
margin-right: 10px;
}
nav a:hover {
text-decoration: underline;
}
.caja {
background-color: pink;
width: 800px;
margin: 40px auto;
padding: 20px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
h1 {
color: #ff66aa;
text-align: center;
}
h2 {
color: #ff99cc;
border-bottom: 2px dotted #ffb6d9;
}
border-width:8px;
border-style:solid;
border-image: url("https://i.ibb.co/h1Q3bFn/83-B27704-CEA1-4-B8-F-BF79-90-D624-EDC6-F6.png") 8 fill round;
// initiate variables
let track_name = document.querySelector(".songtitle");
let playpause_btn = document.querySelector(".playpause-track");
let next_btn = document.querySelector(".next-track");
let prev_btn = document.querySelector(".prev-track");
let seek_slider = document.querySelector(".seek_slider");
let curr_time = document.querySelector(".current-time");
let total_duration = document.querySelector(".total-duration");
let track_index = 0;
let isPlaying = false;
let updateTimer;
// create new audio element
let curr_track = document.getElementById("music");
//
// DEFINE YOUR SONGS HERE!!!!!
// MORE THAN FOUR SONGS CAN BE ADDED!!
// JUST ADD ANOTHER BRACKET WITH NAME AND PATH
// CATBOX.MOE IS RECOMMENDED FOR UPLOADING MP3 FILES
let track_list = [{
name: "One Shot One Kill - The Cat's Whiskers",
path: "https://files.catbox.moe/fegzmf.mp3"
},
{
name: "Shooting Arrows - The Cat's Whiskers",
path: "https://files.catbox.moe/zj81lr.mp3"
},
{
name: "4 REAL - The Cat's Whiskers",
path: "https://files.catbox.moe/fxd8fo.mp3"
},
{
name: "My Sweetest Love - The Cat's Whiskers ft. Kazuma Mitchell",
path: "https://files.catbox.moe/qe4he5.mp3"
},
{
name: "Mercy On Me - The Cat's Whiskers",
path: "https://files.catbox.moe/w7nnf9.mp3"
}
];
//
//
//
//
//
function loadTrack(track_index) {
clearInterval(updateTimer);
resetValues();
// load a new track
curr_track.src = track_list[track_index].path;
curr_track.load();
// update details of the track
track_name.textContent = track_list[track_index].name;
// set an interval of 1000 milliseconds for updating the seek slider
updateTimer = setInterval(seekUpdate, 1000);
// move to the next track if the current one finishes playing
curr_track.addEventListener("ended", nextTrack);
}
// reset values
function resetValues() {
curr_time.textContent = "0:00";
total_duration.textContent = "0:00";
seek_slider.value = 0;
}
// checks if song is playing
function playpauseTrack() {
if (!isPlaying) playTrack();
else pauseTrack();
}
// plays track when play button is pressed
function playTrack() {
curr_track.play();
isPlaying = true;
// Update the button class directly
let playButton = document.querySelector(".playpause-track");
playButton.className = "playpause-track fas fa-pause";
}
function pauseTrack() {
curr_track.pause();
isPlaying = false;
// Update the button class directly
let playButton = document.querySelector(".playpause-track");
playButton.className = "playpause-track fas fa-play";
}
// moves to the next track
function nextTrack() {
if (track_index < track_list.length - 1)
track_index += 1;
else track_index = 0;
loadTrack(track_index);
if (isPlaying) playTrack();
}
// moves to the previous track
function prevTrack() {
if (track_index > 0)
track_index -= 1;
else track_index = track_list.length;
loadTrack(track_index);
if (isPlaying) playTrack();
}
//volume control
var audio = document.getElementById("music");
var currentVolume = audio.volume;
function volumeUp() {
if (currentVolume < 1.0) {
currentVolume += 0.2;
audio.volume = currentVolume;
}
}
function volumeDown() {
if (currentVolume > 0.0) {
currentVolume -= 0.2;
audio.volume = currentVolume;
}
}
// seeker slider
function seekTo() {
seekto = curr_track.duration * (seek_slider.value / 100);
curr_track.currentTime = seekto;
}
function seekUpdate() {
let seekPosition = 0;
// check if the current track duration is a legible number
if (!isNaN(curr_track.duration)) {
seekPosition = curr_track.currentTime * (100 / curr_track.duration);
seek_slider.value = seekPosition;
// calculate the time left and the total duration
let currentMinutes = Math.floor(curr_track.currentTime / 60);
let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
let durationMinutes = Math.floor(curr_track.duration / 60);
let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
// adding a zero to the single digit time values
if (currentSeconds < 10) {
currentSeconds = "0" + currentSeconds;
}
if (durationSeconds < 10) {
durationSeconds = "0" + durationSeconds;
}
if (currentMinutes < 10) {
currentMinutes = currentMinutes;
}
if (durationMinutes < 10) {
durationMinutes = durationMinutes;
}
curr_time.textContent = currentMinutes + ":" + currentSeconds;
total_duration.textContent = durationMinutes + ":" + durationSeconds;
}
}
// load the first track in the tracklist
loadTrack(track_index);
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.post {
border: 1px solid #ddd;
padding: 15px;
background: #fff;
}
.post h2 {
margin-top: 0;
}
.post .date {
font-size: 0.8em;
color: #666;
}
.post a {
text-decoration: none;
font-weight: bold;
}
nav {
background: #ffd6e8;
padding: 10px;
text-align: center;
border: 2px solid #000;
}
nav a {
margin: 0 10px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
background: #ffb3de;
padding: 4px;
}
.box {
border: 2px solid #000;
padding: 15px;
margin: 20px 0;
background: #fff;
}
.box {
background: #FAE5D3;
border: 4px solid #d3b59c;
border-radius: 12px;
padding: 15px 20px;
margin: 20px 0;
box-shadow:
4px 4px 0 #d3b59c,
-1px -1px 0 #fff;
font-family: "Bai Jamjuree", sans-serif;
}
.box {
background: #FAE5D3;
border: 4px solid #d3b59c;
border-radius: 12px;
padding: 15px 20px;
margin: 20px 0;
box-shadow:
4px 4px 0 #d3b59c,
-1px -1px 0 #fff;
}
.box h2 {
background: #F7D9B1;
padding: 4px 10px;
border: 2px solid #d3b59c;
border-radius: 8px;
display: inline-block;
}
.postit {
background: #fff8b5;
padding: 20px;
width: 260px;
margin: 20px;
font-family: inherit;
border: 1px solid #e6d36f;
box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
transform: rotate(-1.5deg);
}
.postit h3 {
margin-top: 0;
font-weight: bold;
}
.postit::before {
position: relative;
content: "";
position: absolute;
width: 40px;
height: 20px;
background: rgba(255,255,255,0.6);
top: -10px;
left: 50%;
transform: translateX(-50%) rotate(-3deg);
}
border-radius: 20px;
.caja {
border: 2px solid #000;
padding: 20px;
background: #fff;
width: 300px;
margin: 30px;
}
/* SOLO la de la esquina */
.esquina {
position: absolute;
top: 20px;
right: 20px;
}
.caja {
border: 2px solid #000;
background: #fff;
padding: 15px;
}
/* solo esta va a la izquierda */
.izquierda {
width: 220px; /* flaquita */
margin-left: 20px;
margin-top: 20px;
}
.caja {
font-size: 16px; /* prueba 14px, 16px, 18px, 20px */
}
.caja {
font-family: 'Comic Neue', cursive;
}
.caja {
font-family: 'Quicksand', sans-serif;
}
.caja {
font-family: 'VT323', monospace;
font-size: 18px;
}
.photo-frame {
width: 250px; /* ancho del marco */
height: 250px; /* alto del marco */
border-width: 20px; /* grosor del borde */
border-style: solid;
border-image: url("TU_IMAGEN_DE_BORDE.png") 20 round; /* tu imagen de borde */
display: inline-block; /* para que no ocupe toda la línea */
overflow: hidden; /* que la imagen no se salga del marco */
border-radius: 0; /* 0 para esquinas cuadradas, cambia si quieres */
}
.photo-frame img {
width: 100%;
height: 100%;
object-fit: cover; /* que la imagen se ajuste al marco */
}
