mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-03 20:12:59 +00:00
Add files via upload
This commit is contained in:
Tomáš Dvořák
+112
-11
@@ -100,10 +100,73 @@
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.banner-preview {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
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;
|
||||
@@ -120,11 +183,29 @@
|
||||
<div class="container">
|
||||
<h2>Vítejte v administraci</h2>
|
||||
|
||||
<div class="card" style="margin-bottom: 2rem;">
|
||||
<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"></textarea>
|
||||
<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>
|
||||
@@ -137,16 +218,18 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bannerBgColor">Barva pozadí</label>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<input type="text" id="bannerBgColor" value="#f8d7da">
|
||||
<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 style="display: flex; align-items: center;">
|
||||
<input type="text" id="bannerTextColor" value="#721c24">
|
||||
<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>
|
||||
@@ -167,7 +250,22 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bannerPadding">Odsazení (px)</label>
|
||||
<input type="text" id="bannerPadding" value="10">
|
||||
<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>
|
||||
@@ -178,8 +276,11 @@
|
||||
<div class="style-preset" data-preset="error">Chyba</div>
|
||||
</div>
|
||||
|
||||
<div class="banner-preview" id="bannerPreview" style="margin-top: 20px; padding: 15px; display: none;">
|
||||
Náhled banneru se zde zobrazí
|
||||
<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;">
|
||||
|
||||
@@ -14,12 +14,16 @@ type BannerStyle struct {
|
||||
FontSize string `json:"fontSize"`
|
||||
TextAlign string `json:"textAlign"`
|
||||
Padding string `json:"padding"`
|
||||
Margin string `json:"margin"`
|
||||
BorderRadius string `json:"borderRadius"`
|
||||
IsVisible bool `json:"isVisible"`
|
||||
}
|
||||
|
||||
type BannerContent struct {
|
||||
Text string `json:"text"`
|
||||
Style BannerStyle `json:"style"`
|
||||
Text string `json:"text"`
|
||||
Image string `json:"image,omitempty"`
|
||||
Link string `json:"link,omitempty"`
|
||||
Style BannerStyle `json:"style"`
|
||||
}
|
||||
|
||||
var (
|
||||
|
||||
+45
-11
@@ -24,23 +24,46 @@
|
||||
|
||||
const banner = await response.json();
|
||||
|
||||
if (!banner.style.isVisible) return;
|
||||
if (!banner.style || banner.style.isVisible === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bannerContainer = document.getElementById('bannerContainer');
|
||||
const bannerContent = document.getElementById('bannerContent');
|
||||
|
||||
if (!bannerContainer || !bannerContent) return;
|
||||
|
||||
// Apply styles
|
||||
Object.assign(bannerContainer.style, {
|
||||
display: 'block',
|
||||
Object.assign(bannerContent.style, {
|
||||
backgroundColor: banner.style.backgroundColor || '#f8d7da',
|
||||
color: banner.style.textColor || '#721c24',
|
||||
textAlign: banner.style.textAlign || 'center',
|
||||
fontSize: banner.style.fontSize || '16px',
|
||||
padding: banner.style.padding || '10px'
|
||||
fontSize: banner.style.fontSize || '18px',
|
||||
padding: banner.style.padding || '20px',
|
||||
margin: banner.style.margin ? `${banner.style.margin}px 0` : '20px 0',
|
||||
borderRadius: banner.style.borderRadius || '8px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
display: 'block'
|
||||
});
|
||||
|
||||
// Set content
|
||||
bannerContent.innerHTML = banner.text || '';
|
||||
// Handle image
|
||||
let content = banner.text || '';
|
||||
if (banner.image) {
|
||||
content = `
|
||||
<div style="margin-bottom: 15px;">
|
||||
<img src="${banner.image}" style="max-width: 100%; max-height: 200px; border-radius: 4px;">
|
||||
</div>
|
||||
${content}
|
||||
`;
|
||||
}
|
||||
|
||||
// Wrap in link if provided
|
||||
if (banner.link) {
|
||||
content = `<a href="${banner.link}" style="color: inherit; text-decoration: none; display: block;">${content}</a>`;
|
||||
}
|
||||
|
||||
bannerContent.innerHTML = content;
|
||||
bannerContainer.style.display = 'block';
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading banner:', error);
|
||||
@@ -48,7 +71,16 @@
|
||||
}
|
||||
|
||||
// Load banner when page loads
|
||||
document.addEventListener('DOMContentLoaded', loadBanner);
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadBanner();
|
||||
|
||||
// Move banner to the correct position after load
|
||||
const bannerContainer = document.getElementById('bannerContainer');
|
||||
const main = document.querySelector('main');
|
||||
if (bannerContainer && main) {
|
||||
main.insertBefore(bannerContainer, main.firstChild);
|
||||
}
|
||||
});
|
||||
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
@@ -65,8 +97,8 @@
|
||||
</head>
|
||||
<body class="bg-gray-100 min-h-screen">
|
||||
<!-- Banner Container -->
|
||||
<div id="bannerContainer" style="display: none; width: 100%; transition: all 0.3s ease;">
|
||||
<div id="bannerContent" style="padding: 10px; text-align: center;"></div>
|
||||
<div id="bannerContainer" style="display: none; width: 100%; transition: all 0.3s ease; margin: 0 auto; max-width: 1200px; padding: 0 1rem;">
|
||||
<div id="bannerContent" style="padding: 20px; text-align: center; border-radius: 8px; margin: 20px 0;"></div>
|
||||
</div>
|
||||
|
||||
<nav class="bg-brand-blue text-white shadow-lg">
|
||||
@@ -125,7 +157,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="container mx-auto px-4 py-8">
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<!-- Banner will be inserted here by JavaScript -->
|
||||
|
||||
<!-- Search -->
|
||||
<div class="mb-8 max-w-xl mx-auto">
|
||||
<div class="relative">
|
||||
|
||||
Reference in New Issue
Block a user