Această unealtă face parte din ToolHub Înapoi la ToolHub
🏠

Inventar de Provizii de Urgență

O aplicație web auto-găzduită, ușoară, pentru urmărirea proviziilor de urgență ale gospodăriei și planificarea meselor de supraviețuire. Construită cu PHP 8.x și JavaScript vanilla — fără bază de date, fără framework-uri, fără instrumente de build.

Funcții

📦

Gestionarea Inventarului

Operațiuni CRUD complete cu zile rămase calculate automat, indicatori de status, filtrare pe categorii, sortare și căutare.

🔐

Autentificare Admin

Hashing BCrypt pentru parole, autentificare prin sesiuni PHP, mod doar-citire pentru vizitatori și protecție .htaccess.

👨‍👩‍👦

Configurare Gospodărie

Compoziție personalizabilă a gospodăriei și zile țintă cu recalculare dinamică a tuturor duratelor de provizii.

🍳

Rețete de Supraviețuire

16 rețete optimizate pentru supraviețuire cu niveluri de prioritate, indicatori de cost combustibil, versiuni pentru copii și layout gata de printare.

🌍

Multilingv

Engleză, Germană și Română cu comutare instantanee și preferință persistentă prin localStorage și cookie-uri.

🎨

Design & UX

Layout responsiv, suport mod întunecat, CSS Custom Properties, contururi de focus accesibile și respectarea mișcării reduse.

Gestionarea Inventarului

  • Operațiuni CRUD complete — adăugați, editați și ștergeți articole de inventar cu categorii, subcategorii, cantități, unități, rate de consum zilnic și date de expirare
  • Zile rămase calculate automat — sistemul calculează câte zile durează fiecare articol pe baza stocului curent și a consumului zilnic per membru al gospodăriei
  • Indicatori de status — articolele sunt automat marcate ca Critic (sub stoc minim), Avertisment (sub țintă) sau Suficient
  • Filtrare pe categorii — faceți clic pe o pilulă de categorie pentru a filtra instantaneu tabelul; pilulele sunt codate pe culori după statusul agregat
  • Tabel sortabil — faceți clic pe un antet de coloană pentru sortare ascendentă/descendentă
  • Căutare — căutare în timp real pe nume de articole, categorii și subcategorii
  • Export backup — export JSON cu un clic al întregului inventar pentru păstrare offline

Autentificare Admin

  • Model cu un singur admin — un cont de admin este creat la prima configurare; nu sunt necesare conturi multiple
  • Hashing BCrypt pentru parole (factor de cost 12) — parolele nu sunt niciodată stocate în text clar
  • Autentificare prin sesiuni PHP — sesiunile sunt stocate într-un director sessions/ protejat, nu în folderul temporar al sistemului
  • Mod vizitator — vizitatorii neautentificați pot doar citi
  • Schimbare parolă — adminul poate schimba parola oricând din Setări
  • Protecție .htaccess — accesul URL direct la fișierele de date JSON și sesiuni este blocat

Rețete de Supraviețuire

  • 16 rețete optimizate pentru supraviețuire — concepute special pentru ingredientele urmărite în inventar
  • Niveluri de prioritate — Folosiți Întâi (perisabil), Folosiți Curând sau Oricând
  • Indicatori de cost combustibil — Zero (fără gătit), Scăzut (<10 min) sau Mediu (10-20 min)
  • Rețete doar pentru urgențe — clar marcate pentru situații critice
  • Rețete de confort/normalitate — mese care ridică moralul în situații de urgență prelungite
  • Versiuni pentru copii — instrucțiuni adaptate pentru copii mici (de la 5 ani)
  • Sfaturi de supraviețuire — tehnici de economisire a apei, strategii de substituire a ingredientelor și scurtături de gătit
  • Gata de printare — stylesheet de printare optimizat pentru copii fizice sau "Salvare ca PDF"

📁 Structura Fișierelor

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

Cerințe

  • Server web — Apache (cu suport .htaccess) sau Nginx
  • PHP 8.x — cu extensiile json și posix (posix este opțional dar oferă diagnostic mai bun)
  • Permisiuni de scriere — utilizatorul serverului web (de obicei www-data) trebuie să poată scrie în data/ și sessions/
  • Fără bază de date — toate datele sunt stocate în fișiere JSON
  • Fără npm/build — HTML, CSS și JavaScript pur; fără compilare sau bundling necesar

🛠 Instalare

Alegeți metoda de instalare care corespunde sistemului de operare și configurării dumneavoastră.

Start Rapid

1
Copiați fișierele în directorul serverului web

Copiați întregul folder al proiectului în rădăcina documentului Apache/Nginx.

