Skip to content

Commit 1ffdf13

Browse files
ProjectZeroDaysProjectZeroDays
committed
Fix frontend dashboard pages with consistent styling and backend integration
Implement consistent styling, design flow, and backend integration for frontend dashboard pages. * **AI Chatbox Settings (`src/frontend/ai_chatbox_settings.html`)** - Apply consistent styling using Tailwind CSS. - Standardize design flow. - Add backend integration for saving settings. * **C2 Panel (`src/frontend/c2_panel.html`)** - Apply consistent styling using Tailwind CSS. - Standardize design flow. - Add backend integration for device management. * **RAT Dashboard (`src/frontend/rat_dashboard.html`)** - Apply consistent styling using Tailwind CSS. - Standardize design flow. - Add backend integration for RAT management. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ProjectZeroDays/zero-click-exploits?shareId=XXXX-XXXX-XXXX-XXXX).
1 parent 8af017f commit 1ffdf13

File tree

9 files changed

+739
-729
lines changed

9 files changed

+739
-729
lines changed

‎src/frontend/ai_chatbot_dashboard_sidebar.html‎

Lines changed: 88 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,93 @@
11
<html>
2-
<head>
3-
<script src="https://cdn.tailwindcss.com">
4-
</script>
5-
<script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js">
6-
</script>
7-
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
8-
</head>
9-
<body class="bg-gray-900 text-white">
10-
<div class="h-screen flex flex-col" id="app">
11-
<div class="flex flex-col p-4 space-y-4">
12-
<div class="relative">
13-
<input class="w-full p-2 pl-10 bg-gray-800 text-white rounded-md focus:outline-none" placeholder="Search..." type="text"/>
14-
<i class="fas fa-search absolute left-3 top-3 text-gray-400">
15-
</i>
16-
</div>
17-
<div class="space-y-2">
18-
<div class="flex items-center space-x-2">
19-
<i class="fas fa-comments text-gray-400">
20-
</i>
21-
<span>
22-
Chat
23-
</span>
24-
</div>
25-
<div class="flex items-center space-x-2">
26-
<i class="fas fa-user text-gray-400">
27-
</i>
28-
<span>
29-
Characters
30-
</span>
31-
<span class="bg-purple-600 text-xs text-white px-2 py-1 rounded-md">
32-
Pro
33-
</span>
34-
</div>
35-
</div>
36-
<div class="text-gray-500">
37-
FOLDERS
38-
</div>
39-
<div class="flex items-center space-x-2">
40-
<i class="fas fa-folder-plus text-gray-400">
41-
</i>
42-
</div>
43-
<div class="text-gray-500">
44-
CHATS
45-
</div>
46-
<div class="flex items-center justify-between p-2 bg-gray-800 rounded-md">
47-
<span>
48-
Hi
49-
</span>
50-
<div class="flex items-center space-x-2">
51-
<i class="fas fa-pen text-gray-400">
52-
</i>
53-
<i class="fas fa-trash text-gray-400">
54-
</i>
55-
<i class="fas fa-download text-gray-400">
56-
</i>
57-
</div>
58-
</div>
59-
</div>
60-
<div class="mt-auto p-4">
61-
<div class="flex items-center space-x-2">
62-
<img alt="User avatar" class="w-10 h-10 rounded-full" height="40" src="https://storage.googleapis.com/a1aa/image/7MeV1KheZZtWSUyfOWGuVkSm0umyIiAi7QlMteCEg5B4WUiQB.jpg" width="40"/>
63-
<div>
64-
<div>
65-
Venice Guest
66-
</div>
67-
<div class="text-blue-400">
68-
Learn about Venice
2+
<head>
3+
<script src="https://cdn.tailwindcss.com"></script>
4+
<script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js"></script>
5+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
6+
</head>
7+
<body class="bg-gray-900 text-white">
8+
<div class="h-screen flex flex-col" id="app">
9+
<div class="flex flex-col p-4 space-y-4">
10+
<div class="relative">
11+
<input class="w-full p-2 pl-10 bg-gray-800 text-white rounded-md focus:outline-none" placeholder="Search..." type="text"/>
12+
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
13+
</div>
14+
<div class="space-y-2">
15+
<div class="flex items-center space-x-2">
16+
<i class="fas fa-comments text-gray-400"></i>
17+
<span>Chat</span>
18+
</div>
19+
<div class="flex items-center space-x-2">
20+
<i class="fas fa-user text-gray-400"></i>
21+
<span>Characters</span>
22+
<span class="bg-purple-600 text-xs text-white px-2 py-1 rounded-md">Pro</span>
23+
</div>
24+
</div>
25+
<div class="text-gray-500">FOLDERS</div>
26+
<div class="flex items-center space-x-2">
27+
<i class="fas fa-folder-plus text-gray-400"></i>
28+
</div>
29+
<div class="text-gray-500">CHATS</div>
30+
<div class="flex items-center justify-between p-2 bg-gray-800 rounded-md">
31+
<span>Hi</span>
32+
<div class="flex items-center space-x-2">
33+
<i class="fas fa-pen text-gray-400"></i>
34+
<i class="fas fa-trash text-gray-400"></i>
35+
<i class="fas fa-download text-gray-400"></i>
36+
</div>
37+
</div>
6938
</div>
70-
<div class="text-blue-400">
71-
Help &amp; Feedback
39+
<div class="mt-auto p-4">
40+
<div class="flex items-center space-x-2">
41+
<img alt="User avatar" class="w-10 h-10 rounded-full" height="40" src="https://storage.googleapis.com/a1aa/image/7MeV1KheZZtWSUyfOWGuVkSm0umyIiAi7QlMteCEg5B4WUiQB.jpg" width="40"/>
42+
<div>
43+
<div>Venice Guest</div>
44+
<div class="text-blue-400">Learn about Venice</div>
45+
<div class="text-blue-400">Help & Feedback</div>
46+
</div>
47+
</div>
7248
</div>
73-
</div>
7449
</div>
75-
</div>
76-
</div>
77-
<script>
78-
const { createApp, ref } = Vue
79-
createApp({
80-
setup() {
81-
return {}
82-
}
83-
}).mount('#app')
84-
</script>
85-
</body>
50+
<script>
51+
const { createApp, ref } = Vue;
52+
createApp({
53+
setup() {
54+
const searchQuery = ref('');
55+
const chats = ref([
56+
{ id: 1, name: 'Chat 1', messages: [] },
57+
{ id: 2, name: 'Chat 2', messages: [] }
58+
]);
59+
60+
const addChat = () => {
61+
const newChat = { id: chats.value.length + 1, name: `Chat ${chats.value.length + 1}`, messages: [] };
62+
chats.value.push(newChat);
63+
};
64+
65+
const deleteChat = (chatId) => {
66+
chats.value = chats.value.filter(chat => chat.id !== chatId);
67+
};
68+
69+
const downloadChat = (chatId) => {
70+
const chat = chats.value.find(chat => chat.id === chatId);
71+
if (chat) {
72+
const blob = new Blob([JSON.stringify(chat)], { type: 'application/json' });
73+
const url = URL.createObjectURL(blob);
74+
const a = document.createElement('a');
75+
a.href = url;
76+
a.download = `${chat.name}.json`;
77+
a.click();
78+
URL.revokeObjectURL(url);
79+
}
80+
};
81+
82+
return {
83+
searchQuery,
84+
chats,
85+
addChat,
86+
deleteChat,
87+
downloadChat
88+
};
89+
}
90+
}).mount('#app');
91+
</script>
92+
</body>
8693
</html>

