Dieses Tool ist Teil von ToolHub Zurück zu ToolHub
🏠

Notfallvorrats-Inventar

Eine selbstgehostete, leichtgewichtige Webanwendung zur Verwaltung von Hahaltsnotfallvorräten und zur Planung von Überlebensmahlzeiten. Erstellt mit PHP 8.x und Vanilla JavaScript — keine Datenbank erforderlich, keine Frameworks, keine Build-Tools.

Funktionen

📦

Bestandsverwaltung

Vollständige CRUD-Operationen mit automatisch berechneten Resttagen, Statusanzeigen, Kategoriefilter, Sortierung und Suche.

🔐

Admin-Authentifizierung

BCrypt-Passwort-Hashing, PHP-Sitzungsauthentifizierung, Nur-Lese-Modus für Betrachter und .htaccess-Dateischutz.

👨‍👩‍👦

Haushaltskonfiguration

Anpassbare Haushaltszusammensetzung und Zieltage mit dynamischer Neuberechnung aller Vorratsdauern.

🍳

Überlebensrezepte

16 überlebensoptimierte Rezepte mit Prioritätsstufen, Brennstoffkosten-Indikatoren, Kinderversionen und druckfähigem Layout.

🌍

Mehrsprachig

Englisch, Deutsch und Rumänisch mit sofortigem Wechsel und persistenter Präferenz über localStorage und Cookies.

🎨

Design & UX

Responsives Layout, Dunkelmodus-Unterstützung, CSS Custom Properties, barrierefreie Fokus-Rahmen und reduzierte Bewegung.

Bestandsverwaltung

  • Vollständige CRUD-Operationen — Artikel hinzufügen, bearbeiten und löschen mit Kategorien, Unterkategorien, Mengen, Einheiten, täglichem Verbrauch und Ablaufdaten
  • Automatisch berechnete Resttage — das System berechnet, wie viele Tage jeder Artikel basierend auf dem aktuellen Bestand und dem täglichen Verbrauch je Haushaltsmitglied reicht
  • Statusanzeigen — Artikel werden automatisch als Kritisch (unter Mindestbestand), Warnung (unter Ziel) oder Ausreichend markiert
  • Kategoriefilter — Klicken Sie auf eine Kategorie-Pille, um die Tabelle sofort zu filtern; Pillen sind nach aggregiertem Status farbcodiert
  • Sortierbare Tabelle — Klicken Sie auf eine Spaltenüberschrift für aufsteigende/absteigende Sortierung
  • Suche — Echtzeitsuche über Artikelnamen, Kategorien und Unterkategorien
  • Backup exportieren — Ein-Klick-JSON-Export Ihres gesamten Inventars zur Offline-Aufbewahrung

Admin-Authentifizierung

  • Einzel-Admin-Modell — ein Admin-Konto wird bei der Ersteinrichtung erstellt; keine Multi-User-Konten erforderlich
  • BCrypt-Passwort-Hashing (Kostenfaktor 12) — Passwörter werden niemals im Klartext gespeichert
  • PHP-Sitzungsauthentifizierung — Sitzungen in einem geschützten sessions/-Verzeichnis, nicht im System-Temp-Ordner
  • Betrachtermodus — nicht authentifizierte Besucher können nur lesen
  • Passwortänderung — Admin kann das Passwort jederzeit in den Einstellungen ändern
  • .htaccess-Schutz — direkter URL-Zugriff auf JSON-Datendateien und Sitzungen ist blockiert

Überlebensrezepte

  • 16 überlebensoptimierte Rezepte — speziell für die im Inventar erfassten Zutaten entwickelt
  • Prioritätsstufen — Zuerst verwenden (verderblich), Bald verwenden oder Jederzeit
  • Brennstoffkosten-Indikatoren — Null (kein Kochen), Niedrig (<10 Min.) oder Mittel (10-20 Min.)
  • Nur-Notfall-Rezepte — klar markiert für kritische Situationen
  • Komfort-/Normalitätsrezepte — Mahlzeiten, die die Moral in längeren Notfällen stärken
  • Kinderversionen — angepasste Anleitungen für junge Kinder (ab 5 Jahren)
  • Überlebenstipps — Wasserspartechniken, Zutaten-Ersatzstrategien und Koch-Abkürzungen
  • Druckfertig — optimiertes Druck-Stylesheet für physische Kopien oder "Als PDF speichern"

