GoNtech/web/templates/stranice/podesavanja_izgled.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; }
</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}}

    {{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;flex-wrap:wrap;">
                <input type="file" id="login-pozadina-file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
                    style="display:none;"
                    onchange="var s=document.getElementById('login-pozadina-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
                <label for="login-pozadina-file"
                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;flex-shrink:0;font-weight:500;">
                    Izaberi fajl
                </label>
                <span id="login-pozadina-ime" class="pomocni-tekst">Nijedan fajl nije izabran</span>
                <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="loginPozadinaPreview"
             data-blur-pozadine="{{.LoginPozadinaBlurPozadine}}"
             data-blur-kartice="{{.LoginPozadinaBlurKartice}}"
             data-opacity="{{.LoginPozadinaOpacity}}"
             data-zatamnjenje-kartice="{{.LoginPozadinaZatamnjenjeKartice}}"
             data-pozadina="{{.LoginPozadina}}"
             style="margin-top:20px;">

            <div style="position:relative;width:100%;height:220px;border-radius:8px;overflow:hidden;">
                <div :style="stilPozadine()"></div>
                <div :style="stilOverlay()"></div>
                <div style="position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;">
                    <div :style="stilKartice()">
                        <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 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 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"
                    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 kartice NTech</span>
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="zatamnjenjeKartice + '%'"></span>
                </div>
                <input type="range" x-model.number="zatamnjenjeKartice" min="0" max="80" step="1"
                    class="klizac">
            </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">
                <input type="hidden" name="zatamnjenje_kartice" :value="zatamnjenjeKartice">
                <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}}


</div>
{{end}}