feat: initial design and functionality

2026-01-23 14:51:14 -06:00
parent 171d30f0e0
commit 68fe011b35
8 changed files with 45648 additions and 0 deletions
@@ -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);
+  });
+});
@@ -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;
+}