bash
sudo cp -r ./emergency-prep-inventory /var/www/html/tools/emergency-prep-inventory
2
Rulați scriptul de configurare a permisiunilor

Acesta creează data/ și sessions/, setează proprietarul și permisiunile, creează protecția .htaccess, generează un favicon și rulează un test de scriere.

bash
sudo bash setup-permissions.sh /var/www/html/tools/emergency-prep-inventory
3
Deschideți browserul

Navigați la URL-ul aplicației și completați ecranul de configurare inițială.

Configurare Manuală a Permisiunilor

Dacă preferați să setați permisiunile manual în loc să folosiți scriptul:

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

Configurare Nginx

Dacă folosiți Nginx în loc de Apache, adăugați aceste blocuri de locație la configurarea serverului:

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

XAMPP este un pachet gratuit all-in-one care include Apache, PHP și tot ce aveți nevoie pentru a rula această aplicație pe Windows. Nu este nevoie să instalați sau configurați manual un server web.

Pasul 1: Instalați XAMPP

  1. Descărcați XAMPP pentru Windows de pe apachefriends.org
  2. Rulați instalatorul. Calea implicită de instalare este C:\xampp
  3. În timpul instalării, asigurați-vă că Apache și PHP sunt selectate (sunt implicit)
  4. După instalare, deschideți Panoul de Control XAMPP și faceți clic pe Start lângă Apache — statusul ar trebui să devină verde

Pasul 2: Copiați fișierele proiectului

  1. Navigați la directorul rădăcină web XAMPP: C:\xampp\htdocs\
  2. Creați un folder pentru proiect, ex.: C:\xampp\htdocs\emergency-prep-inventory\
  3. Copiați toate fișierele proiectului în acest folder: api.php, index.html, receips.html, style.css, permission.sh, setup-permissions.sh

Pasul 3: Creați directoarele necesare

În folderul proiectului, creați manual aceste două directoare:

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

Asta e tot — XAMPP rulează Apache sub propriul dumneavoastră cont de utilizator Windows, deci nu există probleme de permisiuni. PHP poate scrie automat în aceste directoare.

Pasul 4: Deschideți aplicația

  1. Deschideți browserul și accesați: http://localhost/emergency-prep-inventory/
  2. Veți vedea ecranul de configurare inițială — creați contul de admin și configurați gospodăria
  3. Aplicația rulează acum local pe calculatorul dumneavoastră

Opțional: Acces în rețeaua locală

Dacă doriți ca alte dispozitive din rețeaua de casă (telefon, tabletă, alt calculator) să acceseze inventarul:

  1. Găsiți adresa IP locală a PC-ului Windows: deschideți Command Prompt și rulați: ipconfig — căutați "IPv4 Address" (ex.: 192.168.1.100)
  2. Pe celălalt dispozitiv, deschideți un browser și accesați: http://192.168.1.100/emergency-prep-inventory/
  3. Asigurați-vă că Windows Firewall permite conexiuni primite pe portul 80 (XAMPP solicită de obicei acest lucru)
📝

Fișierele .htaccess care protejează data/ și sessions/ de acces URL direct funcționează imediat cu XAMPP deoarece folosește Apache cu mod_rewrite activat implicit.

Depanare (Windows / XAMPP)

ProblemSolution
Apache nu porneșteUn alt program (adesea Skype sau IIS) folosește portul 80. În Panoul de Control XAMPP, faceți clic pe "Config" lângă Apache → schimbați portul la 8080 → accesați via http://localhost:8080/...
Eroare "Acces interzis"Asigurați-vă că numele folderului din htdocs corespunde URL-ului. Fără spații sau caractere speciale în numele folderului.
Pagină goală / PHP nu ruleazăDeschideți Panoul de Control XAMPP → faceți clic pe "Config" lângă Apache → asigurați-vă că PHP este activat. Testați cu într-un fișier test.php.
data/ sau sessions/ nu sunt inscriptibileFaceți clic dreapta pe folder → Proprietăți → Securitate → asigurați-vă că "Utilizatori" sau "Toți" au permisiunea de "Scriere". Rar necesar pe XAMPP.
.htaccess nu funcționeazăDeschideți C:\xampp\apache\conf\httpd.conf, găsiți #LoadModule rewrite_module modules/mod_rewrite.so și eliminați # de la început. Reporniți Apache.

Pe macOS aveți două opțiuni populare pentru un server PHP local: XAMPP (multiplatformă, la fel ca pe Windows) sau MAMP (focust pe macOS). Ambele funcționează bine.

XAMPP pe macOS

