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

Initial commit

Browse Source
This commit is contained in:
oddbyte
2026-01-18 13:22:41 -05:00
commit b5c43a9663
58 changed files with 1835 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
views/art.ejs Normal file
View File

@@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Art</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,<%- faviconb64 %>">
<link rel="canonical" href="https://oddbyte.dev/"/>
<meta name="fediverse:creator" content="@oddbyte@mastodon.social">
<style>
<%- include('partials/style') %>
</style>
</head>
<body>
<%- include('partials/navbar') %>
<div id="container_top">
<div id="container_main">
<div id="container_thing">
<main>
<h1 class="selectDisable">Art</h1>
<div id="v-break"></div>
<p>
Hihi :D<br />
Here are all my various versions I have drawn of my profile picture ^^<br />
I drew them using <a target="_blank" href="https://www.piskelapp.com/p/create/sprite/">Piskel</a>.
</p>
<div id="v-break"></div>
<div>
<h2>Face</h2>
<div>
<h4>Blank</h4>
<img src="/blank.png" /><br />
<a target="_blank" href="piskelfile/blank.piskel">Piskelfile</a>
</div>
<div>
<h4>Base</h1>
<!-- Pulled from favicon.ico cace -->
<img src="data:image/png;base64,<%- faviconb64 %>" /><br />
<a target="_blank" href="piskelfile/base.piskel">Piskelfile</a>
</div>
<div>
<h4>Activated</h4>
<img src="/activated.png" /><br />
<a target="_blank" href="piskelfile/activated.piskel">Piskelfile</a>
</div>
<div>
<h4>&gt;&lt;</h4>
<img src="/><.png" /><br />
<a target="_blank" href="piskelfile/><.piskel">Piskelfile</a>
</div>
<div>
<h4>^^</h4>
<img src="/^^.png" /><br />
<a target="_blank" href="piskelfile/^^.piskel">Piskelfile</a>
</div>
<div>
<h4>0.0</h4>
<img src="/00.png" /><br />
<a target="_blank" href="piskelfile/00.piskel">Piskelfile</a>
</div>
<div>
<h4>?</h4>
<img src="/question.png" /><br />
<a target="_blank" href="piskelfile/question.piskel">Piskelfile</a>
</div>
<div>
<h4>Angy</h4>
<img src="/angy.png" /><br />
<a target="_blank" href="piskelfile/angy.piskel">Piskelfile</a>
</div>
<div>
<h4>Sad</h4>
<img src="/sad.png" /><br />
<a target="_blank" href="piskelfile/sad.piskel">Piskelfile</a>
</div>
<div>
<h4>Scared</h4>
<img src="/scared.png" /><br />
<a target="_blank" href="piskelfile/scared.piskel">Piskelfile</a>
</div>
<div>
<h4>...</h4>
<img src="/dotdotdot.png" /><br />
<a target="_blank" href="piskelfile/dotdotdot.piskel">Piskelfile</a>
</div>
<div>
<h4><sup>.</sup>..</h4>
<img src="/Dotdotdot.png" /><br />
<a target="_blank" href="piskelfile/Dotdotdot.piskel">Piskelfile</a>
</div>
<div>
<h4>.<sup>.</sup>.</h4>
<img src="/dotDotdot.png" /><br />
<a target="_blank" href="piskelfile/dotDotdot.piskel">Piskelfile</a>
</div>
<div>
<h4>..<sup>.</sup></h4>
<img src="/dotdotDot.png" /><br />
<a target="_blank" href="piskelfile/dotdotDot.piskel">Piskelfile</a>
</div>
<div>
<h4>Loading</h4>
<img src="/loading.gif" /><br />
<p>Made with <a target="_blank" href="https://ezgif.com">Ezgif</a></p>
</div>
<div>
<h4>-.-</h4>
<img src="/-.-.png" /><br />
<a target="_blank" href="piskelfile/-.-.piskel">Piskelfile</a>
</div>
</div>
<div id="v-break"></div>
<div>
<h2>Full body</h2>
<div>
<h4>Blank</h4>
<img src="/blank_full.png" /><br />
<a target="_blank" href="piskelfile/blank_full.piskel">Piskelfile</a>
</div>
<div>
<h4>Base</h4>
<img src="/base_full.png" /><br />
<a target="_blank" href="piskelfile/base_full.piskel">Piskelfile</a>
</div>
<div>
<h4>Hihi</h4>
<img src="/hihi.png" /><br />
<a target="_blank" href="piskelfile/hihi.piskel">Piskelfile</a>
</div>
<div>
<h4>DIE</h4>
<img src="/DIE.png" /><br />
<a target="_blank" href="piskelfile/DIE.piskel">Piskelfile</a>
</div>
</div>
</main>
</div>
</div>
<div id="v-break"></div>
<footer><aside><div class="selectDisable">Made by Oddbyte.</div><br /><%- include('partials/funfact') %></aside></footer>
</div>
</body>
</html>

