Upload 17 files

.dockerignore

@@ -0,0 +1,18 @@
+venv/
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+.git/
+.gitignore
+*.md
+.DS_Store
+.vscode/
+.idea/
+*.log
+.env
+node_modules/
+*.tmp
+*.temp
+

Dockerfile

@@ -0,0 +1,37 @@
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the application code
+COPY src/ ./src/
+
+# Create necessary directories
+RUN mkdir -p src/database
+
+# Set environment variables
+ENV FLASK_APP=src/main.py
+ENV FLASK_ENV=production
+ENV PYTHONPATH=/app
+
+# Expose port (Hugging Face Spaces uses port 7860)
+EXPOSE 7860
+
+# Create a non-root user for security
+RUN useradd -m -u 1000 appuser && chown -R appuser:appuser /app
+USER appuser
+
+# Command to run the application
+CMD ["python", "src/main.py"]
+

requirements.txt

@@ -0,0 +1,12 @@
+blinker==1.9.0
+click==8.2.1
+Flask==3.1.1
+flask-cors==6.0.0
+Flask-SQLAlchemy==3.1.1
+greenlet==3.2.3
+itsdangerous==2.2.0
+Jinja2==3.1.6
+MarkupSafe==3.0.2
+SQLAlchemy==2.0.41
+typing_extensions==4.14.0
+Werkzeug==3.1.3

src/main.py

@@ -0,0 +1,48 @@
+import os
+import sys
+# DON'T CHANGE THIS !!!
+sys.path.insert(0, os.path.dirname(os.path.dirname(__file__)))
+
+from flask import Flask, send_from_directory
+from flask_cors import CORS
+from src.models.user import db
+from src.routes.user import user_bp
+from src.routes.scanner import scanner_bp
+
+app = Flask(__name__, static_folder=os.path.join(os.path.dirname(__file__), 'static'))
+app.config['SECRET_KEY'] = 'asdf#FGSgvasgf$5$WGT'
+
+# Enable CORS for all routes
+CORS(app)
+
+app.register_blueprint(user_bp, url_prefix='/api')
+app.register_blueprint(scanner_bp, url_prefix='/api')
+
+# uncomment if you need to use database
+app.config['SQLALCHEMY_DATABASE_URI'] = f"sqlite:///{os.path.join(os.path.dirname(__file__), 'database', 'app.db')}"
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+db.init_app(app)
+with app.app_context():
+    db.create_all()
+
+@app.route('/', defaults={'path': ''})
+@app.route('/<path:path>')
+def serve(path):
+    static_folder_path = app.static_folder
+    if static_folder_path is None:
+            return "Static folder not configured", 404
+
+    if path != "" and os.path.exists(os.path.join(static_folder_path, path)):
+        return send_from_directory(static_folder_path, path)
+    else:
+        index_path = os.path.join(static_folder_path, 'index.html')
+        if os.path.exists(index_path):
+            return send_from_directory(static_folder_path, 'index.html')
+        else:
+            return "index.html not found", 404
+
+
+if __name__ == '__main__':
+    import os
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=False)

src/models/user.py

@@ -0,0 +1,18 @@
+from flask_sqlalchemy import SQLAlchemy
+
+db = SQLAlchemy()
+
+class User(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    email = db.Column(db.String(120), unique=True, nullable=False)
+
+    def __repr__(self):
+        return f'<User {self.username}>'
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'username': self.username,
+            'email': self.email
+        }

src/routes/scanner.py

