znakovni.hr/fix-colors.md

JASNE UPUTE ZA AI AGENTA: Dodavanje obojenih pozadina za vrste riječi

KONTEKST Na originalnoj aplikaciji (slika: original/1 dodaj rijeci.png), svaka riječ u rječniku prikazuje se kao gumb s obojenom pozadinom koja ovisi o vrsti riječi (wordType). Trenutno aplikacija prikazuje vrstu riječi samo kao sivi tekst bez pozadinske boje.

PRIMJERI SA SLIKE • "adresa" (Imenica/NOUN) → zelena pozadina • "Analizirati" (Glagol/VERB) → crvena pozadina

ZADATAK Promijeni kod tako da tekst riječi (wordText) u WordCard komponenti ima obojenu pozadinu koja odgovara vrsti riječi, baš kao na originalnoj slici.

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

KORACI ZA IMPLEMENTACIJU

1. Kreiraj mapiranje boja za vrste riječi

U datoteci packages/frontend/src/components/dictionary/WordCard.tsx, dodaj novo mapiranje boja za vrste riječi (wordType), slično kao što već postoji cefrColors za CEFR razine:

const wordTypeColors: Record<string, string> = { NOUN: 'bg-green-600', // Imenica - zelena VERB: 'bg-red-600', // Glagol - crvena ADJECTIVE: 'bg-blue-600', // Pridjev - plava ADVERB: 'bg-purple-600', // Prilog - ljubičasta PRONOUN: 'bg-yellow-600', // Zamjenica - žuta PREPOSITION: 'bg-orange-600', // Prijedlog - narančasta CONJUNCTION: 'bg-pink-600', // Veznik - roza INTERJECTION: 'bg-teal-600', // Uzvik - tirkizna PHRASE: 'bg-indigo-600', // Fraza - indigo OTHER: 'bg-gray-600', // Ostalo - siva };

NAPOMENA: Prilagodi boje prema točnim bojama sa slike ako imaš pristup slici. Ovo su prijedlozi.

──────────────────────────────────────────────────────────────────────────────────────────────────────

2. Promijeni prikaz teksta riječi (wordText)

U istoj datoteci (WordCard.tsx), pronađi dio gdje se prikazuje term.wordText (trenutno oko linije 69):

TRENUTNI KOD: {/* Word Text */}

{term.wordText}

NOVI KOD: {/* Word Text with colored background based on word type */}

{term.wordText}

ŠTO SE MIJENJA: • Tekst riječi sada ima obojenu pozadinu (bg-* klasa) ovisno o term.wordType • Tekst je bijele boje (text-white) za kontrast • Dodani su padding (px-4 py-2) i zaobljeni rubovi (rounded) da izgleda kao gumb

──────────────────────────────────────────────────────────────────────────────────

3. (OPCIONALNO) Ukloni ili prilagodi prikaz vrste riječi

Trenutno se vrsta riječi prikazuje kao sivi tekst u gornjem desnom kutu kartice (linija 44-46):

{wordTypeLabels[term.wordType] || term.wordType}

OPCIJE: • Opcija A: Ukloni ovaj dio jer je sada vrsta riječi vidljiva kroz boju pozadine • Opcija B: Zadrži ga za dodatnu jasnoću

────────────────────────────────────────────────

4. Primijeni iste promjene u drugim komponentama

Ako se riječi prikazuju i u drugim komponentama (npr. WordDetailModal, SentenceBuilder, itd.), primijeni iste promjene tamo:

U WordDetailModal.tsx: Dodaj isto mapiranje wordTypeColors i promijeni prikaz term.wordText na isti način.

U budućoj SentenceBuilder komponenti: Kada se budu prikazivale riječi u rečenici (Znakopis), svaka riječ treba imati obojenu pozadinu prema vrsti riječi.

──────────────────────────────────────────

5. Testiraj promjene

 1. Pokreni aplikaciju
 2. Otvori stranicu Rječnik (/dictionary)
 3. Provjeri da svaka riječ ima obojenu pozadinu koja odgovara njenoj vrsti
 4. Usporedi s originalnom slikom original/1 dodaj rijeci.png

────────────────────────────────────────────────────────────────────────────

DODATNE NAPOMENE

Ako trebaš točne boje sa slike: Ako imaš pristup slici, koristi alat za odabir boja (color picker) da dobiješ točne hex vrijednosti boja i pretvori ih u Tailwind klase ili custom CSS.

Ako Tailwind nema točnu boju: Možeš dodati custom boje u tailwind.config.js:

module.exports = { theme: { extend: { colors: { 'word-noun': '#16a34a', // zelena za imenice 'word-verb': '#dc2626', // crvena za glagole // ... ostale boje } } } }

Zatim koristi: bg-word-noun, bg-word-verb, itd.

───────────────────────────────────────────────

SAŽETAK PROMJENA

Datoteka	Što dodati/promijeniti
packages/frontend/src/components/dictionary/WordCard.tsx	1. Dodaj wordTypeColors mapiranje 2. Promijeni prikaz term.wordText da ima obojenu pozadinu
packages/frontend/src/components/dictionary/WordDetailModal.tsx	Iste promjene kao u WordCard.tsx
Buduće komponente (SentenceBuilder, itd.)	Primijeni isti stil za prikaz riječi

────────────────────────────────────────────────────────────────────────────────────

PRIMJER KONAČNOG IZGLEDA

Nakon promjena, svaka kartica riječi u rječniku će imati: • Gornji lijevi kut: CEFR razina (A1, A2, itd.) s bojom • Centar: Slika/ikona riječi • Ispod slike: Tekst riječi s obojenom pozadinom (npr. "adresa" na zelenoj pozadini) • Ispod teksta: Kratak opis (ako postoji) • Dno: Gumbi "Dodaj" i "Info"

─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

Ovo su jasne, korak-po-korak upute koje možeš dati AI agentu da implementira promjene. Agent će točno znati koje datoteke treba promijeniti i što dodati.