‎src/frontend/ai_chatbox_settings.html‎

Lines changed: 73 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,64 +3,26 @@
33
<script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js"></script>
44
<script src="https://cdn.tailwindcss.com"></script>
55
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
6-
<style>
7-
body {
8-
background-color: #0f172a;
9-
color: #ffffff;
10-
font-family: Arial, sans-serif;
11-
}
12-
.header {
13-
display: flex;
14-
justify-content: space-between;
15-
align-items: center;
16-
padding: 1rem;
17-
background-color: #1e293b;
18-
}
19-
.header a {
20-
color: #ffffff;
21-
text-decoration: none;
22-
font-size: 1.25rem;
23-
}
24-
.sidebar {
25-
width: 200px;
26-
background-color: #1e293b;
27-
padding: 1rem;
28-
position: fixed;
29-
top: 0;
30-
bottom: 0;
31-
left: 0;
32-
}
33-
.sidebar a {
34-
display: block;
35-
color: #ffffff;
36-
text-decoration: none;
37-
margin-bottom: 1rem;
38-
}
39-
.content {
40-
margin-left: 220px;
41-
padding: 1rem;
42-
}
43-
</style>
446
</head>
45-
<body>
46-
<div class="header">
47-
<a href="index.html">Main Dashboard</a>
7+
<body class="bg-gray-900 text-white">
8+
<div class="header flex justify-between items-center p-4 bg-gray-800">
9+
<a href="index.html" class="text-xl">Main Dashboard</a>
4810
<div>
4911
<i class="fas fa-share-alt text-white"></i>
5012
<i class="fas fa-ellipsis-v text-white"></i>
5113
</div>
5214
</div>
53-
<div class="sidebar">
54-
<a href="admin_profile.html">Admin Profile</a>
55-
<a href="ai_chatbox_settings.html">AI Chatbox Settings</a>
56-
<a href="ai_code_review.html">AI Code Review</a>
57-
<a href="c2_panel.html">C2 Panel</a>
58-
<a href="chatbot_dashboard.html">Chatbot Dashboard</a>
59-
<a href="feature_pages.html">Feature Pages</a>
60-
<a href="settings.html">Settings</a>
15+
<div class="sidebar w-64 bg-gray-800 p-4 fixed top-0 bottom-0 left-0">
16+
<a href="admin_profile.html" class="block mb-4">Admin Profile</a>
17+
<a href="ai_chatbox_settings.html" class="block mb-4">AI Chatbox Settings</a>
18+
<a href="ai_code_review.html" class="block mb-4">AI Code Review</a>
19+
<a href="c2_panel.html" class="block mb-4">C2 Panel</a>
20+
<a href="chatbot_dashboard.html" class="block mb-4">Chatbot Dashboard</a>
21+
<a href="feature_pages.html" class="block mb-4">Feature Pages</a>
22+
<a href="settings.html" class="block mb-4">Settings</a>
6123
</div>
62-
<div id="app" class="content">
63-
<div class="text-center text-white text-2xl mb-4">Settings</div>
24+
<div id="app" class="content ml-64 p-4">
25+
<div class="text-center text-2xl mb-4">Settings</div>
6426
<div class="flex justify-center space-x-4 mb-4">
6527
<div class="text-gray-400">Text</div>
6628
<div class="text-gray-400">Image</div>
@@ -69,38 +31,89 @@
6931
</div>
7032
<div class="border-b border-gray-600 mb-4"></div>
7133
<div class="mb-4">
72-
<div class="text-white text-lg mb-2">Model</div>
34+
<div class="text-lg mb-2">Model</div>
7335
<div class="flex items-center justify-between bg-gray-800 p-2 rounded">
7436
<span class="text-gray-400">Selected Model</span>
7537
<div class="flex items-center space-x-2">
76-
<span class="text-white">Llama 3.3 70B</span>
77-
<i class="fas fa-chevron-down text-white"></i>
38+
<span>Llama 3.3 70B</span>
39+
<i class="fas fa-chevron-down"></i>
7840
</div>
7941
</div>
8042
</div>
8143
<div class="mb-4">
82-
<div class="text-white text-lg mb-2">System Prompt</div>
44+
<div class="text-lg mb-2">System Prompt</div>
8345
<div class="flex items-center justify-between bg-gray-800 p-2 rounded">
8446
<span class="text-gray-400">Control the AI's reality. Create a System Prompt to command how the AI behaves.</span>
85-
<button class="bg-blue-500 text-white px-2 py-1 rounded">+ Add</button>
47+
<button class="bg-blue-500 px-2 py-1 rounded">+ Add</button>
8648
</div>
8749
</div>
8850
<div class="mb-4">
89-
<div class="text-white text-lg mb-2">Advanced Settings</div>
51+
<div class="text-lg mb-2">Advanced Settings</div>
9052
<div class="flex items-center justify-between bg-gray-800 p-2 rounded">
9153
<span class="text-gray-400">Advanced Settings</span>
92-
<i class="fas fa-chevron-down text-white"></i>
54+
<i class="fas fa-chevron-down"></i>
9355
</div>
9456
</div>
9557
<div class="flex justify-center">
96-
<button class="bg-gray-700 text-white px-4 py-2 rounded">Reset to Default</button>
58+
<button class="bg-gray-700 px-4 py-2 rounded">Reset to Default</button>
59+
</div>
60+
<div class="mt-4">
61+
<form @submit.prevent="saveSettings">
62+
<div class="mb-4">
63+
<label for="model" class="block text-lg mb-2">Model</label>
64+
<select id="model" v-model="settings.model" class="w-full p-2 bg-gray-800 rounded">
65+
<option value="Llama 3.3 70B">Llama 3.3 70B</option>
66+
<option value="GPT-3">GPT-3</option>
67+
<option value="BERT">BERT</option>
68+
</select>
69+
</div>
70+
<div class="mb-4">
71+
<label for="systemPrompt" class="block text-lg mb-2">System Prompt</label>
72+
<textarea id="systemPrompt" v-model="settings.systemPrompt" class="w-full p-2 bg-gray-800 rounded"></textarea>
73+
</div>
74+
<div class="mb-4">
75+
<label for="advancedSettings" class="block text-lg mb-2">Advanced Settings</label>
76+
<textarea id="advancedSettings" v-model="settings.advancedSettings" class="w-full p-2 bg-gray-800 rounded"></textarea>
77+
</div>
78+
<div class="flex justify-center">
79+
<button type="submit" class="bg-blue-500 px-4 py-2 rounded">Save Settings</button>
80+
</div>
81+
</form>
9782
</div>
9883
</div>
9984
<script>
10085
const { createApp, ref } = Vue;
10186
createApp({
10287
setup() {
103-
return {};
88+
const settings = ref({
89+
model: 'Llama 3.3 70B',
90+
systemPrompt: '',
91+
advancedSettings: ''
92+
});
93+
94+
const saveSettings = async () => {
95+
try {
96+
const response = await fetch('/api/save-settings', {
97+
method: 'POST',
98+
headers: {
99+
'Content-Type': 'application/json'
100+
},
101+
body: JSON.stringify(settings.value)
102+
});
103+
if (!response.ok) {
104+
throw new Error('Failed to save settings');
105+
}
106+
alert('Settings saved successfully');
107+
} catch (error) {
108+
console.error(error);
109+
alert('Error saving settings');
110+
}
111+
};
112+
113+
return {
114+
settings,
115+
saveSettings
116+
};
104117
}
105118
}).mount('#app');
106119
</script>

0 commit comments

Comments
 (0)