mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-04 04:22:58 +00:00
Tomáš Dvořák
530 lines
18 KiB
HTML
530 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin Dashboard - PP Kunovice</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.header {
|
|
background-color: #333;
|
|
color: white;
|
|
padding: 1rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
}
|
|
.logout-btn {
|
|
background: none;
|
|
border: 1px solid white;
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.logout-btn:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
}
|
|
.dashboard-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
.card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.card h3 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: bold;
|
|
}
|
|
.form-group input[type="text"],
|
|
.form-group textarea,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
}
|
|
.form-group textarea {
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
}
|
|
.color-preview {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 1px solid #ddd;
|
|
vertical-align: middle;
|
|
margin-left: 10px;
|
|
}
|
|
.style-presets {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin: 10px 0;
|
|
}
|
|
.style-preset {
|
|
padding: 5px 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
.style-preset:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
.banner-preview {
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
border: 1px dashed #ccc;
|
|
border-radius: 8px;
|
|
max-width: 800px;
|
|
min-height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.banner-preview img {
|
|
max-width: 100%;
|
|
max-height: 200px;
|
|
object-fit: contain;
|
|
}
|
|
.banner-preview.with-image {
|
|
min-height: 200px;
|
|
}
|
|
.banner-preview-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
.banner-preview-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-size: cover;
|
|
background-position: center;
|
|
opacity: 0.7;
|
|
z-index: 1;
|
|
}
|
|
.banner-preview-text {
|
|
position: relative;
|
|
z-index: 2;
|
|
color: inherit;
|
|
}
|
|
.color-picker-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.color-picker {
|
|
width: 40px;
|
|
height: 30px;
|
|
padding: 0;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.image-upload-container {
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
border: 1px dashed #ddd;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
.image-preview {
|
|
max-width: 200px;
|
|
max-height: 150px;
|
|
margin: 10px auto;
|
|
display: block;
|
|
}
|
|
.card p {
|
|
color: #666;
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>Admin Dashboard</h1>
|
|
<button class="logout-btn" id="logoutBtn">Odhlásit se</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2>Vítejte v administraci</h2>
|
|
|
|
<div class="card" style="margin: 2rem auto; max-width: 1000px;">
|
|
<h3>Správa banneru</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerText">Text banneru</label>
|
|
<textarea id="bannerText" placeholder="Zadejte text banneru" style="min-height: 100px;"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerLink">Odkaz (volitelný)</label>
|
|
<input type="text" id="bannerLink" placeholder="https://example.com">
|
|
</div>
|
|
|
|
<div class="image-upload-container">
|
|
<label for="bannerImage">Nahrát obrázek (volitelné)</label>
|
|
<input type="file" id="bannerImage" accept="image/*" style="display: none;">
|
|
<div>
|
|
<button type="button" id="uploadImageBtn" class="login-button" style="margin: 10px 0;">Vybrat obrázek</button>
|
|
<button type="button" id="removeImageBtn" class="login-button" style="margin: 10px 0; background-color: #dc3545; display: none;">Odstranit obrázek</button>
|
|
</div>
|
|
<div id="imagePreviewContainer" style="display: none;">
|
|
<img id="imagePreview" class="image-preview" src="" alt="Náhled obrázku">
|
|
</div>
|
|
</div>
|
|
|
|
<h4>Styl banneru</h4>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerVisible">
|
|
<input type="checkbox" id="bannerVisible" checked> Zobrazit banner
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerBgColor">Barva pozadí</label>
|
|
<div class="color-picker-container">
|
|
<input type="color" id="bannerBgColorPicker" class="color-picker" value="#f8d7da">
|
|
<input type="text" id="bannerBgColor" value="#f8d7da" style="flex: 1;">
|
|
<div class="color-preview" id="bgColorPreview" style="background-color: #f8d7da;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerTextColor">Barva textu</label>
|
|
<div class="color-picker-container">
|
|
<input type="color" id="bannerTextColorPicker" class="color-picker" value="#721c24">
|
|
<input type="text" id="bannerTextColor" value="#721c24" style="flex: 1;">
|
|
<div class="color-preview" id="textColorPreview" style="background-color: #721c24;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerTextAlign">Zarovnání textu</label>
|
|
<select id="bannerTextAlign">
|
|
<option value="left">Vlevo</option>
|
|
<option value="center" selected>Na střed</option>
|
|
<option value="right">Vpravo</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerFontSize">Velikost písma (px)</label>
|
|
<input type="text" id="bannerFontSize" value="16">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerPadding">Odsazení (px)</label>
|
|
<input type="number" id="bannerPadding" value="20" min="0">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerMargin">Okraje (px)</label>
|
|
<input type="number" id="bannerMargin" value="20" min="0">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerBorderRadius">Zaoblení rohů (px)</label>
|
|
<input type="number" id="bannerBorderRadius" value="8" min="0">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bannerFontSize">Velikost písma (px)</label>
|
|
<input type="number" id="bannerFontSize" value="18" min="10" max="72">
|
|
</div>
|
|
|
|
<h4>Předvolby stylů</h4>
|
|
<div class="style-presets">
|
|
<div class="style-preset" data-preset="info">Informační</div>
|
|
<div class="style-preset" data-preset="warning">Upozornění</div>
|
|
<div class="style-preset" data-preset="success">Úspěch</div>
|
|
<div class="style-preset" data-preset="error">Chyba</div>
|
|
</div>
|
|
|
|
<div class="banner-preview" id="bannerPreview" style="display: none;">
|
|
<div class="banner-preview-bg"></div>
|
|
<div class="banner-preview-content">
|
|
<div class="banner-preview-text">Náhled banneru se zde zobrazí</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="saveBannerBtn" style="margin-top: 1rem; padding: 0.5rem 1rem; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
|
|
Uložit banner
|
|
</button>
|
|
</div>
|
|
|
|
<div class="dashboard-cards">
|
|
<div class="card">
|
|
<h3>Uživatelé</h3>
|
|
<p>Správa uživatelských účtů</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Nastavení</h3>
|
|
<p>Konfigurace systému</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Statistiky</h3>
|
|
<p>Přehled aktivit</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Check if user is authenticated
|
|
const token = localStorage.getItem('token');
|
|
if (!token) {
|
|
window.location.href = '/admin.html';
|
|
}
|
|
|
|
// Logout functionality
|
|
document.getElementById('logoutBtn').addEventListener('click', function() {
|
|
localStorage.removeItem('token');
|
|
window.location.href = '/';
|
|
});
|
|
|
|
// Add token to all fetch requests
|
|
const originalFetch = window.fetch;
|
|
window.fetch = async function(resource, init = {}) {
|
|
// Set up the headers
|
|
const headers = new Headers(init.headers || {});
|
|
if (token) {
|
|
headers.set('Authorization', `Bearer ${token}`);
|
|
}
|
|
|
|
// Make the request
|
|
const response = await originalFetch(resource, {
|
|
...init,
|
|
headers
|
|
});
|
|
|
|
// If unauthorized, redirect to login
|
|
if (response.status === 401) {
|
|
localStorage.removeItem('token');
|
|
window.location.href = '/admin.html';
|
|
return response;
|
|
}
|
|
|
|
return response;
|
|
};
|
|
|
|
// DOM Elements
|
|
const bannerText = document.getElementById('bannerText');
|
|
const bannerVisible = document.getElementById('bannerVisible');
|
|
const bannerBgColor = document.getElementById('bannerBgColor');
|
|
const bannerTextColor = document.getElementById('bannerTextColor');
|
|
const bannerTextAlign = document.getElementById('bannerTextAlign');
|
|
const bannerFontSize = document.getElementById('bannerFontSize');
|
|
const bannerPadding = document.getElementById('bannerPadding');
|
|
const bannerPreview = document.getElementById('bannerPreview');
|
|
const bgColorPreview = document.getElementById('bgColorPreview');
|
|
const textColorPreview = document.getElementById('textColorPreview');
|
|
const saveBannerBtn = document.getElementById('saveBannerBtn');
|
|
const stylePresets = document.querySelectorAll('.style-preset');
|
|
|
|
// Preset styles
|
|
const presets = {
|
|
info: {
|
|
backgroundColor: '#cce5ff',
|
|
textColor: '#004085',
|
|
textAlign: 'left'
|
|
},
|
|
warning: {
|
|
backgroundColor: '#fff3cd',
|
|
textColor: '#856404',
|
|
textAlign: 'center'
|
|
},
|
|
success: {
|
|
backgroundColor: '#d4edda',
|
|
textColor: '#155724',
|
|
textAlign: 'center'
|
|
},
|
|
error: {
|
|
backgroundColor: '#f8d7da',
|
|
textColor: '#721c24',
|
|
textAlign: 'center'
|
|
}
|
|
};
|
|
|
|
// Load current banner
|
|
async function loadBanner() {
|
|
try {
|
|
const response = await fetch('/api/banner');
|
|
if (!response.ok) throw new Error('Failed to load banner');
|
|
|
|
const banner = await response.json();
|
|
|
|
// Update form fields
|
|
bannerText.value = banner.text || '';
|
|
bannerVisible.checked = banner.style.isVisible !== false;
|
|
bannerBgColor.value = banner.style.backgroundColor || '#f8d7da';
|
|
bannerTextColor.value = banner.style.textColor || '#721c24';
|
|
bannerTextAlign.value = banner.style.textAlign || 'center';
|
|
bannerFontSize.value = parseInt(banner.style.fontSize || '16');
|
|
bannerPadding.value = parseInt(banner.style.padding || '10');
|
|
|
|
updateColorPreviews();
|
|
updateBannerPreview();
|
|
|
|
} catch (error) {
|
|
console.error('Error loading banner:', error);
|
|
alert('Nepodařilo se načíst banner');
|
|
}
|
|
}
|
|
|
|
// Save banner
|
|
async function saveBanner() {
|
|
try {
|
|
const bannerData = {
|
|
text: bannerText.value,
|
|
style: {
|
|
backgroundColor: bannerBgColor.value,
|
|
textColor: bannerTextColor.value,
|
|
textAlign: bannerTextAlign.value,
|
|
fontSize: `${bannerFontSize.value}px`,
|
|
padding: `${bannerPadding.value}px`,
|
|
isVisible: bannerVisible.checked
|
|
}
|
|
};
|
|
|
|
const response = await fetch('/api/banner/update', {
|
|
method: 'POST',
|
|
body: JSON.stringify(bannerData)
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to save banner');
|
|
|
|
alert('Banner byl úspěšně uložen');
|
|
updateBannerPreview();
|
|
|
|
} catch (error) {
|
|
console.error('Error saving banner:', error);
|
|
alert('Nepodařilo se uložit banner');
|
|
}
|
|
}
|
|
|
|
// Update color previews
|
|
function updateColorPreviews() {
|
|
bgColorPreview.style.backgroundColor = bannerBgColor.value;
|
|
textColorPreview.style.backgroundColor = bannerTextColor.value;
|
|
}
|
|
|
|
// Update banner preview
|
|
function updateBannerPreview() {
|
|
if (!bannerText.value.trim()) {
|
|
bannerPreview.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
|
|
bannerPreview.style.display = 'block';
|
|
bannerPreview.textContent = bannerText.value;
|
|
bannerPreview.style.backgroundColor = bannerBgColor.value;
|
|
bannerPreview.style.color = bannerTextColor.value;
|
|
bannerPreview.style.textAlign = bannerTextAlign.value;
|
|
bannerPreview.style.fontSize = `${bannerFontSize.value}px`;
|
|
bannerPreview.style.padding = `${bannerPadding.value}px`;
|
|
}
|
|
|
|
// Apply preset
|
|
function applyPreset(preset) {
|
|
const style = presets[preset];
|
|
if (!style) return;
|
|
|
|
bannerBgColor.value = style.backgroundColor;
|
|
bannerTextColor.value = style.textColor;
|
|
bannerTextAlign.value = style.textAlign;
|
|
|
|
updateColorPreviews();
|
|
updateBannerPreview();
|
|
}
|
|
|
|
// Event Listeners
|
|
bannerBgColor.addEventListener('input', () => {
|
|
updateColorPreviews();
|
|
updateBannerPreview();
|
|
});
|
|
|
|
bannerTextColor.addEventListener('input', () => {
|
|
updateColorPreviews();
|
|
updateBannerPreview();
|
|
});
|
|
|
|
[bannerText, bannerTextAlign, bannerFontSize, bannerPadding, bannerVisible].forEach(el => {
|
|
el.addEventListener('change', updateBannerPreview);
|
|
el.addEventListener('input', updateBannerPreview);
|
|
});
|
|
|
|
stylePresets.forEach(preset => {
|
|
preset.addEventListener('click', () => applyPreset(preset.dataset.preset));
|
|
});
|
|
|
|
saveBannerBtn.addEventListener('click', saveBanner);
|
|
|
|
// Initialize
|
|
async function fetch(resource, init = {}) {
|
|
// Add auth token to headers if it exists
|
|
const token = localStorage.getItem('token');
|
|
if (token) {
|
|
init.headers = {
|
|
...init.headers,
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
};
|
|
}
|
|
|
|
const response = await window.fetch(resource, {
|
|
credentials: 'same-origin',
|
|
...init
|
|
});
|
|
|
|
if (response.status === 401) {
|
|
// Unauthorized - redirect to login
|
|
window.location.href = '/admin';
|
|
return;
|
|
}
|
|
|
|
|
|
return response;
|
|
}
|
|
|
|
// Load banner when page loads
|
|
document.addEventListener('DOMContentLoaded', loadBanner);;
|
|
</script>
|
|
</body>
|
|
</html>
|