Embed implementacija, animacije, sidebar hover

assets.go

@@ -0,0 +1,12 @@
+package assets
+
+import "embed"
+
+//go:embed migrations
+var MigracijeFS embed.FS
+
+//go:embed web/static/css
+var StaticFS embed.FS
+
+//go:embed web/templates
+var TemplatesFS embed.FS

cmd/ntech/main.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"fmt"
 	"io"
+	"io/fs"
 	"log"
 	"net/http"
 	"os"
@@ -11,6 +12,7 @@ import (
 	"sort"
 	"time"
 
+	"ntech"
 	"ntech/internal/auth"
 	"ntech/internal/config"
 	"ntech/internal/db/sqlite"
@@ -30,7 +32,7 @@ func main() {
 	auth.InitAuthLog()
 
 	if config.JelPrvoPokretanje() {
-		config.PokreniSetup()
+		config.PokreniSetup(assets.TemplatesFS)
 		return
 	}
 
@@ -50,7 +52,7 @@ func main() {
 	}
 	defer db.Close()
 
-	if err := sqlite.PokreniMigracije(db, "migrations"); err != nil {
+	if err := sqlite.PokreniMigracije(db, assets.MigracijeFS); err != nil {
 		log.Fatalf("Greška pri migracijama: %v", err)
 	}
 	log.Println("Migracije uspešno izvršene")
@@ -75,7 +77,7 @@ func main() {
 	h.Verzija = Verzija
 
 	if os.Getenv("NTECH_ENV") == "production" {
-		kes, err := handler.KreirajKes()
+		kes, err := handler.KreirajKes(assets.TemplatesFS)
 		if err != nil {
 			log.Fatalf("Greška pri kreiranju keša šablona: %v", err)
 		}
@@ -88,8 +90,11 @@ func main() {
 	r.Use(ntechmw.CsrfMiddleware)
 	r.Use(middleware.Compress(5))
 
-	// statični fajlovi
+	// uploads se servira sa diska (runtime fajlovi)
-	r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static"))))
+	r.Handle("/static/uploads/*", http.StripPrefix("/static/uploads/", http.FileServer(http.Dir("web/static/uploads"))))
+	// ostali statični fajlovi (CSS) iz embed FS-a
+	staticSub, _ := fs.Sub(assets.StaticFS, "web/static")
+	r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.FS(staticSub))))
 
 	// javne rute (bez autentifikacije)
 	r.Get("/prijava", h.PrikazPrijave)

internal/config/setup.go

@@ -3,9 +3,9 @@ package config
 import (
 	"encoding/json"
 	"fmt"
+	"io/fs"
 	"log"
 	"net/http"
-	"os"
 	"strings"
 
 	"github.com/go-chi/chi/v5"
@@ -13,7 +13,7 @@ import (
 )
 
 // PokreniSetup pokreće WebView prozor za prvo podešavanje
-func PokreniSetup() {
+func PokreniSetup(fsys fs.FS) {
 	port := NadjiSlobodanPort()
 	if port == 0 {
 		log.Fatal("Greška: nije pronađen nijedan slobodan port")
@@ -30,7 +30,7 @@ func PokreniSetup() {
 			http.Error(w, "Greška", http.StatusInternalServerError)
 			return
 		}
-		sadrzaj, err := os.ReadFile("web/templates/setup/index.html")
+		sadrzaj, err := fs.ReadFile(fsys, "web/templates/setup/index.html")
 		if err != nil {
 			http.Error(w, "Greška", http.StatusInternalServerError)
 			return

internal/db/sqlite/migracije.go

@@ -3,8 +3,8 @@ package sqlite
 import (
 	"database/sql"
 	"fmt"
-	"os"
+	"io/fs"
-	"path/filepath"
+	"path"
 	"sort"
 
 	_ "modernc.org/sqlite"
@@ -32,8 +32,8 @@ func OtvoriDB(putanja string) (*sql.DB, error) {
 	return db, nil
 }
 
-// PokreniMigracije izvršava sve SQL fajlove iz foldera koji još nisu izvršeni
+// PokreniMigracije izvršava sve SQL fajlove iz fs.FS koji još nisu izvršeni
-func PokreniMigracije(db *sql.DB, folder string) error {
+func PokreniMigracije(db *sql.DB, fsys fs.FS) error {
 	// kreiramo tabelu za praćenje migracija ako ne postoji
 	_, err := db.Exec(`
 		CREATE TABLE IF NOT EXISTS migracije (
@@ -46,7 +46,7 @@ func PokreniMigracije(db *sql.DB, folder string) error {
 	}
 
 	// čitamo sve .sql fajlove iz foldera
-	unosi, err := os.ReadDir(folder)
+	unosi, err := fs.ReadDir(fsys, "migrations")
 	if err != nil {
 		return fmt.Errorf("ntech: PokreniMigracije: čitanje foldera: %w", err)
 	}
@@ -57,7 +57,7 @@ func PokreniMigracije(db *sql.DB, folder string) error {
 	})
 
 	for _, unos := range unosi {
-		if filepath.Ext(unos.Name()) != ".sql" {
+		if path.Ext(unos.Name()) != ".sql" {
 			continue
 		}
 
@@ -74,8 +74,8 @@ func PokreniMigracije(db *sql.DB, folder string) error {
 		}
 
 		// čitamo sadržaj SQL fajla
-		putanja := filepath.Join(folder, naziv)
+		putanja := "migrations/" + naziv
-		sadrzaj, err := os.ReadFile(putanja)
+		sadrzaj, err := fs.ReadFile(fsys, putanja)
 		if err != nil {
 			return fmt.Errorf("ntech: PokreniMigracije: čitanje %s: %w", naziv, err)
 		}

internal/handler/handler.go

@@ -3,12 +3,13 @@ package handler
 import (
 	"database/sql"
 	"html/template"
+	"io/fs"
+	"net/http"
 
 	"ntech/internal/db"
 	"ntech/internal/db/sqlite"
 	"ntech/internal/middleware"
 	"ntech/internal/model"
-	"net/http"
 )
 
 // Handler drži zavisnosti koje su potrebne svim handlerima
@@ -28,6 +29,7 @@ type Handler struct {
 	LoginIstorijsaRepo db.LoginIstorijsaRepository
 	Verzija     string
 	Templates   map[string]*template.Template
+	TemplatesFS fs.FS
 }
 
 // Novi kreira novi Handler sa datom bazom

internal/handler/kes.go

@@ -3,6 +3,7 @@ package handler
 import (
 	"fmt"
 	"html/template"
+	"io/fs"
 	"log"
 	"net/http"
 )
@@ -34,15 +35,15 @@ var standaloneIme = []string{
 	"prijava", "setup", "totp_provera", "prodaja_stampa",
 }
 
-// KreirajKes parsuje sve šablone i vraća ih keširane u mapi
+// KreirajKes parsuje sve šablone iz fsys i vraća ih keširane u mapi
-func KreirajKes() (map[string]*template.Template, error) {
+func KreirajKes(fsys fs.FS) (map[string]*template.Template, error) {
 	kes := make(map[string]*template.Template)
 
 	for _, ime := range saSidebar {
 		fajlovi := make([]string, len(bazniSabloni), len(bazniSabloni)+1)
 		copy(fajlovi, bazniSabloni)
 		fajlovi = append(fajlovi, "web/templates/stranice/"+ime+".html")
-		t, err := template.ParseFiles(fajlovi...)
+		t, err := template.ParseFS(fsys, fajlovi...)
 		if err != nil {
 			return nil, fmt.Errorf("kes: %s: %w", ime, err)
 		}
@@ -50,7 +51,7 @@ func KreirajKes() (map[string]*template.Template, error) {
 	}
 
 	for _, ime := range standaloneIme {
-		t, err := template.ParseFiles("web/templates/stranice/" + ime + ".html")
+		t, err := template.ParseFS(fsys, "web/templates/stranice/"+ime+".html")
 		if err != nil {
 			return nil, fmt.Errorf("kes: %s: %w", ime, err)
 		}

web/static/css/main.css

@@ -31,6 +31,7 @@ body {
 
 .sidebar.skupljen {
     width: 60px;
+    overflow: hidden;
 }
 
 /* vrh sidebara — logo zona */
@@ -131,7 +132,7 @@ body {
     white-space: nowrap;
     position: relative;
     text-decoration: none;
-    transition: background 0.2s, color 0.2s;
+    transition: background 0.2s, color 0.2s, transform 0.15s ease;
 }
 
 .nav-stavka:hover {
@@ -139,6 +140,14 @@ body {
     color: var(--tekst-jak);
 }
 
+.sidebar:not(.skupljen) .nav-stavka:hover {
+    transform: scale(1.03);
+}
+
+.sidebar.skupljen .nav-stavka:hover svg {
+    transform: scale(1.15);
+}
+
 .nav-stavka.aktivan {
     background: var(--sb-aktivan);
     color: var(--tekst-jak);
@@ -159,6 +168,7 @@ body {
     flex-shrink: 0;
     width: 20px;
     height: 20px;
+    transition: transform 0.15s ease;
 }
 
 .nav-stavka span {
@@ -437,6 +447,29 @@ select {
     }
 }
 
+/* animacije */
+@keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(10px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideDown {
+    from { opacity: 0; transform: translateY(-10px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    20%       { transform: translateX(-6px); }
+    40%       { transform: translateX(6px); }
+    60%       { transform: translateX(-4px); }
+    80%       { transform: translateX(4px); }
+}
+
+.animiraj {
+    animation: fadeInUp 0.4s ease both;
+}
+
 /* gornja traka magacina — responsive */
 .magacin-traka {
     display: flex;

web/templates/stranice/admin_korisnici.html

@@ -8,17 +8,8 @@
         from { opacity: 0; transform: translateY(-10px); }
         to   { opacity: 1; transform: translateY(0); }
     }
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
     .poruka-animacija { animation: slideDown 0.3s ease forwards; }
 
-    .korisnici-tabela tbody tr {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
     .korisnici-tabela tbody tr:nth-child(1)  { animation-delay: 0.04s; }
     .korisnici-tabela tbody tr:nth-child(2)  { animation-delay: 0.08s; }
     .korisnici-tabela tbody tr:nth-child(3)  { animation-delay: 0.12s; }
@@ -31,8 +22,6 @@
     .korisnici-tabela tbody tr:nth-child(10) { animation-delay: 0.40s; }
 
     .nova-forma-kartica {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
         animation-delay: 0.30s;
     }
 </style>
@@ -52,7 +41,7 @@
     {{end}}
 
     <!-- lista korisnika -->
-    <div class="kartica" style="padding:0;overflow:hidden;">
+    <div class="kartica animiraj" style="padding:0;overflow:hidden;">
         <div style="padding:16px 20px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Korisnici sistema</span>
         </div>
@@ -70,7 +59,7 @@
                 </thead>
                 <tbody>
                     {{range .Korisnici}}
-                    <tr style="border-bottom:0.5px solid var(--ivica);">
+                    <tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);">
                         <td style="padding:10px 20px;font-size:14px;font-weight:500;color:var(--tekst-glavni);">{{.KorisnickoIme}}</td>
                         <td style="padding:10px 20px;">
                             {{if eq $.KorisnikUloga "superadmin"}}
@@ -127,7 +116,7 @@
     </div>
 
     <!-- forma za novog korisnika -->
-    <div class="kartica nova-forma-kartica">
+    <div class="kartica nova-forma-kartica animiraj">
         <div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
             Novi korisnik
         </div>

web/templates/stranice/admin_login_istorija.html

@@ -2,6 +2,15 @@
 
 {{define "naslov"}}Istorija prijava — NTech{{end}}
 
+{{define "dodatni-css"}}
+<style>
+    .animiraj:nth-child(1) { animation-delay: 0.10s; }
+    .animiraj:nth-child(2) { animation-delay: 0.16s; }
+    .animiraj:nth-child(3) { animation-delay: 0.22s; }
+    .animiraj:nth-child(4) { animation-delay: 0.28s; }
+</style>
+{{end}}
+
 {{define "sadrzaj"}}
 <div style="display:flex;flex-direction:column;gap:16px;">
 
@@ -15,7 +24,7 @@
         </span>
     </div>
 
-    <div class="kartica" style="padding:0;overflow:hidden;">
+    <div class="kartica animiraj" style="padding:0;overflow:hidden;">
         <div style="padding:16px 20px;border-bottom:0.5px solid var(--ivica);display:flex;align-items:center;justify-content:space-between;">
             <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Poslednjih 50 pokušaja</span>
             <span style="font-size:12px;color:var(--tekst-sporedni);">Vreme prikazano u UTC</span>
@@ -35,7 +44,7 @@
                 </thead>
                 <tbody>
                     {{range .Istorija}}
-                    <tr style="border-bottom:0.5px solid var(--ivica);">
+                    <tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);">
                         <td style="padding:10px 20px;font-size:13px;color:var(--tekst-sporedni);white-space:nowrap;">
                             {{.Vreme.Format "02.01.2006. 15:04:05"}}
                         </td>

web/templates/stranice/admin_profil.html

@@ -2,7 +2,14 @@
 
 {{define "naslov"}}Moj profil — NTech{{end}}
 
-{{define "dodatni-css"}}{{end}}
+{{define "dodatni-css"}}
+<style>
+    .animiraj:nth-child(1) { animation-delay: 0.10s; }
+    .animiraj:nth-child(2) { animation-delay: 0.16s; }
+    .animiraj:nth-child(3) { animation-delay: 0.22s; }
+    .animiraj:nth-child(4) { animation-delay: 0.28s; }
+</style>
+{{end}}
 
 {{define "sadrzaj"}}
 <div style="display:flex;flex-direction:column;gap:16px;max-width:560px;">
@@ -16,7 +23,7 @@
     {{end}}
 
     <!-- promena lozinke -->
-    <div class="kartica">
+    <div class="kartica animiraj">
         <div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
             Promena lozinke
         </div>
@@ -52,7 +59,7 @@
     </div>
 
     <!-- TOTP / 2FA -->
-    <div class="kartica">
+    <div class="kartica animiraj">
         <div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
             Dvostepena verifikacija (2FA)
         </div>

web/templates/stranice/dashboard.html

@@ -4,25 +4,12 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    .dash-stat {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
     .dash-stat:nth-child(1) { animation-delay: 0.04s; }
     .dash-stat:nth-child(2) { animation-delay: 0.10s; }
     .dash-stat:nth-child(3) { animation-delay: 0.16s; }
     .dash-stat:nth-child(4) { animation-delay: 0.22s; }
     .dash-stat:nth-child(5) { animation-delay: 0.28s; }
 
-    .dash-kartica {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
     .dash-kartica:nth-child(1) { animation-delay: 0.20s; }
     .dash-kartica:nth-child(2) { animation-delay: 0.28s; }
     .dash-kartica:nth-child(3) { animation-delay: 0.36s; }
@@ -32,7 +19,7 @@
 {{define "sadrzaj"}}
 <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
     <!-- stat kartice -->
-    <div class="kartica dash-stat">
+    <div class="kartica dash-stat animiraj">
         <div style="width:36px;height:36px;border-radius:8px;background:#eff2ff;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4f7ef8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
         </div>
@@ -40,7 +27,7 @@
         <div style="font-size:12px;color:var(--tekst-sporedni);margin-top:4px;">Artikala na stanju</div>
     </div>
 
-    <div class="kartica dash-stat">
+    <div class="kartica dash-stat animiraj">
         <div style="width:36px;height:36px;border-radius:8px;background:#f0fdf4;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
         </div>
@@ -48,7 +35,7 @@
         <div style="font-size:12px;color:var(--tekst-sporedni);margin-top:4px;">Aktivnih servisa</div>
     </div>
 
-    <div class="kartica dash-stat">
+    <div class="kartica dash-stat animiraj">
         <div style="width:36px;height:36px;border-radius:8px;background:#fff7ed;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
         </div>
@@ -56,7 +43,7 @@
         <div style="font-size:12px;color:var(--tekst-sporedni);margin-top:4px;">Prihod ovog meseca</div>
     </div>
 
-    <div class="kartica dash-stat">
+    <div class="kartica dash-stat animiraj">
         <div style="width:36px;height:36px;border-radius:8px;background:#fef2f2;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
         </div>
@@ -64,7 +51,7 @@
         <div style="font-size:12px;color:var(--tekst-sporedni);margin-top:4px;">Kritično niska zaliha</div>
     </div>
 
-    <a href="/podsetnici" class="kartica dash-stat" style="text-decoration:none;display:block;">
+    <a href="/podsetnici" class="kartica dash-stat animiraj" style="text-decoration:none;display:block;">
         <div style="width:36px;height:36px;border-radius:8px;background:#f0f9ff;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
         </div>
@@ -75,7 +62,7 @@
 
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
     <!-- poslednji servisi -->
-    <div class="kartica dash-kartica">
+    <div class="kartica dash-kartica animiraj">
         <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
             <span style="font-size:14px;font-weight:500;color:var(--tekst-glavni);">Poslednji servisi</span>
         </div>
@@ -91,7 +78,7 @@
     </div>
 
     <!-- kritične zalihe -->
-    <div class="kartica dash-kartica">
+    <div class="kartica dash-kartica animiraj">
         <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
             <span style="font-size:14px;font-weight:500;color:var(--tekst-glavni);">Kritične zalihe</span>
             <span style="font-size:11px;padding:2px 8px;border-radius:20px;background:#fffbeb;color:#b45309;font-weight:500;">Upozorenje</span>
@@ -108,7 +95,7 @@
     </div>
 
     <!-- poslednje prodaje -->
-    <div class="kartica dash-kartica">
+    <div class="kartica dash-kartica animiraj">
         <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
             <span style="font-size:14px;font-weight:500;color:var(--tekst-glavni);">Poslednje prodaje</span>
         </div>

web/templates/stranice/dobavljac_forma.html

@@ -4,23 +4,6 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    @keyframes shake {
-        0%, 100% { transform: translateX(0); }
-        20%       { transform: translateX(-6px); }
-        40%       { transform: translateX(6px); }
-        60%       { transform: translateX(-4px); }
-        80%       { transform: translateX(4px); }
-    }
-
-    .forma-kartica {
-        animation: fadeInUp 0.3s ease forwards;
-    }
-
     .greska-animacija {
         animation: shake 0.4s ease;
     }
@@ -38,7 +21,7 @@
         Nazad na dobavljače
     </a>
 
-    <div class="kartica forma-kartica">
+    <div class="kartica forma-kartica animiraj">
         <div style="margin-bottom:20px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">
                 {{if .Izmena}}Izmeni dobavljača{{else}}Novi dobavljač{{end}}

web/templates/stranice/dobavljaci.html

@@ -9,20 +9,10 @@
         to   { opacity: 1; transform: translateY(0); }
     }
 
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
     .poruka-animacija {
         animation: slideDown 0.3s ease forwards;
     }
 
-    .dobavljaci-tabela tbody tr {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     /* stagger — svaki red se pojavljuje malo kasnije */
     .dobavljaci-tabela tbody tr:nth-child(1)  { animation-delay: 0.04s; }
     .dobavljaci-tabela tbody tr:nth-child(2)  { animation-delay: 0.08s; }
@@ -41,11 +31,6 @@
         gap: 12px;
     }
 
-    .dobavljac-kartica {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .dobavljac-kartica:nth-child(1)  { animation-delay: 0.04s; }
     .dobavljac-kartica:nth-child(2)  { animation-delay: 0.10s; }
     .dobavljac-kartica:nth-child(3)  { animation-delay: 0.16s; }
@@ -89,7 +74,7 @@
     </div>
 
     <!-- desktop tabela -->
-    <div class="kartica dobavljaci-tabela" style="padding:0;overflow:hidden;">
+    <div class="kartica dobavljaci-tabela animiraj" style="padding:0;overflow:hidden;">
         <div style="overflow-x:auto;">
             <table style="width:100%;border-collapse:collapse;">
                 <thead>
@@ -103,7 +88,7 @@
                 </thead>
                 <tbody>
                     {{range .Dobavljaci}}
-                    <tr style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
+                    <tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
                         onmouseover="this.style.background='var(--pozadina)'"
                         onmouseout="this.style.background=''">
                         <td style="padding:12px 16px;font-size:14px;font-weight:500;color:var(--tekst-glavni);">{{.Naziv}}</td>
@@ -149,7 +134,7 @@
     <!-- mobilne kartice -->
     <div class="dobavljaci-kartice">
         {{range .Dobavljaci}}
-        <div class="kartica dobavljac-kartica">
+        <div class="kartica dobavljac-kartica animiraj">
             <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">{{.Naziv}}</span>
                 <div style="display:flex;gap:8px;flex-shrink:0;">

web/templates/stranice/izvestaji.html

@@ -83,23 +83,10 @@
     .badge-dana.upozorenje { background: #fffbeb; color: #b45309; }
     .badge-dana.kritican   { background: #fef2f2; color: #dc2626; }
 
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    .izv-sekcija {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
     .izv-sekcija:nth-child(1) { animation-delay: 0.04s; }
     .izv-sekcija:nth-child(2) { animation-delay: 0.12s; }
     .izv-sekcija:nth-child(3) { animation-delay: 0.20s; }
 
-    .izv-grid-kartica {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
     .izv-grid-kartica:nth-child(1) { animation-delay: 0.24s; }
     .izv-grid-kartica:nth-child(2) { animation-delay: 0.32s; }
 </style>
@@ -109,7 +96,7 @@
 <div style="display:flex;flex-direction:column;gap:20px;">
 
     <!-- 1. mesečni prihod -->
-    <div class="kartica izv-sekcija">
+    <div class="kartica izv-sekcija animiraj">
         <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:4px;">
             <div class="izv-naslov" style="margin-bottom:0;">Mesečni prihod — poslednjih 12 meseci</div>
             <div class="toggle-red" style="margin-bottom:0;">
@@ -156,7 +143,7 @@
     </div>
 
     <!-- 2. stari otvoreni nalozi -->
-    <div class="kartica izv-sekcija">
+    <div class="kartica izv-sekcija animiraj">
         <div class="izv-naslov">Stari otvoreni nalozi — bez završetka duže od 14 dana</div>
         {{if .StariNalozi}}
         <div style="overflow-x:auto;">
@@ -198,10 +185,10 @@
         {{end}}
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 izv-sekcija">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 izv-sekcija animiraj">
 
         <!-- 3. top 10 artikala -->
-        <div class="kartica izv-grid-kartica">
+        <div class="kartica izv-grid-kartica animiraj">
             <div class="izv-naslov">Najprodavaniji artikli — top 10</div>
             {{if .TopArtikli}}
             <table style="width:100%;border-collapse:collapse;">
@@ -235,7 +222,7 @@
         </div>
 
         <!-- 4. top 10 klijenata -->
-        <div class="kartica izv-grid-kartica">
+        <div class="kartica izv-grid-kartica animiraj">
             <div class="izv-naslov">Najvažniji klijenti — top 10</div>
             {{if .TopKlijenti}}
             <table style="width:100%;border-collapse:collapse;">

web/templates/stranice/kategorije.html

@@ -8,23 +8,12 @@
         from { opacity: 0; transform: translateY(-10px); }
         to   { opacity: 1; transform: translateY(0); }
     }
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
     .poruka-animacija { animation: slideDown 0.3s ease forwards; }
 
     .kat-forma-kartica {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
         animation-delay: 0.04s;
     }
 
-    .kat-red {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
     .kat-red:nth-child(1) { animation-delay: 0.12s; }
     .kat-red:nth-child(2) { animation-delay: 0.18s; }
     .kat-red:nth-child(3) { animation-delay: 0.24s; }
@@ -53,7 +42,7 @@
     </a>
 
     <!-- forma za novu kategoriju -->
-    <div class="kartica kat-forma-kartica">
+    <div class="kartica kat-forma-kartica animiraj">
         <div style="margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Nova kategorija</span>
         </div>
@@ -87,7 +76,7 @@
             <span style="font-size:14px;font-weight:500;color:var(--tekst-glavni);">Postojeće kategorije</span>
         </div>
         {{range .Kategorije}}
-        <div class="kat-red" style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:0.5px solid var(--ivica);">
+        <div class="kat-red animiraj" style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:0.5px solid var(--ivica);">
             <div style="flex:1;">
                 <div style="font-size:14px;color:var(--tekst-glavni);">{{.Naziv}}</div>
                 {{if .Opis}}

web/templates/stranice/klijent_forma.html

@@ -4,23 +4,6 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    @keyframes shake {
-        0%, 100% { transform: translateX(0); }
-        20%       { transform: translateX(-6px); }
-        40%       { transform: translateX(6px); }
-        60%       { transform: translateX(-4px); }
-        80%       { transform: translateX(4px); }
-    }
-
-    .forma-kartica {
-        animation: fadeInUp 0.3s ease forwards;
-    }
-
     .greska-animacija {
         animation: shake 0.4s ease;
     }
@@ -42,7 +25,7 @@
         Nazad na klijente
     </a>
 
-    <div class="kartica forma-kartica">
+    <div class="kartica forma-kartica animiraj">
         <div style="margin-bottom:20px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">
                 {{if .Izmena}}Izmeni klijenta{{else}}Novi klijent{{end}}

web/templates/stranice/klijenti.html

@@ -9,20 +9,10 @@
         to   { opacity: 1; transform: translateY(0); }
     }
 
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
     .poruka-animacija {
         animation: slideDown 0.3s ease forwards;
     }
 
-    .klijenti-tabela tbody tr {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .klijenti-tabela tbody tr:nth-child(1)  { animation-delay: 0.04s; }
     .klijenti-tabela tbody tr:nth-child(2)  { animation-delay: 0.08s; }
     .klijenti-tabela tbody tr:nth-child(3)  { animation-delay: 0.12s; }
@@ -40,11 +30,6 @@
         gap: 12px;
     }
 
-    .klijent-kartica {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .klijent-kartica:nth-child(1)  { animation-delay: 0.04s; }
     .klijent-kartica:nth-child(2)  { animation-delay: 0.10s; }
     .klijent-kartica:nth-child(3)  { animation-delay: 0.16s; }
@@ -88,7 +73,7 @@
     </div>
 
     <!-- desktop tabela -->
-    <div class="kartica klijenti-tabela" style="padding:0;overflow:hidden;">
+    <div class="kartica klijenti-tabela animiraj" style="padding:0;overflow:hidden;">
         <div style="overflow-x:auto;">
             <table style="width:100%;border-collapse:collapse;">
                 <thead>
@@ -102,7 +87,7 @@
                 </thead>
                 <tbody>
                     {{range .Klijenti}}
-                    <tr style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
+                    <tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
                         onmouseover="this.style.background='var(--pozadina)'"
                         onmouseout="this.style.background=''">
                         <td style="padding:12px 16px;">
@@ -157,7 +142,7 @@
     <!-- mobilne kartice -->
     <div class="klijenti-kartice">
         {{range .Klijenti}}
-        <div class="kartica klijent-kartica">
+        <div class="kartica klijent-kartica animiraj">
             <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <div>
                     {{if .NazivFirme}}

web/templates/stranice/magacin.html

@@ -4,15 +4,6 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    .magacin-tabela tbody tr {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
     .magacin-tabela tbody tr:nth-child(1)  { animation-delay: 0.04s; }
     .magacin-tabela tbody tr:nth-child(2)  { animation-delay: 0.08s; }
     .magacin-tabela tbody tr:nth-child(3)  { animation-delay: 0.12s; }
@@ -72,7 +63,7 @@
     </form>
 
     <!-- tabela artikala -->
-    <div class="kartica" style="padding:0;overflow:hidden;">
+    <div class="kartica animiraj" style="padding:0;overflow:hidden;">
         <div style="overflow-x:auto;">
             <table class="magacin-tabela" style="width:100%;border-collapse:collapse;">
                 <thead>
@@ -87,7 +78,7 @@
                 </thead>
                 <tbody>
                     {{range .Artikli}}
-                    <tr style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
+                    <tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
                         onmouseover="this.style.background='var(--pozadina)'"
                         onmouseout="this.style.background=''">
                         <td style="padding:12px 16px;font-size:14px;color:var(--tekst-glavni);">{{.Naziv}}</td>

web/templates/stranice/magacin_forma.html

@@ -11,7 +11,7 @@
         Nazad na magacin
     </a>
 
-    <div class="kartica">
+    <div class="kartica animiraj">
         <div style="margin-bottom:20px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">
                 {{if .Izmena}}Izmeni artikal{{else}}Novi artikal{{end}}

web/templates/stranice/nabavka_detalji.html

@@ -4,25 +4,10 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    .detalji-kartica {
-        animation: fadeInUp 0.3s ease forwards;
-        opacity: 0;
-    }
-
     .detalji-kartica:nth-child(1) { animation-delay: 0.04s; }
     .detalji-kartica:nth-child(2) { animation-delay: 0.12s; }
     .detalji-kartica:nth-child(3) { animation-delay: 0.20s; }
 
-    .stavke-tabela tbody tr {
-        animation: fadeInUp 0.2s ease forwards;
-        opacity: 0;
-    }
-
     .stavke-tabela tbody tr:nth-child(1) { animation-delay: 0.16s; }
     .stavke-tabela tbody tr:nth-child(2) { animation-delay: 0.20s; }
     .stavke-tabela tbody tr:nth-child(3) { animation-delay: 0.24s; }
@@ -54,7 +39,7 @@
     </a>
 
     <!-- zaglavlje nabavke -->
-    <div class="kartica detalji-kartica">
+    <div class="kartica detalji-kartica animiraj">
         <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;">
             <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">Detalji nabavke</span>
             <span style="font-size:13px;color:var(--tekst-sporedni);">{{.Nabavka.Datum.Format "02.01.2006. u 15:04"}}</span>
@@ -101,7 +86,7 @@
                 </thead>
                 <tbody>
                     {{range .Stavke}}
-                    <tr style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
+                    <tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
                         onmouseover="this.style.background='var(--pozadina)'"
                         onmouseout="this.style.background=''">
                         <td style="padding:10px 16px;font-size:14px;color:var(--tekst-glavni);">{{.ArtikalNaziv}}</td>

web/templates/stranice/nabavka_forma.html

@@ -4,29 +4,11 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    @keyframes shake {
-        0%, 100% { transform: translateX(0); }
-        20%       { transform: translateX(-6px); }
-        40%       { transform: translateX(6px); }
-        60%       { transform: translateX(-4px); }
-        80%       { transform: translateX(4px); }
-    }
-
     @keyframes modalIn {
         from { opacity: 0; transform: translateY(-16px) scale(0.97); }
         to   { opacity: 1; transform: translateY(0) scale(1); }
     }
 
-    .forma-kartica {
-        animation: fadeInUp 0.3s ease forwards;
-        opacity: 0;
-    }
-
     .forma-kartica:nth-child(1) { animation-delay: 0.04s; }
     .forma-kartica:nth-child(2) { animation-delay: 0.12s; }
 
@@ -148,7 +130,7 @@
         {{end}}
 
         <!-- zaglavlje nabavke -->
-        <div class="kartica forma-kartica" style="margin-bottom:16px;">
+        <div class="kartica forma-kartica animiraj" style="margin-bottom:16px;">
             <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
                 <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">Nova nabavka</span>
             </div>
@@ -172,7 +154,7 @@
         </div>
 
         <!-- stavke -->
-        <div class="kartica forma-kartica" style="margin-bottom:16px;">
+        <div class="kartica forma-kartica animiraj" style="margin-bottom:16px;">
             <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;">
                 <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">Stavke</span>
                 <div style="display:flex;gap:8px;flex-wrap:wrap;">

web/templates/stranice/nabavke.html

@@ -9,20 +9,10 @@
         to   { opacity: 1; transform: translateY(0); }
     }
 
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
     .poruka-animacija {
         animation: slideDown 0.3s ease forwards;
     }
 
-    .nabavke-tabela tbody tr {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .nabavke-tabela tbody tr:nth-child(1)  { animation-delay: 0.04s; }
     .nabavke-tabela tbody tr:nth-child(2)  { animation-delay: 0.08s; }
     .nabavke-tabela tbody tr:nth-child(3)  { animation-delay: 0.12s; }
@@ -40,11 +30,6 @@
         gap: 12px;
     }
 
-    .nabavka-kartica {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .nabavka-kartica:nth-child(1) { animation-delay: 0.04s; }
     .nabavka-kartica:nth-child(2) { animation-delay: 0.10s; }
     .nabavka-kartica:nth-child(3) { animation-delay: 0.16s; }
@@ -78,7 +63,7 @@
     </div>
 
     <!-- desktop tabela -->
-    <div class="kartica nabavke-tabela" style="padding:0;overflow:hidden;">
+    <div class="kartica nabavke-tabela animiraj" style="padding:0;overflow:hidden;">
         <div style="overflow-x:auto;">
             <table style="width:100%;border-collapse:collapse;">
                 <thead>
@@ -92,7 +77,7 @@
                 </thead>
                 <tbody>
                     {{range .Nabavke}}
-                    <tr style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
+                    <tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
                         onmouseover="this.style.background='var(--pozadina)'"
                         onmouseout="this.style.background=''">
                         <td style="padding:12px 16px;font-size:13px;color:var(--tekst-sporedni);white-space:nowrap;">
@@ -140,7 +125,7 @@
     <!-- mobilne kartice -->
     <div class="nabavke-kartice">
         {{range .Nabavke}}
-        <div class="kartica nabavka-kartica">
+        <div class="kartica nabavka-kartica animiraj">
             <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <div>
                     <div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">

web/templates/stranice/podesavanja.html

@@ -2,6 +2,15 @@
 
 {{define "naslov"}}Podešavanja — NTech{{end}}
 
+{{define "dodatni-css"}}
+<style>
+    .animiraj:nth-child(1) { animation-delay: 0.10s; }
+    .animiraj:nth-child(2) { animation-delay: 0.16s; }
+    .animiraj:nth-child(3) { animation-delay: 0.22s; }
+    .animiraj:nth-child(4) { animation-delay: 0.28s; }
+</style>
+{{end}}
+
 {{define "sadrzaj"}}
 <div style="width:100%;max-width:100%;">
 
@@ -13,7 +22,7 @@
 
     <!-- upload loga — posebna forma jer je multipart, mora biti van glavne forme -->
     <form method="POST" action="/podesavanja/logo" enctype="multipart/form-data">
-        <div class="kartica" style="margin-bottom:16px;">
+        <div class="kartica animiraj" style="margin-bottom:16px;">
             <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--sb-akcent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                 <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Logo firme</span>
@@ -45,7 +54,7 @@
     <form method="POST" action="/podesavanja/sacuvaj">
 
         <!-- sekcija: firma -->
-        <div class="kartica" style="margin-bottom:16px;">
+        <div class="kartica animiraj" style="margin-bottom:16px;">
             <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--sb-akcent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                 <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Firma</span>
@@ -110,7 +119,7 @@
         </div>
 
         <!-- sekcija: izgled -->
-        <div class="kartica" style="margin-bottom:16px;">
+        <div class="kartica animiraj" style="margin-bottom:16px;">
             <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--sb-akcent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
                 <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Izgled</span>
@@ -134,7 +143,7 @@
         </div>
 
         <!-- sekcija: sistem -->
-        <div class="kartica" style="margin-bottom:16px;">
+        <div class="kartica animiraj" style="margin-bottom:16px;">
             <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--sb-akcent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06-.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                 <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Sistem</span>

web/templates/stranice/podsetnici.html

@@ -9,20 +9,10 @@
         to   { opacity: 1; transform: translateY(0); }
     }
 
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
     .poruka-animacija {
         animation: slideDown 0.3s ease forwards;
     }
 
-    .pod-tabela tbody tr {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .pod-tabela tbody tr:nth-child(1)  { animation-delay: 0.04s; }
     .pod-tabela tbody tr:nth-child(2)  { animation-delay: 0.08s; }
     .pod-tabela tbody tr:nth-child(3)  { animation-delay: 0.12s; }
@@ -40,11 +30,6 @@
         gap: 12px;
     }
 
-    .pod-kartica {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .pod-kartica:nth-child(1) { animation-delay: 0.04s; }
     .pod-kartica:nth-child(2) { animation-delay: 0.10s; }
     .pod-kartica:nth-child(3) { animation-delay: 0.16s; }
@@ -90,7 +75,7 @@
     </div>
 
     <!-- desktop tabela -->
-    <div class="kartica pod-tabela" style="padding:0;overflow:hidden;">
+    <div class="kartica pod-tabela animiraj" style="padding:0;overflow:hidden;">
         <div style="overflow-x:auto;">
             <table style="width:100%;border-collapse:collapse;">
                 <thead>
@@ -103,7 +88,7 @@
                 </thead>
                 <tbody>
                     {{range .Podsetnici}}
-                    <tr class="{{if .JePrekoracen}}red-prekoracen{{end}}"
+                    <tr class="animiraj {{if .JePrekoracen}}red-prekoracen{{end}}"
                         style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
                         onmouseover="this.style.background='var(--pozadina)'"
                         onmouseout="this.style.background=''">
@@ -165,7 +150,7 @@
     <!-- mobilne kartice -->
     <div class="pod-kartice">
         {{range .Podsetnici}}
-        <div class="kartica pod-kartica">
+        <div class="kartica pod-kartica animiraj">
             <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <div>
                     <div style="font-size:15px;font-weight:500;color:{{if .JePrekoracen}}var(--greska){{else}}var(--tekst-glavni){{end}};">{{.Naslov}}</div>

web/templates/stranice/podsetnik_forma.html

@@ -4,23 +4,6 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    @keyframes shake {
-        0%, 100% { transform: translateX(0); }
-        20%       { transform: translateX(-6px); }
-        40%       { transform: translateX(6px); }
-        60%       { transform: translateX(-4px); }
-        80%       { transform: translateX(4px); }
-    }
-
-    .forma-kartica {
-        animation: fadeInUp 0.3s ease forwards;
-    }
-
     .greska-animacija {
         animation: shake 0.4s ease;
     }
@@ -37,7 +20,7 @@
         Nazad na podsetnik
     </a>
 
-    <div class="kartica forma-kartica" style="max-width:600px;">
+    <div class="kartica forma-kartica animiraj" style="max-width:600px;">
         <div style="margin-bottom:20px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">
                 {{if .Izmena}}Izmeni podsetnik{{else}}Novi podsetnik{{end}}

web/templates/stranice/prijava.html

@@ -98,7 +98,7 @@
     </style>
 </head>
 <body>
-    <div class="kartica">
+    <div class="kartica animiraj">
         <div class="logo">
             <div class="logo-naziv">NTech</div>
             <div class="logo-podnazlov">Sistem za upravljanje</div>

web/templates/stranice/prodaja.html

@@ -9,18 +9,8 @@
         to   { opacity: 1; transform: translateY(0); }
     }
 
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
     .poruka-animacija { animation: slideDown 0.3s ease forwards; }
 
-    .prodaja-tabela tbody tr {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .prodaja-tabela tbody tr:nth-child(1)  { animation-delay: 0.04s; }
     .prodaja-tabela tbody tr:nth-child(2)  { animation-delay: 0.08s; }
     .prodaja-tabela tbody tr:nth-child(3)  { animation-delay: 0.12s; }
@@ -38,11 +28,6 @@
         gap: 12px;
     }
 
-    .prodaja-kartica {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .prodaja-kartica:nth-child(1) { animation-delay: 0.04s; }
     .prodaja-kartica:nth-child(2) { animation-delay: 0.10s; }
     .prodaja-kartica:nth-child(3) { animation-delay: 0.16s; }
@@ -93,7 +78,7 @@
     </div>
 
     <!-- desktop tabela -->
-    <div class="kartica prodaja-tabela" style="padding:0;overflow:hidden;">
+    <div class="kartica prodaja-tabela animiraj" style="padding:0;overflow:hidden;">
         <div style="overflow-x:auto;">
             <table style="width:100%;border-collapse:collapse;">
                 <thead>
@@ -107,7 +92,7 @@
                 </thead>
                 <tbody>
                     {{range .Nalozi}}
-                    <tr style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
+                    <tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
                         onmouseover="this.style.background='var(--pozadina)'"
                         onmouseout="this.style.background=''">
                         <td style="padding:12px 16px;font-size:13px;font-family:monospace;color:var(--tekst-glavni);">
@@ -149,7 +134,7 @@
     <!-- mobilne kartice -->
     <div class="prodaja-kartice">
         {{range .Nalozi}}
-        <div class="kartica prodaja-kartica">
+        <div class="kartica prodaja-kartica animiraj">
             <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <div>
                     <div style="font-size:13px;font-family:monospace;color:var(--tekst-glavni);">{{.BrojNaloga}}</div>

web/templates/stranice/prodaja_detalji.html

@@ -4,17 +4,6 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    @keyframes slideDown {
-        from { opacity: 0; transform: translateY(-10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    .detalji-kartica { animation: fadeInUp 0.3s ease forwards; opacity: 0; }
     .detalji-kartica:nth-child(1) { animation-delay: 0.04s; }
     .detalji-kartica:nth-child(2) { animation-delay: 0.12s; }
     .detalji-kartica:nth-child(3) { animation-delay: 0.20s; }
@@ -39,7 +28,7 @@
     </a>
 
     <!-- zaglavlje naloga -->
-    <div class="kartica detalji-kartica">
+    <div class="kartica detalji-kartica animiraj">
         <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:20px;font-weight:600;color:var(--tekst-glavni);font-family:monospace;">
                 {{.Nalog.BrojNaloga}}
@@ -76,7 +65,7 @@
     </div>
 
     <!-- stavke -->
-    <div class="kartica detalji-kartica" style="padding:0;overflow:hidden;">
+    <div class="kartica detalji-kartica animiraj" style="padding:0;overflow:hidden;">
         <div style="padding:16px 20px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Stavke</span>
         </div>
@@ -111,7 +100,7 @@
     </div>
 
     <!-- zona za brisanje -->
-    <div class="kartica detalji-kartica" style="border-color:#dc262633;">
+    <div class="kartica detalji-kartica animiraj" style="border-color:#dc262633;">
         <div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">
             <div style="flex:1;min-width:200px;">
                 <div style="font-size:14px;font-weight:500;color:#dc2626;margin-bottom:4px;">Brisanje naloga</div>

web/templates/stranice/prodaja_forma.html

@@ -4,20 +4,6 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    @keyframes shake {
-        0%, 100% { transform: translateX(0); }
-        20%       { transform: translateX(-6px); }
-        40%       { transform: translateX(6px); }
-        60%       { transform: translateX(-4px); }
-        80%       { transform: translateX(4px); }
-    }
-
-    .forma-kartica { animation: fadeInUp 0.3s ease forwards; opacity: 0; }
     .forma-kartica:nth-child(1) { animation-delay: 0.04s; }
     .forma-kartica:nth-child(2) { animation-delay: 0.12s; }
 
@@ -99,7 +85,7 @@
         {{end}}
 
         <!-- zaglavlje prodaje -->
-        <div class="kartica forma-kartica" style="margin-bottom:16px;">
+        <div class="kartica forma-kartica animiraj" style="margin-bottom:16px;">
             <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
                 <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">Nova prodaja</span>
             </div>
@@ -125,7 +111,7 @@
         </div>
 
         <!-- stavke -->
-        <div class="kartica forma-kartica" style="margin-bottom:16px;">
+        <div class="kartica forma-kartica animiraj" style="margin-bottom:16px;">
             <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;">
                 <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">Stavke</span>
                 <button type="button" @click="dodajStavku()"

web/templates/stranice/servis.html

@@ -9,18 +9,8 @@
         to   { opacity: 1; transform: translateY(0); }
     }
 
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
     .poruka-animacija { animation: slideDown 0.3s ease forwards; }
 
-    .servis-tabela tbody tr {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .servis-tabela tbody tr:nth-child(1)  { animation-delay: 0.04s; }
     .servis-tabela tbody tr:nth-child(2)  { animation-delay: 0.08s; }
     .servis-tabela tbody tr:nth-child(3)  { animation-delay: 0.12s; }
@@ -38,11 +28,6 @@
         gap: 12px;
     }
 
-    .servis-kartica {
-        animation: fadeInUp 0.25s ease forwards;
-        opacity: 0;
-    }
-
     .servis-kartica:nth-child(1)  { animation-delay: 0.04s; }
     .servis-kartica:nth-child(2)  { animation-delay: 0.10s; }
     .servis-kartica:nth-child(3)  { animation-delay: 0.16s; }
@@ -119,7 +104,7 @@
     </div>
 
     <!-- desktop tabela -->
-    <div class="kartica servis-tabela" style="padding:0;overflow:hidden;">
+    <div class="kartica servis-tabela animiraj" style="padding:0;overflow:hidden;">
         <div style="overflow-x:auto;">
             <table style="width:100%;border-collapse:collapse;">
                 <thead>
@@ -134,7 +119,7 @@
                 </thead>
                 <tbody>
                     {{range .Nalozi}}
-                    <tr style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
+                    <tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);transition:background 0.15s;"
                         onmouseover="this.style.background='var(--pozadina)'"
                         onmouseout="this.style.background=''">
                         <td style="padding:12px 16px;">
@@ -188,7 +173,7 @@
     <!-- mobilne kartice -->
     <div class="servis-kartice">
         {{range .Nalozi}}
-        <div class="kartica servis-kartica">
+        <div class="kartica servis-kartica animiraj">
             <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
                 <div>
                     <a href="/servis/{{.ID}}"

web/templates/stranice/servis_detalji.html

@@ -4,21 +4,6 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    @keyframes slideDown {
-        from { opacity: 0; transform: translateY(-10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    .detalji-kartica {
-        animation: fadeInUp 0.3s ease forwards;
-        opacity: 0;
-    }
-
     .detalji-kartica:nth-child(1) { animation-delay: 0.04s; }
     .detalji-kartica:nth-child(2) { animation-delay: 0.12s; }
     .detalji-kartica:nth-child(3) { animation-delay: 0.20s; }
@@ -72,7 +57,7 @@
     </a>
 
     <!-- zaglavlje naloga -->
-    <div class="kartica detalji-kartica">
+    <div class="kartica detalji-kartica animiraj">
         <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <div style="display:flex;flex-direction:column;gap:8px;">
                 <span style="font-size:20px;font-weight:600;color:var(--tekst-glavni);font-family:monospace;">
@@ -107,7 +92,7 @@
     </div>
 
     <!-- podaci o uređaju -->
-    <div class="kartica detalji-kartica">
+    <div class="kartica detalji-kartica animiraj">
         <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Uređaj</span>
         </div>
@@ -138,7 +123,7 @@
     </div>
 
     <!-- cene -->
-    <div class="kartica detalji-kartica">
+    <div class="kartica detalji-kartica animiraj">
         <div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
             <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Cene</span>
         </div>
@@ -171,7 +156,7 @@
     </div>
 
     <!-- placeholder za buduće funkcije -->
-    <div class="kartica detalji-kartica" style="border-style:dashed;">
+    <div class="kartica detalji-kartica animiraj" style="border-style:dashed;">
         <div style="display:flex;align-items:center;gap:10px;color:var(--tekst-sporedni);">
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
             <span style="font-size:13px;">Istorija promena statusa i vezani artikli biće dostupni u narednoj verziji.</span>
@@ -179,7 +164,7 @@
     </div>
 
     <!-- zona za brisanje -->
-    <div class="kartica detalji-kartica" style="border-color:#dc262633;">
+    <div class="kartica detalji-kartica animiraj" style="border-color:#dc262633;">
         <div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">
             <div style="flex:1;min-width:200px;">
                 <div style="font-size:14px;font-weight:500;color:#dc2626;margin-bottom:4px;">Brisanje naloga</div>

web/templates/stranice/servis_forma.html

@@ -4,20 +4,6 @@
 
 {{define "dodatni-css"}}
 <style>
-    @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to   { opacity: 1; transform: translateY(0); }
-    }
-
-    @keyframes shake {
-        0%, 100% { transform: translateX(0); }
-        20%       { transform: translateX(-6px); }
-        40%       { transform: translateX(6px); }
-        60%       { transform: translateX(-4px); }
-        80%       { transform: translateX(4px); }
-    }
-
-    .forma-kartica    { animation: fadeInUp 0.3s ease forwards; }
     .greska-animacija { animation: shake 0.4s ease; }
 
     .sekcija-naslov {
@@ -47,7 +33,7 @@
         Nazad na servis
     </a>
 
-    <div class="kartica forma-kartica">
+    <div class="kartica forma-kartica animiraj">
         <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);flex-wrap:wrap;gap:10px;">
             <span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">
                 {{if .Izmena}}Izmeni nalog{{else}}Novi nalog{{end}}

web/templates/stranice/setup.html

@@ -73,7 +73,7 @@
     </style>
 </head>
 <body>
-    <div class="kartica">
+    <div class="kartica animiraj">
         <div class="logo">
             <div class="logo-naziv">NTech</div>
             <div class="logo-podnazlov">Prvo pokretanje</div>

web/templates/stranice/totp_provera.html

@@ -78,7 +78,7 @@
     </style>
 </head>
 <body>
-    <div class="kartica">
+    <div class="kartica animiraj">
         <div class="logo">
             <div class="logo-naziv">NTech</div>
         </div>