Hugging Face's logo

Spaces:
Kiru-13051
/
kelmoidai-genesis-cad-maestro
Running

App Files Community
Kiru-13051 commited on
Commit
ca80463
·
verified ·
1 Parent(s): d52fe87

connect the backend

Browse files
Files changed (2) hide show
  1. backend.html +149 -0
  2. generator.html +4 -1
backend.html ADDED
@@ -0,0 +1,149 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>KelmoidAI - Backend Connection</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .connection-card {
13
+ background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%);
14
+ }
15
+ .api-status.connected {
16
+ background-color: #10B981;
17
+ }
18
+ .api-status.disconnected {
19
+ background-color: #EF4444;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-900 text-gray-100">
24
+ <!-- Navigation -->
25
+ <nav class="bg-black bg-opacity-70 border-b border-gray-800 py-4 px-6">
26
+ <div class="flex justify-between items-center">
27
+ <a href="index.html" class="flex items-center space-x-2">
28
+ <i data-feather="box" class="w-6 h-6 text-blue-400"></i>
29
+ <span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">KelmoidAI</span>
30
+ </a>
31
+ <div class="flex items-center space-x-4">
32
+ <a href="generator.html" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg font-medium">
33
+ Generator
34
+ </a>
35
+ <a href="backend.html" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium">
36
+ Backend
37
+ </a>
38
+ <button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700">
39
+ <i data-feather="user" class="w-5 h-5"></i>
40
+ </button>
41
+ </div>
42
+ </div>
43
+ </nav>
44
+
45
+ <!-- Main Content -->
46
+ <div class="container mx-auto px-4 py-8">
47
+ <h1 class="text-3xl font-bold mb-8">Backend Connection</h1>
48
+
49
+ <div class="grid md:grid-cols-2 gap-8">
50
+ <!-- API Connection -->
51
+ <div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 border border-gray-700">
52
+ <h2 class="text-xl font-semibold mb-6">API Configuration</h2>
53
+ <div class="space-y-6">
54
+ <div>
55
+ <label class="block text-sm font-medium mb-2">API Endpoint</label>
56
+ <input type="text" placeholder="https://api.kelmoidai.com/v1"
57
+ class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
58
+ value="https://api.kelmoidai.com/v1">
59
+ </div>
60
+ <div>
61
+ <label class="block text-sm font-medium mb-2">API Key</label>
62
+ <input type="password" placeholder="Enter your API key"
63
+ class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
64
+ </div>
65
+ <div class="flex items-center justify-between">
66
+ <div class="flex items-center space-x-2">
67
+ <span class="w-3 h-3 rounded-full api-status disconnected"></span>
68
+ <span>Disconnected</span>
69
+ </div>
70
+ <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium">
71
+ Connect
72
+ </button>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Database Connection -->
78
+ <div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 border border-gray-700">
79
+ <h2 class="text-xl font-semibold mb-6">Database Connection</h2>
80
+ <div class="space-y-6">
81
+ <div class="grid grid-cols-2 gap-4">
82
+ <div>
83
+ <label class="block text-sm font-medium mb-2">Host</label>
84
+ <input type="text" placeholder="localhost"
85
+ class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
86
+ </div>
87
+ <div>
88
+ <label class="block text-sm font-medium mb-2">Port</label>
89
+ <input type="text" placeholder="5432"
90
+ class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
91
+ </div>
92
+ </div>
93
+ <div>
94
+ <label class="block text-sm font-medium mb-2">Database Name</label>
95
+ <input type="text" placeholder="kelmoidai_db"
96
+ class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
97
+ </div>
98
+ <div class="grid grid-cols-2 gap-4">
99
+ <div>
100
+ <label class="block text-sm font-medium mb-2">Username</label>
101
+ <input type="text" placeholder="admin"
102
+ class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
103
+ </div>
104
+ <div>
105
+ <label class="block text-sm font-medium mb-2">Password</label>
106
+ <input type="password" placeholder="password"
107
+ class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
108
+ </div>
109
+ </div>
110
+ <div class="flex justify-end">
111
+ <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium">
112
+ Test Connection
113
+ </button>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Connection Logs -->
120
+ <div class="mt-8 bg-gray-800 bg-opacity-70 rounded-xl p-6 border border-gray-700">
121
+ <h2 class="text-xl font-semibold mb-4">Connection Logs</h2>
122
+ <div class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto font-mono text-sm">
123
+ <div class="text-green-400">[2023-11-15 10:42:31] Initializing connection...</div>
124
+ <div class="text-yellow-400">[2023-11-15 10:42:32] Checking API credentials...</div>
125
+ <div class="text-red-400">[2023-11-15 10:42:33] Error: Invalid API key</div>
126
+ <div class="text-gray-400">[2023-11-15 10:42:34] Retrying connection...</div>
127
+ <div class="text-green-400">[2023-11-15 10:42:35] Database connection established</div>
128
+ <div class="text-yellow-400">[2023-11-15 10:42:36] Verifying permissions...</div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <script>
134
+ feather.replace();
135
+
136
+ // Simulate connection status
137
+ document.querySelector('.bg-blue-600').addEventListener('click', function() {
138
+ const status = document.querySelector('.api-status');
139
+ status.classList.remove('disconnected');
140
+ status.classList.add('connected');
141
+ status.nextElementSibling.textContent = 'Connected';
142
+
143
+ const logs = document.querySelector('.bg-gray-900');
144
+ logs.innerHTML += `<div class="text-green-400">[${new Date().toISOString()}] API connection established</div>`;
145
+ logs.scrollTop = logs.scrollHeight;
146
+ });
147
+ </script>
148
+ </body>
149
+ </html>
generator.html CHANGED
@@ -41,6 +41,9 @@
41
  <span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">KelmoidAI</span>
42
  </a>
43
  <div class="flex items-center space-x-4">
 
 
 
44
  <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium">
45
  Export <i data-feather="download" class="w-4 h-4 inline ml-1"></i>
46
  </button>
@@ -48,7 +51,7 @@
48
  <i data-feather="user" class="w-5 h-5"></i>
49
  </button>
50
  </div>
51
- </div>
52
  </nav>
53
 
54
  <!-- Main Content -->
 
41
  <span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">KelmoidAI</span>
42
  </a>
43
  <div class="flex items-center space-x-4">
44
+ <a href="backend.html" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg font-medium">
45
+ Backend
46
+ </a>
47
  <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium">
48
  Export <i data-feather="download" class="w-4 h-4 inline ml-1"></i>
49
  </button>
 
51
  <i data-feather="user" class="w-5 h-5"></i>
52
  </button>
53
  </div>
54
+ </div>
55
  </nav>
56
 
57
  <!-- Main Content -->