141 lines
5.1 KiB
Markdown
141 lines
5.1 KiB
Markdown
# 🎨 Custom SVG Logo Implementation - Service Finder
|
|
|
|
## 📋 Összefoglaló
|
|
A [`LandingView.vue`](../frontend/src/views/LandingView.vue) fejléc logóját teljesen újraterveztük. Az eredeti Lucide ikonok helyett egy egyedi, kódolt SVG logót hoztunk létre, amely tükrözi a Service Finder brand identitását.
|
|
|
|
## ✅ Megvalósított Változtatások
|
|
|
|
### 1. **Egyedi SVG Logó (100x100 viewBox)**
|
|
|
|
A logó a következő elemekből áll:
|
|
|
|
#### 🔍 Nagyító (Magnifying Glass)
|
|
- **Fő kör:** `cx="45" cy="45" r="28"` - türkiz körvonal (#65A5A0), 6px vastagság
|
|
- **Nyél:** Jobb alsó sarokból indul (65,65) és (85,85)-ig tart, 8px vastag vonal
|
|
|
|
#### ⚡ Sebességvonalak (Speed Lines)
|
|
Három párhuzamos, dőlt vonal a bal alsó sarokban:
|
|
- 1. vonal: (8,70) → (22,62)
|
|
- 2. vonal: (5,78) → (19,70)
|
|
- 3. vonal: (2,86) → (16,78)
|
|
- Mindegyik 3px vastag, türkiz (#65A5A0)
|
|
|
|
#### 🧭 Iránytű Mutatók (Compass Pointers)
|
|
Három háromszög a kör körül:
|
|
- **Felső:** `points="45,12 40,22 50,22"` (észak)
|
|
- **Alsó:** `points="45,78 40,68 50,68"` (dél)
|
|
- **Bal:** `points="12,45 22,40 22,50"` (nyugat)
|
|
|
|
#### 🔤 SF Betűk
|
|
- **Pozíció:** Középre igazítva (x="45", y="55")
|
|
- **Betűtípus:** Arial, 28px, 900-as vastagság (Black)
|
|
- **Színek:**
|
|
- **S:** Sötétkék (#0B212F)
|
|
- **F:** Türkiz (#65A5A0)
|
|
|
|
### 2. **Szöveg Olvashatóság Javítása**
|
|
|
|
#### Probléma
|
|
A sötét háttéren (#062535) a sötétkék "SERVICE" szöveg (#0B212F) szinte láthatatlan volt.
|
|
|
|
#### Megoldás
|
|
Fehér körvonal (text-stroke) alkalmazása:
|
|
```vue
|
|
<span class="text-[#0B212F] [-webkit-text-stroke:1px_white] [text-shadow:0_0_8px_rgba(255,255,255,0.8)]">
|
|
SERVICE
|
|
</span>
|
|
```
|
|
|
|
**Technikai részletek:**
|
|
- `-webkit-text-stroke: 1px white` - 1 pixel vastag fehér körvonal
|
|
- `text-shadow: 0 0 8px rgba(255,255,255,0.8)` - Puha fehér ragyogás a jobb láthatóságért
|
|
- A "FINDER" szöveg marad élénk cyan (#38bdf8)
|
|
|
|
## 🎨 Színpaletta
|
|
|
|
| Elem | Szín | HEX Kód |
|
|
|------|------|---------|
|
|
| Háttér (Header) | Sötét tengerkék | `#062535` |
|
|
| Logó forma (kör, nyél, vonalak) | Türkiz | `#65A5A0` |
|
|
| "S" betű | Sötétkék | `#0B212F` |
|
|
| "F" betű | Türkiz | `#65A5A0` |
|
|
| "SERVICE" szöveg | Sötétkék + fehér körvonal | `#0B212F` + `white` |
|
|
| "FINDER" szöveg | Élénk cyan | `#38bdf8` |
|
|
|
|
## 📐 SVG Kód Struktúra
|
|
|
|
```vue
|
|
<svg viewBox="0 0 100 100" class="w-12 h-12" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Fő kör (nagyító teste) -->
|
|
<circle cx="45" cy="45" r="28" fill="none" stroke="#65A5A0" stroke-width="6"/>
|
|
|
|
<!-- Nagyító nyele -->
|
|
<line x1="65" y1="65" x2="85" y2="85" stroke="#65A5A0" stroke-width="8" stroke-linecap="round"/>
|
|
|
|
<!-- Sebességvonalak (3 db) -->
|
|
<line x1="8" y1="70" x2="22" y2="62" stroke="#65A5A0" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="5" y1="78" x2="19" y2="70" stroke="#65A5A0" stroke-width="3" stroke-linecap="round"/>
|
|
<line x1="2" y1="86" x2="16" y2="78" stroke="#65A5A0" stroke-width="3" stroke-linecap="round"/>
|
|
|
|
<!-- Iránytű háromszögek -->
|
|
<polygon points="45,12 40,22 50,22" fill="#65A5A0"/>
|
|
<polygon points="45,78 40,68 50,68" fill="#65A5A0"/>
|
|
<polygon points="12,45 22,40 22,50" fill="#65A5A0"/>
|
|
|
|
<!-- SF betűk -->
|
|
<text x="45" y="55" font-family="Arial, sans-serif" font-size="28" font-weight="900" text-anchor="middle">
|
|
<tspan fill="#0B212F">S</tspan>
|
|
<tspan fill="#65A5A0">F</tspan>
|
|
</text>
|
|
</svg>
|
|
```
|
|
|
|
## 🔄 Előtte vs. Utána
|
|
|
|
### ❌ Előtte (Problémák)
|
|
- Két Lucide ikon egymásra rakva (Compass + Search)
|
|
- Generikus, nem egyedi megjelenés
|
|
- "SERVICE" szöveg láthatatlan a sötét háttéren
|
|
- Nem tükrözte a brand identitását
|
|
|
|
### ✅ Utána (Megoldások)
|
|
- Egyedi, kézzel kódolt SVG logó
|
|
- Egyedi brand elemek (sebességvonalak, iránytű)
|
|
- "SERVICE" szöveg olvasható fehér körvonattal
|
|
- Professzionális, márkaspecifikus megjelenés
|
|
|
|
## 🧪 Tesztelés
|
|
|
|
A változtatások ellenőrzéséhez futtasd:
|
|
```bash
|
|
docker compose exec sf_public_frontend npx playwright test tests/e2e/logo-screenshot.spec.ts --config=playwright.remote.config.ts
|
|
```
|
|
|
|
A screenshot itt található: `frontend/test-results/screenshots/custom-logo-header.png`
|
|
|
|
## 📱 Reszponzivitás
|
|
|
|
- **Desktop:** Teljes logó + szöveg látható
|
|
- **Mobile (< 640px):** Csak az SVG logó látszik (`hidden sm:flex` a szövegen)
|
|
- **Méret:** Fix 48x48px (w-12 h-12 Tailwind class)
|
|
|
|
## 🎯 Brand Filozófia
|
|
|
|
A logó elemei szimbolizálják a Service Finder küldetését:
|
|
- **🔍 Nagyító:** Keresés, felfedezés (szolgáltatók keresése)
|
|
- **⚡ Sebességvonalak:** Gyorsaság, hatékonyság
|
|
- **🧭 Iránytű:** Navigáció, útmutatás (a megfelelő szerviz felé)
|
|
- **SF Betűk:** Erős brand identitás
|
|
|
|
## 📝 Megjegyzések
|
|
|
|
- A logó teljes mértékben SVG-alapú, így skálázható és éles minden felbontáson
|
|
- Nincs külső képfájl függőség
|
|
- A színek konzisztensek a teljes landing page dizájnnal
|
|
- A fehér text-stroke biztosítja az olvashatóságot minden háttéren
|
|
|
|
---
|
|
|
|
**Utolsó frissítés:** 2026-06-03
|
|
**Módosított fájl:** [`frontend/src/views/LandingView.vue`](../frontend/src/views/LandingView.vue:14-52)
|