Initial upload

This commit is contained in:
Jimbo 2024-08-20 13:37:03 -04:00
parent bdcd0aebaf
commit 175bed8a21
21 changed files with 506 additions and 0 deletions

11
footer.css Normal file
View file

@ -0,0 +1,11 @@
footer {
font-family: 'Ubuntu', sans-serif;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
background-color: #000000B3;
padding: 0.6em 0;
color: #FFFFFF;
font-size: 0.9em;
}

BIN
images/bitwarden.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
images/copyright/profile.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 261 KiB

BIN
images/discord.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
images/element.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/gitea.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
images/github.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
images/gplv3-or-later.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
images/lemmy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

BIN
images/mastodon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

BIN
images/nextcloud.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6 KiB

BIN
images/owncast.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

103
index.html Normal file
View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jimbo's Files</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="footer.css">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta property="og:title" content="Jimbo's Files">
<meta property="og:description" content="All of Jimbo's services on one landing page.">
<meta property="og:image" content="https://www.bloxelcom.net/images/logos/bloxelcom-cable.png">
<meta property="og:url" content="https://jimbosfiles.com">
</head>
<header>
<a href="./uwu.html" class="app-icon-link">
<img src="./images/copyright/profile.png" alt="Logo">
</a>
<h1>Jimbo's Silly Sites and Pages</h1>
</header>
<body>
<div class="button-container">
<a href="https://cloud.jimbosfiles.com">
<button class="custom-button cloud">
<div class="color-part"></div>
<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>
</div>
</button>
</a>
<a href="https://warden.jimbosfiles.com">
<button class="custom-button warden">
<div class="color-part"></div>
<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>
</div>
</button>
</a>
<a href="https://git.jimbosfiles.com">
<button class="custom-button git">
<div class="color-part"></div>
<div class="button-content">
<img class="button-image" src="./images/gitea.png" style="width: 4.3em; height: auto;">
<span class="button-text">Gitea</span>
</div>
</button>
</a>
<a href="https://live.jimbosfiles.com/">
<button class="custom-button stream">
<div class="color-part"></div>
<div class="button-content">
<img class="button-image" src="./images/owncast.png" alt="Button Logo" style="width: 5em; height: auto;">
<span class="button-text">Jimbo Streaming</span>
</div>
</button>
</a>
<a href="https://social.jimbosfiles.com">
<button class="custom-button mastodon">
<div class="color-part"></div>
<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>
</div>
</button>
</a>
<a href="https://lemmy.jimbosfiles.com">
<button class="custom-button lemmy">
<div class="color-part"></div>
<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>
</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>
</div>
</button>
</a>
</div>
<footer>This website is under GPL-3.0 license, you can find the code <a href="/legal">here.</a></footer>
</body>
</html>

33
streams/43styles.css Normal file
View file

@ -0,0 +1,33 @@
body, html {
font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
margin: 0;
padding: 0;
height: 100%;
background-color: black;
font-size: 16px; /* Establish a base font size */
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.video-container, .image-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
width: calc(90vh * 4 / 3);
max-width: 100vw;
overflow: hidden; /* Ensure no overflow occurs */
}
.video-container video, .image-container img {
width: 100%;
height: 100%;
object-fit: contain; /* Ensure the image/video covers the container without stretching */
}

View file

@ -0,0 +1,70 @@
<!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>

70
streams/jimbo/index.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloxeleste Gaming</title>
<link rel="stylesheet" href="../styles.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="/bloxelcom-cable/hls/BloxelesteGaming.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/offline/bloxeleste-gaming-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>

33
streams/styles.css Normal file
View file

@ -0,0 +1,33 @@
body, html {
font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
margin: 0;
padding: 0;
height: 100%;
background-color: black;
font-size: 16px; /* Establish a base font size */
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.video-container, .image-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
width: calc(90vh * 16 / 9);
max-width: 100vw;
overflow: hidden; /* Ensure no overflow occurs */
}
.video-container video, .image-container img {
width: 100%;
height: 100%;
object-fit: contain; /* Ensure the image/video covers the container without stretching */
}

171
styles.css Normal file
View file