📁 Dateistruktur

project-root/ ├── api.php # Backend API (PHP 8.x) ├── index.html # Main inventory page ├── receips.html # Survival recipes page ├── style.css # Design system + app styles ├── setup-permissions.sh # Server permission setup ├── data/ │ ├── inventory_data.json # Inventory items (auto-created) │ ├── admin_data.json # Admin account & settings │ └── .htaccess # Blocks direct HTTP access ├── sessions/ # PHP session storage │ └── .htaccess # Blocks direct HTTP access ├── .htaccess # Root protection rules └── favicon.ico # Auto-generated

Voraussetzungen

  • Webserver — Apache (mit .htaccess-Unterstützung) oder Nginx
  • PHP 8.x — mit json- und posix-Erweiterungen (posix ist optional, bietet aber bessere Diagnose)
  • Schreibberechtigungen — der Webserver-Benutzer (typischerweise www-data) muss in data/ und sessions/ schreiben können
  • Keine Datenbank — alle Daten werden in JSON-Dateien gespeichert
  • Kein npm/Build-Schritt — reines HTML, CSS und JavaScript; keine Kompilierung oder Bündelung erforderlich

🛠 Installation

Wählen Sie die Installationsmethode, die zu Ihrem Betriebssystem und Setup passt.

Schnellstart

1
Dateien in das Webserver-Verzeichnis kopieren

Kopieren Sie den gesamten Projektordner in Ihr Apache/Nginx-Dokumentverzeichnis.

bash
sudo cp -r ./emergency-prep-inventory /var/www/html/tools/emergency-prep-inventory
2
Berechtigungsskript ausführen

Dies erstellt data/ und sessions/, setzt Eigentümer und Berechtigungen, erstellt .htaccess-Schutz, generiert ein Favicon und führt einen Schreibtest durch.

bash
sudo bash setup-permissions.sh /var/www/html/tools/emergency-prep-inventory
3
Browser öffnen

Navigieren Sie zu Ihrer Anwendungs-URL und schließen Sie den Einrichtungsbildschirm ab.

Manuelle Berechtigungseinstellung

Wenn Sie Berechtigungen lieber manuell statt mit dem Skript festlegen möchten:

