TDvorak/SportCreative
1
0
Fork 0
mirror of https://github.com/Dvorinka/sportcreative.git synced 2026-07-29 05:23:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Small fix

Browse Source
This commit is contained in:
Tomas Dvorak
2025-06-21 23:08:19 +02:00
parent 1aeb3a2c8e
commit 8028427827
102 changed files with 11199 additions and 660 deletions
Download Patch File Download Diff File Expand all files Collapse all files
script.js
+105 -39
View File
@@ -1,3 +1,19 @@
// FAQ Toggle Function
function toggleFAQ(button) {
const content = button.nextElementSibling;
const icon = button.querySelector('ion-icon');
// Toggle the content
content.classList.toggle('hidden');
// Rotate the icon
if (content.classList.contains('hidden')) {
icon.style.transform = 'rotate(0deg)';
} else {
icon.style.transform = 'rotate(180deg)';
}
}
document.addEventListener('DOMContentLoaded', function() {
// Mobile menu functionality
const menuButton = document.querySelector('.mobile-menu-button');
@@ -70,21 +86,64 @@ document.addEventListener('DOMContentLoaded', function() {
}
}
window.addEventListener('resize', handleResize);
// Highlight section based on URL hash
function highlightSectionFromHash() {
// Remove any existing highlights
document.querySelectorAll('.highlighted-section').forEach(el => {
el.classList.remove('highlighted-section');
el.style.border = '';
});
// Check for hash in URL
if (window.location.hash) {
const targetId = window.location.hash.substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.classList.add('highlighted-section');
targetElement.style.border = '3px solid #ff9933';
targetElement.style.borderRadius = '0.5rem';
targetElement.style.padding = '1rem';
targetElement.style.transition = 'all 0.3s ease';
// Smooth scroll to the element
setTimeout(() => {
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
}, 100);
}
}
}
// Run on page load and when hash changes
highlightSectionFromHash();
window.addEventListener('hashchange', highlightSectionFromHash);
// Portfolio filtering functionality - only run if elements exist
const filterButtons = document.querySelectorAll('.portfolio-filter-btn');
const portfolioItems = document.querySelectorAll('.portfolio-item');
const allPortfolioItems = document.querySelectorAll('.portfolio-item');
// Only run portfolio filtering if we have both buttons and items
if (filterButtons.length > 0 && portfolioItems.length > 0) {
if (filterButtons.length > 0 && allPortfolioItems.length > 0) {
// Filter functionality
filterButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
filterButtons.forEach(btn => btn.classList.remove('bg-sport-purple', 'text-white'));
// Add active class to clicked button
this.classList.add('bg-sport-purple', 'text-white');
// Remove active classes from all buttons
filterButtons.forEach(btn => {
btn.classList.remove('bg-sport-purple', 'bg-sport-orange', 'text-white');
btn.classList.add('bg-white', 'text-gray-700');
});
// Add appropriate active class based on button type
if (this.getAttribute('data-filter') === 'all') {
this.classList.remove('bg-white', 'text-gray-700');
this.classList.add('bg-sport-purple', 'text-white');
} else {
this.classList.remove('bg-white', 'text-gray-700');
this.classList.add('bg-sport-orange', 'text-white');
}
const filterValue = this.getAttribute('data-filter');
@@ -106,49 +165,56 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
// Initialize portfolio with "all" selected
const allFilterButton = document.querySelector('[data-filter="all"]');
if (allFilterButton) {
allFilterButton.click();
}
// Initialize portfolio with "all" selected and set initial button colors
filterButtons.forEach(btn => {
if (btn.getAttribute('data-filter') === 'all') {
btn.classList.remove('bg-white', 'text-gray-700');
btn.classList.add('bg-sport-purple', 'text-white');
} else {
btn.classList.remove('bg-sport-orange', 'text-white');
btn.classList.add('bg-white', 'text-gray-700');
}
});
// Portfolio item hover effects
// Show all items initially
portfolioItems.forEach(item => {
item.addEventListener('mouseenter', function() {
const overlay = this.querySelector('.portfolio-overlay');
if (overlay) {
overlay.classList.remove('opacity-0');
overlay.classList.add('opacity-100');
}
});
item.style.display = 'block';
});
// Portfolio item hover effects - using CSS for hover instead
// This ensures hover works regardless of filter state
portfolioItems.forEach(item => {
// Remove any existing mouseenter/mouseleave event listeners
const newItem = item.cloneNode(true);
item.parentNode.replaceChild(newItem, item);
item.addEventListener('mouseleave', function() {
// Add click handler for each portfolio item
newItem.addEventListener('click', function(e) {
// Prevent the click from bubbling up to parent elements
e.stopPropagation();
// Toggle a class to handle the overlay visibility on click
const overlay = this.querySelector('.portfolio-overlay');
if (overlay) {
overlay.classList.remove('opacity-100');
overlay.classList.add('opacity-0');
overlay.classList.toggle('opacity-0');
overlay.classList.toggle('opacity-100');
// Close other open overlays
portfolioItems.forEach(otherItem => {
if (otherItem !== this) {
const otherOverlay = otherItem.querySelector('.portfolio-overlay');
if (otherOverlay) {
otherOverlay.classList.add('opacity-0');
otherOverlay.classList.remove('opacity-100');
}
}
});
}
});
});
}
// Enhanced button hover effects - limited to actual buttons
const buttons = document.querySelectorAll('button:not(.portfolio-filter-btn), .btn');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
const x = e.pageX - this.offsetLeft;
const y = e.pageY - this.offsetTop;
const ripple = document.createElement('span');
ripple.classList.add('ripple');
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
this.appendChild(ripple);
setTimeout(() => ripple.remove(), 1000);
});
});
// Back to top functionality with smooth show/hide
const backToTop = document.getElementById('backToTop');