wompmacho
592b5a24db
All checks were successful
deploy-docs / build-and-deploy (push) Successful in 43s
178 lines
5.4 KiB
Markdown
178 lines
5.4 KiB
Markdown
---
|
|
title: Infrastructure Diagrams
|
|
description: My Home Network Overview
|
|
showHero: false
|
|
showEditURL: true
|
|
author: wompmacho
|
|
date: '2023-07-04 05:33:31.158000+00:00'
|
|
lastmod: '2026-04-12'
|
|
tags: ['homelab', 'infrastructure', 'network']
|
|
---
|
|
|
|
[← Back to Homelab Infrastructure](./homelab_Infra.md)
|
|
|
|
---
|
|
|
|
## 2026 Home lab
|
|
|
|
{{< rawhtml >}}
|
|
|
|
|
|
<div id="homelabel-container" style="position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: #1e1e1e;">
|
|
|
|
<button id="fullscreen-btn" style="position: absolute; top: 10px; right: 10px; z-index: 10; display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.7); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
|
|
<span>Fullscreen</span>
|
|
</button>
|
|
|
|
<div id="wrapper-target" class="iframe-wrapper" style="width: 100%; height: 450px; overflow: hidden; position: relative;">
|
|
<iframe id="homelabel-frame" src="https://homelable.wompmacho.com/view?key=live" style="width: 100%; height: 100%; border: none;"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#homelabel-frame {
|
|
display: block !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* Regular view wrapper: standard, safe layout rules */
|
|
#wrapper-target {
|
|
overflow: hidden !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
/* Fullscreen Container Engine */
|
|
#homelabel-container:fullscreen {
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
height: 100dvh !important;
|
|
border-radius: 0 !important;
|
|
padding: 24px !important;
|
|
box-sizing: border-box !important;
|
|
background: #1e1e1e !important;
|
|
overflow: hidden !important;
|
|
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
}
|
|
|
|
/* Fullscreen Wrapper: Converts to a flex centering field ONLY when fullscreen */
|
|
#homelabel-container:fullscreen #wrapper-target {
|
|
width: 100% !important;
|
|
flex: 1 !important;
|
|
height: auto !important;
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.getElementById('homelabel-frame').addEventListener('load', function() {
|
|
const iframe = this;
|
|
const wrapper = document.getElementById('wrapper-target');
|
|
const container = document.getElementById('homelabel-container');
|
|
const fsButton = document.getElementById('fullscreen-btn');
|
|
|
|
function scaleIframe() {
|
|
const targetWidth = wrapper.offsetWidth;
|
|
const targetHeight = wrapper.offsetHeight;
|
|
const screenWidth = window.innerWidth;
|
|
|
|
if (targetWidth === 0 || targetHeight === 0) return;
|
|
|
|
// Base layout breakpoints
|
|
let virtualWidth = 1400;
|
|
if (screenWidth < 768) {
|
|
virtualWidth = 480;
|
|
} else if (screenWidth < 1200) {
|
|
virtualWidth = 900;
|
|
}
|
|
|
|
let virtualHeight = 950;
|
|
let scale;
|
|
|
|
// FIX: Isolate calculation parameters and transform origins per state
|
|
if (document.fullscreenElement) {
|
|
const scaleX = targetWidth / virtualWidth;
|
|
const scaleY = targetHeight / virtualHeight;
|
|
|
|
scale = Math.min(scaleX, scaleY);
|
|
iframe.style.transformOrigin = 'center center';
|
|
} else {
|
|
// Safe standard inline calculations
|
|
scale = targetWidth / virtualWidth;
|
|
virtualHeight = targetHeight / scale;
|
|
iframe.style.transformOrigin = 'top left';
|
|
}
|
|
|
|
// Apply transformations
|
|
if (scale < 1) {
|
|
iframe.style.width = virtualWidth + 'px';
|
|
iframe.style.height = virtualHeight + 'px';
|
|
iframe.style.transform = `scale(${scale})`;
|
|
} else {
|
|
iframe.style.width = '100%';
|
|
iframe.style.height = '100%';
|
|
iframe.style.transform = 'none';
|
|
}
|
|
}
|
|
|
|
// --- FULLSCREEN INTERACTION CONTROLS ---
|
|
fsButton.addEventListener('click', () => {
|
|
if (!document.fullscreenElement) {
|
|
container.requestFullscreen().catch(err => {
|
|
console.error(`Error attempting to enable fullscreen: ${err.message}`);
|
|
});
|
|
fsButton.querySelector('span').textContent = 'Exit';
|
|
} else {
|
|
document.exitFullscreen();
|
|
fsButton.querySelector('span').textContent = 'Fullscreen';
|
|
}
|
|
});
|
|
|
|
document.addEventListener('fullscreenchange', () => {
|
|
if (!document.fullscreenElement) {
|
|
fsButton.querySelector('span').textContent = 'Fullscreen';
|
|
}
|
|
setTimeout(scaleIframe, 75);
|
|
});
|
|
|
|
scaleIframe();
|
|
window.addEventListener('resize', () => {
|
|
setTimeout(scaleIframe, 50);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{{< /rawhtml >}}
|
|
|
|
---
|
|
|
|
## 2024 Home Lab
|
|
|
|
|
|
|
|
---
|
|
|
|
## 2023 Home Lab
|
|
|
|
|
|
|
|
---
|
|
|
|
## 2020 Home Lab
|
|
|
|
|
|
|
|
---
|
|
|
|
## 2019 Home Lab
|
|
|
|
|
|
|
|
---
|