Skip to content

Commit 6af2fdb

Browse files
ProjectZeroDaysProjectZeroDays
authored
Merge pull request #161 from ProjectZeroDays/fix-frontend-dashboard
Fix frontend dashboard pages with consistent styling and backend integration
2 parents 8af017f + 1ffdf13 commit 6af2fdb

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)