Hugging Face's logo

Spaces:
Stephansentamu
/
free-as-a-bird-api-explorer
Running

App Files Community
Stephansentamu commited on
Commit
ca94e02
·
verified ·
1 Parent(s): f79c08b

are you completely free to use ? unlimited usage ?

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +152 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Free As A Bird Api Explorer
3
- emoji: 🔥
4
- colorFrom: indigo
5
- colorTo: blue
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: Free As A Bird API Explorer 🕊️
3
+ colorFrom: blue
4
+ colorTo: gray
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).
index.html CHANGED
@@ -1,19 +1,153 @@
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>Free API Explorer</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/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <style>
12
+ #interactive-bg {
13
+ position: absolute;
14
+ width: 100%;
15
+ height: 100%;
16
+ z-index: -1;
17
+ top: 0;
18
+ left: 0;
19
+ }
20
+ .glass-card {
21
+ background: rgba(255, 255, 255, 0.1);
22
+ backdrop-filter: blur(10px);
23
+ -webkit-backdrop-filter: blur(10px);
24
+ border-radius: 20px;
25
+ border: 1px solid rgba(255, 255, 255, 0.18);
26
+ }
27
+ .api-card {
28
+ transition: all 0.3s ease;
29
+ }
30
+ .api-card:hover {
31
+ transform: translateY(-5px);
32
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="min-h-screen bg-gradient-to-br from-indigo-900 to-purple-900 text-white overflow-x-hidden">
37
+ <div id="interactive-bg"></div>
38
+
39
+ <header class="container mx-auto px-6 py-12">
40
+ <div class="flex flex-col items-center text-center">
41
+ <h1 class="text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">
42
+ Free As A Bird API Explorer
43
+ </h1>
44
+ <p class="text-xl text-gray-300 max-w-2xl mb-10">
45
+ Explore unlimited free APIs without restrictions. We're completely free and open for everyone!
46
+ </p>
47
+ <div class="glass-card p-4 rounded-full flex items-center shadow-lg">
48
+ <input type="text" placeholder="Search 1000+ free APIs..."
49
+ class="bg-transparent border-0 outline-none px-4 py-2 w-64 md:w-96 text-white placeholder-gray-300">
50
+ <button class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full">
51
+ <i data-feather="search"></i>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </header>
56
+
57
+ <main class="container mx-auto px-6 pb-20">
58
+ <section>
59
+ <h2 class="text-3xl font-semibold mb-8 text-center">Popular Free APIs</h2>
60
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
61
+ <!-- API Card 1 -->
62
+ <div class="api-card glass-card p-6 rounded-xl hover:shadow-xl">
63
+ <div class="flex items-center mb-4">
64
+ <div class="bg-blue-500 p-3 rounded-lg mr-4">
65
+ <i data-feather="cloud" class="text-white"></i>
66
+ </div>
67
+ <h3 class="text-xl font-semibold">Weather Data</h3>
68
+ </div>
69
+ <p class="text-gray-300 mb-4">Real-time weather forecasts for any location worldwide.</p>
70
+ <div class="flex justify-between items-center">
71
+ <span class="text-sm bg-green-500 bg-opacity-20 text-green-300 px-3 py-1 rounded-full">FREE</span>
72
+ <button class="text-blue-400 hover:text-blue-300 flex items-center">
73
+ Explore <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
74
+ </button>
75
+ </div>
76
+ </div>
77
+
78
+ <!-- API Card 2 -->
79
+ <div class="api-card glass-card p-6 rounded-xl hover:shadow-xl">
80
+ <div class="flex items-center mb-4">
81
+ <div class="bg-purple-500 p-3 rounded-lg mr-4">
82
+ <i data-feather="dollar-sign" class="text-white"></i>
83
+ </div>
84
+ <h3 class="text-xl font-semibold">Currency Exchange</h3>
85
+ </div>
86
+ <p class="text-gray-300 mb-4">Latest currency exchange rates with historical data.</p>
87
+ <div class="flex justify-between items-center">
88
+ <span class="text-sm bg-green-500 bg-opacity-20 text-green-300 px-3 py-1 rounded-full">FREE</span>
89
+ <button class="text-blue-400 hover:text-blue-300 flex items-center">
90
+ Explore <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
91
+ </button>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- API Card 3 -->
96
+ <div class="api-card glass-card p-6 rounded-xl hover:shadow-xl">
97
+ <div class="flex items-center mb-4">
98
+ <div class="bg-red-500 p-3 rounded-lg mr-4">
99
+ <i data-feather="map" class="text-white"></i>
100
+ </div>
101
+ <h3 class="text-xl font-semibold">Geolocation</h3>
102
+ </div>
103
+ <p class="text-gray-300 mb-4">Convert addresses to coordinates and vice versa.</p>
104
+ <div class="flex justify-between items-center">
105
+ <span class="text-sm bg-green-500 bg-opacity-20 text-green-300 px-3 py-1 rounded-full">FREE</span>
106
+ <button class="text-blue-400 hover:text-blue-300 flex items-center">
107
+ Explore <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+ </main>
114
+
115
+ <footer class="glass-card py-8 mt-12">
116
+ <div class="container mx-auto px-6 text-center">
117
+ <p class="text-gray-300 mb-4">
118
+ Yes! We're completely free and unlimited to use. Forever.
119
+ </p>
120
+ <div class="flex justify-center space-x-6">
121
+ <a href="#" class="text-gray-400 hover:text-white">
122
+ <i data-feather="github"></i>
123
+ </a>
124
+ <a href="#" class="text-gray-400 hover:text-white">
125
+ <i data-feather="twitter"></i>
126
+ </a>
127
+ <a href="#" class="text-gray-400 hover:text-white">
128
+ <i data-feather="mail"></i>
129
+ </a>
130
+ </div>
131
+ </div>
132
+ </footer>
133
+
134
+ <script>
135
+ // Initialize Vanta.js globe effect
136
+ VANTA.GLOBE({
137
+ el: "#interactive-bg",
138
+ mouseControls: true,
139
+ touchControls: true,
140
+ gyroControls: false,
141
+ minHeight: 200.00,
142
+ minWidth: 200.00,
143
+ scale: 1.00,
144
+ scaleMobile: 1.00,
145
+ color: 0x3a86ff,
146
+ backgroundColor: 0x0
147
+ });
148
+
149
+ // Initialize feather icons
150
+ feather.replace();
151
+ </script>
152
+ </body>
153
  </html>