/home/u336066629/websites/AmAL87tCa/public_html/wp-content/themes/shf/projects.php
<?php
/* Template Name: Projects Page */
get_header();
// Get all projects from custom post type
$projects = new WP_Query(array(
'post_type' => 'project',
'posts_per_page' => -1,
'post_status' => 'publish'
));
?>
<section class="projects-page w-full h-[100vh] relative overflow-hidden">
<div class="projects-bg-transition absolute inset-0 z-[-1] transition-opacity duration-1000 opacity-0">
<div id="backgroundContainer" class="absolute inset-0 bg-cover bg-center bg-no-repeat transition-all duration-[2000ms] ease-in-out"
style="background-image: radial-gradient(70.97% 126.22% at 40% 50%, #775f62 26%, rgba(119, 95, 98, 0.96) 38%, rgba(119, 95, 98, 0.85) 52%, rgba(119, 95, 98, 0.66) 67%, rgba(119, 95, 98, 0.39) 82%, rgba(119, 95, 98, 0.06) 98%, rgba(119, 95, 98, 0) 100%), url('<?php echo get_template_directory_uri(); ?>/assets/images/duaporsche.jpg');">
</div>
</div>
<div id="topCircle" class="projects-logo absolute left-[3%] top-[4%] md:top-[11%] w-[60px] md:w-[88px] h-[60px] md:h-[88px] rounded-[50%] border-2 border-transparent opacity-0 transition-all duration-[2000ms] ease-in-out"
style="background: linear-gradient(#775F62, #775F62) padding-box, linear-gradient(180deg, #EB212E 38.5%, #775F62 100%) border-box;">
<span class="[writing-mode:vertical-lr] relative h-[140px] md:h-[200px] top-[35%] left-5 lg:left-8 rotate-180 font-alte text-[10px] md:text-[12px] font-normal text-[#BCBCBC] text-center flex items-center justify-center bg-gradient-to-b from-[#BCBCBC] to-transparent bg-clip-text">
SUNNY HILL FOUNDATION
</span>
</div>
<div class="swiper projectSwiper h-full opacity-0 transition-opacity duration-1000">
<div class="swiper-wrapper">
<?php if($projects->have_posts()): ?>
<?php $index = 0; ?>
<?php while($projects->have_posts()): $projects->the_post(); ?>
<?php $index++; ?>
<div class="swiper-slide w-full h-[100vh] flex items-center justify-center slide-<?php echo $index; ?>"
data-background="<?php echo $index === 3 ? '#4F0D13' : '#775f62'; ?>"
data-slide="<?php echo $index; ?>">
<div class="circle relative z-10 flex items-center justify-center mt-10 mr-0 lg:mt-20 lg:mr-56 transform translate-y-10 opacity-0 transition-all duration-1000">
<div class="w-[280px] md:w-[600px] relative left-0 md:left-20 text-center md:text-center font-maison text-[18px] md:text-[24px] font-[500] leading-[20px] md:leading-[24px] flex flex-col gap-6">
<span class='text-[11px] leading-[10px] relative lg:bottom-5 md:left-30 md:text-left text-center slide-subtitle transition-colors duration-[2000ms] ease-in-out'>
SUNNY HILL Foundation <br/>Projects
</span>
<div class='ml-10 w-full text-left py-8 flex slide-content text-white'>
<?php echo wp_trim_words(get_the_content(), 20, '...'); ?>
</div>
<a href="<?php the_permalink(); ?>"
class='slide-link text-[20px] leading-[20px] transition-colors duration-[2000ms] ease-in-out'>
read more...
</a>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<div class="swiper-slide w-full h-[100vh] flex items-center justify-center slide-1"
data-background="#775f62"
data-slide="1">
<div class="circle relative z-10 flex items-center justify-center mt-10 mr-0 lg:mt-20 lg:mr-56 transform translate-y-10 opacity-0 transition-all duration-1000">
<div class="w-[280px] md:w-[600px] relative left-0 md:left-20 text-center md:text-center font-maison text-[18px] md:text-[24px] font-[500] leading-[20px] md:leading-[24px] flex flex-col gap-6">
<span class='text-[11px] leading-[10px] relative lg:bottom-5 md:left-30 md:text-left text-center slide-subtitle transition-colors duration-[2000ms] ease-in-out'>
SUNNY HILL Foundation <br/>Projects
</span>
<div class='ml-10 w-full text-left py-8 flex slide-content text-white'>
No projects found. Please add some projects.
</div>
<a href="#" class='slide-link text-[20px] leading-[20px] transition-colors duration-[2000ms] ease-in-out'>read more...</a>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(() => {
document.querySelector('.projects-bg-transition').style.opacity = '1';
setTimeout(() => {
document.querySelector('.projects-logo').style.opacity = '1';
setTimeout(() => {
document.querySelector('.projectSwiper').style.opacity = '1';
document.querySelectorAll('.circle').forEach((circle, index) => {
setTimeout(() => {
circle.style.opacity = '1';
circle.style.transform = 'translateY(0)';
}, index * 300);
});
}, 400);
}, 400);
}, 100);
const swiper = new Swiper(".projectSwiper", {
slidesPerView: 1,
spaceBetween: 30,
speed: 2000,
loop: false,
centeredSlides: true,
autoplay: {
delay: 5500,
disableOnInteraction: false,
},
breakpoints: {
320: { slidesPerView: 1 },
768: { slidesPerView: 1 },
1024: { slidesPerView: 1.2 },
1440: { slidesPerView: 1.6 }
},
on: {
slideChangeTransitionStart: function () {
const offset = window.innerWidth < 768 ? 50 : 100;
document.querySelectorAll('.circle').forEach((circle, index) => {
circle.style.transform = `translateX(${(index - this.activeIndex) * offset}px)`;
});
},
slideChange: function () {
const activeSlide = this.slides[this.activeIndex];
const slideNumber = activeSlide.getAttribute('data-slide');
const backgroundContainer = document.getElementById('backgroundContainer');
const topCircle = document.getElementById('topCircle');
const slideSubtitle = activeSlide.querySelector('.slide-subtitle');
const slideLink = activeSlide.querySelector('.slide-link');
if (slideNumber === '3') {
backgroundContainer.style.backgroundImage = "radial-gradient(70.97% 126.22% at 40% 50%, #4F0D13 26%, rgba(79, 13, 19, 0.96) 38%, rgba(79, 13, 19, 0.85) 52%, rgba(79, 13, 19, 0.66) 67%, rgba(79, 13, 19, 0.39) 82%, rgba(79, 13, 19, 0.06) 98%, rgba(79, 13, 19, 0) 100%), url('<?php echo get_template_directory_uri(); ?>/assets/images/duaporsche.jpg')";
topCircle.style.background = "linear-gradient(#4F0D13, #4F0D13) padding-box, linear-gradient(180deg, #EB212E 38.5%, #4F0D13 100%) border-box";
slideSubtitle.style.color = '#ffffff';
slideLink.style.color = '#ffffff';
} else if (slideNumber === '2') {
backgroundContainer.style.backgroundImage = "none";
backgroundContainer.style.backgroundColor = "#775f62";
topCircle.style.background = "linear-gradient(#775f62, #775f62) padding-box, linear-gradient(180deg, #EB212E 38.5%, #775f62 100%) border-box";
slideSubtitle.style.color = '#540D13';
slideLink.style.color = '#540D13';
} else {
backgroundContainer.style.backgroundImage = "radial-gradient(70.97% 126.22% at 40% 50%, #775f62 26%, rgba(119, 95, 98, 0.96) 38%, rgba(119, 95, 98, 0.85) 52%, rgba(119, 95, 98, 0.66) 67%, rgba(119, 95, 98, 0.39) 82%, rgba(119, 95, 98, 0.06) 98%, rgba(119, 95, 98, 0) 100%), url('<?php echo get_template_directory_uri(); ?>/assets/images/duaporsche.jpg')";
topCircle.style.background = "linear-gradient(#775f62, #775f62) padding-box, linear-gradient(180deg, #EB212E 38.5%, #775f62 100%) border-box";
slideSubtitle.style.color = '#540D13';
slideLink.style.color = '#540D13';
}
}
}
});
});
</script>
<?php get_footer(); ?>