Hugging Face's logo

Spaces:
A634579
/
wash-dev-site
Running

App Files Community
wash-dev-site / components /usage.html
A634579's picture
A634579
logo
b3dd2fc verified
raw
history blame contribute delete
13.7 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Usage - Wash</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="../style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8'
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50">
<div class="flex h-screen">
<!-- Sidebar -->
<div class="w-64 bg-white border-r border-gray-200 flex flex-col">
<!-- Logo -->
<div class="p-6 border-b border-gray-200">
<logo-player></logo-player>
<div class="text-sm text-gray-500 mt-1">Clean docs for LLMs</div>
</div>
<!-- Navigation -->
<nav class="flex-1 p-4">
<ul class="space-y-2">
<li>
<a href="dashboard.html" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition">
<i data-feather="home" class="w-5 h-5 mr-3"></i>
Dashboard
</a>
</li>
<li>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-primary-600 bg-primary-50 rounded-md">
<i data-feather="activity" class="w-5 h-5 mr-3"></i>
Usage
</a>
</li>
<li>
<a href="api-keys.html" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition">
<i data-feather="key" class="w-5 h-5 mr-3"></i>
API Keys
</a>
</li>
<li>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition">
<i data-feather="credit-card" class="w-5 h-5 mr-3"></i>
Billing
</a>
</li>
<li>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition">
<i data-feather="file-text" class="w-5 h-5 mr-3"></i>
Logs
</a>
</li>
</ul>
</nav>
<!-- User info -->
<div class="p-4 border-t border-gray-200">
<div class="flex items-center">
<div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
<span class="text-primary-600 text-sm font-medium">JD</span>
</div>
<div class="ml-3">
<div class="text-sm font-medium text-gray-900">john@company.com</div>
<div class="text-xs text-gray-500">Starter Plan</div>
</div>
</div>
</div>
</div>
<!-- Main Panel -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top Bar -->
<div class="bg-white border-b border-gray-200 px-6 py-4">
<h1 class="text-2xl font-semibold text-gray-900">Usage Analytics</h1>
</div>
<!-- Content -->
<div class="flex-1 overflow-auto p-6">
<!-- Usage Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="p-2 bg-blue-100 rounded-lg">
<i data-feather="file-text" class="w-6 h-6 text-blue-600"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">Documents Processed</p>
<p class="text-2xl font-semibold text-gray-900">2,847</p>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="p-2 bg-green-100 rounded-lg">
<i data-feather="shield" class="w-6 h-6 text-green-600"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">Threats Removed</p>
<p class="text-2xl font-semibold text-gray-900">1,423</p>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="p-2 bg-yellow-100 rounded-lg">
<i data-feather="clock" class="w-6 h-6 text-yellow-600"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">Avg Processing Time</p>
<p class="text-2xl font-semibold text-gray-900">2.3s</p>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="flex items-center">
<div class="p-2 bg-purple-100 rounded-lg">
<i data-feather="database" class="w-6 h-6 text-purple-600"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-600">Data Cleaned</p>
<p class="text-2xl font-semibold text-gray-900">847 MB</p>
</div>
</div>
</div>
</div>
<!-- Usage Chart -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-8">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-semibold text-gray-900">Last 30 Days</h3>
</div>
<div class="p-6">
<canvas id="usage-chart" width="400" height="100"></canvas>
</div>
</div>
<!-- Threat Breakdown -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-semibold text-gray-900">Threat Types</h3>
</div>
<div class="p-6">
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 bg-red-500 rounded-full mr-3"></div>
<span class="text-sm text-gray-700">Zero-width characters</span>
</div>
<span class="text-sm font-medium text-gray-900">687</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 bg-yellow-500 rounded-full mr-3"></div>
<span class="text-sm text-gray-700">Embedded JavaScript</span>
</div>
<span class="text-sm font-medium text-gray-900">423</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 bg-blue-500 rounded-full mr-3"></div>
<span class="text-sm text-gray-700">LSB steganography</span>
</div>
<span class="text-sm font-medium text-gray-900">189</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
<span class="text-sm text-gray-700">VBA macros</span>
</div>
<span class="text-sm font-medium text-gray-900">124</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-semibold text-gray-900">File Types</h3>
</div>
<div class="p-6">
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<i data-feather="file-text" class="w-4 h-4 text-red-500 mr-3"></i>
<span class="text-sm text-gray-700">PDF</span>
</div>
<span class="text-sm font-medium text-gray-900">1,245</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<i data-feather="file-text" class="w-4 h-4 text-blue-500 mr-3"></i>
<span class="text-sm text-gray-700">DOCX</span>
</div>
<span class="text-sm font-medium text-gray-900">867</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<i data-feather="file-text" class="w-4 h-4 text-green-500 mr-3"></i>
<span class="text-sm text-gray-700">Images</span>
</div>
<span class="text-sm font-medium text-gray-900">432</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<i data-feather="file-text" class="w-4 h-4 text-purple-500 mr-3"></i>
<span class="text-sm text-gray-700">PPTX</span>
</div>
<span class="text-sm font-medium text-gray-900">203</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<i data-feather="file-text" class="w-4 h-4 text-gray-500 mr-3"></i>
<span class="text-sm text-gray-700">Other</span>
</div>
<span class="text-sm font-medium text-gray-900">100</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../components/logo-player.js"></script>
<script src="../script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="usage.js"></script>
<script>feather.replace();</script>
</body>
</html>