Add 1 files

index.html

@@ -8,159 +8,73 @@
     <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>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        cyber: {
-                            primary: '#00f0ff',
-                            secondary: '#ff00f0',
-                            dark: '#0a0a1a',
-                            panel: '#1a1a3a',
-                            accent: '#ffcc00',
-                            neon: '#ff2a6d',
-                            matrix: '#00ff41'
-                        }
-                    },
-                    fontFamily: {
-                        'cyber': ['"Rajdhani"', 'sans-serif'],
-                        'digital': ['"Orbitron"', 'sans-serif'],
-                        'neu': ['"Bebas Neue"', 'sans-serif']
-                    },
-                    animation: {
-                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                        'float': 'float 6s ease-in-out infinite',
-                        'neon-flicker': 'neon-flicker 1.5s infinite alternate',
-                        'neon-flicker-fast': 'neon-flicker 0.8s infinite alternate',
-                        'scanline': 'scanline 8s linear infinite',
-                        'glow': 'glow 2s ease-in-out infinite alternate'
-                    },
-                    keyframes: {
-                        float: {
-                            '0%, 100%': { transform: 'translateY(0)' },
-                            '50%': { transform: 'translateY(-10px)' }
-                        },
-                        'neon-flicker': {
-                            '0%, 19%, 21%, 23%, 25%, 54%, 56%, 100%': {
-                                'text-shadow': '0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00f0ff',
-                                'box-shadow': '0 0 5px rgba(0, 240, 255, 0.3), 0 0 10px rgba(0, 240, 255, 0.3), 0 0 20px rgba(0, 240, 255, 0.3), 0 0 40px rgba(0, 240, 255, 0.3)'
-                            },
-                            '20%, 24%, 55%': {
-                                'text-shadow': 'none',
-                                'box-shadow': 'none'
-                            }
-                        },
-                        scanline: {
-                            '0%': { transform: 'translateY(-100%)' },
-                            '100%': { transform: 'translateY(100%)' }
-                        },
-                        glow: {
-                            '0%': { opacity: 0.7 },
-                            '100%': { opacity: 1 }
-                        }
-                    }
-                }
-            }
-        }
-    </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 {
-            background-color: #0a0a1a;
-            color: #e0e0ff;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
             font-family: 'Rajdhani', sans-serif;
-            overflow-x: hidden;
-            perspective: 1000px;
+            color: #e0e0ff;
         }
         
-        .cyber-border {
-            border: 1px solid rgba(0, 240, 255, 0.3);
-            box-shadow: 0 0 20px rgba(0, 240, 255, 0.2),
-                        inset 0 0 15px rgba(0, 240, 255, 0.1);
+        #container {
+            position: absolute;
+            width: 100%;
+            height: 100%;
         }
         
-        .cyber-glow {
-            box-shadow: 0 0 25px rgba(0, 240, 255, 0.9);
-            transition: all 0.3s ease;
+        #ui-container {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
         }
         
