File size: 8,070 Bytes
baa5998 deb6c0a baa5998 e6a3a62 deb6c0a baa5998 deb6c0a 735a3ec baa5998 99ffed3 baa5998 deb6c0a 735a3ec baa5998 99ffed3 baa5998 deb6c0a 735a3ec baa5998 99ffed3 baa5998 deb6c0a 735a3ec baa5998 99ffed3 735a3ec baa5998 735a3ec baa5998 735a3ec deb6c0a baa5998 735a3ec baa5998 735a3ec baa5998 b0fa3c0 baa5998 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Probability Paradox</title>
<link rel="stylesheet" href="style.css">
<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://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-12">
<div id="vanta-bg" class="absolute top-0 left-0 w-full h-full z-0"></div>
<div class="relative z-10 max-w-4xl mx-auto">
<div class="text-center mb-16">
<h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600" data-i18n="title">
Probability Paradox
</h1>
<p class="text-xl text-gray-300" data-i18n="subtitle">Which improbable dream is slightly more probable?</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<!-- Option Cards -->
<div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg rounded-xl p-6 border border-gray-700 hover:border-pink-500 transition-all duration-300 hover:shadow-lg hover:shadow-pink-500/20">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center mr-4">
<span class="text-xl font-bold">A</span>
</div>
<h3 class="text-2xl font-semibold" data-i18n="author">Bestselling Author</h3>
</div>
<p class="text-gray-300 mb-6" data-i18n="author-desc"></p>
<div class="bg-gray-700 rounded-full h-4 mb-2">
<div class="bg-purple-500 h-4 rounded-full" style="width: 0.5%"></div>
</div>
<p class="text-sm text-gray-400"><span data-i18n="probability">Estimated probability</span>: ~0.5%</p>
</div>
<div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg rounded-xl p-6 border border-gray-700 hover:border-blue-500 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center mr-4">
<span class="text-xl font-bold">B</span>
</div>
<h3 class="text-2xl font-semibold" data-i18n="ai-engineer">AGI Engineer</h3>
</div>
<p class="text-gray-300 mb-6" data-i18n="ai-desc"></p>
<div class="bg-gray-700 rounded-full h-4 mb-2">
<div class="bg-blue-500 h-4 rounded-full" style="width: 0.3%"></div>
</div>
<p class="text-sm text-gray-400">Estimated probability: ~0.3%</p>
</div>
<div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg rounded-xl p-6 border border-gray-700 hover:border-yellow-500 transition-all duration-300 hover:shadow-lg hover:shadow-yellow-500/20">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-yellow-500 flex items-center justify-center mr-4">
<span class="text-xl font-bold">C</span>
</div>
<h3 class="text-2xl font-semibold" data-i18n="crypto">Crypto Millionaire</h3>
</div>
<p class="text-gray-300 mb-6" data-i18n="crypto-desc"></p>
<div class="bg-gray-700 rounded-full h-4 mb-2">
<div class="bg-yellow-500 h-4 rounded-full" style="width: 0.1%"></div>
</div>
<p class="text-sm text-gray-400">Estimated probability: ~0.1%</p>
</div>
<div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg rounded-xl p-6 border border-gray-700 hover:border-red-500 transition-all duration-300 hover:shadow-lg hover:shadow-red-500/20">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center mr-4">
<span class="text-xl font-bold">D</span>
</div>
<h3 class="text-2xl font-semibold" data-i18n="hacker">Bitcoin Hacker</h3>
</div>
<p class="text-gray-300 mb-6" data-i18n="hacker-desc"></p>
<div class="bg-gray-700 rounded-full h-4 mb-2">
<div class="bg-red-500 h-4 rounded-full" style="width: 0.001%"></div>
</div>
<p class="text-sm text-gray-400">Estimated probability: ~0.001%</p>
</div>
<div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg rounded-xl p-6 border border-gray-700 hover:border-green-500 transition-all duration-300 hover:shadow-lg hover:shadow-green-500/20 md:col-span-2">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center mr-4">
<span class="text-xl font-bold">E</span>
</div>
<h3 class="text-2xl font-semibold" data-i18n="sugar">Sugar Baby Billionaire</h3>
</div>
<p class="text-gray-300 mb-6" data-i18n="sugar-desc"></p>
<div class="bg-gray-700 rounded-full h-4 mb-2">
<div class="bg-green-500 h-4 rounded-full" style="width: 0.01%"></div>
</div>
<p class="text-sm text-gray-400">Estimated probability: ~0.01%</p>
</div>
</div>
<div class="mt-16 bg-gray-800 bg-opacity-70 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
<h2 class="text-2xl font-bold mb-4" data-i18n="verdict">The Verdict</h2>
<div class="p-6 bg-gradient-to-r from-purple-900 to-blue-900 rounded-lg">
<div class="flex items-center">
<div class="w-16 h-16 rounded-full bg-purple-500 flex items-center justify-center mr-6">
<span class="text-2xl font-bold">A</span>
</div>
<div>
<h3 class="text-xl font-semibold" data-i18n="verdict-text">Option A is (slightly) more probable!</h3>
<p class="text-gray-300" data-i18n="verdict-desc">Becoming a bestselling author has marginally better odds than the other options, though all remain extremely unlikely.</p>
</div>
</div>
</div>
<p class="mt-4 text-gray-400 text-sm" data-i18n="disclaimer">Disclaimer: These estimates are rough approximations for entertainment purposes only.</p>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script src="i18n.js"></script>
<script>
feather.replace();
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x5f3dc4,
backgroundColor: 0x111827,
points: 9.00,
maxDistance: 22.00,
spacing: 17.00
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |