Spaces:
Running
Running
File size: 5,925 Bytes
8a7b868 52f883b | 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 | <!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>
|