current state

This commit is contained in:
Michal
2026-07-26 13:22:48 +02:00
commit feebd64fd8
3 changed files with 500 additions and 0 deletions
+405
View File
@@ -0,0 +1,405 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MicalLab - HomeLab Server</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
min-height: 100vh;
color: #e4e4e7;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
/* Header */
.header {
text-align: center;
padding: 3rem 0;
margin-bottom: 2rem;
}
.logo {
font-size: 3.5rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
text-shadow: 0 0 40px rgba(102, 126, 234, 0.3);
}
.subtitle {
font-size: 1.2rem;
color: #94a3b8;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
/* Status indicator */
.status {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1.5rem;
}
.status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
animation: pulse 2s infinite;
}
.status-dot.loading {
background: #f59e0b;
box-shadow: 0 0 10px #f59e0b;
}
.status-dot.online {
background: #22c55e;
box-shadow: 0 0 10px #22c55e;
}
.status-dot.offline {
background: #ef4444;
box-shadow: 0 0 10px #ef4444;
}
.status-dot.partial {
background: #f59e0b;
box-shadow: 0 0 10px #f59e0b;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.status-text {
font-size: 0.9rem;
font-weight: 500;
}
.status-text.loading { color: #f59e0b; }
.status-text.online { color: #22c55e; }
.status-text.offline { color: #ef4444; }
.status-text.partial { color: #f59e0b; }
/* Services Grid */
.services-title {
text-align: center;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 2rem;
color: #cbd5e1;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.service-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 2rem;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--card-accent);
opacity: 0;
transition: opacity 0.3s ease;
}
.service-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.service-card:hover::before {
opacity: 1;
}
.service-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.service-name {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #f1f5f9;
display: flex;
align-items: center;
gap: 0.5rem;
}
.service-desc {
font-size: 0.9rem;
color: #94a3b8;
line-height: 1.6;
}
.service-tag {
display: inline-block;
margin-top: 1rem;
padding: 0.25rem 0.75rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
font-size: 0.75rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Service status indicator */
.service-status {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.2rem 0.5rem;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
}
.service-status.online {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
}
.service-status.offline {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.service-status.checking {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
.service-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
animation: pulse 2s infinite;
}
.service-status.online .service-status-dot { background: #22c55e; }
.service-status.offline .service-status-dot { background: #ef4444; }
.service-status.checking .service-status-dot { background: #f59e0b; }
/* Card accent colors */
.service-card.gitea { --card-accent: linear-gradient(90deg, #609930, #79b930); }
.service-card.nextcloud { --card-accent: linear-gradient(90deg, #0082c9, #1d4c6c); }
.service-card.aichat { --card-accent: linear-gradient(90deg, #8b5cf6, #d946ef); }
.service-card.jellyfin { --card-accent: linear-gradient(90deg, #00a4dc, #aa5cc3); }
.service-card.amp { --card-accent: linear-gradient(90deg, #f59e0b, #ef4444); }
/* Footer */
.footer {
text-align: center;
padding: 2rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
color: #64748b;
font-size: 0.85rem;
}
.footer a {
color: #667eea;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
/* Responsive */
@media (max-width: 768px) {
.logo {
font-size: 2.5rem;
}
.container {
padding: 1rem;
}
.services-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1 class="logo">MicalLab</h1>
<p class="subtitle">Personal HomeLab Server</p>
<div class="status">
<span class="status-dot loading" id="statusDot"></span>
<span class="status-text loading" id="statusText">Kontroluji stav služeb...</span>
</div>
</header>
<h2 class="services-title">🏠 Služby</h2>
<div class="services-grid">
<a href="https://gitea.micalis.cloud/" class="service-card gitea" data-service="gitea">
<div class="service-icon">🔨</div>
<h3 class="service-name">
Gitea
<span class="service-status checking" id="status-gitea"><span class="service-status-dot"></span> kontrola</span>
</h3>
<p class="service-desc">Self-hosted Git služba pro správu repozitářů a verzování projektů.</p>
<span class="service-tag">Git & Code</span>
</a>
<a href="https://nextcloud.micalis.cloud/" class="service-card nextcloud" data-service="nextcloud">
<div class="service-icon">☁️</div>
<h3 class="service-name">
Nextcloud
<span class="service-status checking" id="status-nextcloud"><span class="service-status-dot"></span> kontrola</span>
</h3>
<p class="service-desc">Osobní cloud pro ukládání souborů, sdílení dat a kolaboraci.</p>
<span class="service-tag">Cloud Storage</span>
</a>
<a href="https://ai.micalis.cloud/" class="service-card aichat" data-service="aichat">
<div class="service-icon">🤖</div>
<h3 class="service-name">
AI Chat
<span class="service-status checking" id="status-aichat"><span class="service-status-dot"></span> kontrola</span>
</h3>
<p class="service-desc">Lokální AI asistent pro konverzace a generování obsahu.</p>
<span class="service-tag">Artificial Intelligence</span>
</a>
<a href="https://jellyfin.micalis.cloud/" class="service-card jellyfin" data-service="jellyfin">
<div class="service-icon">🎬</div>
<h3 class="service-name">
Jellyfin
<span class="service-status checking" id="status-jellyfin"><span class="service-status-dot"></span> kontrola</span>
</h3>
<p class="service-desc">Mediální server pro streamování filmů, seriálů a hudby.</p>
<span class="service-tag">Media Streaming</span>
</a>
<a href="https://amp.micalis.cloud/" class="service-card amp" data-service="amp">
<div class="service-icon">🎮</div>
<h3 class="service-name">
AMP Game Panel
<span class="service-status checking" id="status-amp"><span class="service-status-dot"></span> kontrola</span>
</h3>
<p class="service-desc">Správa herních serverů a aplikací přehledným panel.</p>
<span class="service-tag">Game Servers</span>
</a>
<a href="https://grafana.micalis.cloud/" class="service-card grafana" data-service="grafana">
<div class="service-icon">✉️</div>
<h3 class="service-name">
Grafana
<span class="service-status checking" id="status-grafana"><span class="service-status-dot"></span> kontrola</span>
</h3>
<p class="service-desc">Monitorovací služba interních serverů.</p>
<span class="service-tag">Infrastructure</span>
</a>
<a href="https://matrix.micalis.cloud/" class="service-card matrix" data-service="matrix">
<div class="service-icon">💬</div>
<h3 class="service-name">
Matrix
<span class="service-status checking" id="status-matrix"><span class="service-status-dot"></span> kontrola</span>
</h3>
<p class="service-desc">Backend pro chatování a volání.</p>
<span class="service-tag">Social Media</span>
</a>
</div>
<footer class="footer">
<p>© 2026 MicalLab Selfhosted infrastructure </p>
</footer>
</div>
<script>
// Načti status ze serveru
async function loadStatus() {
const statusDot = document.getElementById('statusDot');
const statusText = document.getElementById('statusText');
try {
const response = await fetch('status.php');
const data = await response.json();
// Aktualizuj celkový status
const overall = data.overall;
statusDot.className = 'status-dot ' + (overall.status === 'all_online' ? 'online' : overall.status);
statusText.className = 'status-text ' + (overall.status === 'all_online' ? 'online' : overall.status);
if (overall.status === 'all_online') {
statusText.textContent = `Všechny služby běží (${overall.online}/${overall.total})`;
} else if (overall.status === 'partial') {
statusText.textContent = `Částečně dostupné (${overall.online}/${overall.total})`;
} else {
statusText.textContent = `Služby nedostupné (${overall.online}/${overall.total})`;
}
// Aktualizuj jednotlivé služby
data.services.forEach(service => {
const el = document.getElementById('status-' + service.id);
if (el) {
el.className = 'service-status ' + service.status;
el.innerHTML = `<span class="service-status-dot"></span> ${service.status === 'online' ? 'online' : 'offline'}`;
}
});
} catch (error) {
console.error('Chyba při načítání statusu:', error);
statusDot.className = 'status-dot offline';
statusText.className = 'status-text offline';
statusText.textContent = 'Nepodařilo se zjistit stav služeb';
}
}
// Načti status při startu
loadStatus();
// Obnov každých 60 sekund
setInterval(loadStatus, 60000);
</script>
</body>
</html>
+94
View File
@@ -0,0 +1,94 @@
<?php
/**
* Status API pro MicalLab
* Kontroluje dostupnost služeb a vrací JSON
*/
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
// Konfigurace služeb
$services = [
['id' => 'gitea', 'name' => 'Gitea', 'url' => 'https://gitea.micalis.net/', 'timeout' => 5],
['id' => 'nextcloud', 'name' => 'Nextcloud', 'url' => 'https://nextcloud.micalis.net/', 'timeout' => 5],
['id' => 'aichat', 'name' => 'AI Chat', 'url' => 'https://ai.micalis.net/', 'timeout' => 5],
['id' => 'jellyfin', 'name' => 'Jellyfin', 'url' => 'https://jellyfin.micalis.net/', 'timeout' => 5],
['id' => 'amp', 'name' => 'AMP Game Panel', 'url' => 'https://amp.micalis.net/', 'timeout' => 5],
['id' => 'matrix', 'name' => 'Matrix', 'url' => 'https://matrix.micalis.net/', 'timeout' => 5],
['id' => 'grafana', 'name' => 'Grafana', 'url' => 'https://grafana.micalis.net/', 'timeout' => 5],
];
$cacheFile = __DIR__ . '/status_cache.json';
$cacheTTL = 60;
// Zkus načíst z cache
if (file_exists($cacheFile)) {
$cache = json_decode(file_get_contents($cacheFile), true);
if ($cache && isset($cache['timestamp']) && (time() - $cache['timestamp']) < $cacheTTL) {
echo json_encode($cache['data']);
exit;
}
}
// Funkce pro kontrolu služby
function checkService($url, $timeout = 5) {
$ch = curl_init();
curl_setopt_array($ch, [
CURLOPT_URL => $url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HEADER => true,
CURLOPT_NOBODY => true,
CURLOPT_TIMEOUT => $timeout,
CURLOPT_SSL_VERIFYPEER => true,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_MAXREDIRS => 3,
]);
curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$error = curl_error($ch);
curl_close($ch);
// Timeout
if ($error && stripos($error, 'timeout') !== false) {
return ['status' => 'offline', 'message' => 'Timeout'];
}
// Connection error
if ($error || $httpCode === 0) {
return ['status' => 'offline', 'message' => 'Connection failed'];
}
// HTTP error (4xx, 5xx)
if ($httpCode >= 400) {
return ['status' => 'offline', 'message' => "HTTP $httpCode"];
}
return ['status' => 'online', 'http_code' => $httpCode, 'message' => 'OK'];
}
// Zkontroluj všechny služby
$results = [];
foreach ($services as $service) {
$check = checkService($service['url'], $service['timeout']);
$results[] = [
'id' => $service['id'],
'name' => $service['name'],
'status' => $check['status'],
'message' => $check['message'],
];
}
$onlineCount = count(array_filter($results, fn($r) => $r['status'] === 'online'));
$response = [
'timestamp' => time(),
'overall' => [
'status' => $onlineCount === count($results) ? 'all_online' : ($onlineCount > 0 ? 'partial' : 'all_offline'),
'online' => $onlineCount,
'total' => count($results),
],
'services' => $results,
];
file_put_contents($cacheFile, json_encode(['timestamp' => time(), 'data' => $response]));
echo json_encode($response);
+1
View File
@@ -0,0 +1 @@
{"timestamp":1785064933,"data":{"timestamp":1785064933,"overall":{"status":"partial","online":5,"total":7},"services":[{"id":"gitea","name":"Gitea","status":"online","message":"OK"},{"id":"nextcloud","name":"Nextcloud","status":"online","message":"OK"},{"id":"aichat","name":"AI Chat","status":"offline","message":"HTTP 405"},{"id":"jellyfin","name":"Jellyfin","status":"online","message":"OK"},{"id":"amp","name":"AMP Game Panel","status":"online","message":"OK"},{"id":"matrix","name":"Matrix","status":"offline","message":"Connection failed"},{"id":"grafana","name":"Grafana","status":"online","message":"OK"}]}}