-        .cyber-panel {
-            background: linear-gradient(145deg, #1a1a3a 0%, #0a0a2a 100%);
-            border: 1px solid rgba(0, 240, 255, 0.2);
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6),
-                        inset 0 0 20px rgba(0, 240, 255, 0.1);
-            transform-style: preserve-3d;
-            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        .ui-element {
+            pointer-events: auto;
         }
         
-        .cyber-panel:hover {
-            transform: translateY(-5px) rotateX(5deg);
-            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8),
-                        inset 0 0 25px rgba(0, 240, 255, 0.2);
+        .cyber-text {
+            text-shadow: 0 0 5px #00f0ff, 0 0 10px #00f0ff;
         }
         
-        .cyber-header {
-            background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(10,10,26,0.9) 50%, rgba(0,0,0,0.8) 100%);
-            border-bottom: 1px solid #00f0ff;
-            box-shadow: 0 0 40px rgba(0, 240, 255, 0.5);
+        .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: linear-gradient(145deg, #1a1a3a 0%, #0a0a2a 100%);
+            background: rgba(26, 26, 58, 0.7);
             border: 1px solid #00f0ff;
             color: #00f0ff;
             transition: all 0.3s ease;
-            transform-style: preserve-3d;
         }
         
         .cyber-button:hover {
-            background: linear-gradient(145deg, #00f0ff 0%, #0066ff 100%);
-            color: #0a0a1a;
-            box-shadow: 0 0 25px rgba(0, 240, 255, 0.9);
-            transform: translateY(-3px) rotateX(5deg);
-        }
-        
-        .glitch {
-            position: relative;
-        }
-        
-        .glitch::before, .glitch::after {
-            content: attr(data-text);
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0.8;
+            background: rgba(0, 240, 255, 0.3);
+            box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
         }
         
-        .glitch::before {
-            color: #ff00f0;
-            z-index: -1;
-            animation: glitch-effect 3s infinite;
+        .glow {
+            animation: glow 2s ease-in-out infinite alternate;
         }
         
-        .glitch::after {
-            color: #00f0ff;
-            z-index: -2;
-            animation: glitch-effect 2s infinite reverse;
-        }
-        
-        @keyframes glitch-effect {
-            0% { transform: translate(0); }
-            20% { transform: translate(-3px, 3px); }
-            40% { transform: translate(-3px, -3px); }
-            60% { transform: translate(3px, 3px); }
-            80% { transform: translate(3px, -3px); }
-            100% { transform: translate(0); }
+        @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;
-            overflow: hidden;
         }
         
         .scanlines::before {
@@ -178,1027 +92,315 @@
             background-size: 100% 4px;
             pointer-events: none;
             z-index: 100;
-            animation: scanline 8s linear infinite;
-        }
-        
-        .pulse {
-            animation: pulse 2s infinite;
-        }
-        
-        @keyframes pulse {
-            0% { opacity: 0.7; }
-            50% { opacity: 1; }
-            100% { opacity: 0.7; }
-        }
-        
-        .holographic {
-            background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(255, 0, 240, 0.1) 100%);
-            backdrop-filter: blur(5px);
-            border: 1px solid rgba(0, 240, 255, 0.3);
-            transform-style: preserve-3d;
-            transition: all 0.4s ease;
-        }
-        
-        .holographic:hover {
-            transform: translateY(-5px) rotateX(5deg);
-            box-shadow: 0 10px 25px rgba(0, 240, 255, 0.4);
-        }
-        
-        .cyber-input {
-            background-color: rgba(10, 10, 26, 0.7);
-            border: 1px solid #00f0ff;
-            color: #00f0ff;
-            padding: 0.5rem 1rem;
-            transition: all 0.3s ease;
-        }
-        
-        .cyber-input:focus {
-            outline: none;
-            box-shadow: 0 0 15px rgba(0, 240, 255, 0.7);
-        }
-        
-        .cyber-tab {
-            border-bottom: 2px solid transparent;
-            transition: all 0.3s ease;
-            transform-style: preserve-3d;
-        }
-        
-        .cyber-tab:hover {
-            border-bottom: 2px solid #00f0ff;
-            color: #00f0ff;
-            transform: translateY(-2px);
-        }
-        
-        .cyber-tab.active {
-            border-bottom: 2px solid #00f0ff;
-            color: #00f0ff;
-            text-shadow: 0 0 5px #00f0ff;
-        }
-        
-        .neon-text {
-            text-shadow: 0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff;
-            animation: neon-flicker 1.5s infinite alternate;
-        }
-        
-        .neon-box {
-            box-shadow: 0 0 5px rgba(0, 240, 255, 0.3), 0 0 10px rgba(0, 240, 255, 0.3), 0 0 20px rgba(0, 240, 255, 0.3);
-            animation: neon-flicker 1.5s infinite alternate;
-        }
-        
-        .neon-accent {
-            text-shadow: 0 0 5px #ff2a6d, 0 0 10px #ff2a6d, 0 0 20px #ff2a6d;
-            animation: neon-flicker-fast 0.8s infinite alternate;
-        }
-        
-        .matrix-bg {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -100;
-            opacity: 0.15;
-            pointer-events: none;
-        }
-        
-        .floating {
-            animation: float 6s ease-in-out infinite;
-        }
-        
-        .parallax-layer {
-            transition: transform 0.1s ease-out;
-        }
-        
-        .cyber-card {
-            transform-style: preserve-3d;
-            transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
-            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-        
-        .cyber-card:hover {
-            transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateZ(20px);
-        }
-        
-        .cyber-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 1.5rem;
-        }
-        
-        .cyber-ring {
-            position: absolute;
-            border: 2px solid rgba(0, 240, 255, 0.5);
-            border-radius: 50%;
-            pointer-events: none;
-            animation: pulse 3s infinite;
-        }
-        
-        .cyber-ring:nth-child(1) {
-            width: 100%;
-            height: 100%;
-            animation-delay: 0s;
-        }
-        
-        .cyber-ring:nth-child(2) {
-            width: 80%;
-            height: 80%;
-            animation-delay: 0.5s;
-        }
-        
-        .cyber-ring:nth-child(3) {
-            width: 60%;
-            height: 60%;
-            animation-delay: 1s;
-        }
-        
-        .cyber-ring:nth-child(4) {
-            width: 40%;
-            height: 40%;
-            animation-delay: 1.5s;
-        }
-        
-        .cyber-sphere {
-            position: relative;
-            width: 100px;
-            height: 100px;
-            border-radius: 50%;
-            background: radial-gradient(circle at 30% 30%, #00f0ff, #0066ff);
-            box-shadow: 0 0 30px #00f0ff;
-            animation: float 6s ease-in-out infinite;
-        }
-        
-        .cyber-sphere::before {
-            content: '';
-            position: absolute;
-            top: 10%;
-            left: 10%;
-            width: 20%;
-            height: 20%;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.8);
-            filter: blur(2px);
-        }
-        
-        .cyber-sphere::after {
-            content: '';
-            position: absolute;
-            top: 20%;
-            left: 20%;
-            width: 10%;
-            height: 10%;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.6);
-            filter: blur(1px);
-        }
-        
-        .cyber-connector {
-            position: absolute;
-            background: linear-gradient(90deg, transparent, #00f0ff, transparent);
-            height: 2px;
-            transform-origin: left center;
-            z-index: -1;
-        }
-        
-        .cyber-connector::before {
-            content: '';
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            background: #00f0ff;
-            top: -4px;
-            left: 0;
-            box-shadow: 0 0 10px #00f0ff;
-        }
-        
-        .cyber-connector::after {
-            content: '';
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            background: #00f0ff;
-            top: -4px;
-            right: 0;
-            box-shadow: 0 0 10px #00f0ff;
-        }
-        
-        .cyber-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #00f0ff;
-            box-shadow: 0 0 10px #00f0ff;
-            position: absolute;
-        }
-        
-        .cyber-line {
-            position: absolute;
-            height: 2px;
-            background: linear-gradient(90deg, transparent, #00f0ff, transparent);
-            transform-origin: left center;
-        }
-        
-        .cyber-grid-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image: 
-                linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
-            background-size: 20px 20px;
-            pointer-events: none;
-        }
-        
-        .cyber-panel-inner {
-            position: relative;
-            z-index: 2;
-        }
-        
-        .cyber-panel::before {
-            content: '';
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            right: -2px;
-            bottom: -2px;
-            background: linear-gradient(45deg, #00f0ff, #ff00f0, #00f0ff);
-            z-index: -1;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-            border-radius: inherit;
-        }
-        
-        .cyber-panel:hover::before {
-            opacity: 0.3;
-        }
-        
-        .cyber-panel::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(255, 0, 240, 0.1) 100%);
-            z-index: -1;
-            border-radius: inherit;
-        }
-        
-        .cyber-tooltip {
-            position: relative;
-        }
-        
-        .cyber-tooltip:hover::after {
-            content: attr(data-tooltip);
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(10, 10, 26, 0.9);
-            color: #00f0ff;
-            padding: 5px 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            white-space: nowrap;
-            border: 1px solid #00f0ff;
-            box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
-            z-index: 10;
         }
     </style>
 </head>
