make sure the user interface is complete and functional all the way around

admin.html

@@ -22,11 +22,12 @@
                         </div>
                         <span class="text-xl font-bold text-white">CodeForge-AI Admin</span>
                     </div>
-                    <div class="hidden md:flex space-x-6">
-                        <a href="index.html" class="text-gray-300 hover:text-white transition-colors">Home</a>
-                        <a href="dashboard.html" class="text-gray-300 hover:text-white transition-colors">Dashboard</a>
-                    </div>
+                <div class="hidden md:flex space-x-6">
+                    <a href="index.html" class="text-gray-300 hover:text-white transition-colors">Home</a>
+                    <a href="dashboard.html" class="text-gray-300 hover:text-white transition-colors">Dashboard</a>
+                    <a href="installation.html" class="text-gray-300 hover:text-white transition-colors">Installation</a>
                 </div>
+</div>
                 <div class="flex items-center space-x-4">
                     <div class="text-sm text-gray-300">
                         Welcome, <span class="text-purple-400 font-semibold">Supreme Admin</span>
@@ -101,7 +102,7 @@
                         <button class="bg-purple-500 hover:bg-purple-600 px-4 py-2 rounded-lg text-white text-sm font-medium transition-colors">
                             <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
                             Add User
-                        </button>
+</button>
                     </div>
 
                     <div class="overflow-x-auto">
@@ -350,9 +351,8 @@
             const adminUsername = localStorage.getItem('adminUsername');
             const adminPassword = localStorage.getItem('adminPassword');
             
-            if (adminUsername !== 'urbanzulu19' || adminPassword !== 'Urbanzulu25</body>
-</html>) {
-                window.location.href = 'admin-login.html';
+            if (adminUsername !== 'urbanzulu19' || adminPassword !== 'Urbanzulu25') {
+window.location.href = 'admin-login.html';
                 return false;
             }
             return true;
@@ -426,6 +426,67 @@
                 }
             }
         });
