139 lines
4.4 KiB
Plaintext
Executable File
139 lines
4.4 KiB
Plaintext
Executable File
<!DOCTYPE html>
|
|
<head>
|
|
<title>Oddbyte's music</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/jpeg;base64,<%- faviconb64 %>">
|
|
<link rel="canonical" href="https://oddbyte.dev/"/>
|
|
<meta name="fediverse:creator" content="@oddbyte@mastodon.social">
|
|
<style>
|
|
<%- include('partials/style') %>
|
|
/* Begin per-page stylesheet */
|
|
#container_songs {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
#song {
|
|
background-color: rgba(68, 89, 110, 0.288);
|
|
border: 1px solid #78aaff66;
|
|
border-radius: 8px;
|
|
padding: 2.5%;
|
|
margin: 5px;
|
|
transition: scale 0.25s ease;
|
|
height: 250px;
|
|
}
|
|
|
|
#container_songs > .song-item:first-child > #song {
|
|
background-color: rgba(255, 217, 0, 0.25); /* Gold */
|
|
}
|
|
|
|
#container_songs > .song-item:nth-child(2) > #song {
|
|
background-color: rgba(192, 192, 192, 0.25); /* Silver */
|
|
}
|
|
|
|
#container_songs > .song-item:nth-child(3) > #song {
|
|
background-color: rgba(205, 127, 50, 0.25); /* Bronze */
|
|
}
|
|
|
|
#container_songs > .song-item:nth-child(4) > #song {
|
|
background-color: rgba(205, 127, 50, 0.25); /* Bronze */
|
|
}
|
|
|
|
#container_songs > .song-item:nth-child(5) > #song {
|
|
background-color: rgba(205, 127, 50, 0.25); /* Bronze */
|
|
}
|
|
|
|
#container_songs > .song-item:nth-child(6) > #song {
|
|
background-color: rgba(205, 127, 50, 0.25); /* Bronze */
|
|
}
|
|
|
|
a:has(#song) {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#song:hover {
|
|
scale: 102.5%;
|
|
}
|
|
|
|
#song_img {
|
|
margin-top: 10px;
|
|
height: 150px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
#song_title {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
#container_songs {
|
|
grid-template-columns: 1fr 1fr;
|
|
margin: 0px 25px 0px 0px;
|
|
}
|
|
|
|
#song {
|
|
height: 200px;
|
|
margin: 5px 0px 5px 1em;
|
|
}
|
|
|
|
#song_img {
|
|
height: 100px;
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
#song {
|
|
height: 180px;
|
|
padding: 4%;
|
|
margin: 0px -15px 0px 25px;
|
|
}
|
|
|
|
#song_img {
|
|
height: 80px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
a:has(#song) {
|
|
margin: 5px 50px 5px 1em;
|
|
}
|
|
|
|
#container_songs {
|
|
grid-template-columns: 1fr;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<%- include('partials/navbar') %><% function toTitleCase(str) {
|
|
return str.replace(
|
|
/\w\S*/g,
|
|
text => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase()
|
|
);
|
|
} %>
|
|
<div id="container_top">
|
|
<div id="container_main">
|
|
<div id="container_thing">
|
|
<div id="container_thing">
|
|
<h1 class="selectDisable">My favorite music</h1>
|
|
<p>Open my favorite music playlist in <a target="_blank" href="https://music.youtube.com/playlist?list=<%- playlistId %>">youtube music</a></p>
|
|
<div id="container_songs">
|
|
<% playlistSongs.forEach(function(song) { %>
|
|
<a target="_blank" href="https://music.youtube.com/watch?v=<%- song.videoId %>" class="song-item">
|
|
<div id="song">
|
|
<img class="selectDisable" id="song_img" src="data:image/jpeg;base64,<%- thumbnails.find(x => x.id === song.videoId).thumbnail.toString('base64') %>" />
|
|
<h4 id="song_title"><%- toTitleCase(song.name.toString().split(/\((.*)/s)[0].split(/\-(.*)/s)[0].replace(/♬/gi, '').replace(/\"/gi, '').replace(/\?/gi, '').trim()); %></h4>
|
|
</div>
|
|
</a>
|
|
<% }) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="v-break"></div>
|
|
<footer class="selectDisable">Made by Oddbyte.</footer>
|
|
</div>
|
|
</body>
|