dirextory · mudzip1 · Oct 17, 2024 · Oct 17, 2024 · Oct 17, 2024 · Oct 17, 2024
diff --git a/README.md b/README.md
@@ -1 +1,7 @@
-Made by Mudzip, Directory, and Yeet
+<p align="center">
+<kbd>
+<img style="border-radius:5%" height="150px" src="https://github.com/mudzip1/Viridian/blob/main/images/Untitled%20design%20(14).png?raw=true">
+</kbd>
+</p>
+<h1 align="center" style="color: #19e7b6;">Viridian Games</h1>
+<p align="center">Unblocked Games for Free, From the Creators of GameCat!</p>
diff --git a/games.html b/games.html
@@ -23,6 +23,18 @@
             background: linear-gradient(to bottom, #1e90ff, #0c3d99);
             z-index: 0;
         }
+
+                .fixed-header {
+            position: fixed;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 10;
+            color: white;
+            font-size: 24px;
+            font-weight: bold;
+            padding: 10px;
+        }
 
         .menu {
             position: relative;
@@ -34,26 +46,44 @@
         }
 
         .menu-item {
-            margin: 15px;
+            margin: 5px;
             text-align: center;
             color: white;
             cursor: pointer;
+            position: relative;
         }
-        
+
         .menu-item img {
-            width: 90px;
-            height: 90px;
-            border-radius: 10px;
+            width: 205px;
+            height: 110px;
+            border-radius: 12px;
             transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
 
         .menu-item:hover img {
-            transform: scale(1.1);
+            transform: scale(1.05);
             box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7);
         }
 
         .menu-item:hover p {
-            text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
+            opacity: 1;
+            transform: translateY(0);
+            transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+
+        .menu-item p {
+            position: absolute;
+            bottom: 10px;
+            left: 0;
+            right: 0;
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.3s ease, transform 0.3s ease;
+            font-size: 18px;
+            color: white;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 5px;
+            border-radius: 8px;
         }
 
         .search-bar {
@@ -81,19 +111,18 @@
             color: rgba(255, 255, 255, 0.6);
         }
 
-        /* Sidebar (Navigation) styling */
         .nav-bar {
             position: fixed;
             left: 0;
             top: 0;
             height: 100%;
             width: 80px;
-            background-color: rgba(0, 0, 0, 0.8);
+            background-color: rgba(0, 0, 0, 0.6);
             display: flex;
             flex-direction: column;
             align-items: center;
-            padding-top: 20px;
-            z-index: 2; /* Ensure it appears above other content */
+            padding-top: 15px;
+            z-index: 2;
         }
 
         .nav-bar a {
@@ -116,19 +145,20 @@
             color: #ffffff;
         }
 
-        /* Remove default margin and padding */
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
-    </style>
+   </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
 </head>
 <body>
     <div id="particles-js"></div>
 
+
     <!-- Left-side Navigation Bar -->
+        <div class="fixed-header">Viridian Beta</div>
     <div class="nav-bar">
         <a href="index.html" class="icon" title="Home">🏠</a>
         <a href="games.html" class="icon" title="Games">🎮</a>
@@ -140,26 +170,46 @@
     </div>
 
     <div class="menu" id="menu">
-        <div class="menu-item" onclick="launchFullscreen('https://fullscreen12.pages.dev')">
-            <img src="https://play-lh.googleusercontent.com/uJn2i9h7KxYQarC_c3K4qH6o7gLtflFnhD_dN14MNkzHJ1NeNFzCL69jpB5mT0vCoQs" alt="2048">
+        <div class="menu-item" onclick="launchFullscreen('https://viridian.pages.dev/gamescode/slope/')">
+            <img src="https://plexilearcade.xyz/images/games-images/slope.png" alt="Slope">
             <p>Slope</p>
         </div>
-        <div class="menu-item" onclick="launchFullscreen('https://sgs-game-cdn.pages.dev/Projects/Drive%20Mad/main.html')">
-            <img src="https://play-lh.googleusercontent.com/zGApa4C91zfSXuPMVHvBzzgVLhs_ABHv9fybDQ2m86QmArR3sejpOoRjBMq4ZNZrhg" alt="Roblox">
+        <div class="menu-item" onclick="launchFullscreen('https://viridian.pages.dev/gamescode/drivemad/')">
+            <img src="https://raw.githubusercontent.com/mudzip1/viridian.github.io/refs/heads/main/images/drivemad.png" alt="Drive Mad">
             <p>Drive Mad</p>
         </div>
         <div class="menu-item" onclick="launchFullscreen('https://yoho2.pro')">
-            <img src="https://play-lh.googleusercontent.com/4yqjsxq9ntZ2dftqxChXmsm-kZ293L6tBc8bghIFxvMn6T8v8jdGqld1CT_vuocU6g" alt="1v1.lol">
+            <img src="https://play-lh.googleusercontent.com/4yqjsxq9ntZ2dftqxChXmsm-kZ293L6tBc8bghIFxvMn6T8v8jdGqld1CT_vuocU6g" alt="Yohoho.io">
             <p>Yohoho.io</p>
         </div>
         <div class="menu-item" onclick="launchFullscreen('https://run3-911.com/g/run3/')">
-            <img src="https://run3-image-placeholder.com" alt="Run 3">
+            <img src="https://raw.githubusercontent.com/mudzip1/viridian.github.io/refs/heads/main/images/run-3.webp" alt="Run 3">
             <p>Run 3</p>
         </div>
+        <div class="menu-item" onclick="launchFullscreen('https://viridian.pages.dev/gamescode/2048/')">
+            <img src="https://raw.githubusercontent.com/mudzip1/viridian.github.io/refs/heads/main/images/2048.png" alt="2048">
+            <p>2048</p>
+        </div>
+                <div class="menu-item" onclick="launchFullscreen('https://viridian.pages.dev/gamescode/getawayshootout/')">
+            <img src="https://raw.githubusercontent.com/mudzip1/viridian.github.io/refs/heads/main/images/getawayshootout.png" alt="2048">
+            <p>Getaway Shootout</p>
+        </div>
+                <div class="menu-item" onclick="launchFullscreen('https://viridian.pages.dev/gamescode/fnaf1/')">
+            <img src="https://raw.githubusercontent.com/mudzip1/viridian.github.io/refs/heads/main/images/fnaf.png" alt="2048">
+            <p>Fnaf 1</p>
+        </div>
+                <div class="menu-item" onclick="launchFullscreen('https://viridian.pages.dev/gamescode/snowrider/')">
+            <img src="https://raw.githubusercontent.com/mudzip1/viridian.github.io/refs/heads/main/images/snowrider3d.png" alt="e">
+            <p>Snowrider 3D</p>
+        </div>
+          <div class="menu-item" onclick="launchFullscreen('https://viridian.pages.dev/gamescode/coreball/')">
+            <img src="https://raw.githubusercontent.com/mudzip1/viridian.github.io/refs/heads/main/images/coreball.png" alt="GameImage">
+            <p>Coreball</p>
+        </div>
     </div>
 
     <script>
-        // JavaScript to configure particles
+            // JavaScript to configure particles
         particlesJS("particles-js", {
             particles: {
                 number: {
@@ -265,36 +315,37 @@
             },
             retina_detect: true
         });
-
-        // Launches the game in fullscreen
-        function launchFullscreen(url) {
-            var myWindow = window.open('', 'Fullscreen', 'scrollbars=1,height=' + screen.availHeight + ',width=' + screen.availWidth);
-            myWindow.document.write('<!DOCTYPE html>\
-                <html>\
-                <head>\
-                <title>Game</title>\
-                </head>\
-                <body style="margin:0;">\
-                <iframe src="' + url + '" style="border:none;overflow:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>\
-                </body>\
-                </html>');
-        }
-
-        // Filter the games in the menu
+        // Function to filter games by title
         function filterGames() {
-            const input = document.getElementById("search");
-            const filter = input.value.toLowerCase();
-            const menuItems = document.getElementsByClassName("menu-item");
+            var input, filter, menu, menuItems, title, i;
+            input = document.getElementById('search');
+            filter = input.value.toUpperCase();
+            menu = document.getElementById('menu');
+            menuItems = menu.getElementsByClassName('menu-item');
 
-            for (let i = 0; i < menuItems.length; i++) {
-                let item = menuItems[i].getElementsByTagName("p")[0];
-                if (item.innerHTML.toLowerCase().indexOf(filter) > -1) {
+            for (i = 0; i < menuItems.length; i++) {
+                title = menuItems[i].getElementsByTagName("p")[0];
+                if (title.innerHTML.toUpperCase().indexOf(filter) > -1) {
                     menuItems[i].style.display = "";
                 } else {
                     menuItems[i].style.display = "none";
                 }
             }
         }
+
+        // Launches the game in fullscreen
+        function launchFullscreen(url) {
+            var myWindow = window.open('', 'Fullscreen', 'scrollbars=1,height=' + screen.availHeight + ',width=' + screen.availWidth);
+            myWindow.document.write('<!DOCTYPE html>\n\
+                <html>\n\
+                <head>\n\
+                <title>Game</title>\n\
+                </head>\n\
+                <body style="margin:0;">\n\
+                <iframe src="' + url + '" style="border:none;overflow:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>\n\
+                </body>\n\
+                </html>');
+        }
     </script>
 </body>
 </html>