-
Notifications
You must be signed in to change notification settings - Fork 38
Expand file tree
/
Copy pathchat.html
More file actions
163 lines (150 loc) · 6.17 KB
/
chat.html
File metadata and controls
163 lines (150 loc) · 6.17 KB
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CyberShield — AI Scam Detector Chat</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png" />
</head>
<body>
<!-- ── Loading Screen ── -->
<div id="loader">
<div class="loader-inner">
<div class="loader-ring"></div>
<div class="loader-logo">
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#00ffb4" stroke-width="1.8">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
</svg>
</div>
<div class="loader-brand">CyberShield AI</div>
<div class="loader-tagline">Conversational Scam & Fraud Protection.</div>
<div class="loader-bar-wrap">
<div class="loader-bar"></div>
</div>
</div>
</div>
<!-- ── Main Page ── -->
<main id="mainPage" class="hidden">
<div class="wrapper">
<!-- Header -->
<header class="header">
<div class="logo-badge">
<div class="dot"></div>
CyberShield AI
</div>
<button id="themeToggle" class="theme-toggle-btn" aria-label="Toggle dark mode">
🌙
</button>
<h1>
Scam Detector<br>
<span>Conversational Agent</span>
</h1>
<p class="subtitle">
Paste emails, SMS messages, investment pitches, or job offers.
Our AI scans for social engineering & phishing signatures.
</p>
</header>
<!-- Navigation Link -->
<div class="dashboard-cta">
<a class="scan-btn" href="index.html">Back to URL Scanner</a>
</div>
<!-- Chat Interface Card -->
<div class="chat-card chat-card-container">
<div class="chat-container-header">
<span class="chat-status">
<span class="chat-status-dot"></span>
CyberShield Assistant Online
</span>
<button onclick="clearChat()" class="example-chip chat-clear-btn" title="Clear conversation history">
Clear Chat
</button>
</div>
<div id="chatHistory" class="chat-history">
<!-- Default Bot Welcome -->
<div class="chat-msg robot">
<div class="chat-avatar">🛡️</div>
<div class="chat-bubble">
<strong>Welcome to the CyberShield Scam Detector Chat!</strong>
<p class="chat-welcome-text">
Paste any suspicious messages, job contracts, banking warnings, or SMS below. I will inspect the context and return a structured safety audit details report. You can ask follow-up questions about safety tips!
</p>
</div>
</div>
</div>
<!-- Bouncing Loading Dots -->
<div id="typingIndicator" class="chat-msg robot typing-msg hidden">
<div class="chat-avatar">🤖</div>
<div class="typing-indicator">
<div class="dot-bounce"></div>
<div class="dot-bounce"></div>
<div class="dot-bounce"></div>
</div>
</div>
<!-- Chat Input Section -->
<div class="chat-input-wrap">
<div class="chat-input-row">
<textarea id="chatInput" placeholder="Paste or type suspicious message text here to analyze..." rows="2" class="chat-input-textarea" oninput="adjustTextareaHeight(this)"></textarea>
<button class="scan-btn chat-send-btn" id="sendBtn" onclick="sendMessage()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
Verify Text
</button>
</div>
</div>
</div>
<!-- Quick Scan Templates -->
<div class="examples chat-examples-container">
<span class="examples-label">Try Examples:</span>
<button class="example-chip" onclick="fillTemplate('job')">Fake Job Offer</button>
<button class="example-chip" onclick="fillTemplate('phishing')">Courier Delivery SMS</button>
<button class="example-chip" onclick="fillTemplate('otp')">Bank OTP Security Scam</button>
<button class="example-chip" onclick="fillTemplate('crypto')">Telegram Investment Double</button>
</div>
<!-- Stats or Features Row (Scam Types) -->
<div class="features chat-features-container">
<div class="feature-item">
<div class="feature-icon">🎣</div>
<div class="feature-title">Phishing & Impersonation</div>
<div class="feature-desc">Catch fake login notifications, courier warnings, or urgent support requests.</div>
</div>
<div class="feature-item">
<div class="feature-icon">💼</div>
<div class="feature-title">Fake Recruitment</div>
<div class="feature-desc">Scan suspicious part-time task job offers and wire payment deposit demands.</div>
</div>
<div class="feature-item">
<div class="feature-icon">📉</div>
<div class="feature-title">Investment Schemes</div>
<div class="feature-desc">Flag unrealistic returns, crypto doubling schemes, and pressure-selling crypto pitches.</div>
</div>
</div>
<!-- Footer -->
<footer class="main-footer">
<div class="footer-content">
<div class="footer-brand">
<div class="logo-badge">
<div class="dot"></div>
CyberShield AI
</div>
<p>Conversational LLM scan engine to audit suspect text patterns.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Navigation</h4>
<a href="index.html">URL Scanner</a>
<a href="dashboard.html">Threat Dashboard</a>
</div>
</div>
</div>
<div class="footer-bottom">
© 2026 CyberShield URL Scanner. Powered by Google Gemini AI.
</div>
</footer>
</div>
</main>
<script src="chat.js"></script>
</body>
</html>