|
|
<!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> |