+        // Add User Modal
+        const addUserModal = document.createElement('div');
+        addUserModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden';
+        addUserModal.innerHTML = `
+            <div class="bg-gray-800 rounded-2xl p-6 w-full max-w-md border border-purple-500/20">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-bold text-white">Add New User</h3>
+                    <button onclick="closeAddUserModal()" class="text-gray-400 hover:text-white">
+                        <i data-feather="x" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <form id="addUserForm" class="space-y-4">
+                    <div>
+                        <label class="block text-gray-300 text-sm mb-2">Name</label>
+                        <input type="text" id="userName" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-purple-500" required>
+                    </div>
+                    <div>
+                        <label class="block text-gray-300 text-sm mb-2">Email</label>
+                        <input type="email" id="userEmail" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-purple-500" required>
+                    </div>
+                    <div>
+                        <label class="block text-gray-300 text-sm mb-2">Plan</label>
+                        <select id="userPlan" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-purple-500">
+                            <option value="free">Free</option>
+                            <option value="starter">Starter</option>
+                            <option value="pro">Pro</option>
+                        </select>
+                    </div>
+                    <div class="flex justify-end space-x-3 pt-4">
+                        <button type="button" onclick="closeAddUserModal()" class="px-4 py-2 text-gray-300 hover:text-white transition-colors">Cancel</button>
+                        <button type="submit" class="bg-purple-500 hover:bg-purple-600 px-4 py-2 rounded-lg text-white font-medium transition-colors">Add User</button>
+                    </div>
+                </form>
+            </div>
+        `;
+        document.body.appendChild(addUserModal);
+
+        function openAddUserModal() {
+            addUserModal.classList.remove('hidden');
+        }
+
+        function closeAddUserModal() {
+            addUserModal.classList.add('hidden');
+        }
+
+        // Handle add user form submission
+        document.getElementById('addUserForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const name = document.getElementById('userName').value;
+            const email = document.getElementById('userEmail').value;
+            const plan = document.getElementById('userPlan').value;
+            
+            // In a real app, you would send this to your backend
+            console.log('Adding user:', { name, email, plan });
+            
+            // Show success message
+            alert(`User ${name} added successfully!`);
+            closeAddUserModal();
+            // Reset form
+            document.getElementById('addUserForm').reset();
+        });
 
         // Logout functionality
         document.addEventListener('DOMContentLoaded', function() {
@@ -444,7 +505,52 @@
                 userDiv.appendChild(logoutBtn);
                 feather.replace();
             }
+
+            // Add click handler for Add User button
+            const addUserBtn = document.querySelector('button.bg-purple-500');
+            if (addUserBtn) {
+                addUserBtn.onclick = openAddUserModal;
+            }
+
+            // Add edit and delete functionality to user table
+            const userTable = document.querySelector('table');
+            if (userTable) {
+                userTable.addEventListener('click', function(e) {
+                    const target = e.target.closest('button');
+                    if (!target) return;
+                    
+                    const row = target.closest('tr');
+                    const userName = row.querySelector('.font-semibold').textContent;
+                    
+                    if (target.querySelector('i[data-feather="edit"]')) {
+                        alert(`Edit user: ${userName}`);
+                    } else if (target.querySelector('i[data-feather="trash-2"]')) {
+                        if (confirm(`Are you sure you want to delete ${userName}?`)) {
+                            row.remove();
+                            alert(`User ${userName} deleted successfully!`);
+                        }
+                    }
+                });
+            }
+
+            // Add functionality to admin action buttons
+            const systemSettingsBtn = document.querySelector('button:contains("System Settings")');
+            const emergencyShutdownBtn = document.querySelector('button:contains("Emergency Shutdown")');
+            
+            if (systemSettingsBtn) {
+                systemSettingsBtn.onclick = function() {
+                    alert('System settings modal would open here');
+                };
+            }
+            
+            if (emergencyShutdownBtn) {
+                emergencyShutdownBtn.onclick = function() {
+                    if (confirm('Are you sure you want to perform emergency shutdown? This will affect all users.')) {
+                        alert('Emergency shutdown initiated!');
+                    }
+                };
+            }
         });
-    </script>
+</script>
 </body>
 </html>

installation.html

@@ -34,15 +34,16 @@
                         </div>
                         <span class="text-xl font-bold text-white">CodeForge-AI</span>
                     </div>
-                    <div class="hidden md:flex space-x-6">
-                        <a href="workspaces.html" class="text-gray-300 hover:text-white transition-colors">Workspaces</a>
-                        <a href="templates.html" class="text-gray-300 hover:text-white transition-colors">Templates</a>
-                        <a href="deployments.html" class="text-gray-300 hover:text-white transition-colors">Deployments</a>
-                        <a href="documentation.html" class="text-gray-300 hover:text-white transition-colors">Documentation</a>
-                        <a href="installation.html" class="text-red-400 hover:text-red-300 transition-colors">Installation</a>
-                        <a href="admin-login.html" class="text-gray-300 hover:text-white transition-colors">Admin</a>
-                    </div>
+                <div class="hidden md:flex space-x-6">
+                    <a href="index.html" class="text-gray-300 hover:text-white transition-colors">Home</a>
+                    <a href="workspaces.html" class="text-gray-300 hover:text-white transition-colors">Workspaces</a>
+                    <a href="templates.html" class="text-gray-300 hover:text-white transition-colors">Templates</a>
+                    <a href="deployments.html" class="text-gray-300 hover:text-white transition-colors">Deployments</a>
+                    <a href="documentation.html" class="text-gray-300 hover:text-white transition-colors">Documentation</a>
+                    <a href="installation.html" class="text-red-400 hover:text-red-300 transition-colors">Installation</a>
+                    <a href="admin-login.html" class="text-gray-300 hover:text-white transition-colors">Admin</a>
                 </div>
+</div>
                 <div class="flex items-center space-x-4">
                     <a href="workspaces.html" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-lg text-white font-medium transition-colors">
                         Start Coding
