Hugging Face's logo

Spaces:
Judemon
/
api-wizard-console-companion
Running

App Files Community
Judemon commited on
Commit
1d77260
·
verified ·
1 Parent(s): 158fc3b

Remodify to work with Google console , https://console.developers.google.com/apis

Browse files
Files changed (3) hide show
  1. README.md +8 -5
  2. console.html +43 -0
  3. index.html +232 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Api Wizard Console Companion
3
- emoji: 🏆
4
- colorFrom: yellow
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: API Wizard Console Companion 🧙
3
+ colorFrom: blue
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
console.html ADDED
@@ -0,0 +1,43 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Embedded Console - API Wizard</title>
7
+ <link rel="icon" type="image/x-icon" href="https://www.gstatic.com/devrel-devsite/prod/v45f61267e2282694b2d2f3e2e2ff6c1050b0b1a6ff5f8eb3c3cba3b6a0804a8/cloud/images/favicons/onecloud/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ .console-iframe {
12
+ height: calc(100vh - 64px);
13
+ }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-100">
17
+ <!-- Navigation -->
18
+ <nav class="gradient-bg text-white shadow-lg">
19
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
20
+ <div class="flex items-center space-x-4">
21
+ <i data-feather="cloud" class="w-8 h-8"></i>
22
+ <span class="text-xl font-bold">API Wizard</span>
23
+ </div>
24
+ <div class="hidden md:flex items-center space-x-8">
25
+ <a href="index.html" class="hover:text-yellow-200 transition">Home</a>
26
+ <a href="https://console.cloud.google.com/" class="hover:text-yellow-200 transition">Official Console</a>
27
+ </div>
28
+ <button class="md:hidden focus:outline-none">
29
+ <i data-feather="menu" class="w-6 h-6"></i>
30
+ </button>
31
+ </div>
32
+ </nav>
33
+
34
+ <!-- Embedded Console -->
35
+ <div class="w-full">
36
+ <iframe src="https://console.cloud.google.com/" frameborder="0" class="w-full console-iframe"></iframe>
37
+ </div>
38
+
39
+ <script>
40
+ feather.replace();
41
+ </script>
42
+ </body>
43
+ </html>
index.html CHANGED
@@ -1,19 +1,233 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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>API Wizard - Google Cloud Console Companion</title>
7
+ <link rel="icon" type="image/x-icon" href="https://www.gstatic.com/devrel-devsite/prod/v45f61267e2282694b2d2f3e2e2ff6c1050b0b1a6ff5f8eb3c3cba3b6a0804a8/cloud/images/favicons/onecloud/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/vanta@latest/dist/vanta.net.min.js"></script>
11
+ <style>
12
+ .gradient-bg {
13
+ background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC05 100%);
14
+ }
15
+ .console-card:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-50 min-h-screen" id="vanta-bg">
22
+ <!-- Navigation -->
23
+ <nav class="gradient-bg text-white shadow-lg">
24
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
25
+ <div class="flex items-center space-x-4">
26
+ <i data-feather="cloud" class="w-8 h-8"></i>
27
+ <span class="text-xl font-bold">API Wizard</span>
28
+ </div>
29
+ <div class="hidden md:flex items-center space-x-8">
30
+ <a href="https://console.cloud.google.com/" class="hover:text-yellow-200 transition">Console</a>
31
+ <a href="https://console.cloud.google.com/apis" class="hover:text-yellow-200 transition">APIs</a>
32
+ <a href="https://console.cloud.google.com/iam-admin/iam" class="hover:text-yellow-200 transition">IAM</a>
33
+ <a href="https://console.cloud.google.com/billing" class="hover:text-yellow-200 transition">Billing</a>
34
+ </div>
35
+ <button class="md:hidden focus:outline-none">
36
+ <i data-feather="menu" class="w-6 h-6"></i>
37
+ </button>
38
+ </div>
39
+ </nav>
40
+
41
+ <!-- Hero Section -->
42
+ <section class="gradient-bg text-white py-20">
43
+ <div class="container mx-auto px-6 text-center">
44
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Supercharge Your Google Cloud Console</h1>
45
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Your magical companion for navigating the Google Cloud API labyrinth with ease</p>
46
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
47
+ <a href="https://console.cloud.google.com/" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition flex items-center justify-center">
48
+ <i data-feather="log-in" class="mr-2"></i> Open Console
49
+ </a>
50
+ <a href="#features" class="bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition flex items-center justify-center">
51
+ <i data-feather="info" class="mr-2"></i> Learn More
52
+ </a>
53
+ </div>
54
+ </div>
55
+ </section>
56
+
57
+ <!-- Quick Links -->
58
+ <section class="py-16 bg-white">
59
+ <div class="container mx-auto px-6">
60
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Quick Access</h2>
61
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
62
+ <!-- API Dashboard -->
63
+ <a href="https://console.cloud.google.com/apis" class="console-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:border-blue-500 border-2 border-transparent">
64
+ <div class="text-blue-500 mb-4">
65
+ <i data-feather="cpu" class="w-10 h-10"></i>
66
+ </div>
67
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">API Dashboard</h3>
68
+ <p class="text-gray-600">View and manage all your enabled APIs</p>
69
+ </a>
70
+
71
+ <!-- Credentials -->
72
+ <a href="https://console.cloud.google.com/apis/credentials" class="console-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:border-green-500 border-2 border-transparent">
73
+ <div class="text-green-500 mb-4">
74
+ <i data-feather="key" class="w-10 h-10"></i>
75
+ </div>
76
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Credentials</h3>
77
+ <p class="text-gray-600">Manage API keys, OAuth clients & service accounts</p>
78
+ </a>
79
+
80
+ <!-- Quotas -->
81
+ <a href="https://console.cloud.google.com/apis/api/youtube.googleapis.com/quotas" class="console-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:border-yellow-500 border-2 border-transparent">
82
+ <div class="text-yellow-500 mb-4">
83
+ <i data-feather="bar-chart-2" class="w-10 h-10"></i>
84
+ </div>
85
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">Quotas</h3>
86
+ <p class="text-gray-600">Check and manage your API usage limits</p>
87
+ </a>
88
+
89
+ <!-- Library -->
90
+ <a href="https://console.cloud.google.com/apis/library" class="console-card bg-white rounded-xl shadow-md p-6 transition duration-300 hover:border-red-500 border-2 border-transparent">
91
+ <div class="text-red-500 mb-4">
92
+ <i data-feather="book-open" class="w-10 h-10"></i>
93
+ </div>
94
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">API Library</h3>
95
+ <p class="text-gray-600">Discover and enable new APIs</p>
96
+ </a>
97
+ </div>
98
+ </div>
99
+ </section>
100
+
101
+ <!-- Features Section -->
102
+ <section id="features" class="py-16 bg-gray-50">
103
+ <div class="container mx-auto px-6">
104
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Powerful Features</h2>
105
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
106
+ <div class="bg-white p-8 rounded-lg shadow-md">
107
+ <div class="text-blue-500 mb-4">
108
+ <i data-feather="zap" class="w-8 h-8"></i>
109
+ </div>
110
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Quick Navigation</h3>
111
+ <p class="text-gray-600">Direct links to all essential sections of the Google Cloud Console, saving you from endless menu hunting.</p>
112
+ </div>
113
+ <div class="bg-white p-8 rounded-lg shadow-md">
114
+ <div class="text-green-500 mb-4">
115
+ <i data-feather="search" class="w-8 h-8"></i>
116
+ </div>
117
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">API Search</h3>
118
+ <p class="text-gray-600">Quickly find the API you need with our enhanced search functionality (coming soon).</p>
119
+ </div>
120
+ <div class="bg-white p-8 rounded-lg shadow-md">
121
+ <div class="text-purple-500 mb-4">
122
+ <i data-feather="bell" class="w-8 h-8"></i>
123
+ </div>
124
+ <h3 class="text-xl font-semibold mb-3 text-gray-800">Usage Alerts</h3>
125
+ <p class="text-gray-600">Get notified when you're approaching your quota limits (coming soon).</p>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </section>
130
+
131
+ <!-- API Status -->
132
+ <section class="py-16 bg-white">
133
+ <div class="container mx-auto px-6">
134
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Google Cloud API Status</h2>
135
+ <div class="bg-gray-100 rounded-lg p-6">
136
+ <div class="flex justify-between items-center mb-4">
137
+ <h3 class="text-xl font-semibold">Current Status</h3>
138
+ <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium flex items-center">
139
+ <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
140
+ All Systems Operational
141
+ </span>
142
+ </div>
143
+ <p class="text-gray-600 mb-6">Last checked: <span id="status-time" class="font-medium">Just now</span></p>
144
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
145
+ <div class="bg-white p-4 rounded-lg shadow">
146
+ <div class="flex items-center">
147
+ <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
148
+ <span class="font-medium">Compute Engine</span>
149
+ </div>
150
+ </div>
151
+ <div class="bg-white p-4 rounded-lg shadow">
152
+ <div class="flex items-center">
153
+ <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
154
+ <span class="font-medium">Cloud Storage</span>
155
+ </div>
156
+ </div>
157
+ <div class="bg-white p-4 rounded-lg shadow">
158
+ <div class="flex items-center">
159
+ <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
160
+ <span class="font-medium">BigQuery</span>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="mt-6 text-center">
165
+ <a href="https://status.cloud.google.com/" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
166
+ View detailed status <i data-feather="external-link" class="ml-1 w-4 h-4"></i>
167
+ </a>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- Footer -->
174
+ <footer class="gradient-bg text-white py-12">
175
+ <div class="container mx-auto px-6">
176
+ <div class="flex flex-col md:flex-row justify-between items-center">
177
+ <div class="mb-6 md:mb-0">
178
+ <div class="flex items-center space-x-2">
179
+ <i data-feather="cloud" class="w-8 h-8"></i>
180
+ <span class="text-xl font-bold">API Wizard</span>
181
+ </div>
182
+ <p class="mt-2 text-blue-100">Your Google Cloud Console companion</p>
183
+ </div>
184
+ <div class="flex flex-col md:flex-row md:space-x-8 space-y-4 md:space-y-0">
185
+ <div>
186
+ <h4 class="text-lg font-semibold mb-2">Resources</h4>
187
+ <ul class="space-y-2">
188
+ <li><a href="https://cloud.google.com/docs" class="text-blue-100 hover:text-white transition">Documentation</a></li>
189
+ <li><a href="https://cloud.google.com/blog" class="text-blue-100 hover:text-white transition">Blog</a></li>
190
+ <li><a href="https://cloud.google.com/terms" class="text-blue-100 hover:text-white transition">Terms</a></li>
191
+ </ul>
192
+ </div>
193
+ <div>
194
+ <h4 class="text-lg font-semibold mb-2">Support</h4>
195
+ <ul class="space-y-2">
196
+ <li><a href="https://cloud.google.com/support" class="text-blue-100 hover:text-white transition">Help Center</a></li>
197
+ <li><a href="https://cloud.google.com/community" class="text-blue-100 hover:text-white transition">Community</a></li>
198
+ </ul>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ <div class="border-t border-blue-400 mt-8 pt-8 text-center text-blue-100">
203
+ <p>© 2023 API Wizard. Not affiliated with Google LLC.</p>
204
+ </div>
205
+ </div>
206
+ </footer>
207
+
208
+ <script>
209
+ // Initialize Vanta.js background
210
+ VANTA.NET({
211
+ el: "#vanta-bg",
212
+ mouseControls: true,
213
+ touchControls: true,
214
+ gyroControls: false,
215
+ minHeight: 200.00,
216
+ minWidth: 200.00,
217
+ scale: 1.00,
218
+ scaleMobile: 1.00,
219
+ color: 0x4285f4,
220
+ backgroundColor: 0xf8fafc,
221
+ points: 10.00,
222
+ maxDistance: 22.00,
223
+ spacing: 17.00
224
+ });
225
+
226
+ // Update status time
227
+ document.getElementById('status-time').textContent = new Date().toLocaleString();
228
+
229
+ // Initialize feather icons
230
+ feather.replace();
231
+ </script>
232
+ </body>
233
  </html>