Jimbo/jimbo-landing-page
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Remove old references and add new services

Browse source
This commit is contained in:
Jimbo 2024-08-22 04:15:57 -04:00
parent b73eec196a
commit 934bd5feac
7 changed files with 43 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/adguard.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
images/copyright/airbenz-offline.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 322 KiB

BIN
images/copyright/airbenz.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.7 KiB

BIN
images/tandoor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 58 KiB

60
index.html
View file

@ -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>
</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>
<span class="button-subtext">Redditish</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>
</div>
</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>
<span class="button-text">Mail</span>
<span class="button-subtext">Internal Server</span>
</div>
</button>
</a>

70
streams/airbenz/index.html
View file

@ -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>

5
styles.css
View file

@ -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 */