69
views/blog.ejs Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head><% if (type != "sample") { %>
<title>The oddbyte blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;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 */
code, kbd, pre, samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
Liberation Mono, Courier New, monospace;
font-size: 1em;
background-color: rgb(43, 43, 43);
color: rgb(255, 174, 87);
border-radius: 3px;
}
#blog {
text-align: left;
text-wrap: auto;
margin: 0px 3em 0px 3em;
}
.article {
text-indent: 36pt;
line-height: 2.0;
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<% if (type != "sample") { include('partials/navbar') } %>
<div id="container_top">
<div id="container_main">
<div id="container_thing">
<main>
<% if (type == "main") { %>
<div id="v-break"></div>
<h1 class="selectDisable">My blog</h1>
<p>TODO: Main blog page here</p>
<% } else if (type == "individual") { %>
<div id="blog"><%- page %></div>
<% } else if (type == "sample") { %>
<div id="blog"></div>
<% } %>
</main>
</div>
</div><% if (type != "sample") { %>
<div id="v-break"></div>
<footer><aside><div class="selectDisable">Made by Oddbyte.</div><br /><%- include('partials/funfact') %></aside></footer><% } else { %>
<script>
const blog = document.getElementById("blog");
document.addEventListener("DOMContentLoaded", (event) => {
parent.postMessage("Loaded");
});
window.addEventListener("message", (event) => {
if (event.origin !== "https://oddbyte.dev") return;
blog.innerHTML = event.data;
});
</script>
<% } %>
</div>
</body>
</html>

257
views/editor.ejs Normal file
View File

@@ -0,0 +1,257 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Oddbyte</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;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 */
#markdown-editor {
width: 95%;
height: 500px;
border: 1px solid;
border-radius: 4px;
padding: 15px;
font-family: 'Times New Roman', Times, serif;
resize: none;
background-color: #2d3339;
color: #f8f9fa;
border-color: #495057;
white-space: pre-line;
}
#editor-container {
width: 100%;
}
#html-preview {
width: 95%;
height: 500px;
border: none;
}
</style>
</head>
<body>
<%- include('partials/navbar') %>
<div id="container_top">
<div id="container_main">
<div id="container_thing">
<main>
<a href="#" id="button" class="switchbutton selectDisable" style="margin-top: 30px">Switch to preview</a>
<div id="editor-container">
<!-- Editor panel -->
<h1 class="selectDisable">Markdown Editor</h1>
<textarea id="markdown-editor" class="form-control" placeholder="Write stuff here ..." aria-label="Markdown input"></textarea>
</div>
<div id="preview-container" hidden>
<h1>Preview</h1>
<iframe id="html-preview" src="/blog?sample=1"></iframe>
</div>
<div id="rawtext-container" hidden>
<h1>Raw HTML:</h1>
<pre><code id="rawtext"></code></pre>
</div>
</main>
</div>
</div>
<div id="v-break"></div>
<footer class="selectDisable"><aside><div class="selectDisable">Made by Oddbyte.</div><br /><%- include('partials/funfact') %></aside></footer>
</div>
<script>
function parsemd(inputMarkdown) {
if (!inputMarkdown) return "";
let html = inputMarkdown;
// Headings (h2, h3, h4)
html = html.replace(/^# (.*$)/gm, '<h2>$1</h2>');
html = html.replace(/^## (.*$)/gm, '<h3>$1</h3>');
html = html.replace(/^### (.*$)/gm, '<h4>$1</h4>');
// Bold text
html = html.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>');
// Italic text
html = html.replace(/\*(.*?)\*/g, '<i>$1</i>');
// Links
html = html.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');
// Code blocks with language detection for syntax highlighting
// TODO: actually implement the lang stuffs in the blog page's CSS
html = html.replace(/```([a-z]*)\n([\s\S]*?)```/g, (match, lang, code) => {
if (lang) {
return `<pre><code class="language-${lang}">${code}</code></pre>`;
}
return `<pre><code>${code}</code></pre>`;
});
// Fallback for code blocks without language specification
html = html.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
// Inline code
html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
// Unordered list
html = html.replace(/^- (.*)$/gm, '<li>$1</li>');
html = html.replace(/(<li>.*<\/li>\n)+/g, '<ul>$&</ul>');
// Ordered list
html = html.replace(/^\d+\. (.*)$/gm, '<li>$1</li>');
html = html.replace(/(<li>.*<\/li>\n)+/g, function (match) {
// convert to <ol> if its not in <ul>
if (!match.startsWith('<ul>')) {
return '<ol>' + match + '</ol>';
}
return match;
});
// Handle newlines
html = html.replaceAll("\n", '<br />\n');
return html;
}
</script>
<script>
let editor = document.getElementById("markdown-editor");
let iframe = document.getElementById("html-preview");
let iframewindow = iframe.contentWindow;
let switchbutton = document.getElementsByClassName("switchbutton")[0];
let editorcontainer = document.getElementById("editor-container");
let previewcontainer = document.getElementById("preview-container");
let rawtextcontainer = document.getElementById("rawtext-container");
let rawtextbox = document.getElementById("rawtext");
let loaded = false;
let locked = false;
function getSelectionText() {
let text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection) {
text = document.selection.createRange().text;
}
return text;
}
window.addEventListener("message", (event) => {
if (event.origin !== "https://oddbyte.dev" || event.data != "Loaded" || loaded) return;
else {
// Send off current value
iframewindow.postMessage(parsemd(editor.value));
// Send off future values
editor.addEventListener("input", (event => {
iframewindow.postMessage(parsemd(editor.value));
rawtextbox.innerText = parsemd(editor.value);
}));
loaded = true;
}
});
switchbutton.addEventListener("click", (event) => {
editorcontainer.hidden = !editorcontainer.hidden;
previewcontainer.hidden = !previewcontainer.hidden;
rawtextcontainer.hidden = !rawtextcontainer.hidden;
if (!previewcontainer.hidden) switchbutton.textContent = "Switch to editor"; else switchbutton.textContent = "Switch to preview"
});
const keyDownHandler = (event) => {
if (!locked) { try { navigator.keyboard.lock(); } catch (_) {} locked = true; }
if (event.ctrlKey && (event.key === "k" || event.key === "b" || event.key === "i")) {
if (editorcontainer.hidden) return;
event.preventDefault();
event.stopPropagation();
if (event.key === "k") linkText(editor);
if (event.key === "b") boldText(editor);
if (event.key === "i") italicText(editor);
}
}
window.addEventListener("keydown", keyDownHandler);
</script>
<script>
function getInputSelection(el) {
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
// Create a working TextRange that lives only in the input
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
// Check if the start and end of the selection are at the very end
// of the input, since moveStart/moveEnd doesn't return what i want
// in those cases
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
}
return {
start: start,
end: end
};
}
function replaceSelectedText(el, text) {
var sel = getInputSelection(el), val = el.value;
el.value = val.slice(0, sel.start) + text + val.slice(sel.end);
}
function linkText(el) {
var sel = getInputSelection(el), val = el.value;
// Check if the selected text starts with http:// or https://
var selectedText = val.slice(sel.start, sel.end);
var isUrl = selectedText.match(/^https?:\/\//);
if (isUrl) {
// If selected text is already a url, use it as the link target
// and use the provided text as the link text
el.value = val.slice(0, sel.start) + '[](' + selectedText + ')' + val.slice(sel.end);
} else {
// If not a url, use the provided text as the link text
// and the selected text as the link target
el.value = val.slice(0, sel.start) + '[' + selectedText + ']()' + val.slice(sel.end);
}
}
function boldText(el) {
var sel = getInputSelection(el), val = el.value;
var selectedText = val.slice(sel.start, sel.end);
el.value = val.slice(0, sel.start) + '**' + selectedText + '**' + val.slice(sel.end);
}
function italicText(el) {
var sel = getInputSelection(el), val = el.value;
var selectedText = val.slice(sel.start, sel.end);
el.value = val.slice(0, sel.start) + '*' + selectedText + '*' + val.slice(sel.end);
}
</script>
</body>
</html>

106
views/home.ejs Executable file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Oddbyte</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;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 */
code, kbd, pre, samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
Liberation Mono, Courier New, monospace;
font-size: 1em;
background-color: rgb(43, 43, 43);
color: rgb(255, 174, 87);
border-radius: 3px;
}
</style>
</head>
<body>
<%- include('partials/navbar') %>
<div id="container_top">
<div id="container_main">
<div id="container_thing">
<main>
<h1 class="selectDisable">Oddbyte</h1>
<div id="v-break"></div>
<img class="selectDisable" alt="my profile picture" src="data:image/png;base64,<%- faviconb64 %>" />
<p>
Hihi :D<br />
I am a nerd that happens to like hacking stuff.<br />
I mainly nerd about privacy, android, web development, cybersecurity, and sysadmin.<br />
My goal is to become a CISO.
</p>
<div id="v-break"></div>
<h2 id="stats" class="selectDisable">Stats</h2>
<div style="background-color: rgb(43, 43, 43); text-align: left; max-width: 500px; width: 100%; margin: 0 auto; padding: 20px; box-sizing: border-box; border-radius: 5px; color: rgb(255, 174, 87); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-size: 1em;">
<div style="display: flex; margin-bottom: 15px;">
<span style="color: #fff; flex-shrink: 0;">Species:</span>
<span style="flex: 1; text-align: right;">Hooman (I think)</span>
</div>
<div style="display: flex; margin-bottom: 15px;">
<span style="color: #fff; flex-shrink: 0;">Height:</span>
<span style="flex: 1; text-align: right;">5'9"</span>
</div>
<div style="display: flex; margin-bottom: 15px;">
<span style="color: #fff; flex-shrink: 0;">Operating System:</span>
<span style="flex: 1; text-align: right;">Anxiousness OS</span>
</div>
<div style="display: flex; margin-bottom: 15px;">
<span style="color: #fff; flex-shrink: 0;">Processor:</span>
<span style="flex: 1; text-align: right;">Fried Potato</span>
</div>
<div style="display: flex; margin-bottom: 15px;">
<span style="color: #fff; flex-shrink: 0;">RAM:</span>
<span style="flex: 1; text-align: right;">Not Enough</span>
</div>
<div style="display: flex; margin-bottom: 15px;">
<span style="color: #fff; flex-shrink: 0;">Bugs:</span>
<span style="flex: 1; text-align: right;">Anxiety<span style="font-size: 0; color: transparent;">^(</span><sup>3</sup><span style="font-size: 0; color: transparent;">)</span>, Nerd<span style="font-size: 0; color: transparent;">^(</span><sup>2</sup><span style="font-size: 0; color: transparent;">)</span>, ADHD<span style="font-size: 0; color: transparent;">^(</span><sup>∞</sup><span style="font-size: 0; color: transparent;">)</span></span>
</div>
<div style="display: flex; margin-bottom: 15px;">
<span style="color: #fff; flex-shrink: 0;">Current thoughts:</span>
<span style="flex: 1; text-align: right;">Why does CSS suck so much?</span>
</div>
<div style="display: flex; margin-bottom: 15px;">
<span style="color: #fff; flex-shrink: 0;">Gender:</span>
<span style="flex: 1; text-align: right;">Dood</span>
</div>
<div style="display: flex;">
<span style="color: #fff; flex-shrink: 0;">Age:</span>
<span style="flex: 1; text-align: right;"><code>2.5×<wbr />ln(e)+<wbr />2(e<span style="font-size: 0; color: transparent;">^(</span><sup>-i×π</sup><span style="font-size: 0; color: transparent;">)</span>×<wbr />7.25)×<wbr />cos(7π)</code></span>
</div>
</div>
<div id="v-break"></div>
<h2 id="contact" class="selectDisable">Contact me</h2>
<p style="text-align: left; max-width: 500px; align-self:center; display:inline-block;">You can contact me by messaging me on:<br />
- Signal (preferred), <a rel="me" target="_blank" href="https://signal.me/#eu/s6M3E2BSkJVb9E0fwib4PTcbDLH36jPlQTP9basoZ37rl-XoyD5L4Yvao-jZQ0xn">@oddbyte.01</a>,<br />
- Mastodon, <a rel="me" target="_blank" href="https://mastodon.social/@oddbyte">@oddbyte@mastodon.social</a>,<br />
- Github, <a rel="me" target="_blank" href="https://github.com/oddbyte">@oddbyte</a>, or my<br />
- Email, <a rel="me" target="_blank" href="mailto:contact@oddbyte.dev">contact@oddbyte.dev</a><br />
</p>
<div id="v-break"></div>
<h2 id="hoomans" class="selectDisable">Other hooman</h2>
<p>
Check out this random internet person I happen to be aware of: <a target="_blank" href="https://voxel.top">voxel.top</a><br />
He is also a cybersecurity / privacy nerd<br />
His website <s>sucks ass</s> <i>needs improvement</i><br />
<sup>(yeah, lets go with "needs improvement")</sup>
</p>
<%/* <p>
Check out my buddy's site, <a target="_blank" href="https://catocat.uk">catocat.uk</a><br />
She <i>may</i> have <s>stolen things</s> <i>taken inspiration</i> from my website.
</p>
*/%>
</main>
</div>
</div>
<div id="v-break"></div>
<footer><aside><div class="selectDisable">Made by Oddbyte.</div><br /><%- include('partials/funfact') %></aside></footer>
</div>
</body>
</html>

138
views/moosic.ejs Executable file
View File

@@ -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>

14
views/partials/funfact.ejs Executable file
View File

@@ -0,0 +1,14 @@
<p style="margin: 0; padding: .4rem .6rem; font-family: inherit; font-size: .9rem; color: #942ebd; background: transparent; text-align: center;"><% const facts = [
'The first computer bug was an actual moth',
'Android was originally an operating system for cameras',
'"password" is still one of the most commonly used passwords',
'People call me funny sometimes I guess',
'Haiii <3',
'e^(i*pi) = -1',
'According to the leading fan theory, 1 + 1 might actually not be 11',
'xkcd.com is a thing, and it is funny most of the time',
'Apparently I am a hooman',
'This message changes every time you refresh the page',
'I wish my friends would talk to me more often',
'I am a functional introvert'
]; %>Fun Fact: <%= facts[Math.floor(Math.random() * facts.length)] %></p>

8
views/partials/navbar.ejs Executable file
View File

@@ -0,0 +1,8 @@
<div id="navbar_contain" class="selectDisable">
<div id="navbar">
<a id="button" href="/">Home</a>
<a id="button" href="/art">Art</a>
<a id="button" href="/music">Playlist</a>
<a id="button" href="/source">Source code</a>
</div>
</div>

188
views/partials/style.ejs Executable file
View File

@@ -0,0 +1,188 @@
/* Begin default stylesheet */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #1E1E1E;
color: #e0e0e0;
padding: 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
*, *:before, *:after {
box-sizing: border-box;
}
#container_top {
align-self: center;
background: rgb(33,43,54);
border-radius: 12px;
box-shadow: 1.5px 2px 1.25px #bb00ff33;
display: block;
min-width: 95%;
max-width: 1200px;
margin-top: 15px;
}
#container_main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-width: 100%;
max-width: 1200px;
}
#container_thing {
flex: 1;
min-width: 100%;
max-width: 1200px;
}
#h-break {
margin-top: 1em;
background-color: #66666666;
border-radius: 5px;
width: 3px;
align-self: stretch;
flex-shrink: 0;
}
#v-break {
margin: 1em 1em 1em 0em;
background-color: #6666661f;
border-radius: 5px;
height: 3px;
max-height: 3px;
position: relative;
width: 100%;
align-self: center;
}
a {
color: #78A9FF;
transition: color 0.5s, text-decoration-color 0.5s;
text-decoration: underline;
text-decoration-thickness: .15rem;
text-decoration-skip-ink: none;
text-decoration-color: #66666666;
text-underline-offset: .05rem;
}
a:hover {
color: #b3a2ff;
text-decoration-color: #78aaff66;
}
p { font-size: 1.35em; }
h1 { text-align: center; color: #4a90e2; font-size: 3em; }
h2 { font-size: 2em; margin: 0; color: #4a90e2; }
h3 { font-size: 1.75em; color: #6ba8e3; }
h4 { font-size: 1.5em; color: #8bc1e4; }
h5 { font-size: 1.25em; color: #a3cce6; }
h6 { font-size: 1.1em; color: #bbd7e7; font-weight: bold; }
code, kbd, pre, samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
Liberation Mono, Courier New, monospace;
font-size: 1em;
background-color: rgb(43, 43, 43);
color: rgb(255, 174, 87);
border-radius: 3px;
}
footer {
text-align: center;
font-size: 1.125em;
color: #942ebd;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
left: 0;
bottom: 0;
width: 100%;
clear: both;
}
*:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 2.5px rgba(147, 112, 219, 0.3);
}
.mobileonly { display: none; }
.selectDisable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#button {
margin-top: 0;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.95);
text-decoration: none;
padding: 0.35rem 0.7rem;
border-radius: 12px;
background-image: linear-gradient(to bottom, rgba(114, 137, 218, 0.2), rgba(103, 58, 183, 0.15));
font-weight: 500;
letter-spacing: 0.02em;
border: 1px solid rgba(147, 112, 219, 0.3);
display: inline-block;
box-sizing: border-box;
}
#navbar_contain {
min-width: 0;
width: 100%;
box-sizing: border-box;
max-width: 1200px;
margin: 0 auto;
}
#navbar {
font-family: inherit;
margin-top: 5px;
color: rgba(255, 255, 255, 0.95);
text-decoration: none;
padding: 0.4rem 0.8rem;
border-radius: 12px;
background-image: linear-gradient(to bottom, rgb(33 41 50), rgb(34 48 59));
font-weight: 500;
font-size: 1.35em;
border: 1px solid rgba(147, 112, 219, 0.3);
display: block;
width: 100%;
text-align: center;
box-sizing: border-box;
}
#button:hover {
background-image: linear-gradient(to bottom, rgba(114, 137, 218, 0.3), rgba(103, 58, 183, 0.25));
color: white;
box-shadow: 0 2px 8px rgba(103, 58, 183, 0.2);
}
@media (max-width: 1201px) {
body {
padding: 10px; align-items: stretch;
}
#container_top, #container_main, #container_thing {
min-width: 100%;
max-width: 100%;
margin: .5em 0;
}
#container_main {
flex-direction: column; align-items: stretch;
}
#h-break { width: 100%; height: 3px; margin: 1em 0; }
p { font-size: 1.1em; }
h1 { font-size: 2.2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
#navbar_contain {
padding: 0 0.5rem;
}
#navbar {
font-size: 0.85rem;
padding: 0.35rem 0.7rem;
}
#button {
font-size: 0.75rem;
padding: 0.3rem 0.6rem;
}
.mobileonly { display: block; }
.desktoponly { display: none; }
}