@@ -102,30 +103,30 @@
                     </div>
                     <h3 class="text-lg font-semibold text-white mb-2">Docker Compose</div>
                     <p class="text-gray-400 text-sm mb-4">Complete setup with all dependencies</p>
-                    <a href="#" class="bg-red-500 hover:bg-red-600 px-6 py-3 rounded-xl text-white font-medium transition-colors inline-block">
+                    <a href="#" onclick="downloadPackage('docker-compose')" class="bg-red-500 hover:bg-red-600 px-6 py-3 rounded-xl text-white font-medium transition-colors inline-block">
                         Download
                     </a>
-                </div>
+</div>
                 <div class="text-center">
                     <div class="w-16 h-16 bg-red-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
                         <i data-feather="github" class="w-8 h-8"></i>
                     </div>
                     <h3 class="text-lg font-semibold text-white mb-2">Source Code</div>
                     <p class="text-gray-400 text-sm mb-4">Build from source for customization</p>
-                    <a href="#" class="bg-red-500 hover:bg-red-600 px-6 py-3 rounded-xl text-white font-medium transition-colors inline-block">
+                    <a href="https://github.com/codeforge-ai/codeforge-ai" target="_blank" class="bg-red-500 hover:bg-red-600 px-6 py-3 rounded-xl text-white font-medium transition-colors inline-block">
                         GitHub
                     </a>
-                </div>
+</div>
                 <div class="text-center">
                     <div class="w-16 h-16 bg-red-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
                         <i data-feather="package" class="w-8 h-8"></i>
                     </div>
                     <h3 class="text-lg font-semibold text-white mb-2">Binary Release</div>
                     <p class="text-gray-400 text-sm mb-4">Pre-built binaries for quick setup</p>
-                    <a href="#" class="bg-red-500 hover:bg-red-600 px-6 py-3 rounded-xl text-white font-medium transition-colors inline-block">
+                    <a href="#" onclick="downloadPackage('binary')" class="bg-red-500 hover:bg-red-600 px-6 py-3 rounded-xl text-white font-medium transition-colors inline-block">
                         Download
                     </a>
-                </div>
+</div>
             </div>
         </div>
 
@@ -140,10 +141,13 @@
                         <span class="text-white font-bold">1</span>
                     </div>
                     <h3 class="text-xl font-semibold text-white mb-3">Download the Package</div>
-                    <div class="bg-gray-900 rounded-xl p-4 mb-4">
-                        <code class="text-green-400">curl -L https://codeforge-ai.com/download/docker-compose.yml -o docker-compose.yml</code>
-                    </div>
-                    <p class="text-gray-300">Download the latest Docker Compose configuration file.</p>
+                <div class="bg-gray-900 rounded-xl p-4 mb-4">
+                    <code class="text-green-400">curl -L https://codeforge-ai.com/download/docker-compose.yml -o docker-compose.yml</code>
+                    <button onclick="copyToClipboard('curl -L https://codeforge-ai.com/download/docker-compose.yml -o docker-compose.yml')" class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm text-white transition-colors">
+                        <i data-feather="copy" class="w-3 h-3 inline"></i> Copy
+                    </button>
+                </div>
+<p class="text-gray-300">Download the latest Docker Compose configuration file.</p>
                 </div>
 
             <!-- Step 2 -->
@@ -155,8 +159,11 @@
                     <h3 class="text-xl font-semibold text-white mb-3">Configure Environment</div>
                 <div class="bg-gray-900 rounded-xl p-4 mb-4">
                     <code class="text-green-400">cp .env.example .env</code>
-                    </div>
-                    <p class="text-gray-300">Copy the environment configuration file and update with your settings.</p>
+                    <button onclick="copyToClipboard('cp .env.example .env')" class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm text-white transition-colors">
+                        <i data-feather="copy" class="w-3 h-3 inline"></i> Copy
+                    </button>
+                </div>
+<p class="text-gray-300">Copy the environment configuration file and update with your settings.</p>
                 </div>
 
             <!-- Step 3 -->