@ -0,0 +1,171 @@
:root {
--button-scale: 2; /* Change this value to scale the button */
}
* {
font-family: 'Ubuntu', sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* Center the button container vertically */
margin: 0;
overflow-x: hidden;
height: 100vh; /* Ensure body height fits within viewport */
background: #1B1F59;
color: white;
position: relative; /* Relative positioning for footer */
}
header {
position: absolute; /* Keep header at the top */
justify-content: center; /* Center the button container vertically */
top: 0;
left: 0;
right: 0;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
margin-top: 5em;
margin-bottom: 2em;
margin-left: 2em;
}
header img {
height: 3em;
margin-right: 1.25em;
border-radius: 0.625em;
}
a.button-container {
text-decoration: none; /* Removes the underline from links */
}
.button-container {
display: flex;
flex-wrap: wrap; /* Allow wrapping of buttons to the next line */
justify-content: center; /* Center buttons horizontally within the container */
max-width: calc(13em * var(--button-scale) * 3 + 2em); /* Max width for 3 buttons plus gap */
gap: 1em; /* Space between buttons */
margin: auto; /* Center the button container vertically */
position: relative; /* Ensure container is within the viewport */
}
.custom-button {
display: flex;
align-items: center;
background-color: white;
border: 0.2em solid #101419;
overflow: hidden;
cursor: pointer;
position: relative;
width: calc(14em * var(--button-scale)); /* Adjust the base width as needed */
height: calc(4em * var(--button-scale)); /* Adjusted height to fit two lines of text */
transition: filter 0.3s, opacity 0.3s, transform 0.3s; /* Smooth transition for greyscale, opacity, and transform */
}
.custom-button:hover {
transform: scale(1.05); /* Slightly enlarge the button on hover */
}
.custom-button.selected {
transform: scale(1.05); /* Keep the button enlarged */
border-color: #007BFF; /* Optional: Add a border color to indicate selection */
}
.button-offline {
filter: grayscale(40%) contrast(100%); /* Greyscale effect */
opacity: 0.5; /* Reduced opacity */
}
/* Color classes for buttons */
.cloud .color-part { background-color: #5ca9d6; }
.warden .color-part { background-color: #63b8a4; }
.git .color-part { background-color: #8abf50; }
.stream .color-part { background-color: #F54E31; }
.mastodon .color-part { background-color: #776bc9; }
.lemmy .color-part { background-color: #183038; }
.element .color-part { background-color: #4ca68c; }
.tv10 .color-part { background-color: #2A9FBE; }
.tv3 .color-part { background-color: #47e5ab; }
.airbenz .color-part { background-color: #f5afab; }
.color-part {
width: calc(1.8em * var(--button-scale)); /* Adjusted width for the colored part */
height: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 1; /* Ensure this is behind the content */
}
.button-content {
display: flex;
flex-direction: column; /* Stack text lines vertically */
align-items: center;
justify-content: center; /* Center content horizontally */
margin-left: calc(1.8em * var(--button-scale)); /* Space for the colored part */
position: relative;
z-index: 2; /* Ensure this is above the colored part */
flex: 1;
height: 100%; /* Ensure it fills the button's height */
padding: 0 0.5em; /* Optional: add padding for spacing */
}
.button-content .button-text {
font-size: calc(1em * var(--button-scale));
color: #333;
white-space: nowrap; /* Ensure the text doesn't wrap */
}
.button-content .button-subtext {
font-size: calc(0.75em * var(--button-scale)); /* Slightly smaller font size */
color: #666; /* Slightly lighter color */
white-space: nowrap; /* Ensure the text doesn't wrap */
}
.button-content .button-image {
position: absolute;
left: calc(-1.2em * var(--button-scale)); /* Adjust image positioning */
height: calc(2em * var(--button-scale)); /* Adjust the height as needed */
z-index: 2; /* Ensure this is above the colored part */
}
.image-container {
justify-content: center;
}
.image-container img {
width: 83%;
display: flex;
justify-content: center;
align-items: center;
max-width: min(100vh);
margin: 1em;
}
/* Responsive styles */
@media (max-width: 800px) {
header {
position: relative; /* Keep header at the top */
flex-direction: row;
align-items: center;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
}
body {
min-height: 100vh; /* Ensure body covers at least full viewport height */
padding-bottom: 13em; /* Add space for footer */
padding-top: 4em; /* Add space for footer */
}
.button-container {
gap: 1em; /* Adjust gap for mobile */
}
}

15
uwu.html Normal file

File diff suppressed because one or more lines are too long