adm

<p>&nbsp;</p>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<p>Investiční portál</p>
<script src="https://cdn.tailwindcss.com"></script>
<style><!--
.screen { display: none; }
.screen.active { display: block; }
--></style>
<!-- Přihlašovací obrazovka -->
<div id="loginScreen" class="screen active min-h-screen p-6 flex items-center justify-center">
<div class="bg-white rounded-lg shadow-lg p-8 w-full max-w-md">
<h1 class="text-2xl font-bold mb-6 text-center">Přihlášení do portálu</h1>
<div id="loginError" class="hidden bg-red-100 text-red-700 p-3 rounded mb-4">&nbsp;</div>
<form id="loginForm" class="space-y-4">
<div><label class="block text-sm font-medium mb-1">Email</label> <input type="email" id="loginEmail" class="w-full p-2 border rounded" required="" /></div>
<div><label class="block text-sm font-medium mb-1">Heslo</label> <input type="password" id="loginPassword" class="w-full p-2 border rounded" required="" /></div>
<button type="submit" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600"> Přihlásit se </button></form>
<div class="mt-4 flex justify-center space-x-4"><button onclick="showScreen('register')" class="text-blue-500 hover:text-blue-700"> Registrovat se </button></div>
<div class="mt-4 text-sm text-center text-gray-500">Demo účty:<br /> Admin: admin@admin.cz / admin123<br /> Klient: test@test.cz / test123</div>
</div>
</div>
<!-- Registrační obrazovka -->
<div id="registerScreen" class="screen min-h-screen p-6 flex items-center justify-center">
<div class="bg-white rounded-lg shadow-lg p-8 w-full max-w-md">
<h1 class="text-2xl font-bold mb-6 text-center">Registrace</h1>
<div id="registerError" class="hidden bg-red-100 text-red-700 p-3 rounded mb-4">&nbsp;</div>
<form id="registerForm" class="space-y-4">
<div><label class="block text-sm font-medium mb-1">Email</label> <input type="email" id="registerEmail" class="w-full p-2 border rounded" required="" /></div>
<div><label class="block text-sm font-medium mb-1">Heslo</label> <input type="password" id="registerPassword" class="w-full p-2 border rounded" required="" /></div>
<div><label class="block text-sm font-medium mb-1">Potvrzení hesla</label> <input type="password" id="registerPasswordConfirm" class="w-full p-2 border rounded" required="" /></div>
<button type="submit" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600"> Registrovat se </button></form>
<div class="mt-4 flex justify-center"><button onclick="showScreen('login')" class="text-blue-500 hover:text-blue-700"> Zpět na přihlášení </button></div>
</div>
</div>
<!-- Admin Panel -->
<div id="adminScreen" class="screen min-h-screen p-6">
<div class="max-w-6xl mx-auto">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">Administrace</h1>
<div class="flex items-center gap-4"><span id="adminEmail" class="text-gray-600"></span> <button onclick="logout()" class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300"> Odhlásit se </button></div>
</div>
<!-- Správa uživatelů -->
<div class="bg-white rounded-lg shadow-lg p-6 mb-6">
<h2 class="text-xl font-bold mb-4">Správa uživatelů</h2>
<table class="w-full">
<thead>
<tr class="border-b">
<th class="text-left p-2">Email</th>
<th class="text-right p-2">Zůstatek CZK</th>
<th class="text-right p-2">Zlato (Oz)</th>
<th class="text-right p-2">Akce</th>
</tr>
</thead>
<tbody id="usersList"></tbody>
</table>
</div>
<!-- Přehled transakcí -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h2 class="text-xl font-bold mb-4">Všechny transakce</h2>
<div id="adminTransactions" class="space-y-3">&nbsp;</div>
</div>
</div>
</div>
<!-- Klientský portál -->
<div id="appScreen" class="screen min-h-screen p-6">
<div class="max-w-6xl mx-auto">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">Investiční portál</h1>
<div class="flex items-center gap-4"><span id="userEmail" class="text-gray-600"></span> <button onclick="logout()" class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300"> Odhlásit se </button></div>
</div>
<div class="grid gap-6 md:grid-cols-2 mb-6">
<div class="bg-white p-6 rounded-lg shadow">
<h2 class="text-lg font-semibold mb-2">Stav účtu</h2>
<p class="text-3xl font-bold" id="balance">0 CZK</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<h2 class="text-lg font-semibold mb-2">Vaše zlato</h2>
<p class="text-3xl font-bold" id="goldBalance">0 Oz</p>
<p class="text-gray-500" id="goldValue">Hodnota: Načítání...</p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">Nákup zlata</h2>
<div class="text-gray-500" id="goldPrice">Načítání ceny...</div>
</div>
<div class="flex gap-4"><input type="number" id="amount" placeholder="Částka v CZK" class="flex-1 p-2 border rounded" /> <button onclick="buyGold()" id="buyButton" disabled="disabled" class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 disabled:opacity-50"> Nakoupit </button></div>
<p class="mt-2 text-sm text-gray-500" id="previewAmount">&nbsp;</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<h2 class="text-lg font-semibold mb-4">Historie transakcí</h2>
<div id="transactions" class="space-y-3">&nbsp;</div>
</div>
</div>
</div>
<script>// Konfigurace
const API_KEY = 'goldapi-10zjuv19m4816s8u-io';
let goldPrice = null;
let currentUser = null;
let users = [
{ email: 'admin@admin.cz', password: 'admin123', role: 'admin', balance: 0, goldBalance: 0 },
{ email: 'test@test.cz', password: 'test123', role: 'client', balance: 100000, goldBalance: 0 }
];
let transactions = [];

