From 255ae3510d08bf3bbef7018860c0831581d87f4c Mon Sep 17 00:00:00 2001
From: RandomFella <amirkivam@gmail.com>
Date: Mon, 24 Nov 2025 17:52:23 -0600
Subject: [PATCH 1/4] add game searching

---
 js/g.js | 117 +++++++++++++++++++++++++++++++-------------------------
 1 file changed, 64 insertions(+), 53 deletions(-)

diff --git a/js/g.js b/js/g.js
index 22620ec..3720cbf 100644
--- a/js/g.js
+++ b/js/g.js
@@ -1,54 +1,65 @@
-//findsmy games in my json file, loading them one by one.
-fetch('js/json/g.json')
-    .then(response => response.json())
-    .then(games => {
-        const container = document.getElementById('games-container');
-        const statusEl = document.getElementById('gameStatus');
-        const grid = document.createElement('div');
-        grid.className = 'games-grid';
-        
-        let loaded = 0;
-        const total = games.length;
-        
-        statusEl.textContent = `loading ${loaded}/${total} games...`;
-        //loads the games on a grid
-        games.forEach((game, index) => {
-            setTimeout(() => {
-                const card = document.createElement('div');
-                card.className = 'game-card';
-                
-                const img = document.createElement('img');
-                img.src = `img/games/${game.id}.webp`;
-                img.alt = game.name;
-                img.onerror = function() {
-                    this.src = 'img/games/default.webp';
-                };
-                
-                const name = document.createElement('span');
-                name.textContent = game.name;
-                
-                card.appendChild(img);
-                card.appendChild(name);
-                
-                card.addEventListener('click', () => {
-                    openGame(game.name, game.url);
-                });
-                
-                grid.appendChild(card);
-                
-                loaded++;
-                if (loaded < total) {
-                    statusEl.textContent = `loading ${loaded}/${total} games...`;
-                } else {
-                    statusEl.textContent = `showing ${total} games`;
-                }
-            }, index * 10);
-        });
-        
-        container.appendChild(grid);
-    })
-    //this shows if the games broke or smth.
-    .catch(error => {
-        console.error('error loading games:', error);
-        document.getElementById('gameStatus').textContent = 'error loading games';
+const searchBar = document.getElementById("searchGames");
+
+function loadGames(filter = "") {
+  fetch("js/json/g.json")
+    .then((res) => res.json())
+    .then((games) => {
+      const container = document.getElementById("games-container");
+      container.innerHTML = "";
+      const statusEl = document.getElementById("gameStatus");
+      const grid = document.createElement("div");
+      grid.className = "games-grid";
+
+      const filteredGames = games.filter((g) =>
+        g.name.toLowerCase().includes(filter.toLowerCase())
+      );
+
+      let loaded = 0;
+      const total = filteredGames.length;
+      statusEl.textContent = `loading ${loaded}/${total} games...`;
+
+      if (filteredGames.length === 0) {
+        return (statusEl.textContent = "No games found");
+      }
+
+      filteredGames.forEach((game, index) => {
+        setTimeout(() => {
+          const card = document.createElement("div");
+          card.className = "game-card";
+          const img = document.createElement("img");
+          img.src = `img/games/${game.id}.webp`;
+          img.alt = game.name;
+          img.onerror = () => (img.src = "img/games/default.webp");
+          const name = document.createElement("span");
+          name.textContent = game.name;
+          card.appendChild(img);
+          card.appendChild(name);
+          card.addEventListener("click", () => openGame(game.name, game.url));
+          grid.appendChild(card);
+          loaded++;
+          statusEl.textContent =
+            loaded < total
+              ? `loading ${loaded}/${total} games...`
+              : `showing ${total} games`;
+        }, index * 10);
+      });
+
+      container.appendChild(grid);
+    }) // imagine having error handling
+    .catch((err) => {
+      console.error("error loading games:", err);
+      document.getElementById("gameStatus").textContent = "error loading games";
     });
+}
+
+loadGames();
+
+// omg searching!! 
+let searchTimeout;
+
+searchBar.addEventListener("input", (e) => {
+  clearTimeout(searchTimeout);
+  searchTimeout = setTimeout(() => {
+    loadGames(searchBar.value);
+  }, 300);
+});

From 0b3014cef52183fd25f2553dd63f99c98e4be600 Mon Sep 17 00:00:00 2001
From: RandomFella <amirkivam@gmail.com>
Date: Mon, 24 Nov 2025 17:52:49 -0600
Subject: [PATCH 2/4] add css for searchbar

---
 css/s.css | 972 +++++++++++++++++++++++++++---------------------------
 1 file changed, 495 insertions(+), 477 deletions(-)

diff --git a/css/s.css b/css/s.css
index 83e1927..bc8fc41 100644
--- a/css/s.css
+++ b/css/s.css
@@ -1,760 +1,778 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 ::-webkit-scrollbar {
-    width: 8px;
+  width: 8px;
 }
 
 ::-webkit-scrollbar-track {
-    background: #0a0a0a;
+  background: #0a0a0a;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #7cb342;
-    border-radius: 4px;
+  background: #7cb342;
+  border-radius: 4px;
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Schoolbell', sans-serif;
-    background: #0a0a0a;
-    color: #e8e8e8;
-    line-height: 1.6;
-    -webkit-font-smoothing: antialiased;
+  font-family: -apple-system, BlinkMacSystemFont, "Schoolbell", sans-serif;
+  background: #0a0a0a;
+  color: #e8e8e8;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
 }
 
 body.reduce-motion * {
-    animation: none !important;
-    transition: none !important;
+  animation: none !important;
+  transition: none !important;
 }
 
 body.compact-mode .container {
-    max-width: 1200px;
+  max-width: 1200px;
 }
 
 body.compact-mode .intro {
-    padding: 40px 0 20px;
+  padding: 40px 0 20px;
 }
 
 body.compact-mode .stats {
-    gap: 12px;
-    padding: 20px 0 40px;
+  gap: 12px;
+  padding: 20px 0 40px;
 }
 
 body.menu-open {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .wrapper {
-    min-height: 100vh;
+  min-height: 100vh;
 }
 
 .container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 0 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 24px;
 }
 
 header {
-    position: sticky;
-    top: 0;
-    background: rgba(14, 14, 14, 0.85);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-bottom: 1px solid #1f1f1f;
-    padding: 20px 0;
-    z-index: 100;
+  position: sticky;
+  top: 0;
+  background: rgba(14, 14, 14, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid #1f1f1f;
+  padding: 20px 0;
+  z-index: 100;
 }
 
 header .container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .logo {
-    font-size: 22px;
-    font-weight: 600;
-    color: #7cb342;
-    letter-spacing: -0.5px;
+  font-size: 22px;
+  font-weight: 600;
+  color: #7cb342;
+  letter-spacing: -0.5px;
 }
 
 nav {
-    display: flex;
-    gap: 32px;
+  display: flex;
+  gap: 32px;
 }
 
 nav a {
-    color: #888;
-    text-decoration: none;
-    font-size: 15px;
-    font-weight: 500;
-    transition: color 0.2s ease;
+  color: #888;
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 500;
+  transition: color 0.2s ease;
 }
 
 nav a:hover {
-    color: #d0d0d0;
+  color: #d0d0d0;
 }
 
 nav a.active {
-    color: #fff;
+  color: #fff;
 }
 
 .mobile-menu-btn {
-    display: none;
-    flex-direction: column;
-    gap: 5px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 8px;
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
 }
 
 .mobile-menu-btn span {
-    width: 24px;
-    height: 2px;
-    background: #e8e8e8;
-    transition: all 0.3s ease;
+  width: 24px;
+  height: 2px;
+  background: #e8e8e8;
+  transition: all 0.3s ease;
 }
 
 .mobile-menu-btn.active span:nth-child(1) {
-    transform: rotate(45deg) translateY(7px);
+  transform: rotate(45deg) translateY(7px);
 }
 
 .mobile-menu-btn.active span:nth-child(2) {
-    opacity: 0;
+  opacity: 0;
 }
 
 .mobile-menu-btn.active span:nth-child(3) {
-    transform: rotate(-45deg) translateY(-7px);
+  transform: rotate(-45deg) translateY(-7px);
 }
 
 .intro {
-    padding: 80px 0 40px;
-    text-align: center;
+  padding: 80px 0 40px;
+  text-align: center;
 }
 
 .intro h2 {
-    font-size: 48px;
-    font-weight: 600;
-    color: #fff;
-    margin-bottom: 12px;
-    letter-spacing: -1px;
+  font-size: 48px;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 12px;
+  letter-spacing: -1px;
 }
 
 .intro p {
-    font-size: 17px;
-    color: #999;
-    font-weight: 400;
+  font-size: 17px;
+  color: #999;
+  font-weight: 400;
 }
 
 .stats {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 24px;
-    padding: 30px 0 60px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+  padding: 30px 0 60px;
 }
 
 .stat-box {
-    background: #141414;
-    border: 1px solid #1f1f1f;
-    border-radius: 10px;
-    padding: 32px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    cursor: default;
+  background: #141414;
+  border: 1px solid #1f1f1f;
+  border-radius: 10px;
+  padding: 32px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  cursor: default;
 }
 
 .stat-number {
-    font-size: 40px;
-    font-weight: 700;
-    color: #7cb342; 
-    margin-bottom: 8px;
-    letter-spacing: -1px;
-    line-height: 1;
+  font-size: 40px;
+  font-weight: 700;
+  color: #7cb342;
+  margin-bottom: 8px;
+  letter-spacing: -1px;
+  line-height: 1;
 }
 
 .stat-label {
-    font-size: 15px;
-    color: #999;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
+  font-size: 15px;
+  color: #999;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
 }
 
 .info-box {
-    background: #1f1f1f;
-    border: 1px solid #2a2a2a;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 24px;
-    display: flex;
-    align-items: flex-start;
-    gap: 16px;
+  background: #1f1f1f;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 24px;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
 }
 
 .info-icon {
-    color: #7cb342;
-    font-size: 24px;
-    line-height: 1;
-    flex-shrink: 0;
+  color: #7cb342;
+  font-size: 24px;
+  line-height: 1;
+  flex-shrink: 0;
 }
 
 .info-content h4 {
-    font-size: 16px;
-    font-weight: 600;
-    color: #fff;
-    margin-bottom: 4px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 4px;
 }
 
 .info-content p {
-    font-size: 14px;
-    color: #b0b0b0;
+  font-size: 14px;
+  color: #b0b0b0;
 }
 
 .info-box.alert {
-    border-left: 5px solid #d32f2f;
-    background: #1f1414; 
+  border-left: 5px solid #d32f2f;
+  background: #1f1414;
 }
 
 .info-box.alert .info-icon {
-    color: #d32f2f;
+  color: #d32f2f;
 }
 
 .info-box.tip {
-    border-left: 5px solid #ffeb3b;
-    background: #1f1f14; 
+  border-left: 5px solid #ffeb3b;
+  background: #1f1f14;
 }
 
 .info-box.tip .info-icon {
-    color: #ffeb3b;
+  color: #ffeb3b;
 }
 
 .featured {
-    padding: 0 0 60px;
+  padding: 0 0 60px;
 }
 
 .featured h3 {
-    font-size: 20px;
-    font-weight: 600;
-    color: #fff;
-    margin-bottom: 24px;
-    letter-spacing: -0.3px;
+  font-size: 20px;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 24px;
+  letter-spacing: -0.3px;
 }
 
 .featured-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 16px;
 }
 
 .games-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-    gap: 16px;
-    padding: 0 0 80px;
-    justify-items: center;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 16px;
+  padding: 0 0 80px;
+  justify-items: center;
 }
 
 .game-card {
-    background: #141414;
-    border: 1px solid #1f1f1f;
-    border-radius: 6px;
-    overflow: hidden;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    width: 100%;
-    max-width: 200px;
+  background: #141414;
+  border: 1px solid #1f1f1f;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+  max-width: 200px;
 }
 
 .game-card:hover {
-    transform: scale(1.02);
+  transform: scale(1.02);
 }
 
 .game-card img {
-    width: 100%;
-    height: 140px;
-    object-fit: cover;
-    background: #0a0a0a;
-    display: block;
+  width: 100%;
+  height: 140px;
+  object-fit: cover;
+  background: #0a0a0a;
+  display: block;
 }
 
 .game-card span {
-    display: block;
-    color: #e8e8e8;
-    font-size: 14px;
-    font-weight: 500;
-    padding: 14px;
+  display: block;
+  color: #e8e8e8;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 14px;
 }
 
 .settings-section {
-    padding: 0 0 80px;
+  padding: 0 0 80px;
 }
 
 .settings-group {
-    background: #141414;
-    border: 1px solid #1f1f1f;
-    border-radius: 6px;
-    padding: 28px;
-    margin-bottom: 16px;
+  background: #141414;
+  border: 1px solid #1f1f1f;
+  border-radius: 6px;
+  padding: 28px;
+  margin-bottom: 16px;
 }
 
 .settings-group h3 {
-    font-size: 18px;
-    font-weight: 600;
-    color: #fff;
-    margin-bottom: 20px;
-    letter-spacing: -0.3px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 20px;
+  letter-spacing: -0.3px;
 }
 
 .setting-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 0;
-    border-bottom: 1px solid #1f1f1f;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  border-bottom: 1px solid #1f1f1f;
 }
 
 .setting-row:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
