Hugging Face's logo

Spaces:
db69
/
flowers
Running

App Files Community
flowers / index.html
db69's picture
db69
Update index.html
a64145e verified
raw
history blame contribute delete
29.2 kB
<!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>