Spaces:

devsmsm
/

nodenest-node-js-hosting-panel

Running

App Files Files Community

devsmsm commited on Nov 5, 2025

Commit

946c0a4

verified ·

1 Parent(s): 76c0c73

fix it and make login page for it if you can use ejs to make ut easier

Browse files

Files changed (3) hide show

components/navbar.js +2 -7
index.html +3 -5
login.html +115 -0

components/navbar.js CHANGED Viewed

@@ -51,15 +51,13 @@ class CustomNavbar extends HTMLElement {
                                     <span class="hidden md:inline text-gray-700 dark:text-gray-300">Admin</span>
                                     <i data-feather="chevron-down" class="hidden md:inline w-4 h-4 text-gray-500"></i>
                                 </button>
-                                <!-- Dropdown Menu -->
                                 <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden">
                                     <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>
                                     <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>
                                     <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>
                                 </div>
                             </div>
                             <!-- Mobile menu button -->
                             <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">
                                 <i data-feather="menu" class="w-5 h-5"></i>
@@ -69,7 +67,6 @@ class CustomNavbar extends HTMLElement {
                 </div>
             </nav>
         `;
         // Add event listener for dropdown
         const profileButton = this.shadowRoot.querySelector('.relative button');
         const dropdownMenu = this.shadowRoot.querySelector('.relative .hidden');
@@ -78,7 +75,6 @@ class CustomNavbar extends HTMLElement {
             profileButton.addEventListener('click', () => {
                 dropdownMenu.classList.toggle('hidden');
             });
             // Close dropdown when clicking outside
             document.addEventListener('click', (e) => {
                 if (!profileButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
@@ -86,7 +82,6 @@ class CustomNavbar extends HTMLElement {
                 }
             });
         }
         // Mobile menu toggle
         const mobileMenuButton = this.shadowRoot.querySelector('.mobile-menu');
         const navLinks = this.shadowRoot.querySelector('.nav-links');
@@ -113,4 +108,4 @@ class CustomNavbar extends HTMLElement {
     }
 }
-customElements.define('custom-navbar', CustomNavbar);

                                     <span class="hidden md:inline text-gray-700 dark:text-gray-300">Admin</span>
                                     <i data-feather="chevron-down" class="hidden md:inline w-4 h-4 text-gray-500"></i>
                                 </button>
+<!-- Dropdown Menu -->
                                 <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden">
                                     <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>
                                     <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>
                                     <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>
                                 </div>
                             </div>
                             <!-- Mobile menu button -->
                             <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">
                                 <i data-feather="menu" class="w-5 h-5"></i>
                 </div>
             </nav>
         `;
         // Add event listener for dropdown
         const profileButton = this.shadowRoot.querySelector('.relative button');
         const dropdownMenu = this.shadowRoot.querySelector('.relative .hidden');
             profileButton.addEventListener('click', () => {
                 dropdownMenu.classList.toggle('hidden');
             });
             // Close dropdown when clicking outside
             document.addEventListener('click', (e) => {
                 if (!profileButton.contains(e.target) && !dropdownMenu.contains(e.target)) {
                 }
             });
         }
         // Mobile menu toggle
         const mobileMenuButton = this.shadowRoot.querySelector('.mobile-menu');
         const navLinks = this.shadowRoot.querySelector('.nav-links');
     }
 }
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -9,7 +9,7 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <link rel="stylesheet" href="style.css">
-    <script>
         tailwind.config = {
             darkMode: 'class',
             theme: {
@@ -48,8 +48,7 @@
 <body class="bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors duration-200">
     <custom-navbar></custom-navbar>
     <script src="components/navbar.js"></script>
-    <main class="container mx-auto px-4 py-8">
         <div class="flex flex-col md:flex-row gap-6">
             <!-- Sidebar -->
             <custom-sidebar></custom-sidebar>
@@ -185,7 +184,6 @@
             </div>
         </div>
     </main>
     <custom-footer></custom-footer>
     <script src="components/footer.js"></script>
     <script src="components/sidebar.js"></script>
@@ -195,4 +193,4 @@
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
-</html>

     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <link rel="stylesheet" href="style.css">
+<script>
         tailwind.config = {
             darkMode: 'class',
             theme: {
 <body class="bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors duration-200">
     <custom-navbar></custom-navbar>
     <script src="components/navbar.js"></script>
+<main class="container mx-auto px-4 py-8">
         <div class="flex flex-col md:flex-row gap-6">
             <!-- Sidebar -->
             <custom-sidebar></custom-sidebar>
             </div>
         </div>
     </main>
     <custom-footer></custom-footer>
     <script src="components/footer.js"></script>
     <script src="components/sidebar.js"></script>
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
+</html>

	@@ -0,0 +1,115 @@

+<!DOCTYPE html>
+<html lang="en" class="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login | NodeNest</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center transition-colors duration-200">
+    <div class="w-full max-w-md p-8 space-y-8 bg-white dark:bg-gray-800 rounded-xl shadow-lg">
+        <div class="text-center">
+            <div class="mx-auto flex items-center justify-center">
+                <i data-feather="box" class="text-primary-500 w-12 h-12"></i>
+                <span class="ml-2 text-2xl font-bold text-gray-800 dark:text-white">NodeNest</span>
+            </div>
+            <h2 class="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">
+                Sign in to your account
+            </h2>
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                Enter your credentials to access the dashboard
+            </p>
+        </div>
+        <form class="mt-8 space-y-6" action="/login" method="POST">
+            <div class="space-y-4">
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
+                    <div class="mt-1 relative">
+                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                            <i data-feather="mail" class="h-5 w-5 text-gray-400"></i>
+                        </div>
+                        <input id="email" name="email" type="email" autocomplete="email" required
+                            class="pl-10 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
+                    </div>
+                </div>
+                <div>
+                    <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
+                    <div class="mt-1 relative">
+                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                            <i data-feather="lock" class="h-5 w-5 text-gray-400"></i>
+                        </div>
+                        <input id="password" name="password" type="password" autocomplete="current-password" required
+                            class="pl-10 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white">
+                    </div>
+                </div>
+            </div>
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <input id="remember-me" name="remember-me" type="checkbox"
+                        class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
+                    <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
+                        Remember me
+                    </label>
+                </div>
+                <div class="text-sm">
+                    <a href="#" class="font-medium text-primary-600 hover:text-primary-500">
+                        Forgot your password?
+                    </a>
+                </div>
+            </div>
+            <div>
+                <button type="submit"
+                    class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
+                    Sign in
+                </button>
+            </div>
+        </form>
+        <div class="text-center">
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+                Don't have an account?
+                <a href="#" class="font-medium text-primary-600 hover:text-primary-500">
+                    Sign up
+                </a>
+            </p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>