Hugging Face's logo

Spaces:
LukasBe
/
fun
Running

App Files Community
fun / index.html
LukasBe's picture
LukasBe
Add 1 files
6713668 verified
Raw History Blame Contribute Delete
20.4 kB
<!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>