256 lines
6.7 KiB
HTML
256 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Priznanica {{.Nalog.BrojNaloga}}</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-size: 14px;
|
|
color: #111;
|
|
background: #f5f5f5;
|
|
padding: 32px 16px;
|
|
}
|
|
|
|
.stranica {
|
|
background: #fff;
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
padding: 40px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.zaglavlje {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 32px;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.firma-naziv {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #111;
|
|
}
|
|
|
|
.firma-podnazlov {
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.firma-kontakt {
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.nalog-info {
|
|
text-align: right;
|
|
}
|
|
|
|
.nalog-broj {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
font-family: monospace;
|
|
color: #111;
|
|
}
|
|
|
|
.nalog-datum {
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.meta {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.meta-stavka label {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #9ca3af;
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.meta-stavka span {
|
|
font-size: 14px;
|
|
color: #111;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
thead tr {
|
|
border-bottom: 1.5px solid #111;
|
|
}
|
|
|
|
thead th {
|
|
padding: 8px 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: #6b7280;
|
|
text-align: left;
|
|
}
|
|
|
|
thead th:not(:first-child) { text-align: right; }
|
|
|
|
tbody tr {
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
tbody td {
|
|
padding: 10px 10px;
|
|
font-size: 14px;
|
|
color: #111;
|
|
}
|
|
|
|
tbody td:not(:first-child) {
|
|
text-align: right;
|
|
}
|
|
|
|
tfoot tr {
|
|
border-top: 1.5px solid #111;
|
|
}
|
|
|
|
tfoot td {
|
|
padding: 12px 10px;
|
|
}
|
|
|
|
.ukupno-label {
|
|
text-align: right;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.ukupno-iznos {
|
|
text-align: right;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #111;
|
|
}
|
|
|
|
.ekran-dugmad {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 9px 20px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border: none;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn-primarni {
|
|
background: #2563eb;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-sekundarni {
|
|
background: #f3f4f6;
|
|
color: #374151;
|
|
}
|
|
|
|
@media print {
|
|
body { background: #fff; padding: 0; }
|
|
.stranica { box-shadow: none; border-radius: 0; padding: 20px; max-width: 100%; }
|
|
.ekran-dugmad { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="stranica">
|
|
|
|
<div class="zaglavlje">
|
|
<div>
|
|
<div class="firma-naziv">{{.NazivFirme}}</div>
|
|
{{if .Podnazlov}}<div class="firma-podnazlov">{{.Podnazlov}}</div>{{end}}
|
|
{{if .Adresa}}<div class="firma-kontakt">{{.Adresa}}</div>{{end}}
|
|
{{if .Telefon}}<div class="firma-kontakt">{{.Telefon}}</div>{{end}}
|
|
{{if .PIB}}<div class="firma-kontakt">PIB: {{.PIB}}</div>{{end}}
|
|
</div>
|
|
<div class="nalog-info">
|
|
<div class="nalog-broj">{{.Nalog.BrojNaloga}}</div>
|
|
<div class="nalog-datum">{{.Nalog.Datum.Format "02.01.2006. u 15:04"}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{if .KlijentNaziv}}
|
|
<div class="meta">
|
|
<div class="meta-stavka">
|
|
<label>Klijent</label>
|
|
<span>{{.KlijentNaziv}}</span>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Artikal</th>
|
|
<th>Kol.</th>
|
|
<th>Cena/kom</th>
|
|
<th>Ukupno</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .Stavke}}
|
|
<tr>
|
|
<td>{{.ArtikalNaziv}}</td>
|
|
<td>{{.Kolicina}}</td>
|
|
<td>{{printf "%.2f" .CenaPoKomadu}} din</td>
|
|
<td>{{printf "%.2f" .Ukupno}} din</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="3" class="ukupno-label">Ukupno za naplatu:</td>
|
|
<td class="ukupno-iznos">{{printf "%.2f" .Nalog.Ukupno}} din</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
{{if .Nalog.Napomena}}
|
|
<div style="margin-top:20px;padding-top:16px;border-top:1px solid #e5e7eb;">
|
|
<div style="font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:#9ca3af;margin-bottom:4px;">Napomena</div>
|
|
<div style="font-size:13px;color:#374151;">{{.Nalog.Napomena}}</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="ekran-dugmad">
|
|
<button class="btn btn-sekundarni" onclick="window.close()">Zatvori</button>
|
|
<button class="btn btn-primarni" onclick="window.print()">Štampaj</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>window.onload = function() { window.print(); };</script>
|
|
</body>
|
|
</html>
|