@@ -0,0 +1,196 @@
+import socket
+import threading
+import time
+from flask import Blueprint, request, jsonify
+from flask_cors import cross_origin
+
+scanner_bp = Blueprint('scanner', __name__)
+
+class PortScanner:
+    def __init__(self, target_ip, start_port=1, end_port=1000, timeout=1, threads=100):
+        self.target_ip = target_ip
+        self.start_port = start_port
+        self.end_port = end_port
+        self.timeout = timeout
+        self.threads = threads
+        self.open_ports = []
+        self.lock = threading.Lock()
+        self.progress = 0
+        self.total_ports = end_port - start_port + 1
+        
+    def scan_port(self, port):
+        try:
+            sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+            sock.settimeout(self.timeout)
+            result = sock.connect_ex((self.target_ip, port))
+            
+            if result == 0:
+                # Try to get service name
+                try:
+                    service = socket.getservbyport(port)
+                except:
+                    service = "unknown"
+                
+                with self.lock:
+                    self.open_ports.append({
+                        'port': port,
+                        'service': service,
+                        'status': 'open'
+                    })
+            
+            sock.close()
+            
+        except Exception as e:
+            pass
+        
+        with self.lock:
+            self.progress += 1
+    
+    def scan_range(self, port_list):
+        for port in port_list:
+            self.scan_port(port)
+    
+    def start_scan(self):
+        ports = list(range(self.start_port, self.end_port + 1))
+        chunk_size = len(ports) // self.threads
+        
+        if chunk_size == 0:
+            chunk_size = 1
+        
+        threads = []
+        
+        for i in range(0, len(ports), chunk_size):
+            chunk = ports[i:i + chunk_size]
+            thread = threading.Thread(target=self.scan_range, args=(chunk,))
+            threads.append(thread)
+            thread.start()
+        
+        for thread in threads:
+            thread.join()
+        
+        return sorted(self.open_ports, key=lambda x: x['port'])
+
+# Global scanner instance for progress tracking
+current_scanner = None
+
+@scanner_bp.route('/scan', methods=['POST'])
+@cross_origin()
+def scan_ports():
+    global current_scanner
+    
+    try:
+        data = request.get_json()
+        
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+        
+        target_ip = data.get('ip')
+        start_port = int(data.get('start_port', 1))
+        end_port = int(data.get('end_port', 1000))
+        timeout = float(data.get('timeout', 1))
+        threads = int(data.get('threads', 100))
+        
+        if not target_ip:
+            return jsonify({'error': 'IP address is required'}), 400
+        
+        # Validate IP address
+        try:
+            socket.inet_aton(target_ip)
+        except socket.error:
+            return jsonify({'error': 'Invalid IP address format'}), 400
+        
+        # Validate port range
+        if start_port < 1 or end_port > 65535 or start_port > end_port:
+            return jsonify({'error': 'Invalid port range'}), 400
+        
+        # Limit port range for safety
+        if end_port - start_port > 10000:
+            return jsonify({'error': 'Port range too large (max 10000 ports)'}), 400
+        
+        current_scanner = PortScanner(target_ip, start_port, end_port, timeout, threads)
+        
+        start_time = time.time()
+        open_ports = current_scanner.start_scan()
+        end_time = time.time()
+        
+        scan_duration = round(end_time - start_time, 2)
+        
+        return jsonify({
+            'success': True,
+            'target_ip': target_ip,
+            'scan_range': f"{start_port}-{end_port}",
+            'open_ports': open_ports,
+            'total_open': len(open_ports),
+            'total_scanned': current_scanner.total_ports,
+            'scan_duration': scan_duration
+        })
+        
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@scanner_bp.route('/progress', methods=['GET'])
+@cross_origin()
+def get_progress():
+    global current_scanner
+    
+    if current_scanner is None:
+        return jsonify({'progress': 0, 'total': 0})
+    
+    return jsonify({
+        'progress': current_scanner.progress,
+        'total': current_scanner.total_ports,
+        'percentage': round((current_scanner.progress / current_scanner.total_ports) * 100, 2) if current_scanner.total_ports > 0 else 0
+    })
+
+@scanner_bp.route('/common-ports', methods=['GET'])
+@cross_origin()
+def get_common_ports():
+    common_ports = {
+        'web': [80, 443, 8080, 8443, 3000, 8000],
+        'mail': [25, 110, 143, 993, 995, 587],
+        'file': [21, 22, 23, 69, 115, 2049],
+        'database': [1433, 1521, 3306, 5432, 6379, 27017],
+        'remote': [22, 23, 3389, 5900, 5901],
+        'other': [53, 67, 68, 123, 161, 162, 389, 636, 1723]
+    }
+    
+    return jsonify(common_ports)
+
+@scanner_bp.route('/ping', methods=['POST'])
+@cross_origin()
+def ping_host():
+    try:
+        data = request.get_json()
+        target_ip = data.get('ip')
+        
+        if not target_ip:
+            return jsonify({'error': 'IP address is required'}), 400
+        
+        # Simple connectivity test using socket
+        try:
+            sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+            sock.settimeout(3)
+            result = sock.connect_ex((target_ip, 80))  # Try port 80
+            sock.close()
+            
+            if result == 0:
+                status = 'reachable'
+            else:
+                # Try another common port
+                sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+                sock.settimeout(3)
+                result = sock.connect_ex((target_ip, 443))  # Try port 443
+                sock.close()
+                status = 'reachable' if result == 0 else 'unreachable'
+                
+        except Exception:
+            status = 'unreachable'
+        
+        return jsonify({
+            'ip': target_ip,
+            'status': status
+        })
+        
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+