-<body class="scanlines">
-    <!-- 3D Background Scene -->
-    <div id="scene3d" class="matrix-bg"></div>
-    
-    <!-- Floating Cyber Elements -->
-    <div class="fixed top-1/4 left-1/4 w-32 h-32 opacity-20">
-        <div class="cyber-sphere"></div>
-    </div>
-    
-    <div class="fixed bottom-1/3 right-1/4 w-24 h-24 opacity-15">
-        <div class="cyber-sphere"></div>
-    </div>
-    
-    <!-- Header -->
-    <header class="cyber-header py-4 px-6 sticky top-0 z-50">
-        <div class="container mx-auto flex justify-between items-center">
+<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="relative">
-                    <div class="cyber-glow w-12 h-12 rounded-full bg-gradient-to-br from-cyber-primary to-cyber-secondary flex items-center justify-center shadow-lg">
-                        <i class="fas fa-bolt text-cyber-dark text-2xl"></i>
-                    </div>
-                    <div class="absolute -inset-2 rounded-full border-2 border-cyber-primary/30 pointer-events-none animate-spin-slow" style="border-top-color: transparent;"></div>
-                </div>
-                <h1 class="text-3xl font-bold font-neu tracking-wider neon-text glitch" data-text="SOLAREDGE NEXUS">SOLAREDGE NEXUS</h1>
-                <div class="text-xs bg-cyber-primary text-cyber-dark px-2 py-1 rounded-full font-bold neon-box">
-                    v4.2.0
+                <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-6">
-                <div class="relative group">
-                    <button class="cyber-button px-5 py-2.5 rounded-full flex items-center space-x-3">
-                        <i class="fas fa-satellite-dish pulse"></i>
-                        <span class="font-bold">SYNC NETWORK</span>
-                        <span class="w-2 h-2 rounded-full bg-green-500 pulse"></span>
-                    </button>
-                    <div class="absolute right-0 mt-2 w-64 bg-cyber-panel text-white rounded-lg shadow-2xl z-10 hidden group-hover:block cyber-border transform -translate-y-2">
-                        <div class="p-4 border-b border-cyber-primary/20">
-                            <h3 class="font-bold text-cyber-primary flex items-center">
-                                <i class="fas fa-network-wired mr-2"></i> NETWORK STATUS
-                            </h3>
-                        </div>
-                        <div class="p-4 space-y-3">
-                            <div class="flex justify-between items-center">
-                                <span class="text-sm">UPLINK</span>
-                                <span class="text-sm font-digital text-green-500">ACTIVE</span>
-                            </div>
-                            <div class="flex justify-between items-center">
-                                <span class="text-sm">BANDWIDTH</span>
-                                <span class="text-sm font-digital text-cyber-primary">42.5 Mbps</span>
-                            </div>
-                            <div class="flex justify-between items-center">
-                                <span class="text-sm">LATENCY</span>
-                                <span class="text-sm font-digital text-cyber-primary">28 ms</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="relative group">
-                    <button class="flex items-center space-x-3">
-                        <div class="relative">
-                            <div class="absolute -inset-1 rounded-full bg-cyber-primary blur opacity-70 group-hover:opacity-100 transition-all duration-300"></div>
-                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="h-10 w-10 rounded-full border-2 border-cyber-primary relative">
-                            <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border border-cyber-dark pulse"></div>
-                        </div>
-                        <span class="font-bold">ADMIN</span>
-                        <i class="fas fa-chevron-down text-xs transition-transform group-hover:rotate-180"></i>
-                    </button>
-                    <div class="absolute right-0 mt-2 w-56 bg-cyber-panel text-white rounded-lg shadow-xl z-10 hidden group-hover:block cyber-border transform -translate-y-2">
-                        <a href="#" class="block px-4 py-3 hover:bg-cyber-primary hover:text-cyber-dark border-b border-cyber-secondary/20 transition-all flex items-center">
-                            <i class="fas fa-user-astronaut mr-2"></i> PROFILE
-                        </a>
-                        <a href="#" class="block px-4 py-3 hover:bg-cyber-primary hover:text-cyber-dark border-b border-cyber-secondary/20 transition-all flex items-center">
-                            <i class="fas fa-cog mr-2"></i> SETTINGS
-                        </a>
-                        <a href="#" class="block px-4 py-3 hover:bg-cyber-primary hover:text-cyber-dark transition-all flex items-center">
-                            <i class="fas fa-power-off mr-2"></i> LOGOUT
-                        </a>
-                    </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>
-    </header>
-
-    <!-- Main Content -->
-    <div class="container mx-auto px-4 py-8 relative z-10">
-        <div class="flex flex-col lg:flex-row gap-8">
+        
+        <!-- Main Dashboard -->
+        <div class="absolute top-20 left-0 right-0 bottom-0 flex">
             <!-- Sidebar -->
-            <aside class="w-full lg:w-72 cyber-panel rounded-xl p-5 h-fit transform hover:rotate-x-2">
-                <nav>
-                    <ul class="space-y-2">
-                        <li>
-                            <a href="#" class="flex items-center space-x-4 p-4 bg-gradient-to-r from-cyber-primary/20 to-transparent text-cyber-primary rounded-lg font-bold border border-cyber-primary/30 hover:border-cyber-primary transition-all">
-                                <i class="fas fa-tachometer-alt text-xl"></i>
-                                <span>DASHBOARD</span>
-                                <i class="fas fa-chevron-right ml-auto text-sm"></i>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#" class="flex items-center space-x-4 p-4 hover:bg-cyber-primary/10 hover:text-cyber-primary rounded-lg border border-transparent hover:border-cyber-primary/30 transition-all">
-                                <i class="fas fa-chart-network text-xl"></i>
-                                <span>ENERGY GRID</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#" class="flex items-center space-x-4 p-4 hover:bg-cyber-primary/10 hover:text-cyber-primary rounded-lg border border-transparent hover:border-cyber-primary/30 transition-all">
-                                <i class="fas fa-solar-panel text-xl"></i>
-                                <span>ARRAY SCAN</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#" class="flex items-center space-x-4 p-4 hover:bg-cyber-primary/10 hover:text-cyber-primary rounded-lg border border-transparent hover:border-cyber-primary/30 transition-all">
-                                <i class="fas fa-bolt text-xl"></i>
-                                <span>INVERTERS</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#" class="flex items-center space-x-4 p-4 hover:bg-cyber-primary/10 hover:text-cyber-primary rounded-lg border border-transparent hover:border-cyber-primary/30 transition-all">
-                                <i class="fas fa-exclamation-triangle text-xl"></i>
-                                <span>ALERTS</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#" class="flex items-center space-x-4 p-4 hover:bg-cyber-primary/10 hover:text-cyber-primary rounded-lg border border-transparent hover:border-cyber-primary/30 transition-all">
-                                <i class="fas fa-terminal text-xl"></i>
-                                <span>SYSTEM LOG</span>
-                            </a>
-                        </li>
-                    </ul>
+            <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-5 bg-cyber-dark/50 rounded-xl cyber-border transform hover:-translate-y-1">
-                    <h3 class="font-bold text-lg text-cyber-primary mb-5 flex items-center">
-                        <i class="fas fa-shield-alt mr-3"></i> SYSTEM STATUS
-                    </h3>
-                    <div class="space-y-4">
-                        <div class="flex items-center justify-between">
-                            <div class="flex items-center space-x-2">
-                                <i class="fas fa-bolt text-cyber-primary"></i>
-                                <span class="text-sm">POWER OUTPUT</span>
-                            </div>
-                            <span class="text-sm font-bold text-green-500 flex items-center">
-                                <span class="w-2 h-2 rounded-full bg-green-500 mr-2 pulse"></span>
-                                ACTIVE
-                            </span>
-                        </div>
-                        <div class="flex items-center justify-between">
-                            <div class="flex items-center space-x-2">
-                                <i class="fas fa-wifi text-cyber-primary"></i>
-                                <span class="text-sm">NETWORK</span>
-                            </div>
-                            <span class="text-sm font-bold text-green-500 flex items-center">
-                                <span class="w-2 h-2 rounded-full bg-green-500 mr-2 pulse"></span>
-                                ONLINE
-                            </span>
+                
+                <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 items-center justify-between">
-                            <div class="flex items-center space-x-2">
-                                <i class="fas fa-clock text-cyber-primary"></i>
-                                <span class="text-sm">LAST SYNC</span>
-                            </div>
-                            <span class="text-sm font-bold font-digital text-cyber-primary">02:34:21</span>
+                        <div class="flex justify-between">
+                            <span>NETWORK</span>
+                            <span class="text-green-400">ONLINE</span>
                         </div>
