# EuroFram s.r.o. - Web stránka (Onepager)

**Dátum dodania:** 2026-02-16  
**Verzia:** 1.0 MVP  
**Typ:** Single-page website (HTML + inline CSS + JavaScript)

---

## 📦 ČO STE DOSTALI

### Súbory v balíku:
1. **index.html** - Kompletná webstránka (jeden súbor, pripravený na nasadenie)
2. **IMPLEMENTATION_LOGS.md** - Technický dokument s TODO položkami, konfliktami, odporúčaniami
3. **README.md** - Tento súbor (návod)

---

## 🚀 AKO NASADIŤ WEB

Web je pripravený na okamžité nasadenie. Stačí nahrať `index.html` na Váš hosting.

### Možnosti hostingu:

#### 1. Klasický hosting (Wedos, Websupport, Hostinger...)
- Nahrajte `index.html` cez FTP do root priečinka
- Ak máte doménu `www.eurofram.sk`, súbor musí byť `index.html` v root-e
- Hotovo! Web je online

#### 2. Netlify / Vercel (jednoduché, zadarmo)
- Vytvorte účet na netlify.com alebo vercel.com
- Drag & drop `index.html` súbor
- Získate link (napr. `eurofram.netlify.app`)
- Môžete pripojiť vlastnú doménu

#### 3. GitHub Pages (zadarmo, pre vývojárov)
- Vytvorte GitHub repository
- Nahrajte `index.html`
- Zapnite GitHub Pages v Settings
- Web je na `vase-meno.github.io/eurofram`

---

## ⚠️ DÔLEŽITÉ: ČO TREBA DOKONČIŤ PRED SPUSTENÍM

### KRITICKÉ (bez toho NEspúšťať)

1. **Otváracie hodiny**
   - Kde: Sekcia "Kontakt" → Info položka "🕒 Otváracie hodiny"
   - Čo: Nahradiť `TODO: Potrebujem potvrdiť od klienta`
   - Ako: V HTML nájdite `<em>TODO: Potrebujem potvrdiť od klienta</em>` a nahraďte napr. `Po-Pia 8:00-16:00`

2. **Google rating (voliteľné, ale odporúčané)**
   - Kde: Sekcia "Hodnotenia zákazníkov"
   - Čo: Doplniť skutočný rating a počet recenzií
   - Ako: V HTML nájdite `⭐⭐⭐⭐⭐ 5.0/5` a zmeňte na skutočné čísla z Google Business Profile

3. **Reálne fotky produktov**
   - Kde: Sekcia "Naše služby" (4 karty)
   - Čo: Nahradiť SVG placeholdery skutočnými fotkami
   - Ako: V HTML nájdite `<img src="data:image/svg+xml...` a nahraďte za `<img src="images/lesenie.jpg...`
   - **Tip:** Odporúčané rozmery: 800x600px, JPEG kvalita 80%

4. **Formulár - nastavenie odosielania**
   - Kde: Sekcia "Kontakt" → formulár
   - Čo: Aktuálne len zobrazí alert, potrebujete backend
   - Ako: Kontaktujte vývojára alebo použite služby ako:
     - Netlify Forms (zadarmo, jednoduché)
     - Google Apps Script (zadarmo)
     - PHP mail() funkcia (ak máte PHP hosting)

### STREDNE DÔLEŽITÉ

5. **Hero video**
   - Kde: Úvodná sekcia (hero)
   - Čo: Aktuálne je len modrý overlay, pridať video stavby/lešenia
   - Ako: Nahrajte video súbor (odporúčané: MP4, max 5MB) a v HTML upravte `<video>` tag

6. **Logo**
   - Kde: Header (hore vľavo)
   - Čo: Nahradiť emoji 🏗️ skutočným logom
   - Ako: V HTML nájdite `<span>🏗️</span>` a nahraďte za `<img src="images/logo.svg" alt="EuroFram">`

7. **FAQ odpovede s "(potrebujem potvrdiť)"**
   - Kde: Sekcia FAQ, otázky 1, 3, 4, 5
   - Čo: Doplniť konkrétne odpovede
   - Ako: V HTML nájdite `<em>(potrebujem potvrdiť...)</em>` a buď vymažte alebo doplňte info

---

## 📋 CHECKLIST PRED SPUSTENÍM

