File size: 7,069 Bytes
dc4504a | 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 146 147 148 149 | <!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">×</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">×</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> |