Upload 5 files

.gitattributes

@@ -1 +1,3 @@
 cve.csv filter=lfs diff=lfs merge=lfs -text
+static/images/0a2bb152-857c-401e-bb73-5db2a519ce4d.png filter=lfs diff=lfs merge=lfs -text
+static/images/ChatGPT[[:space:]]Image[[:space:]]Apr[[:space:]]11,[[:space:]]2025,[[:space:]]12_14_37[[:space:]]PM.png filter=lfs diff=lfs merge=lfs -text

static/background.js

@@ -0,0 +1,45 @@
+// Create binary code columns in the background
+document.addEventListener('DOMContentLoaded', function() {
+    createBinaryBackground();
+});
+
+function createBinaryBackground() {
+    const container = document.body;
+    const numColumns = 15; // Number of binary columns to create
+    
+    for (let i = 0; i < numColumns; i++) {
+        const column = document.createElement('div');
+        column.className = 'binary-column';
+        
+        // Random position
+        column.style.left = `${Math.random() * 100}%`;
+        
+        // Random animation duration between 10-30s
+        const duration = 10 + Math.random() * 20;
+        column.style.animation = `binary-flow ${duration}s linear infinite`;
+        
+        // Random delay so they don't all start at once
+        column.style.animationDelay = `${Math.random() * 10}s`;
+        
+        // Generate binary content
+        column.innerHTML = generateBinaryString();
+        
+        container.appendChild(column);
+    }
+}
+
+function generateBinaryString() {
+    let result = '';
+    const length = 50 + Math.floor(Math.random() * 100); // Random length between 50-150 characters
+    
+    for (let i = 0; i < length; i++) {
+        // Mostly 0s and 1s, but occasionally add a CVE reference
+        if (Math.random() < 0.01) {
+            result += '<span style="color: rgba(0, 188, 212, 0.3);">CVE</span><br>';
+        } else {
+            result += Math.round(Math.random()) + '<br>';
+        }
+    }
+    
+    return result;
+}

static/style.css