- [ ] Otváracie hodiny vyplnené
- [ ] Reálne fotky produktov (minimálne 4 ks)
- [ ] Logo nahradené (ak máte)
- [ ] Formulár funguje (testované odoslanie)
- [ ] Všetky telefónne čísla správne (2x mob. v kontakte)
- [ ] Email adresa správna
- [ ] Google Maps mapa zobrazuje správnu polohu
- [ ] Web otvorený na mobile (iOS + Android)
- [ ] Web otvorený v prehliadačoch (Chrome, Safari, Firefox)

---

## 🎨 AKO UPRAVIŤ FARBY / DESIGN

Všetky farby sú definované na začiatku CSS kódu (v `<style>` tagu).

### Zmena hlavnej farby (modrej):
1. Otvorte `index.html` v editore (Notepad++, VS Code, Sublime...)
2. Nájdite riadok: `--primary: #1a4d8f;`
3. Zmeňte hex kód na Vašu farbu (napr. `#ff0000` pre červenú)
4. Uložte a obnovte web v prehliadači

### Zmena oranžovej (CTA tlačidlá):
1. Nájdite: `--secondary: #ff6b35;`
2. Zmeňte na Vašu farbu
3. Uložte

**Tip:** Pre výber farieb použite https://coolors.co/

---

## 📱 MOBILNÁ VERZIA

Web je **plne responzívny** (prispôsobí sa mobile/tablet/desktop automaticky).

### Testovanie:
- Otvorte web na mobile
- Skúste: menu (hamburger), kontaktný formulár, telefónne čísla (klik na zavolať)
- Sticky bar dole (Zavolať / Dopyt) je len na mobile

---

## 🔧 TECHNICKÉ DETAILY

### Čo obsahuje:
- ✅ Responzívny dizajn (mobile-first)
- ✅ SEO optimalizované (meta tagy, schema.org)
- ✅ Rýchle načítanie (inline CSS/JS, žiadne externé závislosti)
- ✅ Accessibility (ARIA labels, semantic HTML)
- ✅ Google Maps integrácia
- ✅ Smooth scroll navigácia
- ✅ FAQ accordion
- ✅ Sticky header + mobile menu
- ✅ Kontaktný formulár (s validáciou)

### Čo chýba (vyžaduje dodatočnú prácu):
- ⚠️ Backend pre formulár (aktuálne len alert)
- ⚠️ Google Analytics tracking (ak chcete štatistiky)
- ⚠️ Cookie lišta (GDPR compliance - ak plánujete analytics/remarketing)

---

## 📞 AKO PRIDAŤ GOOGLE ANALYTICS (voliteľné)

1. Vytvorte účet na https://analytics.google.com/
2. Získajte Measurement ID (formát: `G-XXXXXXXXXX`)
3. V `index.html` pred `</head>` pridajte:

```html
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>
```

4. Nahraďte `G-XXXXXXXXXX` za Váš skutočný Measurement ID

---

## 🆘 PODPORA

### Časté problémy:

**Q: Web sa nezobrazuje správne na mobile**
A: Skontrolujte, či je v `<head>` meta tag: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`

**Q: Formulár nič nerobí po kliknutí na "Odoslať"**
A: To je normálne - formulár aktuálne len zobrazí alert. Potrebujete nastaviť backend (viď bod 4 v KRITICKÝCH úpravách).

**Q: Ako zmením text?**
A: Otvorte `index.html` v textovom editore a upravte texty priamo v HTML kóde. Hľadajte medzi `<p>`, `<h1>`, `<h2>` atď.

**Q: Ako pridám novú sekciu?**
A: Odporúčame kontaktovať vývojára. Pridanie novej sekcie vyžaduje znalosti HTML/CSS.

---

## 📧 KONTAKT NA DEVELOPERA

Pre technické zmeny kontaktujte vývojára, ktorý Vám tento web vytvoril.

**Čo môže developer pridať:**
- Backend pre formulár
- Blog sekciu
- Viacjazyčnú verziu
- Rozšírenú SEO verziu (service landing pages)
- Integráciu s CRM systémom
- Newsletter
- Chatbot

---

## 📄 LICENCIA A POUŽITIE

Tento web ste dostali ako kompletné riešenie.
Môžete ho upravovať, rozširovať a používať bez obmedzení.

**Odporúčanie:** Pred väčšími úpravami si vytvorte záložnú kópiu `index.html`.

---

**Ďakujeme za dôveru!**  
Ak máte otázky, neváhajte sa opýtať.

🏗️ EuroFram - Lešenie a pojazdy v Trnave