Dasko/GoNtech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
0c23b0d721aed854d35262380080936435ab21e1
GoNtech/web/templates/stranice/profil_tema.html
T
Dasko 9c32cd71aa Magacin: modal za premeštanje + ujednačen slajder na svim brauzerima 
Premeštanje artikla:
  - Padajući <details> meni zamenjen nativnim <dialog> modalom (showModal),
    koji ide u „top layer" pa je uvek iznad svega bez obzira na z-index/overflow.
  - Dodato zatamnjenje pozadine (::backdrop) i fade in/out animacije
    (@starting-style + transition-behavior: allow-discrete).
  - Klik van modala, × dugme i Escape zatvaraju; klik na kategoriju i dalje
    odmah premešta artikal.

  Tema i HTMX:
  - CSS modala premešten iz magacin.html (dodatni-css u headeru) u main.css,
    jer se header ne menja pri HTMX navigaciji (hx-select=#glavni-sadrzaj),
    pa je stil sada uvek prisutan.
  - Modal prati svetlu/tamnu temu preko CSS promenljivih; kad je aktivna
    pozadinska slika, glass-override u base.html ga čini providnim i zamućenim
    kao kartice.
  - Modal centriran (margin:auto, jer reset gazi UA podrazumevano) i pojačana senka.

  Slajder (input[type=range]):
  - Dodata zajednička klasa .klizac sa ručnim stilom za oba motora
    (::-webkit-slider-* i ::-moz-range-*), da svuda izgleda kao u Firefox-u.
  - Plava popunjenost pre glave: Firefox preko ::-moz-range-progress, Chromium
    preko gradijenta i CSS promenljive --popunjeno koju postavlja JS.
  - Svih 12 slajdera (profil_tema, podesavanja_izgled, podesavanja) prešlo sa
    inline accent-color stila na klasu .klizac.
2026-06-10 00:05:40 +02:00

219 lines
14 KiB
HTML
Raw Blame History

{{template "base" .}}
{{define "naslov"}}Moja tema — 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%;">
<!-- kartica: moja tema -->
<div class="kartica animiraj" x-data="profilTemaOdabir" data-tema="{{if .LokalnaTema}}{{.LokalnaTema}}{{else}}tamna{{end}}" 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);">
Moja tema
</div>
{{if .LokalnaPozadina}}
<!-- lična pozadina je aktivna — tamna tema se forsira automatski -->
<div style="display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(99,102,241,0.10);border:0.5px solid rgba(99,102,241,0.3);border-radius:8px;margin-bottom:14px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<div>
<div style="font-size:13px;color:var(--tekst-glavni);font-weight:500;">Tamna tema je aktivna</div>
<div style="font-size:12px;color:var(--tekst-sporedni);margin-top:2px;">Lična pozadinska slika automatski primenjuje tamnu temu.</div>
</div>
</div>
<form method="POST" action="/profil/tema">
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
<!-- kada postoji lična pozadina, uvek čuvamo lokalni režim kako bi tema bila primenjena po uklanjanju pozadine -->
<input type="hidden" name="koristi_lokalnu_temu" value="1">
<div style="padding:12px;background:var(--pozadina);border-radius:8px;border:0.5px solid var(--ivica);">
<div style="font-size:13px;color:var(--tekst-sporedni);margin-bottom:10px;">Tema po uklanjanju pozadine:</div>
<div style="display:flex;gap:16px;">
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--tekst-glavni);">
<input type="radio" name="lokalna_tema" value="tamna" x-model="tema">
Tamna
</label>
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--tekst-glavni);">
<input type="radio" name="lokalna_tema" value="svetla" x-model="tema">
Svetla
</label>
</div>
</div>
<div style="margin-top:12px;">
<button type="submit"
style="padding:9px 20px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;">
Sačuvaj
</button>
</div>
</form>
{{else}}
<!-- nema lične pozadine — direktan izbor između tamne i svetle teme -->
<form method="POST" action="/profil/tema">
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
<input type="hidden" name="koristi_lokalnu_temu" value="1">
<div style="display:flex;flex-direction:column;gap:14px;">
<div style="padding:12px;background:var(--pozadina);border-radius:8px;border:0.5px solid var(--ivica);">
<div style="font-size:13px;color:var(--tekst-sporedni);margin-bottom:10px;">Izaberite temu:</div>
<div style="display:flex;gap:16px;">
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--tekst-glavni);">
<input type="radio" name="lokalna_tema" value="tamna" x-model="tema">
Tamna
</label>
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--tekst-glavni);">
<input type="radio" name="lokalna_tema" value="svetla" x-model="tema">
Svetla
</label>
</div>
</div>
<div>
<button type="submit"
style="padding:9px 20px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;">
Sačuvaj
</button>
</div>
</div>
</form>
{{end}}
</div>
<!-- kartica: moja pozadinska slika -->
<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);">Moja pozadinska slika</span>
</div>
{{if .LokalnaPozadina}}
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
<img src="{{.LokalnaPozadina}}" alt="Trenutna lična 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="/profil/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 ličnu pozadinsku sliku?">
Ukloni
</button>
</form>
</div>
{{end}}
<form method="POST" action="/profil/pozadina" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;">
<input type="file" id="lok-bg-file" name="lokalna_pozadina" accept=".jpg,.jpeg,.png,.webp"
style="display:none;"
onchange="var s=document.getElementById('lok-bg-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
<label for="lok-bg-file"
style="display:inline-flex;align-items:center;padding:8px 14px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;user-select:none;font-weight:500;">
Izaberi fajl
</label>
<span id="lok-bg-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
<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="lokalnaPozadinaPreview"
data-blur="{{.LokalnaPozadinaBlur}}"
data-opacity="{{.LokalnaPozadinaOpacity}}"
data-blur-pozadine="{{.LokalnaPozadinaBlurPozadine}}"
data-glass-opacity="{{.LokalnaPozadinaGlassOpacity}}"
data-pozadina="{{.LokalnaPozadina}}"
style="margin-top:20px;">
<div style="position:relative;width:100%;height:180px;border-radius:8px;overflow:hidden;">
<div :style="stilPozadine()"></div>
<div :style="stilOverlay()"></div>
<div :style="stilSidebar()">
<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="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;"><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>
</div>
<div style="position:absolute;top:12px;left:68px;right:12px;z-index:2;display:flex;flex-direction:column;gap:7px;">
<div :style="stilKartica()">
<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="stilKartica()">
<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>
</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"
class="klizac">
</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"
class="klizac">
</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 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 style="display:flex;justify-content:space-between;margin-bottom:6px;">
<span style="font-size:13px;color:var(--tekst-sporedni);">Zatamnjivanje stakla</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="glassOpacity + '%'"></span>
</div>
<input type="range" x-model.number="glassOpacity" min="0" max="80" step="1"
class="klizac">
</div>
<form method="POST" action="/profil/pozadina/stilovi" style="margin-top:16px;">
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
<input type="hidden" name="lokalna_pozadina_opacity" :value="opacity">
<input type="hidden" name="lokalna_pozadina_blur" :value="blur">
<input type="hidden" name="lokalna_pozadina_blur_pozadine" :value="blurPozadine">
<input type="hidden" name="lokalna_pozadina_glass_opacity" :value="glassOpacity">
<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"}}
<!-- kartica: pozadinska slika prijave — samo za admin/superadmin -->
<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>
<p style="font-size:13px;color:var(--tekst-sporedni);margin:0 0 12px;">
Ova slika se prikazuje na stranici za prijavu svim korisnicima.
Podešavanja su dostupna u
<a href="/admin/podesavanja/izgled" style="color:var(--sb-akcent);text-decoration:none;">Podešavanjima → Izgled</a>.
</p>
</div>
{{end}}
</div>
{{end}}
Reference in New Issue View Git Blame Copy Permalink