TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-05 04:52:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

eef

Browse Source
This commit is contained in:
Tomas Dvorak
2025-05-29 13:22:36 +02:00
parent d482d45bf2
commit 3a5b4b7804
1 changed files with 98 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+98 -76
View File
@@ -18,10 +18,23 @@
<script> <script>
// Load and display banner // Load and display banner
async function loadBanner() { async function loadBanner() {
// Get banner container and content elements
const bannerContainer = document.getElementById('bannerContainer');
if (!bannerContainer) {
console.error('Banner container not found');
return;
}
// Clear existing content and set up container
bannerContainer.innerHTML = '';
bannerContainer.style.position = 'relative';
bannerContainer.style.overflow = 'hidden';
try { try {
const response = await fetch('/api/banner'); const response = await fetch('/api/banner');
if (!response.ok) { if (!response.ok) {
console.error('Failed to load banner:', response.status); console.error('Failed to load banner:', response.status);
bannerContainer.style.display = 'none';
return; return;
} }
@@ -45,14 +58,16 @@
if (!isVisible) { if (!isVisible) {
console.log('Banner is not visible'); console.log('Banner is not visible');
bannerContainer.style.display = 'none';
return; return;
} }
const bannerContainer = document.getElementById('bannerContainer'); // Clear existing content
bannerContainer.innerHTML = '<div id="bannerContent"></div>';
const bannerContent = document.getElementById('bannerContent'); const bannerContent = document.getElementById('bannerContent');
if (!bannerContainer || !bannerContent) { if (!bannerContent) {
console.error('Banner container elements not found'); console.error('Banner content element not found');
return; return;
} }
@@ -87,59 +102,58 @@
box-sizing: border-box; box-sizing: border-box;
`; `;
// Get or create banner container with link // Create banner content container
const bannerContainerEl = document.getElementById('bannerContainer'); const bannerContentEl = document.createElement('div');
if (bannerContainerEl) { bannerContentEl.id = 'bannerContent';
bannerContainerEl.style.position = 'relative'; bannerContainer.appendChild(bannerContentEl);
bannerContainerEl.style.overflow = 'hidden';
// Add the link to the entire banner container // Add link to banner if it exists
if (bannerLink) { const bannerLinkValue = banner.Link || banner.link || '';
bannerContainerEl.innerHTML = ` if (bannerLinkValue) {
<a href="${bannerLink}" target="_blank" style=" const link = document.createElement('a');
position: absolute; link.className = 'banner-link';
top: 0; link.href = bannerLinkValue;
left: 0; link.target = '_blank';
width: 100%; link.style.cssText = `
height: 100%; position: absolute;
z-index: 1; top: 0;
text-decoration: none; left: 0;
color: inherit; width: 100%;
"></a> height: 100%;
<div id="bannerInnerContent"></div> z-index: 1;
`; text-decoration: none;
} else { color: inherit;
bannerContainerEl.innerHTML = '<div id="bannerInnerContent"></div>';
}
}
// Start building banner content
let content = '';
// Only show the banner if it's visible
if (banner.Style && banner.Style.IsVisible !== false) {
content = `
<div class="banner-content" style="
padding: ${padding}px;
margin: ${margin}px;
background: ${backgroundColor};
color: ${textColor};
border-radius: ${borderRadius}px;
${style.containerStyle || ''}
position: relative;
">
<div class="banner-html-content" style="
color: ${textColor};
font-size: ${style.fontSize || '16px'};
text-align: ${style.textAlign || 'left'};
line-height: 1.5;
">
${bannerText}
</div>
</div>
`; `;
bannerContainerEl.insertBefore(link, bannerContainerEl.firstChild);
} }
// Get banner text content
const bannerTextContent = banner.Text || banner.text || '';
const bannerStyle = banner.Style || {};
// Create banner content
let content = `
<div class="banner-content" style="
padding: ${bannerStyle.Padding || padding}px;
margin: ${bannerStyle.Margin || margin}px;
background: ${bannerStyle.BackgroundColor || backgroundColor};
color: ${bannerStyle.TextColor || textColor};
border-radius: ${bannerStyle.BorderRadius || borderRadius}px;
${bannerStyle.ContainerStyle || ''}
position: relative;
overflow: hidden;
">
<div class="banner-html-content" style="
color: ${bannerStyle.TextColor || textColor};
font-size: ${bannerStyle.FontSize || '16px'};
text-align: ${bannerStyle.TextAlign || 'left'};
line-height: 1.5;
">
${bannerTextContent}
</div>
</div>
`;
// Handle image if it exists // Handle image if it exists
const bannerText = banner.text || banner.Text || ''; const bannerText = banner.text || banner.Text || '';
const bannerLink = banner.link || banner.Link || ''; const bannerLink = banner.link || banner.Link || '';
@@ -275,33 +289,40 @@
} }
} }
// Text is already added in the previous conditions
// Set the content and make banner visible // Set the content and make banner visible
const innerContent = bannerContainerEl ? bannerContentEl.innerHTML = content;
(bannerContainerEl.querySelector('#bannerInnerContent') || bannerContainerEl) : bannerContainer.style.display = 'block';
bannerContent;
if (banner.Style && banner.Style.IsVisible !== false) { // Update the banner link if it exists
innerContent.innerHTML = content; if (bannerLinkValue) {
bannerContent.style.display = 'block'; let existingLink = bannerContainer.querySelector('a.banner-link');
} else { if (!existingLink) {
bannerContent.style.display = 'none'; existingLink = document.createElement('a');
existingLink.className = 'banner-link';
existingLink.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
text-decoration: none;
color: inherit;
`;
bannerContainer.insertBefore(existingLink, bannerContainer.firstChild);
}
existingLink.href = bannerLinkValue;
existingLink.target = '_blank';
} }
// Apply custom font if specified in template // Apply custom font if specified in template
if (style.fontFamily) { if (bannerStyle.fontFamily) {
bannerContent.style.fontFamily = style.fontFamily; bannerContentEl.style.fontFamily = bannerStyle.fontFamily;
} }
// Log the content for debugging // Log the content for debugging
console.log('Banner content:', content); console.log('Banner content:', content);
// Ensure the banner is visible
bannerContainer.style.display = 'block';
bannerContainer.style.visibility = 'visible';
bannerContainer.style.opacity = '1';
} catch (error) { } catch (error) {
console.error('Error loading banner:', error); console.error('Error loading banner:', error);
} }
@@ -309,14 +330,15 @@
// Load banner when page loads // Load banner when page loads
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
loadBanner(); // Move banner to the correct position before loading
// Move banner to the correct position after load
const bannerContainer = document.getElementById('bannerContainer'); const bannerContainer = document.getElementById('bannerContainer');
const main = document.querySelector('main'); const main = document.querySelector('main');
if (bannerContainer && main) { if (bannerContainer && main) {
main.insertBefore(bannerContainer, main.firstChild); main.insertBefore(bannerContainer, main.firstElementChild);
} }
// Load banner content
loadBanner();
}); });
tailwind.config = { tailwind.config = {
@@ -333,9 +355,9 @@
</script> </script>
</head> </head>
<body class="bg-gray-100 min-h-screen"> <body class="bg-gray-100 min-h-screen">
<!-- Banner Container --> <!-- Banner Container - Will be populated by JavaScript -->
<div id="bannerContainer" style="display: none; width: 100%; transition: all 0.3s ease; margin: 0 auto; max-width: 1200px; padding: 0 1rem;"> <div id="bannerContainer" style="display: none; width: 100%; 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 id="bannerContent"></div>
</div> </div>
<nav class="bg-brand-blue text-white shadow-lg"> <nav class="bg-brand-blue text-white shadow-lg">