282 lines
19 KiB
HTML
282 lines
19 KiB
HTML
{{template "base" .}}
|
|
|
|
{{define "naslov"}}Podešavanja — 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; }
|
|
.animiraj:nth-child(4) { animation-delay: 0.28s; }
|
|
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 18px;
|
|
border-radius: 10px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
|
animation: toastIn 0.3s ease forwards;
|
|
max-width: 340px;
|
|
}
|
|
.toast-greska {
|
|
background: #fef2f2;
|
|
color: #dc2626;
|
|
border: 0.5px solid #fca5a5;
|
|
}
|
|
.toast-uspeh {
|
|
background: #f0fdf4;
|
|
color: #16a34a;
|
|
border: 0.5px solid #86efac;
|
|
}
|
|
@keyframes toastIn {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes toastOut {
|
|
from { opacity: 1; transform: translateY(0); }
|
|
to { opacity: 0; transform: translateY(12px); }
|
|
}
|
|
.toast.nestaje {
|
|
animation: toastOut 0.3s ease forwards;
|
|
}
|
|
</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 .BackupVracen}}
|
|
<div class="poruka-uspeh">Baza je uspešno obnovljena iz rezervne kopije.</div>
|
|
{{end}}
|
|
|
|
<!-- upload loga — posebna forma jer je multipart, mora biti van glavne forme -->
|
|
<form method="POST" action="/podesavanja/logo" 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);">Logo firme</span>
|
|
</div>
|
|
{{if .LogoPutanja}}
|
|
<div style="margin-bottom:12px;">
|
|
<img src="{{.LogoPutanja}}" alt="Trenutni logo"
|
|
style="max-height:60px;max-width:200px;object-fit:contain;border:0.5px solid var(--ivica);border-radius:8px;padding:6px;background:var(--kartica);">
|
|
</div>
|
|
{{end}}
|
|
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
|
|
<input type="file" name="logo" accept=".png,.jpg,.jpeg,.svg"
|
|
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 logo
|
|
</button>
|
|
</div>
|
|
<div style="font-size:12px;color:var(--tekst-sporedni);margin-top:6px;">PNG, JPG ili SVG — maksimum 2 MB</div>
|
|
</div>
|
|
</form>
|
|
|
|
<form method="POST" action="/podesavanja/sacuvaj">
|
|
|
|
<!-- sekcija: firma -->
|
|
<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"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Firma</span>
|
|
</div>
|
|
|
|
<div style="display:flex;flex-direction:column;gap:14px;">
|
|
<div>
|
|
<label style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:6px;">Naziv firme</label>
|
|
<input type="text" name="naziv_firme" value="{{.NazivFirme}}"
|
|
style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;"
|
|
placeholder="npr. NTech">
|
|
</div>
|
|
|
|
<div>
|
|
<label style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:6px;">Podnazlov</label>
|
|
<input type="text" name="podnazlov" value="{{.Podnazlov}}"
|
|
style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;"
|
|
placeholder="npr. Servis računara">
|
|
</div>
|
|
|
|
<div>
|
|
<label style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:6px;">Adresa</label>
|
|
<input type="text" name="adresa" value="{{.Adresa}}"
|
|
style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;"
|
|
placeholder="npr. Ulica i broj, Grad">
|
|
</div>
|
|
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
|
|
<div>
|
|
<label style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:6px;">Telefon</label>
|
|
<input type="text" name="telefon" value="{{.Telefon}}"
|
|
style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;"
|
|
placeholder="npr. +381 11 123 4567">
|
|
</div>
|
|
<div>
|
|
<label style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:6px;">PIB</label>
|
|
<input type="text" name="pib" value="{{.PIB}}"
|
|
style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;"
|
|
placeholder="npr. 123456789">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:8px;">Logo zona</label>
|
|
<div style="display:flex;gap:10px;flex-wrap:wrap;">
|
|
<label style="display:flex;align-items:center;gap:8px;padding:10px 14px;border:0.5px solid var(--ivica);border-radius:8px;cursor:pointer;flex:1;{{if or (eq .LogoTip "sa_nazivom") (eq .LogoTip "tekst") (eq .LogoTip "ikonica") (not .LogoTip)}}border-color:var(--sb-akcent);background:var(--pozadina);{{end}}">
|
|
<input type="radio" name="logo_tip" value="sa_nazivom" {{if or (eq .LogoTip "sa_nazivom") (eq .LogoTip "tekst") (eq .LogoTip "ikonica") (not .LogoTip)}}checked{{end}} style="accent-color:var(--sb-akcent);">
|
|
<span style="font-size:13px;color:var(--tekst-glavni);">Sa nazivom</span>
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;padding:10px 14px;border:0.5px solid var(--ivica);border-radius:8px;cursor:pointer;flex:1;{{if eq .LogoTip "bez_naziva"}}border-color:var(--sb-akcent);background:var(--pozadina);{{end}}">
|
|
<input type="radio" name="logo_tip" value="bez_naziva" {{if eq .LogoTip "bez_naziva"}}checked{{end}} style="accent-color:var(--sb-akcent);">
|
|
<span style="font-size:13px;color:var(--tekst-glavni);">Bez naziva</span>
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;padding:10px 14px;border:0.5px solid var(--ivica);border-radius:8px;flex:1;{{if eq .LogoTip "slika"}}border-color:var(--sb-akcent);background:var(--pozadina);{{end}}{{if not .LogoPutanja}}opacity:0.45;cursor:not-allowed;{{else}}cursor:pointer;{{end}}">
|
|
<input type="radio" name="logo_tip" value="slika" {{if eq .LogoTip "slika"}}checked{{end}} {{if not .LogoPutanja}}disabled{{end}} style="accent-color:var(--sb-akcent);">
|
|
<span style="font-size:13px;color:var(--tekst-glavni);">Sa logom</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- sekcija: izgled -->
|
|
<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"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
|
|
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Izgled</span>
|
|
</div>
|
|
|
|
<div>
|
|
<label style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:8px;">Tema</label>
|
|
<div class="teme-grid" style="display:flex;gap:10px;">
|
|
<label style="display:flex;align-items:center;gap:8px;padding:10px 14px;border:0.5px solid var(--ivica);border-radius:8px;cursor:pointer;flex:1;{{if eq .Tema "tamna"}}border-color:var(--sb-akcent);{{end}}">
|
|
<input type="radio" name="tema" value="tamna" {{if eq .Tema "tamna"}}checked{{end}} style="accent-color:var(--sb-akcent);">
|
|
<div style="width:16px;height:16px;border-radius:50%;background:#1a1d27;flex-shrink:0;"></div>
|
|
<span style="font-size:13px;color:var(--tekst-glavni);">Tamna</span>
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;padding:10px 14px;border:0.5px solid var(--ivica);border-radius:8px;cursor:pointer;flex:1;{{if eq .Tema "svetla"}}border-color:var(--sb-akcent);{{end}}">
|
|
<input type="radio" name="tema" value="svetla" {{if eq .Tema "svetla"}}checked{{end}} style="accent-color:var(--sb-akcent);">
|
|
<div style="width:16px;height:16px;border-radius:50%;background:#f0f2f5;border:0.5px solid #e2e6ed;flex-shrink:0;"></div>
|
|
<span style="font-size:13px;color:var(--tekst-glavni);">Svetla</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- sekcija: sistem -->
|
|
<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"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06-.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Sistem</span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">
|
|
<div style="font-size:13px;color:var(--tekst-sporedni);">Verzija programa: <span style="color:var(--tekst-glavni);font-weight:500;">{{.Verzija}}</span></div>
|
|
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
|
<a href="/podesavanja/backup"
|
|
style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--kartica);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;color:var(--tekst-sporedni);text-decoration:none;transition:background 0.2s;"
|
|
onmouseover="this.style.background='var(--pozadina)'" onmouseout="this.style.background='var(--kartica)'">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Preuzmi backup baze
|
|
</a>
|
|
<button type="button" onclick="toggleBackupPanel()"
|
|
style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--kartica);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;color:var(--tekst-sporedni);cursor:pointer;transition:background 0.2s;"
|
|
onmouseover="this.style.background='var(--pozadina)'" onmouseout="this.style.background='var(--kartica)'">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><polyline points="7 5 12 10 17 5"/></svg>
|
|
Vrati backup baze
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- panel sa listom backupa -->
|
|
<div id="backup-panel" style="display:none;margin-top:16px;border-top:0.5px solid var(--ivica);padding-top:16px;">
|
|
<div style="font-size:13px;font-weight:500;color:var(--tekst-glavni);margin-bottom:10px;">Dostupne rezervne kopije</div>
|
|
{{if .Backupi}}
|
|
<div style="overflow-x:auto;">
|
|
<table style="width:100%;border-collapse:collapse;font-size:13px;">
|
|
<thead>
|
|
<tr style="border-bottom:0.5px solid var(--ivica);">
|
|
<th style="padding:8px 12px;text-align:left;font-weight:500;color:var(--tekst-sporedni);">Naziv fajla</th>
|
|
<th style="padding:8px 12px;text-align:left;font-weight:500;color:var(--tekst-sporedni);">Datum</th>
|
|
<th style="padding:8px 12px;text-align:right;font-weight:500;color:var(--tekst-sporedni);">Veličina</th>
|
|
<th style="padding:8px 12px;text-align:right;font-weight:500;color:var(--tekst-sporedni);"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .Backupi}}
|
|
<tr style="border-bottom:0.5px solid var(--ivica);">
|
|
<td style="padding:8px 12px;color:var(--tekst-glavni);font-family:monospace;font-size:12px;">{{.Ime}}</td>
|
|
<td style="padding:8px 12px;color:var(--tekst-sporedni);">{{.Datum}}</td>
|
|
<td style="padding:8px 12px;text-align:right;color:var(--tekst-sporedni);">{{.Velicina}}</td>
|
|
<td style="padding:8px 12px;text-align:right;">
|
|
<form method="POST" action="/podesavanja/backup/vrati"
|
|
onsubmit="return confirm('Vratiti bazu na stanje od: {{.Datum}}?\n\nTrenutna baza će biti automatski sačuvana pre obnove.')">
|
|
<input type="hidden" name="ime" value="{{.Ime}}">
|
|
<button type="submit"
|
|
style="padding:4px 12px;background:transparent;border:0.5px solid #fca5a5;border-radius:6px;color:#dc2626;font-size:12px;cursor:pointer;">
|
|
Vrati
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{else}}
|
|
<div style="padding:20px;text-align:center;color:var(--tekst-sporedni);font-size:13px;">
|
|
Nema dostupnih rezervnih kopija.
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- dugme za čuvanje -->
|
|
<div style="display:flex;justify-content:flex-end;">
|
|
<button type="submit"
|
|
style="background:var(--sb-akcent);color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:opacity 0.2s;"
|
|
onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">
|
|
Sačuvaj podešavanja
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleBackupPanel() {
|
|
var p = document.getElementById('backup-panel');
|
|
p.style.display = p.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
</script>
|
|
|
|
{{if .LogoGreska}}
|
|
<div id="toast-logo" class="toast toast-greska">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><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>
|
|
{{.LogoGreska}}
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
var t = document.getElementById('toast-logo');
|
|
if (!t) return;
|
|
setTimeout(function() {
|
|
t.classList.add('nestaje');
|
|
setTimeout(function() { t.remove(); }, 300);
|
|
}, 4000);
|
|
})();
|
|
</script>
|
|
{{end}}
|
|
{{end}}
|