| <!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"> |
| |
| <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> |
| |
| |
| <div class="absolute top-20 left-0 right-0 bottom-0 flex"> |
| |
| <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> |
| |
| |
| <div class="flex-1 p-4 overflow-y-auto ui-element"> |
| |
| <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> |
| |
| |
| <div class="cyber-panel p-4 rounded-lg mb-6" style="height: 300px;"> |
| <canvas id="energyChart"></canvas> |
| </div> |
| |
| |
| <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> |
| |
| |
| <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> |
| |
| 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); |
| |
| |
| const gridHelper = new THREE.GridHelper(100, 100, 0x00f0ff, 0x00f0ff); |
| gridHelper.material.opacity = 0.1; |
| gridHelper.material.transparent = true; |
| scene.add(gridHelper); |
| |
| |
| 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); |
| } |
| |
| |
| 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); |
| } |
| } |
| } |
| |
| |
| 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); |
| |
| |
| 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.z = 30; |
| camera.position.y = 10; |
| |
| |
| function animate() { |
| requestAnimationFrame(animate); |
| |
| |
| orbs.forEach(orb => { |
| orb.rotation.x += 0.005; |
| orb.rotation.y += 0.01; |
| }); |
| |
| |
| centerSphere.rotation.x += 0.002; |
| centerSphere.rotation.y += 0.005; |
| |
| |
| particlesMesh.rotation.y += 0.001; |
| |
| renderer.render(scene, camera); |
| } |
| |
| animate(); |
| |
| |
| window.addEventListener('resize', () => { |
| camera.aspect = window.innerWidth / window.innerHeight; |
| camera.updateProjectionMatrix(); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| }); |
| |
| |
| 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' |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| 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> |