src/routes/user.py

@@ -0,0 +1,39 @@
+from flask import Blueprint, jsonify, request
+from src.models.user import User, db
+
+user_bp = Blueprint('user', __name__)
+
+@user_bp.route('/users', methods=['GET'])
+def get_users():
+    users = User.query.all()
+    return jsonify([user.to_dict() for user in users])
+
+@user_bp.route('/users', methods=['POST'])
+def create_user():
+    
+    data = request.json
+    user = User(username=data['username'], email=data['email'])
+    db.session.add(user)
+    db.session.commit()
+    return jsonify(user.to_dict()), 201
+
+@user_bp.route('/users/<int:user_id>', methods=['GET'])
+def get_user(user_id):
+    user = User.query.get_or_404(user_id)
+    return jsonify(user.to_dict())
+
+@user_bp.route('/users/<int:user_id>', methods=['PUT'])
+def update_user(user_id):
+    user = User.query.get_or_404(user_id)
+    data = request.json
+    user.username = data.get('username', user.username)
+    user.email = data.get('email', user.email)
+    db.session.commit()
+    return jsonify(user.to_dict())
+
+@user_bp.route('/users/<int:user_id>', methods=['DELETE'])
+def delete_user(user_id):
+    user = User.query.get_or_404(user_id)
+    db.session.delete(user)
+    db.session.commit()
+    return '', 204

