<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nexus-LCO - Living Cellular Organism Blockchain</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #0a0a0a;
            color: #ffffff;
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Animated Background */
        .bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a0a 100%);
            z-index: -2;
        }

        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        /* Header */
        .header {
            position: sticky;
            top: 0;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
            padding: 1rem 2rem;
        }

        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            background: linear-gradient(45deg, #00ff87, #00bfff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .nav-menu {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

        .nav-menu a {
            color: #ffffff;
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-menu a:hover {
            color: #00ff87;
        }

        .connect-wallet {
            padding: 0.5rem 1.5rem;
            background: linear-gradient(45deg, #00ff87, #00bfff);
            border: none;
            border-radius: 25px;
            color: #000;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .connect-wallet:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(0, 255, 135, 0.4);
        }

        /* Main Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }

        /* Grid Layout */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        /* Card Styles */
        .card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 1.5rem;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 255, 135, 0.2);
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
            font-size: 1.1rem;
            color: #00ff87;
        }

        .card-icon {
            font-size: 1.5rem;
        }

        /* Status Grid */
        .status-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .status-item {
            text-align: center;
            padding: 1rem;
            background: rgba(0, 255, 135, 0.1);
            border-radius: 10px;
            border: 1px solid rgba(0, 255, 135, 0.3);
        }

        .status-value {
            font-size: 2rem;
            font-weight: bold;
            background: linear-gradient(45deg, #00ff87, #00bfff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .status-label {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }

        /* Wallet Portfolio */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .token-card {
            background: rgba(255, 255, 255, 0.03);
            padding: 1rem;
            border-radius: 10px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .token-symbol {
            font-size: 1.2rem;
            font-weight: bold;
            color: #00ff87;
            margin-bottom: 0.5rem;
        }

        .token-balance {
            font-size: 1.5rem;
            font-weight: bold;
        }

        /* Cellular Ecosystem */
        .ecosystem-stats {
            display: grid;
            grid-template-columns: repeat(2, 2fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .stat-box {
            background: rgba(0, 191, 255, 0.1);
            padding: 1rem;
            border-radius: 10px;
            text-align: center;
            border: 1px solid rgba(0, 191, 255, 0.3);
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: bold;
            color: #00bfff;
        }

        /* Energy Harvesting */
        .energy-display {
            background: linear-gradient(135deg, rgba(0, 255, 135, 0.1), rgba(0, 191, 255, 0.1));
            padding: 1.5rem;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 1rem;
            border: 1px solid rgba(0, 255, 135, 0.3);
        }

        .energy-amount {
            font-size: 2.5rem;
            font-weight: bold;
            background: linear-gradient(45deg, #00ff87, #00bfff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .energy-rate {
            font-size: 1.2rem;
            color: #00ff87;
        }

        .harvest-breakdown {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .harvest-item {
            background: rgba(255, 255, 255, 0.05);
            padding: 0.5rem;
            border-radius: 8px;
            font-size: 0.9rem;
        }

        /* Blockchain Explorer */
        .explorer-tabs {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .tab {
            padding: 0.5rem 1rem;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            transition: color 0.3s;
            position: relative;
        }

        .tab.active {
            color: #00ff87;
        }

        .tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: #00ff87;
        }

        .explorer-content {
            max-height: 300px;
            overflow-y: auto;
        }

        .explorer-item {
            background: rgba(255, 255, 255, 0.03);
            padding: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .hash {
            font-family: monospace;
            color: #00bfff;
            font-size: 0.9rem;
        }

        /* AI Analytics */
        .analytics-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .metric-card {
            background: rgba(138, 43, 226, 0.1);
            padding: 1rem;
            border-radius: 10px;
            text-align: center;
            border: 1px solid rgba(138, 43, 226, 0.3);
        }

        .metric-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #8a2be2;
        }

        .metric-label {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }

        /* Neural Network Visualization */
        .neural-network {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 2rem;
            background: rgba(138, 43, 226, 0.05);
            border-radius: 15px;
            margin-top: 1rem;
        }

        .network-layer {
            text-align: center;
        }

        .layer-name {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 0.5rem;
        }

        .layer-nodes {
            font-size: 1.2rem;
            font-weight: bold;
            color: #8a2be2;
        }

        .layer-status {
            font-size: 0.8rem;
            color: #00ff87;
            margin-top: 0.5rem;
        }

        /* Governance */
        .governance-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .voting-power {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.1));
            padding: 1.5rem;
            border-radius: 15px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .power-breakdown {
            margin-top: 1rem;
        }

        .power-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            padding: 0.5rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
        }

        /* Enterprise Suite */
        .compliance-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .compliance-item {
            background: rgba(255, 255, 255, 0.05);
            padding: 1rem;
            border-radius: 10px;
            text-align: center;
        }

        .compliance-status {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: bold;
            color: #00ff87;
            margin-bottom: 0.5rem;
        }

        .compliance-check {
            width: 20px;
            height: 20px;
            background: #00ff87;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .compliance-check::after {
            content: '✓';
            color: #000;
            font-weight: bold;
        }

        /* ESG Metrics */
        .esg-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

        .esg-card {
            background: rgba(255, 255, 255, 0.03);
            padding: 1rem;
            border-radius: 10px;
            text-align: center;
        }

        .esg-score {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .esg-environmental { color: #00ff87; }
        .esg-social { color: #00bfff; }
        .esg-governance { color: #ffd700; }

        /* Developer Console */
        .api-stats {
            display: grid;
            grid-template-columns: repeat(2, 2fr);
            gap: 1rem;
        }

        .api-metric {
            background: rgba(255, 255, 255, 0.05);
            padding: 1rem;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .api-value {
            font-size: 1.2rem;
            font-weight: bold;
            color: #00ff87;
        }

        /* Animations */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes glow {
            0% { box-shadow: 0 0 5px rgba(0, 255, 135, 0.5); }
            50% { box-shadow: 0 0 20px rgba(0, 255, 135, 0.8); }
            100% { box-shadow: 0 0 5px rgba(0, 255, 135, 0.5); }
        }

        .glow {
            animation: glow 2s infinite;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(0, 255, 135, 0.5);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 255, 135, 0.7);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }

            .dashboard-grid {
                grid-template-columns: 1fr;
            }

            .portfolio-grid,
            .analytics-grid,
            .compliance-grid,
            .esg-grid {
                grid-template-columns: 1fr;
            }

            .status-grid,
            .ecosystem-stats,
            .governance-stats,
            .api-stats {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="bg-animation"></div>
    <canvas class="particles" id="particles"></canvas>

    <header class="header">
        <div class="header-content">
            <div class="logo">🧬 Nexus-LCO</div>
            <nav>
                <ul class="nav-menu">
                    <li><a href="#dashboard">Dashboard</a></li>
                    <li><a href="#laboratory">Laboratory</a></li>
                    <li><a href="#governance">Governance</a></li>
                    <li><a href="#developer">Developer</a></li>
                </ul>
            </nav>
            <button class="connect-wallet" onclick="connectWallet()">Connect Wallet</button>
        </div>
    </header>

    <div class="container">
        <!-- Platform Status -->
        <div class="dashboard-grid">
            <div class="card">
                <div class="card-header">
                    <span class="card-icon">🛰️</span>
                    <h3>Platform Status</h3>
                </div>
                <div class="status-grid">
                    <div class="status-item">
                        <div class="status-label">Satellites</div>
                        <div class="status-value">8/8</div>
                        <div class="status-label">Active</div>
                    </div>
                    <div class="status-item">
                        <div class="status-label">Quantum Channels</div>
                        <div class="status-value">5/5</div>
                        <div class="status-label">Operational</div>
                    </div>
                    <div class="status-item">
                        <div class="status-label">Blockchain Nodes</div>
                        <div class="status-value" id="nodeCount">147</div>
                        <div class="status-label">Active</div>
                    </div>
                    <div class="status-item">
                        <div class="status-label">Network Independence</div>
                        <div class="status-value">99.9%</div>
                        <div class="status-label"></div>
                    </div>
                </div>
            </div>

            <!-- Wallet Portfolio -->
            <div class="card">
                <div class="card-header">
                    <span class="card-icon">💰</span>
                    <h3>Wallet Portfolio</h3>
                </div>
                <div style="text-align: center; margin-bottom: 1rem;">
                    <div style="font-size: 0.9rem; color: rgba(255,255,255,0.7);">Total Portfolio Value</div>
                    <div class="status-value" id="totalValue">0.00 E-Flux</div>
                </div>
                <div class="portfolio-grid">
                    <div class="token-card">
                        <div class="token-symbol">E-Flux</div>
                        <div class="token-balance" id="efluxBalance">0.00</div>
                    </div>
                    <div class="token-card">
                        <div class="token-symbol">R-Matter</div>
                        <div class="token-balance" id="rmatterBalance">0.00</div>
                    </div>
                    <div class="token-card">
                        <div class="token-symbol">X-Flow</div>
                        <div class="token-balance" id="xflowBalance">0.00</div>
                    </div>
                </div>
            </div>

            <!-- Cellular Ecosystem -->
            <div class="card">
                <div class="card-header">
                    <span class="card-icon">🧬</span>
                    <h3>Cellular Ecosystem</h3>
                </div>
                <div class="ecosystem-stats">
                    <div class="stat-box">
                        <div class="stat-value" id="activeOrganisms">0</div>
                        <div class="status-label">Active Organisms</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-value" id="totalGenerations">0</div>
                        <div class="status-label">Total Generations</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-value" id="uniqueMutations">0</div>
                        <div class="status-label">Unique Mutations</div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-value" id="avgConsciousness">0.0%</div>
                        <div class="status-label">Avg Consciousness</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Energy Harvesting -->
        <div class="card">
            <div class="card-header">
                <span class="card-icon">⚡</span>
                <h3>Energy Harvesting</h3>
            </div>
            <div class="energy-display">
                <div class="energy-amount" id="energyAmount">0 E-Flux</div>
                <div class="energy-rate" id="energyRate">+15.2 E-Flux/hour</div>
            </div>
            <div class="harvest-breakdown">
                <div class="harvest-item">
                    <div>Base Harvesting</div>
                    <div style="color: #00ff87;">+5.0/h</div>
                </div>
                <div class="harvest-item">
                    <div>Cell Bonus</div>
                    <div style="color: #00ff87;">+8.2/h</div>
                </div>
                <div class="harvest-item">
                    <div>Consciousness</div>
                    <div style="color: #00ff87;">+2.0/h</div>
                </div>
            </div>
        </div>

        <!-- Recent Activity & Market Overview -->
        <div class="dashboard-grid">
            <div class="card">
                <div class="card-header">
                    <span class="card-icon">📈</span>
                    <h3>Recent Activity</h3>
                </div>
                <div class="explorer-content" id="recentActivity">
                    <!-- Activity items will be dynamically added -->
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <span class="card-icon">📊</span>
                    <h3>Market Overview</h3>
                </div>
                <div class="portfolio-grid">
                    <div class="token-card">
                        <div class="token-symbol">E-Flux</div>
                        <div style="font-size: 1rem;">$1.000000</div>
                        <div style="color: #00ff87; font-size: 0.9rem;">+0.00%</div>
                    </div>
                    <div class="token-card">
                        <div class="token-symbol">R-Matter</div>
                        <div style="font-size: 1rem;">$2.500000</div>
                        <div style="color: #00ff87; font-size: 0.9rem;">+0.00%</div>
                    </div>
                    <div class="token-card">
                        <div class="token-symbol">X-Flow</div>
                        <div style="font-size: 1rem;">$5.000000</div>
                        <div style="color: #00ff87; font-size: 0.9rem;">+0.00%</div>
                    </div>
                </div>
                <div style="text-align: center; margin-top: 1rem; color: rgba(255,255,255,0.7);">
                    24h Volume: <span style="color: #fff; font-weight: bold;">$0.00</span>
                </div>
            </div>
        </div>

        <!-- Quantum Cellular Laboratory -->
        <div class="card" id="laboratory">
            <div class="card-header">
                <span class="card-icon">🧬</span>
                <h3>Quantum Cellular Laboratory</h3>
            </div>
            <div style="text-align: center; padding: 3rem;">
                <div style="font-size: 3rem; margin-bottom: 1rem;">🧪</div>
                <h3 style="margin-bottom: 1rem;">Coming Soon</h3>
                <p style="color: rgba(255,255,255,0.7);">Advanced cellular organism creation and mutation features</p>
            </div>
        </div>

        <!-- Blockchain Explorer -->
        <div class="card">
            <div class="card-header">
                <span class="card-icon">⛓️</span>
                <h3>Blockchain Explorer</h3>
            </div>
            <div class="status-grid" style="margin-bottom: 1rem;">
                <div class="status-item">
                    <div class="status-value" id="blockHeight">0</div>
                    <div class="status-label">Block Height</div>
                </div>
                <div class="status-item">
                    <div class="status-value">2.1s</div>
                    <div class="status-label">Avg Block Time</div>
                </div>
                <div class="status-item">
                    <div class="status-value" id="totalTx">0</div>
                    <div class="status-label">Total Transactions</div>
                </div>
                <div class="status-item">
                    <div class="status-value">Advanced</div>
                    <div class="status-label">Difficulty</div>
                </div>
            </div>
            <div class="explorer-tabs">
                <button class="tab active" onclick="switchTab('blocks')">Recent Blocks</button>
                <button class="tab" onclick="switchTab('transactions')">Recent Transactions</button>
            </div>
            <div class="explorer-content" id="explorerContent">
                <!-- Block/Transaction data will be dynamically added -->
            </div>
        </div>

        <!-- AI Analytics & Optimization -->
        <div class="card">
            <div class="card-header">
                <span class="card-icon">🤖</span>
                <h3>AI Analytics & Optimization</h3>
            </div>
            
            <h4 style="margin-bottom: 1rem; color: #8a2be2;">🔮 Predictive Analytics</h4>
            <div class="analytics-grid">
                <div class="metric-card">
                    <div class="metric-label">Next Mutation Probability</div>
                    <div class="metric-value">87.3%</div>
                    <div class="status-label">Sentience</div>
                </div>
                <div class="metric-card">
                    <div class="metric-label">Network Growth</div>
                    <div class="metric-value">+15.2%</div>
                    <div class="status-label">Next 7 days</div>
                </div>
                <div class="metric-card">
                    <div class="metric-label">Energy Efficiency</div>
                    <div class="metric-value">94.7%</div>
                    <div class="status-label">Optimal Range</div>
                </div>
            </div>

            <h4 style="margin: 1.5rem 0 1rem; color: #8a2be2;">🧠 Neural Network Status</h4>
            <div class="neural-network">
                <div class="network-layer">
                    <div class="layer-name">Input Layer</div>
                    <div class="layer-nodes">256 nodes</div>
                    <div class="layer-status">Active</div>
                </div>
                <div class="network-layer">
                    <div class="layer-name">Hidden Layers</div>
                    <div class="layer-nodes">512 x 3</div>
                    <div class="layer-status">Processing</div>
                </div>
                <div class="network-layer">
                    <div class="layer-name">Output Layer</div>
                    <div class="layer-nodes">128 nodes</div>
                    <div class="layer-status">Optimal</div>
                </div>
            </div>

            <h4 style="margin: 1.5rem 0 1rem; color: #8a2be2;">⚡ Performance Optimization</h4>
            <div class="analytics-grid">
                <div class="metric-card">
                    <div class="metric-label">CPU Efficiency</div>
                    <div class="metric-value">92%</div>
                </div>
                <div class="metric-card">
                    <div class="metric-label">Memory Usage</div>
                    <div class="metric-value">67%</div>
                </div>
                <div class="metric-card">
                    <div class="metric-label">Network I/O</div>
                    <div class="metric-value">84%</div>
                </div>
            </div>
        </div>

        <!-- Decentralized Governance -->
        <div class="card" id="governance">
            <div class="card-header">
                <span class="card-icon">🏛️</span>
                <h3>Decentralized Governance</h3>
            </div>
            <div class="governance-stats">
                <div class="stat-box">
                    <div class="stat-value">0</div>
                    <div class="status-label">Active Proposals</div>
                </div>
                <div class="voting-power">
                    <h4 style="margin-bottom: 1rem;">Your Voting Power</h4>
                    <div class="power-breakdown">
                        <div class="power-item">
                            <span>Direct Holdings</span>
                            <span style="color: #ffd700;">1,250 VP</span>
                        </div>
                        <div class="power-item">
                            <span>Delegated to You</span>
                            <span style="color: #ffd700;">890 VP</span>
                        </div>
                        <div class="power-item">
                            <span>Cell Consciousness</span>
                            <span style="color: #ffd700;">340 VP</span>
                        </div>
                    </div>
                    <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1);">
                        <div style="display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: bold;">
                            <span>Total Voting Power</span>
                            <span style="color: #ffd700;">2,480 VP</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Enterprise Suite -->
        <div class="card">
            <div class="card-header">
                <span class="card-icon">🏢</span>
                <h3>Enterprise Suite</h3>
            </div>
            
            <h4 style="margin-bottom: 1rem;">Regulatory Compliance</h4>
            <div class="compliance-grid">
                <div class="compliance-item">
                    <div class="compliance-status">
                        <div class="compliance-check"></div>
                        <span>SEC Reporting</span>
                    </div>
                    <div style="color: rgba(255,255,255,0.7); font-size: 0.9rem;">Compliant</div>
                    <div style="color: rgba(255,255,255,0.5); font-size: 0.8rem;">Last: 2 hours ago</div>
                </div>
                <div class="compliance-item">
                    <div class="compliance-status">
                        <div class="compliance-check"></div>
                        <span>GDPR Compliance</span>
                    </div>
                    <div style="color: rgba(255,255,255,0.7); font-size: 0.9rem;">Compliant</div>
                    <div style="color: rgba(255,255,255,0.5); font-size: 0.8rem;">Last: 24 hours ago</div>
                </div>
                <div class="compliance-item">
                    <div class="compliance-status">
                        <div class="compliance-check"></div>
                        <span>AML/KYC</span>
                    </div>
                    <div style="color: rgba(255,255,255,0.7); font-size: 0.9rem;">Compliant</div>
                    <div style="color: rgba(255,255,255,0.5); font-size: 0.8rem;">Last: 1 hour ago</div>
                </div>
            </div>

            <h4 style="margin: 1.5rem 0 1rem;">ESG Performance</h4>
            <div class="esg-grid">
                <div class="esg-card">
                    <div style="font-size: 1.2rem; margin-bottom: 0.5rem;">🌱 Environmental</div>
                    <div class="esg-score esg-environmental">94/100</div>
                    <div style="font-size: 0.9rem; color: rgba(255,255,255,0.7);">Renewable Energy: 97%</div>
                    <div style="font-size: 0.9rem; color: rgba(255,255,255,0.7);">Carbon Neutral: Yes</div>
                </div>
                <div class="esg-card">
                    <div style="font-size: 1.2rem; margin-bottom: 0.5rem;">👥 Social</div>
                    <div class="esg-score esg-social">87/100</div>
                    <div style="font-size: 0.9rem; color: rgba(255,255,255,0.7);">Inclusivity Index: 92%</div>
                    <div style="font-size: 0.9rem; color: rgba(255,255,255,0.7);">Community Impact: High</div>
                </div>
                <div class="esg-card">
                    <div style="font-size: 1.2rem; margin-bottom: 0.5rem;">🏛️ Governance</div>
                    <div class="esg-score esg-governance">96/100</div>
                    <div style="font-size: 0.9rem; color: rgba(255,255,255,0.7);">Transparency: 98%</div>
                    <div style="font-size: 0.9rem; color: rgba(255,255,255,0.7);">Decentralization: 94%</div>
                </div>
            </div>
        </div>

        <!-- Developer Console -->
        <div class="card" id="developer">
            <div class="card-header">
                <span class="card-icon">💻</span>
                <h3>Developer Console</h3>
            </div>
            
            <h4 style="margin-bottom: 1rem;">API Usage Statistics</h4>
            <div class="api-stats">
                <div class="api-metric">
                    <div>
                        <div style="font-weight: bold;">Requests Today</div>
                        <div style="color: rgba(255,255,255,0.7); font-size: 0.9rem;">1,247 / 10,000</div>
                    </div>
                    <div class="api-value">12.47%</div>
                </div>
                <div class="api-metric">
                    <div>
                        <div style="font-weight: bold;">Rate Limit</div>
                        <div style="color: rgba(255,255,255,0.7); font-size: 0.9rem;">100 req/min</div>
                    </div>
                    <div class="api-value">OK</div>
                </div>
                <div class="api-metric">
                    <div>
                        <div style="font-weight: bold;">Response Time</div>
                        <div style="color: rgba(255,255,255,0.7); font-size: 0.9rem;">45ms avg</div>
                    </div>
                    <div class="api-value" style="color: #00ff87;">Fast</div>
                </div>
                <div class="api-metric">
                    <div>
                        <div style="font-weight: bold;">API Version</div>
                        <div style="color: rgba(255,255,255,0.7); font-size: 0.9rem;">v2.4.1</div>
                    </div>
                    <div class="api-value" style="color: #00bfff;">Stable</div>
                </div>
            </div>
            
            <div style="margin-top: 1.5rem; text-align: center;">
                <button class="connect-wallet" style="margin-right: 1rem;">View API Docs</button>
                <button class="connect-wallet" style="background: linear-gradient(45deg, #8a2be2, #00bfff);">Generate API Key</button>
            </div>
        </div>
    </div>

    <script>
        // Particle Animation
        const canvas = document.getElementById('particles');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const particles = [];
        const particleCount = 100;

        class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.vx = (Math.random() - 0.5) * 0.5;
                this.vy = (Math.random() - 0.5) * 0.5;
                this.radius = Math.random() * 2 + 1;
                this.alpha = Math.random() * 0.5 + 0.5;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;

                if (this.x < 0 || this.x > canvas.width) this.vx = -this.vx;
                if (this.y < 0 || this.y > canvas.height) this.vy = -this.vy;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(0, 255, 135, ${this.alpha})`;
                ctx.fill();
            }
        }

        // Initialize particles
        for (let i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }

        // Animation loop
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });

            // Draw connections
            particles.forEach((p1, i) => {
                particles.slice(i + 1).forEach(p2 => {
                    const distance = Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
                    if (distance < 100) {
                        ctx.beginPath();
                        ctx.moveTo(p1.x, p1.y);
                        ctx.lineTo(p2.x, p2.y);
                        ctx.strokeStyle = `rgba(0, 255, 135, ${0.2 * (1 - distance / 100)})`;
                        ctx.stroke();
                    }
                });
            });

            requestAnimationFrame(animate);
        }

        animate();

        // Resize handler
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        // Dynamic content updates
        let blockHeight = 0;
        let totalTx = 0;
        let activeOrganisms = 0;
        let nodeCount = 147;
        let energyAmount = 0;

        // Update blockchain data
        function updateBlockchainData() {
            blockHeight++;
            totalTx += Math.floor(Math.random() * 5) + 1;
            
            document.getElementById('blockHeight').textContent = blockHeight;
            document.getElementById('totalTx').textContent = totalTx;
            
            // Update node count occasionally
            if (Math.random() > 0.9) {
                nodeCount += Math.random() > 0.5 ? 1 : -1;
                nodeCount = Math.max(140, Math.min(160, nodeCount));
                document.getElementById('nodeCount').textContent = nodeCount;
            }
        }

        // Update cellular ecosystem
        function updateEcosystem() {
            if (Math.random() > 0.8) {
                activeOrganisms += Math.floor(Math.random() * 3);
                document.getElementById('activeOrganisms').textContent = activeOrganisms;
                
                if (activeOrganisms > 0) {
                    document.getElementById('totalGenerations').textContent = Math.floor(activeOrganisms * 1.5);
                    document.getElementById('uniqueMutations').textContent = Math.floor(activeOrganisms * 0.7);
                    document.getElementById('avgConsciousness').textContent = (15 + Math.random() * 20).toFixed(1) + '%';
                }
            }
        }

        // Update energy harvesting
        function updateEnergy() {
            energyAmount += 15.2 / 3600; // Per second rate
            document.getElementById('energyAmount').textContent = energyAmount.toFixed(3) + ' E-Flux';
        }

        // Add recent activity
        function addRecentActivity() {
            const activities = [
                'New organism created: Cell-' + Math.random().toString(36).substr(2, 6),
                'Mutation detected: Type-' + Math.floor(Math.random() * 100),
                'Energy harvested: ' + (Math.random() * 10).toFixed(2) + ' E-Flux',
                'Block validated: #' + blockHeight,
                'Consciousness level increased: +' + (Math.random() * 5).toFixed(1) + '%'
            ];
            
            const activity = activities[Math.floor(Math.random() * activities.length)];
            const activityDiv = document.getElementById('recentActivity');
            
            const item = document.createElement('div');
            item.className = 'explorer-item';
            item.style.animation = 'slideIn 0.5s ease-out';
            item.innerHTML = `
                <span>${activity}</span>
                <span style="color: rgba(255,255,255,0.5); font-size: 0.8rem;">Just now</span>
            `;
            
            activityDiv.insertBefore(item, activityDiv.firstChild);
            
            // Keep only last 5 items
            while (activityDiv.children.length > 5) {
                activityDiv.removeChild(activityDiv.lastChild);
            }
        }

        // Explorer tab switching
        function switchTab(tab) {
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(t => t.classList.remove('active'));
            event.target.classList.add('active');
            
            const content = document.getElementById('explorerContent');
            content.innerHTML = '';
            
            if (tab === 'blocks') {
                for (let i = 0; i < 5; i++) {
                    const block = document.createElement('div');
                    block.className = 'explorer-item';
                    block.innerHTML = `
                        <span>Block #${blockHeight - i}</span>
                        <span class="hash">0x${Math.random().toString(16).substr(2, 8)}...</span>
                    `;
                    content.appendChild(block);
                }
            } else {
                for (let i = 0; i < 5; i++) {
                    const tx = document.createElement('div');
                    tx.className = 'explorer-item';
                    tx.innerHTML = `
                        <span>Transfer ${(Math.random() * 100).toFixed(2)} E-Flux</span>
                        <span class="hash">0x${Math.random().toString(16).substr(2, 8)}...</span>
                    `;
                    content.appendChild(tx);
                }
            }
        }

        // Wallet connection
        function connectWallet() {
            alert('Wallet connection coming soon! Visit https://nexus-lco.org for updates.');
        }

        // Initialize explorer
        switchTab('blocks');

        // Start update intervals
        setInterval(updateBlockchainData, 2100); // ~2.1s block time
        setInterval(updateEcosystem, 5000);
        setInterval(updateEnergy, 1000);
        setInterval(addRecentActivity, 8000);

        // Add slide-in animation
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideIn {
                from {
                    opacity: 0;
                    transform: translateX(-20px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
        `;
        document.head.appendChild(style);

        // Smooth scroll for navigation
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });
    </script>
</body>
</html>