cosmic-code-oracle / index.html
KhawarAli12's picture
Ismein agar koi mistake to sab theek karte hain Kisi bhi engine mein ya Kisi program mein ise behtar kar jaaye<!DOCTYPE html>
8a7b868 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosmic Code Oracle</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
#vanta-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.glow {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.rotate {
animation: spin 10s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-black text-white">
<div id="vanta-bg"></div>
<div class="container mx-auto px-4 py-12 relative z-10">
<div class="text-center mb-12">
<h1 class="text-6xl font-bold mb-4">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500">
Cosmic Code Oracle
</span>
</h1>
<p class="text-xl text-gray-400 max-w-2xl mx-auto">
Harness the power of cosmic energy to predict your coding destiny. Our AI-powered oracle will guide your development journey.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Prediction Card -->
<div class="bg-gray-900/50 backdrop-blur-lg rounded-2xl p-6 glow">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold">Code Prediction</h2>
<i data-feather="code" class="text-purple-400"></i>
</div>
<p class="text-gray-400 mt-4">What does your code future hold?</p>
<div class="mt-6">
<textarea class="w-full bg-gray-800/30 border border-gray-700 rounded-lg p-3 text-white" rows="4" placeholder="Describe your current coding challenge..."></textarea>
<button class="mt-4 w-full bg-gradient-to-r from-purple-500 to-blue-600 text-white rounded-lg py-3 hover:opacity-90 transition-all">
Predict My Future
</button>
</div>
</div>
<!-- Wisdom Card -->
<div class="bg-gray-900/50 backdrop-blur-lg rounded-2xl p-6 glow">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold">Cosmic Wisdom</h2>
<i data-feather="zap" class="text-blue-400"></i>
</div>
<div class="mt-6 space-y-4">
<div class="flex items-center">
<div class="w-10 h-10 bg-gray-800/50 rounded-full flex items-center justify-center rotate">
<i data-feather="star" class="w-5 h-5 text-yellow-400"></i>
</div>
<div class="ml-4">
<h3 class="font-medium">JavaScript Insight</h3>
<p class="text-sm text-gray-400">Your async functions need more cosmic energy.</p>
</div>
</div>
<div class="flex items-center">
<div class="w-10 h-10 bg-gray-800/50 rounded-full flex items-center justify-center rotate">
<i data-feather="cpu" class="w-5 h-5 text-purple-400"></i>
</div>
<div class="ml-4">
<h3 class="font-medium">API Warning</h3>
<p class="text-sm text-gray-400">Your endpoints are in need of cosmic alignment.</p>
</div>
</div>
</div>
</div>
<!-- Divination Card -->
<div class="bg-gray-900/50 backdrop-blur-lg rounded-2xl p-6 glow">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold">Code Divination</h2>
<i data-feather="eye" class="text-pink-400"></i>
</div>
<div class="mt-6">
<div class="bg-gray-800/30 p-4 rounded-lg">
<div class="flex justify-center">
<div class="w-20 h-20 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full flex items-center justify-center rotate">
<i data-feather="search" class="w-8 h-8 text-white"></i>
</div>
</div>
<p class="text-center mt-4 text-sm text-gray-400">
Focus your mind and let the Oracle reveal your coding destiny.
</p>
</div>
<button class="mt-6 w-full bg-gradient-to-r from-pink-500 to-purple-600 text-white rounded-lg py-3 hover:opacity-90 transition-all">
Start Divination
</button>
</div>
</div>
</div>
</div>
<script>
feather.replace();
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3f00ff,
backgroundColor: 0x0,
size: 0.8
});
</script>
</body>
</html>