bash
mkdir -p /var/www/html/tools/emergency-prep-inventory/data
mkdir -p /var/www/html/tools/emergency-prep-inventory/sessions
sudo chown -R www-data:www-data /var/www/html/tools/emergency-prep-inventory
find /var/www/html/tools/emergency-prep-inventory -type d -exec chmod 755 {} \;
chmod 750 /var/www/html/tools/emergency-prep-inventory/data
chmod 700 /var/www/html/tools/emergency-prep-inventory/sessions
chmod 640 /var/www/html/tools/emergency-prep-inventory/*.php
chmod 644 /var/www/html/tools/emergency-prep-inventory/*.html
chmod 644 /var/www/html/tools/emergency-prep-inventory/*.css
chmod 660 /var/www/html/tools/emergency-prep-inventory/data/*.json

Nginx-Konfiguration

Wenn Sie Nginx statt Apache verwenden, fügen Sie diese Location-Blöcke zu Ihrer Serverkonfiguration hinzu:

nginx
location /data/ {
    deny all;
}
location /sessions/ {
    deny all;
}
💡

XAMPP ist ein kostenloses All-in-One-Paket mit Apache, PHP und allem, was Sie benötigen, um diese Anwendung unter Windows auszuführen. Keine manuelle Webserver-Installation nötig.

Schritt 1: XAMPP installieren

  1. XAMPP für Windows von apachefriends.org herunterladen
  2. Den Installer ausführen. Standard-Installationspfad: C:\xampp
  3. Während der Installation sicherstellen, dass Apache und PHP ausgewählt sind (Standard)
  4. Nach der Installation das XAMPP-Kontrollpanel öffnen und neben Apache auf Start klicken — der Status sollte grün werden

Schritt 2: Projektdateien kopieren

  1. Zum XAMPP-Webroot-Verzeichnis navigieren: C:\xampp\htdocs\
  2. Einen Projektordner erstellen, z.B. C:\xampp\htdocs\emergency-prep-inventory\
  3. Alle Projektdateien in diesen Ordner kopieren: api.php, index.html, receips.html, style.css, permission.sh, setup-permissions.sh

Schritt 3: Erforderliche Verzeichnisse erstellen

Erstellen Sie in Ihrem Projektordner manuell diese zwei Verzeichnisse:

  • C:\xampp\htdocs\emergency-prep-inventory\data\
  • C:\xampp\htdocs\emergency-prep-inventory\sessions\

Das war's — XAMPP führt Apache unter Ihrem eigenen Windows-Benutzerkonto aus, sodass keine Berechtigungsprobleme bestehen. PHP kann automatisch in diese Verzeichnisse schreiben.

Schritt 4: Anwendung öffnen

  1. Browser öffnen und zu: http://localhost/emergency-prep-inventory/ gehen
  2. Der Einrichtungsbildschirm erscheint — Admin-Konto erstellen und Haushalt konfigurieren
  3. Die Anwendung läuft jetzt lokal auf Ihrem Rechner

Optional: Lokalen Netzwerkzugriff aktivieren

Wenn andere Geräte in Ihrem Heimnetzwerk (Telefon, Tablet, anderer Computer) auf das Inventar zugreifen sollen:

  1. Lokale IP-Adresse Ihres Windows-PCs finden: Eingabeaufforderung öffnen und ipconfig ausführen — nach "IPv4-Adresse" suchen (z.B. 192.168.1.100)
  2. Auf dem anderen Gerät im Browser zu: http://192.168.1.100/emergency-prep-inventory/ gehen
  3. Sicherstellen, dass die Windows-Firewall eingehende Verbindungen auf Port 80 zulässt (XAMPP fragt normalerweise danach)
📝

Die .htaccess-Dateien, die data/ und sessions/ vor direktem URL-Zugriff schützen, funktionieren mit XAMPP sofort, da es Apache mit standardmäßig aktiviertem mod_rewrite verwendet.

Fehlerbehebung (Windows / XAMPP)

ProblemSolution
Apache startet nichtEin anderes Programm (oft Skype oder IIS) nutzt Port 80. Im XAMPP-Kontrollpanel neben Apache auf "Config" klicken → Port auf 8080 ändern → über http://localhost:8080/... aufrufen
"Zugriff verboten"-FehlerSicherstellen, dass der Ordnername in htdocs mit der URL übereinstimmt. Keine Leer- oder Sonderzeichen im Ordnernamen.
Leere Seite / PHP läuft nichtXAMPP-Kontrollpanel öffnen → neben Apache auf "Config" klicken → sicherstellen, dass PHP aktiviert ist. Testen mit in einer test.php-Datei.
data/ oder sessions/ nicht beschreibbarRechtsklick auf den Ordner → Eigenschaften → Sicherheit → sicherstellen, dass "Benutzer" oder "Jeder" Schreibberechtigung hat. Selten nötig bei XAMPP.
.htaccess funktioniert nichtC:\xampp\apache\conf\httpd.conf öffnen, #LoadModule rewrite_module modules/mod_rewrite.so finden und das # am Anfang entfernen. Apache neu starten.

Auf macOS haben Sie zwei beliebte Optionen für einen lokalen PHP-Server: XAMPP (plattformübergreifend, wie bei Windows) oder MAMP (macOS-fokussiert). Beide funktionieren gut.

XAMPP auf macOS

Schritt 1: XAMPP installieren

  1. XAMPP für macOS von apachefriends.org herunterladen
  2. Die .dmg-Datei öffnen und XAMPP in den Programme-Ordner ziehen
  3. XAMPP aus Programme starten — möglicherweise wird Ihr macOS-Passwort benötigt
  4. Im XAMPP-Kontrollpanel neben Apache auf Start klicken

Schritt 2: Projektdateien kopieren

Das XAMPP-Webroot unter macOS ist: /Applications/XAMPP/xamppfiles/htdocs/

bash
cp -r ./emergency-prep-inventory /Applications/XAMPP/xamppfiles/htdocs/emergency-prep-inventory

Schritt 3: Erforderliche Verzeichnisse erstellen

bash
mkdir -p /Applications/XAMPP/xamppfiles/htdocs/emergency-prep-inventory/data
mkdir -p /Applications/XAMPP/xamppfiles/htdocs/emergency-prep-inventory/sessions
sudo chown -R daemon:daemon /Applications/XAMPP/.../data
sudo chown -R daemon:daemon /Applications/XAMPP/.../sessions

Bei Berechtigungsfehlern (XAMPP läuft als Benutzer 'daemon'): sudo chown -R daemon:daemon /Applications/XAMPP/.../data und sessions ausführen

Schritt 4: Anwendung öffnen

Browser öffnen und zu: http://localhost/emergency-prep-inventory/ gehen


MAMP auf macOS

MAMP (Mac + Apache + MySQL + PHP) ist eine weitere beliebte Option. Die kostenlose Version reicht aus — MySQL wird für dieses Projekt nicht benötigt.

Schritt 1: MAMP installieren

  1. MAMP von mamp.info herunterladen
  2. Durch Ziehen in den Programme-Ordner installieren
  3. MAMP starten und auf Server starten klicken — Apache und MySQL starten (MySQL wird nicht verwendet, stört aber nicht)

Schritt 2: Projektdateien kopieren

Das MAMP-Webroot ist: /Applications/MAMP/htdocs/

bash
cp -r ./emergency-prep-inventory /Applications/MAMP/htdocs/emergency-prep-inventory

Schritt 3: Erforderliche Verzeichnisse erstellen

bash
mkdir -p /Applications/MAMP/htdocs/emergency-prep-inventory/data
mkdir -p /Applications/MAMP/htdocs/emergency-prep-inventory/sessions
chmod 777 /Applications/MAMP/htdocs/emergency-prep-inventory/data
chmod 777 /Applications/MAMP/htdocs/emergency-prep-inventory/sessions

MAMP führt Apache unter Ihrem eigenen Benutzerkonto aus, sodass Berechtigungen kein Problem sein sollten. Falls doch: chmod 777 data/ und sessions/

Schritt 4: Anwendung öffnen

Standardmäßig nutzt MAMP Port 8888. Browser öffnen und zu: http://localhost:8888/emergency-prep-inventory/ gehen

💡

Sie können MAMPs Port in MAMP → Einstellungen → Ports → "Auf Standard-Apache- und MySQL-Ports setzen" ändern. Dann wird die URL einfach http://localhost/emergency-prep-inventory/.


Optional: Lokalen Netzwerkzugriff (macOS)

  1. Lokale IP-Adresse Ihres Macs finden: Systemeinstellungen → Wi-Fi → auf "Details" klicken — oder im Terminal: ipconfig getifaddr en0
  2. Auf dem anderen Gerät: XAMPP: http://192.168.1.50/emergency-prep-inventory/ — MAMP: http://192.168.1.50:8888/emergency-prep-inventory/
  3. Sicherstellen, dass die macOS-Firewall eingehende Verbindungen zulässt: Systemeinstellungen → Netzwerk → Firewall

Fehlerbehebung (macOS / XAMPP / MAMP)

ProblemSolution
Apache startet nichtmacOS hat einen eingebauten Apache, der kollidieren kann. Stoppen: sudo apachectl stop. Auch prüfen, ob eine andere App Port 80 nutzt.
"Zugriff verboten"Ordnerberechtigungen prüfen. Für XAMPP benötigt der daemon-Benutzer Lesezugriff. Für MAMP sollte Ihr eigener Benutzer funktionieren.
data/ nicht beschreibbarXAMPP läuft als daemon — sudo chown -R daemon:daemon /Applications/XAMPP/.../data ausführen. MAMP läuft als Ihr Benutzer — sollte ohne Änderungen funktionieren.
.htaccess funktioniert nicht (XAMPP)/Applications/XAMPP/xamppfiles/etc/httpd.conf öffnen, #LoadModule rewrite_module finden und das # entfernen. Apache neu starten.
.htaccess funktioniert nicht (MAMP)MAMP hat mod_rewrite standardmäßig aktiviert — sollte sofort funktionieren.
PHP-Version zu altXAMPP und MAMP liefern aktuelle PHP-Versionen mit. Wenn Sie PHP 8.x benötigen, laden Sie die neueste Version von deren Website herunter.

🔌 API-Referenz

Die Backend-API (api.php) verwendet ein einfaches aktionsbasiertes Routing. Alle Anfragen geben JSON-Antworten zurück.

Öffentliche Endpunkte (Keine Authentifizierung erforderlich)

ActionMethodDescription
check_setupGETsetup complete?
setupPOSTcreate admin (first-time)
loginPOSTauthenticate admin
logoutGET/POSTdestroy session
session_statusGETauth state
get_settingsGEThousehold config
inventoryGETall items
check_permissionsGETdiagnostic

Geschützte Endpunkte (Admin-Authentifizierung erforderlich)

ActionMethodDescription
save_inventoryPOSTsave full inventory
save_settingsPOSTupdate household config
change_passwordPOSTchange admin password

Anfrage-/Antwort-Beispiele

Anmeldung:

json
{ "action": "login", "username": "admin", "password": "your-password" }

Inventar speichern:

json
{ "action": "save_inventory", "data": [{ "itemName": "Rice", "category": "Grains", "currentQuantity": 5, "unit": "kg", "dailyConsumption": 0.1 }] }

📖 Anleitung

Ersteinrichtung

  1. Admin-Konto erstellen — Benutzername wählen (mindestens 2 Zeichen) und Passwort wählen (mindestens 6 Zeichen)
  2. Haushalt konfigurieren — Anzahl der erwachsenen Männer, erwachsenen Frauen, Kinder und Zieltage festlegen

Nach der Einrichtung werden Sie automatisch als Admin angemeldet.

Bestandsartikel verwalten

  • Neuen Artikel hinzufügen — auf "Neuer Artikel" klicken (nur Admin)
  • Artikel bearbeiten — auf das Stift-Symbol in der Aktionsspalte klicken (nur Admin)
  • Artikel löschen — auf das Papierkorb-Symbol klicken (nur Admin)
  • Neue Kategorien/Einheiten hinzufügen — jedes Dropdown hat eine "+"-Schaltfläche
  • Backup exportieren — auf "Backup Export" klicken, um das Inventar als JSON-Datei herunterzuladen

Als Gast betrachten

Besucher, die nicht angemeldet sind, können das Inventar im Nur-Lese-Modus durchsuchen. Sie können:

  • Alle Bestandsartikel und deren Status anzeigen
  • Nach Kategorie filtern und suchen
  • Sprachen wechseln
  • Auf die Rezeptseite zugreifen

Sie können keine Artikel hinzufügen, bearbeiten oder löschen.

Überlebensrezepte

Klicken Sie auf "Rezepte", um die Überlebensrezeptseite zu öffnen. Jedes Rezept enthält:

  • Prioritätsabzeichen — wann dieses Rezept basierend auf der Verderblichkeit der Zutaten verwenden
  • Brennstoffkosten-Abzeichen — wie viel Brennstoff zum Kochen benötigt wird
  • Wasserkosten — geschätzter Wasserverbrauch für das Rezept
  • Zutatenliste — mit auf Ihr Inventar abgestimmten Mengen
  • Schritt-für-Schritt-Anleitung — nummerierte Kochschritte
  • Kinderversion — angepasste Anleitungen für die Fütterung junger Kinder
  • Überlebenstipp — praktische Ratschläge zur Ressourcenschonung

Verwenden Sie die Schaltfläche "Drucken / Als PDF speichern", um ein physisches Backup aller Rezepte zu erstellen.

🔧 Fehlerbehebung

Berechtigungsfehler

Wenn Sie Fehler zum Dateischreibzugriff sehen:

  1. Berechtigungsprüfungs-Endpunkt ausführen: api.php?action=check_permissions
  2. Dies zeigt den PHP-Benutzer, Dateieigentümer und Berechtigungsdetails an
  3. Das Einrichtungsskript erneut ausführen: sudo bash setup-permissions.sh /ihr/projektpfad
  4. Wenn das Problem weiterhin besteht, Eigentümer manuell prüfen — Dateien sollten www-data:www-data mit Berechtigungen 660 für JSON-Dateien gehören

Sitzungsprobleme

Wenn die Anmeldung nicht persistent bleibt:

  • Sicherstellen, dass das sessions/-Verzeichnis existiert und von www-data beschreibbar ist
  • Prüfen, dass das Verzeichnis Berechtigungen 700 hat und www-data gehört
  • Überprüfen, dass Ihr Browser Cookies von der Domain akzeptiert

API gibt 500 bei Einrichtung zurück

Dies bedeutet normalerweise, dass das data/-Verzeichnis oder JSON-Dateien nicht beschreibbar sind. Die API-Antwort enthält Diagnoseinformationen:

  • php_user — der Benutzer, als der PHP läuft
  • file_perms — aktuelle Dateiberechtigungen
  • file_owner — aktueller Dateieigentümer
  • fix — der genaue Befehl zur Problemlösung

🛡 Sicherheitsaspekte

  • JSON-Datendateien sind über .htaccess-Regeln (Apache) oder Nginx-Location-Blöcke vor direktem HTTP-Zugriff geschützt
  • Admin-Anmeldeinformationen werden mit BCrypt-Hashing (Kosten 12) gespeichert — Passwörter werden niemals im Klartext gespeichert
  • Sitzungsdateien werden in einem dedizierten Verzeichnis mit restriktiven Berechtigungen (700) gespeichert, nicht im systemweiten /tmp-Verzeichnis
  • PHP-Dateien haben Berechtigungen 640 — nur vom Webserver-Benutzer und der Gruppe lesbar, nicht weltweites Lesbar
  • Keine CSRF-Token — diese Anwendung ist für die Verwendung durch einen einzelnen Admin in einem vertrauenswürdigen Netzwerk konzipiert. Bei öffentlichem Internetzugang CSRF-Schutz hinzufügen
  • Keine Ratenbegrenzung — Brute-Force-Schutz ist nicht implementiert. Bei öffentlichem Zugriff fail2ban oder ähnliche Tools verwenden

⚙️ Technologie-Stack

ComponentTechnology
BackendPHP 8.x
FrontendHTML5 CSS3 JS ES6+
StorageJSON files
AuthSessions BCrypt
LanguagesEN DE RO

Browser-Unterstützung

  • Chrome / Edge (letzte 2 Versionen)
  • Firefox (letzte 2 Versionen)
  • Safari (letzte 2 Versionen)
  • Mobile Browser (Chrome für Android, Safari für iOS)

📄 Lizenz

Dieses Projekt wird wie besehen für die persönliche Haushaltsnotfallvorsorge bereitgestellt. Kontakt: marundaliliana@gmail.com für individuelle Einsätze oder Anfragen.