src/static/index.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Port Scanner - Network Security Tool</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <div class="header-content">
+                <h1><i class="fas fa-network-wired"></i> Port Scanner</h1>
+                <p>Professional network port scanning tool</p>
+            </div>
+        </header>
+
+        <main class="main-content">
+            <div class="scanner-form">
+                <div class="form-group">
+                    <label for="target-ip">
+                        <i class="fas fa-globe"></i> Target IP Address
+                    </label>
+                    <input type="text" id="target-ip" placeholder="e.g., 192.168.1.1 or 8.8.8.8" required>
+                    <button id="ping-btn" class="ping-btn" title="Test connectivity">
+                        <i class="fas fa-satellite-dish"></i> Ping
+                    </button>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="start-port">
+                            <i class="fas fa-play"></i> Start Port
+                        </label>
+                        <input type="number" id="start-port" value="1" min="1" max="65535">
+                    </div>
+                    <div class="form-group">
+                        <label for="end-port">
+                            <i class="fas fa-stop"></i> End Port
+                        </label>
+                        <input type="number" id="end-port" value="1000" min="1" max="65535">
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="timeout">
+                            <i class="fas fa-clock"></i> Timeout (seconds)
+                        </label>
+                        <input type="number" id="timeout" value="1" min="0.1" max="10" step="0.1">
+                    </div>
+                    <div class="form-group">
+                        <label for="threads">
+                            <i class="fas fa-layer-group"></i> Threads
+                        </label>
+                        <input type="number" id="threads" value="100" min="1" max="500">
+                    </div>
+                </div>
+
+                <div class="preset-ports">
+                    <label>Quick Presets:</label>
+                    <div class="preset-buttons">
+                        <button class="preset-btn" data-start="1" data-end="1000">Common (1-1000)</button>
+                        <button class="preset-btn" data-start="1" data-end="65535">All Ports</button>
+                        <button class="preset-btn" data-start="80" data-end="443">Web (80-443)</button>
+                        <button class="preset-btn" data-start="20" data-end="25">FTP/SSH (20-25)</button>
+                    </div>
+                </div>
+
+                <button id="scan-btn" class="scan-btn">
+                    <i class="fas fa-search"></i> Start Scan
+                </button>
+            </div>
+
+            <div class="progress-section" id="progress-section" style="display: none;">
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progress-fill"></div>
+                </div>
+                <div class="progress-text" id="progress-text">Preparing scan...</div>
+            </div>
+
+            <div class="results-section" id="results-section" style="display: none;">
+                <div class="results-header">
+                    <h2><i class="fas fa-list-ul"></i> Scan Results</h2>
+                    <div class="results-summary" id="results-summary"></div>
+                </div>
+                
+                <div class="results-actions">
+                    <button id="export-btn" class="export-btn">
+                        <i class="fas fa-download"></i> Export Results
+                    </button>
+                    <button id="clear-btn" class="clear-btn">
+                        <i class="fas fa-trash"></i> Clear Results
+                    </button>
+                </div>
+
+                <div class="results-table-container">
+                    <table class="results-table" id="results-table">
+                        <thead>
+                            <tr>
+                                <th>Port</th>
+                                <th>Status</th>
+                                <th>Service</th>
+                                <th>Protocol</th>
+                            </tr>
+                        </thead>
+                        <tbody id="results-tbody">
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <div class="info-section">
+                <div class="info-card">
+                    <h3><i class="fas fa-info-circle"></i> About Port Scanning</h3>
+                    <p>Port scanning is a method for determining which ports on a network are open and could be receiving or sending data. This tool uses TCP connect scanning to test connectivity to specific ports on target systems.</p>
+                    
+                    <div class="common-ports">
+                        <h4>Common Ports:</h4>
+                        <div class="port-list">
+                            <span class="port-item">22 (SSH)</span>
+                            <span class="port-item">23 (Telnet)</span>
+                            <span class="port-item">25 (SMTP)</span>
+                            <span class="port-item">53 (DNS)</span>
+                            <span class="port-item">80 (HTTP)</span>
+                            <span class="port-item">110 (POP3)</span>
+                            <span class="port-item">143 (IMAP)</span>
+                            <span class="port-item">443 (HTTPS)</span>
+                            <span class="port-item">993 (IMAPS)</span>
+                            <span class="port-item">995 (POP3S)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <footer class="footer">
+            <p>&copy; 2024 Port Scanner Tool. Use responsibly and only on networks you own or have permission to test.</p>
+        </footer>
+    </div>
+
+    <div id="notification" class="notification"></div>
+
+    <script src="script.js"></script>
+</body>
+</html>
+

src/static/script.js

