anycoder-7dd378fe / index.html
mirxa2's picture
Upload index.html with huggingface_hub
d2ed9c8 verified
Raw
History Blame Contribute Delete
13.4 kB
<!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>