Spaces:

devsmsm
/

nodenest-node-js-hosting-panel

Running

nodenest-node-js-hosting-panel / script.js

i want you create control panel like easypanel but just for host nodejs projects

76c0c73 verified 12 months ago

2.36 kB

// Dark mode toggle functionality
document.addEventListener('DOMContentLoaded', function() {
    // Check for saved theme preference or use system preference
    const savedTheme = localStorage.getItem('theme') || 
                      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    document.documentElement.classList.add(savedTheme);
    
    // Theme switcher
    const themeToggle = document.querySelector('#theme-toggle');
    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            
            document.documentElement.classList.remove(currentTheme);
            document.documentElement.classList.add(newTheme);
            localStorage.setItem('theme', newTheme);
            
            // Update icon
            const icon = themeToggle.querySelector('[data-feather]');
            if (icon) {
                icon.setAttribute('data-feather', newTheme === 'dark' ? 'sun' : 'moon');
                feather.replace();
            }
        });
    }
    
    // Project status indicators
    document.querySelectorAll('.project-status').forEach(status => {
        const text = status.textContent.trim().toLowerCase();
        if (text === 'running') {
            status.classList.add('bg-green-100', 'text-green-800');
        } else if (text === 'stopped') {
            status.classList.add('bg-red-100', 'text-red-800');
        } else if (text === 'starting') {
            status.classList.add('bg-yellow-100', 'text-yellow-800');
        }
    });
    
    // Simulate loading projects from API
    async function loadProjects() {
        try {
            // In a real app, you would fetch from your API
            // const response = await fetch('/api/projects');
            // const projects = await response.json();
            
            // For demo purposes, we'll simulate a delay
            await new Promise(resolve => setTimeout(resolve, 1000));
            
            // Update UI with loaded projects
            console.log('Projects loaded');
        } catch (error) {
            console.error('Failed to load projects:', error);
        }
    }
    
    loadProjects();
});

	// Dark mode toggle functionality
	document.addEventListener('DOMContentLoaded', function() {
	// Check for saved theme preference or use system preference
	const savedTheme = localStorage.getItem('theme') \|\|
	(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
	document.documentElement.classList.add(savedTheme);

	// Theme switcher
	const themeToggle = document.querySelector('#theme-toggle');
	if (themeToggle) {
	themeToggle.addEventListener('click', () => {
	const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
	const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

	document.documentElement.classList.remove(currentTheme);
	document.documentElement.classList.add(newTheme);
	localStorage.setItem('theme', newTheme);

	// Update icon
	const icon = themeToggle.querySelector('[data-feather]');
	if (icon) {
	icon.setAttribute('data-feather', newTheme === 'dark' ? 'sun' : 'moon');
	feather.replace();
	}
	});
	}

	// Project status indicators
	document.querySelectorAll('.project-status').forEach(status => {
	const text = status.textContent.trim().toLowerCase();
	if (text === 'running') {
	status.classList.add('bg-green-100', 'text-green-800');
	} else if (text === 'stopped') {
	status.classList.add('bg-red-100', 'text-red-800');
	} else if (text === 'starting') {
	status.classList.add('bg-yellow-100', 'text-yellow-800');
	}
	});

	// Simulate loading projects from API
	async function loadProjects() {
	try {
	// In a real app, you would fetch from your API
	// const response = await fetch('/api/projects');
	// const projects = await response.json();

	// For demo purposes, we'll simulate a delay
	await new Promise(resolve => setTimeout(resolve, 1000));

	// Update UI with loaded projects
	console.log('Projects loaded');
	} catch (error) {
	console.error('Failed to load projects:', error);
	}
	}

	loadProjects();
	});