+  border-bottom: none;
+  padding-bottom: 0;
 }
 
 .setting-label {
-    font-size: 15px;
-    color: #d0d0d0;
-    font-weight: 500;
+  font-size: 15px;
+  color: #d0d0d0;
+  font-weight: 500;
 }
 
 .toggle-switch {
-    width: 44px;
-    height: 24px;
-    background: #1f1f1f;
-    position: relative;
-    cursor: pointer;
-    border-radius: 12px;
-    transition: background 0.2s ease;
+  width: 44px;
+  height: 24px;
+  background: #1f1f1f;
+  position: relative;
+  cursor: pointer;
+  border-radius: 12px;
+  transition: background 0.2s ease;
 }
 
 .toggle-switch.on {
-    background: #7cb342;
+  background: #7cb342;
 }
 
 .toggle-handle {
-    width: 20px;
-    height: 20px;
-    background: #fff;
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    transition: left 0.2s ease;
-    border-radius: 10px;
+  width: 20px;
+  height: 20px;
+  background: #fff;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: left 0.2s ease;
+  border-radius: 10px;
 }
 
 .toggle-switch.on .toggle-handle {
-    left: 22px;
+  left: 22px;
 }
 
 .action-btn {
-    background: #7cb342;
-    color: #0a0a0a;
-    border: none;
-    border-radius: 6px;
-    padding: 10px 24px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
+  background: #7cb342;
+  color: #0a0a0a;
+  border: none;
+  border-radius: 6px;
+  padding: 10px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
 .action-btn:hover {
-    background: #8bc34a;
+  background: #8bc34a;
 }
 
 .action-btn:active {
-    background: #689f38;
+  background: #689f38;
 }
 
 .action-btn.danger {
-    background: #d32f2f;
-    color: #fff;
+  background: #d32f2f;
+  color: #fff;
 }
 
 .action-btn.danger:hover {
-    background: #e53935;
+  background: #e53935;
 }
 
 .action-btn.danger:active {
-    background: #b71c1c;
+  background: #b71c1c;
 }
 
 .game-frame {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #0a0a0a;
-    z-index: 1000;
-    display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #0a0a0a;
+  z-index: 1000;
+  display: none;
 }
 
 .game-frame.active {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .frame-header {
-    background: #0e0e0e;
-    padding: 16px 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid #1f1f1f;
-    flex-shrink: 0;
+  background: #0e0e0e;
+  padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #1f1f1f;
+  flex-shrink: 0;
 }
 
 .frame-title {
-    color: #fff;
-    font-size: 16px;
-    font-weight: 600;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .close-btn {
-    background: #7cb342;
-    color: #0a0a0a;
-    border: none;
-    border-radius: 6px;
-    padding: 8px 20px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: background 0.2s ease;
+  background: #7cb342;
+  color: #0a0a0a;
+  border: none;
+  border-radius: 6px;
+  padding: 8px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease;
 }
 
 .close-btn:hover {
-    background: #8bc34a;
+  background: #8bc34a;
 }
 
 .game-iframe-container {
-    flex: 1;
-    position: relative;
-    background: #0a0a0a;
+  flex: 1;
+  position: relative;
+  background: #0a0a0a;
 }
 
 .game-frame iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
-    display: none;
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: none;
 }
 
 .game-frame iframe.loaded {
-    display: block;
+  display: block;
 }
 
 .loading-screen {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: #0a0a0a;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #0a0a0a;
 }
 
 .loading-screen.hidden {
-    display: none;
+  display: none;
 }
 
 .loader {
-    width: 40px;
-    height: 40px;
-    border: 3px solid #1f1f1f;
-    border-top-color: #7cb342;
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
+  width: 40px;
+  height: 40px;
+  border: 3px solid #1f1f1f;
+  border-top-color: #7cb342;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .loading-text {
-    color: #888;
-    font-size: 14px;
-    margin-top: 16px;
-    font-weight: 500;
+  color: #888;
+  font-size: 14px;
+  margin-top: 16px;
+  font-weight: 500;
 }
 
 .mobile-popup {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.85);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 9999;
-    padding: 24px;
-    animation: fadeIn 0.3s ease;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 24px;
+  animation: fadeIn 0.3s ease;
 }
 
 .mobile-popup.fade-out {
-    animation: fadeOut 0.2s ease forwards;
+  animation: fadeOut 0.2s ease forwards;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes fadeOut {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
 .mobile-popup-content {
-    background: #141414;
-    border: 1px solid #2a2a2a;
-    border-radius: 12px;
-    padding: 40px 32px;
-    max-width: 420px;
-    width: 100%;
-    text-align: center;
-    animation: slideUp 0.4s ease;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  border-radius: 12px;
+  padding: 40px 32px;
+  max-width: 420px;
+  width: 100%;
+  text-align: center;
+  animation: slideUp 0.4s ease;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
 }
 
 @keyframes slideUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .mobile-popup h3 {
-    color: #fff;
-    font-size: 22px;
-    font-weight: 600;
-    margin-bottom: 16px;
-    letter-spacing: -0.3px;
+  color: #fff;
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  letter-spacing: -0.3px;
 }
 
 .mobile-popup p {
-    color: #999;
-    font-size: 15px;
-    line-height: 1.6;
-    margin-bottom: 32px;
+  color: #999;
+  font-size: 15px;
+  line-height: 1.6;
+  margin-bottom: 32px;
 }
 
 .mobile-popup-btn {
-    background: #7cb342;
-    color: #0a0a0a;
-    border: none;
-    border-radius: 8px;
-    padding: 14px 40px;
-    font-size: 15px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    width: 100%;
-    max-width: 200px;
+  background: #7cb342;
+  color: #0a0a0a;
+  border: none;
+  border-radius: 8px;
+  padding: 14px 40px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+  max-width: 200px;
 }
 
 .mobile-popup-btn:hover {
-    background: #8bc34a;
+  background: #8bc34a;
 }
 
 .mobile-popup-btn:active {
-    transform: translateY(0);
+  transform: translateY(0);
 }
 
 @media (max-width: 1024px) {
-    .games-grid {
-        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    }
-    
-    .featured-grid {
-        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-    }
+  .games-grid {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  }
+
+  .featured-grid {
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  }
 }
 
 @media (max-width: 768px) {
-    .intro h2 {
-        font-size: 36px;
-    }
-    
-    .intro p {
-        font-size: 16px;
-    }
-    
-    .stats {
-        grid-template-columns: 1fr;
-        gap: 16px; 
-        padding: 20px 0 40px;
-    }
-
-    .stat-box {
-        padding: 24px 20px;
-    }
-
-    .stat-number {
-        font-size: 32px; 
-    }
-    
-    nav {
-        position: fixed;
-        top: 70px;
-        left: 0;
-        right: 0;
-        background: rgba(14, 14, 14, 0.98);
-        backdrop-filter: blur(20px);
-        flex-direction: column;
-        gap: 0;
-        padding: 0;
-        transform: translateY(-100%);
-        transition: transform 0.3s ease;
-        border-bottom: 1px solid #1f1f1f;
-        z-index: 99;
-    }
-    
-    nav.active {
-        transform: translateY(0);
-    }
-    
-    nav a {
-        display: block;
-        padding: 18px 24px;
-        border-bottom: 1px solid #1f1f1f;
-    }
-    
-    nav a:last-child {
-        border-bottom: none;
-    }
-    
-    .mobile-menu-btn {
-        display: flex;
-    }
-    
-    .container {
-        padding: 0 16px;
-    }
-    
-    header {
-        padding: 16px 0;
-    }
-    
-    .intro {
-        padding: 40px 0 24px;
-    }
-    
-    .settings-group {
-        padding: 20px;
-    }
-    
-    .setting-row {
-        flex-wrap: wrap;
-        gap: 12px;
-    }
-    
-    .setting-label {
-        font-size: 14px;
-    }
-    
-    .games-grid {
-        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
-        gap: 12px;
-    }
-    
-    .game-card img {
-        height: 120px;
-    }
-    
-    .game-card span {
-        font-size: 13px;
-        padding: 12px;
-    }
-    
-    .featured-grid {
-        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-        gap: 12px;
-    }
-    
-    .action-btn {
-        width: 100%;
-        margin-top: 8px;
-    }
+  .intro h2 {
+    font-size: 36px;
+  }
+
+  .intro p {
+    font-size: 16px;
+  }
+
+  .stats {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    padding: 20px 0 40px;
+  }
+
+  .stat-box {
+    padding: 24px 20px;
+  }
+
+  .stat-number {
+    font-size: 32px;
+  }
+
+  nav {
+    position: fixed;
+    top: 70px;
+    left: 0;
+    right: 0;
+    background: rgba(14, 14, 14, 0.98);
+    backdrop-filter: blur(20px);
+    flex-direction: column;
+    gap: 0;
+    padding: 0;
+    transform: translateY(-100%);
+    transition: transform 0.3s ease;
+    border-bottom: 1px solid #1f1f1f;
+    z-index: 99;
+  }
+
+  nav.active {
+    transform: translateY(0);
+  }
+
+  nav a {
+    display: block;
+    padding: 18px 24px;
+    border-bottom: 1px solid #1f1f1f;
+  }
+
+  nav a:last-child {
+    border-bottom: none;
+  }
+
+  .mobile-menu-btn {
+    display: flex;
+  }
+
+  .container {
+    padding: 0 16px;
+  }
+
+  header {
+    padding: 16px 0;
+  }
+
+  .intro {
+    padding: 40px 0 24px;
+  }
+
+  .settings-group {
+    padding: 20px;
+  }
+
+  .setting-row {
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .setting-label {
+    font-size: 14px;
+  }
+
+  .games-grid {
+    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+    gap: 12px;
+  }
+
+  .game-card img {
+    height: 120px;
+  }
+
+  .game-card span {
+    font-size: 13px;
+    padding: 12px;
+  }
+
+  .featured-grid {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 12px;
+  }
+
+  .action-btn {
+    width: 100%;
+    margin-top: 8px;
+  }
 }
 
 @media (max-width: 480px) {
-    .intro h2 {
-        font-size: 28px;
-    }
-    
-    .logo {
-        font-size: 20px;
-    }
-    
-    .games-grid {
-        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-        gap: 10px;
-    }
-    
-    .game-card {
-        max-width: 150px;
-    }
-    
-    .game-card img {
-        height: 100px;
-    }
+  .intro h2 {
+    font-size: 28px;
+  }
+
+  .logo {
+    font-size: 20px;
+  }
+
+  .games-grid {
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    gap: 10px;
+  }
+
+  .game-card {
+    max-width: 150px;
+  }
+
+  .game-card img {
+    height: 100px;
+  }
 }
 .discord {
-    text-align: center;
-    margin: 0px 0;
+  text-align: center;
+  margin: 0px 0;
 }
 
 .discord-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    background-color: #5865F2;
-    color: white;
-    text-decoration: none;
-    padding: 12px 24px;
-    border-radius: 8px;
-    font-weight: bold;
-    font-size: 1.1rem;
-    transition: background-color 0.3s ease, transform 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  background-color: #5865f2;
+  color: white;
+  text-decoration: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: bold;
+  font-size: 1.1rem;
+  transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
 .discord-button:hover {
-    background-color: #4752C4;
-    transform: scale(1.05);
+  background-color: #4752c4;
+  transform: scale(1.05);
 }
 
 .discord-icon {
-    width: 24px;
-    height: 24px;
+  width: 24px;
+  height: 24px;
+}
+
+#searchGames {
+  font-family: -apple-system, BlinkMacSystemFont, "Schoolbell", sans-serif;
+  background-color: black;
+  color: white;
+  border: 1px solid #5d8532;
+  padding: 7px;
+  border-radius: 7px;
+  transition: border 0.3s ease;
+  width: 25%;
+}
+
+#searchGames:focus {
+  outline: none;
+  border-color: white;
 }

From 3c2762fa516832ed39999a953645f7c0752298f7 Mon Sep 17 00:00:00 2001
From: RandomFella <amirkivam@gmail.com>
Date: Mon, 24 Nov 2025 17:53:08 -0600
Subject: [PATCH 3/4] Refactor HTML structure and meta tags

---
 math.html | 105 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 63 insertions(+), 42 deletions(-)

diff --git a/math.html b/math.html
index e415b3c..1796537 100644
--- a/math.html
+++ b/math.html
@@ -1,51 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Google Classroom helps teachers create, distribute, and grade assignments in a paperless way. Streamline education with easy class management and communication.">
-    <meta name="keywords" content="google classroom, online learning, education, teaching tools, classroom management, assignments, grading">
-    <meta name="author" content="Google">
-    <meta name="theme-color" content="#1a73e8">
-    <meta name="msapplication-TileColor" content="#1a73e8">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Google Classroom helps teachers create, distribute, and grade assignments in a paperless way. Streamline education with easy class management and communication."
+    />
+    <meta
+      name="keywords"
+      content="google classroom, online learning, education, teaching tools, classroom management, assignments, grading"
+    />
+    <meta name="author" content="Google" />
+    <meta name="theme-color" content="#1a73e8" />
+    <meta name="msapplication-TileColor" content="#1a73e8" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>fyinx - math</title>
-    <link rel="icon" type="image/png" href="n.png" id="favicon">
-    <link href="https://fonts.googleapis.com/css2?family=Schoolbell&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="css/s.css">
-</head>
-<script type='text/javascript' src='//pl27970438.effectivegatecpm.com/d9/50/39/d9503972f866e79fd9f278e02d955a67.js'></script>
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-YMKR6TMF13"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-YMKR6TMF13');
-</script>
-<body>
+    <link rel="icon" type="image/png" href="n.png" id="favicon" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Schoolbell&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="css/s.css" />
+  </head>
+  <script
+    type="text/javascript"
+    src="//pl27970438.effectivegatecpm.com/d9/50/39/d9503972f866e79fd9f278e02d955a67.js"
+  ></script>
+  <script
+    async
+    src="https://www.googletagmanager.com/gtag/js?id=G-YMKR6TMF13"
+  ></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+    gtag("config", "G-YMKR6TMF13");
+  </script>
+  <body>
     <div class="wrapper">
-        <header>
-            <div class="container">
-                <h1 class="logo">fyinx</h1>
-                <nav>
-                    <a href="index.html">home</a>
-                    <a href="math.html" class="active">games</a>
-                    <a href="studying.html">settings</a>
-                </nav>
-            </div>
-        </header>
-        <main class="container">
-            <section class="intro">
-                <h2>all games</h2>
-                <p id="gameStatus">loading games...</p>
-            </section>
-            <div id="games-container"></div>
-        </main>
+      <header>
+        <div class="container">
+          <h1 class="logo">fyinx</h1>
+          <nav>
+            <a href="index.html">home</a>
+            <a href="math.html" class="active">games</a>
+            <a href="studying.html">settings</a>
+          </nav>
+        </div>
+      </header>
+      <main class="container">
+        <section class="intro">
+          <h2>all games</h2>
+          <input type="text" id="searchGames" placeholder="Search games..." />
+          <p id="gameStatus">loading games...</p>
+        </section>
+        <div id="games-container"></div>
+      </main>
     </div>
     <script src="js/g.js"></script>
     <script src="js/a.js"></script>
     <script src="js/t.js"></script>
-    <script type='text/javascript' src='//pl27970438.effectivegatecpm.com/d9/50/39/d9503972f866e79fd9f278e02d955a67.js'></script>
-</body>
+    <script
+      type="text/javascript"
+      src="//pl27970438.effectivegatecpm.com/d9/50/39/d9503972f866e79fd9f278e02d955a67.js"
+    ></script>
+  </body>
 </html>

From 358c462c80981a641aff91e9ed5a33a9c40b4378 Mon Sep 17 00:00:00 2001
From: RandomFella <amirkivam@gmail.com>
Date: Mon, 24 Nov 2025 17:53:17 -0600
Subject: [PATCH 4/4] Update studying.html

---
 studying.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/studying.html b/studying.html
index 00b4f8e..b95b8b1 100644
--- a/studying.html
+++ b/studying.html
@@ -80,11 +80,11 @@ <h3>data</h3>
                     <h3>about</h3>
                     <div class="setting-row">
                         <span class="setting-label">version</span>
-                        <span class="setting-label">1.0.1</span>
+                        <span class="setting-label">1.0.2/span>
                     </div>
                     <div class="setting-row">
                         <span class="setting-label">updated</span>
-                        <span class="setting-label">11/01/25</span>
+                        <span class="setting-label">11/24/25</span>
                     </div>
                     <div class="setting-row">
                         <span class="setting-label">device</span>