Loveberry
The Resources
To reduce lag, all resources are categorised within seperate pages! Please be aware that it may still be laggy and slow to load, sorry!
Guides
Comment Admin Mark
An admin mark identifier for Ayano's comment widget.
Status Cafe Alterations
Quick guides on how to change what parts of the widget are displayed on your site (such as removing the username).
Snippets
Please Note:
The Nintendo Calendar has been removed, since the code is a sloppy mess and I hate it as well as troubleshooting it. Sorry.
CD player
00:00
0:00
View Code
CSS:/* stuff you can probably edit easily */
.title-bar {
background:linear-gradient(90deg, purple, orchid, pink);
}
.player {
width:fit-content;
border: black solid 1px;
border-width: 1px 0px 0px 1px;
margin-left:auto;
margin-right:auto;
}
.controlimg:hover {
cursor:help;
}
.songtitlewindow {
background-color:#fff;
box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
}
#musicplayer {
border:2px solid silver; /* border around player */
border-width: 2px 0px 0px 0px;
width:160px; /* width of the player */
}
#imagestyle {
background:silver; /* background color of player */
border:2px solid silver; /* border around player */
width:95px; /* width of the player */
height:95px;
box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
}
.ic {
width:95px;
position:relative;
bottom:1px;
right:1px;
overflow:hidden;
padding:2px;
border:2px solid transparent;
}
.songtitlearrow {
background-size:100%;
background-repeat:no-repeat;
background-image:url(https://i.imgur.com/Gt4fzFB.png);
height:21px;
width:21px;
position:relative;
top:2px;
left:-2px;
border:0px solid transparent;
border-width:0px 0px 0px 0px;
}
.songtitle {
padding:5px; /* padding around song title */
border-bottom:0px; /* border under song title */
display:block;
font-family:Pixelated MS Sans Serif;
}
.controls {
font-size:18px !important; /* size of controls */
text-align:center;
width:100%;
position:relative;
bottom:10px;
}
.controls td {
padding:8px 5px 0px 5px; /* padding around controls */
}
button {
min-width:40px;
}
.seeking {
background-color:#c0c0c0; /* background color of seeking bar */
display:flex;
justify-content: space-evenly;
padding:14px; /* padding around seeking bar */
}
.current-time {
padding-right:5px;
}
.total-duration {
padding-left:5px;
}
.controlimg {
height:15px;
width:15px;
}
/* below is styling to get windows 98 effect. from 98.css [https://jdan.github.io/98.css/] */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
background: transparent;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 21px;
width: 11px;
background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
transform: translateY(-8px);
box-shadow: none;
border: none;
}
input[type="range"].has-box-indicator::-webkit-slider-thumb {
background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
transform: translateY(-10px);
}
input[type="range"]::-moz-range-thumb {
height: 21px;
width: 11px;
border: 0;
border-radius: 0;
background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
transform: translateY(2px);
}
input[type="range"]::-moz-range-thumb {
background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
border: 0;
border-radius: 0;
height: 21px;
transform: translateY(2px);
width: 11px;
}
input[type="range"].has-box-indicator::-moz-range-thumb {
background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
transform: translateY(0px);
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
box-sizing: border-box;
background: black;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 2px;
box-sizing: border-box;
background: black;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
-1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
button {
-webkit-font-smoothing:none;
font-family:"Pixelated MS Sans Serif",Arial;
font-size:11px;
}
button {
border:none;
border-radius:0;
box-sizing:border-box;
color:transparent;
min-height:23px;
min-width:75px;
padding:0 12px;
text-shadow:0 0 #222;
background:silver;
box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf
}
button:not(:disabled):active {
box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
text-shadow:1px 1px #222;
}
@media (not(hover)){
button:not(:disabled):hover {
box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}
}
button:focus {
outline:1px dotted #000;
outline-offset:-4px
}
button::-moz-focus-inner {border:0}
.title-bar-controls button {
border:none;
border-radius:0;
box-sizing:border-box;
color:transparent;
min-height:23px;
min-width:75px;
padding:0 12px;
text-shadow:0 0 #222;
}
.title-bar-controls button {
background:silver;
box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
.title-bar-controls button:not(:disabled):active {
box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
text-shadow:1px 1px #222;
}
@media (not(hover)) {
button:not(:disabled):hover {
box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey
}
}
.title-bar-controls button:focus {outline:1px dotted #000; outline-offset:-4px}
.title-bar-controls button::-moz-focus-inner {border:0}
@font-face {
font-family: "Pixelated MS Sans Serif";
src: url("https://files.catbox.moe/1za99g.woff") format("woff");
src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Pixelated MS Sans Serif";
src: url("https://files.catbox.moe/z7csle.woff") format("woff");
src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
font-weight: bold;
font-style: normal;
}
.window, .title-bar {
font-family: "Pixelated MS Sans Serif", Arial;
-webkit-font-smoothing: none;
font-size: 11px;
}
.window {
box-shadow: inset -1px -1px #0a0a0a,
inset 1px 1px #dfdfdf, inset -2px -2px #808080,
inset 2px 2px #ffffff;
background: #c0c0c0;
padding: 3px;
width:260px;
}
.title-bar {
padding: 3px 2px 3px 3px;
display: flex;
justify-content: space-between;
align-items: center;
}
.title-bar-text {
font-weight: bold;
color: white;
letter-spacing: 0;
margin-right: 24px;
}
.title-bar-controls {
display: flex;
}
.title-bar-controls button {
padding: 0;
display: block;
min-width: 16px;
min-height: 14px;
}
.title-bar-controls button:active {
padding: 0;
}
.title-bar-controls button:focus {
outline: none;
}
.title-bar-controls button[aria-label=Minimize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
background-position:bottom 3px left 4px;
background-repeat:no-repeat;
}
.title-bar-controls button[aria-label=Maximize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
background-position:top 2px left 3px;
background-repeat:no-repeat;
}
.title-bar-controls button[aria-label=Close]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
background-position:top 3px left 4px;
background-repeat:no-repeat;
margin-left:2px;
}
.window-body { margin:0px; height:98px; }
input[type=range] {
-webkit-appearance: none;
appearance:none;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 2px; /* thickness of seeking track */
cursor: help;
}
/* settings for firefox browsers */
input[type=range]::-moz-range-track {
width: 100%;
height: 2px; /* thickness of seeking track */
cursor: help;
}
.flex {display: flex;}
.titlebaricon { height:14px; width:14px;}
<div class="player">
<div class="window">
<div class="title-bar">
<div class="title-bar-text"><sub><img class="titlebaricon" src="https://i.imgur.com/5r8E7vB.png" alt=""></sub> CD player</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<div class="flex">
<div id="imagestyle"><img class="ic" src="https://i.imgur.com/GU3dJjn.jpeg" alt=""></div>
<div id="musicplayer">
<div class="songtitlewindow">
<div class="flex"><marquee scrollamount="4" class="songtitle"></marquee><div class="songtitlearrow"></div></div>
</div>
<div class="seeking">
<div class="current-time">00:00</div>
<input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
<div class="total-duration">0:00</div>
</div>
<table class="controls">
<tr>
<td>
<div class="prev-track" onclick="prevTrack()"><button><img src="https://i.imgur.com/smNRLfT.png" class="controlimg"></button></div>
</td>
<td>
<div class="playpause-track" onclick="playpauseTrack()" ><button><img src="https://i.imgur.com/lvaNTua.png" class="controlimg"></button></div>
</td>
<td>
<div class="next-track" onclick="nextTrack()"><button><img src="https://i.imgur.com/ihIsZGK.png" class="controlimg"></button></div>
</td>
</tr>
</table>
<audio id="music" src=""></audio>
</div>
</div>
</div>
</div>
</div>// 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 = "playing " + (track_index + 1) + " of " + track_list.length + ": " + 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;
// replace icon with the pause icon
playpause_btn.innerHTML = '<button><img src="https://i.imgur.com/xfIvKgS.png" class="controlimg"></i></button>';
}
// pauses track when pause button is pressed
function pauseTrack() {
curr_track.pause();
isPlaying = false;
// replace icon with the play icon
playpause_btn.innerHTML = '<button><img src="https://i.imgur.com/lvaNTua.png" class="controlimg"></button>';
}
// moves to the next track
function nextTrack() {
if (track_index < track_list.length - 1)
track_index += 1;
else track_index = 0;
loadTrack(track_index);
playTrack();
}
// moves to the previous track
function prevTrack() {
if (track_index > 0)
track_index -= 1;
else track_index = track_list.length;
loadTrack(track_index);
playTrack();
}
// 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);