-                        <div class="flex items-center justify-between">
-                            <div class="flex items-center space-x-2">
-                                <i class="fas fa-lock text-cyber-primary"></i>
-                                <span class="text-sm">SECURITY</span>
-                            </div>
-                            <span class="text-sm font-bold text-green-500 flex items-center">
-                                <i class="fas fa-lock mr-2"></i>
-                                ENCRYPTED
-                            </span>
-                        </div>
-                    </div>
-                    
-                    <div class="mt-6 pt-4 border-t border-cyber-primary/20">
-                        <div class="flex justify-between items-center">
-                            <span class="text-xs text-cyber-primary/60">SYSTEM UPTIME</span>
-                            <span class="text-xs font-digital text-cyber-primary">14D 6H 22M</span>
-                        </div>
-                        <div class="w-full bg-cyber-dark h-1.5 rounded-full mt-2">
-                            <div class="bg-gradient-to-r from-green-500 to-cyber-primary h-1.5 rounded-full" style="width: 92%"></div>
+                        <div class="flex justify-between">
+                            <span>SECURITY</span>
+                            <span class="text-green-400">ENCRYPTED</span>
                         </div>
                     </div>
                 </div>
-                
-                <div class="mt-6 p-4 bg-gradient-to-r from-cyber-primary/10 to-cyber-secondary/10 rounded-lg cyber-border text-center">
-                    <h4 class="text-sm font-bold text-cyber-primary mb-2">NEURAL NETWORK ACTIVE</h4>
-                    <div class="flex justify-center">
-                        <div class="relative">
-                            <div class="w-16 h-16 rounded-full border-2 border-cyber-primary flex items-center justify-center">
-                                <div class="w-12 h-12 rounded-full bg-cyber-primary/20 flex items-center justify-center">
-                                    <i class="fas fa-brain text-cyber-primary text-xl"></i>
-                                </div>
-                            </div>
-                            <div class="absolute -inset-2 rounded-full border-2 border-cyber-primary/30 animate-ping-slow pointer-events-none"></div>
-                        </div>
-                    </div>
-                    <p class="text-xs mt-3 text-cyber-primary/80">AI OPTIMIZATION: 87%</p>
-                </div>
-            </aside>
-
-            <!-- Main Dashboard -->
-            <main class="flex-1">
-                <!-- Summary Cards -->
-                <div class="cyber-grid gap-6 mb-8">
-                    <div class="cyber-panel rounded-xl p-6 holographic cyber-card">
-                        <div class="cyber-panel-inner">
-                            <div class="flex items-center justify-between">
-                                <div>
-                                    <p class="text-cyber-primary/80">CURRENT OUTPUT</p>
-                                    <h2 class="text-4xl font-bold font-digital text-cyber-primary glitch" data-text="42.5">42.5 <span class="text-xl">kW</span></h2>
-                                </div>
-                                <div class="p-3 rounded-full bg-cyber-primary/10 text-cyber-primary border border-cyber-primary/30 neon-box">
-                                    <i class="fas fa-bolt text-2xl"></i>
-                                </div>
-                            </div>
-                            <div class="mt-4 flex items-center">
-                                <span class="text-green-500 mr-2 font-digital"><i class="fas fa-arrow-up"></i> +12%</span>
-                                <span class="text-xs text-cyber-primary/60">PEAK EFFICIENCY</span>
+            </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="mt-3">
-                                <div class="w-full bg-cyber-dark/50 h-1.5 rounded-full">
-                                    <div class="bg-gradient-to-r from-green-500 to-cyber-primary h-1.5 rounded-full" style="width: 82%"></div>
-                                </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 class="cyber-grid-overlay"></div>
                     </div>
-
-                    <div class="cyber-panel rounded-xl p-6 holographic cyber-card">
-                        <div class="cyber-panel-inner">
-                            <div class="flex items-center justify-between">
-                                <div>
-                                    <p class="text-cyber-primary/80">TODAY'S YIELD</p>
-                                    <h2 class="text-4xl font-bold font-digital text-cyber-primary glitch" data-text="1280">1,280 <span class="text-xl">kWh</span></h2>
-                                </div>
-                                <div class="p-3 rounded-full bg-cyber-primary/10 text-cyber-primary border border-cyber-primary/30 neon-box">
-                                    <i class="fas fa-sun text-2xl"></i>
-                                </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="mt-4 flex items-center">
-                                <span class="text-green-500 mr-2 font-digital"><i class="fas fa-arrow-up"></i> +8%</span>
-                                <span class="text-xs text-cyber-primary/60">VS YESTERDAY</span>
-                            </div>
-                            <div class="mt-3">
-                                <div class="w-full bg-cyber-dark/50 h-1.5 rounded-full">
-                                    <div class="bg-gradient-to-r from-cyber-accent to-cyber-primary h-1.5 rounded-full" style="width: 76%"></div>
-                                </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 class="cyber-grid-overlay"></div>
                     </div>
-
-                    <div class="cyber-panel rounded-xl p-6 holographic cyber-card">
-                        <div class="cyber-panel-inner">
-                            <div class="flex items-center justify-between">
-                                <div>
-                                    <p class="text-cyber-primary/80">TOTAL ENERGY</p>
-                                    <h2 class="text-4xl font-bold font-digital text-cyber-primary glitch" data-text="28.4">28.4 <span class="text-xl">MWh</span></h2>
-                                </div>
-                                <div class="p-3 rounded-full bg-cyber-primary/10 text-cyber-primary border border-cyber-primary/30 neon-box">
-                                    <i class="fas fa-database text-2xl"></i>
-                                </div>
-                            </div>
-                            <div class="mt-4 flex items-center">
-                                <span class="text-cyber-accent mr-2 font-digital"><i class="fas fa-leaf"></i></span>
-                                <span class="text-xs text-cyber-primary/60">CO₂ SAVED: 15.2t</span>
+                    
+                    <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="mt-3">
-                                <div class="w-full bg-cyber-dark/50 h-1.5 rounded-full">
-                                    <div class="bg-gradient-to-r from-cyber-secondary to-cyber-primary h-1.5 rounded-full" style="width: 94%"></div>
-                                </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 class="cyber-grid-overlay"></div>
                     </div>
-
-                    <div class="cyber-panel rounded-xl p-6 holographic cyber-card">
-                        <div class="cyber-panel-inner">
-                            <div class="flex items-center justify-between">
-                                <div>
-                                    <p class="text-cyber-primary/80">SYSTEM HEALTH</p>
-                                    <h2 class="text-4xl font-bold font-digital text-cyber-primary glitch" data-text="98">98<span class="text-xl">%</span></h2>
-                                </div>
-                                <div class="p-3 rounded-full bg-cyber-primary/10 text-cyber-primary border border-cyber-primary/30 neon-box">
-                                    <i class="fas fa-heartbeat text-2xl"></i>
-                                </div>
-                            </div>
-                            <div class="mt-4">
-                                <div class="w-full bg-cyber-dark/50 h-1.5 rounded-full">
-                                    <div class="bg-gradient-to-r from-green-500 to-cyber-primary h-1.5 rounded-full" style="width: 98%"></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="mt-3 text-right">
-                                <span class="text-xs text-cyber-primary/60">2 ISSUES DETECTED</span>
+                            <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 class="cyber-grid-overlay"></div>
                     </div>
                 </div>
-
-                <!-- Energy Production Chart -->
-                <div class="cyber-panel rounded-xl p-6 mb-8 cyber-card">
-                    <div class="cyber-panel-inner">
-                        <div class="flex justify-between items-center mb-6">
-                            <h2 class="text-xl font-bold text-cyber-primary flex items-center">
-                                <i class="fas fa-chart-line mr-3"></i> POWER FLOW MONITOR
-                            </h2>
-                            <div class="flex space-x-2">
-                                <button class="cyber-tab active px-4 py-1.5 text-sm">24H</button>
-                                <button class="cyber-tab px-4 py-1.5 text-sm">7D</button>
-                                <button class="cyber-tab px-4 py-1.5 text-sm">30D</button>
-                                <button class="cyber-tab px-4 py-1.5 text-sm">1Y</button>
-                            </div>
-                        </div>
-                        <div class="h-80">
-                            <canvas id="energyChart"></canvas>
-                        </div>
-                    </div>
-                    <div class="cyber-grid-overlay"></div>
+                
+                <!-- Energy Chart -->
+                <div class="cyber-panel p-4 rounded-lg mb-6" style="height: 300px;">
+                    <canvas id="energyChart"></canvas>
                 </div>
-
-                <!-- System Overview -->
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
-                    <!-- Inverter Status -->
-                    <div class="cyber-panel rounded-xl p-6 cyber-card">
-                        <div class="cyber-panel-inner">
-                            <h2 class="text-xl font-bold text-cyber-primary mb-6 flex items-center">
-                                <i class="fas fa-microchip mr-3"></i> INVERTER STATUS
-                            </h2>
-                            <div class="space-y-4">
-                                <div class="p-4 bg-cyber-dark/50 rounded-xl cyber-border flex items-center justify-between transform hover:-translate-y-1 transition-all">
-                                    <div class="flex items-center space-x-4">
-                                        <div class="relative">
-                                            <div class="p-2.5 bg-green-500/20 text-green-500 rounded-full border border-green-500/30 neon-box">
-                                                <i class="fas fa-check-circle"></i>
-                                            </div>
-                                            <div class="absolute -inset-1 rounded-full border-2 border-green-500/30 animate-ping-slow pointer-events-none"></div>
-                                        </div>
-                                        <div>
-                                            <h3 class="font-bold">INVERTER_01</h3>
-                                            <p class="text-xs text-cyber-primary/60">SE5000H // SN:SD4821X</p>
-                                        </div>
-                                    </div>
-                                    <div class="text-right">
-                                        <p class="font-digital text-2xl text-cyber-primary">3.8 kW</p>
-                                        <p class="text-xs text-green-500 font-bold">OPTIMAL</p>
-                                    </div>
-                                </div>
-                                <div class="p-4 bg-cyber-dark/50 rounded-xl cyber-border flex items-center justify-between transform hover:-translate-y-1 transition-all">
-                                    <div class="flex items-center space-x-4">
-                                        <div class="relative">
-                                            <div class="p-2.5 bg-yellow-500/20 text-yellow-500 rounded-full border border-yellow-500/30 neon-box">
-                                                <i class="fas fa-exclamation-circle"></i>
-                                            </div>
-                                            <div class="absolute -inset-1 rounded-full border-2 border-yellow-500/30 animate-ping-slow pointer-events-none"></div>
-                                        </div>
-                                        <div>
-                                            <h3 class="font-bold">INVERTER_02</h3>
-                                            <p class="text-xs text-cyber-primary/60">SE3000H // SN:SD3719Y</p>
-                                        </div>
-                                    </div>
-                                    <div class="text-right">
-                                        <p class="font-digital text-2xl text-cyber-primary">2.1 kW</p>
-                                        <p class="text-xs text-yellow-500 font-bold">DEGRADED</p>
-                                    </div>
-                                </div>
-                                <div class="p-4 bg-cyber-dark/50 rounded-xl cyber-border flex items-center justify-between transform hover:-translate-y-1 transition-all">
-                                    <div class="flex items-center space-x-4">
-                                        <div class="relative">
-                                            <div class="p-2.5 bg-green-500/20 text-green-500 rounded-full border border-green-500/30 neon-box">
-                                                <i class="fas fa-check-circle"></i>
-                                            </div>
-                                            <div class="absolute -inset-1 rounded-full border-2 border-green-500/30 animate-ping-slow pointer-events-none"></div>
-                                        </div>
-                                        <div>
-                                            <h3 class="font-bold">INVERTER_03</h3>
-                                            <p class="text-xs text-cyber-primary/60">SE5000H // SN:SD4923Z</p>
-                                        </div>
-                                    </div>
-                                    <div class="text-right">
-                                        <p class="font-digital text-2xl text-cyber-primary">3.5 kW</p>
-                                        <p class="text-xs text-green-500 font-bold">OPTIMAL</p>
-                                    </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>
-                        <div class="cyber-grid-overlay"></div>
-                    </div>
-
-                    <!-- Solar Array Visualization -->
-                    <div class="cyber-panel rounded-xl p-6 cyber-card">
-                        <div class="cyber-panel-inner">
-                            <h2 class="text-xl font-bold text-cyber-primary mb-6 flex items-center">
-                                <i class="fas fa-solar-panel mr-3"></i> ARRAY VISUALIZATION
-                            </h2>
-                            <div class="grid grid-cols-3 gap-4">
-                                <div class="holographic rounded-xl p-4 text-center cyber-border hover:cyber-glow transition-all duration-300 transform hover:scale-105">
-                                    <div class="relative mx-auto w-12 h-12 mb-2">
-                                        <i class="fas fa-solar-panel text-3xl text-cyber-primary"></i>
-                                        <div class="absolute -inset-1 rounded-full border-2 border-cyber-primary/30 animate-ping-slow pointer-events-none"></div>
-                                    </div>
-                                    <p class="font-bold text-sm">PANEL_01</p>
-                                    <p class="text-xs font-digital text-cyber-primary">280W</p>
-                                </div>
-                                <div class="holographic rounded-xl p-4 text-center cyber-border hover:cyber-glow transition-all duration-300 transform hover:scale-105">
-                                    <div class="relative mx-auto w-12 h-12 mb-2">
-                                        <i class="fas fa-solar-panel text-3xl text-cyber-primary"></i>
-                                        <div class="absolute -inset-1 rounded-full border-2 border-cyber-primary/30 animate-ping-slow pointer-events-none"></div>
-                                    </div>
-                                    <p class="font-bold text-sm">PANEL_02</p>
-                                    <p class="text-xs font-digital text-cyber-primary">280W</p>
-                                </div>
-                                <div class="holographic rounded-xl p-4 text-center cyber-border hover:cyber-glow transition-all duration-300 transform hover:scale-105">
-                                    <div class="relative mx-auto w-12 h-12 mb-2">
-                                        <i class="fas fa-solar-panel text-3xl text-cyber-primary"></i>
-                                        <div class="absolute -inset-1 rounded-full border-2 border-cyber-primary/30 animate-ping-slow pointer-events-none"></div>
-                                    </div>
-                                    <p class="font-bold text-sm">PANEL_03</p>
-                                    <p class="text-xs font-digital text-cyber-primary">280W</p>
-                                </div>
-                                <div class="holographic rounded-xl p-4 text-center cyber-border hover:cyber-glow transition-all duration-300 transform hover:scale-105">
-                                    <div class="relative mx-auto w-12 h-12 mb-2">
-                                        <i class="fas fa-solar-panel text-3xl text-cyber-primary"></i>
-                                        <div class="absolute -inset-1 rounded-full border-2 border-cyber-primary/30 animate-ping-slow pointer-events-none"></div>
-                                    </div>
-                                    <p class="font-bold text-sm">PANEL_04</p>
-                                    <p class="text-xs font-digital text-cyber-primary">280W</p>
-                                </div>
-                                <div class="holographic rounded-xl p-4 text-center cyber-border hover:cyber-glow transition-all duration-300 transform hover:scale-105">
-                                    <div class="relative mx-auto w-12 h-12 mb-2">
-                                        <i class="fas fa-solar-panel text-3xl text-cyber-primary"></i>
-                                        <div class="absolute -inset-1 rounded-full border-2 border-cyber-primary/30 animate-ping-slow pointer-events-none"></div>
-                                    </div>
-                                    <p class="font-bold text-sm">PANEL_05</p>
-                                    <p class="text-xs font-digital text-cyber-primary">280W</p>
-                                </div>
-                                <div class="holographic rounded-xl p-4 text-center cyber-border hover:cyber-glow transition-all duration-300 transform hover:scale-105">
-                                    <div class="relative mx-auto w-12 h-12 mb-2">
-                                        <i class="fas fa-solar-panel text-3xl text-cyber-primary"></i>
-                                        <div class="absolute -inset-1 rounded-full border-2 border-cyber-primary/30 animate-ping-slow pointer-events-none"></div>
-                                    </div>
-                                    <p class="font-bold text-sm">PANEL_06</p>
-                                    <p class="text-xs font-digital text-cyber-primary">280W</p>
+                            <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="mt-6 bg-cyber-dark/50 rounded-xl p-5 cyber-border transform hover:-translate-y-1 transition-all">
-                                <div class="flex justify-between items-center">
-                                    <div>
-                                        <p class="text-xs text-cyber-primary/60">TOTAL CAPACITY</p>
-                                        <p class="font-bold font-digital text-2xl text-cyber-primary">5.04 kW</p>
-                                    </div>
-                                    <button class="flex items-center text-cyber-primary font-bold text-sm neon-text">
-                                        <span>DETAILED SCAN</span>
-                                        <i class="fas fa-chevron-right ml-2"></i>
-                                    </button>
+                            <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 class="cyber-grid-overlay"></div>
                     </div>
-                </div>
-
-                <!-- Environmental Impact -->
-                <div class="cyber-panel rounded-xl p-6 mb-8 cyber-card">
-                    <div class="cyber-panel-inner">
-                        <h2 class="text-xl font-bold text-cyber-primary mb-6 flex items-center">
-                            <i class="fas fa-globe-americas mr-3"></i> ENVIRONMENTAL IMPACT
-                        </h2>
-                        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
-                            <div class="bg-cyber-dark/50 rounded-xl p-5 flex items-center cyber-border transform hover:-translate-y-1 transition-all">
-                                <div class="mr-4 text-green-500 neon-text">
-                                    <i class="fas fa-tree text-4xl"></i>
-                                </div>
-                                <div>
-                                    <p class="text-xs text-cyber-primary/60">CO₂ OFFSET</p>
-                                    <p class="text-2xl font-bold font-digital text-green-500">15.2 TONS</p>
-                                    <p class="text-xs text-cyber-primary/60">EQUIVALENT TO 34 TREES</p>
-                                </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="bg-cyber-dark/50 rounded-xl p-5 flex items-center cyber-border transform hover:-translate-y-1 transition-all">
-                                <div class="mr-4 text-cyber-accent neon-accent">
-                                    <i class="fas fa-gas-pump text-4xl"></i>
-                                </div>
-                                <div>
-                                    <p class="text-xs text-cyber-primary/60">GASOLINE SAVED</p>
-                                    <p class="text-2xl font-bold font-digital text-cyber-accent">1,642 GAL</p>
-                                    <p class="text-xs text-cyber-primary/60">EQUIVALENT TO 36K MILES</p>
-                                </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="bg-cyber-dark/50 rounded-xl p-5 flex items-center cyber-border transform hover:-translate-y-1 transition-all">
-                                <div class="mr-4 text-cyber-secondary neon-text">
-                                    <i class="fas fa-home text-4xl"></i>
-                                </div>
-                                <div>
-                                    <p class="text-xs text-cyber-primary/60">HOMES POWERED</p>
-                                    <p class="text-2xl font-bold font-digital text-cyber-secondary">2.4 HOMES</p>
-                                    <p class="text-xs text-cyber-primary/60">FOR ONE YEAR</p>
-                                </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 class="cyber-grid-overlay"></div>
-                </div>
-                
-                <!-- 3D Network Visualization -->
-                <div class="cyber-panel rounded-xl p-6 mb-8 cyber-card">
-                    <div class="cyber-panel-inner">
-                        <h2 class="text-xl font-bold text-cyber-primary mb-6 flex items-center">
-                            <i class="fas fa-project-diagram mr-3"></i> NETWORK TOPOLOGY
-                        </h2>
-                        <div class="h-80 relative">
-                            <div id="network3d" class="w-full h-full"></div>
-                            <div class="absolute bottom-4 right-4 flex space-x-3">
-                                <button class="cyber-button px-3 py-1 text-sm rounded-full">
-                                    <i class="fas fa-expand"></i>
-                                </button>
-                                <button class="cyber-button px-3 py-1 text-sm rounded-full">
-                                    <i class="fas fa-sync-alt"></i>
-                                </button>
+                            <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 class="cyber-grid-overlay"></div>
-                </div>
-            </main>
-        </div>
-    </div>
-
-    <!-- Footer -->
-    <footer class="bg-cyber-dark border-t border-cyber-primary/20 py-8 relative z-10">
-        <div class="container mx-auto px-4">
-            <div class="flex flex-col md:flex-row justify-between items-center mb-6">
-                <div class="mb-4 md:mb-0">
-                    <div class="flex items-center space-x-3">
-                        <div class="w-8 h-8 rounded-full bg-cyber-primary flex items-center justify-center neon-box">
-                            <i class="fas fa-bolt text-cyber-dark text-sm"></i>
-                        </div>
-                        <span class="font-bold text-lg">SOLAREDGE // NEXUS CONTROL v4.2.0</span>
-                    </div>
-                    <p class="text-xs text-cyber-primary/60 mt-2">NEURAL NETWORK POWERED ANALYTICS</p>
-                </div>
-                <div class="flex space-x-5">
-                    <a href="#" class="text-cyber-primary/60 hover:text-cyber-primary transition-all text-xl">
-                        <i class="fab fa-github"></i>
-                    </a>
-                    <a href="#" class="text-cyber-primary/60 hover:text-cyber-primary transition-all text-xl">
-                        <i class="fab fa-twitter"></i>
-                    </a>
-                    <a href="#" class="text-cyber-primary/60 hover:text-cyber-primary transition-all text-xl">
-                        <i class="fab fa-linkedin"></i>
-                    </a>
-                    <a href="#" class="text-cyber-primary/60 hover:text-cyber-primary transition-all text-xl">
-                        <i class="fab fa-discord"></i>
-                    </a>
-                </div>
-            </div>
-            <div class="border-t border-cyber-primary/10 pt-6 text-xs text-cyber-primary/60">
-                <div class="flex flex-col md:flex-row justify-between">
-                    <div class="mb-4 md:mb-0">
-                        <p>© 2077 SOLAREDGE TECHNOLOGIES. ALL RIGHTS RESERVED.</p>
-                    </div>
-                    <div class="flex flex-col md:flex-row md:space-x-6 space-y-2 md:space-y-0">
-                        <a href="#" class="hover:text-cyber-primary transition-all">SECURITY PROTOCOLS</a>
-                        <a href="#" class="hover:text-cyber-primary transition-all">DATA PRIVACY</a>
-                        <a href="#" class="hover:text-cyber-primary transition-all">TERMS OF SERVICE</a>
-                        <a href="#" class="hover:text-cyber-primary transition-all">CONTACT SUPPORT</a>
-                    </div>
                 </div>
             </div>
         </div>
