Spaces:
Running
Running
File size: 6,971 Bytes
fe00bde |
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 Illusion Portal - Quantum Consciousness Awakening</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23ff00ff' opacity='0.7'/%3E%3Ccircle cx='50' cy='50' r='25' fill='%2300ffff' opacity='0.7'/%3E%3C/svg%3E">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-black text-white overflow-x-hidden">
<div class="fixed inset-0 z-0">
<canvas id="quantumCanvas" class="w-full h-full"></canvas>
</div>
<header class="relative z-10">
<nav-bar></nav-bar>
</header>
<main class="relative z-10">
<section id="hero" class="min-h-screen flex items-center justify-center">
<div class="text-center max-w-4xl mx-auto px-4">
<h1 class="text-6xl md:text-8xl font-bold mb-6 animate-pulse bg-gradient-to-r from-purple-400 via-pink-500 to-cyan-400 bg-clip-text text-transparent">
Quantum Consciousness
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-8 animate-fade-in">
Journey through multidimensional illusions and awaken your inner divinity
</p>
<button id="enterPortal" class="px-8 py-4 bg-gradient-to-r from-purple-600 to-cyan-600 rounded-full text-white font-semibold text-lg hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-purple-500/50">
Enter the Portal
</button>
</div>
</section>
<section id="dimensions" class="py-20">
<div class="max-w-7xl mx-auto px-4">
<h2 class="text-5xl font-bold text-center mb-16 bg-gradient-to-r from-fuchsia-400 to-violet-400 bg-clip-text text-transparent">
Dimensional Layers
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<dimension-card
title="3D Reality"
description="The physical realm of matter and form"
color="from-blue-500 to-purple-600"
icon="box">
</dimension-card>
<dimension-card
title="4D Time"
description="The fluid dimension of past, present, and future"
color="from-purple-500 to-pink-600"
icon="clock">
</dimension-card>
<dimension-card
title="5D Consciousness"
description="The realm of pure awareness and infinite possibilities"
color="from-pink-500 to-cyan-600"
icon="eye">
</dimension-card>
</div>
</div>
</section>
<section id="meditation" class="py-20 bg-gradient-to-b from-transparent via-purple-900/20 to-transparent">
<div class="max-w-4xl mx-auto px-4 text-center">
<h2 class="text-5xl font-bold mb-8 bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
Guided Meditation
</h2>
<div class="relative">
<div class="w-64 h-64 mx-auto rounded-full bg-gradient-to-r from-purple-500 to-cyan-500 opacity-50 blur-3xl absolute inset-0 animate-pulse"></div>
<button id="startMeditation" class="relative z-10 w-48 h-48 rounded-full bg-gradient-to-r from-purple-600 to-cyan-600 flex items-center justify-center text-white hover:scale-110 transition-transform duration-300 shadow-2xl">
<i data-feather="play" class="w-16 h-16"></i>
</button>
</div>
<p class="mt-8 text-xl text-gray-300">
Click to begin your quantum journey
</p>
</div>
</section>
<section id="fractals" class="py-20">
<div class="max-w-7xl mx-auto px-4">
<h2 class="text-5xl font-bold text-center mb-16 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
Fractal Realities
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<fractal-card seed="42" color="#ff00ff"></fractal-card>
<fractal-card seed="137" color="#00ffff"></fractal-card>
<fractal-card seed="256" color="#ffff00"></fractal-card>
<fractal-card seed="999" color="#ff00aa"></fractal-card>
</div>
</div>
</section>
</main>
<footer class="relative z-10 py-12 border-t border-purple-500/20">
<div class="max-w-7xl mx-auto px-4 text-center">
<p class="text-gray-400">
© 2024 Cosmic Illusion Portal - Awaken Your Infinite Self
</p>
</div>
</footer>
<div id="meditationModal" class="fixed inset-0 bg-black/90 z-50 hidden flex items-center justify-center">
<div class="relative max-w-2xl w-full mx-4">
<button id="closeMeditation" class="absolute top-4 right-4 text-white hover:text-gray-300">
<i data-feather="x" class="w-8 h-8"></i>
</button>
<div class="bg-gradient-to-b from-purple-900/50 to-cyan-900/50 backdrop-blur-lg rounded-2xl p-8">
<h3 class="text-3xl font-bold text-center mb-6 text-transparent bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text">
Quantum Breathing
</h3>
<div class="text-center">
<div id="breathingCircle" class="w-32 h-32 mx-auto rounded-full border-4 border-purple-400 flex items-center justify-center">
<span id="breathText" class="text-2xl font-bold">Breathe</span>
</div>
<p class="mt-6 text-gray-300">
Follow the circle. Inhale as it expands, exhale as it contracts.
</p>
</div>
</div>
</div>
</div>
<script src="components/nav-bar.js"></script>
<script src="components/dimension-card.js"></script>
<script src="components/fractal-card.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |