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