File size: 13,408 Bytes
d2ed9c8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ThreatLens OSINT - Ethical Intelligence Platform</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="app-container">
        <!-- Header -->
        <header class="header">
            <div class="header-content">
                <div class="logo">
                    <div class="logo-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="10"/>
                            <path d="M12 6v6l4 2"/>
                        </svg>
                    </div>
                    <div class="logo-text">
                        <h1>ThreatLens OSINT</h1>
                        <span class="tagline">Ethical Intelligence Platform</span>
                    </div>
                </div>
                <div class="header-actions">
                    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
                        Built with anycoder
                    </a>
                    <div class="compliance-badge">
                        <span class="badge-icon">πŸ›‘οΈ</span>
                        <span>Compliance Mode Active</span>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="main-content">
            <!-- Sidebar -->
            <aside class="sidebar">
                <nav class="nav-menu">
                    <button class="nav-item active" data-tab="analyze">
                        <span class="nav-icon">πŸ”</span>
                        <span>Threat Analysis</span>
                    </button>
                    <button class="nav-item" data-tab="entities">
                        <span class="nav-icon">🏷️</span>
                        <span>Entity Extraction</span>
                    </button>
                    <button class="nav-item" data-tab="sentiment">
                        <span class="nav-icon">πŸ“Š</span>
                        <span>Sentiment Analysis</span>
                    </button>
                    <button class="nav-item" data-tab="summarize">
                        <span class="nav-icon">πŸ“</span>
                        <span>Report Summary</span>
                    </button>
                    <button class="nav-item" data-tab="classify">
                        <span class="nav-icon">πŸ“‚</span>
                        <span>Threat Classification</span>
                    </button>
                </nav>

                <div class="sidebar-footer">
                    <div class="model-status">
                        <div class="status-indicator loading" id="modelStatus"></div>
                        <span id="modelStatusText">Loading AI Models...</span>
                    </div>
                    <div class="legal-notice">
                        <p>⚠️ This platform only processes publicly available data. All operations comply with GDPR, CCPA, and ethical OSINT standards.</p>
                    </div>
                </div>
            </aside>

            <!-- Content Area -->
            <div class="content-area">
                <!-- Threat Analysis Tab -->
                <section class="tab-content active" id="analyze-tab">
                    <div class="section-header">
                        <h2>Threat Intelligence Analysis</h2>
                        <p>Analyze publicly available threat intelligence data using AI-powered NLP</p>
                    </div>

                    <div class="analysis-container">
                        <div class="input-section">
                            <label for="threatInput">Paste threat intelligence report, security advisory, or public data:</label>
                            <textarea id="threatInput" placeholder="Enter text for analysis...&#10;&#10;Example: Paste a CVE description, security advisory, or threat report from public sources." rows="8"></textarea>
                            <div class="input-actions">
                                <button class="btn btn-secondary" onclick="loadSampleData()">
                                    Load Sample Data
                                </button>
                                <button class="btn btn-primary" onclick="analyzeThreat()" id="analyzeBtn">
                                    <span class="btn-text">Analyze</span>
                                    <span class="btn-loader hidden"></span>
                                </button>
                            </div>
                        </div>

                        <div class="output-section" id="analysisOutput">
                            <div class="empty-state">
                                <div class="empty-icon">πŸ›‘οΈ</div>
                                <h3>No Analysis Yet</h3>
                                <p>Enter threat intelligence data and click Analyze to begin</p>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Entity Extraction Tab -->
                <section class="tab-content" id="entities-tab">
                    <div class="section-header">
                        <h2>Named Entity Recognition</h2>
                        <p>Extract organizations, locations, and threat actors from public intelligence reports</p>
                    </div>

                    <div class="analysis-container">
                        <div class="input-section">
                            <label for="entityInput">Enter text for entity extraction:</label>
                            <textarea id="entityInput" placeholder="Paste intelligence report text..." rows="6"></textarea>
                            <div class="input-actions">
                                <button class="btn btn-primary" onclick="extractEntities()" id="entityBtn">
                                    Extract Entities
                                </button>
                            </div>
                        </div>

                        <div class="output-section" id="entityOutput">
                            <div class="empty-state">
                                <div class="empty-icon">🏷️</div>
                                <h3>No Entities Extracted</h3>
                                <p>Enter text and click Extract to identify named entities</p>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Sentiment Analysis Tab -->
                <section class="tab-content" id="sentiment-tab">
                    <div class="section-header">
                        <h2>Threat Sentiment Analysis</h2>
                        <p>Analyze sentiment of security communications and public disclosures</p>
                    </div>

                    <div class="analysis-container">
                        <div class="input-section">
                            <label for="sentimentInput">Enter text for sentiment analysis:</label>
                            <textarea id="sentimentInput" placeholder="Paste security communication or public statement..." rows="6"></textarea>
                            <div class="input-actions">
                                <button class="btn btn-primary" onclick="analyzeSentiment()" id="sentimentBtn">
                                    Analyze Sentiment
                                </button>
                            </div>
                        </div>

                        <div class="output-section" id="sentimentOutput">
                            <div class="empty-state">
                                <div class="empty-icon">πŸ“Š</div>
                                <h3>No Sentiment Analysis</h3>
                                <p>Enter text to analyze its sentiment and urgency level</p>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Summarize Tab -->
                <section class="tab-content" id="summarize-tab">
                    <div class="section-header">
                        <h2>Report Summarization</h2>
                        <p>Generate concise summaries of lengthy threat intelligence reports</p>
                    </div>

                    <div class="analysis-container">
                        <div class="input-section">
                            <label for="summaryInput">Enter long-form report text:</label>
                            <textarea id="summaryInput" placeholder="Paste a lengthy threat report or security advisory..." rows="10"></textarea>
                            <div class="input-actions">
                                <button class="btn btn-primary" onclick="summarizeReport()" id="summaryBtn">
                                    Generate Summary
                                </button>
                            </div>
                        </div>

                        <div class="output-section" id="summaryOutput">
                            <div class="empty-state">
                                <div class="empty-icon">πŸ“</div>
                                <h3>No Summary Generated</h3>
                                <p>Enter a report and click Generate to create a summary</p>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Classify Tab -->
                <section class="tab-content" id="classify-tab">
                    <div class="section-header">
                        <h2>Threat Classification</h2>
                        <p>Classify threats by type, severity, and category</p>
                    </div>

                    <div class="analysis-container">
                        <div class="input-section">
                            <label for="classifyInput">Enter threat description:</label>
                            <textarea id="classifyInput" placeholder="Describe a security threat or incident..." rows="6"></textarea>
                            <div class="input-actions">
                                <button class="btn btn-primary" onclick="classifyThreat()" id="classifyBtn">
                                    Classify Threat
                                </button>
                            </div>
                        </div>

                        <div class="output-section" id="classifyOutput">
                            <div class="empty-state">
                                <div class="empty-icon">πŸ“‚</div>
                                <h3>No Classification</h3>
                                <p>Enter a threat description to classify it</p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>

        <!-- Compliance Modal -->
        <div class="modal" id="complianceModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>πŸ›‘οΈ Compliance & Ethics Notice</h3>
                    <button class="modal-close" onclick="closeModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <p>This platform is designed exclusively for <strong>legitimate cybersecurity professionals</strong> operating within legal and ethical boundaries.</p>
                    <ul>
                        <li>βœ… Only analyze publicly available data</li>
                        <li>βœ… Maintain proper authorization for all activities</li>
                        <li>βœ… Comply with GDPR, CCPA, and local regulations</li>
                        <li>βœ… Respect privacy rights and data protection laws</li>
                        <li>❌ No unauthorized access to private systems</li>
                        <li>❌ No credential harvesting or exploitation</li>
                        <li>❌ No activities that violate applicable laws</li>
                    </ul>
                    <p class="warning">⚠️ All actions are logged for compliance auditing purposes.</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" onclick="acceptCompliance()">I Understand & Accept</button>
                </div>
            </div>
        </div>

        <!-- Progress Overlay -->
        <div class="progress-overlay hidden" id="progressOverlay">
            <div class="progress-card">
                <div class="progress-spinner"></div>
                <h3 id="progressTitle">Processing...</h3>
                <p id="progressText">AI model is analyzing your data</p>
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
            </div>
        </div>
    </div>

    <script type="module" src="index.js"></script>
</body>
</html>