276 lines
20 KiB
HTML
276 lines
20 KiB
HTML
{{template "base" .}}
|
|
|
|
{{define "naslov"}}Podešavanja — Izgled — 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; }
|
|
|
|
.app-poz-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 680px) {
|
|
.app-poz-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
{{end}}
|
|
|
|
{{define "sadrzaj"}}
|
|
<div style="width:100%;max-width:100%;">
|
|
|
|
{{if .Sacuvano}}
|
|
<div class="poruka-uspeh">Podešavanja su uspešno sačuvana.</div>
|
|
{{end}}
|
|
|
|
<!-- pozadinska slika aplikacije -->
|
|
<div class="kartica animiraj" 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);">
|
|
Pozadinska slika aplikacije
|
|
</div>
|
|
|
|
{{if .AppPozadina}}
|
|
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
|
|
<img src="{{.AppPozadina}}" alt="Trenutna 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="/podesavanja/app-pozadina/ukloni">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<button type="submit"
|
|
style="padding:7px 14px;background:transparent;border:0.5px solid #fca5a5;border-radius:8px;color:#dc2626;font-size:13px;cursor:pointer;"
|
|
data-potvrda="Ukloniti pozadinsku sliku aplikacije?">
|
|
Ukloni
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
|
|
<form method="POST" action="/podesavanja/app-pozadina" enctype="multipart/form-data">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
|
<input type="file" id="app-bg-file" name="app_pozadina" accept=".jpg,.jpeg,.png,.webp"
|
|
style="display:none;">
|
|
<label for="app-bg-file"
|
|
style="display:inline-flex;align-items:center;padding:8px 14px;background:var(--pozadina);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;color:var(--tekst-sporedni);cursor:pointer;user-select:none;">
|
|
Odaberi sliku
|
|
</label>
|
|
<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 style="font-size:12px;color:var(--tekst-sporedni);">JPG, PNG ili WebP — maksimum 5 MB</div>
|
|
</form>
|
|
|
|
<div x-data="{ blur: {{.AppPozadinaBlur}}, blurPozadine: {{.AppPozadinaBlurPozadine}}, opacity: {{.AppPozadinaOpacity}} }"
|
|
style="margin-top:20px;">
|
|
|
|
<div style="position:relative;width:100%;height:200px;border-radius:8px;overflow:hidden;">
|
|
<div :style="`position:absolute;inset:${blurPozadine > 0 ? '-20px' : '0'};{{if .AppPozadina}}background:url('{{.AppPozadina}}') center/cover;{{else}}background:#1a2033;{{end}}filter:blur(${blurPozadine}px);z-index:0;`"></div>
|
|
<div :style="`position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,${opacity/100})`"></div>
|
|
<div :style="`position:absolute;top:0;left:0;bottom:0;z-index:2;width:56px;background:rgba(255,255,255,0.10);backdrop-filter:blur(${blur}px);-webkit-backdrop-filter:blur(${blur}px);border-right:1px solid rgba(255,255,255,0.15);display:flex;flex-direction:column;align-items:center;padding-top:10px;gap:12px`">
|
|
<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="M3 7h18M5 7l-2 14h18L19 7M9 7V5a3 3 0 016 0v2M9 21v-4h6v4"/></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;"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></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>
|
|
<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="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
|
|
</div>
|
|
<div style="position:absolute;top:12px;left:68px;right:12px;z-index:2;display:flex;flex-direction:column;gap:7px;">
|
|
<div :style="`height:40px;border-radius:6px;background:rgba(255,255,255,0.10);backdrop-filter:blur(${blur}px);-webkit-backdrop-filter:blur(${blur}px);border:1px solid rgba(255,255,255,0.15);display:flex;flex-direction:column;justify-content:center;padding:0 10px`">
|
|
<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="`height:40px;border-radius:6px;background:rgba(255,255,255,0.10);backdrop-filter:blur(${blur}px);-webkit-backdrop-filter:blur(${blur}px);border:1px solid rgba(255,255,255,0.15);display:flex;flex-direction:column;justify-content:center;padding:0 10px`">
|
|
<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 :style="`height:40px;border-radius:6px;background:rgba(255,255,255,0.10);backdrop-filter:blur(${blur}px);-webkit-backdrop-filter:blur(${blur}px);border:1px solid rgba(255,255,255,0.15);display:flex;flex-direction:column;justify-content:center;padding:0 10px`">
|
|
<div style="display:block;font-size:9px;color:white;opacity:0.7;line-height:1.2;">Prihodi</div>
|
|
<div style="display:block;font-size:13px;color:white;font-weight:500;line-height:1.3;">284.500</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top:16px;">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
|
<span style="font-size:13px;color:var(--tekst-sporedni);">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"
|
|
style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
|
|
</div>
|
|
<div style="margin-top:12px;">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
|
<span style="font-size:13px;color:var(--tekst-sporedni);">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"
|
|
style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
|
|
</div>
|
|
<div style="margin-top:12px;">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
|
<span style="font-size:13px;color:var(--tekst-sporedni);">Zatamnjivanje</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"
|
|
style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
|
|
</div>
|
|
<form method="POST" action="/podesavanja/app-pozadina/stilovi" style="margin-top:16px;">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<input type="hidden" name="blur" :value="blur">
|
|
<input type="hidden" name="blur_pozadine" :value="blurPozadine">
|
|
<input type="hidden" name="opacity" :value="opacity">
|
|
<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"}}
|
|
<!-- pozadinska slika login stranice -->
|
|
<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>
|
|
{{if .LoginPozadina}}
|
|
<div style="margin-bottom:14px;display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;">
|
|
<img src="{{.LoginPozadina}}" alt="Trenutna pozadina"
|
|
style="width:160px;height:90px;object-fit:cover;border:0.5px solid var(--ivica);border-radius:8px;">
|
|
<form method="POST" action="/podesavanja/login-pozadina/ukloni">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<button type="submit"
|
|
style="padding:7px 14px;background:transparent;border:0.5px solid #fca5a5;border-radius:8px;color:#dc2626;font-size:12px;cursor:pointer;"
|
|
data-potvrda="Ukloniti pozadinsku sliku?">
|
|
Ukloni sliku
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
<form method="POST" action="/podesavanja/login-pozadina" enctype="multipart/form-data">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<input type="file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
|
|
style="font-size:13px;color:var(--tekst-sporedni);">
|
|
<button type="submit"
|
|
style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;flex-shrink:0;"
|
|
onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
|
|
Otpremi sliku
|
|
</button>
|
|
</div>
|
|
<div style="font-size:12px;color:var(--tekst-sporedni);margin-top:6px;">JPG, PNG ili WebP — maksimum 5 MB</div>
|
|
</form>
|
|
|
|
<div x-data="{ blurPozadine: {{.LoginPozadinaBlurPozadine}}, blurKartice: {{.LoginPozadinaBlurKartice}}, opacity: {{.LoginPozadinaOpacity}} }"
|
|
style="margin-top:20px;">
|
|
|
|
<div style="position:relative;width:100%;height:220px;border-radius:8px;overflow:hidden;">
|
|
<div :style="`position:absolute;inset:${blurPozadine > 0 ? '-20px' : '0'};{{if .LoginPozadina}}background:url('{{.LoginPozadina}}') center/cover;{{else}}background:#1a2033;{{end}}filter:blur(${blurPozadine}px);z-index:0;`"></div>
|
|
<div :style="`position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,${opacity/100})`"></div>
|
|
<div style="position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;">
|
|
<div :style="`width:140px;border-radius:10px;background:rgba(255,255,255,0.08);backdrop-filter:blur(${blurKartice}px);-webkit-backdrop-filter:blur(${blurKartice}px);border:1px solid rgba(255,255,255,0.18);box-shadow:0 8px 32px rgba(0,0,0,0.3);padding:14px 16px;`">
|
|
<div style="font-size:11px;font-weight:600;color:white;text-align:center;margin-bottom:10px;letter-spacing:-0.2px;">NTech</div>
|
|
<div style="height:20px;background:rgba(255,255,255,0.1);border-radius:5px;margin-bottom:7px;border:0.5px solid rgba(255,255,255,0.15);"></div>
|
|
<div style="height:20px;background:rgba(255,255,255,0.1);border-radius:5px;margin-bottom:10px;border:0.5px solid rgba(255,255,255,0.15);"></div>
|
|
<div style="height:22px;background:#e53e3e;border-radius:5px;opacity:0.85;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top:16px;">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
|
<span style="font-size:13px;color:var(--tekst-sporedni);">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"
|
|
style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
|
|
</div>
|
|
<div style="margin-top:12px;">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
|
<span style="font-size:13px;color:var(--tekst-sporedni);">Zamućenje kartice (glass)</span>
|
|
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurKartice + 'px'"></span>
|
|
</div>
|
|
<input type="range" x-model.number="blurKartice" min="0" max="20" step="1"
|
|
style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
|
|
</div>
|
|
<div style="margin-top:12px;">
|
|
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
|
|
<span style="font-size:13px;color:var(--tekst-sporedni);">Zatamnjivanje</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"
|
|
style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
|
|
</div>
|
|
<form method="POST" action="/podesavanja/login-pozadina/stilovi" style="margin-top:16px;">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<input type="hidden" name="blur_pozadine" :value="blurPozadine">
|
|
<input type="hidden" name="blur_kartice" :value="blurKartice">
|
|
<input type="hidden" name="opacity" :value="opacity">
|
|
<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>
|
|
{{end}}
|
|
|
|
{{if index .Dozvole "tema.globalno"}}
|
|
<!-- globalna tema -->
|
|
<form method="POST" action="/podesavanja/sacuvaj">
|
|
<input type="hidden" name="_next" value="/admin/podesavanja/izgled">
|
|
<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);">Globalna tema</span>
|
|
</div>
|
|
<div style="font-size:13px;color:var(--tekst-sporedni);margin-bottom:12px;">Primenuje se na sve korisnike koji ne koriste svoju lokalnu temu.</div>
|
|
|
|
<div>
|
|
<div class="teme-grid" style="display:flex;gap:10px;">
|
|
<label style="display:flex;align-items:center;gap:8px;padding:10px 14px;border:0.5px solid var(--ivica);border-radius:8px;cursor:pointer;flex:1;{{if eq .GlobalnaTema "tamna"}}border-color:var(--sb-akcent);{{end}}">
|
|
<input type="radio" name="globalna_tema" value="tamna" {{if eq .GlobalnaTema "tamna"}}checked{{end}} style="accent-color:var(--sb-akcent);">
|
|
<div style="width:16px;height:16px;border-radius:50%;background:#1a1d27;flex-shrink:0;"></div>
|
|
<span style="font-size:13px;color:var(--tekst-glavni);">Tamna</span>
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;padding:10px 14px;border:0.5px solid var(--ivica);border-radius:8px;cursor:pointer;flex:1;{{if eq .GlobalnaTema "svetla"}}border-color:var(--sb-akcent);{{end}}">
|
|
<input type="radio" name="globalna_tema" value="svetla"
|
|
{{if eq .GlobalnaTema "svetla"}}checked{{end}}
|
|
style="accent-color:var(--sb-akcent);">
|
|
<div style="width:16px;height:16px;border-radius:50%;background:#f0f2f5;border:0.5px solid #e2e6ed;flex-shrink:0;"></div>
|
|
<span style="font-size:13px;color:var(--tekst-glavni);">Svetla</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;justify-content:flex-end;gap:10px;margin-top:20px;">
|
|
<button type="submit" formaction="/podesavanja/tema/globalno"
|
|
style="background:transparent;color:var(--sb-akcent);border:0.5px solid var(--sb-akcent);padding:10px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:opacity 0.2s;"
|
|
onmouseover="this.style.opacity='0.75'" onmouseout="this.style.opacity='1'"
|
|
title="Primeni ovu temu na sve korisnike, poništi njihove lokalne teme">
|
|
Primeni globalno
|
|
</button>
|
|
<button type="submit"
|
|
style="background:var(--sb-akcent);color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:opacity 0.2s;"
|
|
onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">
|
|
Sačuvaj
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{{end}}
|
|
|
|
</div>
|
|
{{end}}
|