Pasul 1: Instalați XAMPP

  1. Descărcați XAMPP pentru macOS de pe apachefriends.org
  2. Deschideți fișierul .dmg și trageți XAMPP în folderul Aplicații
  3. Lansați XAMPP din Aplicații — poate cere parola macOS pentru a porni Apache
  4. În Panoul de Control XAMPP, faceți clic pe Start lângă Apache

Pasul 2: Copiați fișierele proiectului

Rădăcina web XAMPP pe macOS este: /Applications/XAMPP/xamppfiles/htdocs/

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

Pasul 3: Creați directoarele necesare

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

Dacă primiți erori de permisiuni (XAMPP rulează ca utilizator 'daemon'): rulați sudo chown -R daemon:daemon /Applications/XAMPP/.../data și sessions

Pasul 4: Deschideți aplicația

Deschideți browserul și accesați: http://localhost/emergency-prep-inventory/


MAMP pe macOS

MAMP (Mac + Apache + MySQL + PHP) este o altă opțiune populară. Versiunea gratuită este suficientă — nu aveți nevoie de MySQL pentru acest proiect.

Pasul 1: Instalați MAMP

  1. Descărcați MAMP de pe mamp.info
  2. Instalați prin tragere în folderul Aplicații
  3. Lansați MAMP și faceți clic pe Pornește Serverele — Apache și MySQL vor porni (MySQL nu este folosit dar nu deranjează)

Pasul 2: Copiați fișierele proiectului

Rădăcina web MAMP este: /Applications/MAMP/htdocs/

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

Pasul 3: Creați directoarele necesare

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 rulează Apache sub propriul cont de utilizator, deci permisiunile nu ar trebui să fie o problemă. Dacă sunt: chmod 777 data/ și sessions/

Pasul 4: Deschideți aplicația

Implicit, MAMP folosește portul 8888. Deschideți browserul și accesați: http://localhost:8888/emergency-prep-inventory/

💡

Puteți schimba portul MAMP în MAMP → Preferințe → Porturi → "Setare la porturi standard Apache și MySQL". Apoi URL-ul devine simplu http://localhost/emergency-prep-inventory/.


Opțional: Acces în rețeaua locală (macOS)

  1. Găsiți adresa IP locală a Mac-ului: Setări de Sistem → Wi-Fi → faceți clic pe "Detalii" — sau în Terminal: ipconfig getifaddr en0
  2. Pe celălalt dispozitiv: XAMPP: http://192.168.1.50/emergency-prep-inventory/ — MAMP: http://192.168.1.50:8888/emergency-prep-inventory/
  3. Asigurați-vă că Firewall-ul macOS permite conexiuni primite: Setări de Sistem → Rețea → Firewall

Depanare (macOS / XAMPP / MAMP)

ProblemSolution
Apache nu porneștemacOS are un Apache integrat care poate intra în conflict. Opriți-l: sudo apachectl stop. Verificați și dacă altă aplicație folosește portul 80.
"Acces interzis"Verificați permisiunile folderului. Pentru XAMPP, utilizatorul daemon are nevoie de acces de citire. Pentru MAMP, propriul utilizator ar trebui să funcționeze.
data/ nu este inscriptibilXAMPP rulează ca daemon — rulați sudo chown -R daemon:daemon /Applications/XAMPP/.../data. MAMP rulează ca utilizatorul dvs. — ar trebui să funcționeze fără modificări.
.htaccess nu funcționează (XAMPP)Deschideți /Applications/XAMPP/xamppfiles/etc/httpd.conf, găsiți #LoadModule rewrite_module și eliminați #. Reporniți Apache.
.htaccess nu funcționează (MAMP)MAMP are mod_rewrite activat implicit — ar trebui să funcționeze imediat.
Versiune PHP prea vecheXAMPP și MAMP vin cu versiuni recente de PHP. Dacă aveți nevoie de PHP 8.x, descărcați cea mai recentă versiune de pe site-ul lor.

🔌 Referință API

API-ul de backend (api.php) folosește un model simplu de rutare bazată pe acțiuni. Toate cererile returnează răspunsuri JSON.

Endpoint-uri Publice (Fără Autentificare)

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

Endpoint-uri Protejate (Autentificare Admin Necesară)

ActionMethodDescription
save_inventoryPOSTsave full inventory
save_settingsPOSTupdate household config
change_passwordPOSTchange admin password

Exemple Cerere/Răspuns

Autentificare:

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

Salvare inventar:

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

📖 Ghid de Utilizare

