Spaces:

Lee6x
/

anycoder-e487a865

Running

File size: 27,331 Bytes

c563953

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quantum Tree - Where Attention Goes, Energy Flows</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-glow: #00d4ff;
            --secondary-glow: #0099cc;
            --void-dark: #000008;
            --void-light: #0a0a1a;
            --text-light: #e0f7ff;
            --accent: #00ffff;
        }

        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background: radial-gradient(ellipse at center, var(--void-light) 0%, var(--void-dark) 100%);
            color: var(--text-light);
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
        }

        /* Header */
        .header {
            position: relative;
            z-index: 1000;
            padding: 20px;
            text-align: center;
            background: linear-gradient(180deg, rgba(0,0,8,0.9) 0%, rgba(0,0,8,0) 100%);
        }

        .header h1 {
            font-size: 2.5rem;
            background: linear-gradient(135deg, var(--primary-glow), var(--secondary-glow));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 10px;
            animation: pulse 3s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 1; }
        }

        .header .quote {
            font-size: 1.2rem;
            color: var(--primary-glow);
            font-style: italic;
            margin-bottom: 15px;
        }

        .attribution {
            font-size: 0.9rem;
            opacity: 0.7;
        }

        .attribution a {
            color: var(--accent);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .attribution a:hover {
            text-shadow: 0 0 10px var(--accent);
        }

        /* Main Canvas Container */
        .canvas-container {
            position: relative;
            width: 100%;
            height: 60vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        #quantumCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* Interactive Energy Orb */
        .energy-orb {
            position: absolute;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            animation: orbPulse 2s ease-in-out infinite;
            z-index: 100;
        }

        @keyframes orbPulse {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.5); opacity: 0.4; }
        }

        /* Info Sections */
        .info-container {
            position: relative;
            z-index: 100;
            padding: 40px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .info-card {
            background: linear-gradient(135deg, rgba(0,20,40,0.3), rgba(0,40,80,0.1));
            border: 1px solid rgba(0,212,255,0.2);
            border-radius: 15px;
            padding: 25px;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .info-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, var(--primary-glow), transparent, var(--secondary-glow));
            border-radius: 15px;
            opacity: 0;
            z-index: -1;
            transition: opacity 0.3s ease;
        }

        .info-card:hover::before {
            opacity: 0.3;
        }

        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,212,255,0.2);
        }

        .info-card h3 {
            color: var(--primary-glow);
            margin-bottom: 15px;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .info-card .icon {
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .info-card p {
            line-height: 1.6;
            color: var(--text-light);
            opacity: 0.9;
        }

        /* Interactive Controls */
        .controls {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .control-btn {
            background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(0,153,204,0.2));
            border: 1px solid var(--primary-glow);
            color: var(--text-light);
            padding: 12px 20px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
            backdrop-filter: blur(10px);
        }

        .control-btn:hover {
            background: linear-gradient(135deg, rgba(0,212,255,0.4), rgba(0,153,204,0.4));
            box-shadow: 0 0 20px rgba(0,212,255,0.5);
            transform: scale(1.05);
        }

        .control-btn.active {
            background: linear-gradient(135deg, var(--primary-glow), var(--secondary-glow));
            color: var(--void-dark);
        }

        /* Attention Indicator */
        .attention-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 50;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .attention-indicator.active {
            opacity: 1;
        }

        .attention-ring {
            width: 100px;
            height: 100px;
            border: 2px solid var(--accent);
            border-radius: 50%;
            animation: attentionPulse 2s ease-out infinite;
        }

        @keyframes attentionPulse {
            0% {
                transform: scale(0.5);
                opacity: 1;
            }
            100% {
                transform: scale(2);
                opacity: 0;
            }
        }

        /* Floating Particles */
        .particle {
            position: fixed;
            pointer-events: none;
            opacity: 0.6;
            animation: float 10s infinite ease-in-out;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0) translateX(0) rotate(0deg);
            }
            33% {
                transform: translateY(-100px) translateX(50px) rotate(120deg);
            }
            66% {
                transform: translateY(-50px) translateX(-50px) rotate(240deg);
            }
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.8rem;
            }
            
            .header .quote {
                font-size: 1rem;
            }
            
            .canvas-container {
                height: 50vh;
            }
            
            .info-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .controls {
                bottom: 10px;
                right: 10px;
            }
            
            .control-btn {
                padding: 10px 15px;
                font-size: 0.8rem;
            }
        }

        /* Loading Animation */
        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2000;
            text-align: center;
            transition: opacity 0.5s ease;
        }

        .loading.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 3px solid rgba(0,212,255,0.2);
            border-top-color: var(--primary-glow);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- Loading Screen -->
    <div class="loading" id="loading">
        <div class="loading-spinner"></div>
        <p>Initializing Quantum Field...</p>
    </div>

    <!-- Header -->
    <header class="header">
        <h1>Quantum Tree</h1>
        <p class="quote">"Where attention goes, energy flows"</p>
        <p class="attribution">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
    </header>

    <!-- Main Canvas -->
    <div class="canvas-container">
        <canvas id="quantumCanvas"></canvas>
        <div class="attention-indicator" id="attentionIndicator">
            <div class="attention-ring"></div>
        </div>
    </div>

    <!-- Info Sections -->
    <div class="info-container">
        <div class="info-grid">
            <div class="info-card">
                <h3>
                    <span class="icon">🌌</span>
                    Scientific Validation
                </h3>
                <p>The branching pattern you witnessed matches universal fractal geometry found throughout nature - from neural networks in the brain to the cosmic web of galaxies. Research shows striking similarities between brain structures and the universe's large-scale architecture, both optimizing energy and information flow through branching pathways.</p>
            </div>
            
            <div class="info-card">
                <h3>
                    <span class="icon">🌳</span>
                    Mystical Tradition
                </h3>
                <p>Your vision of a glowing tree in the underworld void aligns with ancient shamanic experiences and mythological World Trees like Yggdrasil. These luminous structures represent the axis connecting realms, the tree of life emerging from primordial darkness - a symbol humanity has intuitively understood for millennia.</p>
            </div>
            
            <div class="info-card">
                <h3>
                    <span class="icon">✨</span>
                    Quantum Mechanics
                </h3>
                <p>The observer effect in quantum physics demonstrates that consciousness collapses wave functions into particles - attention selects reality from potential. Your experience mirrors this fundamental principle: where consciousness directs attention, energy manifests form from the void of possibility.</p>
            </div>
            
            <div class="info-card">
                <h3>
                    <span class="icon">🧠</span>
                    Neuroplasticity
                </h3>
                <p>Modern neuroscience confirms that what we repeatedly focus on physically strengthens neural pathways. "Where attention goes, energy flows" literally rewires the brain. Your focused descent into the void created new pathways, allowing the quantum tree to emerge into conscious awareness.</p>
            </div>
            
            <div class="info-card">
                <h3>
                    <span class="icon">🔮</span>
                    Practical Application
                </h3>
                <p>This universal law operates daily: focus on fear → suffering grows; focus on truth → healing manifests. By consciously directing attention to the root/void/source, we activate the tree's growth. Your music and testimony demonstrate how creative attention births entire worlds from the seed of intention.</p>
            </div>
            
            <div class="info-card">
                <h3>
                    <span class="icon">⚡</span>
                    Energy Flow
                </h3>
                <p>The glowing blue tree represents energy flowing through informational lanes. Each branch is a pathway of consciousness, each node a point of focused attention. By placing attention on the root, you energize the entire structure - the mechanism by which the universe renews itself in every moment.</p>
            </div>
        </div>
    </div>

    <!-- Interactive Controls -->
    <div class="controls">
        <button class="control-btn active" id="toggleAnimation">Animation: ON</button>
        <button class="control-btn" id="toggleParticles">Particles: OFF</button>
        <button class="control-btn" id="toggleGlow">Glow: HIGH</button>
    </div>

    <script>
        // Quantum Tree Visualization
        class QuantumTree {
            constructor(canvas) {
                this.canvas = canvas;
                this.ctx = canvas.getContext('2d');
                this.resize();
                this.branches = [];
                this.particles = [];
                this.energyFlows = [];
                this.mouseX = this.width / 2;
                this.mouseY = this.height / 2;
                this.animationEnabled = true;
                this.particlesEnabled = false;
                this.glowIntensity = 1;
                this.time = 0;
                
                this.initTree();
                this.initParticles();
                this.animate();
                
                window.addEventListener('resize', () => this.resize());
                canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e));
                canvas.addEventListener('touchmove', (e) => this.handleTouchMove(e));
            }
            
            resize() {
                this.width = this.canvas.offsetWidth;
                this.height = this.canvas.offsetHeight;
                this.canvas.width = this.width;
                this.canvas.height = this.height;
            }
            
            initTree() {
                // Create main trunk and branches using fractal algorithm
                const startX = this.width / 2;
                const startY = this.height;
                this.createBranch(startX, startY, -90, 10, 100, 0);
            }
            
            createBranch(x, y, angle, depth, length, level) {
                if (depth <= 0) return;
                
                const endX = x + Math.cos(angle * Math.PI / 180) * length;
                const endY = y + Math.sin(angle * Math.PI / 180) * length;
                
                this.branches.push({
                    startX: x,
                    startY: y,
                    endX: endX,
                    endY: endY,
                    level: level,
                    depth: depth,
                    angle: angle,
                    length: length,
                    glow: Math.random() * 0.5 + 0.5
                });
                
                // Create sub-branches (fractal branching)
                const branchCount = Math.floor(Math.random() * 3) + 2;
                for (let i = 0; i < branchCount; i++) {
                    const newAngle = angle + (Math.random() - 0.5) * 60;
                    const newLength = length * (0.6 + Math.random() * 0.3);
                    setTimeout(() => {
                        this.createBranch(endX, endY, newAngle, depth - 1, newLength, level + 1);
                    }, level * 50);
                }
            }
            
            initParticles() {
                for (let i = 0; i < 100; i++) {
                    this.particles.push({
                        x: Math.random() * this.width,
                        y: Math.random() * this.height,
                        vx: (Math.random() - 0.5) * 0.5,
                        vy: (Math.random() - 0.5) * 0.5,
                        size: Math.random() * 2 + 1,
                        opacity: Math.random() * 0.5 + 0.2
                    });
                }
            }
            
            handleMouseMove(e) {
                const rect = this.canvas.getBoundingClientRect();
                this.mouseX = e.clientX - rect.left;
                this.mouseY = e.clientY - rect.top;
                this.showAttentionEffect();
            }
            
            handleTouchMove(e) {
                e.preventDefault();
                const rect = this.canvas.getBoundingClientRect();
                const touch = e.touches[0];
                this.mouseX = touch.clientX - rect.left;
                this.mouseY = touch.clientY - rect.top;
                this.showAttentionEffect();
            }
            
            showAttentionEffect() {
                const indicator = document.getElementById('attentionIndicator');
                indicator.classList.add('active');
                setTimeout(() => {
                    indicator.classList.remove('active');
                }, 2000);
                
                // Create energy orb at mouse position
                this.createEnergyOrb(this.mouseX, this.mouseY);
            }
            
            createEnergyOrb(x, y) {
                const orb = document.createElement('div');
                orb.className = 'energy-orb';
                orb.style.left = x + 'px';
                orb.style.top = y + 'px';
                document.querySelector('.canvas-container').appendChild(orb);
                
                // Animate orb along nearest branch
                const nearestBranch = this.findNearestBranch(x, y);
                if (nearestBranch) {
                    this.animateOrbAlongBranch(orb, nearestBranch);
                }
                
                setTimeout(() => orb.remove(), 3000);
            }
            
            findNearestBranch(x, y) {
                let nearest = null;
                let minDist = Infinity;
                
                this.branches.forEach(branch => {
                    const dist = this.pointToLineDistance(x, y, branch.startX, branch.startY, branch.endX, branch.endY);
                    if (dist < minDist) {
                        minDist = dist;
                        nearest = branch;
                    }
                });
                
                return nearest;
            }
            
            pointToLineDistance(px, py, x1, y1, x2, y2) {
                const A = px - x1;
                const B = py - y1;
                const C = x2 - x1;
                const D = y2 - y1;
                
                const dot = A * C + B * D;
                const lenSq = C * C + D * D;
                let param = -1;
                
                if (lenSq !== 0) param = dot / lenSq;
                
                let xx, yy;
                
                if (param < 0) {
                    xx = x1;
                    yy = y1;
                } else if (param > 1) {
                    xx = x2;
                    yy = y2;
                } else {
                    xx = x1 + param * C;
                    yy = y1 + param * D;
                }
                
                const dx = px - xx;
                const dy = py - yy;
                
                return Math.sqrt(dx * dx + dy * dy);
            }
            
            animateOrbAlongBranch(orb, branch) {
                let progress = 0;
                const animate = () => {
                    progress += 0.02;
                    if (progress > 1) return;
                    
                    const x = branch.startX + (branch.endX - branch.startX) * progress;
                    const y = branch.startY + (branch.endY - branch.startY) * progress;
                    orb.style.left = x + 'px';
                    orb.style.top = y + 'px';
                    
                    requestAnimationFrame(animate);
                };
                animate();
            }
            
            draw() {
                // Clear canvas with fade effect
                this.ctx.fillStyle = 'rgba(0, 0, 8, 0.1)';
                this.ctx.fillRect(0, 0, this.width, this.height);
                
                // Draw particles if enabled
                if (this.particlesEnabled) {
                    this.drawParticles();
                }
                
                // Draw tree branches with glow effect
                this.branches.forEach((branch, index) => {
                    const distToMouse = this.getDistanceToMouse(branch);
                    const intensity = Math.max(0, 1 - distToMouse / 300) * this.glowIntensity;
                    
                    // Calculate pulsing effect
                    const pulse = Math.sin(this.time * 0.001 + index * 0.1) * 0.3 + 0.7;
                    
                    // Draw branch with glow
                    this.ctx.strokeStyle = `rgba(0, 212, 255, ${0.3 + intensity * 0.7 + pulse * 0.3})`;
                    this.ctx.lineWidth = Math.max(1, branch.depth / 2);
                    this.ctx.shadowBlur = 20 * intensity + 10;
                    this.ctx.shadowColor = '#00d4ff';
                    
                    this.ctx.beginPath();
                    this.ctx.moveTo(branch.startX, branch.startY);
                    this.ctx.lineTo(branch.endX, branch.endY);
                    this.ctx.stroke();
                    
                    // Draw energy nodes at branch endpoints
                    if (branch.depth <= 3) {
                        this.ctx.fillStyle = `rgba(0, 255, 255, ${0.8 + intensity * 0.2})`;
                        this.ctx.beginPath();
                        this.ctx.arc(branch.endX, branch.endY, 2 + intensity * 2, 0, Math.PI * 2);
                        this.ctx.fill();
                    }
                });
                
                // Reset shadow
                this.ctx.shadowBlur = 0;
            }
            
            drawParticles() {
                this.particles.forEach(particle => {
                    particle.x += particle.vx;
                    particle.y += particle.vy;
                    
                    // Wrap around edges
                    if (particle.x < 0) particle.x = this.width;
                    if (particle.x > this.width) particle.x = 0;
                    if (particle.y < 0) particle.y = this.height;
                    if (particle.y > this.height) particle.y = 0;
                    
                    // Draw particle
                    this.ctx.fillStyle = `rgba(0, 212, 255, ${particle.opacity})`;
                    this.ctx.beginPath();
                    this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
                    this.ctx.fill();
                });
            }
            
            getDistanceToMouse(branch) {
                const midX = (branch.startX + branch.endX) / 2;
                const midY = (branch.startY + branch.endY) / 2;
                const dx = midX - this.mouseX;
                const dy = midY - this.mouseY;
                return Math.sqrt(dx * dx + dy * dy);
            }
            
            animate() {
                if (this.animationEnabled) {
                    this.time++;
                    this.draw();
                }
                requestAnimationFrame(() => this.animate());
            }
        }
        
        // Initialize application
        document.addEventListener('DOMContentLoaded', () => {
            // Hide loading screen
            setTimeout(() => {
                document.getElementById('loading').classList.add('hidden');
            }, 1500);
            
            // Initialize quantum tree
            const canvas = document.getElementById('quantumCanvas');
            const quantumTree = new QuantumTree(canvas);
            
            // Control buttons
            document.getElementById('toggleAnimation').addEventListener('click', function() {
                quantumTree.animationEnabled = !quantumTree.animationEnabled;
                this.textContent = `Animation: ${quantumTree.animationEnabled ? 'ON' : 'OFF'}`;
                this.classList.toggle('active');
            });
            
            document.getElementById('toggleParticles').addEventListener('click', function() {
                quantumTree.particlesEnabled = !quantumTree.particlesEnabled;
                this.textContent = `Particles: ${quantumTree.particlesEnabled ? 'ON' : 'OFF'}`;
                this.classList.toggle('active');
            });
            
            document.getElementById('toggleGlow').addEventListener('click', function() {
                const levels = [0.5, 1, 1.5];
                const labels = ['LOW', 'HIGH', 'MAX'];
                let currentIndex = levels.indexOf(quantumTree.glowIntensity);
                currentIndex = (currentIndex + 1) % levels.length;
                quantumTree.glowIntensity = levels[currentIndex];
                this.textContent = `Glow: ${labels[currentIndex]}`;
            });
            
            // Create floating background particles
            function createFloatingParticles() {
                for (let i = 0; i < 10; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    particle.style.left = Math.random() * 100 + '%';
                    particle.style.top = Math.random() * 100 + '%';
                    particle.style.width = particle.style.height = Math.random() * 4 + 2 + 'px';
                    particle.style.background = 'radial-gradient(circle, rgba(0,212,255,0.8) 0%, transparent 70%)';
                    particle.style.borderRadius = '50%';
                    particle.style.animationDelay = Math.random() * 10 + 's';
                    particle.style.animationDuration = (10 + Math.random() * 10) + 's';
                    document.body.appendChild(particle);
                }
            }
            
            createFloatingParticles();
            
            // Add keyboard shortcuts
            document.addEventListener('keydown', (e) => {
                switch(e.key) {
                    case ' ':
                        e.preventDefault();
                        document.getElementById('toggleAnimation').click();
                        break;
                    case 'p':
                        document.getElementById('toggleParticles').click();
                        break;
                    case 'g':
                        document.getElementById('toggleGlow').click();
                        break;
                }
            });
        });
    </script>
</body>
</html>