website

cqb13 · Jul 23, 2024 · c99f5b2 · c99f5b2
1 parent ed65506
commit c99f5b2
Show file tree

Hide file tree

Showing 6 changed files with 484 additions and 0 deletions.
diff --git a/website/index.html b/website/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style/global.css" />
+    <link rel="stylesheet" href="./style/home.css" />
+    <title>TI Programs</title>
+  </head>
+  <body>
+    <header>
+      <section class="top-bar">
+        <nav>
+          <a href="index.html">Home</a>
+          <a href="programs.html">Programs</a>
+        </nav>
+        <div>
+          <svg
+            id="view-mode"
+            fill="#000000"
+            width="40px"
+            height="40px"
+            viewBox="-5.5 0 32 32"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>light</title>
+            <path
+              d="M11.875 6v2.469c0 0.844-0.375 1.25-1.156 1.25s-1.156-0.406-1.156-1.25v-2.469c0-0.813 0.375-1.219 1.156-1.219s1.156 0.406 1.156 1.219zM14.219 9.25l1.438-2.031c0.469-0.625 1.063-0.75 1.656-0.313s0.656 1 0.188 1.688l-1.438 2c-0.469 0.688-1.031 0.75-1.656 0.313-0.594-0.438-0.656-0.969-0.188-1.656zM5.781 7.25l1.469 2c0.469 0.688 0.406 1.219-0.219 1.656-0.594 0.469-1.156 0.375-1.625-0.313l-1.469-2c-0.469-0.688-0.406-1.219 0.219-1.656 0.594-0.469 1.156-0.375 1.625 0.313zM10.719 11.125c2.688 0 4.875 2.188 4.875 4.875 0 2.656-2.188 4.813-4.875 4.813s-4.875-2.156-4.875-4.813c0-2.688 2.188-4.875 4.875-4.875zM1.594 11.813l2.375 0.75c0.781 0.25 1.063 0.719 0.813 1.469-0.219 0.75-0.75 0.969-1.563 0.719l-2.313-0.75c-0.781-0.25-1.063-0.75-0.844-1.5 0.25-0.719 0.75-0.938 1.531-0.688zM17.5 12.563l2.344-0.75c0.813-0.25 1.313-0.031 1.531 0.688 0.25 0.75-0.031 1.25-0.844 1.469l-2.313 0.781c-0.781 0.25-1.281 0.031-1.531-0.719-0.219-0.75 0.031-1.219 0.813-1.469zM10.719 18.688c1.5 0 2.719-1.219 2.719-2.688 0-1.5-1.219-2.719-2.719-2.719s-2.688 1.219-2.688 2.719c0 1.469 1.188 2.688 2.688 2.688zM0.906 17.969l2.344-0.75c0.781-0.25 1.313-0.063 1.531 0.688 0.25 0.75-0.031 1.219-0.813 1.469l-2.375 0.781c-0.781 0.25-1.281 0.031-1.531-0.719-0.219-0.75 0.063-1.219 0.844-1.469zM18.219 17.219l2.344 0.75c0.781 0.25 1.063 0.719 0.813 1.469-0.219 0.75-0.719 0.969-1.531 0.719l-2.344-0.781c-0.813-0.25-1.031-0.719-0.813-1.469 0.25-0.75 0.75-0.938 1.531-0.688zM3.938 23.344l1.469-1.969c0.469-0.688 1.031-0.781 1.625-0.313 0.625 0.438 0.688 0.969 0.219 1.656l-1.469 1.969c-0.469 0.688-1.031 0.813-1.656 0.375-0.594-0.438-0.656-1.031-0.188-1.719zM16.063 21.375l1.438 1.969c0.469 0.688 0.406 1.281-0.188 1.719s-1.188 0.281-1.656-0.344l-1.438-2c-0.469-0.688-0.406-1.219 0.188-1.656 0.625-0.438 1.188-0.375 1.656 0.313zM11.875 23.469v2.469c0 0.844-0.375 1.25-1.156 1.25s-1.156-0.406-1.156-1.25v-2.469c0-0.844 0.375-1.25 1.156-1.25s1.156 0.406 1.156 1.25z"
+            />
+          </svg>
+          <a href="https://github.com/cqb13/ti-programs" target="_blank">
+            <svg
+              fill="#000000"
+              width="40px"
+              height="40px"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+              data-name="Layer 1"
+            >
+              <path
+                d="M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z"
+              />
+            </svg>
+          </a>
+        </div>
+      </section>
+      <section class="title">
+        <h1>TI Programs</h1>
+        <p>
+          A collection of various programs for TI calculators. Programs are
+          written in TI-BASIC, and are in <b>.8xp</b> and <b>.txt</b> formats.
+        </p>
+        <a href="programs.html" id="explore">Explore Programs</a>
+      </section>
+    </header>
+    <main>
+      <section>
+        <h2>Installing Programs</h2>
+        <span>
+          To use these programs, you will need a TI calculator and a way to
+          transfer the programs to the calculator. You can use a USB cable with
+          a program like
+          <a
+            href="https://education.ti.com/en/products/computer-software/ti-connect-ce-sw"
+            target="_blank"
+            >TI Connect CE</a
+          >
+          to transfer the programs. You can also enter the programs manually on
+          the calculator if you prefer.
+        </span>
+      </section>
+      <section>
+        <h2>Making Programs</h2>
+        <span
+          >If you are interested in making your own programs, check out
+          <a
+            href="https://github.com/TI-Toolkit/awesome-ti-docs/blob/main/README.md"
+            target="_blank"
+            >Awesome TI Docs</a
+          >
+          for resources on learning TI-BASIC and programming for TI calculators.
+        </span>
+      </section>
+      <section>
+        <h2>Contributing</h2>
+        <p>
+          If you would like to add a program, please follow the guidelines
+          below:
+        </p>
+        <ol>
+          <li>
+            Fork the
+            <a href="https://github.com/cqb13/ti-programs"
+              >Github Repository.</a
+            >
+          </li>
+          <li>
+            Create a folder in the <b>programs</b> directory with your Github
+            username
+          </li>
+          <li>
+            Create a folder in your directory with the lowercase name of your
+            program.
+          </li>
+          <li>
+            Add your program in both <b>.8xp</b> and <b>.txt</b> formats.
+            <ul>
+              <li>
+                If you do not have a
+                <b>.txt</b>
+                version of your program, you can use
+                <a href="https://github.com/cqb13/ti-tools" target="_blank"
+                  >TI Tools</a
+                >
+                or an alternative to convert your
+                <b>.8xp</b>
+                file to a
+                <b>.txt</b>
+                file.
+              </li>
+            </ul>
+          </li>
+          <li>
+            Create an <b>about.md</b> file in your program's folder with the
+            following format:
+            <pre>
+                <code>
+# Program Name
+
+Description of the program.
+
+## Credits
+
+Author: Your GitHub username
+                </code>
+            </pre>
+            <i>
+              You can include additional information in the
+              <b>about.md</b> file, however you must always include a
+              Description immediately after the program name header, along with
+              the <b>Author:</b> in the credits section.
+            </i>
+          </li>
+          <li>Create a pull request to this repository with your changes.</li>
+        </ol>
+      </section>
+    </main>
+    <footer>
+      <a
+        href="https://github.com/cqb13/ti-programs?tab=MIT-1-ov-file"
+        target="_blank"
+        >TI Programs | © 2024</a
+      >
+      <a href="https://github.com/cqb13" target="_blank"
+        >Created by Maksim Straus</a
+      >
+    </footer>
+  </body>
+</html>
diff --git a/website/loadPrograms.js b/website/loadPrograms.js
@@ -0,0 +1,90 @@
+const loading = document.getElementById("loading");
+const programs = document.getElementById("programs");
+
+const loadPrograms = async () => {
+  loading.style.display = "block";
+
+  try {
+    const response = await fetch(
+      "https://api.github.com/repos/cqb13/ti-programs/contents/programs"
+    );
+    const data = await response.json();
+
+    for (const userDirectory of data) {
+      if (userDirectory.type === "dir") {
+        const userResponse = await fetch(userDirectory.url);
+        const userFolders = await userResponse.json();
+
+        for (const programFolder of userFolders) {
+          if (programFolder.type === "dir") {
+            const programResponse = await fetch(programFolder.url);
+            const programFiles = await programResponse.json();
+
+            let name = "";
+            let download_url = "";
+            let txt_file_url = "";
+            let description = "";
+
+            for (const file of programFiles) {
+              if (file.name.endsWith(".8xp")) {
+                download_url = file.download_url;
+              } else if (file.name.endsWith(".txt")) {
+                txt_file_url = file.html_url;
+              } else if (file.name === "about.md") {
+                const aboutResponse = await fetch(file.download_url);
+              }
+            }
+
+            const programCard = createProgramCard(
+              name,
+              description,
+              download_url,
+              txt_file_url
+            );
+            programs.appendChild(programCard);
+          }
+        }
+      }
+    }
+  } catch (error) {
+    console.error("Error loading programs:", error);
+  } finally {
+    loading.style.display = "none";
+  }
+};
+
+const createProgramCard = (name, description, download_url, txt_file_url) => {
+  const programCard = document.createElement("div");
+  programCard.classList.add("program-card");
+
+  const h2 = document.createElement("h2");
+  h2.textContent = name;
+
+  const p = document.createElement("p");
+  p.textContent = description;
+
+  const div = document.createElement("div");
+
+  const download = document.createElement("button");
+  download.textContent = "Download";
+  download.addEventListener("click", () => {
+    window.location.href = download_url;
+  });
+
+  const view = document.createElement("button");
+  view.textContent = "View Code";
+  view.addEventListener("click", () => {
+    window.location.href = txt_file_url;
+  });
+
+  div.appendChild(download);
+  div.appendChild(view);
+
+  programCard.appendChild(h2);
+  programCard.appendChild(p);
+  programCard.appendChild(div);
+
+  return programCard;
+};
+
+loadPrograms();
diff --git a/website/programs.html b/website/programs.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style/global.css" />
+    <link rel="stylesheet" href="./style/programs.css" />
+    <title>TI Programs</title>
+  </head>
+  <body>
+    <header>
+      <section class="top-bar">
+        <nav>
+          <a href="index.html">Home</a>
+          <a href="programs.html">Programs</a>
+        </nav>
+        <div>
+          <svg
+            id="view-mode"
+            fill="#000000"
+            width="40px"
+            height="40px"
+            viewBox="-5.5 0 32 32"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>light</title>
+            <path
+              d="M11.875 6v2.469c0 0.844-0.375 1.25-1.156 1.25s-1.156-0.406-1.156-1.25v-2.469c0-0.813 0.375-1.219 1.156-1.219s1.156 0.406 1.156 1.219zM14.219 9.25l1.438-2.031c0.469-0.625 1.063-0.75 1.656-0.313s0.656 1 0.188 1.688l-1.438 2c-0.469 0.688-1.031 0.75-1.656 0.313-0.594-0.438-0.656-0.969-0.188-1.656zM5.781 7.25l1.469 2c0.469 0.688 0.406 1.219-0.219 1.656-0.594 0.469-1.156 0.375-1.625-0.313l-1.469-2c-0.469-0.688-0.406-1.219 0.219-1.656 0.594-0.469 1.156-0.375 1.625 0.313zM10.719 11.125c2.688 0 4.875 2.188 4.875 4.875 0 2.656-2.188 4.813-4.875 4.813s-4.875-2.156-4.875-4.813c0-2.688 2.188-4.875 4.875-4.875zM1.594 11.813l2.375 0.75c0.781 0.25 1.063 0.719 0.813 1.469-0.219 0.75-0.75 0.969-1.563 0.719l-2.313-0.75c-0.781-0.25-1.063-0.75-0.844-1.5 0.25-0.719 0.75-0.938 1.531-0.688zM17.5 12.563l2.344-0.75c0.813-0.25 1.313-0.031 1.531 0.688 0.25 0.75-0.031 1.25-0.844 1.469l-2.313 0.781c-0.781 0.25-1.281 0.031-1.531-0.719-0.219-0.75 0.031-1.219 0.813-1.469zM10.719 18.688c1.5 0 2.719-1.219 2.719-2.688 0-1.5-1.219-2.719-2.719-2.719s-2.688 1.219-2.688 2.719c0 1.469 1.188 2.688 2.688 2.688zM0.906 17.969l2.344-0.75c0.781-0.25 1.313-0.063 1.531 0.688 0.25 0.75-0.031 1.219-0.813 1.469l-2.375 0.781c-0.781 0.25-1.281 0.031-1.531-0.719-0.219-0.75 0.063-1.219 0.844-1.469zM18.219 17.219l2.344 0.75c0.781 0.25 1.063 0.719 0.813 1.469-0.219 0.75-0.719 0.969-1.531 0.719l-2.344-0.781c-0.813-0.25-1.031-0.719-0.813-1.469 0.25-0.75 0.75-0.938 1.531-0.688zM3.938 23.344l1.469-1.969c0.469-0.688 1.031-0.781 1.625-0.313 0.625 0.438 0.688 0.969 0.219 1.656l-1.469 1.969c-0.469 0.688-1.031 0.813-1.656 0.375-0.594-0.438-0.656-1.031-0.188-1.719zM16.063 21.375l1.438 1.969c0.469 0.688 0.406 1.281-0.188 1.719s-1.188 0.281-1.656-0.344l-1.438-2c-0.469-0.688-0.406-1.219 0.188-1.656 0.625-0.438 1.188-0.375 1.656 0.313zM11.875 23.469v2.469c0 0.844-0.375 1.25-1.156 1.25s-1.156-0.406-1.156-1.25v-2.469c0-0.844 0.375-1.25 1.156-1.25s1.156 0.406 1.156 1.25z"
+            />
+          </svg>
+          <a href="https://github.com/cqb13/ti-programs" target="_blank">
+            <svg
+              fill="#000000"
+              width="40px"
+              height="40px"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+              data-name="Layer 1"
+            >
+              <path
+                d="M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z"
+              />
+            </svg>
+          </a>
+        </div>
+      </section>
+      <section class="title">
+        <h1>TI Programs</h1>
+      </section>
+    </header>
+    <main>
+      <p id="loading">Loading Programs...</p>
+      <section id="programs"></section>
+    </main>
+    <footer>
+      <a
+        href="https://github.com/cqb13/ti-programs?tab=MIT-1-ov-file"
+        target="_blank"
+        >TI Programs | © 2024</a
+      >
+      <a href="https://github.com/cqb13" target="_blank"
+        >Created by Maksim Straus</a
+      >
+    </footer>
+    <script src="./loadPrograms.js"></script>
+  </body>
+</html>
diff --git a/website/style/global.css b/website/style/global.css
@@ -0,0 +1,70 @@
+body {
+  padding: 1rem;
+  background: #e3e3e3;
+}
+
+b {
+  color: rgb(68, 159, 68);
+}
+
+.top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+nav a {
+  all: unset;
+  font-size: 1.4rem;
+  padding: 1rem;
+  border-radius: 0.9rem;
+}
+
+nav a:hover {
+  background-color: rgb(68, 159, 68);
+  border-radius: 1rem;
+  transition: ease-in-out;
+  transition-duration: 400ms;
+  cursor: pointer;
+}
+
+#view-mode {
+  cursor: pointer;
+}
+
+.title {
+  padding: 10rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.title h1 {
+  font-size: 5rem;
+  text-align: center;
+  margin: 0;
+}
+
+main {
+  padding-left: 10rem;
+  padding-right: 10rem;
+}
+
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+}
+
+footer a {
+  color: black;
+}