Spaces:

Mrdips
/

undefined

Running

App Files Files Community

Mrdips commited on Oct 30, 2025

Commit

d48db9e

verified ·

1 Parent(s): a167661

установи коннеторы в него , найди в стети лучший референс для чатат И для разработки помощи интеграции и взлома и легким управление и разверни

Browse files

Files changed (5) hide show

chat.html +44 -7
components/api-connector.js +67 -0
index.html +12 -4
style.css +30 -5
tools.html +24 -2

chat.html CHANGED Viewed

@@ -10,15 +10,27 @@
 </head>
 <body>
     <div class="card">
-        <h1>AI Chat Assistant</h1>
         <div id="chat-container" class="mb-4 p-4 border rounded-lg bg-gray-50 h-96 overflow-y-auto">
             <!-- Chat messages will appear here -->
         </div>
         <div class="flex">
-            <input type="text" id="user-input" placeholder="Type your message..." class="flex-1 p-2 border rounded-l-lg">
             <button onclick="sendMessage()" class="bg-blue-500 text-white p-2 rounded-r-lg hover:bg-blue-600">Send</button>
         </div>
-        <div class="mt-4">
             <a href="tools.html" class="text-blue-500 hover:underline">Explore Development Tools & SDKs</a>
         </div>
     </div>
@@ -100,11 +112,36 @@
                 sendMessage();
             }
         });
-        // Initial welcome message
         window.onload = function() {
-            addMessage('ai', 'Hello! I am your AI assistant. How can I help you today?');
         };
-    </script>
 </body>
 </html>

 </head>
 <body>
     <div class="card">
+        <h1>AI Development Assistant</h1>
+        <div class="flex mb-4 space-x-2">
+            <button onclick="setContext('hacking')" class="px-3 py-1 bg-gray-800 text-white rounded hover:bg-gray-700">Hacking</button>
+            <button onclick="setContext('integration')" class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700">Integration</button>
+            <button onclick="setContext('debugging')" class="px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700">Debugging</button>
+            <button onclick="setContext('automation')" class="px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700">Automation</button>
+        </div>
         <div id="chat-container" class="mb-4 p-4 border rounded-lg bg-gray-50 h-96 overflow-y-auto">
             <!-- Chat messages will appear here -->
         </div>
         <div class="flex">
+            <input type="text" id="user-input" placeholder="Type your message or command..." class="flex-1 p-2 border rounded-l-lg">
             <button onclick="sendMessage()" class="bg-blue-500 text-white p-2 rounded-r-lg hover:bg-blue-600">Send</button>
         </div>
+        <div class="mt-4 grid grid-cols-2 gap-2">
+            <button onclick="insertCommand('/explain')" class="px-2 py-1 bg-gray-200 rounded text-sm hover:bg-gray-300">/explain</button>
+            <button onclick="insertCommand('/code')" class="px-2 py-1 bg-gray-200 rounded text-sm hover:bg-gray-300">/code</button>
+            <button onclick="insertCommand('/api')" class="px-2 py-1 bg-gray-200 rounded text-sm hover:bg-gray-300">/api</button>
+            <button onclick="insertCommand('/fix')" class="px-2 py-1 bg-gray-200 rounded text-sm hover:bg-gray-300">/fix</button>
+        </div>
+<div class="mt-4">
             <a href="tools.html" class="text-blue-500 hover:underline">Explore Development Tools & SDKs</a>
         </div>
     </div>
                 sendMessage();
             }
         });
+        let currentContext = 'general';
+        function setContext(context) {
+            currentContext = context;
+            addMessage('system', `Context set to ${context} mode`);
+        }
+        function insertCommand(command) {
+            const input = document.getElementById('user-input');
+            input.value = command + ' ';
+            input.focus();
+        }
+        // Initial welcome message with references
         window.onload = function() {
+            addMessage('ai', `👋 Welcome to DevAssistant!
+I can help with:
+- API Integrations (REST, GraphQL, WebSockets)
+- Debugging (Chrome DevTools, Wireshark)
+- Security (Burp Suite, OWASP ZAP)
+- Automation (Selenium, Puppeteer)
+Try commands like:
+• /explain [concept] - Get detailed explanations
+• /code [language] - Generate code samples
+• /api [service] - Get API integration help
+• /fix [error] - Debug and fix issues
+Or click the context buttons above!`);
         };
+</script>
 </body>
 </html>

components/api-connector.js ADDED Viewed

	@@ -0,0 +1,67 @@

