Dasko
f29e76612e
Servis: - Nova polja: ostecenja, pin_uredjaja, pribor (migracija 051) - Default garancija iz podešavanja, svič "Bez garancije" u formi - Podešavanja → Servis: konfigurabilan rok garancije (migracija 052) - Default datum prijema = danas; datum_prijema se eksplicitno upisuje - Sidebar link za Servis podešavanja PDV/Nivelacije: - Default raspon datuma = početak/kraj tekućeg meseca (KIR, KPR, Nivelacije) - Dodata class="tabela" na tabele bez klase (KIR, KPR, Obračun, Nivelacije) Animacije (Moj profil → Tema): - Korisnik bira vrstu animacije: bez, fadeInUp, fadeIn, scaleIn, slideLeft - Čuva se po korisniku u korisnici.lokalna_animacija (migracija 053) - CSS [data-animacija] radi na body (globalno) i na preview wrapperima (izolovano) - Preview animacije izolovan: data-animacija na #anim-preview-wrap, ne na body - Mobilne kartice se animiraju kad korisnik odabere stil (podrazumevano ne) - Animacija primenjena direktno na .tabela tbody tr (bez potrebe za .animiraj) Hover efekti (Moj profil → Tema): - Opcije: podrazumevano, bez, podizanje, svetlost, zoom, boja - Čuva se po korisniku u korisnici.lokalni_hover (migracija 054) - CSS [data-hover] radi izolovano; preview menja samo #hover-preview-wrap - Pojačane senke u oba teme (--senka i nova --senka-hover promenljiva) - Transition dodat za transform i background na karticama Grafikon (Izveštaji): toggle zamenjen globalnim .toggl/.toggl-klizac svičom
404 lines
26 KiB
HTML
404 lines
26 KiB
HTML
{{template "base" .}}
|
|
|
|
{{define "naslov"}}Moja tema — NTech{{end}}
|
|
|
|
{{define "sadrzaj"}}
|
|
<div class="stranica-stack" style="width:100%;max-width:100%;">
|
|
|
|
<!-- kartica: moja tema -->
|
|
<div class="kartica animiraj" x-data="profilTemaOdabir" data-tema="{{if .LokalnaTema}}{{.LokalnaTema}}{{else}}tamna{{end}}" style="margin-bottom:16px;">
|
|
<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);">
|
|
Moja tema
|
|
</div>
|
|
|
|
{{if .LokalnaPozadina}}
|
|
<!-- lična pozadina je aktivna — tamna tema se forsira automatski -->
|
|
<div class="info-banner" style="display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(99,102,241,0.10);border:0.5px solid rgba(99,102,241,0.3);border-radius:8px;margin-bottom:14px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
|
<div>
|
|
<div style="font-size:13px;color:var(--tekst-glavni);font-weight:500;">Tamna tema je aktivna</div>
|
|
<div style="font-size:12px;color:var(--tekst-sporedni);margin-top:2px;">Lična pozadinska slika automatski primenjuje tamnu temu.</div>
|
|
</div>
|
|
</div>
|
|
<form method="POST" action="/profil/tema">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<!-- kada postoji lična pozadina, uvek čuvamo lokalni režim kako bi tema bila primenjena po uklanjanju pozadine -->
|
|
<input type="hidden" name="koristi_lokalnu_temu" value="1">
|
|
<div style="padding:12px;background:var(--pozadina);border-radius:8px;border:0.5px solid var(--ivica);">
|
|
<div style="font-size:13px;color:var(--tekst-sporedni);margin-bottom:10px;">Tema po uklanjanju pozadine:</div>
|
|
<div style="display:flex;gap:16px;">
|
|
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--tekst-glavni);">
|
|
<input type="radio" name="lokalna_tema" value="tamna" x-model="tema">
|
|
Tamna
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--tekst-glavni);">
|
|
<input type="radio" name="lokalna_tema" value="svetla" x-model="tema">
|
|
Svetla
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:12px;">
|
|
<button type="submit"
|
|
style="padding:9px 20px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;">
|
|
Sačuvaj
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{{else}}
|
|
<!-- nema lične pozadine — direktan izbor između tamne i svetle teme -->
|
|
<form method="POST" action="/profil/tema">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<input type="hidden" name="koristi_lokalnu_temu" value="1">
|
|
<div class="kolona" style="gap:14px;">
|
|
<div style="padding:12px;background:var(--pozadina);border-radius:8px;border:0.5px solid var(--ivica);">
|
|
<div style="font-size:13px;color:var(--tekst-sporedni);margin-bottom:10px;">Izaberite temu:</div>
|
|
<div style="display:flex;gap:16px;">
|
|
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--tekst-glavni);">
|
|
<input type="radio" name="lokalna_tema" value="tamna" x-model="tema">
|
|
Tamna
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--tekst-glavni);">
|
|
<input type="radio" name="lokalna_tema" value="svetla" x-model="tema">
|
|
Svetla
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button type="submit"
|
|
style="padding:9px 20px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;">
|
|
Sačuvaj
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{end}}
|
|
</div>
|
|
|
|
<!-- kartica: animacije -->
|
|
<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="M5 12s2.545-5 7-5c4.454 0 7 5 7 5s-2.546 5-7 5c-4.455 0-7-5-7-5z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Animacije tabela</span>
|
|
</div>
|
|
|
|
<form method="POST" action="/profil/animacija">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<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 -->
|
|
<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>
|
|
</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">
|
|
<tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);"><td style="padding:8px 12px;font-size:13px;color:var(--tekst-glavni);">Laptop HP 840</td><td style="padding:8px 12px;text-align:right;font-size:13px;color:var(--tekst-sporedni);">120.000 din</td></tr>
|
|
<tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);animation-delay:0.08s;"><td style="padding:8px 12px;font-size:13px;color:var(--tekst-glavni);">iPhone 14 Pro</td><td style="padding:8px 12px;text-align:right;font-size:13px;color:var(--tekst-sporedni);">95.000 din</td></tr>
|
|
<tr class="animiraj" style="animation-delay:0.16s;"><td style="padding:8px 12px;font-size:13px;color:var(--tekst-glavni);">Samsung S24</td><td style="padding:8px 12px;text-align:right;font-size:13px;color:var(--tekst-sporedni);">80.000 din</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<button type="button" onclick="animPreviewPonovi()"
|
|
style="margin-top:8px;padding:6px 14px;background:var(--pozadina);border:0.5px solid var(--ivica);border-radius:8px;font-size:12px;color:var(--tekst-sporedni);cursor:pointer;">
|
|
Ponovi pregled
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="submit" class="btn-primarno">Sačuvaj</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- kartica: hover efekat -->
|
|
<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="M5 3l14 9-7 1-4 7z"/></svg>
|
|
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Hover efekat kartica</span>
|
|
</div>
|
|
|
|
<form method="POST" action="/profil/hover">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<div class="kolona" style="gap:16px;">
|
|
<div style="max-width:300px;">
|
|
<label class="polje-labela" for="hover-select">Efekat pri prelasku mišem</label>
|
|
<select id="hover-select" name="lokalni_hover" style="width:100%;" onchange="hoverPreview(this.value)">
|
|
<option value="" {{if eq .LokalniHover ""}}selected{{end}}>Podrazumevano (senka + ivica)</option>
|
|
<option value="bez" {{if eq .LokalniHover "bez"}}selected{{end}}>Bez efekta</option>
|
|
<option value="podizanje" {{if eq .LokalniHover "podizanje"}}selected{{end}}>Podizanje (lift)</option>
|
|
<option value="svetlost" {{if eq .LokalniHover "svetlost"}}selected{{end}}>Svetlost ivice (akcent)</option>
|
|
<option value="zoom" {{if eq .LokalniHover "zoom"}}selected{{end}}>Zoom (uvećanje)</option>
|
|
<option value="boja" {{if eq .LokalniHover "boja"}}selected{{end}}>Boja pozadine (akcent)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- preview -->
|
|
<div>
|
|
<div class="pomocni-tekst" style="margin-bottom:8px;">Pregled — pređi mišem:</div>
|
|
<div id="hover-preview-wrap" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;max-width:380px;">
|
|
<div id="hprev1" class="kartica" style="padding:12px;cursor:default;min-height:64px;display:flex;flex-direction:column;gap:4px;">
|
|
<div style="font-size:11px;color:var(--tekst-sporedni);">Artikli</div>
|
|
<div style="font-size:18px;font-weight:600;color:var(--tekst-glavni);">1.284</div>
|
|
</div>
|
|
<div id="hprev2" class="kartica" style="padding:12px;cursor:default;min-height:64px;display:flex;flex-direction:column;gap:4px;">
|
|
<div style="font-size:11px;color:var(--tekst-sporedni);">Servis</div>
|
|
<div style="font-size:18px;font-weight:600;color:var(--tekst-glavni);">47</div>
|
|
</div>
|
|
<div id="hprev3" class="kartica" style="padding:12px;cursor:default;min-height:64px;display:flex;flex-direction:column;gap:4px;">
|
|
<div style="font-size:11px;color:var(--tekst-sporedni);">Prihod</div>
|
|
<div style="font-size:18px;font-weight:600;color:var(--tekst-glavni);">+12%</div>
|
|
</div>
|
|
</div>
|
|
<div class="pomocni-tekst" style="margin-top:6px;font-size:11px;">Efekat se primenjuje odmah pri odabiru.</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="submit" class="btn-primarno">Sačuvaj</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- kartica: moj avatar -->
|
|
<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="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Moj avatar</span>
|
|
</div>
|
|
|
|
<div style="display:flex;align-items:center;gap:16px;margin-bottom:16px;">
|
|
<div style="width:64px;height:64px;border-radius:10px;overflow:hidden;border:0.5px solid var(--ivica);flex-shrink:0;background:var(--pozadina);display:flex;align-items:center;justify-content:center;">
|
|
{{if .AvatarPutanja}}
|
|
<img src="{{.AvatarPutanja}}" alt="Moj avatar" style="width:100%;height:100%;object-fit:cover;">
|
|
{{else}}
|
|
<span style="font-size:22px;font-weight:600;color:var(--tekst-sporedni);">{{if .KorisnikIme}}{{slice .KorisnikIme 0 2}}{{else}}NT{{end}}</span>
|
|
{{end}}
|
|
</div>
|
|
<div style="font-size:13px;color:var(--tekst-sporedni);line-height:1.5;">
|
|
Slika se prikazuje kao dugme u gornjoj traci.<br>
|
|
Dozvoljeni formati: JPG, PNG, WebP. Maksimum 2 MB.
|
|
</div>
|
|
</div>
|
|
|
|
{{if .AvatarPutanja}}
|
|
<form method="POST" action="/profil/avatar/ukloni" style="display:inline;margin-bottom:12px;">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<button type="submit" style="background:none;border:0.5px solid #dc2626;color:#dc2626;padding:6px 14px;border-radius:8px;font-size:13px;cursor:pointer;margin-bottom:12px;">
|
|
Ukloni avatar
|
|
</button>
|
|
</form>
|
|
{{end}}
|
|
|
|
<form method="POST" action="/profil/avatar" enctype="multipart/form-data">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
|
|
<input type="file" id="avatar-file" name="avatar" accept=".jpg,.jpeg,.png,.webp"
|
|
style="display:none;" onchange="document.getElementById('avatar-ime').textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
|
|
<label for="avatar-file"
|
|
style="display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:0.5px solid var(--ivica);border-radius:8px;cursor:pointer;font-size:13px;color:var(--tekst-glavni);background:var(--pozadina);">
|
|
Izaberi sliku
|
|
</label>
|
|
<span id="avatar-ime" class="pomocni-tekst">Nijedan fajl nije izabran</span>
|
|
<button type="submit"
|
|
style="background:var(--sb-akcent);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;">
|
|
Otpremi avatar
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- kartica: moja pozadinska slika -->
|
|
<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);">Moja pozadinska slika</span>
|
|
</div>
|
|
|
|
{{if .LokalnaPozadina}}
|
|
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
|
|
<img src="{{.LokalnaPozadina}}" alt="Trenutna lična pozadina"
|
|
style="width:120px;height:70px;object-fit:cover;border-radius:6px;border:0.5px solid var(--ivica);flex-shrink:0;">
|
|
<form method="POST" action="/profil/pozadina/ukloni">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<button type="submit"
|
|
class="btn-obrisi-ghost" style="padding:7px 14px;border-radius:8px;font-size:13px;"
|
|
data-potvrda="Ukloniti ličnu pozadinsku sliku?">
|
|
Ukloni
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
|
|
<form method="POST" action="/profil/pozadina" enctype="multipart/form-data">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;">
|
|
<input type="file" id="lok-bg-file" name="lokalna_pozadina" accept=".jpg,.jpeg,.png,.webp"
|
|
style="display:none;"
|
|
onchange="var s=document.getElementById('lok-bg-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
|
|
<label for="lok-bg-file"
|
|
style="display:inline-flex;align-items:center;padding:8px 14px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;user-select:none;font-weight:500;">
|
|
Izaberi fajl
|
|
</label>
|
|
<span id="lok-bg-ime" class="pomocni-tekst">Nijedan fajl nije izabran</span>
|
|
<button type="submit"
|
|
style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;">
|
|
Otpremi sliku
|
|
</button>
|
|
</div>
|
|
<div class="pomocni-tekst" style="font-size:12px;">JPG, PNG ili WebP — maksimum 5 MB</div>
|
|
</form>
|
|
|
|
<div x-data="lokalnaPozadinaPreview"
|
|
data-blur="{{.LokalnaPozadinaBlur}}"
|
|
data-opacity="{{.LokalnaPozadinaOpacity}}"
|
|
data-blur-pozadine="{{.LokalnaPozadinaBlurPozadine}}"
|
|
data-glass-opacity="{{.LokalnaPozadinaGlassOpacity}}"
|
|
data-pozadina="{{.LokalnaPozadina}}"
|
|
style="margin-top:20px;">
|
|
|
|
<div style="position:relative;width:100%;height:180px;border-radius:8px;overflow:hidden;">
|
|
<div :style="stilPozadine()"></div>
|
|
<div :style="stilOverlay()"></div>
|
|
<div :style="stilSidebar()">
|
|
<div style="width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.25);flex-shrink:0;"></div>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.85)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.85)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.85)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
|
|
</div>
|
|
<div style="position:absolute;top:12px;left:68px;right:12px;z-index:2;display:flex;flex-direction:column;gap:7px;">
|
|
<div :style="stilKartica()">
|
|
<div style="display:block;font-size:9px;color:white;opacity:0.7;line-height:1.2;">Artikli</div>
|
|
<div style="display:block;font-size:13px;color:white;font-weight:500;line-height:1.3;">1.284</div>
|
|
</div>
|
|
<div :style="stilKartica()">
|
|
<div style="display:block;font-size:9px;color:white;opacity:0.7;line-height:1.2;">Servis</div>
|
|
<div style="display:block;font-size:13px;color:white;font-weight:500;line-height:1.3;">47</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top:16px;">
|
|
<div class="red-izmedju" style="margin-bottom:6px;">
|
|
<span class="pomocni-tekst">Zamućenje pozadine</span>
|
|
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
|
|
</div>
|
|
<input type="range" x-model.number="blurPozadine" min="0" max="20" step="1"
|
|
class="klizac">
|
|
</div>
|
|
<div style="margin-top:12px;">
|
|
<div class="red-izmedju" style="margin-bottom:6px;">
|
|
<span class="pomocni-tekst">Zamućenje stakla</span>
|
|
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blur + 'px'"></span>
|
|
</div>
|
|
<input type="range" x-model.number="blur" min="0" max="20" step="1"
|
|
class="klizac">
|
|
</div>
|
|
<div style="margin-top:12px;">
|
|
<div class="red-izmedju" style="margin-bottom:6px;">
|
|
<span class="pomocni-tekst">Zatamnjivanje pozadine</span>
|
|
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
|
|
</div>
|
|
<input type="range" x-model.number="opacity" min="0" max="80" step="1"
|
|
class="klizac">
|
|
</div>
|
|
<div style="margin-top:12px;">
|
|
<div class="red-izmedju" style="margin-bottom:6px;">
|
|
<span class="pomocni-tekst">Zatamnjivanje stakla</span>
|
|
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="glassOpacity + '%'"></span>
|
|
</div>
|
|
<input type="range" x-model.number="glassOpacity" min="0" max="80" step="1"
|
|
class="klizac">
|
|
</div>
|
|
<form method="POST" action="/profil/pozadina/stilovi" style="margin-top:16px;">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<input type="hidden" name="lokalna_pozadina_opacity" :value="opacity">
|
|
<input type="hidden" name="lokalna_pozadina_blur" :value="blur">
|
|
<input type="hidden" name="lokalna_pozadina_blur_pozadine" :value="blurPozadine">
|
|
<input type="hidden" name="lokalna_pozadina_glass_opacity" :value="glassOpacity">
|
|
<button type="submit"
|
|
style="padding:9px 22px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;">
|
|
Sačuvaj izgled
|
|
</button>
|
|
</form>
|
|
|
|
</div><!-- /x-data -->
|
|
</div>
|
|
|
|
{{if index .Dozvole "podesavanja.login_pozadina"}}
|
|
<!-- kartica: pozadinska slika prijave — samo za admin/superadmin -->
|
|
<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);">Pozadinska slika prijave</span>
|
|
</div>
|
|
<p style="font-size:13px;color:var(--tekst-sporedni);margin:0 0 12px;">
|
|
Ova slika se prikazuje na stranici za prijavu svim korisnicima.
|
|
Podešavanja su dostupna u
|
|
<a href="/admin/podesavanja/izgled" style="color:var(--sb-akcent);text-decoration:none;">Podešavanjima → Izgled</a>.
|
|
</p>
|
|
</div>
|
|
{{end}}
|
|
|
|
</div>
|
|
<script>
|
|
function hoverPreview(val) {
|
|
var wrap = document.getElementById('hover-preview-wrap');
|
|
if (!wrap) return;
|
|
if (val === '') {
|
|
wrap.removeAttribute('data-hover');
|
|
} else {
|
|
wrap.setAttribute('data-hover', val);
|
|
}
|
|
}
|
|
// inicijalizuj preview na osnovu trenutnog odabira pri učitavanju
|
|
(function() {
|
|
var sel = document.getElementById('hover-select');
|
|
if (sel) hoverPreview(sel.value);
|
|
})();
|
|
|
|
// mapiranje vrednosti dropdowna na vrednost data-animacija atributa.
|
|
// prazna vrednost ("Podrazumevano") odgovara fadeInUp — istom podrazumevanom stilu.
|
|
var animVrednosti = {
|
|
'': 'fadeInUp',
|
|
'bez': 'bez',
|
|
'fadeInUp': 'fadeInUp',
|
|
'fadeIn': 'fadeIn',
|
|
'scaleIn': 'scaleIn',
|
|
'slideLeft': 'slideLeft'
|
|
};
|
|
// postavlja data-animacija na PREVIEW wrapper (ne na body), pa CSS
|
|
// [data-animacija] .animiraj radi izolovano — samo nad redovima preview tabele.
|
|
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
|
|
wrap.removeAttribute('data-animacija');
|
|
void wrap.offsetHeight; // reflow da bi se animacija ponovo okinula
|
|
wrap.setAttribute('data-animacija', anim);
|
|
}
|
|
// "Ponovi pregled" — ponovo okida animaciju za trenutno izabrani stil
|
|
function animPreviewPonovi() {
|
|
animPreview(document.getElementById('anim-select').value);
|
|
}
|
|
// inicijalizuj preview na osnovu sačuvane preferencije pri učitavanju stranice
|
|
(function() {
|
|
var sel = document.getElementById('anim-select');
|
|
if (sel) animPreview(sel.value);
|
|
})();
|
|
</script>
|
|
{{end}}
|