Tema: slider za brzinu animacije, zamena scaleIn sa blurIn, AJAX čuvanje

- nova animacija blurIn (zamagljivanje) umesto scaleIn koji je izgledao isto kao fadeIn
- slider za brzinu animacije (0.1s–0.8s, korak 0.1) premešten u karticu animacije
- brzina i vrsta animacije čuvaju se jednim klikom, iz istog forma
- nova kolona lokalna_brzina_animacije u bazi (migracija 056)
- AJAX čuvanje profil/tema: nema reload stranice, scroll ostaje, toast notifikacija
- otpremnica vidljiva samo za status Završeno/Preuzeto; radni nalog skriven kada završeno
- toast notifikacije sa punom bojom pozadine (svetla i tamna tema)

web/static/css/main.css

@@ -5,6 +5,16 @@
     padding: 0;
 }
 
+:root { --anim-trajanje: 0.4s; }
+[data-brzina-animacije="0.1"] { --anim-trajanje: 0.1s; }
+[data-brzina-animacije="0.2"] { --anim-trajanje: 0.2s; }
+[data-brzina-animacije="0.3"] { --anim-trajanje: 0.3s; }
+[data-brzina-animacije="0.4"] { --anim-trajanje: 0.4s; }
+[data-brzina-animacije="0.5"] { --anim-trajanje: 0.5s; }
+[data-brzina-animacije="0.6"] { --anim-trajanje: 0.6s; }
+[data-brzina-animacije="0.7"] { --anim-trajanje: 0.7s; }
+[data-brzina-animacije="0.8"] { --anim-trajanje: 0.8s; }
+
 html {
     background: var(--pozadina);
 }
@@ -793,8 +803,8 @@ select {
     animation: toastIn 0.3s ease forwards;
     max-width: 340px;
 }
