From c99f5b207628166d3d7a242c0b36310a0fa9f4e4 Mon Sep 17 00:00:00 2001 From: cqb13 Date: Tue, 23 Jul 2024 16:47:15 -0400 Subject: [PATCH] website --- website/index.html | 160 +++++++++++++++++++++++++++++++++++++ website/loadPrograms.js | 90 +++++++++++++++++++++ website/programs.html | 68 ++++++++++++++++ website/style/global.css | 70 ++++++++++++++++ website/style/home.css | 52 ++++++++++++ website/style/programs.css | 44 ++++++++++ 6 files changed, 484 insertions(+) create mode 100644 website/index.html create mode 100644 website/loadPrograms.js create mode 100644 website/programs.html create mode 100644 website/style/global.css create mode 100644 website/style/home.css create mode 100644 website/style/programs.css diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..d16c101 --- /dev/null +++ b/website/index.html @@ -0,0 +1,160 @@ + + + + + + + + TI Programs + + +
+
+ +
+ + light + + + + + + + +
+
+
+

TI Programs

+

+ A collection of various programs for TI calculators. Programs are + written in TI-BASIC, and are in .8xp and .txt formats. +

+ Explore Programs +
+
+
+
+

Installing Programs

+ + 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 + TI Connect CE + to transfer the programs. You can also enter the programs manually on + the calculator if you prefer. + +
+
+

Making Programs

+ If you are interested in making your own programs, check out + Awesome TI Docs + for resources on learning TI-BASIC and programming for TI calculators. + +
+
+

Contributing

+

+ If you would like to add a program, please follow the guidelines + below: +

+
    +
  1. + Fork the + Github Repository. +
    2. +
  2. + Create a folder in the programs directory with your Github + username +
    3. +
  3. + Create a folder in your directory with the lowercase name of your + program. +
    4. +
  4. + Add your program in both .8xp and .txt formats. +
      +
    • + If you do not have a + .txt + version of your program, you can use + TI Tools + or an alternative to convert your + .8xp + file to a + .txt + file. +
      • +
    +
    5. +
  5. + Create an about.md file in your program's folder with the + following format: + 
    +                
+# Program Name
+
+Description of the program.
+                 
+## Credits
+                 
+Author: Your GitHub username
+                
+
    + + You can include additional information in the + about.md file, however you must always include a + Description immediately after the program name header, along with + the Author: in the credits section. + +
    6. +
  6. Create a pull request to this repository with your changes.
    7. +
+
+
+ + + diff --git a/website/loadPrograms.js b/website/loadPrograms.js new file mode 100644 index 0000000..3623f8a --- /dev/null +++ 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 new file mode 100644 index 0000000..7d2eb6f --- /dev/null +++ b/website/programs.html @@ -0,0 +1,68 @@ + + + + + + + + TI Programs + + +
+
+ +
+ + light + + + + + + + +
+
+
+

TI Programs

+
+
+
+

Loading Programs...

+
+
+ + + + diff --git a/website/style/global.css b/website/style/global.css new file mode 100644 index 0000000..fb0edb2 --- /dev/null +++ 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; +} diff --git a/website/style/home.css b/website/style/home.css new file mode 100644 index 0000000..b51b036 --- /dev/null +++ b/website/style/home.css @@ -0,0 +1,52 @@ +.title p { + display: block; + width: 50%; + font-size: 1.5rem; + text-align: center; + margin: 0; +} + +#explore { + all: unset; + margin-top: 2rem; + background-color: rgb(68, 159, 68); + padding: 1rem; + font-size: 2rem; + border-radius: 1rem; + cursor: pointer; +} + +#explore:hover { + background-color: rgba(68, 159, 68, 0.873); + border-radius: 1.1rem; + transition: ease-in-out; + transition-duration: 400ms; +} + +main a { + color: rgb(68, 159, 68); +} + +main section h2 { + font-size: 2rem; +} + +main section span { + display: block; + width: 70%; +} + +main section p, +span, +li { + font-size: 1.2rem; +} + +main section pre code { + font-size: 1rem; +} + +main section li i { + display: inline-block; + width: 70%; +} diff --git a/website/style/programs.css b/website/style/programs.css new file mode 100644 index 0000000..791f9a2 --- /dev/null +++ b/website/style/programs.css @@ -0,0 +1,44 @@ +#programs { + display: flex; + justify-items: center; + flex-wrap: wrap; + gap: 1rem; + margin-top: 2rem; +} + +.program-card { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 30%; + min-height: 10rem; + padding: 1rem; + border-radius: 1rem; + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + transition: all 0.3s; +} + +.program-card div { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.program-card div button { + all: unset; + cursor: pointer; + background-color: rgb(68, 159, 68); + border-radius: 1rem; + padding: 0.5rem 1rem; + width: 100%; + text-align: center; +} + +.program-card div button:hover { + background-color: rgba(68, 159, 68, 0.873); + border-radius: 1.1rem; + transition: ease-in-out; + transition-duration: 400ms; +}