|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>JuniusTech ERP Services</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
.slider-container { |
|
|
width: 1140px; |
|
|
height: 550px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
} |
|
|
.slider { |
|
|
display: flex; |
|
|
transition: transform 0.5s ease; |
|
|
height: 100%; |
|
|
} |
|
|
.slide { |
|
|
min-width: 100%; |
|
|
height: 100%; |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
position: relative; |
|
|
} |
|
|
.slide-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 100%); |
|
|
} |
|
|
.slider-nav { |
|
|
position: absolute; |
|
|
bottom: 20px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
z-index: 10; |
|
|
} |
|
|
.nav-dot { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background-color: rgba(255,255,255,0.5); |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.nav-dot.active { |
|
|
background-color: #fff; |
|
|
transform: scale(1.2); |
|
|
} |
|
|
.slide-1 { |
|
|
background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1140&q=80'); |
|
|
} |
|
|
.slide-2 { |
|
|
background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1140&q=80'); |
|
|
} |
|
|
.slide-3 { |
|
|
background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1140&q=80'); |
|
|
} |
|
|
.slide-4 { |
|
|
background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1140&q=80'); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 flex items-center justify-center p-4"> |
|
|
<div class="slider-container rounded-xl shadow-2xl overflow-hidden"> |
|
|
<div class="slider"> |
|
|
|
|
|
<div class="slide slide-1"> |
|
|
<div class="slide-overlay"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slide slide-2"> |
|
|
<div class="slide-overlay"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slide slide-3"> |
|
|
<div class="slide-overlay"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="slide slide-4"> |
|
|
<div class="slide-overlay"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="slider-nav"> |
|
|
<div class="nav-dot active" data-slide="0"></div> |
|
|
<div class="nav-dot" data-slide="1"></div> |
|
|
<div class="nav-dot" data-slide="2"></div> |
|
|
<div class="nav-dot" data-slide="3"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const slider = document.querySelector('.slider'); |
|
|
const slides = document.querySelectorAll('.slide'); |
|
|
const dots = document.querySelectorAll('.nav-dot'); |
|
|
let currentSlide = 0; |
|
|
const slideCount = slides.length; |
|
|
|
|
|
|
|
|
const slideInterval = setInterval(nextSlide, 4000); |
|
|
|
|
|
function goToSlide(n) { |
|
|
currentSlide = (n + slideCount) % slideCount; |
|
|
slider.style.transform = `translateX(-${currentSlide * 100}%)`; |
|
|
|
|
|
|
|
|
dots.forEach((dot, index) => { |
|
|
dot.classList.toggle('active', index === currentSlide); |
|
|
}); |
|
|
|
|
|
|
|
|
clearInterval(slideInterval); |
|
|
slideInterval = setInterval(nextSlide, 4000); |
|
|
} |
|
|
|
|
|
function nextSlide() { |
|
|
goToSlide(currentSlide + 1); |
|
|
} |
|
|
|
|
|
|
|
|
dots.forEach(dot => { |
|
|
dot.addEventListener('click', function() { |
|
|
goToSlide(parseInt(this.dataset.slide)); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const sliderContainer = document.querySelector('.slider-container'); |
|
|
sliderContainer.addEventListener('mouseenter', () => { |
|
|
clearInterval(slideInterval); |
|
|
}); |
|
|
|
|
|
sliderContainer.addEventListener('mouseleave', () => { |
|
|
clearInterval(slideInterval); |
|
|
slideInterval = setInterval(nextSlide, 4000); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yamanju/r" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
