@arcade-v/arcade_v 0.1.0

package/.gitlab-ci.yml

@@ -0,0 +1,14 @@
+# This file is a template, and might need editing before it works on your project.
+# Full project: https://gitlab.com/pages/plain-html
+
+image: busybox
+
+pages:
+  stage: deploy
+  script:
+    - echo "The site will be deployed to $CI_PAGES_URL"
+  artifacts:
+    paths:
+      - public
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

package/README.md

@@ -0,0 +1,105 @@
+<div align="center">
+        <a href="https://gitlab.com/arcade_v/arcade_v/" target="_blank">
+        <img src="https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/arcade_v_title.png" 
+        alt="title"
+    </a>
+</div>
+           
+**Arcade V** is a web-based collection of classic and modern browser games, designed to be easily hosted and customizable.
+
+## How to Use the Site
+Click a couple of times, then enter the site’s entry code (**Z, M, G** by default) in order — not all at once — and the games should load.
+
+## Hosting the site
+
+1. Copy **any** of the HTML files from the `loadsite` folder.  
+   - Each one has a different disguise but all should load the games once the entry code is entered.  
+2. Locate this function in the code:
+
+   ```js
+   enableSecretLetterCode("Z", "M", "G");
+3. You can replace the letters in the function to change the entry code.  
+4. Paste the code into any website builder with an HTML embed, such as:
+- [Google Sites](https://sites.google.com)  
+- [Weebly](https://www.weebly.com/)  
+- [Tiiny.host](https://Tiiny.host)  
+
+## Demo Links
+It is **heavily recommended** you host your own with the previously mentioned instructions
+- [https://sites.google.com/view/fractions-are-cool/home](https://sites.google.com/view/fractions-are-cool/home)
+- [https://sites.google.com/view/parts-of-a-cell/home](https://sites.google.com/view/parts-of-a-cell/home)  
+- [https://sites.google.com/view/multiplication-tables-27/home](https://sites.google.com/view/multiplication-tables-27/home)
+- [https://sites.google.com/view/the-water-cycle-abc/the-water-cycle](https://sites.google.com/view/the-water-cycle-abc/the-water-cycle)  
+- [https://sites.google.com/view/negative-numbers/negative-numbers](https://sites.google.com/view/negative-numbers/negative-numbers)  
+- [https://sites.google.com/view/interactive-geometry-quiz/interactive-geometry-quiz](https://sites.google.com/view/interactive-geometry-quiz/interactive-geometry-quiz)  
+- [https://sites.google.com/view/chemical-reactions-2025/chemical-reactions](https://sites.google.com/view/chemical-reactions-2025/chemical-reactions)  
+
+## Credits
+- [0014049](https://scratch.mit.edu/users/0014049/)
+- [123CCODER](https://scratch.mit.edu/users/123CCODER/)
+- [1dat_doodles](https://scratch.mit.edu/users/1dat_doodles/)
+- [a456pur](https://github.com/a456pur)
+- [Aaronhoffer](https://scratch.mit.edu/users/Aaronhoffer/)
+- [Alphabetica](https://scratch.mit.edu/users/Alphabetica/)
+- [nonygoose](https://penguinmod.com/profile?user=anonygoose)
+- [ArnoHu](https://scratch.mit.edu/users/ArnoHu/)
+- [Awesome-llama](https://scratch.mit.edu/users/Awesome-llama/)
+- [Beagle_12](https://scratch.mit.edu/users/Beagle_12/)
+- [Burnedpopcorn](https://github.com/burnedpopcorn)
+- [c1tcher](https://github.com/waycrosspublicmedia)
+- [Chipm0nk](https://scratch.mit.edu/users/Chipm0nk/)
+- [ChuckSploder](https://scratch.mit.edu/users/ChuckSploder/)
+- [cloter](https://scratch.mit.edu/users/cloter/)
+- [Colinmacc](https://scratch.mit.edu/users/Colinmacc/)
+- [Coltroc](https://scratch.mit.edu/users/Coltroc/)
+- [Corbin](https://98cornbin.netlify.app/)
+- [CrystalKeeper7](https://scratch.mit.edu/users/CrystalKeeper7/)
+- [David_783576](https://scratch.mit.edu/users/David_783576/)
+- [Demonic_Chicken](https://scratch.mit.edu/users/Demonic_Chicken/)
+- [Dillyd](https://scratch.mit.edu/users/Dillyd/)
+- [Dixiklo](https://scratch.mit.edu/users/Dixiklo/)
+- [DomPizzie](https://github.com/DomPizzie)
+- [Donsje_Partner](https://scratch.mit.edu/users/Donsje_Partner/)
+- [Dragon Field](https://scratch.mit.edu/users/DragonField-/)
+- [FieryChicken](https://scratch.mit.edu/users/FieryChicken/)
+- [FreNZyFIRE](https://scratch.mit.edu/users/FreNZyFIRE/)
+- [Fygar](https://scratch.mit.edu/users/Fygar/)
+- [Genizy](https://github.com/genizy)
+- [Ggenije](https://scratch.mit.edu/users/Ggenije/)
+- [Gherwit](https://scratch.mit.edu/users/Gherwit/)
+- [GonSanVi](https://scratch.mit.edu/users/GonSanVi/)
+- [Griffpatch](https://scratch.mit.edu/users/Griffpatch/)
+- [guiles](https://scratch.mit.edu/users/guiles/)
+- [Hockeeypro18](https://scratch.mit.edu/users/Hockeeypro18/)
+- [Irv77](https://github.com/irv77)
+- [JloAu](https://scratch.mit.edu/users/JloAu/)
+- [JYg3_](https://scratch.mit.edu/users/JYg3_/)
+- [Kabez](https://scratch.mit.edu/users/Kabez/)
+- [Katana_Gaming](https://scratch.mit.edu/users/Katana_Gaming/)
+- [Kevin_eleven_1234](https://scratch.mit.edu/users/Kevin_eleven_1234/)
+- [LogicEverybody](https://scratch.mit.edu/users/LogicEverybody/)
+- [Man-o-valor](https://scratch.mit.edu/users/Man-o-valor/)
+- [Mariokenta](https://scratch.mit.edu/users/Mariokenta/)
+- [Multinia](https://scratch.mit.edu/users/Multinia/)
+- [mvbit](https://penguinmod.com/profile?user=mvbit)
+- [Njdavison](https://scratch.mit.edu/users/Njdavison/)
+- [Pacmanfan1112](https://scratch.mit.edu/users/Pacmanfan1112/)
+- [Platform_maker444](https://scratch.mit.edu/users/Platform_maker444/)
+- [Polkmnq6](https://scratch.mit.edu/users/Polkmnq6/)
+- [Pyroaura](https://scratch.mit.edu/users/Pyroaura/)
+- [quadrupleslap](https://scratch.mit.edu/users/quadrupleslap/)
+- [RADICALBLAST](https://scratch.mit.edu/users/RADICALBLAST/)
+- [RokCoder](https://scratch.mit.edu/users/RokCoder/)
+- [SlenTheOoof](https://scratch.mit.edu/users/SlenTheOoof/)
+- [SolarCode](https://scratch.mit.edu/users/SolarCode/)
+- [Super_Chicken_Llama](https://scratch.mit.edu/users/Super_Chicken_Llama/)
+- [theChAOTiC](https://scratch.mit.edu/users/theChAOTiC/)
+- [TheTrendyToad](https://scratch.mit.edu/users/TheTrendyToad/)
+- [TimMcCool](https://scratch.mit.edu/users/TimMcCool/)
+- [twoplayergames.org](https://twoplayergames.org)
+- [UrkiMimi](https://penguinmod.com/profile?user=urkimimi)
+- [VinCrafts](https://scratch.mit.edu/users/VinCrafts/)
+- [Vino11](https://scratch.mit.edu/users/Vino11/)
+- [Yoshihome](https://scratch.mit.edu/users/Yoshihome/)
+- [YousefIbrahimismail](https://github.com/YousefIbrahimismail)
+- [Zaire](https://scratch.mit.edu/users/-Zaire-/)

package/navigation/customization.js

@@ -0,0 +1,218 @@
+  function changeFavicon(src) {
+    const oldLink = document.getElementById('dynamic-favicon');
+    if (oldLink && oldLink.parentNode === document.head) {
+      try {
+        document.head.removeChild(oldLink);
+      } catch (error) {
+        console.warn('Failed to remove old favicon:', error);
+      }
+    }
+
+    const link = document.createElement('link');
+    link.id = 'dynamic-favicon';
+    link.rel = 'icon';
+    link.href = src + '?v=' + new Date().getTime(); // prevent caching
+    document.head.appendChild(link);
+
+    localStorage.setItem('faviconSrc', src);
+  }
+
+  function changeTitle(title) {
+    document.title = title;
+    localStorage.setItem('pageTitle', title);
+  }
+
+  function cloakpage(title, src) {
+    changeTitle(title);
+    changeFavicon(src);
+  }
+
+  function changetheme(src) {
+    document.body.style.backgroundImage = `url('${src}')`;
+    const navbar = document.querySelector('.navbar');
+    if (navbar) {
+      navbar.style.backgroundImage = `url('${src}')`;
+    }
+    const dropdownContent = document.querySelector('.dropdown-content');
+    if (dropdownContent) {
+      dropdownContent.style.backgroundImage = `url('${src}')`;
+    }
+        localStorage.setItem('themeBg', src);
+    }
+
+  function changeFont(font) {
+    document.body.style.fontFamily = font;
+    localStorage.setItem('userFont', font);
+    document.querySelectorAll('select').forEach(select => {
+      select.style.fontFamily = font;
+    });
+    const searchBar = document.getElementById('searchBar');
+    if (searchBar) {
+      searchBar.style.fontFamily = font;
+    }
+  }
+
+function changeTextColor(color) {
+  // Remove previous style block if it exists
+  const oldStyle = document.getElementById('normal-text-style');
+  if (oldStyle) oldStyle.remove();
+
+  // Create new style for normal text + pagination + paragraphs
+  const style = document.createElement('style');
+  style.id = 'normal-text-style';
+  style.innerHTML = `
+    body,
+    select,
+    li a:not(.active),
+    #searchBar:not(:focus),
+    .game-title,
+    p,
+    .pagination button {
+      color: ${color} !important;
+    }
+  `;
+  document.head.appendChild(style);
+
+  // Dynamically update outlines ONLY if they are not transparent or none
+  document.querySelectorAll('*').forEach(el => {
+    const computedStyle = window.getComputedStyle(el);
+    const outlineColor = computedStyle.outlineColor;
+    const outlineStyle = computedStyle.outlineStyle;
+
+    // Check if outline exists and is not transparent or "none"
+    if (
+      outlineStyle !== 'none' &&
+      outlineColor !== 'rgba(0, 0, 0, 0)' && // transparent
+      outlineColor !== 'transparent'
+    ) {
+      el.style.outlineColor = color;
+    }
+  });
+
+  // Save to localStorage for persistence
+  localStorage.setItem('textColor', color);
+}
+
+
+
+function changeSelectedTextColor(color) {
+  // Remove previous dynamic style if any
+  const oldStyle = document.getElementById('selected-text-style');
+  if (oldStyle) oldStyle.remove();
+
+  const style = document.createElement('style');
+  style.id = 'selected-text-style';
+  style.innerHTML = `
+    ::selection {
+      background: #333;
+      color: ${color};
+    }
+  `;
+  document.head.appendChild(style);
+  localStorage.setItem('selectedTextColor', color);
+}
+function changeFocusTextColor(color) {
+  const oldStyle = document.getElementById('focus-text-style');
+  if (oldStyle) oldStyle.remove();
+
+  const style = document.createElement('style');
+  style.id = 'focus-text-style';
+  style.innerHTML = `
+    input:focus,
+    select:focus,
+    textarea:focus {
+      color: ${color};
+      border-color: ${color};
+    }
+  `;
+  document.head.appendChild(style);
+}
+function changeActiveTextColor(color) {
+  // Remove old active text color style if any
+  const oldStyle = document.getElementById('active-text-style');
+  if (oldStyle) oldStyle.remove();
+
+  const style = document.createElement('style');
+  style.id = 'active-text-style';
+  style.innerHTML = `
+    li a.active {
+      color: ${color} !important;
+    }
+  `;
+  document.head.appendChild(style);
+  localStorage.setItem('activeTextColor', color);
+}
+
+function resetToDefault() {
+  // Clear localStorage
+  localStorage.removeItem('faviconSrc');
+  localStorage.removeItem('pageTitle');
+  localStorage.removeItem('themeBg');
+  localStorage.removeItem('userFont');
+  localStorage.removeItem('textColor');
+  localStorage.removeItem('selectedTextColor');
+  localStorage.removeItem('activeTextColor');
+
+  // Reset Favicon & Title
+  changeFavicon('https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/favicon/logo.png');
+  changeTitle('Arcade 4');
+
+  // Reset Theme
+  changetheme('https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/backgrounds/void_theme.png');
+
+  // Reset Font
+  changeFont('Pixelify Sans, sans-serif');
+
+  // Reset Normal Text Color
+  changeTextColor('#ffffff');
+  const picker1 = document.getElementById('textColorPicker1');
+  if (picker1) picker1.value = '#ffffff';
+
+  // Reset Selected/Focus/Active Text Color
+  changeSelectedTextColor('#7F00FF');
+  changeFocusTextColor('#7F00FF');
+  changeActiveTextColor('#7F00FF');
+  const picker2 = document.getElementById('textColorPicker2');
+  if (picker2) picker2.value = '#7F00FF';
+
+  // Reset dropdown selections
+  document.getElementById('cloakDropdown').selectedIndex = 0;
+  document.getElementById('backgroundDropdown').selectedIndex = 0;
+  document.getElementById('fontDropdown').selectedIndex = 0;
+}
+
+
+
+// On page load
+const stylesheet = document.createElement("link");
+stylesheet.rel = "stylesheet"; 
+stylesheet.type = "text/css"; 
+stylesheet.href = "https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Comic+Neue&family=Courier+Prime&family=Press+Start+2P&family=VT323&family=Orbitron:wght@400;700&family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Patrick+Hand&family=Russo+One&display=swap"; 
+document.head.appendChild(stylesheet);
+const savedTheme = localStorage.getItem('themeBg');
+if (savedTheme) changetheme(savedTheme);
+
+const savedTitle = localStorage.getItem('pageTitle');
+if (savedTitle) document.title = savedTitle;
+
+const savedFavicon = localStorage.getItem('faviconSrc');
+if (savedFavicon) changeFavicon(savedFavicon);
+
+const savedFont = localStorage.getItem('userFont');
+if (savedFont) changeFont(savedFont);
+
+const savedColor = localStorage.getItem('textColor');
+if (savedColor) {
+  changeTextColor(savedColor);
+  const picker1 = document.getElementById('textColorPicker1');
+  if (picker1) picker1.value = savedColor;
+}
+
+const selectedTextColor = localStorage.getItem('selectedTextColor');
+if (selectedTextColor) {
+  changeSelectedTextColor(selectedTextColor);
+  changeFocusTextColor(selectedTextColor);
+  changeActiveTextColor(selectedTextColor);
+  const picker2 = document.getElementById('textColorPicker2');
+  if (picker2) picker2.value = selectedTextColor;
+}

package/navigation/games/apps.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Pixelify+Sans" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Comic+Neue&family=Courier+Prime&family=Press+Start+2P&family=VT323&family=Orbitron:wght@400;700&family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Patrick+Hand&family=Russo+One&display=swap" rel="stylesheet"/>
+
+    <style>
+        /* Hides the dropdown completely */
+        #categorySelect {
+            display: none;
+        }
+    </style>
+</head>
+
+<body data-json="https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4@f50fae4/navigation/games/apps.json">
+
+    <!-- Search -->
+    <div class="search-container">
+        <input type="text" id="searchBar" placeholder="Search games..." oninput="applyFilters()">
+    </div>
+
+    <label style="margin-left: 15px;">
+        <input type="checkbox" id="showFavorites" onchange="applyFilters()"> Show Favorites Only
+    </label>
+
+    <!-- Category + Favorites Filter -->
+    <div class="category-container">
+        <select id="categorySelect" onchange="applyFilters()">
+            <option value="All">All</option>
+            <option value="Popular">Popular</option>
+            <option value="New">New</option>
+            <option value="2D">2D</option>
+            <option value="3D">3D</option>
+            <option value="Flash">Flash</option>
+            <option value="Idle">Idle</option>
+            <option value="Mobile">Mobile</option>
+            <option value="Multi Player">Multi Player</option>
+            <option value="One Button">One Button</option>
+            <option value="Platformer">Platformer</option>
+            <option value="Puzzle">Puzzle</option>
+            <option value="Retro">Retro</option>
+            <option value="Rhythm">Rhythm</option>
+            <option value="Shooter">Shooter</option>
+            <option value="Sports">Sports</option>
+            <option value="Tower Defence">Tower Defence</option>
+        </select>
+    </div>
+    
+    <!-- Game Cards -->
+    <div id="gameButtons" class="game-buttons-container"></div>
+
+    <!-- Pagination Controls -->
+    <div class="pagination" id="paginationControls"></div>
+
+</body>
+</html>

package/navigation/games/apps.json

@@ -0,0 +1,125 @@
+[
+    {
+        "title": "Request a Feature",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/request.jpg",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-Games@main/apps/request.html",
+        "category": [
+            "Uncategorized"
+        ],
+        "mode": "A"
+    },
+    {
+        "title": "EmulatorJS",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/emulatorjs.png",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-Games@main/apps/EmulatorJS.html",
+        "category": [
+            "App"
+        ],
+        "mode": "A"
+    },
+    {
+        "title": "Espresso",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/espresso.svg",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-Games/apps/espresso.html",
+        "category": [
+            "App"
+        ],
+        "mode": "A"
+    },
+    {
+        "title": "Get More Math!",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/get_more_math.png",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-Games/apps/get_more_math.html",
+        "category": [
+            "App"
+        ],
+        "mode": "A"
+    },
+    {
+        "title": "Ghostery Search",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/ghosterysearch.svg",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-Games/apps/ghosterysearch_2.html",
+        "category": [
+            "App"
+        ],
+        "mode": "A"
+    },
+    {
+        "title": "Ruffle",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/ruffle.avif",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-Games/apps/ruffle.html",
+        "category": [
+            "App"
+        ],
+        "mode": "A"
+    },
+    {
+        "title": "Scratch Loader GX",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/scratchloadergx.svg",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-Games/apps/scratchloadergx.html",
+        "category": [
+            "App"
+        ],
+        "mode": "A"
+    },
+    {
+        "title": "Spotify",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/spotify.png",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-games@main/apps/spotify/index.html",
+        "category": [
+            "App"
+        ],
+        "mode": "A",
+        "functions": [
+            {
+                "name": "handleGameClick",
+                "params": [
+                    "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-games@main/apps/spotify/index.html",
+                    "B"
+                ]
+            },
+            {
+                "name": "appendScript",
+                "params": [
+                    "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-games@3d1f72d/apps/spotify/scripts.js"
+                ]
+            }
+        ]
+    },
+    {
+        "title": "Time Vortex",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/time_vortex.png",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-Games/apps/time_vortex.html",
+        "category": [
+            "App"
+        ],
+        "mode": "A"
+    },
+    {
+        "title": "Wayground",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/wayground.png",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-Games/apps/wayground.html",
+        "category": [
+            "App"
+        ],
+        "mode": "A"
+    },
+    {
+        "title": "Wikipedia",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/Wikipedia.png",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-Games/apps/wikipedia_2.html",
+        "category": [
+            "App"
+        ],
+        "mode": "A"
+    },
+    {
+        "title": "YouTube",
+        "image": "https://gitlab.com/arcade_v/arcade_v_images/-/raw/main/apps/youtube.jpg",
+        "url": "https://cdn.jsdelivr.net/gh/FutureElliotto/Arcade-4-games/apps/youtube/index.html",
+        "category": [
+            "App"
+        ],
+        "mode": "A"
+    }
+]

package/navigation/games/games.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Pixelify+Sans" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Comic+Neue&family=Courier+Prime&family=Press+Start+2P&family=VT323&family=Orbitron:wght@400;700&family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Patrick+Hand&family=Russo+One&display=swap" rel="stylesheet"/>
+</head>
+<body>
+
+    <!-- Search -->
+    <div class="search-container">
+        <input type="text" id="searchBar" placeholder="Search games..." oninput="applyFilters()">
+    </div>
+
+    <!-- Category + Favorites Filter -->
+    <div class="category-container">
+        <select id="categorySelect" onchange="applyFilters()">
+            <option value="All">All</option>
+            <option value="Popular">Popular</option>
+            <option value="New">New</option>
+            <option value="2D">2D</option>
+            <option value="3D">3D</option>
+            <option value="Flash">Flash</option>
+            <option value="Horror">Horror</option>
+            <option value="Idle">Idle</option>
+            <option value="Mobile">Mobile</option>
+            <option value="Multi Player">Multi Player</option>
+            <option value="One Button">One Button</option>
+            <option value="Platformer">Platformer</option>
+            <option value="Puzzle">Puzzle</option>
+            <option value="Retro">Retro</option>
+            <option value="Rhythm">Rhythm</option>
+            <option value="RPG">RPG</option>
+            <option value="Shooter">Shooter</option>
+            <option value="Sports">Sports</option>
+            <option value="Tower Defence">Tower Defence</option>
+        </select>
+
+        <label style="margin-left: 15px;">
+            <input type="checkbox" id="showFavorites" onchange="applyFilters()"> Show Favorites Only
+        </label>
+    </div>
+
+    <!-- Game Cards -->
+    <div id="gameButtons" class="game-buttons-container"></div>
+
+    <!-- Pagination Controls -->
+    <div class="pagination" id="paginationControls"></div>
+
+</body>
+</html>