MiauRizius/MiauInv
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

feat: added activity log

Browse Source
This commit is contained in:
miaurizius
2026-06-10 14:17:33 +02:00
parent 96f1a40266
commit 0442e4f699
16 changed files with 1027 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

481
ad.html
View File

@@ -1,359 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MiauInv - Modern Inventory & Project Management</title>
<title>MiauInv - Lightweight Inventory Tracking</title>
<style>
:root {
--bg: #0b0f19;
--card: #111827;
--border: #1f2937;
--card-soft: #151f31;
--border: #233047;
--text: #f9fafb;
--text-muted: #9ca3af;
--muted: #9ca3af;
--accent: #3b82f6;
--accent-hover: #2563eb;
--success: #10b981;
--code-bg: #1f2937;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: var(--bg);
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;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
padding: 0;
margin: 0;
}
.navbar {
display: flex;
justify-content: flex-end;
padding: 1rem 2rem;
max-width: 1000px;
margin: 0 auto;
}
.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 {
background: var(--card);
border: 1px solid var(--border);
background: rgba(17, 24, 39, 0.8);
color: var(--text);
padding: 0.5rem 1rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.lang-switch:hover {
border-color: var(--accent);
color: var(--accent);
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 1.5rem 4rem 1.5rem;
}
header {
text-align: center;
padding: 3rem 0 3rem 0;
}
.brand {
font-size: 3.5rem;
font-weight: 800;
letter-spacing: -0.04em;
margin-bottom: 1rem;
}
.brand span {
color: var(--accent);
}
.tagline {
font-size: 1.25rem;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto 2.5rem auto;
}
.badge-container {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.badge {
background: rgba(59, 130, 246, 0.1);
color: var(--accent);
border: 1px solid rgba(59, 130, 246, 0.2);
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
}
.badge.green {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
border-color: rgba(16, 185, 129, 0.2);
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 4rem;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: 1fr 1fr;
}
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}
.card h2 {
font-size: 1.5rem;
padding: 0.45rem 0.9rem;
font-weight: 700;
margin-bottom: 1.25rem;
letter-spacing: -0.02em;
cursor: pointer;
}
.features-list {
list-style: none;
text-align: left;
}
.features-list li {
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
color: var(--text-muted);
}
.features-list li strong {
color: var(--text);
}
.features-list svg {
flex-shrink: 0;
margin-top: 0.2rem;
color: var(--success);
}
.install-section {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 3rem 2rem;
text-align: left;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
margin-bottom: 4rem;
}
.install-section h2 {
font-size: 1.75rem;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.install-section p {
color: var(--text-muted);
margin-bottom: 2rem;
}
.step {
margin-bottom: 2rem;
}
.step h3 {
font-size: 1.1rem;
margin-bottom: 0.75rem;
color: var(--text);
display: flex;
align-items: center;
gap: 0.5rem;
}
.step-num {
background: var(--border);
width: 24px;
height: 24px;
border-radius: 50%;
.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;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
}
pre {
background: var(--bg);
gap: 0.5rem;
border-radius: 999px;
padding: 0.75rem 1.1rem;
text-decoration: none;
font-weight: 800;
border: 1px solid var(--border);
padding: 1rem 1.25rem;
border-radius: 10px;
font-family: monospace;
font-size: 0.9rem;
color: #e5e7eb;
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;
white-space: pre;
margin-bottom: 1rem;
color: #e5e7eb;
font-size: 0.92rem;
}
footer { text-align: center; color: var(--muted); padding-top: 3rem; }
footer {
text-align: center;
padding: 3rem 0;
color: var(--text-muted);
font-size: 0.9rem;
border-top: 1px solid var(--border);
}
/* Sprach-Sichtbarkeitsregeln */
[lang="de"] { display: none; }
html[data-lang="de"] [lang="de"] { display: block; }
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; }
html[data-lang="de"] span[lang="de"],
html[data-lang="de"] strong[lang="de"] {
display: inline;
}
html[data-lang="en"] span[lang="en"],
html[data-lang="en"] strong[lang="en"] {
display: inline;
}
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
</style>
</head>
<body class="lang-en">
<div class="navbar">
<button class="lang-switch" id="langBtn" onclick="toggleLanguage()">DE</button>
</div>
<body>
<div class="container">
<header>
<div class="brand">Miau<span>Inv</span></div>
<p class="tagline" lang="en">A secure, light-weight, and minimalistic management system for tracking your inventory stock and project allocations.</p>
<p class="tagline" lang="de">Ein sicheres, pfeilschnelles und minimalistisches System für deine Lagerbestände und Projekt-Zuweisungen.</p>
<div class="badge-container">
<span class="badge">Go Backend</span>
<span class="badge">HTMX Frontend</span>
<span class="badge">SQLite Inside</span>
<span class="badge green">Docker Ready</span>
</div>
</header>
<div class="grid">
<div class="card">
<h2 lang="en">Why MiauInv?</h2>
<h2 lang="de">Warum MiauInv?</h2>
<ul class="features-list">
<li>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>
<strong lang="en">Zero JS-Overhead:</strong><strong lang="de">Kein JS-Overhead:</strong>
<span lang="en"> Powered by HTMX for an ultra-reactive, dynamic SPA experience without heavy client-side bundles.</span>
<span lang="de"> Dank HTMX extrem reaktiv und dynamisch wie eine SPA, aber ohne tonnenweise schweres JavaScript.</span>
</span>
</li>
<li>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>
<strong lang="en">Live Quantities:</strong><strong lang="de">Live-Verfügbarkeit:</strong>
<span lang="en"> See overall totals, allocated project metrics, and remaining available counts instantly.</span>
<span lang="de"> Siehst sofort den Gesamtbestand, was in Projekten verplant ist und was noch frei zur Verfügung steht.</span>
</span>
</li>
<li>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>
<strong lang="en">Unified Dashboards:</strong><strong lang="de">Orte & Projekte im Blick:</strong>
<span lang="en"> Drill straight down into site boundaries or project lists to inspect stock components with one click.</span>
<span lang="de"> Klicke auf Lagerorte oder aktive Projekte im Dashboard, um direkt den aktuellen Inhalt einzusehen.</span>
</span>
</li>
</ul>
</div>
<div class="card">
<h2 lang="en">Security & Tech Stack</h2>
<h2 lang="de">Sicherheit & Tech</h2>
<ul class="features-list">
<li>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>
<strong lang="en">Dual-Token Security:</strong><strong lang="de">Dual-Token Security:</strong>
<span lang="en"> Uses robust cryptographically signed JWT cookies combined with seamless backend refresh token rotations.</span>
<span lang="de"> Zugriffsschutz über sichere, verschlüsselte JWT-Cookies inkl. Refresh-Token-Rotation.</span>
</span>
</li>
<li>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>
<strong lang="en">Native TLS Listener:</strong><strong lang="de">Native TLS Listener:</strong>
<span lang="en"> Out-of-the-box enforced HTTPS transport layer security powered directly by Go's core networking.</span>
<span lang="de"> Enforcierte HTTPS-Verschlüsselung direkt aus dem Go-Core heraus.</span>
</span>
</li>
<li>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
<span>
<strong lang="en">Ultra Lightweight:</strong><strong lang="de">Leichtgewicht:</strong>
<span lang="en"> Runs on absolute minimal system footprint resource margins using an embedded optimized SQLite model.</span>
<span lang="de"> Minimaler Ressourcenverbrauch dank kompilierter Go-Binary und eingebetteter SQLite-Datenbank.</span>
</span>
</li>
</ul>
</div>
<div class="topbar">
<button class="lang-switch" id="langBtn" onclick="toggleLanguage()">DE</button>
</div>
<div class="install-section">
<h2 lang="en">Install Your Server</h2>
<h2 lang="de">Server installieren</h2>
<p lang="en">Deploy MiauInv to your server infrastructure or local machine in less than a minute utilizing our streamlined container configurations.</p>
<p lang="de">MiauInv lässt sich dank vorkonfiguriertem Docker-Setup innerhalb weniger Sekunden auf deinem Server oder lokalen System starten.</p>
<div class="step">
<h3>
<span class="step-num">1</span>
<span lang="en">Setup Asset Directories and TLS</span>
<span lang="de">Ordner und Zertifikate vorbereiten</span>
</h3>
<p lang="en">Since MiauInv natively enforces encrypted communication channels, initialize your tracking asset directory and place your TLS files there (or generate a self-signed keypair for testing targets):</p>
<p lang="de">Da MiauInv standardmäßig verschlüsseltes HTTPS erzwingt, erstelle den Appdata-Ordner und lege deine SSL-Zertifikate ab (oder generiere ein Self-Signed Cert für Tests):</p>
<pre>mkdir -p appdata
openssl req -x509 -newkey rsa:4096 -keyout appdata/key.pem -out appdata/cert.pem -sha256 -days 365 -nodes -subj "/CN=localhost"</pre>
<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>
<div class="step">
<h3>
<span class="step-num">2</span>
<span lang="en">Configure Docker Compose</span>
<span lang="de">Docker Compose Datei anlegen</span>
</h3>
<p lang="en">Create a <code>docker-compose.yaml</code> layout file in the parent folder, and inject the orchestration service blocks. Ensure your <code>JWT_SECRET</code> environment variable meets the minimum security threshold length requirements:</p>
<p lang="de">Erstelle eine <code>docker-compose.yaml</code> im selben Verzeichnis und füge folgenden Inhalt ein. Passe den <code>JWT_SECRET</code>-String an:</p>
<pre>services:
<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
@@ -361,47 +175,26 @@ openssl req -x509 -newkey rsa:4096 -keyout appdata/key.pem -out appdata/cert.pem
ports:
- "8080:8080"
environment:
- JWT_SECRET=SECURE_RANDOM_STRING_HERE_MIN_32_CHARS
- JWT_SECRET=replace-this-with-a-random-secret-of-at-least-32-chars
volumes:
- ./appdata:/appdata</pre>
</div>
<div class="step">
<h3>
<span class="step-num">3</span>
<span lang="en">Boot the Environment</span>
<span lang="de">Container starten</span>
</h3>
<p lang="en">Fire up the production background workers by executing your infrastructure controls daemon tasks:</p>
<p lang="de">Führe nun einfach den Start-Befehl aus, um das Image zu ziehen und im Hintergrund zu starten:</p>
<pre>docker-compose up -d</pre>
<p style="margin-top: 0.5rem;" lang="en">Everything is set up! Your instance is running and fully accessible at <strong>https://localhost:8080</strong>.</p>
<p style="margin-top: 0.5rem;" lang="de">Fertig! Dein Server läuft und ist sofort unter <strong>https://localhost:8080</strong> erreichbar.</p>
</div>
</div>
</section>
<footer>
<p lang="en">&copy; 2026 Maurice Larivière.</p>
<p lang="de">&copy; 2026 Maurice Larivière.</p>
<p>&copy; 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 currentLang = document.documentElement.getAttribute('data-lang') || 'en';
const nextLang = currentLang === 'en' ? 'de' : 'en';
setLanguage(nextLang);
const current = document.documentElement.getAttribute('data-lang') || 'en';
setLanguage(current === 'en' ? 'de' : 'en');
}
const savedLang = localStorage.getItem('miauinv-lang') || 'en';
setLanguage(savedLang);
setLanguage(localStorage.getItem('miauinv-lang') || 'en');
</script>
</body>
</html>
</html>