A!leys Galerie

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Scroll Kaleidoscope</title>
    <style>
        :root {
            --bg-color: #0a0a1a;
            --accent-color: #00f0ff;
            --text-color: #fff;
        }

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

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Arial', sans-serif;
            overflow-x: hidden;
            transition: background-color 0.5s ease;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        button {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--accent-color);
            border: 2px solid var(--accent-color);
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

        button:hover {
            background-color: var(--accent-color);
            color: var(--bg-color);
            transform: translateY(-2px);
        }

        .feed {
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 20px;
            background-color: rgba(10, 10, 26, 0.5);
            border-radius: 10px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .image-item {
            width: 100%;
            height: 300px;
            background-size: cover;
            background-position: center;
            border-radius: 8px;
            transition: transform 0.5s ease, filter 0.3s ease;
            opacity: 0;
            animation: fadeIn 0.5s forwards;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }

        .image-item:hover {
            transform: scale(1.02);
            filter: brightness(1.1);
        }

        .loader {
            text-align: center;
            padding: 20px;
            color: var(--accent-color);
            font-style: italic;
            display: none;
        }

        .stats {
            text-align: center;
            margin-top: 20px;
            font-size: 0.9rem;
            opacity: 0.7;
        }

        footer {
            text-align: center;
            margin-top: 30px;
            padding: 10px;
            font-size: 0.8rem;
            opacity: 0.6;
        }

        /* Kaleidoscope pattern styles */
        .kaleidoscope {
            background-image: radial-gradient(circle, transparent 20%, var(--accent-color) 20%);
            background-size: 20px 20px;
            position: relative;
        }

        .kaleidoscope::before,
        .kaleidoscope::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: 20px 20px;
        }

        .kaleidoscope::before {
            background-image: radial-gradient(circle, transparent 20%, #00f0ff 20%, transparent 40%),
                              radial-gradient(circle, transparent 20%, #ff00f0 20%, transparent 40%);
            background-position: 0 0, 10px 0;
        }

        .kaleidoscope::after {
            background-image: radial-gradient(circle, transparent 20%, #00ff00 20%, transparent 40%);
            background-position: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Infinite Scroll Kaleidoscope</h1>
            <p>Endless fractal patterns with interactive color blending</p>
        </header>

        <div class="controls">
            <button id="shuffle-btn">Shuffle Colors</button>
            <button id="reset-btn">Reset Patterns</button>
            <button id="speed-btn">Faster Loading</button>
        </div>

        <div class="feed" id="feed">
            <!-- Image items will be dynamically added here -->
        </div>

        <div class="loader" id="loader">
            Generating infinite fractal patterns...
        </div>

        <div class="stats" id="stats">
            Loaded: <span id="loaded-count">0</span> | Total: <span id="total-count">0</span>
        </div>

        <footer>
            <p>Click or hover on images to see them come alive with interactive effects</p>
        </footer>
    </div>

    <script>
        // Configuration
        const config = {
            initialLoad: 5,
            loadIncrement: 3,
            maxItems: 50,
            imageSize: { width: 1200, height: 300 },
            patternTypes: [
                'radial', 'conic', 'stripes', 'hexagonal', 'waves'
            ],
            colors: [
                '#00f0ff', '#ff00f0', '#00ff00', '#f0ff00', '#ff0066',
                '#6600ff', '#00f066', '#f066ff', '#66f0ff', '#ff6600'
            ],
            transitionSpeed: 0.5,
            currentSpeed: 0.5
        };

        // DOM elements
        const feed = document.getElementById('feed');
        const loader = document.getElementById('loader');
        const shuffleBtn = document.getElementById('shuffle-btn');
        const resetBtn = document.getElementById('reset-btn');
        const speedBtn = document.getElementById('speed-btn');
        const loadedCount = document.getElementById('loaded-count');
        const totalCount = document.getElementById('total-count');
        const body = document.body;

        // State
        let currentIndex = 0;
        let isLoading = false;
        let imageItems = [];

        // Initialize the application
        function init() {
            loadImages(config.initialLoad);
            setupEventListeners();
            updateStats();
        }

        // Load more images with lazy loading
        function loadImages(count) {
            if (isLoading || currentIndex >= config.maxItems) return;

            isLoading = true;
            loader.style.display = 'block';

            for (let i = 0; i < count && currentIndex < config.maxItems; i++) {
                const item = createImageItem();
                feed.appendChild(item);
                imageItems.push(item);
                currentIndex++;

                // Simulate loading time with random delay
                setTimeout(() => {
                    const canvas = document.createElement('canvas');
                    canvas.width = config.imageSize.width;
                    canvas.height = config.imageSize.height;
                    const ctx = canvas.getContext('2d');

                    // Generate kaleidoscopic pattern
                    generateKaleidoscope(ctx, currentIndex);

                    item.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
                }, 200 * (i + 1));
            }

            // Load more when scroll reaches bottom
            setupScrollListener();

            isLoading = false;
            updateStats();
            loader.style.display = 'none';
        }

        // Create a new image item element
        function createImageItem() {
            const item = document.createElement('div');
            item.className = 'image-item kaleidoscope';
            item.style.height = `${config.imageSize.height}px`;

            // Add interactive hover effect
            item.addEventListener('mouseenter', () => {
                item.style.transform = 'scale(1.02)';
                item.style.filter = 'brightness(1.1)';
            });

            item.addEventListener('mouseleave', () => {
                item.style.transform = 'scale(1)';
                item.style.filter = 'none';
            });

            return item;
        }

        // Generate kaleidoscopic pattern
        function generateKaleidoscope(ctx, index) {
            const patternType = config.patternTypes[index % config.patternTypes.length];
            const color1 = config.colors[index % config.colors.length];
            const color2 = config.colors[(index + 3) % config.colors.length];
            const color3 = config.colors[(index + 6) % config.colors.length];

            // Clear canvas
            ctx.clearRect(0, 0, config.imageSize.width, config.imageSize.height);

            // Choose pattern based on type
            switch (patternType) {
                case 'radial':
                    generateRadialPattern(ctx, color1, color2, color3);
                    break;
                case 'conic':
                    generateConicPattern(ctx, color1, color2, color3);
                    break;
                case 'stripes':
                    generateStripePattern(ctx, color1, color2, color3);
                    break;
                case 'hexagonal':
                    generateHexagonalPattern(ctx, color1, color2, color3);
                    break;
                case 'waves':
                    generateWavePattern(ctx, color1, color2, color3);
                    break;
            }
        }

        // Set up scroll listener for infinite loading
        function setupScrollListener() {
            window.addEventListener('scroll', handleScroll, { passive: true });
        }

        function handleScroll() {
            const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
            const scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;

            if (scrollPercentage > 80 && !isLoading && currentIndex < config.maxItems) {
                loadImages(config.loadIncrement);
            }
        }

        // Event listeners for controls
        function setupEventListeners() {
            shuffleBtn.addEventListener('click', () => {
                shuffleColors();
                for (let i = 0; i < imageItems.length; i++) {
                    const canvas = document.createElement('canvas');
                    canvas.width = config.imageSize.width;
                    canvas.height = config.imageSize.height;
                    const ctx = canvas.getContext('2d');
                    generateKaleidoscope(ctx, i);
                    imageItems[i].style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
                }
            });

            resetBtn.addEventListener('click', () => {
                currentIndex = 0;
                feed.innerHTML = '';
                imageItems = [];
            });

            speedBtn.addEventListener('click', () => {
                config.currentSpeed = config.transitionSpeed;
            });
        }

        // Shuffle colors
        function shuffleColors() {
            const colors = config.colors.slice();
            const shuffledColors = [];

            while (colors.length > 0) {
                const randomIndex = Math.floor(Math.random() * colors.length);
                shuffledColors.push(colors.splice(randomIndex, 1)[0]);
            }

            config.colors = shuffledColors;
        }

        // Update stats
        function updateStats() {
            loadedCount.textContent = currentIndex;
            totalCount.textContent = config.maxItems;
        }

        // Initialize the application
        init();
    </script>
</body>
</html>
```