Dasko/GoNtech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Podešavanja: pozadinska slika i glass efekt za aplikaciju sa live preview sliderom

Browse Source
This commit is contained in:
Dalibor Marković
2026-06-05 23:49:05 +02:00
parent 9af712edd3
commit 8def13e855
14 changed files with 685 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/stranice/podesavanja.html
+145
View File
@@ -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 -->
web/templates/stranice/prijava.html
+24
View File
@@ -14,7 +14,31 @@
align-items: center;
justify-content: center;
padding: 16px;
position: relative;
}
{{if .LoginPozadina}}
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url('{{.LoginPozadina}}');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}
body::after {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.40);
z-index: 1;
}
.kartica {
position: relative;
z-index: 2;
}
{{end}}
.kartica {
background: #1a1d27;
border: 0.5px solid #2d3148;
web/templates/stranice/servis_detalji.html
+8
View File
@@ -148,6 +148,14 @@
{{if .Nalog.Avans}}{{.Nalog.AvansStr}} din{{else}}—{{end}}
</div>
</div>
{{if .Nalog.PreostaloZaNaplatu}}
<div>
<div style="font-size:12px;color:var(--tekst-sporedni);margin-bottom:4px;">Preostalo za naplatu</div>
<div style="font-size:20px;font-weight:600;color:#16a34a;">
{{.Nalog.PreostaloZaNaplatuStr}} din
</div>
</div>
{{end}}
</div>
</div>