Spaces:

LukasBe
/

fun

Running

fun

File size: 20,363 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SOLAREDGE // NEXUS CONTROL</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.0/dist/vanilla-tilt.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Orbitron:wght@400;700&family=Rajdhani:wght@400;500;700&display=swap');
        
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Rajdhani', sans-serif;
            color: #e0e0ff;
        }
        
        #container {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        
        #ui-container {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .ui-element {
            pointer-events: auto;
        }
        
        .cyber-text {
            text-shadow: 0 0 5px #00f0ff, 0 0 10px #00f0ff;
        }
        
        .cyber-panel {
            background: rgba(10, 10, 26, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 240, 255, 0.3);
            box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
        }
        
        .cyber-button {
            background: rgba(26, 26, 58, 0.7);
            border: 1px solid #00f0ff;
            color: #00f0ff;
            transition: all 0.3s ease;
        }
        
        .cyber-button:hover {
            background: rgba(0, 240, 255, 0.3);
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
        }
        
        .glow {
            animation: glow 2s ease-in-out infinite alternate;
        }
        
        @keyframes glow {
            from {
                box-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
            }
            to {
                box-shadow: 0 0 20px rgba(0, 240, 255, 0.8);
            }
        }
        
        .scanlines {
            position: relative;
        }
        
        .scanlines::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                to bottom,
                rgba(0, 240, 255, 0.05) 50%,
                transparent 50%
            );
            background-size: 100% 4px;
            pointer-events: none;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="ui-container" class="scanlines">
        <!-- Header -->
        <div class="absolute top-0 left-0 right-0 p-4 flex justify-between items-center cyber-panel z-50 ui-element">
            <div class="flex items-center space-x-4">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center shadow-lg">
                    <i class="fas fa-bolt text-gray-900"></i>
                </div>
                <h1 class="text-2xl font-bold cyber-text">SOLAREDGE NEXUS</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button class="cyber-button px-4 py-2 rounded-full flex items-center space-x-2">
                    <i class="fas fa-satellite-dish"></i>
                    <span>SYNC NETWORK</span>
                </button>
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded-full bg-gray-700 border border-cyan-400"></div>
                    <span>ADMIN</span>
                </div>
            </div>
        </div>
        
        <!-- Main Dashboard -->
        <div class="absolute top-20 left-0 right-0 bottom-0 flex">
            <!-- Sidebar -->
            <div class="w-64 h-full p-4 cyber-panel mr-4 ui-element">
                <nav class="space-y-2">
                    <a href="#" class="block p-3 hover:bg-cyan-900/30 rounded-lg flex items-center space-x-3">
                        <i class="fas fa-tachometer-alt"></i>
                        <span>DASHBOARD</span>
                    </a>
                    <a href="#" class="block p-3 hover:bg-cyan-900/30 rounded-lg flex items-center space-x-3">
                        <i class="fas fa-chart-network"></i>
                        <span>ENERGY GRID</span>
                    </a>
                    <a href="#" class="block p-3 hover:bg-cyan-900/30 rounded-lg flex items-center space-x-3">
                        <i class="fas fa-solar-panel"></i>
                        <span>ARRAY SCAN</span>
                    </a>
                    <a href="#" class="block p-3 hover:bg-cyan-900/30 rounded-lg flex items-center space-x-3">
                        <i class="fas fa-bolt"></i>
                        <span>INVERTERS</span>
                    </a>
                </nav>
                
                <div class="mt-8 p-4 cyber-panel rounded-lg">
                    <h3 class="font-bold text-lg cyber-text mb-4">SYSTEM STATUS</h3>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span>POWER OUTPUT</span>
                            <span class="text-green-400">ACTIVE</span>
                        </div>
                        <div class="flex justify-between">
                            <span>NETWORK</span>
                            <span class="text-green-400">ONLINE</span>
                        </div>
                        <div class="flex justify-between">
                            <span>SECURITY</span>
                            <span class="text-green-400">ENCRYPTED</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Content -->
            <div class="flex-1 p-4 overflow-y-auto ui-element">
                <!-- Stats Cards -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    <div class="cyber-panel p-4 rounded-lg">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-sm opacity-70">CURRENT OUTPUT</p>
                                <h2 class="text-3xl font-bold cyber-text">42.5 kW</h2>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-cyan-900/30 flex items-center justify-center">
                                <i class="fas fa-bolt text-xl text-cyan-400"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="cyber-panel p-4 rounded-lg">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-sm opacity-70">TODAY'S YIELD</p>
                                <h2 class="text-3xl font-bold cyber-text">1,280 kWh</h2>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-cyan-900/30 flex items-center justify-center">
                                <i class="fas fa-sun text-xl text-cyan-400"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="cyber-panel p-4 rounded-lg">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-sm opacity-70">TOTAL ENERGY</p>
                                <h2 class="text-3xl font-bold cyber-text">28.4 MWh</h2>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-cyan-900/30 flex items-center justify-center">
                                <i class="fas fa-database text-xl text-cyan-400"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="cyber-panel p-4 rounded-lg glow">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-sm opacity-70">SYSTEM HEALTH</p>
                                <h2 class="text-3xl font-bold cyber-text">98%</h2>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-cyan-900/30 flex items-center justify-center">
                                <i class="fas fa-heartbeat text-xl text-cyan-400"></i>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Energy Chart -->
                <div class="cyber-panel p-4 rounded-lg mb-6" style="height: 300px;">
                    <canvas id="energyChart"></canvas>
                </div>
                
                <!-- Inverter Status -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    <div class="cyber-panel p-4 rounded-lg">
                        <h3 class="text-lg font-bold cyber-text mb-4">INVERTER STATUS</h3>
                        <div class="space-y-3">
                            <div class="flex justify-between items-center p-3 hover:bg-cyan-900/20 rounded-lg">
                                <div class="flex items-center space-x-3">
                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                    <span>INVERTER_01</span>
                                </div>
                                <span class="font-mono text-cyan-400">3.8 kW</span>
                            </div>
                            <div class="flex justify-between items-center p-3 hover:bg-cyan-900/20 rounded-lg">
                                <div class="flex items-center space-x-3">
                                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                    <span>INVERTER_02</span>
                                </div>
                                <span class="font-mono text-cyan-400">2.1 kW</span>
                            </div>
                            <div class="flex justify-between items-center p-3 hover:bg-cyan-900/20 rounded-lg">
                                <div class="flex items-center space-x-3">
                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                    <span>INVERTER_03</span>
                                </div>
                                <span class="font-mono text-cyan-400">3.5 kW</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Solar Array -->
                    <div class="cyber-panel p-4 rounded-lg">
                        <h3 class="text-lg font-bold cyber-text mb-4">SOLAR ARRAY</h3>
                        <div class="grid grid-cols-3 gap-3">
                            <div class="aspect-square bg-cyan-900/20 rounded-lg flex items-center justify-center border border-cyan-400/30">
                                <i class="fas fa-solar-panel text-cyan-400"></i>
                            </div>
                            <div class="aspect-square bg-cyan-900/20 rounded-lg flex items-center justify-center border border-cyan-400/30">
                                <i class="fas fa-solar-panel text-cyan-400"></i>
                            </div>
                            <div class="aspect-square bg-cyan-900/20 rounded-lg flex items-center justify-center border border-cyan-400/30">
                                <i class="fas fa-solar-panel text-cyan-400"></i>
                            </div>
                            <div class="aspect-square bg-cyan-900/20 rounded-lg flex items-center justify-center border border-cyan-400/30">
                                <i class="fas fa-solar-panel text-cyan-400"></i>
                            </div>
                            <div class="aspect-square bg-cyan-900/20 rounded-lg flex items-center justify-center border border-cyan-400/30">
                                <i class="fas fa-solar-panel text-cyan-400"></i>
                            </div>
                            <div class="aspect-square bg-cyan-900/20 rounded-lg flex items-center justify-center border border-cyan-400/30">
                                <i class="fas fa-solar-panel text-cyan-400"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Three.js Scene Setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.getElementById('container').appendChild(renderer.domElement);
        
        // Add floating grid
        const gridHelper = new THREE.GridHelper(100, 100, 0x00f0ff, 0x00f0ff);
        gridHelper.material.opacity = 0.1;
        gridHelper.material.transparent = true;
        scene.add(gridHelper);
        
        // Add floating orbs
        const orbs = [];
        const orbGeometry = new THREE.SphereGeometry(2, 32, 32);
        const orbMaterial = new THREE.MeshBasicMaterial({ 
            color: 0x00f0ff,
            wireframe: true,
            transparent: true,
            opacity: 0.2
        });
        
        for (let i = 0; i < 8; i++) {
            const orb = new THREE.Mesh(orbGeometry, orbMaterial);
            orb.position.x = Math.random() * 60 - 30;
            orb.position.y = Math.random() * 40 - 20;
            orb.position.z = Math.random() * 40 - 20;
            orb.scale.setScalar(Math.random() * 2 + 1);
            scene.add(orb);
            orbs.push(orb);
        }
        
        // Add connecting lines
        const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00f0ff, transparent: true, opacity: 0.1 });
        const lines = [];
        
        for (let i = 0; i < orbs.length; i++) {
            for (let j = i + 1; j < orbs.length; j++) {
                if (Math.random() > 0.7) {
                    const lineGeometry = new THREE.BufferGeometry().setFromPoints([
                        new THREE.Vector3(
                            orbs[i].position.x,
                            orbs[i].position.y,
                            orbs[i].position.z
                        ),
                        new THREE.Vector3(
                            orbs[j].position.x,
                            orbs[j].position.y,
                            orbs[j].position.z
                        )
                    ]);
                    const line = new THREE.Line(lineGeometry, lineMaterial);
                    scene.add(line);
                    lines.push(line);
                }
            }
        }
        
        // Add central data sphere
        const centerGeometry = new THREE.SphereGeometry(5, 64, 64);
        const centerMaterial = new THREE.MeshBasicMaterial({ 
            color: 0x00f0ff,
            wireframe: true,
            transparent: true,
            opacity: 0.3
        });
        const centerSphere = new THREE.Mesh(centerGeometry, centerMaterial);
        scene.add(centerSphere);
        
        // Add floating particles
        const particlesGeometry = new THREE.BufferGeometry();
        const particlesCount = 1000;
        const posArray = new Float32Array(particlesCount * 3);
        
        for (let i = 0; i < particlesCount * 3; i++) {
            posArray[i] = (Math.random() - 0.5) * 100;
        }
        
        particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
        const particlesMaterial = new THREE.PointsMaterial({
            color: 0x00f0ff,
            size: 0.1,
            transparent: true,
            opacity: 0.5
        });
        const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
        scene.add(particlesMesh);
        
        // Camera position
        camera.position.z = 30;
        camera.position.y = 10;
        
        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            
            // Rotate orbs
            orbs.forEach(orb => {
                orb.rotation.x += 0.005;
                orb.rotation.y += 0.01;
            });
            
            // Rotate center sphere
            centerSphere.rotation.x += 0.002;
            centerSphere.rotation.y += 0.005;
            
            // Move particles
            particlesMesh.rotation.y += 0.001;
            
            renderer.render(scene, camera);
        }
        
        animate();
        
        // Handle window resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        
        // Energy Chart
        const energyCtx = document.getElementById('energyChart').getContext('2d');
        const energyChart = new Chart(energyCtx, {
            type: 'line',
            data: {
                labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
                datasets: [{
                    label: 'POWER OUTPUT (kW)',
                    data: [0, 1.2, 3.8, 4.2, 3.9, 1.5, 0.2],
                    borderColor: '#00f0ff',
                    backgroundColor: 'rgba(0, 240, 255, 0.1)',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        grid: {
                            color: 'rgba(0, 240, 255, 0.1)'
                        },
                        ticks: {
                            color: '#00f0ff'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#00f0ff'
                        }
                    }
                }
            }
        });
        
        // Parallax effect
        document.addEventListener('mousemove', (e) => {
            const x = e.clientX / window.innerWidth;
            const y = e.clientY / window.innerHeight;
            
            camera.position.x = (x - 0.5) * 10;
            camera.position.y = -(y - 0.5) * 10 + 10;
            camera.lookAt(0, 0, 0);
        });
    </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=LukasBe/fun" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>