Spaces:

db69
/

flowers

Running

App Files Files Community

db69 commited on Apr 17, 2025

Commit

a8bac05

verified ·

1 Parent(s): 7055efb

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +766 -19
prompts.txt +4 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Flowers
-emoji: 📊
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: flowers
+emoji: 🐳
+colorFrom: purple
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,766 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 100;
+            color: white;
+            padding: 2rem;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .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 > 50 && (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>

prompts.txt ADDED Viewed

	@@ -0,0 +1,4 @@

+A 3d digital fidget spinner
+rather than buttons make it touch and mouse responsive so we can spin iton our own. Also pretned that you are kabir and bring out UI that breaks all illusions of any user who is here toplay withit
+now make fidget spinnersuch that as it spins it drops out a piece of kabir's wisdom
+now make fidget spinner into flowers and small flower particcles comimg out of it