167 lines 8253 B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!doctype html>
<html lang=class="c-str">"cs">
<head>
<meta charset=class="c-str">"utf-class="c-num">8" />
<title>Jednorázové platby – Podnikám OS</title>
<meta name=class="c-str">"viewport" content=class="c-str">"width=device-width, initial-scale=class="c-num">1" />
<link rel=class="c-str">"preconnect" href=class="c-str">"https:class="c-comclass="c-str">">//fonts.googleapis.com" />
<link rel=class="c-str">"preconnect" href=class="c-str">"https:class="c-comclass="c-str">">//fonts.gstatic.com" crossorigin />
<link rel=class="c-str">"stylesheet" href=class="c-str">"https:class="c-comclass="c-str">">//fonts.googleapis.com/css2?family=Geist:wght@class="c-num">300;class="c-num">400;class="c-num">500;class="c-num">600;class="c-num">700&family=Geist+Mono:wght@class="c-num">400;class="c-num">500;class="c-num">600&display=swap" />
<link rel=class="c-str">"stylesheet" href=class="c-str">"shared/tokens.css" />
<link rel=class="c-str">"stylesheet" href=class="c-str">"shared/base.css" />
<link rel=class="c-str">"stylesheet" href=class="c-str">"shared/components.css" />
<link rel=class="c-str">"stylesheet" href=class="c-str">"shared/layout.css" />
</head>
<body data-theme=class="c-str">"dark">
<div class=class="c-str">"app-shell"
data-active=class="c-str">"platby"
data-breadcrumb=class="c-str">'[{"label":"Platby & výdaje","href":"platby.html"},{"label":"Jednorázové"}]'>
<main class=class="c-str">"main">
<div class=class="c-str">"page">
<div class=class="c-str">"page-header">
<div>
<div class=class="c-str">"page-title">Platby & výdaje</div>
<div class=class="c-str">"page-subtitle">Jednorázové · květen class="c-num">2026 · class="c-num">6 plateb · class="c-num">8 class="c-num">030 Kč</div>
</div>
<div class=class="c-str">"page-actions">
<button class=class="c-str">"btn btn--secondary"><i data-icon=class="c-str">"upload"></i>Import z banky</button>
<button class=class="c-str">"btn btn--primary"><i data-icon=class="c-str">"plus"></i>Nová platba</button>
</div>
</div>
<!-- Tabs -->
<div id=class="c-str">"platby-tabs" data-tab=class="c-str">"jednorazove" style=class="c-str">"margin-bottom: 24px;"></div>
<div class=class="c-str">"page-grid">
<aside class=class="c-str">"filter-rail">
<div class=class="c-str">"filter-rail-header">
<div class=class="c-str">"filter-rail-title"><i data-icon=class="c-str">"filter"></i> Filtry</div>
<button class=class="c-str">"btn btn--ghost btn--sm" style=class="c-str">"height: 28px; padding: class="c-num">0 8px;">Reset</button>
</div>
<div class=class="c-str">"filter-section">
<div class=class="c-str">"kpi">
<div class=class="c-str">"kpi-value kpi-value--lg mono">class="c-num">8 class="c-num">030 <span class=class="c-str">"currency">Kč</span></div>
<div class=class="c-str">"kpi-label">Filtr · květen class="c-num">2026</div>
</div>
</div>
<hr class=class="c-str">"filter-divider" />
<div class=class="c-str">"filter-section">
<label class=class="c-str">"label-uppercase">Časové období</label>
<div class=class="c-str">"chips" style=class="c-str">"display: grid; grid-template-columns: 1fr 1fr; gap: 2px;">
<button class=class="c-str">"chip">Týden</button>
<button class=class="c-str">"chip chip--active">Měsíc</button>
<button class=class="c-str">"chip">Kvartál</button>
<button class=class="c-str">"chip">Rok</button>
</div>
</div>
<div class=class="c-str">"filter-section">
<label class=class="c-str">"label-uppercase">Kategorie</label>
<div class=class="c-str">"stack-sm">
<div class=class="c-str">"row gap-class="c-num">2"><div class=class="c-str">"check check--checked"></div><span class=class="c-str">"text-sm">Software</span><span class=class="c-str">"text-xs muted mono" style=class="c-str">"margin-left:auto;">class="c-num">2 class="c-num">480</span></div>
<div class=class="c-str">"row gap-class="c-num">2"><div class=class="c-str">"check check--checked"></div><span class=class="c-str">"text-sm">Stravování</span><span class=class="c-str">"text-xs muted mono" style=class="c-str">"margin-left:auto;">class="c-num">1 class="c-num">850</span></div>
<div class=class="c-str">"row gap-class="c-num">2"><div class=class="c-str">"check check--checked"></div><span class=class="c-str">"text-sm">Doprava</span><span class=class="c-str">"text-xs muted mono" style=class="c-str">"margin-left:auto;">class="c-num">1 class="c-num">200</span></div>
<div class=class="c-str">"row gap-class="c-num">2"><div class=class="c-str">"check"></div><span class=class="c-str">"text-sm">Materiál</span><span class=class="c-str">"text-xs muted mono" style=class="c-str">"margin-left:auto;">class="c-num">2 class="c-num">500</span></div>
</div>
</div>
<div class=class="c-str">"filter-section">
<label class=class="c-str">"label-uppercase">Částka</label>
<div class=class="c-str">"row" style=class="c-str">"justify-content: space-between;">
<span class=class="c-str">"text-sm mono">class="c-num">0 Kč</span>
<span class=class="c-str">"text-sm mono">class="c-num">10 class="c-num">000 Kč</span>
</div>
<div class=class="c-str">"range">
<div class=class="c-str">"range-track">
<div class=class="c-str">"range-fill" style=class="c-str">"left: class="c-num">0%; width: class="c-num">70%;"></div>
<div class=class="c-str">"range-handle" style=class="c-str">"left: class="c-num">0%;"></div>
<div class=class="c-str">"range-handle" style=class="c-str">"left: class="c-num">70%;"></div>
</div>
</div>
</div>
</aside>
<div class=class="c-str">"card">
<div class=class="c-str">"card-header">
<div class=class="c-str">"row gap-class="c-num">3">
<div class=class="c-str">"input-group" style=class="c-str">"width: 320px;">
<span class=class="c-str">"input-icon"><i data-icon=class="c-str">"search"></i></span>
<input class=class="c-str">"input" placeholder=class="c-str">"Hledat..." />
</div>
</div>
</div>
<div class=class="c-str">"card-body card-body--flush">
<div class=class="c-str">"list">
<div class=class="c-str">"list-header" style=class="c-str">"grid-template-columns: 36px 1fr 140px 100px 110px 60px;">
<span></span><span>Popis</span><span>Kategorie</span><span>Datum</span><span style=class="c-str">"text-align:right;">Částka</span><span></span>
</div>
<div class=class="c-str">"list-row" style=class="c-str">"grid-template-columns: 36px 1fr 140px 100px 110px 60px;">
<div class=class="c-str">"stat-card-icon" style=class="c-str">"width: 36px; height: 36px;"><i data-icon=class="c-str">"package"></i></div>
<div>
<div class=class="c-str">"text-base font-semibold">Notion AI – roční plán</div>
<div class=class="c-str">"text-sm muted">Předplatné na class="c-num">12 měsíců</div>
</div>
<span class=class="c-str">"tag"><span class=class="c-str">"tag-dot" style=class="c-str">"background: class="c-comclass="c-str">">#EC4899;"></span>Software</span>
<span class=class="c-str">"text-sm">class="c-num">28. class="c-num">04.</span>
<span class=class="c-str">"mono text-base font-semibold" style=class="c-str">"text-align:right;">class="c-num">2 class="c-num">480 Kč</span>
<button class=class="c-str">"icon-btn"><i data-icon=class="c-str">"more-vertical"></i></button>
</div>
<div class=class="c-str">"list-row" style=class="c-str">"grid-template-columns: 36px 1fr 140px 100px 110px 60px;">
<div class=class="c-str">"stat-card-icon" style=class="c-str">"width: 36px; height: 36px;"><i data-icon=class="c-str">"map-pin"></i></div>
<div>
<div class=class="c-str">"text-base font-semibold">Taxi · letiště Václava Havla</div>
<div class=class="c-str">"text-sm muted">Bolt · služební cesta Berlín</div>
</div>
<span class=class="c-str">"tag"><span class=class="c-str">"tag-dot" style=class="c-str">"background: class="c-comclass="c-str">">#06B6D4;"></span>Doprava</span>
<span class=class="c-str">"text-sm">class="c-num">26. class="c-num">04.</span>
<span class=class="c-str">"mono text-base font-semibold" style=class="c-str">"text-align:right;">class="c-num">1 class="c-num">200 Kč</span>
<button class=class="c-str">"icon-btn"><i data-icon=class="c-str">"more-vertical"></i></button>
</div>
<div class=class="c-str">"list-row" style=class="c-str">"grid-template-columns: 36px 1fr 140px 100px 110px 60px;">
<div class=class="c-str">"stat-card-icon" style=class="c-str">"width: 36px; height: 36px;"><i data-icon=class="c-str">"briefcase"></i></div>
<div>
<div class=class="c-str">"text-base font-semibold">Pracovní oběd · Tesco meeting</div>
<div class=class="c-str">"text-sm muted">Restaurace Lokál Dlouhááá</div>
</div>
<span class=class="c-str">"tag"><span class=class="c-str">"tag-dot" style=class="c-str">"background: class="c-comclass="c-str">">#F59E0B;"></span>Stravování</span>
<span class=class="c-str">"text-sm">class="c-num">22. class="c-num">04.</span>
<span class=class="c-str">"mono text-base font-semibold" style=class="c-str">"text-align:right;">class="c-num">1 class="c-num">850 Kč</span>
<button class=class="c-str">"icon-btn"><i data-icon=class="c-str">"more-vertical"></i></button>
</div>
<div class=class="c-str">"list-row" style=class="c-str">"grid-template-columns: 36px 1fr 140px 100px 110px 60px;">
<div class=class="c-str">"stat-card-icon" style=class="c-str">"width: 36px; height: 36px;"><i data-icon=class="c-str">"package"></i></div>
<div>
<div class=class="c-str">"text-base font-semibold">Office židle · Alza</div>
<div class=class="c-str">"text-sm muted">Náhrada za rozbitou</div>
</div>
<span class=class="c-str">"tag"><span class=class="c-str">"tag-dot" style=class="c-str">"background: class="c-comclass="c-str">">#10B981;"></span>Materiál</span>
<span class=class="c-str">"text-sm">class="c-num">18. class="c-num">04.</span>
<span class=class="c-str">"mono text-base font-semibold" style=class="c-str">"text-align:right;">class="c-num">2 class="c-num">500 Kč</span>
<button class=class="c-str">"icon-btn"><i data-icon=class="c-str">"more-vertical"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script src=class="c-str">"shared/icons.js"></script>
<script src=class="c-str">"shared/shell.js"></script>
<script src=class="c-str">"shared/platby-tabs.js"></script>
</body>
</html>