-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (140 loc) · 6.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ICONS -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<!-- STYLESHEET -->
<link rel="stylesheet" href="style.css" />
<title>GovText AI - Admin Dashboard</title>
</head>
<body style="margin: 0;">
<div class="container">
<!-- Sidebar -->
<div class="sidebar">
<div class="menu-btn">
<i class="ph-bold ph-caret-left"></i>
</div>
<div class="head">
<div class="user-img">
<img src="user.png" alt="User" />
</div>
<div class="user-details">
<p class="title">Mr.</p>
<p class="name">Kartik Bhalala</p>
</div>
</div>
<div class="nav">
<div class="menu">
<p class="title">Main</p>
<ul>
<li class="active">
<a href="#">
<i class="icon ph-bold ph-chat-circle"></i> <!-- Chat service icon -->
<span class="text">Simplify Service</span>
</a>
</li>
<li>
<a href="https://www.stylemanual.gov.au/">
<i class="icon ph-bold ph-book-open-text"></i> <!-- Style guide icon -->
<span class="text">Style Guide</span>
</a>
</li>
<li>
<a href="https://www.stylemanual.gov.au/sitemap.xml">
<i class="icon ph-bold ph-file-text"></i> <!-- Resources icon -->
<span class="text">Resources</span>
</a>
</li>
</ul>
</div>
<div class="menu">
<p class="title">Settings</p>
<ul>
<li><a href="#"><i class="icon ph-bold ph-gear"></i><span class="text">Settings</span></a></li>
</ul>
</div>
</div>
<div class="menu">
<p class="title">Account</p>
<ul>
<li><a href="#"><i class="icon ph-bold ph-info"></i><span class="text">Help</span></a></li>
<li><a href="#" id="logoutButton"><i class="icon ph-bold ph-sign-out"></i><span class="text">Logout</span></a></li>
</ul>
</div>
</div>
<!-- Main Content -->
<div class="main-content">
<!-- Insert Full-Screen Chatbot here -->
<flowise-fullchatbot></flowise-fullchatbot>
</div>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./script.js"></script>
<script type="module">
import Chatbot from './FlowiseChatEmbed/dist/web.js';
Chatbot.initFull({
chatflowid: '2e46cd72-4ef5-48bd-afc9-0d500bbd16b0', // Your chatflow ID
apiHost: 'http://34.238.124.240:3000', // Your Flowise API endpoint
theme: {
button: {
backgroundColor: '#247613', // Button color
right: 20,
bottom: 20,
size: 'medium', // Button size
iconColor: 'white',
customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
borderRadius: '50%', // Make the button round
},
chatWindow: {
showTitle: true, // Keep the title with the refresh button
title: 'Simplify - Government simplified for all Australians', // Customized title
titleBackgroundColor: '#3f3f3f', // Lighter gray header background to match theme
titleTextColor: '#ffffff', // White text for the title
titleBorderRadius: '10px', // Rounded corners for the title/header
welcomeMessage: "Welcome to Simplify! I’m here to make government content clear and accessible. Paste text, drop a link, or ask me anything to get started. 😊",
errorMessage: 'This is a custom error message',
backgroundColor: '#ffffff', // White background for chat window
height: '100%', // Full-screen height
width: '100%', // Full-screen width
fontSize: 16,
poweredByTextColor: '#303235', // Dark gray "Powered by" text
botMessage: {
backgroundColor: '#e3e3e3', // Light gray for bot messages
textColor: '#303235', // Black text color for bot messages
showAvatar: true,
avatarSrc: './ai.gif', // Bot avatar
},
userMessage: {
backgroundColor: '#b0b0b0', // Light gray background for user messages
textColor: '#000000', // White text color for user messages
showAvatar: true,
avatarSrc: './user.png', // User avatar
},
textInput: {
placeholder: 'Type your question',
backgroundColor: '#f0f0f0', // Light gray input field
textColor: '#000000', // Black text for input field
sendButtonColor: '#000000', // Black send button to match the theme
}
}
}
});
</script>
<script>
// Handle authentication and logout
const authData = localStorage.getItem('admin_auth');
if (!authData) {
window.location.href = 'login.html';
}
document.getElementById('logoutButton').addEventListener('click', function(e) {
e.preventDefault();
localStorage.removeItem('admin_auth');
window.location.href = 'login.html';
});
</script>
</body>
</html>