// Inicializace
function init() {
const savedUsers = localStorage.getItem('users');
if (savedUsers) {
users = JSON.parse(savedUsers);
} else {
localStorage.setItem('users', JSON.stringify(users));
}

const savedTransactions = localStorage.getItem('transactions');
if (savedTransactions) {
transactions = JSON.parse(savedTransactions);
}

const savedUser = localStorage.getItem('currentUser');
if (savedUser) {
currentUser = JSON.parse(savedUser);
showUserScreen();
}
}

// Pomocné funkce
function showScreen(screenName) {
document.querySelectorAll('.screen').forEach(screen => screen.classList.remove('active'));
document.getElementById(screenName + 'Screen').classList.add('active');
}

function showUserScreen() {
if (!currentUser) return;
if (currentUser.role === 'admin') {
showScreen('admin');
updateAdminUI();
} else {
showScreen('app');
updateClientUI();
}
fetchGoldPrice();
}

function saveData() {
localStorage.setItem('users', JSON.stringify(users));
localStorage.setItem('transactions', JSON.stringify(transactions));
if (currentUser) {
localStorage.setItem('currentUser', JSON.stringify(currentUser));
}
}

// Autentizace
document.getElementById('loginForm').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;

const user = users.find(u => u.email === email && u.password === password);
if (user) {
currentUser = user;
saveData();
showUserScreen();
} else {
const error = document.getElementById('loginError');
error.textContent = 'Nesprávné přihlašovací údaje';
error.classList.remove('hidden');
}
});

document.getElementById('registerForm').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('registerEmail').value;
const password = document.getElementById('registerPassword').value;
const passwordConfirm = document.getElementById('registerPasswordConfirm').value;

if (password !== passwordConfirm) {
const error = document.getElementById('registerError');
error.textContent = 'Hesla se neshodují';
error.classList.remove('hidden');
return;
}

if (users.some(u => u.email === email)) {
const error = document.getElementById('registerError');
error.textContent = 'Email je již registrován';
error.classList.remove('hidden');
return;
}

const newUser = {
email,
password,
role: 'client',
balance: 0,
goldBalance: 0
};

users.push(newUser);
saveData();
showScreen('login');
alert('Registrace úspěšná! Můžete se přihlásit.');
});

function logout() {
localStorage.removeItem('currentUser');
currentUser = null;
showScreen('login');
}

// Admin funkce
function updateAdminUI() {
document.getElementById('adminEmail').textContent = currentUser.email;
updateUsersList();
updateAdminTransactions();
}

function updateUsersList() {
const tbody = document.getElementById('usersList');
tbody.innerHTML = users
.filter(u => u.role !== 'admin')
.map(user => `
<tr class="border-b">
<td class="p-2">${user.email}</td>
<td class="p-2 text-right">${user.balance.toLocaleString()} CZK</td>
<td class="p-2 text-right">${user.goldBalance.toFixed(6)} Oz</td>
<td class="p-2 text-right">
<button onclick="editUser('${user.email}')"
class="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600">
Upravit
</button>
<button onclick="deleteUser('${user.email}')"
class="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600 ml-2">
Smazat
</button>
</td>
</tr>
`).join('');
}