@@ -168,8 +175,11 @@
                     <h3 class="text-xl font-semibold text-white mb-3">Start Services</div>
                 <div class="bg-gray-900 rounded-xl p-4 mb-4">
                     <code class="text-green-400">docker-compose up -d</code>
-                    </div>
-                    <p class="text-gray-300">Launch all CodeForge-AI services in detached mode.</p>
+                    <button onclick="copyToClipboard('docker-compose up -d')" class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm text-white transition-colors">
+                        <i data-feather="copy" class="w-3 h-3 inline"></i> Copy
+                    </button>
+                </div>
+<p class="text-gray-300">Launch all CodeForge-AI services in detached mode.</p>
                 </div>
 
             <!-- Step 4 -->
@@ -181,8 +191,11 @@
                     <h3 class="text-xl font-semibold text-white mb-3">Verify Installation</div>
                 <div class="bg-gray-900 rounded-xl p-4 mb-4">
                     <code class="text-green-400">docker-compose ps</code>
-                    </div>
-                    <p class="text-gray-300">Check that all services are running correctly.</p>
+                    <button onclick="copyToClipboard('docker-compose ps')" class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm text-white transition-colors">
+                        <i data-feather="copy" class="w-3 h-3 inline"></i> Copy
+                    </button>
+                </div>
+<p class="text-gray-300">Check that all services are running correctly.</p>
                 </div>
 
             <!-- Step 5 -->
@@ -194,8 +207,11 @@
                     <h3 class="text-xl font-semibold text-white mb-3">Access Dashboard</div>
                 <div class="bg-gray-900 rounded-xl p-4 mb-4">
                     <code class="text-green-400">http://localhost:8080</code>
-                    </div>
-                    <p class="text-gray-300">Open your browser and navigate to the local dashboard.</p>
+                    <button onclick="copyToClipboard('http://localhost:8080')" class="ml-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm text-white transition-colors">
+                        <i data-feather="copy" class="w-3 h-3 inline"></i> Copy
+                    </button>
+                </div>
+<p class="text-gray-300">Open your browser and navigate to the local dashboard.</p>
                 </div>
             </div>
 
@@ -301,10 +317,70 @@
             <p>&copy; 2024 CodeForge-AI. All rights reserved. Built with security and performance in mind.</p>
         </div>
     </div>
-
     <script>
         // Initialize Feather Icons
         feather.replace();
+
+        // Copy to clipboard function
+        function copyToClipboard(text) {
+            navigator.clipboard.writeText(text).then(function() {
+                // Show success feedback
+                const buttons = document.querySelectorAll('button');
+                buttons.forEach(btn => {
+                    if (btn.textContent.includes('Copy')) {
+                        const originalText = btn.innerHTML;
+                        btn.innerHTML = '<i data-feather="check" class="w-3 h-3 inline"></i> Copied!';
+                        setTimeout(() => {
+                            btn.innerHTML = originalText;
+                            feather.replace();
+                        }, 2000);
+                    }
+                });
+            }).catch(function(err) {
+                console.error('Failed to copy: ', err);
+                alert('Failed to copy to clipboard');
+            });
+        }
+
+        // Download package function
+        function downloadPackage(type) {
+            let url;
+            switch(type) {
+                case 'docker-compose':
+                    url = 'https://codeforge-ai.com/download/docker-compose.yml';
+                    break;
+                case 'binary':
+                    url = 'https://codeforge-ai.com/download/codeforge-ai-latest.zip';
+                    break;
+                default:
+                    url = '#';
+            }
+            
+            if (url !== '#') {
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = '';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            } else {
+                alert('Download link not available');
+            }
+        }
+
+        // Add smooth scrolling for better UX
+        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',
+                        block: 'start'
+                    });
+                }
+            });
+        });
     </script>
 </body>
 </html>