201 lines
9.1 KiB
HTML
201 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MiauInv - Lightweight Inventory Tracking</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0b0f19;
|
|
--card: #111827;
|
|
--card-soft: #151f31;
|
|
--border: #233047;
|
|
--text: #f9fafb;
|
|
--muted: #9ca3af;
|
|
--accent: #3b82f6;
|
|
--success: #10b981;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
min-height: 100vh;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 34rem),
|
|
radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.10), transparent 30rem),
|
|
var(--bg);
|
|
color: var(--text);
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container { max-width: 1120px; margin: 0 auto; padding: 1.25rem 1.5rem 4rem; }
|
|
.topbar { display: flex; justify-content: flex-end; margin-bottom: 3rem; }
|
|
.lang-switch {
|
|
border: 1px solid var(--border);
|
|
background: rgba(17, 24, 39, 0.8);
|
|
color: var(--text);
|
|
border-radius: 999px;
|
|
padding: 0.45rem 0.9rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
.hero { text-align: center; padding: 2.5rem 0 3.5rem; }
|
|
.brand { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 900; letter-spacing: -0.07em; line-height: 0.95; }
|
|
.brand span { color: var(--accent); }
|
|
.tagline { max-width: 820px; margin: 1.25rem auto 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); }
|
|
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.75rem; }
|
|
.hero-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border-radius: 999px;
|
|
padding: 0.75rem 1.1rem;
|
|
text-decoration: none;
|
|
font-weight: 800;
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
background: rgba(17, 24, 39, 0.78);
|
|
transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
|
|
}
|
|
.hero-link:hover { transform: translateY(-1px); border-color: rgba(59, 130, 246, 0.7); background: rgba(59, 130, 246, 0.12); }
|
|
.hero-link.primary { border-color: rgba(59, 130, 246, 0.48); background: rgba(59, 130, 246, 0.18); color: #dbeafe; }
|
|
.hero-link svg { width: 1rem; height: 1rem; }
|
|
.badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
|
|
.badge {
|
|
border: 1px solid rgba(59, 130, 246, 0.28);
|
|
background: rgba(59, 130, 246, 0.10);
|
|
color: #bfdbfe;
|
|
border-radius: 999px;
|
|
padding: 0.4rem 0.8rem;
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
}
|
|
.badge.green { border-color: rgba(16, 185, 129, 0.28); background: rgba(16, 185, 129, 0.10); color: #a7f3d0; }
|
|
|
|
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0 3rem; }
|
|
.card {
|
|
background: linear-gradient(180deg, rgba(21, 31, 49, 0.92), rgba(17, 24, 39, 0.92));
|
|
border: 1px solid var(--border);
|
|
border-radius: 20px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
|
|
}
|
|
.card h2 { font-size: 1.1rem; margin-bottom: 0.65rem; }
|
|
.card p { color: var(--muted); }
|
|
.check { color: var(--success); font-weight: 900; margin-right: 0.4rem; }
|
|
|
|
.install {
|
|
background: rgba(17, 24, 39, 0.82);
|
|
border: 1px solid var(--border);
|
|
border-radius: 24px;
|
|
padding: 2rem;
|
|
}
|
|
.install h2 { font-size: 1.7rem; margin-bottom: 0.5rem; }
|
|
.install > p { color: var(--muted); margin-bottom: 1.25rem; }
|
|
pre {
|
|
background: #050816;
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
color: #e5e7eb;
|
|
font-size: 0.92rem;
|
|
}
|
|
footer { text-align: center; color: var(--muted); padding-top: 3rem; }
|
|
|
|
[lang="de"] { display: none; }
|
|
html[data-lang="de"] [lang="de"] { display: initial; }
|
|
html[data-lang="de"] [lang="en"] { display: none; }
|
|
html[data-lang="de"] p[lang="de"], html[data-lang="de"] div[lang="de"] { display: block; }
|
|
html[data-lang="de"] span[lang="de"], html[data-lang="de"] strong[lang="de"] { display: inline; }
|
|
|
|
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="topbar">
|
|
<button class="lang-switch" id="langBtn" onclick="toggleLanguage()">DE</button>
|
|
</div>
|
|
|
|
<section class="hero">
|
|
<div class="brand">Miau<span>Inv</span></div>
|
|
<p class="tagline" lang="en">Secure, lightweight inventory, stock, and project allocation tracking for self-hosted environments.</p>
|
|
<p class="tagline" lang="de">Sicheres, leichtgewichtiges Inventory-, Lager- und Projektzuweisungs-Tracking für Self-Hosting.</p>
|
|
<div class="hero-actions">
|
|
<a class="hero-link primary" href="https://git.miaurizius.de/MiauRizius/MiauInv" target="_blank" rel="noopener noreferrer">
|
|
<span lang="en">View repository</span>
|
|
<span lang="de">Repository ansehen</span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7"></path><path d="M7 7h10v10"></path></svg>
|
|
</a>
|
|
<a class="hero-link" href="https://git.miaurizius.de/MiauRizius/MiauInv/packages" target="_blank" rel="noopener noreferrer">
|
|
<span lang="en">Container image</span>
|
|
<span lang="de">Container-Image</span>
|
|
</a>
|
|
</div>
|
|
<div class="badges">
|
|
<span class="badge">Go</span>
|
|
<span class="badge">SQLite</span>
|
|
<span class="badge">HTMX-style UI</span>
|
|
<span class="badge green">Docker ready</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid">
|
|
<article class="card">
|
|
<h2 lang="en"><span class="check">✓</span>Track stock clearly</h2>
|
|
<h2 lang="de"><span class="check">✓</span>Bestände klar verfolgen</h2>
|
|
<p lang="en">Manage items, locations, quantities, and project allocations from one small dashboard.</p>
|
|
<p lang="de">Verwalte Items, Lagerorte, Mengen und Projektzuweisungen in einem kleinen Dashboard.</p>
|
|
</article>
|
|
<article class="card">
|
|
<h2 lang="en"><span class="check">✓</span>Built-in account security</h2>
|
|
<h2 lang="de"><span class="check">✓</span>Account-Sicherheit inklusive</h2>
|
|
<p lang="en">Signed JWT sessions, refresh-token rotation, TOTP 2FA, recovery codes, passkeys, and an activity log.</p>
|
|
<p lang="de">Signierte JWT-Sessions, Refresh-Token-Rotation, TOTP-2FA, Recovery-Codes, Passkeys und Activity Log.</p>
|
|
</article>
|
|
<article class="card">
|
|
<h2 lang="en"><span class="check">✓</span>Small deployment footprint</h2>
|
|
<h2 lang="de"><span class="check">✓</span>Kleiner Deployment-Footprint</h2>
|
|
<p lang="en">A compiled Go binary with embedded SQLite persistence and a minimal Docker image.</p>
|
|
<p lang="de">Kompilierte Go-Binary mit eingebetteter SQLite-Persistenz und minimalem Docker-Image.</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="install">
|
|
<h2 lang="en">Run with Docker Compose</h2>
|
|
<h2 lang="de">Mit Docker Compose starten</h2>
|
|
<p lang="en">Create an appdata directory, provide TLS files, set a strong JWT secret, and start the container.</p>
|
|
<p lang="de">Appdata-Ordner erstellen, TLS-Dateien bereitstellen, starkes JWT-Secret setzen und Container starten.</p>
|
|
<pre>services:
|
|
miauinv:
|
|
image: git.miaurizius.de/miaurizius/miauinv:latest
|
|
container_name: MiauInv
|
|
restart: unless-stopped
|
|
ports:
|
|
- "8080:8080"
|
|
environment:
|
|
- JWT_SECRET=replace-this-with-a-random-secret-of-at-least-32-chars
|
|
volumes:
|
|
- ./appdata:/appdata</pre>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>© 2026 Maurice Larivière.</p>
|
|
</footer>
|
|
</div>
|
|
<script>
|
|
function setLanguage(lang) {
|
|
document.documentElement.setAttribute('data-lang', lang);
|
|
document.getElementById('langBtn').innerText = lang === 'en' ? 'DE' : 'EN';
|
|
localStorage.setItem('miauinv-lang', lang);
|
|
}
|
|
function toggleLanguage() {
|
|
const current = document.documentElement.getAttribute('data-lang') || 'en';
|
|
setLanguage(current === 'en' ? 'de' : 'en');
|
|
}
|
|
setLanguage(localStorage.getItem('miauinv-lang') || 'en');
|
|
</script>
|
|
</body>
|
|
</html>
|