<!DOCTYPE html>
<html lang="en" class="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Wireshark MCP{% endblock %}</title>
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.5/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/dist/tippy.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
{% block head %}{% endblock %}
</head>
<body class="bg-gray-50 dark:bg-gray-900 dark:text-white transition-colors duration-300">
<!-- Toast Container -->
<div id="toast-container" class="fixed top-4 right-4 z-50"></div>
<!-- Navigation Bar -->
<nav class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-10 transition-colors duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<a href="{{ url_for('index') }}" class="flex items-center group">
<i class="bx bx-line-chart text-blue-600 text-3xl mr-2 group-hover:scale-110 transition-transform duration-200"></i>
<span class="font-bold text-xl text-gray-900 dark:text-white transition-colors duration-300">Wireshark MCP</span>
</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="{{ url_for('index') }}" class="border-transparent text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-white hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200">
<i class="bx bx-home-alt mr-1"></i> Home
</a>
</div>
</div>
<div class="flex items-center">
<!-- Dark mode toggle -->
<button id="dark-mode-toggle" class="dark-mode-toggle text-gray-500 dark:text-gray-300 mr-4 transition-colors duration-200 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
<i class="bx bx-moon moon text-xl"></i>
<i class="bx bx-sun sun text-xl hidden"></i>
</button>
<!-- Cleanup button -->
<form class="hidden sm:block" action="{{ url_for('cleanup') }}" method="post">
<button class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200" type="submit">
<i class="bx bx-trash mr-2"></i> Cleanup Old Files
</button>
</form>
<!-- Mobile menu button -->
<div class="sm:hidden flex items-center">
<button type="button" class="mobile-menu-button p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 transition-colors duration-200" aria-controls="mobile-menu" aria-expanded="false">
<i class="bx bx-menu text-2xl"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="sm:hidden hidden transition-all duration-300" id="mobile-menu">
<div class="pt-2 pb-3 space-y-1">
<a href="{{ url_for('index') }}" class="bg-gray-50 dark:bg-gray-700 border-blue-500 text-blue-700 dark:text-white block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200">
<i class="bx bx-home-alt mr-1"></i> Home
</a>
<form action="{{ url_for('cleanup') }}" method="post" class="block w-full">
<button class="w-full text-left text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium transition-colors duration-200" type="submit">
<i class="bx bx-trash mr-1"></i> Cleanup Old Files
</button>
</form>
</div>
</div>
</nav>
<!-- Flash messages -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="mb-4 rounded-md p-4 {% if category == 'error' %}bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400{% elif category == 'success' %}bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400{% else %}bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400{% endif %} fade-in">
<div class="flex">
<div class="flex-shrink-0">
{% if category == 'error' %}
<i class="bx bx-x-circle text-red-400 text-xl"></i>
{% elif category == 'success' %}
<i class="bx bx-check-circle text-green-400 text-xl"></i>
{% else %}
<i class="bx bx-info-circle text-blue-400 text-xl"></i>
{% endif %}
</div>
<div class="ml-3">
<p class="text-sm font-medium">{{ message }}</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex rounded-md p-1.5 {% if category == 'error' %}text-red-500 hover:bg-red-100 dark:hover:bg-red-800{% elif category == 'success' %}text-green-500 hover:bg-green-100 dark:hover:bg-green-800{% else %}text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-800{% endif %} focus:outline-none transition-colors duration-200">
<span class="sr-only">Dismiss</span>
<i class="bx bx-x text-xl"></i>
</button>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
<!-- Main content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
{% block content %}{% endblock %}
</main>
<!-- Footer -->
<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-12 transition-colors duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div class="flex flex-col sm:flex-row justify-between items-center">
<div class="mb-4 sm:mb-0">
<p class="text-sm text-gray-500 dark:text-gray-400 transition-colors duration-300">
© 2025 Wireshark MCP - Model Context Protocol
</p>
</div>
<div class="flex space-x-4">
<a href="https://github.com/sarthaksiddha/Wireshark-mcp" target="_blank" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200 flex items-center">
<i class="bx bxl-github text-xl"></i>
<span class="ml-1">GitHub</span>
</a>
<a href="https://claude.ai" target="_blank" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200 flex items-center">
<i class="bx bx-bot text-xl"></i>
<span class="ml-1">Claude AI</span>
</a>
</div>
</div>
</div>
</footer>
<!-- Include JavaScript libraries -->
<script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/dist/tippy-bundle.umd.min.js"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
<!-- Mobile menu script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
}
// Close alert buttons
document.querySelectorAll('.alert button').forEach(button => {
button.addEventListener('click', function() {
this.closest('.alert').remove();
});
});
});
</script>
{% block scripts %}{% endblock %}
</body>
</html>
