Hugging Face's logo

Spaces:
code0zero
/
crewcontrol-dashboard
Running

App Files Community
code0zero commited on
Commit
906851f
·
verified ·
1 Parent(s): b93a74d

ممتاز اعد التصميم وفعل ازرار الانتقال في القائمة الجانبية

Browse files
Files changed (5) hide show
  1. agents.html +32 -0
  2. analytics.html +32 -0
  3. components/sidebar.js +6 -6
  4. script.js +15 -3
  5. settings.html +32 -0
agents.html ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Agents - CrewControl</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
10
+ </head>
11
+ <body class="bg-gray-50">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <div class="flex">
15
+ <custom-sidebar></custom-sidebar>
16
+
17
+ <main class="flex-1 p-8">
18
+ <h1 class="text-2xl font-bold mb-6">Agent Management</h1>
19
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
20
+ <!-- Agent cards will be populated here -->
21
+ </div>
22
+ </main>
23
+ </div>
24
+
25
+ <custom-footer></custom-footer>
26
+
27
+ <script src="components/navbar.js"></script>
28
+ <script src="components/sidebar.js"></script>
29
+ <script src="components/footer.js"></script>
30
+ <script src="script.js"></script>
31
+ </body>
32
+ </html>
analytics.html ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Analytics - CrewControl</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
10
+ </head>
11
+ <body class="bg-gray-50">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <div class="flex">
15
+ <custom-sidebar></custom-sidebar>
16
+
17
+ <main class="flex-1 p-8">
18
+ <h1 class="text-2xl font-bold mb-6">Performance Analytics</h1>
19
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
20
+ <!-- Analytics charts will be here -->
21
+ </div>
22
+ </main>
23
+ </div>
24
+
25
+ <custom-footer></custom-footer>
26
+
27
+ <script src="components/navbar.js"></script>
28
+ <script src="components/sidebar.js"></script>
29
+ <script src="components/footer.js"></script>
30
+ <script src="script.js"></script>
31
+ </body>
32
+ </html>
components/sidebar.js CHANGED
@@ -32,23 +32,23 @@ class CustomSidebar extends HTMLElement {
32
  }
33
  </style>
34
  <aside>
35
- <a href="/" class="menu-item active">
36
- <i class="mdi mdi-view-dashboard"></i>
37
  Dashboard
38
  </a>
39
- <a href="#" class="menu-item">
40
  <i class="mdi mdi-robot"></i>
41
  Agents
42
  </a>
43
- <a href="#" class="menu-item">
44
  <i class="mdi mdi-cog"></i>
45
  Settings
46
  </a>
47
- <a href="#" class="menu-item">
48
  <i class="mdi mdi-chart-bar"></i>
49
  Analytics
50
  </a>
51
- </aside>
52
  `;
53
  }
54
  }
 
32
  }
33
  </style>
34
  <aside>
35
+ <a href="index.html" class="menu-item">
36
+ <i class="mdi mdi-view-dashboard"></i>
37
  Dashboard
38
  </a>
39
+ <a href="agents.html" class="menu-item">
40
  <i class="mdi mdi-robot"></i>
41
  Agents
42
  </a>
43
+ <a href="settings.html" class="menu-item">
44
  <i class="mdi mdi-cog"></i>
45
  Settings
46
  </a>
47
+ <a href="analytics.html" class="menu-item">
48
  <i class="mdi mdi-chart-bar"></i>
49
  Analytics
50
  </a>
51
+ </aside>
52
  `;
53
  }
54
  }
script.js CHANGED
@@ -1,9 +1,21 @@
 
1
  document.addEventListener('DOMContentLoaded', () => {
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  // Initialize tooltips
3
  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
4
  tooltipTriggerList.map(function (tooltipTriggerEl) {
5
  return new bootstrap.Tooltip(tooltipTriggerEl);
6
  });
7
-
8
- // Add any additional initialization code here
9
- });
 
1
+
2
  document.addEventListener('DOMContentLoaded', () => {
3
+ // Set active menu item based on current page
4
+ const currentPage = window.location.pathname.split('/').pop() || 'index.html';
5
+ const menuItems = document.querySelectorAll('custom-sidebar a.menu-item');
6
+
7
+ menuItems.forEach(item => {
8
+ const href = item.getAttribute('href');
9
+ if (currentPage === href) {
10
+ item.classList.add('active');
11
+ } else {
12
+ item.classList.remove('active');
13
+ }
14
+ });
15
+
16
  // Initialize tooltips
17
  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
18
  tooltipTriggerList.map(function (tooltipTriggerEl) {
19
  return new bootstrap.Tooltip(tooltipTriggerEl);
20
  });
21
+ });
 
 
settings.html ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Settings - CrewControl</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
10
+ </head>
11
+ <body class="bg-gray-50">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <div class="flex">
15
+ <custom-sidebar></custom-sidebar>
16
+
17
+ <main class="flex-1 p-8">
18
+ <h1 class="text-2xl font-bold mb-6">System Settings</h1>
19
+ <div class="bg-white rounded-lg shadow p-6">
20
+ <!-- Settings form will be here -->
21
+ </div>
22
+ </main>
23
+ </div>
24
+
25
+ <custom-footer></custom-footer>
26
+
27
+ <script src="components/navbar.js"></script>
28
+ <script src="components/sidebar.js"></script>
29
+ <script src="components/footer.js"></script>
30
+ <script src="script.js"></script>
31
+ </body>
32
+ </html>