Initial commit

2026-01-18 13:22:41 -05:00
commit b5c43a9663
58 changed files with 1835 additions and 0 deletions
--- a/views/moosic.ejs
+++ b/views/moosic.ejs
@@ -0,0 +1,138 @@
+<!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>