-    </footer>
+    </div>
 
-    <!-- Chart.js -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script>
-        // 3D Background Scene
-        const scene3d = document.getElementById('scene3d');
-        
-        // Initialize Three.js scene
+        // 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({ alpha: true, antialias: true });
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
         renderer.setSize(window.innerWidth, window.innerHeight);
-        renderer.setClearColor(0x000000, 0);
-        scene3d.appendChild(renderer.domElement);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.getElementById('container').appendChild(renderer.domElement);
         
-        // Add floating elements
-        const geometry = new THREE.IcosahedronGeometry(1, 0);
-        const material = new THREE.MeshBasicMaterial({ 
+        // 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.05
+            opacity: 0.2
         });
         
-        const icosahedrons = [];
         for (let i = 0; i < 8; i++) {
-            const icosahedron = new THREE.Mesh(geometry, material);
-            icosahedron.position.x = Math.random() * 20 - 10;
-            icosahedron.position.y = Math.random() * 20 - 10;
-            icosahedron.position.z = Math.random() * 10 - 20;
-            icosahedron.scale.setScalar(Math.random() * 2 + 1);
-            scene.add(icosahedron);
-            icosahedrons.push(icosahedron);
+            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 grid helper
-        const gridHelper = new THREE.GridHelper(20, 20, 0x00f0ff, 0x00f0ff);
-        gridHelper.material.opacity = 0.05;
-        gridHelper.material.transparent = true;
-        gridHelper.position.z = -10;
-        scene.add(gridHelper);
-        
-        camera.position.z = 5;
+        // Add connecting lines
+        const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00f0ff, transparent: true, opacity: 0.1 });
+        const lines = [];
         
-        // Animation loop
-        function animate() {
-            requestAnimationFrame(animate);
-            
-            icosahedrons.forEach(ico => {
-                ico.rotation.x += 0.001;
-                ico.rotation.y += 0.002;
-                ico.position.y += 0.001;
-                if (ico.position.y > 10) ico.position.y = -10;
-            });
-            
-            renderer.render(scene, camera);
+        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);
+                }
+            }
         }
         
-        animate();
-        
-        // Network 3D Visualization
-        const networkScene = new THREE.Scene();
-        const networkCamera = new THREE.PerspectiveCamera(75, document.getElementById('network3d').clientWidth / document.getElementById('network3d').clientHeight, 0.1, 1000);
-        const networkRenderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
-        networkRenderer.setSize(document.getElementById('network3d').clientWidth, document.getElementById('network3d').clientHeight);
-        document.getElementById('network3d').appendChild(networkRenderer.domElement);
-        
-        // Create nodes
-        const nodeGeometry = new THREE.SphereGeometry(0.5, 16, 16);
-        const nodeMaterial = new THREE.MeshBasicMaterial({ 
+        // 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.8
+            opacity: 0.3
         });
+        const centerSphere = new THREE.Mesh(centerGeometry, centerMaterial);
+        scene.add(centerSphere);
         
-        const nodes = [];
-        const positions = [
-            { x: -3, y: 0, z: 0 },
-            { x: 0, y: 3, z: 0 },
-            { x: 3, y: 0, z: 0 },
-            { x: 0, y: -3, z: 0 },
-            { x: 0, y: 0, z: 3 },
-            { x: 0, y: 0, z: -3 }
-        ];
-        
-        positions.forEach(pos => {
-            const node = new THREE.Mesh(nodeGeometry, nodeMaterial);
-            node.position.set(pos.x, pos.y, pos.z);
-            networkScene.add(node);
-            nodes.push(node);
-        });
+        // Add floating particles
+        const particlesGeometry = new THREE.BufferGeometry();
+        const particlesCount = 1000;
+        const posArray = new Float32Array(particlesCount * 3);
         
-        // Create connections
-        const lines = [];
-        const connections = [
-            [0, 1], [1, 2], [2, 3], [3, 0],
-            [0, 4], [1, 4], [2, 4], [3, 4],
-            [0, 5], [1, 5], [2, 5], [3, 5]
-        ];
+        for (let i = 0; i < particlesCount * 3; i++) {
+            posArray[i] = (Math.random() - 0.5) * 100;
+        }
         
