Hugging Face's logo

Spaces:
Abdfah
/
Test
Running

App Files Community
Test / index.html
Abdfah's picture
Abdfah
Update index.html
dc4504a verified
Raw History Blame Contribute Delete
7.07 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CyberGuard AI Assistant</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="app-container">
<!-- Sidebar for conversation history -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<h2>Conversation History</h2>
<button id="sidebar-new-chat-btn" class="new-chat-btn">
<i class="fas fa-plus"></i> New Chat
</button>
</div>
<div class="conversation-list" id="conversation-list">
<!-- Conversation history items will be added here dynamically -->
</div>
</div>
<!-- Main chat area -->
<div class="chat-container">
<!-- Header with menu toggle and info -->
<div class="chat-header">
<button id="menu-toggle" class="menu-toggle">
<i class="fas fa-bars"></i>
</button>
<div class="chat-title">CyberGuard AI Assistant</div>
<div class="header-actions">
<button id="language-selector" class="language-btn">
<i class="fas fa-globe"></i>
<span id="current-language">EN</span>
</button>
<div class="language-dropdown" id="language-dropdown">
<div class="language-option" data-lang="en">🇬🇧 English</div>
<div class="language-option" data-lang="ur_roman">🇵🇰 Roman Urdu</div>
<div class="language-option" data-lang="ur">🇵🇰 اردو</div>
</div>
<button id="info-btn" class="info-btn">
<i class="fas fa-info-circle"></i>
</button>
<button id="header-new-chat-btn" class="new-chat-btn">
<i class="fas fa-plus"></i> New Chat
</button>
</div>
</div>
<!-- Chat messages area -->
<div class="chat-messages" id="chat-messages">
<div class="welcome-container">
<div class="welcome-logo">
<i class="fas fa-shield-alt"></i>
</div>
<h1>Welcome to CyberGuard AI</h1>
<p>Your trusted cybersecurity assistant. Ask me anything about cybersecurity, privacy, or digital safety.</p>
<div class="example-queries">
<div class="example-query" data-query="What are the most common types of cyber attacks?">
<i class="fas fa-question-circle"></i>
<span>What are the most common types of cyber attacks?</span>
</div>
<div class="example-query" data-query="How can I create a strong password?">
<i class="fas fa-question-circle"></i>
<span>How can I create a strong password?</span>
</div>
<div class="example-query" data-query="What is phishing and how can I avoid it?">
<i class="fas fa-question-circle"></i>
<span>What is phishing and how can I avoid it?</span>
</div>
<div class="example-query" data-query="Explain the concept of zero trust security">
<i class="fas fa-question-circle"></i>
<span>Explain the concept of zero trust security</span>
</div>
</div>
</div>
<!-- Chat messages will be added here dynamically -->
</div>
<!-- Input area -->
<div class="chat-input-container">
<div class="chat-input-wrapper">
<textarea id="user-input" placeholder="Ask me about cybersecurity..." rows="1"></textarea>
<button id="send-btn" class="send-btn" disabled>
<i class="fas fa-paper-plane"></i>
</button>
</div>
<div class="typing-indicator" id="typing-indicator">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<!-- Info Modal -->
<div class="modal" id="info-modal">
<div class="modal-content">
<div class="modal-header">
<h2>About CyberGuard AI</h2>
<span class="close-modal">&times;</span>
</div>
<div class="modal-body">
<p><strong>CyberGuard AI</strong> is an advanced cybersecurity assistant developed to help you navigate the complex world of digital security.</p>
<h3>Our Mission</h3>
<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>
<h3>Features</h3>
<ul>
<li>Expert advice on cybersecurity best practices</li>
<li>Real-time threat analysis and recommendations</li>
<li>Personalized security guidance</li>
<li>Multi-language support</li>
<li>Conversation memory for contextual assistance</li>
</ul>
<h3>Privacy Commitment</h3>
<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>
<div class="modal-footer">
<p>© 2025 CyberGuard Foundation. All rights reserved.</p>
</div>
</div>
</div>
</div>
<!-- Language Selection Modal -->
<div class="modal" id="language-modal">
<div class="modal-content">
<div class="modal-header">
<h2>Select Language</h2>
<span class="close-modal">&times;</span>
</div>
<div class="modal-body language-selection">
<!-- Language options will be added here -->
</div>
</div>
</div>
<script src="config.js"></script>
<script src="custom_data.js"></script>
<script src="script.js"></script>
</body>
</html>