Spaces:
Running
Running
File size: 6,437 Bytes
f49d1e7 b3dd2fc f49d1e7 b3dd2fc f49d1e7 b3dd2fc f49d1e7 b3dd2fc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Keys - 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="usage.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="activity" class="w-5 h-5 mr-3"></i>
Usage
</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="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">
<div class="flex items-center justify-between">
<h1 class="text-2xl font-semibold text-gray-900">API Keys</h1>
<button onclick="createNewKey()" class="bg-primary-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-primary-700 transition">
Create new key
</button>
</div>
</div>
<!-- Content -->
<div class="flex-1 overflow-auto p-6">
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="px-6 py-4 border-b border-gray-200">
<p class="text-gray-600">Manage your API keys for accessing the Wash API. Keep your keys secure and don't share them publicly.</p>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50 border-b border-gray-200">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Key</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Used</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody id="api-keys-table" class="bg-white divide-y divide-gray-200">
<!-- API keys will be populated here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="../components/logo-player.js"></script>
<script src="../script.js"></script>
<script src="api-keys.js"></script>
<script>feather.replace();</script>
</body>
</html>
|