Prima Configurare

  1. Creați contul de admin — alegeți un nume de utilizator (minim 2 caractere) și o parolă (minim 6 caractere)
  2. Configurați gospodăria — setați numărul de bărbați adulți, femei adulte, copii și zilele țintă de pregătire

După configurare, veți fi automat autentificat ca admin.

Gestionarea Articolelor de Inventar

  • Adăugați un articol nou — faceți clic pe butonul "Articol Nou" (doar admin)
  • Editați un articol — faceți clic pe pictograma creion din coloana Acțiuni (doar admin)
  • Ștergeți un articol — faceți clic pe pictograma coș de gunoi (doar admin)
  • Adăugați categorii/unități noi — fiecare dropdown are un buton "+"
  • Exportați backup — faceți clic pe "Export Backup" pentru a descărca inventarul ca fișier JSON

Vizualizare ca Invitat

Vizitatorii care nu se autentifică pot răsfoi inventarul în mod doar-citire. Pot:

  • Vizualiza toate articolele de inventar și statusurile lor
  • Filtra după categorie și căuta
  • Schimba limbile
  • Accesa pagina de rețete

Nu pot adăuga, edita sau șterge articole.

Rețete de Supraviețuire

Faceți clic pe butonul "Rețete" pentru a deschide pagina de rețete de supraviețuire. Fiecare rețetă include:

  • Insignă de prioritate — când să folosiți această rețetă pe baza perisabilității ingredientelor
  • Insignă de cost combustibil — cât combustibil de gătit este necesar
  • Cost apă — consum estimat de apă pentru rețetă
  • Lista de ingrediente — cu cantități potrivite inventarului dumneavoastră
  • Instrucțiuni pas cu pas — pași de gătit numerotați
  • Versiune pentru copii — instrucțiuni adaptate pentru hrănirea copiilor mici
  • Sfat de supraviețuire — sfaturi practice pentru conservarea resurselor

Folosiți butonul "Printare / Salvare ca PDF" pentru a crea o copie fizică de rezervă a tuturor rețetelor.

🔧 Depanare

Erori de Permisiuni

Dacă vedeți erori despre accesul de scriere la fișiere:

  1. Rulați endpoint-ul de verificare a permisiunilor: api.php?action=check_permissions
  2. Acesta va afișa utilizatorul PHP, proprietarul fișierului și detaliile permisiunilor
  3. Rulați din nou scriptul de configurare: sudo bash setup-permissions.sh /calea/proiectului
  4. Dacă problema persistă, verificați manual proprietarul — fișierele ar trebui să fie deținute de www-data:www-data cu permisiuni 660 pentru fișierele JSON

Probleme de Sesiune

Dacă autentificarea nu persistă:

  • Asigurați-vă că directorul sessions/ există și este inscriptibil de www-data
  • Verificați că directorul are permisiuni 700 și este deținut de www-data
  • Verificați că browserul acceptă cookie-uri de la domeniu

API Returnează 500 la Configurare

Aceasta înseamnă de obicei că directorul data/ sau fișierele JSON nu sunt inscriptibile. Răspunsul API va include informații de diagnostic:

  • php_user — utilizatorul sub care rulează PHP
  • file_perms — permisiunile curente ale fișierului
  • file_owner — proprietarul curent al fișierului
  • fix — comanda exactă de rulat pentru a rezolva problema

🛡 Considerații de Securitate

  • Fișierele de date JSON sunt protejate de acces HTTP direct prin reguli .htaccess (Apache) sau blocuri de locație Nginx
  • Credențialele de admin sunt stocate cu hashing BCrypt (cost 12) — parolele nu sunt niciodată stocate în text clar
  • Fișierele de sesiune sunt stocate într-un director dedicat cu permisiuni restrictive (700), nu în directorul /tmp al sistemului
  • Fișierele PHP au permisiuni 640 — citibile doar de utilizatorul și grupul serverului web, nu de toți
  • Fără token-uri CSRF — această aplicație este concepută pentru utilizare de un singur admin într-o rețea de încredere. Dacă o expuneți la internetul public, luați în considerare adăugarea protecției CSRF
  • Fără limitare de rată — protecția brute-force nu este implementată. Folosiți fail2ban sau instrumente similare dacă este expus public

⚙️ Stack Tehnologic

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

Suport Browser

  • Chrome / Edge (ultimele 2 versiuni)
  • Firefox (ultimele 2 versiuni)
  • Safari (ultimele 2 versiuni)
  • Browsere mobile (Chrome pentru Android, Safari pentru iOS)

📄 Licență

Acest proiect este furnizat ca atare pentru pregătirea de urgență personală a gospodăriei. Contact: marundaliliana@gmail.com pentru implementări personalizate sau întrebări.