Hugging Face's logo

Spaces:
Abdfah
/
Test
Running

App Files Community
Abdfah commited on
Commit
dc4504a
·
verified ·
1 Parent(s): 855a206

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +149 -19
index.html CHANGED
@@ -1,19 +1,149 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>CyberGuard AI Assistant</title>
7
+ <link rel="stylesheet" href="styles.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ </head>
11
+ <body>
12
+ <div class="app-container">
13
+ <!-- Sidebar for conversation history -->
14
+ <div class="sidebar" id="sidebar">
15
+ <div class="sidebar-header">
16
+ <h2>Conversation History</h2>
17
+ <button id="sidebar-new-chat-btn" class="new-chat-btn">
18
+ <i class="fas fa-plus"></i> New Chat
19
+ </button>
20
+ </div>
21
+ <div class="conversation-list" id="conversation-list">
22
+ <!-- Conversation history items will be added here dynamically -->
23
+ </div>
24
+ </div>
25
+
26
+ <!-- Main chat area -->
27
+ <div class="chat-container">
28
+ <!-- Header with menu toggle and info -->
29
+ <div class="chat-header">
30
+ <button id="menu-toggle" class="menu-toggle">
31
+ <i class="fas fa-bars"></i>
32
+ </button>
33
+ <div class="chat-title">CyberGuard AI Assistant</div>
34
+ <div class="header-actions">
35
+ <button id="language-selector" class="language-btn">
36
+ <i class="fas fa-globe"></i>
37
+ <span id="current-language">EN</span>
38
+ </button>
39
+ <div class="language-dropdown" id="language-dropdown">
40
+ <div class="language-option" data-lang="en">🇬🇧 English</div>
41
+ <div class="language-option" data-lang="ur_roman">🇵🇰 Roman Urdu</div>
42
+ <div class="language-option" data-lang="ur">🇵🇰 اردو</div>
43
+ </div>
44
+ <button id="info-btn" class="info-btn">
45
+ <i class="fas fa-info-circle"></i>
46
+ </button>
47
+ <button id="header-new-chat-btn" class="new-chat-btn">
48
+ <i class="fas fa-plus"></i> New Chat
49
+ </button>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- Chat messages area -->
54
+ <div class="chat-messages" id="chat-messages">
55
+ <div class="welcome-container">
56
+ <div class="welcome-logo">
57
+ <i class="fas fa-shield-alt"></i>
58
+ </div>
59
+ <h1>Welcome to CyberGuard AI</h1>
60
+ <p>Your trusted cybersecurity assistant. Ask me anything about cybersecurity, privacy, or digital safety.</p>
61
+ <div class="example-queries">
62
+ <div class="example-query" data-query="What are the most common types of cyber attacks?">
63
+ <i class="fas fa-question-circle"></i>
64
+ <span>What are the most common types of cyber attacks?</span>
65
+ </div>
66
+ <div class="example-query" data-query="How can I create a strong password?">
67
+ <i class="fas fa-question-circle"></i>
68
+ <span>How can I create a strong password?</span>
69
+ </div>
70
+ <div class="example-query" data-query="What is phishing and how can I avoid it?">
71
+ <i class="fas fa-question-circle"></i>
72
+ <span>What is phishing and how can I avoid it?</span>
73
+ </div>
74
+ <div class="example-query" data-query="Explain the concept of zero trust security">
75
+ <i class="fas fa-question-circle"></i>
76
+ <span>Explain the concept of zero trust security</span>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ <!-- Chat messages will be added here dynamically -->
81
+ </div>
82
+
83
+ <!-- Input area -->
84
+ <div class="chat-input-container">
85
+ <div class="chat-input-wrapper">
86
+ <textarea id="user-input" placeholder="Ask me about cybersecurity..." rows="1"></textarea>
87
+ <button id="send-btn" class="send-btn" disabled>
88
+ <i class="fas fa-paper-plane"></i>
89
+ </button>
90
+ </div>
91
+ <div class="typing-indicator" id="typing-indicator">
92
+ <span></span>
93
+ <span></span>
94
+ <span></span>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Info Modal -->
101
+ <div class="modal" id="info-modal">
102
+ <div class="modal-content">
103
+ <div class="modal-header">
104
+ <h2>About CyberGuard AI</h2>
105
+ <span class="close-modal">&times;</span>
106
+ </div>
107
+ <div class="modal-body">
108
+ <p><strong>CyberGuard AI</strong> is an advanced cybersecurity assistant developed to help you navigate the complex world of digital security.</p>
109
+
110
+ <h3>Our Mission</h3>
111
+ <p>We are committed to making cybersecurity knowledge accessible to everyone. Our foundation believes that education is the first line of defense against cyber threats.</p>
112
+
113
+ <h3>Features</h3>
114
+ <ul>
115
+ <li>Expert advice on cybersecurity best practices</li>
116
+ <li>Real-time threat analysis and recommendations</li>
117
+ <li>Personalized security guidance</li>
118
+ <li>Multi-language support</li>
119
+ <li>Conversation memory for contextual assistance</li>
120
+ </ul>
121
+
122
+ <h3>Privacy Commitment</h3>
123
+ <p>Your conversations with CyberGuard AI are secured with end-to-end encryption. We store conversation history only to improve your experience and never share your data with third parties.</p>
124
+
125
+ <div class="modal-footer">
126
+ <p>© 2025 CyberGuard Foundation. All rights reserved.</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Language Selection Modal -->
133
+ <div class="modal" id="language-modal">
134
+ <div class="modal-content">
135
+ <div class="modal-header">
136
+ <h2>Select Language</h2>
137
+ <span class="close-modal">&times;</span>
138
+ </div>
139
+ <div class="modal-body language-selection">
140
+ <!-- Language options will be added here -->
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <script src="config.js"></script>
146
+ <script src="custom_data.js"></script>
147
+ <script src="script.js"></script>
148
+ </body>
149
+ </html>