function updateAdminTransactions() {
const container = document.getElementById('adminTransactions');
if (transactions.length === 0) {
container.innerHTML = '<p class="text-center text-gray-500">Žádné transakce</p>';
return;
}

container.innerHTML = transactions.map(t => `
<div class="border-b last:border-0 pb-3">
<div class="flex justify-between">
<div>
<div class="font-medium">${t.type}</div>
<div class="text-sm text-gray-500">
${t.userEmail} - ${new Date(t.date).toLocaleString()}
</div>
</div>
<div class="text-right">
<div>${t.amount.toLocaleString()} CZK</div>
<div class="text-sm text-gray-500">
${t.goldAmount.toFixed(6)} Oz
</div>
</div>
</div>
</div>
`).join('');
}

// Klientské funkce
function updateClientUI() {
document.getElementById('userEmail').textContent = currentUser.email;
document.getElementById('balance').textContent = currentUser.balance.toLocaleString() + ' CZK';
document.getElementById('goldBalance').textContent = currentUser.goldBalance.toFixed(6) + ' Oz';
document.getElementById('goldValue').textContent = goldPrice ? 'Hodnota: ' + (currentUser.goldBalance * goldPrice).toLocaleString() + ' CZK' : 'Hodnota: Načítání...';

const clientTransactions = transactions.filter(t => t.userEmail === currentUser.email);
const container = document.getElementById('transactions');
if (clientTransactions.length === 0) {
container.innerHTML = '<p class="text-center text-gray-500">Žádné transakce</p>';
} else {
container.innerHTML = clientTransactions.map(t => `
<div class="border-b last:border-0 pb-3">
<div class="flex justify-between">
<div>
<div class="font-medium">${t.type}</div>
<div class="text-sm text-gray-500">
${new Date(t.date).toLocaleString()}
</div>
</div>
<div class="text-right">
<div>${t.amount.toLocaleString()} CZK</div>
<div class="text-sm text-gray-500">
${t.goldAmount.toFixed(6)} Oz
</div>
</div>
</div>
</div>
`).join('');
}
}

function fetchGoldPrice() {
fetch('https://www.goldapi.io/api/XAU/CZK', {
headers: {
'x-access-token': API_KEY,
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
goldPrice = data.price;
document.getElementById('goldPrice').textContent = `Cena: ${goldPrice} CZK/Oz`;
document.getElementById('buyButton').disabled = false;
updatePreview();
updateClientUI();
})
.catch(err => {
console.error(err);
document.getElementById('goldPrice').textContent = 'Chyba při načítání ceny';
});
}

function updatePreview() {
const amountInput = document.getElementById('amount');
const preview = document.getElementById('previewAmount');
const amountValue = parseFloat(amountInput.value);
if (!isNaN(amountValue) && goldPrice) {
const goldAmount = amountValue / goldPrice;
preview.textContent = `Získáte přibližně ${goldAmount.toFixed(6)} Oz zlata.`;
} else {
preview.textContent = '';
}
}

document.getElementById('amount').addEventListener('input', updatePreview);

function buyGold() {
const amountInput = document.getElementById('amount');
const amountValue = parseFloat(amountInput.value);
if (isNaN(amountValue) || amountValue <= 0) {
alert("Zadejte platnou částku");
return;
}
if (currentUser.balance < amountValue) {
alert("Nedostatečný zůstatek");
return;
}
if (!goldPrice) {
alert("Cena zlata není dostupná, zkuste to později.");
return;
}
const goldAmount = amountValue / goldPrice;
currentUser.balance -= amountValue;
currentUser.goldBalance += goldAmount;

const transaction = {
type: 'Nákup zlata',
userEmail: currentUser.email,
date: new Date(),
amount: amountValue,
goldAmount: goldAmount
};
transactions.push(transaction);
saveData();
updateClientUI();
updateAdminTransactions();
alert(`Úspěšně jste nakoupili ${goldAmount.toFixed(6)} Oz zlata.`);
}

// Admin funkce pro úpravu a smazání uživatele
function editUser(email) {
const user = users.find(u => u.email === email);
if (!user) return;
const newBalance = prompt("Zadejte nový zůstatek CZK", user.balance);
const newGoldBalance = prompt("Zadejte nové množství zlata (Oz)", user.goldBalance);
if (newBalance !== null && newGoldBalance !== null) {
user.balance = parseFloat(newBalance);
user.goldBalance = parseFloat(newGoldBalance);
saveData();
updateUsersList();
updateAdminTransactions();
if (currentUser.email === email) {
updateClientUI();
}
}
}

function deleteUser(email) {
if (confirm(`Opravdu chcete smazat uživatele ${email}?`)) {
users = users.filter(u => u.email !== email);
saveData();
updateUsersList();
}
}

// Zavolání inicializace
init();</script>