170 lines
9.6 KiB
HTML
170 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AXHUB Gateway</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Geist', 'sans-serif'],
|
|
mono: ['Geist Mono', 'monospace']
|
|
},
|
|
colors: {
|
|
background: '#09090b', /* zinc-950 */
|
|
panel: '#18181b', /* zinc-900 */
|
|
foreground: '#f4f4f5', /* zinc-100 */
|
|
muted: '#a1a1aa', /* zinc-400 */
|
|
border: 'rgba(255,255,255,0.1)',
|
|
primary: '#3b82f6', /* blue-500 */
|
|
primaryHover: '#2563eb', /* blue-600 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: theme('colors.background');
|
|
color: theme('colors.foreground');
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Subtle radial background for depth */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: radial-gradient(circle at 50% -20%, rgba(59, 130, 246, 0.15), transparent 70%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.geist-mono { font-family: 'Geist Mono', monospace; }
|
|
|
|
.card-panel {
|
|
background: rgba(24, 24, 27, 0.7); /* zinc-900 with transparency */
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid theme('colors.border');
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.card-panel:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 20px -8px rgba(0,0,0,0.6), 0 0 15px rgba(59, 130, 246, 0.15), inset 0 1px 0 rgba(255,255,255,0.1);
|
|
border-color: rgba(255,255,255,0.2);
|
|
background: rgba(39, 39, 42, 0.8); /* zinc-800 */
|
|
}
|
|
|
|
.premium-text-gradient {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-image: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
|
|
}
|
|
|
|
.icon-box {
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card-panel:hover .icon-box {
|
|
background: rgba(59, 130, 246, 0.15);
|
|
border-color: rgba(59, 130, 246, 0.4);
|
|
color: #60a5fa; /* blue-400 */
|
|
box-shadow: 0 0 15px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen flex flex-col relative">
|
|
|
|
<!-- Header Navigation -->
|
|
<header class="border-b border-border sticky top-0 bg-background/80 backdrop-blur-xl z-50">
|
|
<div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
|
|
<div class="flex items-center space-x-5">
|
|
<div class="flex items-center">
|
|
<div class="w-2 h-2 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.8)] mr-2"></div>
|
|
<span class="font-semibold tracking-tight text-sm text-zinc-100">AXHUB Gateway</span>
|
|
</div>
|
|
<div class="h-4 w-px bg-white/10"></div>
|
|
<nav class="flex space-x-5 text-[13px] font-medium">
|
|
<a href="/admin/scaffold.html" class="text-zinc-400 hover:text-white transition-colors">Scaffold</a>
|
|
<a href="/catalog.html" class="text-zinc-400 hover:text-white transition-colors">Catalog</a>
|
|
<a href="/playground.html" class="text-zinc-400 hover:text-white transition-colors">Playground</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="text-[10px] uppercase tracking-widest bg-blue-500/10 text-blue-400 px-2 py-1 rounded font-bold border border-blue-500/20">v0.0.1</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-grow max-w-6xl mx-auto px-6 py-20 w-full flex flex-col items-center justify-center relative z-10">
|
|
|
|
<div class="text-center mb-20 max-w-2xl">
|
|
<div class="inline-flex items-center justify-center px-3 py-1 mb-6 text-xs font-medium rounded-full bg-white/5 border border-white/10 shadow-sm backdrop-blur-md">
|
|
<span class="flex w-2 h-2 rounded-full bg-blue-400 shadow-[0_0_5px_rgba(96,165,250,0.8)] mr-2 animate-pulse"></span>
|
|
<span class="text-zinc-300">System Operational</span>
|
|
</div>
|
|
<h1 class="text-5xl font-bold tracking-tight mb-6 premium-text-gradient leading-tight">AI Plugin Gateway</h1>
|
|
<p class="text-[15px] text-zinc-400 leading-relaxed max-w-lg mx-auto">
|
|
The central hub for managing, discovering, and testing AI tool integrations. High-performance tooling for the modern enterprise.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-5xl">
|
|
<!-- Scaffold Card -->
|
|
<a href="/admin/scaffold.html" class="card-panel p-8 group block">
|
|
<div class="w-12 h-12 icon-box rounded-xl flex items-center justify-center mb-6 text-zinc-300">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
|
|
</div>
|
|
<h2 class="text-lg font-semibold text-zinc-100 mb-3">Scaffold Tool</h2>
|
|
<p class="text-[13px] text-zinc-400 leading-relaxed">
|
|
Generate boilerplate code for new AI tool integrations automatically. Select a target module and build your plugin structure in seconds.
|
|
</p>
|
|
<div class="mt-6 flex items-center text-[12px] font-semibold text-zinc-300 group-hover:text-blue-400 group-hover:translate-x-1 transition-all">
|
|
Launch Scaffold <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Catalog Card -->
|
|
<a href="/catalog.html" class="card-panel p-8 group block">
|
|
<div class="w-12 h-12 icon-box rounded-xl flex items-center justify-center mb-6 text-zinc-300">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
|
|
</div>
|
|
<h2 class="text-lg font-semibold text-zinc-100 mb-3">Tool Catalog</h2>
|
|
<p class="text-[13px] text-zinc-400 leading-relaxed">
|
|
Browse all active tool integrations. View JSON schemas, parameters, and action prompts registered across the entire AXHUB ecosystem.
|
|
</p>
|
|
<div class="mt-6 flex items-center text-[12px] font-semibold text-zinc-300 group-hover:text-blue-400 group-hover:translate-x-1 transition-all">
|
|
View Catalog <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Playground Card -->
|
|
<a href="/playground.html" class="card-panel p-8 group block">
|
|
<div class="w-12 h-12 icon-box rounded-xl flex items-center justify-center mb-6 text-zinc-300">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
</div>
|
|
<h2 class="text-lg font-semibold text-zinc-100 mb-3">Playground</h2>
|
|
<p class="text-[13px] text-zinc-400 leading-relaxed">
|
|
Test and execute tools directly from the browser. Verify RPC calls, test inputs, and inspect raw JSON responses before using them in code.
|
|
</p>
|
|
<div class="mt-6 flex items-center text-[12px] font-semibold text-zinc-300 group-hover:text-blue-400 group-hover:translate-x-1 transition-all">
|
|
Enter Playground <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|