Hugging Face's logo

Spaces:
Vebera
/
cloudsaas-control-hub
Running

App Files Community
cloudsaas-control-hub / api-keys.html
Vebera's picture
Vebera
it has 2 avatars in the toolbar - not good
53554ff verified
Raw History Blame Contribute Delete
13.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Keys - CloudSaaS Control Hub</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
gray: {
900: '#0a0a0a',
800: '#1a1a1a',
700: '#2a2a2a',
600: '#3a3a3a',
500: '#6b7280',
400: '#9ca3af',
300: '#d1d5db',
200: '#e5e7eb',
100: '#f3f4f6',
50: '#f9fafb'
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white transition-colors">
<!-- Navigation -->
<nav class="glass-effect dark:bg-gray-800/50 fixed w-full z-50 top-0">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<a href="/index.html">
<i data-feather="cloud" class="w-8 h-8 text-purple-400"></i>
</a>
<a href="/index.html" class="text-2xl font-bold gradient-text dark:from-purple-400 dark:to-pink-400">CloudSaaS</a>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="/dashboard.html" class="hover:text-purple-400 transition">Dashboard</a>
<a href="/api-keys.html" class="text-purple-400 transition">API Keys</a>
<a href="/billing.html" class="hover:text-purple-400 transition">Billing</a>
<a href="/support.html" class="hover:text-purple-400 transition">Support</a>
</div>
<div class="flex items-center space-x-4">
<button class="relative">
<i data-feather="bell" class="w-6 h-6"></i>
<span class="absolute -top-1 -right-1 bg-red-500 text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</button>
<a href="/profile.html" class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center hover:scale-110 transition-transform">
<span class="text-sm font-bold">JD</span>
</a>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="pt-20 container mx-auto px-6">
<!-- Page Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold mb-2">API Keys</h1>
<p class="text-gray-600 dark:text-gray-400">Manage your API keys and access tokens.</p>
</div>
<!-- Generate New Key -->
<div class="glass-effect dark:bg-gray-800/50 rounded-xl p-6 mb-8">
<h2 class="text-xl font-semibold mb-4">Generate New API Key</h2>
<form class="space-y-4" id="generateKeyForm">
<div>
<label class="block text-sm font-medium mb-2">Key Name</label>
<input type="text" class="w-full px-4 py-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500" placeholder="My Application" required>
</div>
<div>
<label class="block text-sm font-medium mb-2">Permissions</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="mr-2" checked>
<span>Read data</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="mr-2" checked>
<span>Write data</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="mr-2">
<span>Delete data</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="mr-2" checked>
<span>Admin access</span>
</label>
</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">Expiration</label>
<select class="w-full px-4 py-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500">
<option>Never</option>
<option>30 days</option>
<option>90 days</option>
<option>1 year</option>
</select>
</div>
<button type="submit" class="bg-purple-600 hover:bg-purple-700 px-6 py-2 rounded-lg transition">
Generate Key
</button>
</form>
</div>
<!-- API Keys List -->
<div class="glass-effect dark:bg-gray-800/50 rounded-xl p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold">Your API Keys</h2>
<button class="text-purple-400 hover:text-purple-300">
<i data-feather="refresh-cw" class="w-5 h-5"></i>
</button>
</div>
<div class="space-y-4">
<!-- Key Item -->
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center space-x-3">
<i data-feather="key" class="w-5 h-5 text-purple-400"></i>
<span class="font-medium">Production API Key</span>
</div>
<div class="flex items-center space-x-2">
<span class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded">Active</span>
<button class="text-gray-400 hover:text-gray-300">
<i data-feather="more-vertical" class="w-4 h-4"></i>
</button>
</div>
</div>
<div class="flex items-center justify-between">
<code class="text-sm bg-gray-200 dark:bg-gray-800 px-3 py-1 rounded">sk_live_51H7qYK...4jX9s</code>
<button class="text-purple-400 hover:text-purple-300 text-sm">Copy</button>
</div>
<div class="mt-2 text-xs text-gray-600 dark:text-gray-400">
Created: Jan 15, 2024 • Last used: 2 hours ago • Never expires
</div>
</div>
<!-- Key Item -->
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center space-x-3">
<i data-feather="key" class="w-5 h-5 text-purple-400"></i>
<span class="font-medium">Development Key</span>
</div>
<div class="flex items-center space-x-2">
<span class="text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded">Expiring</span>
<button class="text-gray-400 hover:text-gray-300">
<i data-feather="more-vertical" class="w-4 h-4"></i>
</button>
</div>
</div>
<div class="flex items-center justify-between">
<code class="text-sm bg-gray-200 dark:bg-gray-800 px-3 py-1 rounded">sk_test_51H7qYK...9kL3m</code>
<button class="text-purple-400 hover:text-purple-300 text-sm">Copy</button>
</div>
<div class="mt-2 text-xs text-gray-600 dark:text-gray-400">
Created: Dec 1, 2023 • Last used: 1 day ago • Expires in 5 days
</div>
</div>
<!-- Key Item -->
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg opacity-50">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center space-x-3">
<i data-feather="key" class="w-5 h-5 text-gray-400"></i>
<span class="font-medium">Mobile App Key</span>
</div>
<div class="flex items-center space-x-2">
<span class="text-xs bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 px-2 py-1 rounded">Revoked</span>
<button class="text-gray-400 hover:text-gray-300">
<i data-feather="more-vertical" class="w-4 h-4"></i>
</button>
</div>
</div>
<div class="flex items-center justify-between">
<code class="text-sm bg-gray-200 dark:bg-gray-800 px-3 py-1 rounded">sk_live_51H8mNP...2kP7x</code>
<button class="text-gray-400 hover:text-gray-300 text-sm" disabled>Copy</button>
</div>
<div class="mt-2 text-xs text-gray-600 dark:text-gray-400">
Created: Nov 20, 2023 • Last used: Never • Revoked: Jan 10, 2024
</div>
</div>
</div>
</div>
<!-- API Documentation -->
<div class="glass-effect dark:bg-gray-800/50 rounded-xl p-6 mt-8">
<h2 class="text-xl font-semibold mb-4">API Documentation</h2>
<div class="space-y-4">
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg">
<h3 class="font-medium mb-2">Base URL</h3>
<code class="text-sm">https://api.cloudsaas.com/v1</code>
</div>
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg">
<h3 class="font-medium mb-2">Authentication</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Include your API key in the Authorization header:</p>
<code class="text-sm">Authorization: Bearer sk_live_...</code>
</div>
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg">
<h3 class="font-medium mb-2">Rate Limits</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Professional plan: 1000 requests per minute</p>
</div>
<a href="/docs.html" class="inline-flex items-center space-x-2 text-purple-400 hover:text-purple-300">
<span>View Full Documentation</span>
<i data-feather="external-link" class="w-4 h-4"></i>
</a>
</div>
</div>
</main>
<script>
// Theme toggle
const themeToggle = document.createElement('button');
themeToggle.innerHTML = '<i data-feather="sun" class="w-5 h-5"></i>';
themeToggle.className = 'fixed bottom-6 right-6 bg-purple-600 hover:bg-purple-700 p-3 rounded-full shadow-lg transition-all';
themeToggle.onclick = () => {
document.documentElement.classList.toggle('dark');
const isDark = document.documentElement.classList.contains('dark');
themeToggle.innerHTML = isDark ? '<i data-feather="moon" class="w-5 h-5"></i>' : '<i data-feather="sun" class="w-5 h-5"></i>';
localStorage.setItem('theme', isDark ? 'dark' : 'light');
feather.replace();
};
document.body.appendChild(themeToggle);
// Check saved theme
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
themeToggle.innerHTML = '<i data-feather="moon" class="w-5 h-5"></i>';
}
// Handle form submission
document.getElementById('generateKeyForm').addEventListener('submit', (e) => {
e.preventDefault();
alert('API key generated successfully! (This is a demo)');
});
// Initialize
document.addEventListener('DOMContentLoaded', () => {
feather.replace();
});
</script>
</body>
</html>