+class ApiConnector extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin: 1rem 0;
+        }
+        .connector {
+          border: 1px solid #e5e7eb;
+          border-radius: 8px;
+          padding: 1rem;
+          background: #f9fafb;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 0.5rem;
+        }
+        .icon {
+          width: 24px;
+          height: 24px;
+          margin-right: 0.5rem;
+        }
+        h3 {
+          margin: 0;
+          font-size: 1rem;
+          font-weight: 600;
+        }
+        .actions {
+          display: flex;
+          gap: 0.5rem;
+          margin-top: 0.75rem;
+        }
+        button {
+          padding: 0.25rem 0.5rem;
+          font-size: 0.875rem;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+        .connect {
+          background: #3b82f6;
+          color: white;
+          border: none;
+        }
+        .docs {
+          background: white;
+          border: 1px solid #e5e7eb;
+        }
+      </style>
+      <div class="connector">
+        <div class="header">
+          <img src="http://static.photos/technology/200x200/${Math.floor(Math.random() * 100)}" class="icon">
+          <h3><slot name="name">API Connector</slot></h3>
+        </div>
+        <div><slot name="description">Connect to external APIs</slot></div>
+        <div class="actions">
+          <button class="connect">Connect</button>
+          <button class="docs">Docs</button>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define('api-connector', ApiConnector);

index.html CHANGED Viewed

@@ -11,10 +11,18 @@
 </head>
 <body>
     <div class="card">
-        <h1>The Colorless Wonder</h1>
-        <p>Welcome to the Colorless Wonder website.</p>
-        <p><a href="chat.html" class="text-blue-500 hover:underline">Chat with our AI assistant</a></p>
-        <p><a href="tools.html" class="text-blue-500 hover:underline">Explore Development Tools & SDKs</a></p>
     </div>
 </body>
 </html>

 </head>
 <body>
     <div class="card">
+        <h1>Developer Nexus</h1>
+        <p>Powerful tools for developers, hackers, and security researchers.</p>
+        <div class="mt-4 grid grid-cols-2 gap-4">
+            <a href="chat.html" class="p-3 border rounded-lg hover:bg-gray-50 block">
+                <div class="font-medium">AI Assistant</div>
+                <div class="text-sm text-gray-600">Smart coding help and automation</div>
+            </a>
+            <a href="tools.html" class="p-3 border rounded-lg hover:bg-gray-50 block">
+                <div class="font-medium">Toolkit</div>
+                <div class="text-sm text-gray-600">Essential dev tools & connectors</div>
+            </a>
+        </div>
     </div>
 </body>
 </html>

style.css CHANGED Viewed

@@ -15,15 +15,40 @@ p {
 	margin-bottom: 10px;
 	margin-top: 5px;
 }
 .card {
-	max-width: 620px;
 	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
 .card p:last-child {
 	margin-bottom: 0;
 }

 	margin-bottom: 10px;
 	margin-top: 5px;
 }
 .card {
+	max-width: 720px;
 	margin: 0 auto;
+	padding: 20px;
+	border: 1px solid #e5e7eb;
+	border-radius: 12px;
+	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+#chat-container {
+	background: #f9fafb;
+	font-family: 'SF Mono', 'Roboto Mono', monospace;
+	font-size: 14px;
+}
+#chat-container div[class*="bg-gray-100"] {
+	max-width: 80%;
+	background: #f3f4f6;
+	border-left: 3px solid #3b82f6;
+	padding: 10px 12px;
+}
+#chat-container div[class*="bg-blue-100"] {
+	max-width: 80%;
+	background: #ebf5ff;
+	border-right: 3px solid #2563eb;
+	padding: 10px 12px;
 }
+button[onclick^="setContext"] {
+	font-size: 14px;
+	font-weight: 500;
+	transition: all 0.2s;
+}
 .card p:last-child {
 	margin-bottom: 0;
 }

tools.html CHANGED Viewed

@@ -10,10 +10,31 @@
 </head>
 <body>
     <div class="card">
-        <h1>Development Tools & SDKs</h1>
-        <p>Explore our collection of development tools, APIs, and SDKs for building amazing applications.</p>
         <div class="mt-6">
             <h2 class="text-xl font-semibold mb-4">API Integration Tools</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div class="border p-4 rounded-lg">
@@ -78,5 +99,6 @@
             <a href="index.html" class="text-blue-500 hover:underline">&larr; Back to Home</a>
         </div>
     </div>
 </body>
 </html>

 </head>
 <body>
     <div class="card">
+        <h1>Developer Toolkit</h1>
+        <p>Connect with essential development tools and APIs for building, debugging, and securing applications.</p>
         <div class="mt-6">
+            <h2 class="text-xl font-semibold mb-4">API Connectors</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <api-connector>
+                    <span slot="name">Postman API</span>
+                    <span slot="description">Test and document APIs with collections</span>
+                </api-connector>
+                <api-connector>
+                    <span slot="name">Burp Suite</span>
+                    <span slot="description">Web security testing toolkit</span>
+                </api-connector>
+                <api-connector>
+                    <span slot="name">OWASP ZAP</span>
+                    <span slot="description">Automated security scanner</span>
+                </api-connector>
+                <api-connector>
+                    <span slot="name">Wireshark</span>
+                    <span slot="description">Network protocol analyzer</span>
+                </api-connector>
+            </div>
+        </div>
+<div class="mt-6">
             <h2 class="text-xl font-semibold mb-4">API Integration Tools</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div class="border p-4 rounded-lg">
             <a href="index.html" class="text-blue-500 hover:underline">&larr; Back to Home</a>
         </div>
     </div>
+    <script src="components/api-connector.js"></script>
 </body>
 </html>