@@ -0,0 +1,302 @@
+class PortScanner {
+    constructor() {
+        this.isScanning = false;
+        this.progressInterval = null;
+        this.initializeEventListeners();
+    }
+
+    initializeEventListeners() {
+        // Form elements
+        this.targetIpInput = document.getElementById('target-ip');
+        this.startPortInput = document.getElementById('start-port');
+        this.endPortInput = document.getElementById('end-port');
+        this.timeoutInput = document.getElementById('timeout');
+        this.threadsInput = document.getElementById('threads');
+        
+        // Buttons
+        this.scanBtn = document.getElementById('scan-btn');
+        this.pingBtn = document.getElementById('ping-btn');
+        this.exportBtn = document.getElementById('export-btn');
+        this.clearBtn = document.getElementById('clear-btn');
+        
+        // Sections
+        this.progressSection = document.getElementById('progress-section');
+        this.resultsSection = document.getElementById('results-section');
+        
+        // Event listeners
+        this.scanBtn.addEventListener('click', () => this.startScan());
+        this.pingBtn.addEventListener('click', () => this.pingHost());
+        this.exportBtn.addEventListener('click', () => this.exportResults());
+        this.clearBtn.addEventListener('click', () => this.clearResults());
+        
+        // Preset buttons
+        document.querySelectorAll('.preset-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const start = e.target.dataset.start;
+                const end = e.target.dataset.end;
+                this.startPortInput.value = start;
+                this.endPortInput.value = end;
+            });
+        });
+        
+        // Form validation
+        this.targetIpInput.addEventListener('input', () => this.validateForm());
+        this.startPortInput.addEventListener('input', () => this.validateForm());
+        this.endPortInput.addEventListener('input', () => this.validateForm());
+    }
+
+    validateForm() {
+        const ip = this.targetIpInput.value.trim();
+        const startPort = parseInt(this.startPortInput.value);
+        const endPort = parseInt(this.endPortInput.value);
+        
+        let isValid = true;
+        
+        // IP validation
+        if (!ip || !this.isValidIP(ip)) {
+            isValid = false;
+        }
+        
+        // Port validation
+        if (startPort < 1 || endPort > 65535 || startPort > endPort) {
+            isValid = false;
+        }
+        
+        this.scanBtn.disabled = !isValid || this.isScanning;
+        return isValid;
+    }
+
+    isValidIP(ip) {
+        const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+        return ipRegex.test(ip);
+    }
+
+    async pingHost() {
+        const ip = this.targetIpInput.value.trim();
+        
+        if (!ip || !this.isValidIP(ip)) {
+            this.showNotification('Please enter a valid IP address', 'error');
+            return;
+        }
+        
+        this.pingBtn.disabled = true;
+        this.pingBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Pinging...';
+        
+        try {
+            const response = await fetch('/api/ping', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ ip: ip })
+            });
+            
+            const data = await response.json();
+            
+            if (response.ok) {
+                const status = data.status === 'reachable' ? 'Host is reachable' : 'Host appears unreachable';
+                const type = data.status === 'reachable' ? 'success' : 'error';
+                this.showNotification(status, type);
+            } else {
+                this.showNotification(data.error || 'Ping failed', 'error');
+            }
+        } catch (error) {
+            this.showNotification('Network error during ping', 'error');
+        } finally {
+            this.pingBtn.disabled = false;
+            this.pingBtn.innerHTML = '<i class="fas fa-satellite-dish"></i> Ping';
+        }
+    }
+
+    async startScan() {
+        if (!this.validateForm()) {
+            this.showNotification('Please check your input values', 'error');
+            return;
+        }
+        
+        const scanData = {
+            ip: this.targetIpInput.value.trim(),
+            start_port: parseInt(this.startPortInput.value),
+            end_port: parseInt(this.endPortInput.value),
+            timeout: parseFloat(this.timeoutInput.value),
+            threads: parseInt(this.threadsInput.value)
+        };
+        
+        // Check port range limit
+        const portRange = scanData.end_port - scanData.start_port + 1;
+        if (portRange > 10000) {
+            this.showNotification('Port range too large (max 10000 ports)', 'error');
+            return;
+        }
+        
+        this.isScanning = true;
+        this.scanBtn.disabled = true;
+        this.scanBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Scanning...';
+        
+        // Show progress section
+        this.progressSection.style.display = 'block';
+        this.resultsSection.style.display = 'none';
+        
+        // Start progress monitoring
+        this.startProgressMonitoring();
+        
+        try {
+            const response = await fetch('/api/scan', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(scanData)
+            });
+            
+            const data = await response.json();
+            
+            if (response.ok) {
+                this.displayResults(data);
+                this.showNotification(`Scan completed! Found ${data.total_open} open ports`, 'success');
+            } else {
+                this.showNotification(data.error || 'Scan failed', 'error');
+            }
+        } catch (error) {
+            this.showNotification('Network error during scan', 'error');
+        } finally {
+            this.stopProgressMonitoring();
+            this.isScanning = false;
+            this.scanBtn.disabled = false;
+            this.scanBtn.innerHTML = '<i class="fas fa-search"></i> Start Scan';
+            this.progressSection.style.display = 'none';
+        }
+    }
+
+    startProgressMonitoring() {
+        this.progressInterval = setInterval(async () => {
+            try {
+                const response = await fetch('/api/progress');
+                const data = await response.json();
+                
+                const progressFill = document.getElementById('progress-fill');
+                const progressText = document.getElementById('progress-text');
+                
+                progressFill.style.width = `${data.percentage}%`;
+                progressText.textContent = `Scanning... ${data.progress}/${data.total} ports (${data.percentage}%)`;
+            } catch (error) {
+                console.error('Error fetching progress:', error);
+            }
+        }, 500);
+    }
+
+    stopProgressMonitoring() {
+        if (this.progressInterval) {
+            clearInterval(this.progressInterval);
+            this.progressInterval = null;
+        }
+    }
+
+    displayResults(data) {
+        const resultsSection = document.getElementById('results-section');
+        const resultsSummary = document.getElementById('results-summary');
+        const resultsTableBody = document.getElementById('results-tbody');
+        
+        // Update summary
+        resultsSummary.innerHTML = `
+            <strong>Target:</strong> ${data.target_ip} | 
+            <strong>Range:</strong> ${data.scan_range} | 
+            <strong>Open Ports:</strong> ${data.total_open}/${data.total_scanned} | 
+            <strong>Duration:</strong> ${data.scan_duration}s
+        `;
+        
+        // Clear previous results
+        resultsTableBody.innerHTML = '';
+        
+        // Add results to table
+        if (data.open_ports && data.open_ports.length > 0) {
+            data.open_ports.forEach(port => {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td><strong>${port.port}</strong></td>
+                    <td><span class="status-${port.status}">${port.status.toUpperCase()}</span></td>
+                    <td>${port.service || 'unknown'}</td>
+                    <td>TCP</td>
+                `;
+                resultsTableBody.appendChild(row);
+            });
+        } else {
+            const row = document.createElement('tr');
+            row.innerHTML = '<td colspan="4" style="text-align: center; color: #666;">No open ports found</td>';
+            resultsTableBody.appendChild(row);
+        }
+        
+        // Show results section
+        resultsSection.style.display = 'block';
+        
+        // Store results for export
+        this.lastScanResults = data;
+    }
+
+    exportResults() {
+        if (!this.lastScanResults) {
+            this.showNotification('No results to export', 'error');
+            return;
+        }
+        
+        const data = this.lastScanResults;
+        let csvContent = 'Port,Status,Service,Protocol\n';
+        
+        if (data.open_ports && data.open_ports.length > 0) {
+            data.open_ports.forEach(port => {
+                csvContent += `${port.port},${port.status},${port.service || 'unknown'},TCP\n`;
+            });
+        }
+        
+        // Create and download file
+        const blob = new Blob([csvContent], { type: 'text/csv' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `port_scan_${data.target_ip}_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.csv`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+        
+        this.showNotification('Results exported successfully', 'success');
+    }
+
+    clearResults() {
+        this.resultsSection.style.display = 'none';
+        this.lastScanResults = null;
+        this.showNotification('Results cleared', 'info');
+    }
+
+    showNotification(message, type = 'info') {
+        const notification = document.getElementById('notification');
+        notification.textContent = message;
+        notification.className = `notification ${type}`;
+        notification.classList.add('show');
+        
+        setTimeout(() => {
+            notification.classList.remove('show');
+        }, 4000);
+    }
+}
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new PortScanner();
+});
+
+// Add some utility functions for better UX
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && e.target.tagName === 'INPUT') {
+        const scanner = new PortScanner();
+        if (scanner.validateForm()) {
+            scanner.startScan();
+        }
+    }
+});
+
+// Auto-focus on IP input when page loads
+window.addEventListener('load', () => {
+    document.getElementById('target-ip').focus();
+});
+

src/static/styles.css

@@ -0,0 +1,445 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    color: #333;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 40px;
+    color: white;
+}
+
+.header-content h1 {
+    font-size: 3rem;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.header-content p {
+    font-size: 1.2rem;
+    opacity: 0.9;
+}
+
+.main-content {
+    background: white;
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    margin-bottom: 30px;
+}
+
+.scanner-form {
+    margin-bottom: 30px;
+}
+
+.form-group {
+    margin-bottom: 25px;
+    position: relative;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: #555;
+    font-size: 1rem;
+}
+
+.form-group label i {
+    margin-right: 8px;
+    color: #667eea;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 15px;
+    border: 2px solid #e1e5e9;
+    border-radius: 10px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    background: #f8f9fa;
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: #667eea;
+    background: white;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+.ping-btn {
+    position: absolute;
+    right: 5px;
+    top: 35px;
+    background: #28a745;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+}
+
+.ping-btn:hover {
+    background: #218838;
+    transform: translateY(-2px);
+}
+
+.preset-ports {
+    margin-bottom: 30px;
+}
+
+.preset-ports label {
+    display: block;
+    margin-bottom: 15px;
+    font-weight: 600;
+    color: #555;
+}
+
+.preset-buttons {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.preset-btn {
+    background: #f8f9fa;
+    border: 2px solid #e1e5e9;
+    padding: 10px 20px;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+.preset-btn:hover {
+    background: #667eea;
+    color: white;
+    border-color: #667eea;
+    transform: translateY(-2px);
+}
+
+.scan-btn {
+    width: 100%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 18px;
+    border-radius: 12px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.scan-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+}
+
+.scan-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.progress-section {
+    margin: 30px 0;
+    text-align: center;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background: #e1e5e9;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 15px;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #667eea, #764ba2);
+    width: 0%;
+    transition: width 0.3s ease;
+    border-radius: 4px;
+}
+
+.progress-text {
+    font-size: 1rem;
+    color: #666;
+    font-weight: 500;
+}
+
+.results-section {
+    margin-top: 40px;
+}
+
+.results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 25px;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.results-header h2 {
+    color: #333;
+    font-size: 1.8rem;
+}
+
+.results-summary {
+    background: #f8f9fa;
+    padding: 15px 20px;
+    border-radius: 10px;
+    font-weight: 500;
+    color: #555;
+}
+
+.results-actions {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 25px;
+    flex-wrap: wrap;
+}
+
+.export-btn, .clear-btn {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.export-btn {
+    background: #28a745;
+    color: white;
+}
+
+.export-btn:hover {
+    background: #218838;
+    transform: translateY(-2px);
+}
+
+.clear-btn {
+    background: #dc3545;
+    color: white;
+}
+
+.clear-btn:hover {
+    background: #c82333;
+    transform: translateY(-2px);
+}
+
+.results-table-container {
+    overflow-x: auto;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.results-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: white;
+}
+
+.results-table th {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 15px;
+    text-align: left;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.results-table td {
+    padding: 15px;
+    border-bottom: 1px solid #e1e5e9;
+    transition: background 0.3s ease;
+}
+
+.results-table tbody tr:hover {
+    background: #f8f9fa;
+}
+
+.status-open {
+    color: #28a745;
+    font-weight: 600;
+}
+
+.status-closed {
+    color: #dc3545;
+    font-weight: 600;
+}
+
+.info-section {
+    margin-top: 40px;
+}
+
+.info-card {
+    background: #f8f9fa;
+    padding: 30px;
+    border-radius: 15px;
+    border-left: 5px solid #667eea;
+}
+
+.info-card h3 {
+    color: #333;
+    margin-bottom: 15px;
+    font-size: 1.4rem;
+}
+
+.info-card p {
+    color: #666;
+    line-height: 1.6;
+    margin-bottom: 20px;
+}
+
+.common-ports h4 {
+    color: #555;
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+}
+
+.port-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.port-item {
+    background: white;
+    padding: 8px 15px;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: #667eea;
+    border: 2px solid #e1e5e9;
+    transition: all 0.3s ease;
+}
+
+.port-item:hover {
+    background: #667eea;
+    color: white;
+    transform: translateY(-2px);
+}
+
+.footer {
+    text-align: center;
+    color: white;
+    opacity: 0.8;
+    font-size: 0.9rem;
+    margin-top: 30px;
+}
+
+.notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    padding: 15px 25px;
+    border-radius: 8px;
+    color: white;
+    font-weight: 500;
+    z-index: 1000;
+    transform: translateX(400px);
+    transition: transform 0.3s ease;
+    max-width: 300px;
+}
+
+.notification.show {
+    transform: translateX(0);
+}
+
+.notification.success {
+    background: #28a745;
+}
+
+.notification.error {
+    background: #dc3545;
+}
+
+.notification.info {
+    background: #17a2b8;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 15px;
+    }
+    
+    .header-content h1 {
+        font-size: 2rem;
+    }
+    
+    .main-content {
+        padding: 25px;
+    }
+    
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+    
+    .preset-buttons {
+        justify-content: center;
+    }
+    
+    .results-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .results-actions {
+        justify-content: center;
+    }
+    
+    .ping-btn {
+        position: static;
+        margin-top: 10px;
+        width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    .header-content h1 {
+        font-size: 1.8rem;
+    }
+    
+    .main-content {
+        padding: 20px;
+    }
+    
+    .results-table th,
+    .results-table td {
+        padding: 10px 8px;
+        font-size: 0.9rem;
+    }
+}
+