-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
231 lines (207 loc) · 11.6 KB
/
index.html
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>Osobní peněženka</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans leading-normal tracking-normal">
<!-- ODSAZENI NA OSE X PRO CELY WEB -->
<div class="px-80">
<header class="bg-blue-200 text-white shadow">
<div class="container mx-auto flex items-center py-5 px-4 space-x-4">
<div class="w-16 h-16 flex items-center justify-center bg-white rounded-full shadow">
<img alt="logo" src="../img/logo.png" class="w-10 h-10 object-contain">
</div>
<h1 class="text-3xl font-bold tracking-wide">Moje peněženka</h1>
</div>
</header>
<!-- FLEX CELEHO BODY -->
<div class="container mx-auto mt-8 flex flex-col md:flex-row">
<!-- FLEX PRAVE CASTI OBRAZOVKY -->
<div class="flex flex-col items-center w-full px-5 md:w-1/4">
<!-- Search Bar -->
<nav class="bg-white shadow-md w-full p-5 rounded-lg mb-6">
<div class="m-5">
<div class="flex items-center bg-gray-100 rounded-md shadow-md">
<span class="material-icons text-gray-500 px-3">search</span>
<input type="text" placeholder="Vyhledat..."
class="w-full px-4 py-2 bg-gray-100 rounded-r-md focus:outline-none focus:ring focus:ring-blue-300">
</div>
</div>
</nav>
<!-- Menu -->
<nav class="bg-white shadow-md w-full p-5 rounded-lg">
<div class="flex items-center justify-between mb-6">
<div class="text-gray-700">
<span class="font-bold">Přihlášen:</span> Jan Zítko
</div>
<button class="bg-red-400 text-white px-3 py-1 rounded hover:bg-red-500 flex items-center">
<span class="material-icons text-white mr-2">logout</span>
Odhlásit se
</button>
</div>
<ul class="space-y-3">
<li>
<a href="#" class="group flex items-center py-2 px-4 bg-blue-100 rounded hover:bg-blue-200">
<span class="material-icons text-blue-600 group-hover:text-blue-800 mr-3">dashboard</span>
<span class="text-blue-600 group-hover:text-blue-800">Přehled</span>
</a>
</li>
<li>
<a href="#" class="group flex items-center py-2 px-4 bg-blue-100 rounded hover:bg-blue-200">
<span class="material-icons text-blue-600 group-hover:text-blue-800 mr-3">list_alt</span>
<span class="text-blue-600 group-hover:text-blue-800">Transakce</span>
</a>
</li>
<li>
<a href="#" class="group flex items-center py-2 px-4 bg-blue-100 rounded hover:bg-blue-200">
<span class="material-icons text-blue-600 group-hover:text-blue-800 mr-3">account_balance_wallet</span>
<span class="text-blue-600 group-hover:text-blue-800">Rozpočty</span>
</a>
</li>
<li>
<a href="#" class="group flex items-center py-2 px-4 bg-blue-100 rounded hover:bg-blue-200">
<span class="material-icons text-blue-600 group-hover:text-blue-800 mr-3">analytics</span>
<span class="text-blue-600 group-hover:text-blue-800">Analýzy</span>
</a>
</li>
<li>
<a href="#" class="group flex items-center py-2 px-4 bg-blue-100 rounded hover:bg-blue-200">
<span class="material-icons text-blue-600 group-hover:text-blue-800 mr-3">import_export</span>
<span class="text-blue-600 group-hover:text-blue-800">Import/Export</span>
</a>
</li>
<li>
<a href="#" class="group flex items-center py-2 px-4 bg-blue-100 rounded hover:bg-blue-200">
<span class="material-icons text-blue-600 group-hover:text-blue-800 mr-3">settings</span>
<span class="text-blue-600 group-hover:text-blue-800">Nastavení</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- HLAVNI OBSAHOVA CAST -->
<main class="bg-white shadow-md w-full md:w-3/4 p-5 rounded-lg">
<h2 class="text-xl font-bold mb-4">Přehled transakcí za posledních 7 dní</h2>
<!-- Tab Navigation -->
<div class="mb-6">
<ul class="flex border-b">
<li class="mr-1">
<a href="#add-transaction" onclick="showTab('add-transaction')"
class="bg-blue-100 inline-block py-2 px-4 text-blue-500 font-semibold rounded-t-lg hover:bg-blue-200">Přidat
transakci</a>
</li>
<li class="mr-1">
<a href="#transaction-list" onclick="showTab('transaction-list')"
class="bg-blue-100 inline-block py-2 px-4 text-blue-500 font-semibold rounded-t-lg hover:bg-blue-200">Seznam
transakcí</a>
</li>
</ul>
</div>
<!-- Tabs Content -->
<div id="add-transaction" class="tab-content">
<!-- Form for Adding New Transactions -->
<form class="bg-gray-100 p-4 rounded-lg mb-6">
<h3 class="text-lg font-bold mb-3">Přidat novou transakci</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label for="category" class="block text-sm font-medium text-gray-700">Kategorie</label>
<select id="category" name="category"
class="mt-1 block w-full rounded-md border-gray-300 shadow-xl focus:ring-blue-500 focus:border-blue-500">
<option>Jídlo</option>
<option>Doprava</option>
<option>Bydlení</option>
<option>Zábava</option>
<option>Ostatní</option>
</select>
</div>
<div>
<label for="account" class="block text-sm font-medium text-gray-700">Účet</label>
<select id="account" name="account"
class="mt-1 block w-full rounded-md border-gray-300 shadow-xl focus:ring-blue-500 focus:border-blue-500">
<option>ČSOB Premium</option>
<option>Air Bank</option>
<option>Spořicí účet</option>
</select>
</div>
<div>
<label for="amount" class="block text-sm font-medium text-gray-700">Částka</label>
<input type="number" step="0.01" id="amount" name="amount"
class="mt-1 block w-full rounded-md border-gray-300 shadow-xl focus:ring-blue-500 focus:border-blue-500"
placeholder="0.00">
</div>
<div>
<label for="currency" class="block text-sm font-medium text-gray-700">Měna</label>
<select id="currency" name="currency"
class="mt-1 block w-full rounded-md border-gray-300 shadow-xl focus:ring-blue-500 focus:border-blue-500">
<option>CZK</option>
<option>EUR</option>
<option>USD</option>
<option>GBP</option>
<option>JPY</option>
</select>
</div>
</div>
<div class="mt-4">
<button type="submit"
class="group bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 flex items-center">
<span class="material-icons text-white mr-2">add_circle</span>
Přidat transakci
</button>
</div>
</form>
</div>
<div id="transaction-list" class="tab-content hidden">
<!-- Existing Transactions Table -->
<table class="table-auto w-full border-collapse border border-gray-200">
<thead>
<tr class="bg-gray-200">
<th class="border border-gray-300 px-4 py-2">Datum transakce</th>
<th class="border border-gray-300 px-4 py-2">Kategorie</th>
<th class="border border-gray-300 px-4 py-2">Ikona</th>
<th class="border border-gray-300 px-4 py-2">Částka</th>
<th class="border border-gray-300 px-4 py-2">Účet</th>
<th class="border border-gray-300 px-4 py-2">Poznámka</th>
<th class="border border-gray-300 px-4 py-2">Vložil</th>
<th class="border border-gray-300 px-4 py-2">Vloženo</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-300 px-4 py-2">16.1.2025</td>
<td class="border border-gray-300 px-4 py-2">Jídlo</td>
<td class="border border-gray-300 px-4 py-2">
<img src="../img/logo_png-300x110.png" alt="ikona" class="w-5 h-5">
</td>
<td class="border border-gray-300 px-4 py-2">1 000 Kč</td>
<td class="border border-gray-300 px-4 py-2">ČSOB premium</td>
<td class="border border-gray-300 px-4 py-2">
<a href="https://sievert-consulting.cz" target="_blank"
class="text-blue-500 hover:underline">Lidl</a>
</td>
<td class="border border-gray-300 px-4 py-2">Jan Zítko</td>
<td class="border border-gray-300 px-4 py-2">16.1.2025 18:19</td>
</tr>
</tbody>
</table>
</div>
</main>
<script>
function showTab(tabId) {
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.add('hidden');
});
document.getElementById(tabId).classList.remove('hidden');
}
</script>
</div>
<footer class="bg-blue-200 text-white mt-8 py-4">
<div class="container mx-auto text-center">
<p>© 2025 Osobní peněženka. Všechna práva vyhrazena.</p>
</div>
</footer>
</div>
</body>
</html>