MrDiderot/mischlabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: MischLabs landing page

Browse Source 
Static landing page with tile-based overview of all 8 self-hosted services.
Dark theme with responsive grid layout, SVG icons, and hover animations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kroonk
2026-04-12 22:04:25 +02:00
commit bebb6a3028
4 changed files with 511 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
index.html Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MischLabs - Services</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-glow bg-glow-1"></div>
<div class="bg-glow bg-glow-2"></div>
<header>
<div class="logo">
<span class="logo-icon">&#9881;</span>
<h1>Misch<span>Labs</span></h1>
</div>
<p class="subtitle">Self-Hosted Services</p>
</header>
<main>
<div class="grid">
<a href="https://drive.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #4285f4;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
</svg>
</div>
<div class="card-content">
<h2>Drive</h2>
<p>Cloud-Speicher</p>
</div>
<span class="card-domain">drive.mischlabs.de</span>
</a>
<a href="https://git.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #f05033;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4"/><line x1="1.05" y1="12" x2="7" y2="12"/><line x1="17.01" y1="12" x2="22.96" y2="12"/>
<path d="M12 1.05V7"/><path d="M12 17.01v5.95"/>
</svg>
</div>
<div class="card-content">
<h2>Git</h2>
<p>Code-Repositories</p>
</div>
<span class="card-domain">git.mischlabs.de</span>
</a>
<a href="https://movies.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #a855f7;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/>
<line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/>
<line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/>
<line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/>
<line x1="17" y1="7" x2="22" y2="7"/>
</svg>
</div>
<div class="card-content">
<h2>Movies</h2>
<p>Filme &amp; Serien</p>
</div>
<span class="card-domain">movies.mischlabs.de</span>
</a>
<a href="https://audiobook.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #22c55e;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 18v-6a9 9 0 0 1 18 0v6"/>
<path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/>
</svg>
</div>
<div class="card-content">
<h2>Audiobooks</h2>
<p>Hoerbuecher</p>
</div>
<span class="card-domain">audiobook.mischlabs.de</span>
</a>
<a href="https://foodlabs.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #f97316;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 8h1a4 4 0 0 1 0 8h-1"/>
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/>
<line x1="6" y1="1" x2="6" y2="4"/>
<line x1="10" y1="1" x2="10" y2="4"/>
<line x1="14" y1="1" x2="14" y2="4"/>
</svg>
</div>
<div class="card-content">
<h2>FoodLabs</h2>
<p>Rezepte</p>
</div>
<span class="card-domain">foodlabs.mischlabs.de</span>
</a>
<a href="https://password.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #eab308;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
<circle cx="12" cy="16" r="1"/>
</svg>
</div>
<div class="card-content">
<h2>Passwords</h2>
<p>Passwort-Manager</p>
</div>
<span class="card-domain">password.mischlabs.de</span>
</a>
<a href="https://docs.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #06b6d4;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<polyline points="10 9 9 9 8 9"/>
</svg>
</div>
<div class="card-content">
<h2>Docs</h2>
<p>Dokumentation</p>
</div>
<span class="card-domain">docs.mischlabs.de</span>
</a>
<a href="https://tom.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #ec4899;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
</svg>
</div>
<div class="card-content">
<h2>Tom</h2>
<p>Persoenliche Seite</p>
</div>
<span class="card-domain">tom.mischlabs.de</span>
</a>
</div>
</main>
<footer>
<p>&copy; 2026 MischLabs &mdash; Self-Hosted with care</p>
</footer>
</body>
</html>