-.toast-greska { background: rgba(207, 87, 87, 0.12); color: var(--greska); border: 0.5px solid var(--greska); }
-.toast-uspeh { background: var(--poruka-uspeh-bg); color: var(--poruka-uspeh-boja); border: 0.5px solid var(--poruka-uspeh-boja); }
+.toast-greska { background: #fef2f2; color: #dc2626; border: 0.5px solid #fecaca; }
+.toast-uspeh { background: #f0fdf4; color: #15803d; border: 0.5px solid #86efac; }
 .toast.nestaje { animation: toastOut 0.3s ease forwards; }
 @keyframes toastIn {
     from { opacity: 0; transform: translateY(12px); }
@@ -1011,7 +1021,7 @@ select {
 
 /* animacije */
 @keyframes fadeInUp {
-    from { opacity: 0; transform: translateY(10px); }
+    from { opacity: 0; transform: translateY(16px); }
     to   { opacity: 1; transform: translateY(0); }
 }
 
@@ -1020,13 +1030,13 @@ select {
     to   { opacity: 1; }
 }
 
-@keyframes scaleIn {
-    from { opacity: 0; transform: scale(0.95); }
-    to   { opacity: 1; transform: scale(1); }
+@keyframes blurIn {
+    from { opacity: 0; filter: blur(8px); }
+    to   { opacity: 1; filter: blur(0); }
 }
 
 @keyframes slideLeft {
-    from { opacity: 0; transform: translateX(-12px); }
+    from { opacity: 0; transform: translateX(-18px); }
     to   { opacity: 1; transform: translateX(0); }
 }
 
@@ -1050,7 +1060,7 @@ select {
 /* backwards (ne both): drži početni frame tokom stagger-delay-a da nema treperenja,
    ali NE zaključava krajnji transform — pa .kartica:hover lift radi i na .animiraj karticama */
 .animiraj {
-    animation: fadeInUp 0.2s ease backwards;
+    animation: fadeInUp var(--anim-trajanje) ease backwards;
 }
 
 /* kartice ne animiramo po defaultu — animacija je samo na redovima tabela */
@@ -1066,26 +1076,26 @@ select {
 
 [data-animacija="fadeInUp"] .animiraj,
 [data-animacija="fadeInUp"] .tabela tbody tr,
-[data-animacija="fadeInUp"] .kartica.animiraj { animation: fadeInUp 0.2s ease backwards; }
+[data-animacija="fadeInUp"] .kartica.animiraj { animation: fadeInUp var(--anim-trajanje) ease backwards; }
 
 [data-animacija="fadeIn"] .animiraj,
 [data-animacija="fadeIn"] .tabela tbody tr,
-[data-animacija="fadeIn"] .kartica.animiraj   { animation: fadeIn 0.2s ease backwards; }
+[data-animacija="fadeIn"] .kartica.animiraj   { animation: fadeIn var(--anim-trajanje) ease backwards; }
 
-[data-animacija="scaleIn"] .animiraj,
-[data-animacija="scaleIn"] .tabela tbody tr,
-[data-animacija="scaleIn"] .kartica.animiraj  { animation: scaleIn 0.2s ease backwards; }
+[data-animacija="blurIn"] .animiraj,
+[data-animacija="blurIn"] .tabela tbody tr,
+[data-animacija="blurIn"] .kartica.animiraj   { animation: blurIn var(--anim-trajanje) ease backwards; }
 
 [data-animacija="slideLeft"] .animiraj,
 [data-animacija="slideLeft"] .tabela tbody tr,
-[data-animacija="slideLeft"] .kartica.animiraj { animation: slideLeft 0.2s ease backwards; }
+[data-animacija="slideLeft"] .kartica.animiraj { animation: slideLeft var(--anim-trajanje) ease backwards; }
 
 /* Stepenasta (stagger) animacija redova u svim listama — JEDNO mesto za sve tabele.
    Animacija se primenjuje direktno na <tr> u .tabela, bez potrebe za .animiraj klasom.
    Mora biti u main.css: HTMX navigacija (hx-select) odbacuje <head>, pa
    stilovi iz page <style> blokova ne bi važili tokom navigacije. */
 .tabela tbody tr {
-    animation: fadeInUp 0.2s ease backwards;
+    animation: fadeInUp var(--anim-trajanje) ease backwards;
 }
 .tabela tbody tr:nth-child(1)  { animation-delay: 0.04s; }
 .tabela tbody tr:nth-child(2)  { animation-delay: 0.08s; }

web/static/css/teme/tamna.css

@@ -22,3 +22,6 @@
   --poruka-uspeh-bg: rgba(93, 184, 118, 0.15);
   --poruka-uspeh-boja: #5db876;
 }
+
+.toast-uspeh { background: #1a2e22; color: #5db876; border: 0.5px solid #2d5a3d; }
+.toast-greska { background: #2e1a1a; color: #e07070; border: 0.5px solid #5a2d2d; }

web/templates/stranice/profil_tema.html

@@ -83,24 +83,23 @@
 
         <form method="POST" action="/profil/animacija">
             <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
+            <input type="hidden" name="lokalna_brzina_animacije" id="brzina-hidden" value="{{if .LokalnaBrzinaAnimacije}}{{.LokalnaBrzinaAnimacije}}{{else}}0.4{{end}}">
             <div class="kolona" style="gap:16px;">
                 <div style="max-width:300px;">
                     <label class="polje-labela" for="anim-select">Vrsta animacije pri učitavanju</label>
-                    <select id="anim-select" name="lokalna_animacija" style="width:100%;" onchange="animPreview(this.value)"><!-- preview se primenjuje na wrapper, ne na body -->
+                    <select id="anim-select" name="lokalna_animacija" style="width:100%;" onchange="animPreview(this.value)">
                         <option value="" {{if eq .LokalnaAnimacija ""}}selected{{end}}>Podrazumevano (klizanje gore)</option>
                         <option value="bez" {{if eq .LokalnaAnimacija "bez"}}selected{{end}}>Bez animacije</option>
-                        <option value="fadeInUp" {{if eq .LokalnaAnimacija "fadeInUp"}}selected{{end}}>Klizanje gore (fadeInUp)</option>
-                        <option value="fadeIn" {{if eq .LokalnaAnimacija "fadeIn"}}selected{{end}}>Pojavljivanje (fadeIn)</option>
-                        <option value="scaleIn" {{if eq .LokalnaAnimacija "scaleIn"}}selected{{end}}>Zumiranje (scaleIn)</option>
-                        <option value="slideLeft" {{if eq .LokalnaAnimacija "slideLeft"}}selected{{end}}>Klizanje s leva (slideLeft)</option>
+                        <option value="fadeInUp" {{if eq .LokalnaAnimacija "fadeInUp"}}selected{{end}}>Klizanje gore</option>
+                        <option value="fadeIn" {{if eq .LokalnaAnimacija "fadeIn"}}selected{{end}}>Pojavljivanje</option>
+                        <option value="blurIn" {{if eq .LokalnaAnimacija "blurIn"}}selected{{end}}>Zamagljivanje</option>
+                        <option value="slideLeft" {{if eq .LokalnaAnimacija "slideLeft"}}selected{{end}}>Klizanje s leva</option>
                     </select>
                 </div>
 
                 <!-- preview -->
                 <div>
                     <div class="pomocni-tekst" style="margin-bottom:8px;">Pregled:</div>
-                    <!-- preview wrapper nosi data-animacija atribut; isti CSS [data-animacija] .animiraj
-                         koji radi globalno na body radi i ovde, ali izolovano — pogađa SAMO redove unutar wrappera -->
                     <div id="anim-preview-wrap" style="border:0.5px solid var(--ivica);border-radius:8px;overflow:hidden;max-width:340px;">
                         <table style="width:100%;border-collapse:collapse;">
                             <tbody id="anim-preview-body">
@@ -116,6 +115,20 @@
                     </button>
                 </div>
 
+                <!-- slider brzine unutar iste forme -->
+                <div style="max-width:340px;">
+                    <label class="polje-labela" for="brzina-slider">Trajanje efekta: <span id="brzina-labela">{{if .LokalnaBrzinaAnimacije}}{{.LokalnaBrzinaAnimacije}}s{{else}}0.4s{{end}}</span></label>
+                    <input type="range" id="brzina-slider"
+                        min="0.1" max="0.8" step="0.1"
+                        value="{{if .LokalnaBrzinaAnimacije}}{{.LokalnaBrzinaAnimacije}}{{else}}0.4{{end}}"
+                        style="width:100%;margin-top:8px;accent-color:var(--sb-akcent);"
+                        oninput="brzinaPromena(this.value)">
+                    <div style="display:flex;justify-content:space-between;margin-top:4px;">
+                        <span style="font-size:11px;color:var(--tekst-sporedni);">0.1s (brže)</span>
+                        <span style="font-size:11px;color:var(--tekst-sporedni);">0.8s (sporije)</span>
+                    </div>
+                </div>
+
                 <div>
                     <button type="submit" class="btn-primarno">Sačuvaj</button>
                 </div>
@@ -376,7 +389,7 @@ var animVrednosti = {
     'bez':       'bez',
     'fadeInUp':  'fadeInUp',
     'fadeIn':    'fadeIn',
-    'scaleIn':   'scaleIn',
+    'blurIn':    'blurIn',
     'slideLeft': 'slideLeft'
 };
 // postavlja data-animacija na PREVIEW wrapper (ne na body), pa CSS
@@ -385,10 +398,13 @@ function animPreview(val) {
     var wrap = document.getElementById('anim-preview-wrap');
     if (!wrap) return;
     var anim = animVrednosti[val] || 'fadeInUp';
-    // restartuj animaciju: skini atribut, izazovi reflow, pa ga vrati
+    // skini data-animacija i klasu animiraj sa redova da bi se animacija resetovala
     wrap.removeAttribute('data-animacija');
-    void wrap.offsetHeight; // reflow da bi se animacija ponovo okinula
+    var redovi = wrap.querySelectorAll('.animiraj');
+    redovi.forEach(function(r) { r.classList.remove('animiraj'); });
+    void wrap.offsetHeight; // reflow — bez ovoga browser spoji promene i ne restartuje
     wrap.setAttribute('data-animacija', anim);
+    redovi.forEach(function(r) { r.classList.add('animiraj'); });
 }
 // "Ponovi pregled" — ponovo okida animaciju za trenutno izabrani stil
 function animPreviewPonovi() {
@@ -399,5 +415,16 @@ function animPreviewPonovi() {
     var sel = document.getElementById('anim-select');
     if (sel) animPreview(sel.value);
 })();
+
+function brzinaPromena(val) {
+    var v = parseFloat(val).toFixed(1);
+    document.getElementById('brzina-hidden').value = v;
+    document.getElementById('brzina-labela').textContent = v + 's';
+    // primeni odmah — korisnik vidi efekat pre čuvanja
+    document.body.dataset.brzinaAnimacije = v;
+    // ažuriraj i preview wrapper da odmah odrazi novu brzinu
+    var wrap = document.getElementById('anim-preview-wrap');
+    if (wrap) wrap.style.setProperty('--anim-trajanje', v + 's');
+}
 </script>
 {{end}}

web/templates/stranice/servis_detalji.html

@@ -57,12 +57,16 @@
                 </div>
             </div>
             <div style="display:flex;gap:8px;flex-wrap:wrap;">
+                {{if not (or (eq .Nalog.Status "Završeno") (eq .Nalog.Status "Preuzeto"))}}
                 <a href="/servis/{{.Nalog.ID}}/stampa" target="_blank" class="btn-sekundarno">
                     Radni nalog
                 </a>
+                {{end}}
+                {{if or (eq .Nalog.Status "Završeno") (eq .Nalog.Status "Preuzeto")}}
                 <a href="/servis/{{.Nalog.ID}}/otpremnica" target="_blank" class="btn-sekundarno">
                     Otpremnica
                 </a>
+                {{end}}
                 <a href="/servis/izmeni/{{.Nalog.ID}}" class="btn-primarno">
                     Izmeni nalog
                 </a>

web/templates/teme/podrazumevana/base.html

@@ -110,7 +110,7 @@
     </script>
     {{end}}
   </head>
-  <body{{if .LokalnaAnimacija}} data-animacija="{{.LokalnaAnimacija}}"{{end}}{{if .LokalniHover}} data-hover="{{.LokalniHover}}"{{end}}>
+  <body{{if .LokalnaAnimacija}} data-animacija="{{.LokalnaAnimacija}}"{{end}}{{if .LokalniHover}} data-hover="{{.LokalniHover}}"{{end}}{{if .LokalnaBrzinaAnimacije}} data-brzina-animacije="{{.LokalnaBrzinaAnimacije}}"{{end}}>
     <div class="raspored">
       <div class="sidebar-overlay" id="sidebar-overlay"></div>
       {{template "sidebar" .}}
@@ -307,6 +307,8 @@
 
     function ntechInicijalizuj() {
         ntechKonvertujPoruke();
+
+
         var m = document.querySelector('meta[name="csrf-token"]');
         if (m && m.content) {
             document.querySelectorAll('form[method="POST"],form[method="post"]').forEach(function(f) {
@@ -323,14 +325,64 @@
                 e.preventDefault();
                 window._ntechPotvrdi(el.getAttribute('data-potvrda')).then(function(ok) {
                     if (!ok) return;
-                    // dugme unutar forme — submit forme
                     var forma = el.closest('form');
                     if (forma) { forma.submit(); return; }
-                    // link
                     if (el.href) { window.location.href = el.href; }
                 });
             });
         });
+
+        // AJAX submit — forme koje serveru vraćaju ?sacuvano= ostaju na stranici (scroll se ne gubi)
+        document.querySelectorAll('form[method="POST"],form[method="post"]').forEach(function(f) {
+            if (f._ajaxSave) return;
+            f._ajaxSave = true;
+            f.addEventListener('submit', function(e) {
+                // file upload i forme sa data-full-reload šalju se normalno
+                if (f.enctype === 'multipart/form-data' || f.dataset.fullReload) return;
+                e.preventDefault();
+                // prikazujemo dugme kao zauzeto
+                var btn = f.querySelector('[type="submit"]');
+                if (btn) btn.disabled = true;
+                // URLSearchParams šalje kao application/x-www-form-urlencoded
+                // što Go-ov r.FormValue() (i CSRF middleware) može da pročita
+                fetch(f.action || location.href, {
+                    method: 'POST',
+                    body: new URLSearchParams(new FormData(f)),
+                    redirect: 'follow'
+                }).then(function(res) {
+                    var finUrl = new URL(res.url);
+                    if (finUrl.search.indexOf('sacuvano') !== -1) {
+                        // uspeh — prikaži toast, ostani na stranici
+                        window.ntechToast('Sačuvano', 'uspeh');
+                        if (btn) btn.disabled = false;
+                        // odmah primeni podešavanja koja menjaju globalne atribute body-ja
+                        var anim = f.querySelector('[name="lokalna_animacija"]');
+                        if (anim) {
+                            if (anim.value) document.body.dataset.animacija = anim.value;
+                            else delete document.body.dataset.animacija;
+                        }
+                        var hov = f.querySelector('[name="lokalni_hover"]');
+                        if (hov) {
+                            if (hov.value) document.body.dataset.hover = hov.value;
+                            else delete document.body.dataset.hover;
+                        }
+                        var brzina = f.querySelector('[name="lokalna_brzina_animacije"]');
+                        if (brzina) {
+                            if (brzina.value) document.body.dataset.brzinaAnimacije = brzina.value;
+                            else delete document.body.dataset.brzinaAnimacije;
+                        }
+                        // promena teme zahteva reload (menja se ceo CSS fajl)
+                        if (f.querySelector('[name="lokalna_tema"]')) location.reload();
+                    } else {
+                        // greška ili redirect na drugu stranicu — navigiraj normalno
+                        location.href = res.url;
+                    }
+                }).catch(function() {
+                    // mrežna greška — pošalji formu normalno
+                    f.submit();
+                });
+            });
+        });
     }
     if (!window._ntechCsrfDodato) {
         window._ntechCsrfDodato = true;