79
views/source.ejs Executable file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Directory Tree</title>
<meta name="fediverse:creator" content="@oddbyte@mastodon.social">
<style>
<%- include('partials/style') %>
.directory {
font-weight: bold;
color: #0066cc;
cursor: pointer;
}
.file {
color: #00af00;
}
.directory-tree {
text-align-last: left;
}
</style>
</head>
<body>
<%- include('partials/navbar') %>
<div id="container_top">
<div id="container_main">
<div id="container_thing">
<main>
<h1>Directory Tree</h1>
<p>(here is where all the raw files are)</p>
<ul class="directory-tree">
<% function renderTree(items, indentLevel = 0) { %>
<% items.forEach(item => { %>
<li>
<% if (item.type === 'directory') { %>
<span class="directory"><%= item.name %></span>
<% if (item.children && item.children.length > 0) { %>
<ul>
<%= renderTree(item.children, indentLevel + 1) %>
</ul>
<% } %>
<% } else { %>
<a href="/source/<%= encodeURIComponent(item.path).replaceAll('%2F', '/') %>" class="file"><%= item.name %></a>
<% } %>
</li>
<% }); %>
<% } %>
<%= renderTree(paths) %>
</ul>
<h1>Rendered Pages</h1>
<div style="display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-direction: column; align-self: center;">
<div style="max-width: 500px; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-direction: column; align-self: center;">
<p>these are the thingies that you see when you use my site like a normal person (in a browser, hopefully)</p>
<p style="text-align-last: left;">
<a href="/">/</a> &lt;-- Main Page <br />
<a href="/music">/music</a> &lt;-- My Youtube Music playlist<br />
<a href="/source">/source</a> &lt;-- You are here :P <br />
<a href="/art">/art</a> &lt;-- My art ^.^<br />
<a href="/blog">/blog</a> &lt;-- My crappy blog<br />
</p>
</div>
</div>
<h1>Files</h1>
<div style="display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-direction: column; align-self: center;">
<div style="max-width: 500px; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-direction: column; align-self: center;">
<p style="text-align-last: left;">
<a href="/favicon.ico">/favicon.ico</a> &lt;-- icon</br>
<a href="/robots.txt">/robots.txt</a> &lt;-- tells some robots to go away
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

25
views/sourceviewer.ejs Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Oddbyte</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,<%- faviconb64 %>">
<link rel="canonical" href="https://oddbyte.dev/"/>
<meta name="fediverse:creator" content="@oddbyte@mastodon.social">
<style>
body {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1 class="selectDisable">Source code for <code><%-filePath %></code></h1>
<p><a href="/source" style="color: white;">Back</a></p>
<hr />
<pre><code><%= fileContent %></code></pre>
<hr />
<p><a href="/source" style="color: white;">Back</a></p>
</body>
</html>

29
views/template.ejs Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Oddbyte</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;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 */
</style>
</head>
<body>
<%- include('partials/navbar') %>
<div id="container_top">
<div id="container_main">
<div id="container_thing">
<main>
<!-- Main content here -->
</main>
</div>
</div>
<div id="v-break"></div>
<footer><aside><div class="selectDisable">Made by Oddbyte.</div><br /><%- include('partials/funfact') %></aside></footer>
</div>
</body>
</html>