# Ghid de editare — site AI Constructor
Acest site este format din fișiere simple (HTML) — nu are nevoie de niciun
program special sau build. Îl poți edita cu orice editor de text (ex:
Notepad++, VS Code — gratuit) sau poți reveni oricând într-o conversație
nouă cu Claude, încărca aceste fișiere, și cere modificările direct.
Site-ul este complet responsive — testat și optimizat pentru telefon,
tabletă și desktop (vezi secțiunea dedicată mai jos).
## Structura fișierelor
```
/index.html → Acasă (RO)
/despre-noi.html → Despre noi (RO)
/servicii.html → Servicii (RO)
/proiecte.html → Proiecte (RO)
/noutati.html → Noutăți — pagina hub (RO)
/normative.html → Arhivă normative, cu căutare (RO)
/stiri.html → Știri din industrie (RO)
/contact.html → Contact (RO)
/en/index.html → Home (EN)
/en/about.html → About us (EN)
/en/services.html → Services (EN)
/en/projects.html → Projects (EN)
/en/news.html → News — hub page (EN)
/en/regulations.html → Regulations archive, searchable (EN)
/en/industry-news.html → Industry news (EN)
/en/contact.html → Contact (EN)
/css/style.css → foaie de stil de REFERINȚĂ (vezi nota de mai jos)
/js/main.js → script de REFERINȚĂ (vezi nota de mai jos)
/images/ → logo, animație logo, poze
/robots.txt, /sitemap.xml → fișiere pentru Google
```
**Important:** codul CSS și JS este inclus direct în interiorul fiecărei
pagini `.html` (între `` și ``), NU
citit dintr-un fișier extern. Am făcut asta ca fiecare pagină să funcționeze
perfect de una singură, oriunde o deschizi — inclusiv direct de pe
calculator, fără server. Fișierele `/css/style.css` și `/js/main.js` rămân
în folder doar ca referință/arhivă a codului curent.
**Asta înseamnă că orice modificare de culoare, spațiere sau comportament
trebuie făcută în interiorul fiecăreia din cele 16 pagini `.html`.** Cel mai
simplu: cere într-o conversație Claude, trimiți toate fișierele, iar
modificarea se aplică dintr-o dată peste tot, corect, pe toate cele 16
pagini deodată.
## Cum schimbi textul dintr-o pagină
Deschide fișierul `.html` al paginii respective cu un editor de text și
caută textul pe care vrei să-l schimbi (Ctrl+F). Textul este între
etichete precum `...
` sau `...
` — modifică doar ce este
între ele, fără să ștergi etichetele. Nu uita: dacă schimbi un text și pe
pagina RO, verifică dacă vrei să schimbi și varianta EN corespunzătoare.
## Cum adaugi o poză
1. Pune fișierul poză (jpg/png/webp) în folderul `/images/`.
2. În pagina unde vrei să apară, înlocuiește un bloc `...
`
sau `...
` cu:
`
`
(pe paginile din `/en/`, calea este `../images/numele-pozei.jpg`)
3. Pentru fotografii reale de proiecte, cel mai simplu este să ceri
asistență într-o conversație Claude — trimite pozele și pagina, iar
Claude le poate integra direct, păstrând look-ul responsive.
## Cum adaugi o pagină nouă
Cel mai simplu este să copiezi o pagină existentă similară (ex: `servicii.html`),
să o redenumești și să-i schimbi conținutul din ``, `<meta description>`
și corpul paginii. Nu uita să adaugi un link către pagina nouă în:
- meniul de navigare (`<nav class="main-nav">`) din **fiecare** pagină (RO și EN),
- footer-ul (`<div class="footer-grid">`) din **fiecare** pagină,
- fișierul `/sitemap.xml`,
- și, dacă e cazul, echivalentul ei în engleză în `/en/`.
## Cum schimbi culorile
Toate culorile sunt definite o singură dată la începutul blocului `:root { ... }`
din interiorul `<style>`, în fiecare pagină. Culorile curente sunt preluate
din logo-ul AI Constructor (fundal negru-spațial, gradient cyan–violet–roz).
Pentru a schimba o culoare pe tot site-ul, cauți linia respectivă (ex:
`--violet: #8b5cf6;`) și o înlocuiești **în toate cele 16 fișiere `.html`**.
Recomandat: cere asistență într-o conversație Claude.
## Header-ul — logo animat și tagline alternantă
Header-ul (sus, fix pe toate paginile) conține:
- logo-ul animat (video în buclă, decupat doar pe partea cu piramida de
noduri, fără text) — fișierul sursă e `images/logo-animation.mp4`.
- tagline-ul care alternează animat între „CONSTRUCȚII CIVILE ȘI
INDUSTRIALE" și „n-AI Constructor mai bun." (joc de cuvinte: n-ai =
nu ai). Pe paginile EN, a doua frază e „No better AI Constructor."
(traducere de sens, nu literală — jocul de cuvinte nu există în engleză).
Acest tagline se ascunde automat pe ecrane de lățime medie (881–1180px),
unde meniul ocupă tot spațiul disponibil, și reapare pe ecrane late sau
pe mobil (unde meniul se strânge într-un buton ☰). E un comportament
intenționat, nu o eroare.
## Pagina de Normative — cum adaugi un normativ nou
În `normative.html` (sau `en/regulations.html`), găsește categoria potrivită
(`<details class="normativ-cat">`) și adaugă o linie nouă în interiorul
`<div class="normativ-list">`, după modelul:
```html
<div class="normativ-row">
<span class="nr-code">P100-1/2013</span>
<span class="nr-desc">Descrierea normativului</span>
<a href="https://linkul-oficial-catre-document.ro">Vezi sursa →</a>
</div>
```
Căutarea funcționează pe cuvinte (nu doar frază exactă) și se aplică automat
la orice rând nou adăugat — nu trebuie modificat `main.js`.
**Important:** linkurile actuale sunt marcate cu `#` (placeholder). Înainte
de publicare, înlocuiește-le cu linkuri reale către sursele oficiale
(Ministerul Dezvoltării, Lucrărilor Publice și Administrației).
## Pagina de Știri — cum adaugi o știre nouă
În `stiri.html` (sau `en/industry-news.html`), copiază un bloc
`<div class="article-card">...</div>` existent și înlocuiește textul din
„EXEMPLU" cu conținutul real. Folosește **doar** surse oficiale (instituții
ale statului, pagini oficiale de Facebook ale instituțiilor) și pune linkul
real la `<a href="#">`. Căutarea de pe această pagină funcționează la fel
ca la Normative — pe cuvinte, automat pentru orice articol nou.
## Formularul de contact
Formularul din `contact.html` / `en/contact.html` este pregătit vizual, dar
nu trimite emailuri încă — are nevoie de o conexiune la un serviciu de
formulare (de exemplu Formspree, Web3Forms, sau un script pe hosting-ul
tău). Cere asistență într-o conversație Claude pentru a-l conecta la adresa
ta de email.
## Harta de pe pagina de Contact
Caută în `contact.html` linia care începe cu `<iframe class="map-frame"`
și actualizeaz-o dacă se schimbă vreodată sediul.
## Bara de sus — curs valutar, vreme, comutator de limbă
În partea de sus a fiecărei pagini apare o bară subțire cu:
- **Curs valutar EUR/RON și USD/RON** — live, gratuit, fără cheie API (Frankfurter API).
- **Temperatura din București** — live, gratuit, fără cheie API (Open-Meteo).
- **Comutator RO/EN** — navighează real între cele două variante de limbă.
Aceste elemente funcționează automat doar după ce site-ul e publicat pe un
domeniu real (nu funcționează dacă deschizi fișierul direct de pe
calculator, din cauza restricțiilor browserului pentru cereri externe).
## Optimizare pentru telefon
Site-ul este complet responsive: layout-ul, textele, imaginile, meniul,
formularele și butonul WhatsApp se adaptează automat la ecranele mobile
(sub ~880px meniul devine buton ☰, sub ~640px spațierile se strâng și
elementele se aliniază pe o singură coloană). Nu trebuie să faci nimic
special ca site-ul să arate bine pe telefon — dar dacă adaugi conținut
nou (poze, secțiuni, tabele), testează-l și pe un ecran îngust din browser
(F12 → modul telefon) înainte de publicare, ca să te asiguri că elementele
noi respectă același tipar.
## Publicarea site-ului (asocierea cu www.aiconstructor.ro)
Aceste fișiere trebuie urcate pe un serviciu de găzduire (hosting), cu
structura de foldere păstrată exact așa cum e (inclusiv folderul `/en/` și
`/images/`), iar domeniul `www.aiconstructor.ro` trebuie direcționat către
acel hosting. Pași generali:
1. Alege un furnizor de hosting (orice hosting care servește fișiere
statice HTML funcționează — de la hosting clasic cPanel, la servicii
moderne precum Netlify sau Vercel).
2. Urcă tot conținutul arhivei (păstrând structura de foldere) în directorul
rădăcină al hosting-ului.
3. Configurează domeniul `www.aiconstructor.ro` (din contul unde ai
cumpărat domeniul) să indice spre acel hosting — de obicei prin
înregistrări DNS (A record / CNAME) sau prin conectarea domeniului
direct din panoul hosting-ului.
4. După publicare, testează linkurile interne, formularul de contact (după
ce l-ai conectat la un serviciu), și varianta engleză.
Dacă nu ești sigur cum se face acest pas exact, spune-i furnizorului tău de
hosting sau unei conversații Claude ce serviciu ai ales, și cere pașii
exacți pentru cazul tău.
## Recomandare pentru viitor
Dacă vrei să faci modificări frecvente și mai ușor (fără să atingi cod),
merită luată în calcul mutarea conținutului într-un CMS simplu în etapa
următoare. Structura actuală rămâne un punct de plecare solid și rapid de
publicat, complet funcțională așa cum este.