Hugging Face's logo

Spaces:
devsmsm
/
nodenest-node-js-hosting-panel
Running

App Files Community
devsmsm commited on
Commit
76c0c73
·
verified ·
1 Parent(s): c071cc6

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

Browse files
Files changed (7) hide show
  1. README.md +8 -5
  2. components/footer.js +69 -0
  3. components/navbar.js +116 -0
  4. components/sidebar.js +83 -0
  5. index.html +198 -19
  6. script.js +58 -0
  7. style.css +47 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Nodenest Node Js Hosting Panel
3
- emoji: 🐠
4
- colorFrom: indigo
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: NodeNest - Node.js Hosting Panel 🐦‍⬛
3
+ colorFrom: blue
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,69 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .footer-link:hover {
7
+ @apply text-primary-500 dark:text-primary-400;
8
+ }
9
+ </style>
10
+ <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-8 mt-12">
11
+ <div class="container mx-auto px-4">
12
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
13
+ <div>
14
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">NodeNest</h3>
15
+ <p class="text-gray-600 dark:text-gray-400 mb-4">Simple yet powerful Node.js hosting control panel.</p>
16
+ <div class="flex space-x-4">
17
+ <a href="#" class="text-gray-500 hover:text-primary-500 dark:hover:text-primary-400">
18
+ <i data-feather="github" class="w-5 h-5"></i>
19
+ </a>
20
+ <a href="#" class="text-gray-500 hover:text-primary-500 dark:hover:text-primary-400">
21
+ <i data-feather="twitter" class="w-5 h-5"></i>
22
+ </a>
23
+ <a href="#" class="text-gray-500 hover:text-primary-500 dark:hover:text-primary-400">
24
+ <i data-feather="discord" class="w-5 h-5"></i>
25
+ </a>
26
+ </div>
27
+ </div>
28
+
29
+ <div>
30
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Product</h3>
31
+ <ul class="space-y-2">
32
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Features</a></li>
33
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Pricing</a></li>
34
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Documentation</a></li>
35
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Changelog</a></li>
36
+ </ul>
37
+ </div>
38
+
39
+ <div>
40
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Support</h3>
41
+ <ul class="space-y-2">
42
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Help Center</a></li>
43
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Community</a></li>
44
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Status</a></li>
45
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Contact Us</a></li>
46
+ </ul>
47
+ </div>
48
+
49
+ <div>
50
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Legal</h3>
51
+ <ul class="space-y-2">
52
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Privacy Policy</a></li>
53
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Terms of Service</a></li>
54
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Security</a></li>
55
+ <li><a href="#" class="footer-link text-gray-600 dark:text-gray-400 hover:underline">Cookies</a></li>
56
+ </ul>
57
+ </div>
58
+ </div>
59
+
60
+ <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
61
+ <p>© ${new Date().getFullYear()} NodeNest. All rights reserved.</p>
62
+ </div>
63
+ </div>
64
+ </footer>
65
+ `;
66
+ }
67
+ }
68
+
69
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,116 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .navbar {
7
+ backdrop-filter: blur(10px);
8
+ -webkit-backdrop-filter: blur(10px);
9
+ }
10
+ @media (max-width: 768px) {
11
+ .nav-links {
12
+ display: none;
13
+ }
14
+ .mobile-menu {
15
+ display: block;
16
+ }
17
+ }
18
+ </style>
19
+ <nav class="navbar bg-white/80 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-700 fixed w-full z-10">
20
+ <div class="container mx-auto px-4">
21
+ <div class="flex items-center justify-between h-16">
22
+ <!-- Logo -->
23
+ <div class="flex-shrink-0 flex items-center">
24
+ <a href="/" class="flex items-center">
25
+ <i data-feather="box" class="text-primary-500 w-6 h-6"></i>
26
+ <span class="ml-2 text-xl font-bold text-gray-800 dark:text-white">NodeNest</span>
27
+ </a>
28
+ </div>
29
+
30
+ <!-- Desktop Navigation -->
31
+ <div class="hidden md:block">
32
+ <div class="nav-links flex items-center space-x-8">
33
+ <a href="/" class="text-gray-800 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 font-medium">Dashboard</a>
34
+ <a href="/projects" class="text-gray-800 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 font-medium">Projects</a>
35
+ <a href="/domains" class="text-gray-800 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 font-medium">Domains</a>
36
+ <a href="/settings" class="text-gray-800 dark:text-white hover:text-primary-500 dark:hover:text-primary-400 font-medium">Settings</a>
37
+ </div>
38
+ </div>
39
+
40
+ <!-- Right Side (Theme Toggle, User) -->
41
+ <div class="flex items-center space-x-4">
42
+ <button id="theme-toggle" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
43
+ <i data-feather="moon" class="w-5 h-5"></i>
44
+ </button>
45
+
46
+ <div class="relative">
47
+ <button class="flex items-center space-x-2 focus:outline-none">
48
+ <div class="w-8 h-8 rounded-full bg-primary-500 text-white flex items-center justify-center">
49
+ <i data-feather="user" class="w-4 h-4"></i>
50
+ </div>
51
+ <span class="hidden md:inline text-gray-700 dark:text-gray-300">Admin</span>
52
+ <i data-feather="chevron-down" class="hidden md:inline w-4 h-4 text-gray-500"></i>
53
+ </button>
54
+
55
+ <!-- Dropdown Menu -->
56
+ <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden">
57
+ <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
58
+ <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
59
+ <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">Logout</a>
60
+ </div>
61
+ </div>
62
+
63
+ <!-- Mobile menu button -->
64
+ <button class="md:hidden p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 mobile-menu">
65
+ <i data-feather="menu" class="w-5 h-5"></i>
66
+ </button>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </nav>
71
+ `;
72
+
73
+ // Add event listener for dropdown
74
+ const profileButton = this.shadowRoot.querySelector('.relative button');
75
+ const dropdownMenu = this.shadowRoot.querySelector('.relative .hidden');
76
+
77
+ if (profileButton && dropdownMenu) {
78
+ profileButton.addEventListener('click', () => {
79
+ dropdownMenu.classList.toggle('hidden');
80
+ });
81
+
82
+ // Close dropdown when clicking outside
83
+ document.addEventListener('click', (e) => {
84
+ if (!profileButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
85
+ dropdownMenu.classList.add('hidden');
86
+ }
87
+ });
88
+ }
89
+
90
+ // Mobile menu toggle
91
+ const mobileMenuButton = this.shadowRoot.querySelector('.mobile-menu');
92
+ const navLinks = this.shadowRoot.querySelector('.nav-links');
93
+
94
+ if (mobileMenuButton && navLinks) {
95
+ mobileMenuButton.addEventListener('click', () => {
96
+ navLinks.classList.toggle('hidden');
97
+ navLinks.classList.toggle('flex');
98
+ navLinks.classList.toggle('flex-col');
99
+ navLinks.classList.toggle('absolute');
100
+ navLinks.classList.toggle('top-16');
101
+ navLinks.classList.toggle('left-0');
102
+ navLinks.classList.toggle('right-0');
103
+ navLinks.classList.toggle('bg-white');
104
+ navLinks.classList.toggle('dark:bg-gray-800');
105
+ navLinks.classList.toggle('p-4');
106
+ navLinks.classList.toggle('space-y-4');
107
+ navLinks.classList.toggle('space-x-8');
108
+ navLinks.classList.toggle('border-b');
109
+ navLinks.classList.toggle('border-gray-200');
110
+ navLinks.classList.toggle('dark:border-gray-700');
111
+ });
112
+ }
113
+ }
114
+ }
115
+
116
+ customElements.define('custom-navbar', CustomNavbar);
components/sidebar.js ADDED
@@ -0,0 +1,83 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomSidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .sidebar-link:hover .sidebar-icon {
7
+ @apply text-primary-500;
8
+ }
9
+ .sidebar-link.active {
10
+ @apply bg-primary-50 dark:bg-gray-700 text-primary-600 dark:text-primary-400;
11
+ }
12
+ .sidebar-link.active .sidebar-icon {
13
+ @apply text-primary-500;
14
+ }
15
+ </style>
16
+ <aside class="hidden md:block w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 rounded-lg h-fit sticky top-24">
17
+ <div class="p-4">
18
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Navigation</h3>
19
+ <nav class="space-y-2">
20
+ <a href="/dashboard" class="sidebar-link flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
21
+ <i data-feather="home" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
22
+ Dashboard
23
+ </a>
24
+ <a href="/projects" class="sidebar-link active flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
25
+ <i data-feather="grid" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
26
+ Projects
27
+ </a>
28
+ <a href="/domains" class="sidebar-link flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
29
+ <i data-feather="globe" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
30
+ Domains
31
+ </a>
32
+ <a href="/databases" class="sidebar-link flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
33
+ <i data-feather="database" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
34
+ Databases
35
+ </a>
36
+ <a href="/backups" class="sidebar-link flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
37
+ <i data-feather="hard-drive" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
38
+ Backups
39
+ </a>
40
+ <a href="/settings" class="sidebar-link flex items-center px-3 py-2 rounded-lg transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
41
+ <i data-feather="settings" class="sidebar-icon w-5 h-5 mr-3 text-gray-500 dark:text-gray-400"></i>
42
+ Settings
43
+ </a>
44
+ </nav>
45
+
46
+ <div class="mt-8">
47
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Quick Actions</h3>
48
+ <div class="space-y-2">
49
+ <a href="/new-project" class="flex items-center justify-center bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md transition-colors">
50
+ <i data-feather="plus" class="w-4 h-4 mr-2"></i>
51
+ New Project
52
+ </a>
53
+ <a href="/deploy" class="flex items-center justify-center bg-secondary-500 hover:bg-secondary-600 text-white px-4 py-2 rounded-md transition-colors">
54
+ <i data-feather="upload" class="w-4 h-4 mr-2"></i>
55
+ Deploy App
56
+ </a>
57
+ </div>
58
+ </div>
59
+
60
+ <div class="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700">
61
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">System Info</h3>
62
+ <div class="space-y-3 text-sm text-gray-600 dark:text-gray-400">
63
+ <div class="flex justify-between">
64
+ <span>Node.js Version</span>
65
+ <span class="font-mono">v18.12.1</span>
66
+ </div>
67
+ <div class="flex justify-between">
68
+ <span>Panel Version</span>
69
+ <span class="font-mono">v2.4.1</span>
70
+ </div>
71
+ <div class="flex justify-between">
72
+ <span>Uptime</span>
73
+ <span class="font-mono">12d 4h 23m</span>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </aside>
79
+ `;
80
+ }
81
+ }
82
+
83
+ customElements.define('custom-sidebar', CustomSidebar);
index.html CHANGED
@@ -1,19 +1,198 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="light">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NodeNest | Node.js Hosting Panel</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <link rel="stylesheet" href="style.css">
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: {
19
+ 50: '#f0f9ff',
20
+ 100: '#e0f2fe',
21
+ 200: '#bae6fd',
22
+ 300: '#7dd3fc',
23
+ 400: '#38bdf8',
24
+ 500: '#0ea5e9',
25
+ 600: '#0284c7',
26
+ 700: '#0369a1',
27
+ 800: '#075985',
28
+ 900: '#0c4a6e',
29
+ },
30
+ secondary: {
31
+ 50: '#f5f3ff',
32
+ 100: '#ede9fe',
33
+ 200: '#ddd6fe',
34
+ 300: '#c4b5fd',
35
+ 400: '#a78bfa',
36
+ 500: '#8b5cf6',
37
+ 600: '#7c3aed',
38
+ 700: '#6d28d9',
39
+ 800: '#5b21b6',
40
+ 900: '#4c1d95',
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+ </script>
47
+ </head>
48
+ <body class="bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors duration-200">
49
+ <custom-navbar></custom-navbar>
50
+ <script src="components/navbar.js"></script>
51
+
52
+ <main class="container mx-auto px-4 py-8">
53
+ <div class="flex flex-col md:flex-row gap-6">
54
+ <!-- Sidebar -->
55
+ <custom-sidebar></custom-sidebar>
56
+
57
+ <!-- Main Content -->
58
+ <div class="flex-1">
59
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
60
+ <div class="flex justify-between items-center mb-6">
61
+ <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Your Node.js Projects</h2>
62
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md flex items-center gap-2 transition-colors">
63
+ <i data-feather="plus"></i>
64
+ New Project
65
+ </button>
66
+ </div>
67
+
68
+ <!-- Projects Grid -->
69
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
70
+ <!-- Project Card 1 -->
71
+ <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
72
+ <div class="bg-primary-500 p-4 text-white">
73
+ <div class="flex justify-between items-center">
74
+ <h3 class="font-medium">E-commerce API</h3>
75
+ <span class="bg-primary-700 text-xs px-2 py-1 rounded">Running</span>
76
+ </div>
77
+ </div>
78
+ <div class="p-4 bg-white dark:bg-gray-800">
79
+ <div class="flex items-center gap-2 text-gray-600 dark:text-gray-300 mb-3">
80
+ <i data-feather="cpu" class="w-4 h-4"></i>
81
+ <span class="text-sm">2 vCPU / 4GB RAM</span>
82
+ </div>
83
+ <div class="flex items-center gap-2 text-gray-600 dark:text-gray-300 mb-3">
84
+ <i data-feather="clock" class="w-4 h-4"></i>
85
+ <span class="text-sm">Uptime: 12 days</span>
86
+ </div>
87
+ <div class="flex items-center gap-2 text-gray-600 dark:text-gray-300 mb-4">
88
+ <i data-feather="activity" class="w-4 h-4"></i>
89
+ <span class="text-sm">Port: 3000</span>
90
+ </div>
91
+ <div class="flex gap-2">
92
+ <button class="flex-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-800 dark:text-white py-2 px-3 rounded text-sm flex items-center justify-center gap-1">
93
+ <i data-feather="terminal" class="w-4 h-4"></i> Console
94
+ </button>
95
+ <button class="flex-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-800 dark:text-white py-2 px-3 rounded text-sm flex items-center justify-center gap-1">
96
+ <i data-feather="settings" class="w-4 h-4"></i> Settings
97
+ </button>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Project Card 2 -->
103
+ <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
104
+ <div class="bg-secondary-500 p-4 text-white">
105
+ <div class="flex justify-between items-center">
106
+ <h3 class="font-medium">Blog Platform</h3>
107
+ <span class="bg-secondary-700 text-xs px-2 py-1 rounded">Stopped</span>
108
+ </div>
109
+ </div>
110
+ <div class="p-4 bg-white dark:bg-gray-800">
111
+ <div class="flex items-center gap-2 text-gray-600 dark:text-gray-300 mb-3">
112
+ <i data-feather="cpu" class="w-4 h-4"></i>
113
+ <span class="text-sm">1 vCPU / 2GB RAM</span>
114
+ </div>
115
+ <div class="flex items-center gap-2 text-gray-600 dark:text-gray-300 mb-3">
116
+ <i data-feather="clock" class="w-4 h-4"></i>
117
+ <span class="text-sm">Uptime: 0 days</span>
118
+ </div>
119
+ <div class="flex items-center gap-2 text-gray-600 dark:text-gray-300 mb-4">
120
+ <i data-feather="activity" class="w-4 h-4"></i>
121
+ <span class="text-sm">Port: 4000</span>
122
+ </div>
123
+ <div class="flex gap-2">
124
+ <button class="flex-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-800 dark:text-white py-2 px-3 rounded text-sm flex items-center justify-center gap-1">
125
+ <i data-feather="play" class="w-4 h-4"></i> Start
126
+ </button>
127
+ <button class="flex-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-800 dark:text-white py-2 px-3 rounded text-sm flex items-center justify-center gap-1">
128
+ <i data-feather="settings" class="w-4 h-4"></i> Settings
129
+ </button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Empty Card for New Project -->
135
+ <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg hover:border-primary-500 dark:hover:border-primary-500 transition-colors flex items-center justify-center min-h-[200px] cursor-pointer">
136
+ <div class="text-center p-4">
137
+ <i data-feather="plus" class="w-8 h-8 mx-auto text-gray-400 dark:text-gray-500 mb-2"></i>
138
+ <p class="text-gray-500 dark:text-gray-400">Create new project</p>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Resources Usage -->
145
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
146
+ <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Resources Usage</h2>
147
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
148
+ <!-- CPU Usage -->
149
+ <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
150
+ <div class="flex justify-between items-center mb-2">
151
+ <h3 class="font-medium text-gray-800 dark:text-white">CPU</h3>
152
+ <span class="text-sm font-medium text-primary-500">35%</span>
153
+ </div>
154
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
155
+ <div class="bg-primary-500 h-2.5 rounded-full" style="width: 35%"></div>
156
+ </div>
157
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">2 vCPU / 4 used</p>
158
+ </div>
159
+
160
+ <!-- Memory Usage -->
161
+ <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
162
+ <div class="flex justify-between items-center mb-2">
163
+ <h3 class="font-medium text-gray-800 dark:text-white">Memory</h3>
164
+ <span class="text-sm font-medium text-secondary-500">68%</span>
165
+ </div>
166
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
167
+ <div class="bg-secondary-500 h-2.5 rounded-full" style="width: 68%"></div>
168
+ </div>
169
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">4 GB / 2.7 GB used</p>
170
+ </div>
171
+
172
+ <!-- Storage Usage -->
173
+ <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
174
+ <div class="flex justify-between items-center mb-2">
175
+ <h3 class="font-medium text-gray-800 dark:text-white">Storage</h3>
176
+ <span class="text-sm font-medium text-yellow-500">42%</span>
177
+ </div>
178
+ <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
179
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 42%"></div>
180
+ </div>
181
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">50 GB / 21 GB used</p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </main>
188
+
189
+ <custom-footer></custom-footer>
190
+ <script src="components/footer.js"></script>
191
+ <script src="components/sidebar.js"></script>
192
+ <script src="script.js"></script>
193
+ <script>
194
+ feather.replace();
195
+ </script>
196
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
197
+ </body>
198
+ </html>
script.js ADDED
@@ -0,0 +1,58 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Dark mode toggle functionality
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ // Check for saved theme preference or use system preference
4
+ const savedTheme = localStorage.getItem('theme') ||
5
+ (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
6
+ document.documentElement.classList.add(savedTheme);
7
+
8
+ // Theme switcher
9
+ const themeToggle = document.querySelector('#theme-toggle');
10
+ if (themeToggle) {
11
+ themeToggle.addEventListener('click', () => {
12
+ const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
13
+ const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
14
+
15
+ document.documentElement.classList.remove(currentTheme);
16
+ document.documentElement.classList.add(newTheme);
17
+ localStorage.setItem('theme', newTheme);
18
+
19
+ // Update icon
20
+ const icon = themeToggle.querySelector('[data-feather]');
21
+ if (icon) {
22
+ icon.setAttribute('data-feather', newTheme === 'dark' ? 'sun' : 'moon');
23
+ feather.replace();
24
+ }
25
+ });
26
+ }
27
+
28
+ // Project status indicators
29
+ document.querySelectorAll('.project-status').forEach(status => {
30
+ const text = status.textContent.trim().toLowerCase();
31
+ if (text === 'running') {
32
+ status.classList.add('bg-green-100', 'text-green-800');
33
+ } else if (text === 'stopped') {
34
+ status.classList.add('bg-red-100', 'text-red-800');
35
+ } else if (text === 'starting') {
36
+ status.classList.add('bg-yellow-100', 'text-yellow-800');
37
+ }
38
+ });
39
+
40
+ // Simulate loading projects from API
41
+ async function loadProjects() {
42
+ try {
43
+ // In a real app, you would fetch from your API
44
+ // const response = await fetch('/api/projects');
45
+ // const projects = await response.json();
46
+
47
+ // For demo purposes, we'll simulate a delay
48
+ await new Promise(resolve => setTimeout(resolve, 1000));
49
+
50
+ // Update UI with loaded projects
51
+ console.log('Projects loaded');
52
+ } catch (error) {
53
+ console.error('Failed to load projects:', error);
54
+ }
55
+ }
56
+
57
+ loadProjects();
58
+ });
style.css CHANGED
@@ -1,28 +1,56 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom scrollbar */
2
+ ::-webkit-scrollbar {
3
+ width: 8px;
4
+ height: 8px;
5
  }
6
 
7
+ ::-webkit-scrollbar-track {
8
+ background: #f1f1f1;
9
+ border-radius: 10px;
10
  }
11
 
12
+ .dark ::-webkit-scrollbar-track {
13
+ background: #374151;
 
 
 
14
  }
15
 
16
+ ::-webkit-scrollbar-thumb {
17
+ background: #cbd5e1;
18
+ border-radius: 10px;
 
 
 
19
  }
20
 
21
+ .dark ::-webkit-scrollbar-thumb {
22
+ background: #4b5563;
23
  }
24
+
25
+ ::-webkit-scrollbar-thumb:hover {
26
+ background: #94a3b8;
27
+ }
28
+
29
+ .dark ::-webkit-scrollbar-thumb:hover {
30
+ background: #6b7280;
31
+ }
32
+
33
+ /* Smooth transitions for dark mode */
34
+ html {
35
+ scroll-behavior: smooth;
36
+ }
37
+
38
+ /* Animation for buttons */
39
+ button {
40
+ transition: all 0.2s ease-in-out;
41
+ }
42
+
43
+ /* Project card hover effect */
44
+ .project-card:hover {
45
+ transform: translateY(-2px);
46
+ }
47
+
48
+ /* Loading spinner */
49
+ @keyframes spin {
50
+ 0% { transform: rotate(0deg); }
51
+ 100% { transform: rotate(360deg); }
52
+ }
53
+
54
+ .loading-spinner {
55
+ animation: spin 1s linear infinite;
56
+ }