feat: initial design and functionality
This commit is contained in:
Stevan Freeborn
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 6.4 MiB |
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,32 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Stevan's Stream Commands</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
|
||||||
|
integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
|
||||||
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||||
|
<link href="style.css" rel="stylesheet" />
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Stevan's Stream Commands</h1>
|
||||||
|
<p>
|
||||||
|
These are the commands available to use during a stream to interact in
|
||||||
|
chat.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<ul id="commandsList"></ul>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<p>Hope you enjoy the streams!</p>
|
||||||
|
</footer>
|
||||||
|
<script type="module" src="index.js" />
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
const COMMANDS = [
|
||||||
|
{
|
||||||
|
name: "GitHub",
|
||||||
|
description: "Get the link to my github",
|
||||||
|
aliases: ["!gh"],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const commandsList = document.getElementById("commandsList");
|
||||||
|
|
||||||
|
if (commandsList === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const command of COMMANDS) {
|
||||||
|
const listItemElement = document.createElement("li");
|
||||||
|
listItemElement.innerHTML = /*html*/ `
|
||||||
|
<div class="command-card">
|
||||||
|
<div class="left">
|
||||||
|
<div class="name">${command.name}</div>
|
||||||
|
<div class="aliases">
|
||||||
|
${command.aliases
|
||||||
|
.map(
|
||||||
|
(a) => /*html*/ `
|
||||||
|
<div class="command-alias">
|
||||||
|
<code>${a}</code>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="copy-button"
|
||||||
|
aria-label="Copy"
|
||||||
|
data-alias="${a}"
|
||||||
|
>
|
||||||
|
<i class="fa-solid fa-copy"></i>
|
||||||
|
<i class="fa-solid fa-check hidden"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
)
|
||||||
|
.join("")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<p>${command.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
commandsList.appendChild(listItemElement);
|
||||||
|
}
|
||||||
|
commandsList.addEventListener("click", async (e) => {
|
||||||
|
const copyButton = e.target.closest(".copy-button");
|
||||||
|
|
||||||
|
if (copyButton === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const alias = copyButton.dataset.alias;
|
||||||
|
|
||||||
|
await navigator.clipboard.writeText(alias);
|
||||||
|
|
||||||
|
const copyButtonIcons = Array.from(copyButton.children);
|
||||||
|
|
||||||
|
for (const icon of copyButtonIcons) {
|
||||||
|
icon.classList.toggle("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
const originalColor = copyButton.style.color;
|
||||||
|
copyButton.style.color = '#b39cd0';
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
for (const icon of copyButtonIcons) {
|
||||||
|
icon.classList.toggle("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
copyButton.style.color = originalColor;
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
});
|
||||||
+146
@@ -0,0 +1,146 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "CaskaydiaCove NFM";
|
||||||
|
src: url("fonts/CaskaydiaCoveNFM-Regular.eot");
|
||||||
|
src:
|
||||||
|
url("fonts/CaskaydiaCoveNFM-Regular.eot?#iefix") format("embedded-opentype"),
|
||||||
|
url("fonts/CaskaydiaCoveNFM-Regular.woff2") format("woff2"),
|
||||||
|
url("fonts/CaskaydiaCoveNFM-Regular.woff") format("woff"),
|
||||||
|
url("fonts/CaskaydiaCoveNFM-Regular.svg#CaskaydiaCoveNFM-Regular") format("svg");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS Reset */
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utils */
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Site Styles */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg-color: #181818;
|
||||||
|
--text-color: #E4E4E4;
|
||||||
|
|
||||||
|
font-family: 'CaskaydiaCove NFM', monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid #b39cd0;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background-color: #353232;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-card .left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-card .left .aliases {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-alias {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-alias code {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
padding: 0.25rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-alias button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-card .right {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user