Spaces:

code0zero
/

crewcontrol-dashboard

Running

App Files Files Community

code0zero commited on Nov 5

Commit

b93a74d

verified ·

1 Parent(s): 5e28ece

صفحة على الإنترنت تكون واجهه امامية لتعديل وظبط الوكلاء خاصة لمكتبات https://www.crewai.com/

Browse files

Files changed (7) hide show

README.md +7 -4
components/footer.js +21 -0
components/navbar.js +49 -0
components/sidebar.js +55 -0
index.html +58 -19
script.js +9 -0
style.css +13 -21

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Crewcontrol Dashboard
-emoji: 🌖
-colorFrom: gray
 colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CrewControl Dashboard 🚀
+colorFrom: blue
 colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,21 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: white;
+          border-top: 1px solid #e5e7eb;
+          padding: 1rem 2rem;
+          text-align: center;
+          color: #6b7280;
+          font-size: 0.875rem;
+        }
+      </style>
+      <footer>
+        © 2023 CrewControl Dashboard. All rights reserved.
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,49 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: white;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo {
+          font-weight: bold;
+          font-size: 1.25rem;
+          color: #3b82f6;
+        }
+        .logo span {
+          color: #10b981;
+        }
+        .actions {
+          display: flex;
+          gap: 1rem;
+        }
+        button {
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          font-weight: 500;
+        }
+        .primary {
+          background: #3b82f6;
+          color: white;
+        }
+        .secondary {
+          border: 1px solid #e5e7eb;
+        }
+      </style>
+      <nav>
+        <div class="logo">Crew<span>Control</span></div>
+        <div class="actions">
+          <button class="secondary">Docs</button>
+          <button class="primary">New Agent</button>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/sidebar.js ADDED Viewed

	@@ -0,0 +1,55 @@

+class CustomSidebar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        aside {
+          width: 250px;
+          background: white;
+          height: calc(100vh - 64px);
+          border-right: 1px solid #e5e7eb;
+          padding: 1rem 0;
+        }
+        .menu-item {
+          padding: 0.75rem 1.5rem;
+          display: flex;
+          align-items: center;
+          color: #4b5563;
+          cursor: pointer;
+        }
+        .menu-item:hover {
+          background: #f3f4f6;
+          color: #3b82f6;
+        }
+        .menu-item i {
+          margin-right: 0.75rem;
+          font-size: 1.25rem;
+        }
+        .active {
+          background: #eff6ff;
+          color: #3b82f6;
+          border-right: 2px solid #3b82f6;
+        }
+      </style>
+      <aside>
+        <a href="/" class="menu-item active">
+          <i class="mdi mdi-view-dashboard"></i>
+          Dashboard
+        </a>
+        <a href="#" class="menu-item">
+          <i class="mdi mdi-robot"></i>
+          Agents
+        </a>
+        <a href="#" class="menu-item">
+          <i class="mdi mdi-cog"></i>
+          Settings
+        </a>
+        <a href="#" class="menu-item">
+          <i class="mdi mdi-chart-bar"></i>
+          Analytics
+        </a>
+      </aside>
+    `;
+  }
+}
+customElements.define('custom-sidebar', CustomSidebar);

index.html CHANGED Viewed

@@ -1,19 +1,58 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CrewControl Dashboard</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <div class="flex">
+        <custom-sidebar></custom-sidebar>
+        <main class="flex-1 p-8">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Agent Cards -->
+                <div class="bg-white rounded-lg shadow p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
+                            <i class="mdi mdi-robot text-blue-500 text-2xl"></i>
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="font-semibold">Research Agent</h3>
+                            <p class="text-gray-500 text-sm">Task: Web Research</p>
+                        </div>
+                    </div>
+                    <div class="space-y-3">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Role</label>
+                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" value="Researcher">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Goal</label>
+                            <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md">Find relevant information online</textarea>
+                        </div>
+                        <button class="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition">
+                            Update Agent
+                        </button>
+                    </div>
+                </div>
+                <!-- Add more agent cards as needed -->
+            </div>
+        </main>
+    </div>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,9 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+    // Add any additional initialization code here
+});

style.css CHANGED Viewed

@@ -1,28 +1,20 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	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;
-}

 body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
+input, textarea {
+    transition: border-color 0.2s;
 }
+input:focus, textarea:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 1px #3b82f6;
 }
+button {
+    transition: background-color 0.2s;
+    cursor: pointer;
+}