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

Podešavanja: glass efekt, pozadinska slika aplikacije, preview panel sa slajderima

Browse Source
This commit is contained in:
Dalibor Marković
2026-06-06 01:02:53 +02:00
parent 8def13e855
commit c4dfdd3d58
5 changed files with 146 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/komponente/topbar.html
+18 -1
View File
@@ -21,7 +21,7 @@
<div class="avatar-korisnik" id="avatar-dugme" style="cursor:pointer;" title="{{.Korisnik}}">
{{if .Korisnik}}{{slice .Korisnik 0 2}}{{else}}NT{{end}}
</div>
<div id="avatar-meni" style="display:none;position:absolute;right:0;top:calc(100% + 8px);background:var(--kartica);border:0.5px solid var(--ivica);border-radius:10px;box-shadow:var(--senka);min-width:160px;z-index:200;overflow:hidden;transform-origin:top right;">
<div id="avatar-meni" style="display:none;position:fixed;background:var(--kartica);backdrop-filter:none;-webkit-backdrop-filter:none;border:0.5px solid var(--ivica);border-radius:10px;box-shadow:var(--senka);min-width:160px;z-index:9999;overflow:hidden;transform-origin:top right;">
<a href="/admin/profil" style="display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;color:var(--tekst-glavni);text-decoration:none;transition:background 0.15s;"
onmouseover="this.style.background='var(--pozadina)'" onmouseout="this.style.background=''">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
@@ -46,18 +46,35 @@
(function() {
var dugme = document.getElementById('avatar-dugme');
var meni = document.getElementById('avatar-meni');
// premesti meni na kraj body — izlazi iz stacking contexta topbara
document.body.appendChild(meni);
function pozicioniraj() {
var r = dugme.getBoundingClientRect();
meni.style.top = (r.bottom + 8) + 'px';
meni.style.right = (window.innerWidth - r.right) + 'px';
meni.style.left = 'auto';
}
dugme.addEventListener('click', function(e) {
e.stopPropagation();
if (meni.style.display === 'none' || meni.style.display === '') {
pozicioniraj();
meni.style.display = 'block';
meni.style.animation = 'avatarMeniOtvori 0.15s ease both';
} else {
meni.style.display = 'none';
}
});
document.addEventListener('click', function() {
meni.style.display = 'none';
});
window.addEventListener('resize', function() {
if (meni.style.display !== 'none') pozicioniraj();
});
})();
</script>
{{end}}
web/templates/stranice/podesavanja.html
+111 -77
View File
@@ -9,6 +9,36 @@
.animiraj:nth-child(3) { animation-delay: 0.22s; }
.animiraj:nth-child(4) { animation-delay: 0.28s; }
/* dvostupčani raspored za app pozadinu */
.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; }
}
/* custom file input */
.custom-file-label {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--pozadina);
border: 0.5px solid var(--ivica);
border-radius: 8px;
font-size: 13px;
color: var(--tekst-sporedni);
cursor: pointer;
transition: border-color 0.2s;
min-width: 0;
overflow: hidden;
}
.custom-file-label:hover { border-color: var(--sb-akcent); color: var(--tekst-glavni); }
.custom-file-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast {
position: fixed;
bottom: 24px;
@@ -85,115 +115,119 @@
</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}}'
}">
<!-- pozadinska slika aplikacije -->
<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 aplikacije</span>
<!-- naslov sekcije -->
<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>
<!-- thumbnail trenutne slike + brisanje -->
{{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;">
<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:12px;cursor:pointer;"
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 sliku
Ukloni
</button>
</form>
</div>
{{end}}
<!-- upload forma -->
<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);">
<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-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'">
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);margin-top:6px;">JPG, PNG ili WebP — maksimum 5 MB</div>
<div style="font-size:12px;color:var(--tekst-sporedni);">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>
<!-- pregled -->
<div x-data="{ blur: {{.AppPozadinaBlur}}, opacity: {{.AppPozadinaOpacity}} }"
style="margin-top:20px;">
<!-- 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>
<!-- panel za pregled — pozadina je statična, bez Alpine :style na ovom elementu -->
<div style="position:relative;width:100%;height:200px;border-radius:8px;overflow:hidden;{{if .AppPozadina}}background:url('{{.AppPozadina}}') center/cover;{{else}}background:#1a2033;{{end}}">
<!-- overlay: svi stilovi u :style jer Alpine cssText zamenjuje ceo style atribut -->
<div :style="`position:absolute;inset:0;pointer-events:none;background:rgba(0,0,0,${opacity/100})`"></div>
<!-- levi stub: simulacija sidebara sa glass stilom i inline SVG ikonama -->
<div :style="`position:absolute;top:0;left:0;bottom:0;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>
<!-- desna oblast: wrapper nema :style, pa static style ostaje netaknut -->
<div style="position:absolute;top:12px;left:68px;right:12px;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>
<!-- 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;">
<!-- slider: zamućenje -->
<div style="margin-top:16px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<span style="font-size:13px;color:rgba(255,255,255,0.9);">Zamućenje stakla</span>
<span style="font-size:13px;color:rgba(255,255,255,0.9);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>
<!-- forma za čuvanje vrednosti slidera -->
<form method="POST" action="/podesavanja/app-pozadina/stilovi" style="margin-top:12px;">
<!-- slider: zatamnjivanje -->
<div style="margin-top:12px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<span style="font-size:13px;color:rgba(255,255,255,0.9);">Zatamnjivanje</span>
<span style="font-size:13px;color:rgba(255,255,255,0.9);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>
<!-- forma za čuvanje stilova -->
<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="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'">
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>
</div><!-- /x-data -->
</div>
web/templates/teme/podrazumevana/base.html
+10 -1
View File
@@ -63,12 +63,21 @@
border: 1px solid rgba(255,255,255,0.12) !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var meni = document.getElementById('avatar-meni');
if (!meni) return;
meni.style.backdropFilter = 'none';
meni.style.webkitBackdropFilter = 'none';
meni.style.background = 'var(--kartica)';
});
</script>
{{end}}
</head>
<body>
{{if .AppPozadina}}<div class="app-overlay"></div>{{end}}
<div class="sidebar-overlay" id="sidebar-overlay"></div>
<div class="raspored">
<div class="sidebar-overlay" id="sidebar-overlay"></div>
{{template "sidebar" .}}
<div class="glavni-sadrzaj">