@@ -0,0 +1,310 @@
+body {
+    margin: 0;
+    font-family: 'Segoe UI', sans-serif;
+    background-color: #0a0e14;
+    color: #ffffff;
+    background-image: 
+        linear-gradient(rgba(10, 14, 20, 0.85), rgba(10, 14, 20, 0.85)),
+        url('../static/images/ChatGPT Image Apr 11, 2025, 12_14_37 PM.png');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    position: relative;
+    height: 100vh;
+    overflow: hidden;
+}
+
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(circle at 70% 50%, rgba(0, 188, 212, 0.05) 0%, transparent 70%),
+        linear-gradient(0deg, transparent 90%, rgba(0, 188, 212, 0.05) 100%),
+        linear-gradient(90deg, transparent 90%, rgba(0, 188, 212, 0.05) 100%);
+    pointer-events: none;
+    z-index: -1;
+}
+
+body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        repeating-linear-gradient(0deg, rgba(0, 188, 212, 0.03) 0, rgba(0, 188, 212, 0.03) 1px, transparent 1px, transparent 30px),
+        repeating-linear-gradient(90deg, rgba(0, 188, 212, 0.03) 0, rgba(0, 188, 212, 0.03) 1px, transparent 1px, transparent 30px);
+    pointer-events: none;
+    z-index: -1;
+}
+
+.chat-container {
+    max-width: 700px;
+    margin: 0 auto;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    backdrop-filter: blur(5px);
+    background-color: rgba(14, 22, 33, 0.7);
+    box-shadow: 0 0 20px rgba(0, 188, 212, 0.1);
+    border-left: 1px solid rgba(0, 188, 212, 0.1);
+    border-right: 1px solid rgba(0, 188, 212, 0.1);
+}
+
+header {
+    background-color: rgba(30, 42, 56, 0.8);
+    padding: 20px;
+    text-align: center;
+    font-size: 24px;
+    border-bottom: 1px solid #2a3b4d;
+    position: relative;
+    text-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
+    font-weight: bold;
+    letter-spacing: 2px;
+    flex-shrink: 0; /* Prevent header from shrinking */
+}
+
+header::before {
+    content: '🔒';
+    margin-right: 10px;
+    font-size: 20px;
+}
+
+.chat-box {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    scrollbar-width: thin;
+    scrollbar-color: #00bcd4 #1e2a38;
+    scroll-behavior: smooth;
+    /* Ensure all messages are preserved */
+    min-height: 0;
+}
+
+/* Customize scrollbar for WebKit browsers */
+.chat-box::-webkit-scrollbar {
+    width: 8px;
+}
+
+.chat-box::-webkit-scrollbar-track {
+    background: #1e2a38;
+}
+
+.chat-box::-webkit-scrollbar-thumb {
+    background-color: #00bcd4;
+    border-radius: 10px;
+}
+
+.bot-message, .user-message {
+    display: flex;
+    flex-direction: column;
+    max-width: 80%;
+}
+
+.bot-message .bubble {
+    background-color: rgba(42, 59, 77, 0.9);
+    align-self: flex-start;
+    border-left: 3px solid #00bcd4;
+}
+
+.user-message .bubble {
+    background-color: rgba(0, 188, 212, 0.8);
+    align-self: flex-end;
+    color: #000;
+    border-right: 3px solid #0097a7;
+}
+
+.bubble {
+    padding: 12px 16px;
+    border-radius: 10px;
+    font-size: 16px;
+    position: relative;
+    white-space: pre-wrap;
+    overflow-x: hidden;        /* Prevent horizontal scroll */
+    word-wrap: break-word;     /* Break long words */
+    max-width: 100%;           /* Ensure it doesn't stretch */
+    box-sizing: border-box;    /* Include padding in width */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.time {
+    font-size: 12px;
+    color: #aaa;
+    margin-top: 4px;
+    align-self: flex-end;
+}
+
+.input-area {
+    display: flex;
+    padding: 10px;
+    background-color: rgba(30, 42, 56, 0.9);
+    border-top: 1px solid #2a3b4d;
+    flex-shrink: 0; /* Prevent input area from shrinking */
+}
+
+.input-area input {
+    flex: 1;
+    padding: 12px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px 0 0 5px;
+    outline: none;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #fff;
+}
+
+.input-area input::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.input-area button {
+    padding: 12px 20px;
+    font-size: 16px;
+    background-color: #00bcd4;
+    border: none;
+    border-radius: 0 5px 5px 0;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.input-area button:hover {
+    background-color: #0097a7;
+}
+
+/* Markdown formatting */
+.answer-content h1,
+.answer-content h2,
+.answer-content strong {
+    font-weight: bold;
+    color: #00bcd4;
+}
+
+.answer-content ul, .answer-content ol {
+    padding-left: 20px;
+    margin: 10px 0;
+}
+
+.answer-content li {
+    margin-bottom: 6px;
+}
+
+.answer-content {
+    overflow-x: auto;
+    max-width: 100%;
+    word-wrap: break-word;
+}
+
+/* Copy button */
+.copy-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: none;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    color: #bbb;
+    transition: color 0.2s ease;
+}
+
+.copy-btn:hover {
+    color: #fff;
+}
+
+/* Typing dots animation */
+.typing-indicator {
+    display: flex;
+    flex-direction: column;
+    max-width: 80%;
+    align-self: flex-start;
+    margin-bottom: 10px;
+}
+
+.typing-indicator .bubble {
+    background-color: rgba(42, 59, 77, 0.9);
+    padding: 12px 16px;
+    border-radius: 10px;
+    font-size: 20px;
+    color: #ccc;
+    font-weight: bold;
+    border-left: 3px solid #00bcd4;
+}
+
+.dots {
+    display: flex;
+    gap: 4px;
+}
+
+.dots span {
+    animation: bounce 1.2s infinite;
+    font-size: 22px;
+    opacity: 0.5;
+}
+
+.dots span:nth-child(1) { animation-delay: 0s; }
+.dots span:nth-child(2) { animation-delay: 0.2s; }
+.dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes bounce {
+    0%, 80%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-6px); }
+}
+
+/* Binary code animation in background */
+@keyframes binary-flow {
+    0% { opacity: 0; transform: translateY(-100%); }
+    10% { opacity: 0.3; }
+    90% { opacity: 0.3; }
+    100% { opacity: 0; transform: translateY(100%); }
+}
+
+.binary-column {
+    position: fixed;
+    color: rgba(0, 188, 212, 0.15);
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 1;
+    white-space: nowrap;
+    z-index: -2;
+    user-select: none;
+    pointer-events: none;
+}
+
+/* Clear button */
+.clear-btn {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: rgba(0, 188, 212, 0.2);
+    color: #fff;
+    border: 1px solid rgba(0, 188, 212, 0.5);
+    border-radius: 4px;
+    padding: 6px 12px;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.clear-btn::before {
+    content: '\1F5D1';
+    font-size: 14px;
+}
+
+.clear-btn:hover {
+    background-color: rgba(0, 188, 212, 0.4);
+    box-shadow: 0 0 10px rgba(0, 188, 212, 0.3);
+}

templates/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>CVElytics - Cybersecurity Vulnerability Assistant</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script src="{{ url_for('static', filename='background.js') }}"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+    <div class="chat-container">
+        <header>
+            CVElytics <span style="font-size: 14px; opacity: 0.7;">Vulnerability Intelligence</span>
+            <a href="/clear" class="clear-btn">Clear</a>
+        </header>
+
+        <div class="chat-box" id="chat-box">
+            {% for msg in chat_history %}
+                {% if msg.role == 'user' %}
+                    <div class="user-message">
+                        <div class="bubble user">{{ msg.text }}</div>
+                        <span class="time">Now</span>
+                    </div>
+                {% else %}
+                    <div class="bot-message">
+                        <div class="bubble bot">
+                            <div class="answer-content">{{ msg.text|safe }}</div>
+                            <button class="copy-btn" onclick="copyToClipboard(this)">📋</button>
+                        </div>
+                        <span class="time">Now</span>
+                    </div>
+                {% endif %}
+            {% endfor %}
+
+            <!-- Typing animation inside the chat flow -->
+            <div class="bot-message typing-indicator" id="typing" style="display: none;">
+                <div class="bubble bot">
+                    <div class="dots">
+                        <span>.</span><span>.</span><span>.</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <form method="POST" class="input-area" onsubmit="showTyping()">
+            <input type="text" name="question" placeholder="Ask about cybersecurity vulnerabilities..." required>
+            <button type="submit">Send</button>
+        </form>
+    </div>
+
+    <script>
+    // Scroll to bottom of chat on page load
+    document.addEventListener('DOMContentLoaded', function() {
+        scrollToBottom();
+    });
+    
+    function copyToClipboard(btn) {
+        const content = btn.previousElementSibling.innerText;
+        navigator.clipboard.writeText(content).then(() => {
+            btn.innerText = '✅';
+            setTimeout(() => { btn.innerText = '📋'; }, 2000);
+        });
+    }
+
+    function showTyping() {
+        const typingIndicator = document.getElementById("typing");
+        typingIndicator.style.display = "flex";
+        scrollToBottom();
+    }
+    
+    function scrollToBottom() {
+        const chatBox = document.getElementById("chat-box");
+        chatBox.scrollTop = chatBox.scrollHeight;
+    }
+    </script>
+</body>
+</html>