211 lines
11 KiB
HTML
211 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>zamnok • Services</title>
|
||
<meta name="description" content="Übersicht der zamnok Services und Tools" />
|
||
<link rel="icon" href="/assets/favicon.svg" />
|
||
<style>
|
||
:root {
|
||
--strip-w: 140px; /* Breite der Seitenbalken */
|
||
--tile: url('/assets/tile.png'); /* Platzhalter: Fliesenmotiv */
|
||
--radius: 18px;
|
||
}
|
||
|
||
/* Theme Tokens */
|
||
:root[data-theme="light"], :root:not([data-theme]) {
|
||
--bg: #f7f8fb;
|
||
--panel: #ffffff;
|
||
--panel-2: #f1f5f9;
|
||
--text: #0f172a;
|
||
--muted: #475569;
|
||
--brand: #2563eb;
|
||
--ok: #16a34a;
|
||
--warn: #eab308;
|
||
--err: #dc2626;
|
||
--shadow: 0 10px 20px rgba(2,6,23,.08);
|
||
}
|
||
:root[data-theme="dark"] {
|
||
--bg: #0b0d10;
|
||
--panel: #12161b;
|
||
--panel-2: #171c22;
|
||
--text: #e7ecf1;
|
||
--muted: #92a1b3;
|
||
--brand: #7cc0ff;
|
||
--ok: #2ecc71;
|
||
--warn: #f1c40f;
|
||
--err: #e74c3c;
|
||
--shadow: 0 10px 30px rgba(0,0,0,.3);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html, body { height: 100%; }
|
||
body {
|
||
margin: 0;
|
||
font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
}
|
||
|
||
/* Seitenbalken mit Fliesenhintergrund */
|
||
body::before, body::after{
|
||
content: ""; position: fixed; top:0; bottom:0; width: var(--strip-w); z-index: -1; opacity:.22;
|
||
background-image: var(--tile);
|
||
background-repeat: repeat; background-size: 160px auto; /* Kachelgröße */
|
||
filter: saturate(0.8) contrast(1.05);
|
||
}
|
||
body::before{ left:0; }
|
||
body::after{ right:0; }
|
||
|
||
/* Header */
|
||
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.1) blur(6px); background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--panel), #000 12%); }
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
|
||
.row { display: flex; align-items: center; gap: 16px; }
|
||
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; }
|
||
.logo img { width: 36px; height: 36px; border-radius: 10px; }
|
||
.spacer { flex: 1; }
|
||
.nav { display: flex; gap: 10px; align-items:center; }
|
||
.btn { appearance: none; border: 1px solid color-mix(in oklab, var(--panel), #000 10%); background: var(--panel); color: var(--text); padding: 10px 14px; border-radius: 12px; cursor: pointer; box-shadow: var(--shadow); text-decoration: none; font-weight: 600; }
|
||
.btn:hover { background: var(--panel-2); }
|
||
|
||
/* Toggle */
|
||
.toggle { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; border:1px solid color-mix(in oklab, var(--panel), #000 10%); background: var(--panel); cursor:pointer; }
|
||
|
||
/* Hero */
|
||
.hero { padding: 28px 0 8px; }
|
||
.banner { position: relative; overflow: hidden; border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 70%, #fff 0%) 0%, transparent 100%), url('/assets/banner-placeholder.jpg') center/cover no-repeat; min-height: 180px; display: grid; place-items: end start; box-shadow: var(--shadow); }
|
||
.banner .copy { padding: 20px; background: color-mix(in oklab, var(--bg) 65%, transparent); border-top-right-radius: var(--radius); }
|
||
.banner h1 { margin: 0; font-size: clamp(22px, 3vw, 32px); }
|
||
.banner p { margin: 6px 0 0; color: var(--muted); }
|
||
|
||
/* Tiles */
|
||
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin: 24px 0 8px; }
|
||
.tile { grid-column: span 12; background: var(--panel); border: 1px solid color-mix(in oklab, var(--panel), #000 10%); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; text-decoration: none; color: inherit; transition: transform .12s ease, background .12s ease, border-color .12s ease; }
|
||
.tile:hover { transform: translateY(-2px); background: var(--panel-2); border-color: color-mix(in oklab, var(--panel), #000 18%); }
|
||
.tile--half { grid-column: span 6; }
|
||
.tile--third { grid-column: span 4; }
|
||
@media (max-width: 900px){ .tile--half { grid-column: span 12; } .tile--third { grid-column: span 6; } }
|
||
@media (max-width: 600px){ .tile--third { grid-column: span 12; } }
|
||
|
||
.icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--panel), #fff 4%); border: 1px solid color-mix(in oklab, var(--panel), #000 10%); }
|
||
.icon svg { width: 22px; height: 22px; }
|
||
|
||
.title { font-weight: 700; letter-spacing: .2px; }
|
||
.meta { color: var(--muted); font-size: 14px; }
|
||
.badge { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 100px; border: 1px solid color-mix(in oklab, var(--panel), #000 18%); background: #fff; color: var(--text); }
|
||
:root[data-theme="dark"] .badge { background: color-mix(in oklab, var(--panel-2), #000 0%); border-color: color-mix(in oklab, var(--panel), #fff 10%); color: var(--text); }
|
||
|
||
.status { display:flex; align-items:center; gap:8px; font-size: 13px; color: var(--muted); }
|
||
.dot { width:10px; height:10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok), transparent 70%); }
|
||
|
||
/* Sections */
|
||
.section { margin: 36px 0 24px; }
|
||
.section h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: .3px; }
|
||
.card { background: var(--panel); border: 1px solid color-mix(in oklab, var(--panel), #000 10%); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); color: var(--text); }
|
||
|
||
/* Footer */
|
||
.rule { height:1px; border:0; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--text), transparent 70%), transparent); margin: 36px 0 16px; }
|
||
footer { margin: 8px 0 24px; color: var(--muted); font-size: 14px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap: wrap; }
|
||
footer a { color: inherit; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Header -->
|
||
<header class="site-header">
|
||
<div class="container row">
|
||
<a href="/" class="logo" aria-label="zamnok home">
|
||
<!-- Logo Placeholder (replace /assets/logo.svg) -->
|
||
<img src="/assets/logo.svg" alt="zamnok Logo" />
|
||
<span>zamnok</span>
|
||
</a>
|
||
<div class="spacer"></div>
|
||
<nav class="nav" aria-label="global">
|
||
<a class="btn" href="#services">Services</a>
|
||
<button class="toggle" id="themeToggle" type="button" title="Theme wechseln">🌓 <span id="themeLabel">Light</span></button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container">
|
||
<!-- Hero / Banner -->
|
||
<section class="hero" aria-label="intro">
|
||
<div class="banner" aria-label="Banner Placeholder"></div>
|
||
</section>
|
||
|
||
<!-- Tiles -->
|
||
<section id="services" class="section" aria-label="services">
|
||
<h2>Services</h2>
|
||
<div class="grid">
|
||
<!-- SilverBullet -->
|
||
<a class="tile tile--third" href="https://docs.zamnok.com" target="_blank" rel="noopener">
|
||
<div class="icon" aria-hidden="true">
|
||
<!-- doc icon -->
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="title">Docs (SilverBullet)</div>
|
||
<div class="meta">Markdown‑Space, Notizen, Wissensbasis</div>
|
||
</div>
|
||
<div class="status"><span class="dot" title="online"></span>online</div>
|
||
</a>
|
||
|
||
<!-- Placeholder Kachel 1 -->
|
||
<a class="tile tile--third" href="#" aria-disabled="true" onclick="return false;">
|
||
<div class="icon" aria-hidden="true">
|
||
<!-- grid icon -->
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="title">Service #2</div>
|
||
<div class="meta">Platzhalter – demnächst</div>
|
||
</div>
|
||
<span class="badge">coming soon</span>
|
||
</a>
|
||
|
||
<!-- Placeholder Kachel 2 -->
|
||
<a class="tile tile--third" href="#" aria-disabled="true" onclick="return false;">
|
||
<div class="icon" aria-hidden="true">
|
||
<!-- cog icon -->
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 0 1 7.04 3.2l.06.06c.48.48 1.17.62 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09c0 .66.38 1.26 1 1.51h.09c.65.29 1.34.15 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06c-.48.48-.62 1.17-.33 1.82V9c.65.29 1.26.38 1.51 1H21a2 2 0 1 1 0 4h-.09c-.66 0-1.26.38-1.51 1z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div class="title">Service #3</div>
|
||
<div class="meta">Platzhalter – demnächst</div>
|
||
</div>
|
||
<span class="badge">coming soon</span>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About -->
|
||
|
||
|
||
<hr class="rule" />
|
||
<footer class="section">
|
||
<div>Kontakt: <a href="mailto:admin@zamnok.com">admin@zamnok.com</a></div>
|
||
<div><span id="y"></span> zamnok</div>
|
||
</footer>
|
||
</main>
|
||
|
||
<script>
|
||
// year stamp
|
||
document.getElementById('y').textContent = new Date().getFullYear();
|
||
|
||
// Theme handling with localStorage
|
||
const root = document.documentElement;
|
||
const btn = document.getElementById('themeToggle');
|
||
const label = document.getElementById('themeLabel');
|
||
const saved = localStorage.getItem('theme');
|
||
if (saved) root.setAttribute('data-theme', saved);
|
||
label.textContent = root.getAttribute('data-theme') === 'dark' ? 'Dark' : 'Light';
|
||
btn.addEventListener('click', () => {
|
||
const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
|
||
root.setAttribute('data-theme', next);
|
||
localStorage.setItem('theme', next);
|
||
label.textContent = next === 'dark' ? 'Dark' : 'Light';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|