A!leys Galerie

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PrismSlider - Immersive Image Gallery</title>
    <style>
        :root {
            --bg-color: #0a0a0a;
            --accent-color: #00f2ff;
            --transition-speed: 0.8s;
            --ease: cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--bg-color);
            overflow: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .slider-container {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity var(--transition-speed) var(--ease), transform var(--transition-speed) var(--ease);
            transform: scale(1.1);
            background-size: cover;
            background-position: center;
        }

        .slide.active {
            opacity: 1;
            transform: scale(1);
        }

        .nav-buttons {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
            z-index: 10;
        }

        .nav-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 15px 25px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: var(--accent-color);
        }

        .indicators {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
        }

        .indicator.active {
            background: var(--accent-color);
            transform: scale(1.3);
        }

        .title-overlay {
            position: absolute;
            top: 40px;
            left: 40px;
            color: white;
            z-index: 10;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }

        .title-overlay h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .title-overlay p {
            font-size: 1.2rem;
            opacity: 0.8;
        }

        @media (max-width: 768px) {
            .title-overlay h1 { font-size: 1.8rem; }
            .title-overlay p { font-size: 1rem; }
            .nav-btn { padding: 10px 20px; }
        }
    </style>
</head>
<body>

    <div class="slider-container" id="slider">
        <div class="title-overlay">
            <h1>PrismSlider</h1>
            <p>Experience the flow of images</p>
        </div>

        <div class="indicators" id="indicators"></div>

        </div>
        </div>
        </div>
        </div>

        <div class="nav-buttons">
            <button class="nav-btn" id="prevBtn">Prev</button>
            <button class="nav-btn" id="nextBtn">Next</button>
        </div>
    </div>

    <script>
        const slides = document.querySelectorAll('.slide');
        const indicators = document.getElementById('indicators');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        let currentSlide = 0;

        // Create indicators
        slides.forEach((_, index) => {
            const indicator = document.createElement('div');
            indicator.classList.add('indicator');
            if (index === 0) indicator.classList.add('active');
            indicators.appendChild(indicator);
        });

        const updateSlider = () => {
            slides.forEach((slide, index) => {
                slide.classList.toggle('active', index === currentSlide);
            });
            
            const indicatorElements = document.querySelectorAll('.indicator');
            indicatorElements.forEach((indicator, index) => {
                indicator.classList.toggle('active', index === currentSlide);
            });

            // Dynamic background color based on image
            const currentImage = slides[currentSlide].style.backgroundImage;
            const color = currentImage.match(/rgb\(\d+,\s*\d+,\s*\d+\)/);
            if (color) {
                const [r, g, b] = color[1].split(',').map(Number);
                document.body.style.backgroundColor = `rgb(${r/4}, ${g/4}, ${b/4})`;
            }
        };

        prevBtn.addEventListener('click', () => {
            currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            updateSlider();
        });

        nextBtn.addEventListener('click', () => {
            currentSlide = (currentSlide + 1) % slides.length;
            updateSlider();
        });

        // Touch support
        let touchStartX = 0;
        let touchEndX = 0;

        const sliderContainer = document.getElementById('slider');

        sliderContainer.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        }, { passive: true });

        sliderContainer.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        }, { passive: true });

        const handleSwipe = () => {
            if (touchStartX - touchEndX > 50) {
                // Swipe left -> next
                currentSlide = (currentSlide + 1) % slides.length;
                updateSlider();
            } else if (touchEndX - touchStartX > 50) {
                // Swipe right -> prev
                currentSlide = (currentSlide - 1 + slides.length) % slides.length;
                updateSlider();
            }
        };

        // Auto-play
        let autoPlayInterval = setInterval(() => {
            currentSlide = (currentSlide + 1) % slides.length;
            updateSlider();
        }, 5000);

        // Pause auto-play on interaction
        const pauseAutoPlay = () => {
            clearInterval(autoPlayInterval);
            autoPlayInterval = setInterval(() => {
                currentSlide = (currentSlide + 1) % slides.length;
                updateSlider();
            }, 5000);
        };

        prevBtn.addEventListener('mousedown', pauseAutoPlay);
        nextBtn.addEventListener('mousedown', pauseAutoPlay);
        sliderContainer.addEventListener('mousedown', pauseAutoPlay);

        // Initialize
        updateSlider();
    </script>
</body>
</html>