Remove old references and add new services

index.html

@@ -30,6 +30,7 @@
         <div class="button-content">
           <img class="button-image" src="./images/nextcloud.webp" alt="Button Logo" style="width: 4.3em; height: auto;">
           <span class="button-text">Nextcloud</span>
+          <span class="button-subtext">File Server</span>
         </div>
       </button>
     </a>
@@ -39,6 +40,7 @@
         <div class="button-content">
           <img class="button-image" src="./images/bitwarden.png" alt="Button Logo" style="width: 4.3em; height: auto;">
           <span class="button-text">Vaultwarden</span>
+          <span class="button-subtext">Password Manager</span>
         </div>
       </button>
     </a>
@@ -48,6 +50,27 @@
         <div class="button-content">
           <img class="button-image" src="./images/gitea.png" style="width: 4.3em; height: auto;">
           <span class="button-text">Gitea</span>
+          <span class="button-subtext">Collaborative Code</span>
+        </div>
+      </button>
+    </a>
+    <a href="https://guard.jimbosfiles.com">
+      <button class="custom-button guard">
+        <div class="color-part"></div>
+        <div class="button-content">
+          <img class="button-image" src="./images/adguard.png" alt="Button Logo" style="width: 5em; height: auto;">
+          <span class="button-text">AdGuard</span>
+          <span class="button-subtext">DNS Protection</span>
+        </div>
+      </button>
+    </a>
+    <a href="https://recipes.jimbosfiles.com">
+      <button class="custom-button recipes">
+        <div class="color-part"></div>
+        <div class="button-content">
+          <img class="button-image" src="./images/tandoor.png" alt="Button Logo" style="width: 5em; height: auto;">
+          <span class="button-text">Tandoor</span>
+          <span class="button-subtext">Recipes</span>
         </div>
       </button>
     </a>
@@ -57,6 +80,7 @@
         <div class="button-content">
           <img class="button-image" src="./images/pufferpanel.png" style="width: 4.3em; height: auto;">
           <span class="button-text">Pufferpanel</span>
+          <span class="button-subtext">Game Servers</span>
         </div>
       </button>
     </a>
@@ -66,6 +90,7 @@
         <div class="button-content">
           <img class="button-image" src="./images/owncast.png" alt="Button Logo" style="width: 5em; height: auto;">
           <span class="button-text">Streaming</span>
+          <span class="button-subtext">Gaming Maybe</span>
         </div>
       </button>
     </a>
@@ -75,6 +100,17 @@
         <div class="button-content">
           <img class="button-image" src="./images/azuracast.png" alt="Button Logo" style="width: 5em; height: auto;">
           <span class="button-text">Radio</span>
+          <span class="button-subtext">My Music Folder</span>
+        </div>
+      </button>
+    </a>
+    <a href="https://chat.jimbosfiles.com/">
+      <button class="custom-button element">
+        <div class="color-part"></div>
+        <div class="button-content">
+          <img class="button-image" src="./images/element.png" alt="Button Logo" style="width: 4.3em; height: auto;">
+          <span class="button-text">Element</span>
+          <span class="button-subtext">Discordish</span>
         </div>
       </button>
     </a>
@@ -84,6 +120,7 @@
         <div class="button-content">
           <img class="button-image" src="./images/mastodon.png" alt="Button Logo" style="width: 4.3em; height: auto;">
           <span class="button-text">Mastodon</span>
+          <span class="button-subtext">Twitterish</span>
         </div>
       </button>
     </a>
@@ -93,15 +130,7 @@
         <div class="button-content">
           <img class="button-image" src="./images/lemmy.png" alt="Button Logo" style="width: 6em; height: auto;">
           <span class="button-text">Lemmy</span>
-        </div>
+          <span class="button-subtext">Redditish</span>
-      </button>
-    </a>
-    <a href="https://chat.jimbosfiles.com/">
-      <button class="custom-button element">
-        <div class="color-part"></div>
-        <div class="button-content">
-          <img class="button-image" src="./images/element.png" alt="Button Logo" style="width: 4.3em; height: auto;">
-          <span class="button-text">Element Chat</span>
         </div>
       </button>
     </a>
