TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-03 20:12:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Tomáš Dvořák
2025-05-26 12:56:19 +02:00
committed by GitHub
parent b3bcf5fb9f
commit 56c8ca1f40
3 changed files with 163 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+45 -11
View File
@@ -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">