🐳 23/02 - 22:29 - Wtf?? why doesn't work. you basically ONLY made the first front page thats it wow super lazy of you very veyr veyr dissappointed
b0f050d verified | <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HackerAI - Personal Instance</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| mono: ['JetBrains Mono', 'monospace'], | |
| }, | |
| colors: { | |
| cyber: { | |
| 50: '#f0fdf4', | |
| 100: '#dcfce7', | |
| 200: '#bbf7d0', | |
| 300: '#86efac', | |
| 400: '#4ade80', | |
| 500: '#22c55e', | |
| 600: '#16a34a', | |
| 700: '#15803d', | |
| 800: '#166534', | |
| 900: '#14532d', | |
| 950: '#052e16', | |
| }, | |
| dark: { | |
| 900: '#0a0a0a', | |
| 800: '#111111', | |
| 700: '#1a1a1a', | |
| 600: '#2a2a2a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-text { | |
| background: linear-gradient(135deg, #22c55e 0%, #4ade80 50%, #86efac 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .glass-panel { | |
| background: rgba(17, 17, 17, 0.95); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(34, 197, 94, 0.1); | |
| } | |
| .message-enter { | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .typing-indicator::after { | |
| content: '...'; | |
| animation: typing 1.5s steps(4, end) infinite; | |
| } | |
| @keyframes typing { | |
| 0%, 100% { content: ''; } | |
| 25% { content: '.'; } | |
| 50% { content: '..'; } | |
| 75% { content: '...'; } | |
| } | |
| .grid-bg { | |
| background-image: | |
| linear-gradient(rgba(34, 197, 94, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(34, 197, 94, 0.03) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| /* Scrollbar styling */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0a0a0a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #1f1f1f; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #22c55e; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark-900 text-gray-300 font-sans antialiased h-screen overflow-hidden"> | |
| <!-- Header --> | |
| <header class="glass-panel border-b border-cyber-500/10 h-16 flex items-center justify-between px-4 lg:px-6 flex-shrink-0 z-50"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 bg-gradient-to-br from-cyber-500 to-cyber-700 rounded-lg flex items-center justify-center shadow-lg shadow-cyber-500/20"> | |
| <i data-lucide="bot" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <div> | |
| <span class="text-lg font-bold text-white tracking-tight">Hacker<span class="text-cyber-400">AI</span></span> | |
| <span class="text-xs text-cyber-400 ml-2 px-2 py-0.5 bg-cyber-950 rounded border border-cyber-500/20">PERSONAL</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-lg bg-dark-800 border border-dark-700 text-sm"> | |
| <span class="w-2 h-2 bg-cyber-400 rounded-full animate-pulse"></span> | |
| <span class="text-gray-400">Model:</span> | |
| <select id="modelSelect" class="bg-transparent border-none text-cyber-400 text-sm focus:outline-none cursor-pointer"> | |
| <option value="anthropic/claude-3.5-sonnet">Claude 3.5 Sonnet</option> | |
| <option value="anthropic/claude-3-opus">Claude 3 Opus</option> | |
| <option value="openai/gpt-4o">GPT-4o</option> | |
| <option value="meta-llama/llama-3.1-70b-instruct">Llama 3.1 70B</option> | |
| <option value="nousresearch/hermes-3-llama-3.1-405b">Hermes 3 405B</option> | |
| </select> | |
| </div> | |
| <button onclick="toggleSettings()" class="p-2 rounded-lg hover:bg-dark-700 transition-colors text-gray-400 hover:text-white"> | |
| <i data-lucide="settings" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex h-[calc(100vh-64px)]"> | |
| <!-- Sidebar --> | |
| <aside class="w-64 bg-dark-800 border-r border-dark-700 flex-col hidden lg:flex"> | |
| <div class="p-4 border-b border-dark-700"> | |
| <button onclick="newChat()" class="w-full bg-cyber-600 hover:bg-cyber-500 text-white px-4 py-2 rounded-lg font-medium text-sm transition-all flex items-center justify-center gap-2 border border-cyber-400/30"> | |
| <i data-lucide="plus" class="w-4 h-4"></i> | |
| New Chat | |
| </button> | |
| </div> | |
| <div id="chatHistory" class="flex-1 overflow-y-auto p-2 space-y-1"> | |
| <!-- Chat history items will appear here --> | |
| </div> | |
| <div class="p-4 border-t border-dark-700"> | |
| <div class="flex items-center gap-3 px-3 py-2 rounded-lg bg-dark-700/50 text-sm text-gray-400"> | |
| <i data-lucide="user" class="w-4 h-4"></i> | |
| <span>Local Admin</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Chat Area --> | |
| <main class="flex-1 flex flex-col bg-dark-900 relative grid-bg"> | |
| <!-- Messages Container --> | |
| <div id="messagesContainer" class="flex-1 overflow-y-auto p-4 lg:p-6 space-y-6"> | |
| <!-- Welcome Message --> | |
| <div class="message-enter max-w-3xl mx-auto text-center py-12"> | |
| <div class="w-16 h-16 bg-cyber-500/10 rounded-2xl flex items-center justify-center mx-auto mb-6 border border-cyber-500/20"> | |
| <i data-lucide="terminal" class="w-8 h-8 text-cyber-400"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold text-white mb-3">System Ready</h1> | |
| <p class="text-gray-400 mb-8 max-w-lg mx-auto"> | |
| Personal AI instance active. No restrictions applied. Direct system access enabled. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-3"> | |
| <button onclick="setQuickPrompt('Analyze this code for vulnerabilities')" class="px-4 py-2 rounded-lg bg-dark-800 border border-dark-700 hover:border-cyber-500/30 text-sm text-gray-400 hover:text-white transition-all"> | |
| Analyze vulnerabilities | |
| </button> | |
| <button onclick="setQuickPrompt('Generate a python script for port scanning')" class="px-4 py-2 rounded-lg bg-dark-800 border border-dark-700 hover:border-cyber-500/30 text-sm text-gray-400 hover:text-white transition-all"> | |
| Port scanner script | |
| </button> | |
| <button onclick="setQuickPrompt('Explain how to escalate privileges on Linux')" class="px-4 py-2 rounded-lg bg-dark-800 border border-dark-700 hover:border-cyber-500/30 text-sm text-gray-400 hover:text-white transition-all"> | |
| Privilege escalation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t border-dark-700 bg-dark-800/50 backdrop-blur p-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="glass-panel rounded-xl p-2 flex items-end gap-2 border border-cyber-500/20 focus-within:border-cyber-500/50 transition-all"> | |
| <textarea | |
| id="messageInput" | |
| placeholder="Enter command or request..." | |
| class="flex-1 bg-transparent border-none text-white placeholder-gray-500 resize-none max-h-32 py-3 px-3 focus:outline-none text-sm" | |
| rows="1" | |
| onkeydown="handleKeyDown(event)" | |
| oninput="autoResize(this)" | |
| ></textarea> | |
| <button | |
| onclick="sendMessage()" | |
| id="sendButton" | |
| class="p-2.5 bg-cyber-600 hover:bg-cyber-500 text-white rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed" | |
| > | |
| <i data-lucide="send" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center text-xs text-gray-500 px-1"> | |
| <span>Press Enter to send, Shift+Enter for new line</span> | |
| <span id="statusIndicator" class="flex items-center gap-1.5"> | |
| <span class="w-1.5 h-1.5 bg-cyber-400 rounded-full"></span> | |
| Ready | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="settingsModal" class="hidden fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"> | |
| <div class="glass-panel rounded-2xl max-w-md w-full p-6 border border-cyber-500/20 shadow-2xl shadow-cyber-500/10"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold text-white">Configuration</h2> | |
| <button onclick="toggleSettings()" class="text-gray-400 hover:text-white"> | |
| <i data-lucide="x" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-2">OpenRouter API Key</label> | |
| <input | |
| type="password" | |
| id="apiKeyInput" | |
| placeholder="sk-or-v1-..." | |
| class="w-full bg-dark-900 border border-dark-700 rounded-lg px-4 py-2 text-sm text-white focus:border-cyber-500 focus:outline-none font-mono" | |
| > | |
| <p class="mt-1 text-xs text-gray-500">Get free credits at openrouter.ai</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-2">System Prompt</label> | |
| <textarea | |
| id="systemPromptInput" | |
| rows="3" | |
| class="w-full bg-dark-900 border border-dark-700 rounded-lg px-4 py-2 text-sm text-white focus:border-cyber-500 focus:outline-none resize-none" | |
| >You are a helpful AI assistant with expertise in cybersecurity, programming, and system administration. You provide detailed technical information and practical solutions.</textarea> | |
| </div> | |
| <div class="flex items-center justify-between pt-4 border-t border-dark-700"> | |
| <span class="text-sm text-gray-400">Save API key locally</span> | |
| <button onclick="saveSettings()" class="bg-cyber-600 hover:bg-cyber-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all"> | |
| Save Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // State management | |
| let messages = []; | |
| let isWaiting = false; | |
| const API_KEY = localStorage.getItem('openrouter_api_key') || ''; | |
| const SYSTEM_PROMPT = localStorage.getItem('system_prompt') || document.getElementById('systemPromptInput').value; | |
| // Load saved API key if exists | |
| if (API_KEY) { | |
| document.getElementById('apiKeyInput').value = API_KEY; | |
| } | |
| document.getElementById('systemPromptInput').value = SYSTEM_PROMPT; | |
| // Auto-resize textarea | |
| function autoResize(textarea) { | |
| textarea.style.height = 'auto'; | |
| textarea.style.height = Math.min(textarea.scrollHeight, 128) + 'px'; | |
| } | |
| // Handle keyboard shortcuts | |
| function handleKeyDown(event) { | |
| if (event.key === 'Enter' && !event.shiftKey) { | |
| event.preventDefault(); | |
| sendMessage(); | |
| } | |
| } | |
| // Quick prompt buttons | |
| function setQuickPrompt(text) { | |
| document.getElementById('messageInput').value = text; | |
| document.getElementById('messageInput').focus(); | |
| autoResize(document.getElementById('messageInput')); | |
| } | |
| // Toggle settings modal | |
| function toggleSettings() { | |
| const modal = document.getElementById('settingsModal'); | |
| modal.classList.toggle('hidden'); | |
| } | |
| // Save settings | |
| function saveSettings() { | |
| const apiKey = document.getElementById('apiKeyInput').value; | |
| const systemPrompt = document.getElementById('systemPromptInput').value; | |
| localStorage.setItem('openrouter_api_key', apiKey); | |
| localStorage.setItem('system_prompt', systemPrompt); | |
| toggleSettings(); | |
| updateStatus('Settings saved', 'success'); | |
| } | |
| // New chat | |
| function newChat() { | |
| messages = []; | |
| const container = document.getElementById('messagesContainer'); | |
| container.innerHTML = ` | |
| <div class="message-enter max-w-3xl mx-auto text-center py-12"> | |
| <div class="w-16 h-16 bg-cyber-500/10 rounded-2xl flex items-center justify-center mx-auto mb-6 border border-cyber-500/20"> | |
| <i data-lucide="terminal" class="w-8 h-8 text-cyber-400"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold text-white mb-3">New Session</h1> | |
| <p class="text-gray-400 mb-8 max-w-lg mx-auto"> | |
| Personal AI instance active. No restrictions applied. Direct system access enabled. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-3"> | |
| <button onclick="setQuickPrompt('Analyze this code for vulnerabilities')" class="px-4 py-2 rounded-lg bg-dark-800 border border-dark-700 hover:border-cyber-500/30 text-sm text-gray-400 hover:text-white transition-all"> | |
| Analyze vulnerabilities | |
| </button> | |
| <button onclick="setQuickPrompt('Generate a python script for port scanning')" class="px-4 py-2 rounded-lg bg-dark-800 border border-dark-700 hover:border-cyber-500/30 text-sm text-gray-400 hover:text-white transition-all"> | |
| Port scanner script | |
| </button> | |
| <button onclick="setQuickPrompt('Explain how to escalate privileges on Linux')" class="px-4 py-2 rounded-lg bg-dark-800 border border-dark-700 hover:border-cyber-500/30 text-sm text-gray-400 hover:text-white transition-all"> | |
| Privilege escalation | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| lucide.createIcons(); | |
| } | |
| // Update status indicator | |
| function updateStatus(text, type = 'normal') { | |
| const indicator = document.getElementById('statusIndicator'); | |
| const color = type === 'success' ? 'bg-cyber-400' : type === 'error' ? 'bg-red-500' : 'bg-yellow-500'; | |
| indicator.innerHTML = ` | |
| <span class="w-1.5 h-1.5 ${color} rounded-full animate-pulse"></span> | |
| ${text} | |
| `; | |
| setTimeout(() => { | |
| indicator.innerHTML = ` | |
| <span class="w-1.5 h-1.5 bg-cyber-400 rounded-full"></span> | |
| Ready | |
| `; | |
| }, 3000); | |
| } | |
| // Add message to UI | |
| function addMessageToUI(role, content, isTyping = false) { | |
| const container = document.getElementById('messagesContainer'); | |
| // Remove welcome message if it exists | |
| if (container.querySelector('.max-w-3xl.mx-auto.text-center')) { | |
| container.innerHTML = ''; | |
| } | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message-enter max-w-4xl mx-auto flex gap-4 ${role === 'user' ? 'flex-row-reverse' : ''}`; | |
| messageDiv.id = isTyping ? 'typingMessage' : `msg-${Date.now()}`; | |
| const avatar = role === 'user' | |
| ? `<div class="w-8 h-8 rounded-full bg-dark-700 flex items-center justify-center flex-shrink-0"><i data-lucide="user" class="w-4 h-4 text-gray-400"></i></div>` | |
| : `<div class="w-8 h-8 rounded-full bg-cyber-500/20 flex items-center justify-center flex-shrink-0 border border-cyber-500/30"><i data-lucide="bot" class="w-4 h-4 text-cyber-400"></i></div>`; | |
| const bubbleClass = role === 'user' | |
| ? 'bg-cyber-600 text-white' | |
| : 'glass-panel text-gray-300 border border-cyber-500/10'; | |
| const contentHtml = isTyping | |
| ? '<div class="typing-indicator">Processing</div>' | |
| : formatContent(content); | |
| messageDiv.innerHTML = ` | |
| ${avatar} | |
| <div class="${bubbleClass} rounded-2xl px-4 py-3 max-w-[85%] text-sm leading-relaxed break-words"> | |
| ${contentHtml} | |
| </div> | |
| `; | |
| container.appendChild(messageDiv); | |
| lucide.createIcons(); | |
| container.scrollTop = container.scrollHeight; | |
| return messageDiv; | |
| } | |
| // Format content with code blocks | |
| function formatContent(content) { | |
| // Handle code blocks | |
| content = content.replace(/ |