Podešavanja: pozadinska slika i glass efekt za aplikaciju sa live preview sliderom
This commit is contained in:
@@ -85,6 +85,151 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- pozadinska slika aplikacije — upload, preview i stilovi -->
|
||||
<div class="kartica animiraj" style="margin-bottom:16px;"
|
||||
x-data="{
|
||||
blur: Number('{{.AppPozadinaBlur}}'),
|
||||
opacity: Number('{{.AppPozadinaOpacity}}'),
|
||||
slika: '{{.AppPozadina}}'
|
||||
}">
|
||||
|
||||
<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 aplikacije</span>
|
||||
</div>
|
||||
|
||||
{{if .AppPozadina}}
|
||||
<div style="margin-bottom:14px;display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;">
|
||||
<img src="{{.AppPozadina}}" alt="Trenutna app pozadina"
|
||||
style="width:160px;height:90px;object-fit:cover;border:0.5px solid var(--ivica);border-radius:8px;">
|
||||
<form method="POST" action="/podesavanja/app-pozadina/ukloni" style="margin:0;">
|
||||
<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 aplikacije?">
|
||||
Ukloni sliku
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<form method="POST" action="/podesavanja/app-pozadina" enctype="multipart/form-data">
|
||||
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
|
||||
<input type="file" name="app_pozadina" accept=".jpg,.jpeg,.png,.webp"
|
||||
style="flex:1;min-width:200px;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;"
|
||||
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>
|
||||
|
||||
<!-- live preview -->
|
||||
<div style="margin-top:20px;padding-top:16px;border-top:0.5px solid var(--ivica);">
|
||||
<div style="font-size:13px;font-weight:500;color:var(--tekst-glavni);margin-bottom:10px;">Preview</div>
|
||||
|
||||
<!-- simulacija layouta aplikacije -->
|
||||
<div style="position:relative;width:100%;height:180px;border-radius:12px;overflow:hidden;"
|
||||
:style="slika ? `background:url('${slika}') center/cover` : 'background:#1a2033'">
|
||||
<!-- overlay -->
|
||||
<div style="position:absolute;inset:0;pointer-events:none;"
|
||||
:style="`background:rgba(0,0,0,${opacity}%)`"></div>
|
||||
<!-- lažni sidebar -->
|
||||
<div style="position:absolute;top:0;left:0;bottom:0;width:70px;display:flex;flex-direction:column;padding:10px 8px;gap:8px;"
|
||||
:style="`background:rgba(255,255,255,0.08);backdrop-filter:blur(${blur}px);-webkit-backdrop-filter:blur(${blur}px);border-right:1px solid rgba(255,255,255,0.12)`">
|
||||
<div style="width:38px;height:8px;background:rgba(255,255,255,0.35);border-radius:4px;"></div>
|
||||
<div style="margin-top:6px;display:flex;flex-direction:column;gap:6px;">
|
||||
<div style="width:30px;height:5px;background:rgba(255,255,255,0.2);border-radius:3px;"></div>
|
||||
<div style="width:26px;height:5px;background:rgba(255,255,255,0.14);border-radius:3px;"></div>
|
||||
<div style="width:32px;height:5px;background:rgba(255,255,255,0.14);border-radius:3px;"></div>
|
||||
<div style="width:22px;height:5px;background:rgba(255,255,255,0.14);border-radius:3px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- lažni glavni sadržaj -->
|
||||
<div style="position:absolute;top:0;left:70px;right:0;bottom:0;padding:7px;display:flex;flex-direction:column;gap:6px;">
|
||||
<!-- lažni topbar -->
|
||||
<div style="height:26px;border-radius:7px;flex-shrink:0;"
|
||||
:style="`background:rgba(255,255,255,0.08);backdrop-filter:blur(${blur}px);-webkit-backdrop-filter:blur(${blur}px);border:1px solid rgba(255,255,255,0.12)`"></div>
|
||||
<!-- lažne kartice -->
|
||||
<div style="display:flex;gap:6px;flex:1;">
|
||||
<div style="border-radius:7px;flex:1;"
|
||||
:style="`background:rgba(255,255,255,0.08);backdrop-filter:blur(${blur}px);-webkit-backdrop-filter:blur(${blur}px);border:1px solid rgba(255,255,255,0.12)`"></div>
|
||||
<div style="border-radius:7px;flex:1;"
|
||||
:style="`background:rgba(255,255,255,0.08);backdrop-filter:blur(${blur}px);-webkit-backdrop-filter:blur(${blur}px);border:1px solid rgba(255,255,255,0.12)`"></div>
|
||||
<div style="border-radius:7px;flex:1;"
|
||||
:style="`background:rgba(255,255,255,0.08);backdrop-filter:blur(${blur}px);-webkit-backdrop-filter:blur(${blur}px);border:1px solid rgba(255,255,255,0.12)`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- slideri -->
|
||||
<div style="margin-top:14px;display:flex;flex-direction:column;gap:10px;">
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||||
<span style="font-size:12px;color:var(--tekst-sporedni);">Zamućenje stakla</span>
|
||||
<span style="font-size:12px;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);height:4px;cursor:pointer;">
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
|
||||
<span style="font-size:12px;color:var(--tekst-sporedni);">Zatamnjivanje</span>
|
||||
<span style="font-size:12px;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);height:4px;cursor:pointer;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- forma za čuvanje vrednosti slidera -->
|
||||
<form method="POST" action="/podesavanja/app-pozadina/stilovi" style="margin-top:12px;">
|
||||
<input type="hidden" name="blur" :value="blur">
|
||||
<input type="hidden" name="opacity" :value="opacity">
|
||||
<button type="submit"
|
||||
style="padding:8px 20px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:opacity 0.2s;"
|
||||
onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">
|
||||
Sačuvaj izgled
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- pozadinska slika login stranice — posebna forma jer je multipart -->
|
||||
<form method="POST" action="/podesavanja/login-pozadina" enctype="multipart/form-data">
|
||||
<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" style="margin:0;">
|
||||
<button type="submit"
|
||||
style="padding:7px 14px;background:transparent;border:0.5px solid #fca5a5;border-radius:8px;color:#dc2626;font-size:12px;cursor:pointer;"
|
||||
onclick="return confirm('Ukloniti pozadinsku sliku?')">
|
||||
Ukloni sliku
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
|
||||
<input type="file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
|
||||
style="flex:1;min-width:200px;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;"
|
||||
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>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form method="POST" action="/podesavanja/sacuvaj">
|
||||
|
||||
<!-- sekcija: firma -->
|
||||
|
||||
Reference in New Issue
Block a user