Spaces:

db69
/

flowers

Running

File size: 29,238 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flower Wisdom Spinner</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: 'Courier New', monospace;
            cursor: grab;
            user-select: none;
            background: linear-gradient(135deg, #000428, #004e92);
        }
        
        #spinner-container {
            position: fixed;
            width: 100%;
            height: 100%;
        }
        
        #ui-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%; /* Take full width of the screen */
            pointer-events: none;
            z-index: 100;
            color: white;
            padding: 1rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center; /* Center items horizontally */
            justify-content: flex-start;
            text-align: center; /* For better alignment on mobile */
        }
        
        /* Optional: make text size and padding adjust on smaller screens */
        @media (max-width: 600px) {
            #ui-overlay {
                padding: 0.5rem;
                font-size: 0.9rem;
            }
        }


        
        .title {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
            background: linear-gradient(to right, #fbc2eb, #a6c1ee);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .subtitle {
            font-size: 1rem;
            margin-bottom: 2rem;
            color: rgba(255,255,255,0.7);
            max-width: 500px;
            text-align: center;
            line-height: 1.5;
        }
        
        #wisdom-container {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            max-width: 600px;
            max-height: 200px;
            overflow-y: auto;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 1rem;
            padding: 1rem;
            backdrop-filter: blur(10px);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .wisdom-bubble {
            background: rgba(255,255,255,0.1);
            border-radius: 1rem;
            padding: 0.8rem 1.2rem;
            margin-bottom: 0.8rem;
            animation: fadeIn 0.5s ease-out;
            border: 1px solid rgba(255,255,255,0.2);
            width: 90%;
            text-align: center;
            font-style: italic;
            color: #fff;
            position: relative;
        }
        
        .wisdom-bubble::before {
            content: "❝";
            position: absolute;
            left: 0.5rem;
            top: 0.5rem;
            font-size: 1.5rem;
            opacity: 0.5;
        }
        
        .wisdom-bubble::after {
            content: "❞";
            position: absolute;
            right: 0.5rem;
            bottom: 0.5rem;
            font-size: 1.5rem;
            opacity: 0.5;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .control-btn {
            position: fixed;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            border: 2px solid rgba(255,255,255,0.3);
            backdrop-filter: blur(5px);
            pointer-events: auto;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.8rem;
            text-align: center;
            transition: all 0.3s;
            z-index: 200;
        }
        
        .control-btn:hover {
            background: rgba(255,255,255,0.2);
            transform: scale(1.1);
        }
        
        #color-btn {
            bottom: 12rem;
            left: 2rem;
        }
        
        #reset-btn {
            bottom: 2rem;
            right: 2rem;
        }
        
        #speed-indicator {
            position: fixed;
            bottom: 12rem;
            right: 2rem;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            border: 2px solid rgba(255,255,255,0.3);
            backdrop-filter: blur(5px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.9rem;
        }
        
        #speed-value {
            font-size: 1.2rem;
            font-weight: bold;
            margin-top: 0.2rem;
        }
        
        .particle {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div id="spinner-container"></div>
    
    <div id="ui-overlay">
        <div class="title">FLOWER OF WISDOM</div>
        <div class="subtitle">Spin the flower to release petals of Kabir's wisdom. The faster you spin, the more wisdom blossoms.</div>
    </div>
    
    <div id="wisdom-container">
        <div class="wisdom-bubble">"Between the conscious and the unconscious, the mind has put up a swing."</div>
    </div>
    
    <div class="control-btn" id="color-btn">CHANGE<br>FLOWER</div>
    <div class="control-btn" id="reset-btn">RESET</div>
    
    <div id="speed-indicator">
        <div>SPEED</div>
        <div id="speed-value">0%</div>
    </div>

    <script>
        // Flower Wisdom Spinner
        const container = document.getElementById('spinner-container');
        const width = container.clientWidth;
        const height = container.clientHeight;
        
        // Create scene
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000428);
        
        // Camera
        const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
        camera.position.z = 5;
        
        // Renderer
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(width, height);
        renderer.setPixelRatio(window.devicePixelRatio);
        container.appendChild(renderer.domElement);
        
        // Add bloom effect for glowing flowers
        const bloomParams = {
            exposure: 1,
            bloomStrength: 1.5,
            bloomThreshold: 0,
            bloomRadius: 0.5
        };
        
        // Lights
        const ambientLight = new THREE.AmbientLight(0x404040);
        scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);
        
        // Create the flower spinner
        let flower;
        let flowerSpeed = 0;
        let maxSpeed = 30;
        let isDragging = false;
        let previousMousePosition = { x: 0, y: 0 };
        let currentColor = 0xff69b4; // Start with pink
        let colorChangeInterval;
        let lastWisdomDropTime = 0;
        let wisdomDropped = false;
        let particles = [];
        let particleSystem;
        
        // Flower colors
        const flowerColors = [
            0xff69b4, // Hot pink
            0x9370db, // Medium purple
            0xffa500, // Orange
            0x32cd32, // Lime green
            0x00bfff, // Deep sky blue
            0xff6347, // Tomato
            0xda70d6, // Orchid
            0x20b2aa  // Light sea green
        ];
        
        // Kabir's wisdom sayings
        const kabirWisdom = [
            "Between the conscious and the unconscious, the mind has put up a swing.",
            "The river that flows in you also flows in me.",
            "When the drop merges into the ocean, who can find it?",
            "The guest is inside you, and also inside me.",
            "Wherever you are is the entry point.",
            "The truth was a mirror in the hands of God. It fell, and broke into pieces.",
            "I laugh when I hear that the fish in the water is thirsty.",
            "The moon shines in my body, but my blind eyes cannot see it.",
            "What you are searching for is seeking you.",
            "If you don't break your ropes while you're alive, do you think ghosts will do it after?",
            "The water in the vessel is sparkling; the water in the sea is dark.",
            "When you really look for me, you will see me instantly.",
            "The lane of love is narrow—there is room for only one.",
            "What is seen is not the Truth; what is unseen is not a lie.",
            "The flute of the infinite is played without ceasing."
        ];
        
        // Create flower geometry
        function createFlowerPetal() {
            const shape = new THREE.Shape();
            const x = 0, y = 0;
            
            shape.moveTo(x, y);
            shape.bezierCurveTo(x + 0.5, y + 0.5, x + 1, y + 0.8, x + 1.5, y);
            shape.bezierCurveTo(x + 1, y - 0.8, x + 0.5, y - 0.5, x, y);
            
            const extrudeSettings = {
                steps: 1,
                depth: 0.1,
                bevelEnabled: true,
                bevelThickness: 0.1,
                bevelSize: 0.1,
                bevelSegments: 8
            };
            
            return new THREE.ExtrudeGeometry(shape, extrudeSettings);
        }
        
        // Create small flower particle
        function createSmallFlower() {
            const group = new THREE.Group();
            
            // Center of small flower
            const centerGeo = new THREE.SphereGeometry(0.05, 16, 16);
            const centerMat = new THREE.MeshPhongMaterial({ 
                color: 0xffff00,
                emissive: 0xffff00,
                emissiveIntensity: 0.5
            });
            const center = new THREE.Mesh(centerGeo, centerMat);
            group.add(center);
            
            // Create 5 simple petals
            const petalGeo = new THREE.ConeGeometry(0.1, 0.2, 4, 1);
            const petalMat = new THREE.MeshPhongMaterial({ 
                color: currentColor,
                emissive: currentColor,
                emissiveIntensity: 0.3,
                flatShading: true
            });
            
            for (let i = 0; i < 5; i++) {
                const petal = new THREE.Mesh(petalGeo, petalMat);
                petal.rotation.z = (i * Math.PI * 2) / 5;
                petal.position.x = Math.cos(petal.rotation.z) * 0.15;
                petal.position.y = Math.sin(petal.rotation.z) * 0.15;
                petal.rotation.x = Math.PI / 2;
                group.add(petal);
            }
            
            return group;
        }
        
        // Create the main flower spinner
        function createFlowerSpinner() {
            const group = new THREE.Group();
            
            // Flower center
            const centerGeometry = new THREE.SphereGeometry(0.4, 32, 32);
            const centerMaterial = new THREE.MeshPhongMaterial({ 
                color: 0xffff00,
                emissive: 0xffff00,
                emissiveIntensity: 0.8,
                shininess: 100 
            });
            const center = new THREE.Mesh(centerGeometry, centerMaterial);
            group.add(center);
            
            // Create petals
            const petalGeometry = createFlowerPetal();
            const petalMaterial = new THREE.MeshPhongMaterial({ 
                color: currentColor,
                emissive: currentColor,
                emissiveIntensity: 0.5,
                side: THREE.DoubleSide,
                specular: 0xffffff,
                shininess: 30
            });
            
            // Create 8 petals in a circle
            for (let i = 0; i < 8; i++) {
                const petal = new THREE.Mesh(petalGeometry, petalMaterial);
                petal.rotation.z = (i * Math.PI * 2) / 8;
                petal.position.x = Math.cos(petal.rotation.z) * 0.8;
                petal.position.y = Math.sin(petal.rotation.z) * 0.8;
                group.add(petal);
                
                // Add some details to petals
                const lineGeometry = new THREE.BufferGeometry().setFromPoints([
                    new THREE.Vector3(0, 0, 0),
                    new THREE.Vector3(1.5, 0, 0)
                ]);
                const lineMaterial = new THREE.LineBasicMaterial({ 
                    color: 0xffff00,
                    linewidth: 2
                });
                const line = new THREE.Line(lineGeometry, lineMaterial);
                line.position.x = Math.cos(petal.rotation.z) * 0.8;
                line.position.y = Math.sin(petal.rotation.z) * 0.8;
                line.rotation.z = petal.rotation.z;
                line.scale.set(0.7, 0.7, 0.7);
                group.add(line);
            }
            
            // Add some leaves at the bottom
            const leafGeometry = new THREE.ConeGeometry(0.3, 0.8, 4, 1);
            const leafMaterial = new THREE.MeshPhongMaterial({ 
                color: 0x32cd32,
                emissive: 0x228b22,
                emissiveIntensity: 0.3
            });
            
            for (let i = 0; i < 3; i++) {
                const leaf = new THREE.Mesh(leafGeometry, leafMaterial);
                leaf.rotation.z = (i * Math.PI * 2) / 3;
                leaf.rotation.x = Math.PI / 2;
                leaf.position.y = -0.8;
                group.add(leaf);
            }
            
            return group;
        }
        
        flower = createFlowerSpinner();
        scene.add(flower);
        
        // Create particle system for floating petals
        function createParticleSystem() {
            const particles = [];
            const particleCount = 100;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = createSmallFlower();
                
                // Random position in a sphere
                const radius = 5 * Math.random() * 0.5;
                const theta = Math.random() * Math.PI * 2;
                const phi = Math.random() * Math.PI * 2;
                
                particle.position.x = radius * Math.sin(theta) * Math.cos(phi);
                particle.position.y = radius * Math.sin(theta) * Math.sin(phi);
                particle.position.z = radius * Math.cos(theta);
                
                // Random scale and rotation
                const scale = 0.2 + Math.random() * 0.3;
                particle.scale.set(scale, scale, scale);
                particle.rotation.set(
                    Math.random() * Math.PI,
                    Math.random() * Math.PI,
                    Math.random() * Math.PI
                );
                
                // Store velocity for animation
                particle.userData = {
                    velocity: new THREE.Vector3(
                        (Math.random() - 0.5) * 0.01,
                        (Math.random() - 0.5) * 0.01,
                        (Math.random() - 0.5) * 0.01
                    ),
                    rotationSpeed: new THREE.Vector3(
                        (Math.random() - 0.5) * 0.01,
                        (Math.random() - 0.5) * 0.01,
                        (Math.random() - 0.5) * 0.01
                    )
                };
                
                particles.push(particle);
            }
            
            return particles;
        }
        
        // Initialize particle system
        particleSystem = createParticleSystem();
        particleSystem.forEach(particle => scene.add(particle));
        
        // Handle window resize
        window.addEventListener('resize', () => {
            const newWidth = container.clientWidth;
            const newHeight = container.clientHeight;
            
            camera.aspect = newWidth / newHeight;
            camera.updateProjectionMatrix();
            
            renderer.setSize(newWidth, newHeight);
        });
        
        // Emit flower particles from the spinner
        function emitParticles() {
            const speedPercent = (Math.abs(flowerSpeed) / maxSpeed) * 100;
            
            if (speedPercent > 30) {
                const particlesToEmit = Math.floor(speedPercent / 20);
                
                for (let i = 0; i < particlesToEmit; i++) {
                    const particle = createSmallFlower();
                    
                    // Position near the edge of the flower
                    const angle = Math.random() * Math.PI * 2;
                    const distance = 1.5 + Math.random() * 0.5;
                    
                    particle.position.x = Math.cos(angle) * distance;
                    particle.position.y = Math.sin(angle) * distance;
                    
                    // Random scale
                    const scale = 0.1 + Math.random() * 0.2;
                    particle.scale.set(scale, scale, scale);
                    
                    // Random velocity away from center
                    particle.userData = {
                        velocity: new THREE.Vector3(
                            Math.cos(angle) * 0.02,
                            Math.sin(angle) * 0.02,
                            (Math.random() - 0.5) * 0.01
                        ),
                        rotationSpeed: new THREE.Vector3(
                            (Math.random() - 0.5) * 0.02,
                            (Math.random() - 0.5) * 0.02,
                            (Math.random() - 0.5) * 0.02
                        ),
                        lifetime: 100 + Math.random() * 100
                    };
                    
                    scene.add(particle);
                    particleSystem.push(particle);
                }
            }
        }
        
        // Update particles
        function updateParticles() {
            for (let i = particleSystem.length - 1; i >= 0; i--) {
                const particle = particleSystem[i];
                
                // Apply velocity
                particle.position.add(particle.userData.velocity);
                
                // Apply rotation
                particle.rotation.x += particle.userData.rotationSpeed.x;
                particle.rotation.y += particle.userData.rotationSpeed.y;
                particle.rotation.z += particle.userData.rotationSpeed.z;
                
                // Decrease lifetime
                if (particle.userData.lifetime !== undefined) {
                    particle.userData.lifetime--;
                    
                    // Fade out
                    if (particle.userData.lifetime < 30) {
                        particle.children.forEach(child => {
                            if (child.material) {
                                child.material.opacity = particle.userData.lifetime / 30;
                            }
                        });
                    }
                    
                    // Remove when lifetime expires
                    if (particle.userData.lifetime <= 0) {
                        scene.remove(particle);
                        particleSystem.splice(i, 1);
                    }
                }
                
                // Remove if too far away
                if (particle.position.length() > 10) {
                    scene.remove(particle);
                    particleSystem.splice(i, 1);
                }
            }
        }
        
        // Drop wisdom when spinner reaches certain speed
        function dropWisdom() {
            const now = Date.now();
            const speedPercent = (Math.abs(flowerSpeed) / maxSpeed) * 100;
            
            // Only drop wisdom if spinning fast enough and not recently
            if (speedPercent > 5 && (now - lastWisdomDropTime > 3000 || !wisdomDropped)) {
                const wisdom = kabirWisdom[Math.floor(Math.random() * kabirWisdom.length)];
                
                const bubble = document.createElement('div');
                bubble.className = 'wisdom-bubble';
                bubble.textContent = wisdom;
                
                const container = document.getElementById('wisdom-container');
                container.insertBefore(bubble, container.firstChild);
                
                // Limit number of wisdom bubbles
                if (container.children.length > 5) {
                    container.removeChild(container.lastChild);
                }
                
                lastWisdomDropTime = now;
                wisdomDropped = true;
                
                // Flash the flower color when wisdom drops
                const originalColor = currentColor;
                currentColor = 0xffffff;
                scene.remove(flower);
                flower = createFlowerSpinner();
                scene.add(flower);
                
                setTimeout(() => {
                    currentColor = originalColor;
                    scene.remove(flower);
                    flower = createFlowerSpinner();
                    scene.add(flower);
                }, 200);
            } else if (speedPercent < 30) {
                wisdomDropped = false;
            }
        }
        
        // Update speed indicator
        function updateSpeedIndicator() {
            const speedPercent = (Math.abs(flowerSpeed) / maxSpeed) * 100;
            document.getElementById('speed-value').textContent = Math.floor(speedPercent) + '%';
            
            // Change color based on speed
            const speedIndicator = document.getElementById('speed-indicator');
            if (speedPercent > 70) {
                speedIndicator.style.background = 'rgba(255, 50, 50, 0.3)';
                speedIndicator.style.borderColor = 'rgba(255, 100, 100, 0.5)';
            } else if (speedPercent > 40) {
                speedIndicator.style.background = 'rgba(255, 165, 0, 0.3)';
                speedIndicator.style.borderColor = 'rgba(255, 200, 0, 0.5)';
            } else {
                speedIndicator.style.background = 'rgba(255, 255, 255, 0.1)';
                speedIndicator.style.borderColor = 'rgba(255, 255, 255, 0.3)';
            }
        }
        
        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            
            // Rotate flower based on speed
            flower.rotation.z += flowerSpeed;
            
            // Apply friction
            if (!isDragging) {
                flowerSpeed *= 0.98;
                if (Math.abs(flowerSpeed) < 0.001) flowerSpeed = 0;
            }
            
            // Emit particles, drop wisdom and update UI
            emitParticles();
            updateParticles();
            dropWisdom();
            updateSpeedIndicator();
            
            // Make the flower "breathe" when idle
            if (Math.abs(flowerSpeed) < 0.5) {
                const pulse = Math.sin(Date.now() * 0.002) * 0.05 + 1;
                flower.scale.set(pulse, pulse, pulse);
            } else {
                flower.scale.set(1, 1, 1);
            }
            
            renderer.render(scene, camera);
        }
        
        animate();
        
        // Mouse/touch interaction
        container.addEventListener('mousedown', (e) => {
            isDragging = true;
            previousMousePosition = { x: e.clientX, y: e.clientY };
            container.style.cursor = 'grabbing';
        });
        
        window.addEventListener('mouseup', () => {
            isDragging = false;
            container.style.cursor = 'grab';
        });
        
        container.addEventListener('mousemove', (e) => {
            if (isDragging) {
                const deltaMove = { x: e.clientX - previousMousePosition.x };
                
                // Calculate speed based on mouse movement
                flowerSpeed = deltaMove.x * 0.02;
                flowerSpeed = Math.min(Math.max(flowerSpeed, -maxSpeed), maxSpeed);
                
                previousMousePosition = { x: e.clientX, y: e.clientY };
            }
        });
        
        // Touch support
        container.addEventListener('touchstart', (e) => {
            isDragging = true;
            previousMousePosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
            container.style.cursor = 'grabbing';
            e.preventDefault();
        });
        
        window.addEventListener('touchend', () => {
            isDragging = false;
            container.style.cursor = 'grab';
        });
        
        container.addEventListener('touchmove', (e) => {
            if (isDragging) {
                const deltaMove = { x: e.touches[0].clientX - previousMousePosition.x };
                
                // Calculate speed based on touch movement
                flowerSpeed = deltaMove.x * 0.03;
                flowerSpeed = Math.min(Math.max(flowerSpeed, -maxSpeed), maxSpeed);
                
                previousMousePosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
                e.preventDefault();
            }
        });
        
        // Color change button
        document.getElementById('color-btn').addEventListener('click', () => {
            // Get a random color different from current
            let newColor;
            do {
                newColor = flowerColors[Math.floor(Math.random() * flowerColors.length)];
            } while (newColor === currentColor);
            
            currentColor = newColor;
            
            // Remove old flower
            scene.remove(flower);
            
            // Create new flower with new color
            flower = createFlowerSpinner();
            scene.add(flower);
            
            // Also update particle colors
            particleSystem.forEach(particle => {
                particle.children.forEach(child => {
                    if (child.material && child.material.color) {
                        if (child.material.color.getHex() !== 0xffff00) { // Not the yellow center
                            child.material.color.setHex(currentColor);
                            child.material.emissive.setHex(currentColor);
                        }
                    }
                });
            });
        });
        
        // Reset button
        document.getElementById('reset-btn').addEventListener('click', () => {
            flowerSpeed = 0;
            document.getElementById('speed-value').textContent = '0%';
            
            // Clear wisdom container except initial message
            const container = document.getElementById('wisdom-container');
            while (container.children.length > 1) {
                container.removeChild(container.lastChild);
            }
            
            // Reset to default color
            currentColor = 0xff69b4;
            scene.remove(flower);
            flower = createFlowerSpinner();
            scene.add(flower);
            
            // Reset speed indicator color
            const speedIndicator = document.getElementById('speed-indicator');
            speedIndicator.style.background = 'rgba(255, 255, 255, 0.1)';
            speedIndicator.style.borderColor = 'rgba(255, 255, 255, 0.3)';
            
            // Clear all particles
            particleSystem.forEach(particle => scene.remove(particle));
            particleSystem = [];
        });
    </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=db69/flowers" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>