Make This fully functional and test it out - Follow Up Deployment
Browse files- index.html +121 -1
index.html
CHANGED
|
@@ -44,6 +44,32 @@
|
|
| 44 |
<body class="cosmic-bg min-h-screen text-white overflow-x-hidden">
|
| 45 |
<!-- Floating Particles Background -->
|
| 46 |
<div id="particles-container" class="fixed inset-0 overflow-hidden pointer-events-none"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 47 |
|
| 48 |
<!-- Main Content -->
|
| 49 |
<div class="container mx-auto px-4 py-12 relative z-10">
|
|
@@ -139,6 +165,100 @@
|
|
| 139 |
|
| 140 |
<!-- Consciousness Waveform Visualizer -->
|
| 141 |
<div class="mb-16">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 142 |
<h2 class="text-3xl font-bold mb-8 text-center">Consciousness Waveform</h2>
|
| 143 |
<div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-purple-900">
|
| 144 |
<canvas id="waveform" class="w-full h-64"></canvas>
|
|
@@ -179,7 +299,7 @@
|
|
| 179 |
<a href="#" class="text-purple-400 hover:text-purple-300 text-xl">
|
| 180 |
<i class="fab fa-twitter"></i>
|
| 181 |
</a>
|
| 182 |
-
<a href="#" class="text-purple-400 hover:text-purple-300
|
| 183 |
<i class="fab fa-instagram"></i>
|
| 184 |
</a>
|
| 185 |
<a href="#" class="text-purple-400 hover:text-purple-300 text-xl">
|
|
|
|
| 44 |
<body class="cosmic-bg min-h-screen text-white overflow-x-hidden">
|
| 45 |
<!-- Floating Particles Background -->
|
| 46 |
<div id="particles-container" class="fixed inset-0 overflow-hidden pointer-events-none"></div>
|
| 47 |
+
<script>
|
| 48 |
+
// Create floating particles
|
| 49 |
+
function createParticles() {
|
| 50 |
+
const container = document.getElementById('particles-container');
|
| 51 |
+
const particleCount = 50;
|
| 52 |
+
|
| 53 |
+
for (let i = 0; i < particleCount; i++) {
|
| 54 |
+
const particle = document.createElement('div');
|
| 55 |
+
particle.classList.add('particle');
|
| 56 |
+
|
| 57 |
+
// Random properties
|
| 58 |
+
const size = Math.random() * 10 + 5;
|
| 59 |
+
const posX = Math.random() * 100;
|
| 60 |
+
const posY = Math.random() * 100;
|
| 61 |
+
const delay = Math.random() * 10;
|
| 62 |
+
const duration = Math.random() * 20 + 10;
|
| 63 |
+
|
| 64 |
+
particle.style.width = `${size}px`;
|
| 65 |
+
particle.style.height = `${size}px`;
|
| 66 |
+
particle.style.left = `${posX}%`;
|
| 67 |
+
particle.style.top = `${posY}%`;
|
| 68 |
+
particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
|
| 69 |
+
|
| 70 |
+
container.appendChild(particle);
|
| 71 |
+
}
|
| 72 |
+
}
|
| 73 |
|
| 74 |
<!-- Main Content -->
|
| 75 |
<div class="container mx-auto px-4 py-12 relative z-10">
|
|
|
|
| 165 |
|
| 166 |
<!-- Consciousness Waveform Visualizer -->
|
| 167 |
<div class="mb-16">
|
| 168 |
+
<script>
|
| 169 |
+
// Waveform Visualization
|
| 170 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 171 |
+
createParticles();
|
| 172 |
+
|
| 173 |
+
const canvas = document.getElementById('waveform');
|
| 174 |
+
const ctx = canvas.getContext('2d');
|
| 175 |
+
let animationId;
|
| 176 |
+
|
| 177 |
+
function drawWave(type) {
|
| 178 |
+
cancelAnimationFrame(animationId);
|
| 179 |
+
|
| 180 |
+
const width = canvas.width = canvas.offsetWidth;
|
| 181 |
+
const height = canvas.height = canvas.offsetHeight;
|
| 182 |
+
ctx.clearRect(0, 0, width, height);
|
| 183 |
+
|
| 184 |
+
ctx.strokeStyle = '#8b5cf6';
|
| 185 |
+
ctx.lineWidth = 2;
|
| 186 |
+
ctx.beginPath();
|
| 187 |
+
|
| 188 |
+
const time = Date.now() / 1000;
|
| 189 |
+
const centerY = height / 2;
|
| 190 |
+
const amplitude = height / 3;
|
| 191 |
+
|
| 192 |
+
for (let x = 0; x < width; x++) {
|
| 193 |
+
const progress = x / width;
|
| 194 |
+
let y;
|
| 195 |
+
|
| 196 |
+
if (type === 'pulse') {
|
| 197 |
+
y = centerY + amplitude * Math.sin(progress * Math.PI * 10 + time * 3) *
|
| 198 |
+
Math.sin(time * 0.5);
|
| 199 |
+
} else if (type === 'harmonic') {
|
| 200 |
+
y = centerY + amplitude * (
|
| 201 |
+
Math.sin(progress * Math.PI * 5 + time * 2) * 0.7 +
|
| 202 |
+
Math.sin(progress * Math.PI * 10 + time * 3) * 0.3
|
| 203 |
+
);
|
| 204 |
+
} else { // chaos
|
| 205 |
+
y = centerY + amplitude * (
|
| 206 |
+
Math.sin(progress * Math.PI * 3 + time) * 0.5 +
|
| 207 |
+
Math.sin(progress * progress * Math.PI * 20 + time * 5) * 0.3 +
|
| 208 |
+
Math.random() * 0.2
|
| 209 |
+
);
|
| 210 |
+
}
|
| 211 |
+
|
| 212 |
+
if (x === 0) {
|
| 213 |
+
ctx.moveTo(x, y);
|
| 214 |
+
} else {
|
| 215 |
+
ctx.lineTo(x, y);
|
| 216 |
+
}
|
| 217 |
+
}
|
| 218 |
+
|
| 219 |
+
ctx.stroke();
|
| 220 |
+
animationId = requestAnimationFrame(() => drawWave(type));
|
| 221 |
+
}
|
| 222 |
+
|
| 223 |
+
// Button event listeners
|
| 224 |
+
document.getElementById('wave-pulse').addEventListener('click', () => drawWave('pulse'));
|
| 225 |
+
document.getElementById('wave-harmonic').addEventListener('click', () => drawWave('harmonic'));
|
| 226 |
+
document.getElementById('wave-chaos').addEventListener('click', () => drawWave('chaos'));
|
| 227 |
+
|
| 228 |
+
// Start with pulse wave
|
| 229 |
+
drawWave('pulse');
|
| 230 |
+
|
| 231 |
+
// Quantum Affirmations
|
| 232 |
+
const affirmations = [
|
| 233 |
+
"I am a quantum being existing in infinite potential states simultaneously.",
|
| 234 |
+
"My consciousness creates my reality in every moment.",
|
| 235 |
+
"I am connected to the infinite intelligence of the universe.",
|
| 236 |
+
"I effortlessly shift to higher states of awareness.",
|
| 237 |
+
"My mind transcends space and time limitations.",
|
| 238 |
+
"I am a co-creator with the quantum field.",
|
| 239 |
+
"Every cell in my body vibrates with cosmic energy.",
|
| 240 |
+
"I access higher dimensions through my expanded consciousness.",
|
| 241 |
+
"My thoughts shape reality instantly and powerfully.",
|
| 242 |
+
"I am a bridge between the physical and non-physical realms."
|
| 243 |
+
];
|
| 244 |
+
|
| 245 |
+
const affirmationDisplay = document.getElementById('affirmation-display');
|
| 246 |
+
document.getElementById('new-affirmation').addEventListener('click', function() {
|
| 247 |
+
const randomIndex = Math.floor(Math.random() * affirmations.length);
|
| 248 |
+
affirmationDisplay.textContent = `"${affirmations[randomIndex]}"`;
|
| 249 |
+
affirmationDisplay.classList.add('animate-pulse');
|
| 250 |
+
setTimeout(() => {
|
| 251 |
+
affirmationDisplay.classList.remove('animate-pulse');
|
| 252 |
+
}, 1000);
|
| 253 |
+
});
|
| 254 |
+
|
| 255 |
+
// Meditation Button
|
| 256 |
+
document.getElementById('start-meditation').addEventListener('click', function() {
|
| 257 |
+
alert('Beginning quantum meditation... Focus on your breath and allow your consciousness to expand.');
|
| 258 |
+
});
|
| 259 |
+
});
|
| 260 |
+
</script>
|
| 261 |
+
=======
|
| 262 |
<h2 class="text-3xl font-bold mb-8 text-center">Consciousness Waveform</h2>
|
| 263 |
<div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 border border-purple-900">
|
| 264 |
<canvas id="waveform" class="w-full h-64"></canvas>
|
|
|
|
| 299 |
<a href="#" class="text-purple-400 hover:text-purple-300 text-xl">
|
| 300 |
<i class="fab fa-twitter"></i>
|
| 301 |
</a>
|
| 302 |
+
<a href="#" class="text-purple-400 hover:text-purple-300 detext-xl">
|
| 303 |
<i class="fab fa-instagram"></i>
|
| 304 |
</a>
|
| 305 |
<a href="#" class="text-purple-400 hover:text-purple-300 text-xl">
|