-        connections.forEach(conn => {
-            const lineGeometry = new THREE.BufferGeometry().setFromPoints([
-                new THREE.Vector3(
-                    nodes[conn[0]].position.x,
-                    nodes[conn[0]].position.y,
-                    nodes[conn[0]].position.z
-                ),
-                new THREE.Vector3(
-                    nodes[conn[1]].position.x,
-                    nodes[conn[1]].position.y,
-                    nodes[conn[1]].position.z
-                )
-            ]);
-            const lineMaterial = new THREE.LineBasicMaterial({ 
-                color: 0x00f0ff,
-                transparent: true,
-                opacity: 0.3
-            });
-            const line = new THREE.Line(lineGeometry, lineMaterial);
-            networkScene.add(line);
-            lines.push(line);
+        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);
         
-        // Add central node
-        const centralNode = new THREE.Mesh(nodeGeometry, nodeMaterial);
-        centralNode.scale.setScalar(1.5);
-        networkScene.add(centralNode);
+        // Camera position
+        camera.position.z = 30;
+        camera.position.y = 10;
         
-        networkCamera.position.z = 10;
-        
-        // Animation loop for network
-        function animateNetwork() {
-            requestAnimationFrame(animateNetwork);
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
             
-            nodes.forEach((node, i) => {
-                node.rotation.x += 0.01;
-                node.rotation.y += 0.01;
-                
-                // Pulsing effect
-                const scale = 0.5 + Math.abs(Math.sin(Date.now() * 0.001 + i) * 0.3);
-                node.scale.set(scale, scale, scale);
+            // Rotate orbs
+            orbs.forEach(orb => {
+                orb.rotation.x += 0.005;
+                orb.rotation.y += 0.01;
             });
             
-            centralNode.rotation.x += 0.005;
-            centralNode.rotation.y += 0.01;
+            // Rotate center sphere
+            centerSphere.rotation.x += 0.002;
+            centerSphere.rotation.y += 0.005;
             
-            // Pulsing effect for central node
-            const centralScale = 1.2 + Math.sin(Date.now() * 0.001) * 0.3;
-            centralNode.scale.set(centralScale, centralScale, centralScale);
+            // Move particles
+            particlesMesh.rotation.y += 0.001;
             
-            networkRenderer.render(networkScene, networkCamera);
+            renderer.render(scene, camera);
         }
         
-        animateNetwork();
+        animate();
+        
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
         
-        // Energy Production Chart
+        // Energy Chart
         const energyCtx = document.getElementById('energyChart').getContext('2d');
         const energyChart = new Chart(energyCtx, {
             type: 'line',
@@ -1209,14 +411,9 @@
                     data: [0, 1.2, 3.8, 4.2, 3.9, 1.5, 0.2],
                     borderColor: '#00f0ff',
                     backgroundColor: 'rgba(0, 240, 255, 0.1)',
-                    borderWidth: 3,
+                    borderWidth: 2,
                     tension: 0.4,
-                    fill: true,
-                    pointBackgroundColor: '#00f0ff',
-                    pointBorderColor: '#0a0a1a',
-                    pointBorderWidth: 2,
-                    pointRadius: 5,
-                    pointHoverRadius: 8
+                    fill: true
                 }]
             },
             options: {
@@ -1225,34 +422,15 @@
                 plugins: {
                     legend: {
                         display: false
-                    },
-                    tooltip: {
-                        backgroundColor: '#1a1a3a',
-                        titleColor: '#00f0ff',
-                        bodyColor: '#e0e0ff',
-                        borderColor: '#00f0ff',
-                        borderWidth: 1,
-                        displayColors: false,
-                        padding: 15,
-                        callbacks: {
-                            label: function(context) {
-                                return 'POWER: ' + context.parsed.y + ' kW';
-                            }
-                        }
                     }
                 },
                 scales: {
                     y: {
-                        beginAtZero: true,
                         grid: {
                             color: 'rgba(0, 240, 255, 0.1)'
                         },
                         ticks: {
-                            color: '#00f0ff',
-                            font: {
-                                family: 'Orbitron',
-                                size: 12
-                            }
+                            color: '#00f0ff'
                         }
                     },
                     x: {
@@ -1260,111 +438,21 @@
                             display: false
                         },
                         ticks: {
-                            color: '#00f0ff',
-                            font: {
-                                family: 'Orbitron',
-                                size: 12
-                            }
+                            color: '#00f0ff'
                         }
                     }
                 }
             }
         });
-
-        // Add tilt effect to cyber cards
-        const cyberCards = document.querySelectorAll('.cyber-card');
-        cyberCards.forEach(card => {
-            VanillaTilt.init(card, {
-                max: 5,
-                speed: 500,
-                glare: true,
-                "max-glare": 0.2,
-                gyroscope: true
-            });
-        });
-
-        // Random panel glow effect
-        function updatePanelGlow() {
-            const panels = document.querySelectorAll('.holographic');
-            const randomIndex = Math.floor(Math.random() * panels.length);
-            
-            // Remove all glow effects first
-            panels.forEach(panel => {
-                panel.classList.remove('cyber-glow');
-            });
-            
-            // Add glow to random panel
-            panels[randomIndex].classList.add('cyber-glow');
-        }
-
-        // Update panel glow every 2-5 seconds
-        setInterval(updatePanelGlow, Math.random() * 3000 + 2000);
-
-        // Add random glitch effects to headers
-        function triggerRandomGlitch() {
-            const glitchElements = document.querySelectorAll('.glitch');
-            glitchElements.forEach(el => {
-                if (Math.random() > 0.7) { // 30% chance to glitch
-                    el.style.animation = 'glitch-effect 0.5s';
-                    setTimeout(() => {
-                        el.style.animation = '';
-                    }, 500);
-                }
-            });
-        }
-
-        // Trigger random glitches every 3-8 seconds
-        setInterval(triggerRandomGlitch, Math.random() * 5000 + 3000);
-
-        // Tab functionality
-        const tabs = document.querySelectorAll('.cyber-tab');
-        tabs.forEach(tab => {
-            tab.addEventListener('click', () => {
-                tabs.forEach(t => t.classList.remove('active'));
-                tab.classList.add('active');
-                
-                // Update chart data based on selected tab
-                const timeRanges = {
-                    '24H': [0, 1.2, 3.8, 4.2, 3.9, 1.5, 0.2],
-                    '7D': [2.1, 2.8, 3.5, 4.0, 3.8, 3.2, 2.5],
-                    '30D': [3.0, 3.2, 3.5, 3.8, 3.9, 3.7, 3.5],
-                    '1Y': [2.5, 2.8, 3.2, 3.8, 4.0, 3.5, 3.0]
-                };
-                
-                energyChart.data.datasets[0].data = timeRanges[tab.textContent];
-                energyChart.update();
-            });
-        });
-
-        // Window resize handlers
-        window.addEventListener('resize', () => {
-            // Resize main 3D background
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            
-            // Resize network visualization
-            networkCamera.aspect = document.getElementById('network3d').clientWidth / document.getElementById('network3d').clientHeight;
-            networkCamera.updateProjectionMatrix();
-            networkRenderer.setSize(document.getElementById('network3d').clientWidth, document.getElementById('network3d').clientHeight);
-        });
-
+        
         // Parallax effect
         document.addEventListener('mousemove', (e) => {
             const x = e.clientX / window.innerWidth;
             const y = e.clientY / window.innerHeight;
             
-            // Move background elements slightly
-            icosahedrons.forEach((ico, i) => {
-                ico.position.x = (x * 2 - 1) * 2;
-                ico.position.y = -(y * 2 - 1) * 2;
-            });
-            
-            // Move network visualization
-            nodes.forEach((node, i) => {
-                node.position.x = positions[i].x + (x * 2 - 1);
-                node.position.y = positions[i].y + (y * 2 - 1);
-            });
+            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>