@@ -110,17 +139,8 @@
         <div class="color-part"></div>
         <div class="button-content">
           <img class="button-image" src="./images/roundcube.png" alt="Button Logo" style="width: 4.3em; height: auto;">
-          <span class="button-text">Mailserver</span>
+          <span class="button-text">Mail</span>
-        </div>
+          <span class="button-subtext">Internal Server</span>
-      </button>
-    </a>
-    <a href="./streams/airbenz">
-      <button class="custom-button airbenz">
-        <div class="color-part"></div>
-        <div class="button-content">
-          <img class="button-image" src="./images/copyright/airbenz.webp" alt="Button Logo" style="width: 4.3em; height: auto;">
-          <span class="button-text">Airbenz TV</span>
-          <span class="button-subtext">Français (Lionvert)</span>
         </div>
       </button>
     </a>

streams/airbenz/index.html

@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Airbenz TV</title>
-<link rel="stylesheet" href="../43styles.css">
-<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
-</head>
-<body>
-  <div class="container">
-    <div class="video-container" id="video-container">
-      <video
-        id="my-video"
-        class="video-js vjs-fluid"
-        controls
-        preload="auto"
-        width="1280"
-        height="720"
-        autoplay
-        poster="MY_VIDEO_POSTER.jpg"
-        data-setup='{"techOrder": ["html5", "flash"], "html5": {"hls": {"enableLowInitialPlaylist": true, "smoothQualityChange": true}}}'
-      >
-        <source src="/streams/hls/AirbenzTV.m3u8" type="application/x-mpegURL" />
-        <p class="vjs-no-js">
-          To view this video please enable JavaScript, and consider upgrading to a
-          web browser that
-          <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
-        </p>
-      </video>
-    </div>
-    <div class="image-container" id="image-container" style="display:none;">
-      <img src="/images/copyright/airbenz-offline.png" alt="Fallback Image" id="fallback-image">
-    </div>
-  </div>
-  <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
-  <script>
-    var videoElement = document.getElementById('my-video');
-    var videoContainer = document.getElementById('video-container');
-    var imageContainer = document.getElementById('image-container');
-    var fallbackImage = document.getElementById('fallback-image');
-
-    function handleVideoError() {
-      videoContainer.style.display = 'none';
-      imageContainer.style.display = 'flex';
-
-      // Adjust image container to match the aspect ratio of the fallback image
-      fallbackImage.onload = function() {
-        var aspectRatio = fallbackImage.naturalWidth / fallbackImage.naturalHeight;
-        if (window.innerWidth / window.innerHeight > aspectRatio) {
-          fallbackImage.style.width = 'auto';
-          fallbackImage.style.height = '100%';
-        } else {
-          fallbackImage.style.width = '100%';
-          fallbackImage.style.height = 'auto';
-        }
-      };
-    }
-
-    function handleVideoPlaying() {
-      videoContainer.style.display = 'block';
-      imageContainer.style.display = 'none';
-    }
-
-    videoElement.addEventListener('error', handleVideoError);
-    videoElement.addEventListener('canplay', handleVideoPlaying);
-    videoElement.addEventListener('playing', handleVideoPlaying);
-  </script>
-</body>
-</html>

styles.css

@@ -82,14 +82,15 @@ header img {
 .cloud .color-part { background-color: #5ca9d6; }
 .warden .color-part { background-color: #63b8a4; }
 .git .color-part { background-color: #8abf50; }
+.guard .color-part { background-color: #408043; }
+.recipes .color-part { background-color: #e3c594; }
 .panel .color-part { background-color: #8ad3db; }
 .stream .color-part { background-color: #F54E31; }
 .radio .color-part { background-color: #253785; }
+.element .color-part { background-color: #4ca68c; }
 .mastodon .color-part { background-color: #776bc9; }
 .lemmy .color-part { background-color: #183038; }
-.element .color-part { background-color: #4ca68c; }
 .mail .color-part { background-color: #0777B6; }
-.airbenz .color-part { background-color: #f5afab; }
 
 .color-part {
   width: calc(1.8em * var(--button-scale)); /* Adjusted width for the colored part */