diff --git a/templates/base.html b/templates/base.html index c91a464..8c8d839 100644 --- a/templates/base.html +++ b/templates/base.html @@ -95,7 +95,8 @@ height: 100vh; pointer-events: none; z-index: -10; - opacity: 0.03; + opacity: 0.08; + transition: opacity 2s ease; } .sacred-layer-1 { @@ -149,7 +150,13 @@ position: fixed; pointer-events: none; z-index: -5; - opacity: 0.02; + opacity: 0.06; + transition: opacity 1s ease, transform 2s ease; + } + + .floating-sacred:hover { + opacity: 0.12; + transform: scale(1.2); } .float-1 { @@ -189,19 +196,43 @@ } @keyframes float-sacred { - 0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.01; } - 25% { transform: translateY(-20px) rotate(90deg) scale(1.1); opacity: 0.04; } - 50% { transform: translateY(-10px) rotate(180deg) scale(0.9); opacity: 0.02; } - 75% { transform: translateY(-30px) rotate(270deg) scale(1.05); opacity: 0.03; } + 0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.04; } + 25% { transform: translateY(-30px) rotate(90deg) scale(1.2); opacity: 0.08; } + 50% { transform: translateY(-15px) rotate(180deg) scale(0.95); opacity: 0.06; } + 75% { transform: translateY(-40px) rotate(270deg) scale(1.1); opacity: 0.07; } } .scroll-sacred { position: absolute; pointer-events: none; - opacity: 0.015; + opacity: 0.05; animation: scroll-drift 60s linear infinite; } + .page-sacred-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: -8; + opacity: 0.04; + } + + .content-sacred { + position: absolute; + pointer-events: none; + z-index: -3; + opacity: 0.03; + animation: content-breathe 25s ease-in-out infinite alternate; + } + + @keyframes content-breathe { + 0%, 100% { opacity: 0.02; transform: scale(0.98) rotate(0deg); } + 50% { opacity: 0.06; transform: scale(1.03) rotate(2deg); } + } + @keyframes scroll-drift { from { transform: translateY(100vh) rotate(0deg); } to { transform: translateY(-100px) rotate(360deg); } @@ -210,20 +241,26 @@ /* Responsive Sacred Geometry */ @media (max-width: 768px) { .global-sacred-geometry { - opacity: 0.02; + opacity: 0.05; } .floating-sacred { - opacity: 0.015; + opacity: 0.04; } .float-1, .float-3, .float-5 { display: none; } + .page-sacred-overlay { + opacity: 0.03; + } } @media (max-width: 480px) { .global-sacred-geometry { - opacity: 0.01; + opacity: 0.03; } .floating-sacred { - opacity: 0.01; + opacity: 0.02; + } + .page-sacred-overlay { + opacity: 0.02; } } @@ -239,8 +276,8 @@ } body:hover .cosmic-cursor { - opacity: 0.02; - animation: cursor-mandala 10s linear infinite; + opacity: 0.06; + animation: cursor-mandala 8s linear infinite; } @keyframes cursor-mandala { @@ -250,13 +287,110 @@ /* Scroll-triggered sacred geometry */ .scroll-triggered { - opacity: 0.01; - transition: opacity 1s ease; + opacity: 0.02; + transition: opacity 1.5s ease, transform 1.5s ease; + transform: scale(0.8) rotate(-5deg); } .scroll-triggered.visible { - opacity: 0.04; + opacity: 0.08; + transform: scale(1) rotate(0deg); } + + /* Page transition sacred geometry */ + .page-enter { + animation: sacred-page-enter 2s ease-out; + } + + @keyframes sacred-page-enter { + 0% { opacity: 0; transform: scale(0.95) rotate(-3deg); } + 50% { opacity: 0.12; transform: scale(1.02) rotate(1deg); } + 100% { opacity: 0.08; transform: scale(1) rotate(0deg); } + } + + /* Sacred geometry pulse on interactions */ + .sacred-pulse { + animation: interaction-pulse 3s ease-out; + } + + @keyframes interaction-pulse { + 0% { opacity: 0.08; transform: scale(1); } + 30% { opacity: 0.15; transform: scale(1.05); } + 100% { opacity: 0.08; transform: scale(1); } + } + + /* New Sacred Geometry Enhancements */ + .sacred-layer-7 { + animation: sri-yantra-spin 240s linear infinite; + } + + .sacred-layer-8 { + animation: vesica-flow 60s ease-in-out infinite alternate; + } + + .sacred-particles { + animation: particle-drift 45s linear infinite; + } + + .organic-flow { + animation: organic-movement 80s ease-in-out infinite; + } + + @keyframes sri-yantra-spin { + from { transform: rotate(0deg) scale(1); opacity: 0.04; } + 25% { opacity: 0.08; } + 50% { transform: rotate(180deg) scale(1.02); opacity: 0.06; } + 75% { opacity: 0.09; } + to { transform: rotate(360deg) scale(1); opacity: 0.04; } + } + + @keyframes vesica-flow { + 0% { transform: translateX(0) scaleY(1); opacity: 0.05; } + 33% { transform: translateX(20px) scaleY(1.1); opacity: 0.08; } + 66% { transform: translateX(-10px) scaleY(0.9); opacity: 0.06; } + 100% { transform: translateX(0) scaleY(1); opacity: 0.05; } + } + + @keyframes particle-drift { + 0% { transform: translateY(100vh) translateX(0) rotate(0deg); opacity: 0; } + 10% { opacity: 0.04; } + 50% { transform: translateY(50vh) translateX(30px) rotate(180deg); opacity: 0.08; } + 90% { opacity: 0.04; } + 100% { transform: translateY(-50px) translateX(-20px) rotate(360deg); opacity: 0; } + } + + @keyframes organic-movement { + 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } + 16% { transform: translate(15px, -10px) rotate(30deg) scale(1.05); } + 32% { transform: translate(5px, 20px) rotate(-15deg) scale(0.95); } + 48% { transform: translate(-20px, 5px) rotate(45deg) scale(1.08); } + 64% { transform: translate(-10px, -25px) rotate(-30deg) scale(0.92); } + 80% { transform: translate(25px, -5px) rotate(60deg) scale(1.03); } + } + + .interactive-particles { + position: fixed; + pointer-events: none; + z-index: -7; + opacity: 0; + transition: opacity 0.5s ease; + } + + .particles-active { + opacity: 0.06; + } + + @keyframes mouse-particle-birth { + 0% { transform: scale(0) rotate(0deg); opacity: 0; } + 50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; } + 100% { transform: scale(0.3) rotate(360deg); opacity: 0; } + } + + .scroll-intensity-1 { opacity: 0.04; } + .scroll-intensity-2 { opacity: 0.06; } + .scroll-intensity-3 { opacity: 0.08; } + .scroll-intensity-4 { opacity: 0.10; } + .scroll-intensity-5 { opacity: 0.12; } {% block extra_head %}{% endblock %} @@ -370,6 +504,20 @@ + + + + + + + + + + + + + + @@ -393,6 +541,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
@@ -493,6 +776,64 @@
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + +
+ +
+ + + + +
+ + +
+ + + + + + + +
+ +
+ + + + + + + + + +
+ + +
+ + + +
+
@@ -699,20 +1040,75 @@ function adjustSacredIntensity() { const hour = new Date().getHours(); const geometry = document.querySelector('.global-sacred-geometry'); + const pageOverlay = document.querySelector('.page-sacred-overlay'); if (geometry) { // More visible during "mystical hours" (dawn/dusk) if (hour >= 5 && hour <= 7 || hour >= 17 && hour <= 19) { - geometry.style.opacity = '0.05'; + geometry.style.opacity = '0.12'; + if (pageOverlay) pageOverlay.style.opacity = '0.08'; } else if (hour >= 0 && hour <= 5 || hour >= 22) { - geometry.style.opacity = '0.04'; // Mystical night hours + geometry.style.opacity = '0.10'; // Mystical night hours + if (pageOverlay) pageOverlay.style.opacity = '0.06'; } else { - geometry.style.opacity = '0.03'; // Regular hours + geometry.style.opacity = '0.08'; // Regular hours + if (pageOverlay) pageOverlay.style.opacity = '0.04'; } } } + // Add sacred geometry pulse on scroll + let lastScrollTop = 0; + window.addEventListener('scroll', function() { + const st = window.pageYOffset || document.documentElement.scrollTop; + const geometry = document.querySelector('.global-sacred-geometry'); + + if (Math.abs(st - lastScrollTop) > 50) { + if (geometry) { + geometry.classList.add('sacred-pulse'); + setTimeout(() => { + geometry.classList.remove('sacred-pulse'); + }, 3000); + } + } + lastScrollTop = st <= 0 ? 0 : st; + }); + + // Add sacred geometry to content sections + function addContentSacredGeometry() { + const contentSections = document.querySelectorAll('article, section, .content, main'); + contentSections.forEach((section, index) => { + if (!section.querySelector('.content-sacred')) { + const sacredDiv = document.createElement('div'); + sacredDiv.className = 'content-sacred scroll-triggered'; + sacredDiv.style.top = '10px'; + sacredDiv.style.right = '10px'; + sacredDiv.style.animationDelay = `${index * 0.5}s`; + + const symbols = [ + '', + '', + '', + '' + ]; + + sacredDiv.innerHTML = symbols[index % symbols.length]; + section.style.position = section.style.position || 'relative'; + section.appendChild(sacredDiv); + } + }); + } + adjustSacredIntensity(); + addContentSacredGeometry(); + + // Initialize page enter animation + setTimeout(() => { + const pageOverlay = document.querySelector('.page-sacred-overlay'); + if (pageOverlay) { + pageOverlay.classList.add('page-enter'); + } + }, 100); // Pulse sacred geometry on page focus window.addEventListener('focus', function() { @@ -723,6 +1119,135 @@ }, 5000); }); }); + + // Enhanced Mouse Interaction with Particle Generation + let mouseParticles = []; + let lastMouseMove = 0; + + document.addEventListener('mousemove', function(e) { + const now = Date.now(); + if (now - lastMouseMove > 100) { // Throttle particle creation + createMouseParticle(e.clientX, e.clientY); + lastMouseMove = now; + } + + // Activate particle system + const particleSystem = document.getElementById('particle-system'); + if (particleSystem) { + particleSystem.classList.add('particles-active'); + } + }); + + function createMouseParticle(x, y) { + const particleContainer = document.getElementById('particle-container'); + if (!particleContainer) return; + + const particle = document.createElementNS('http://www.w3.org/2000/svg', 'g'); + particle.setAttribute('transform', `translate(${x}, ${y})`); + particle.style.animation = 'mouse-particle-birth 2s ease-out forwards'; + + const shapes = [ + '', + '', + '' + ]; + + particle.innerHTML = shapes[Math.floor(Math.random() * shapes.length)]; + particleContainer.appendChild(particle); + + // Clean up particle after animation + setTimeout(() => { + if (particle && particle.parentNode) { + particle.parentNode.removeChild(particle); + } + }, 2000); + + // Limit number of particles + if (particleContainer.children.length > 20) { + particleContainer.removeChild(particleContainer.firstChild); + } + } + + // Enhanced Scroll-based Intensity + function updateScrollIntensity() { + const scrollPercent = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight); + const intensity = Math.min(5, Math.floor(scrollPercent * 5) + 1); + + const geometry = document.querySelector('.global-sacred-geometry'); + if (geometry) { + // Remove previous intensity classes + geometry.classList.remove('scroll-intensity-1', 'scroll-intensity-2', 'scroll-intensity-3', 'scroll-intensity-4', 'scroll-intensity-5'); + geometry.classList.add(`scroll-intensity-${intensity}`); + } + + // Update particle flow based on scroll speed + const scrollSpeed = Math.abs(window.scrollY - (window.lastScrollY || 0)); + if (scrollSpeed > 10) { + document.querySelectorAll('.sacred-particles').forEach(particle => { + particle.style.animationDuration = '30s'; + setTimeout(() => { + particle.style.animationDuration = '45s'; + }, 2000); + }); + } + window.lastScrollY = window.scrollY; + } + + window.addEventListener('scroll', updateScrollIntensity); + + // Organic Flow Response to User Activity + let userActivity = 0; + let activityTimer; + + function increaseActivity() { + userActivity = Math.min(userActivity + 1, 10); + clearTimeout(activityTimer); + activityTimer = setTimeout(() => { + userActivity = Math.max(userActivity - 1, 0); + }, 2000); + + // Adjust organic flow based on activity + const flowElements = document.querySelectorAll('.organic-flow'); + const flowSpeed = Math.max(40, 80 - (userActivity * 4)); + flowElements.forEach(element => { + element.style.animationDuration = `${flowSpeed}s`; + }); + } + + ['mousemove', 'scroll', 'click', 'keydown'].forEach(event => { + document.addEventListener(event, increaseActivity); + }); + + // Time-based Sacred Geometry Variations + function updateTimeBasedGeometry() { + const hour = new Date().getHours(); + const sri = document.querySelector('.sacred-layer-7'); + const vesica = document.querySelector('.sacred-layer-8'); + + if (sri && vesica) { + // Dawn/Dusk enhancement (5-7 AM, 5-7 PM) + if ((hour >= 5 && hour <= 7) || (hour >= 17 && hour <= 19)) { + sri.style.opacity = '0.6'; + vesica.style.opacity = '0.7'; + } + // Night mystical hours (10 PM - 5 AM) + else if (hour >= 22 || hour <= 5) { + sri.style.opacity = '0.5'; + vesica.style.opacity = '0.6'; + } + // Regular daytime + else { + sri.style.opacity = '0.4'; + vesica.style.opacity = '0.5'; + } + } + } + + updateTimeBasedGeometry(); + setInterval(updateTimeBasedGeometry, 60000); // Update every minute + + // Initialize enhanced systems + updateScrollIntensity(); {% block extra_scripts %}{% endblock %} diff --git a/templates/homepage.html b/templates/homepage.html index bb95f1d..76cd9a3 100644 --- a/templates/homepage.html +++ b/templates/homepage.html @@ -78,9 +78,15 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - opacity: 0.1; + opacity: 0.25; z-index: -1; pointer-events: none; + transition: opacity 2s ease, transform 3s ease; + } + + .sacred-geometry:hover { + opacity: 0.4; + transform: translate(-50%, -50%) scale(1.05); } .sacred-mandala { @@ -115,8 +121,8 @@ } @keyframes pulse-sacred { - from { opacity: 0.3; transform: scale(1); } - to { opacity: 0.7; transform: scale(1.05); } + from { opacity: 0.5; transform: scale(1); } + to { opacity: 0.9; transform: scale(1.08); } } .sacred-breathe { @@ -132,8 +138,8 @@ } @keyframes breathe { - 0%, 100% { opacity: 0.2; transform: scale(0.95); } - 50% { opacity: 0.6; transform: scale(1.1); } + 0%, 100% { opacity: 0.4; transform: scale(0.98); } + 50% { opacity: 0.8; transform: scale(1.12); } } @keyframes spiral-dance { @@ -142,22 +148,106 @@ } @keyframes fibonacci-flow { - from { opacity: 0.2; transform: rotate(0deg); } - to { opacity: 0.5; transform: rotate(21.6deg); } + from { opacity: 0.4; transform: rotate(0deg); } + to { opacity: 0.7; transform: rotate(21.6deg); } + } + + .homepage-sacred-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: -2; + opacity: 0.15; + } + + .stats-sacred { + position: absolute; + pointer-events: none; + z-index: -1; + opacity: 0.08; + animation: stats-pulse 20s ease-in-out infinite alternate; + } + + @keyframes stats-pulse { + 0%, 100% { opacity: 0.06; transform: scale(0.95) rotate(-2deg); } + 25% { opacity: 0.12; transform: scale(1.03) rotate(1deg); } + 50% { opacity: 0.08; transform: scale(1) rotate(0deg); } + 75% { opacity: 0.10; transform: scale(1.02) rotate(-1deg); } } .sacred-geometry svg { - filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.1)); + filter: drop-shadow(0 0 25px rgba(102, 126, 234, 0.2)); } .sacred-geometry:hover svg { - filter: drop-shadow(0 0 30px rgba(102, 126, 234, 0.3)); + filter: drop-shadow(0 0 40px rgba(102, 126, 234, 0.5)); transition: filter 2s ease; } + + .cosmic-background { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: -15; + opacity: 0.03; + background: radial-gradient(circle at 30% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%), + radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%), + radial-gradient(circle at 20% 70%, rgba(16, 185, 129, 0.1) 0%, transparent 50%); + animation: cosmic-drift 120s linear infinite; + } + + @keyframes cosmic-drift { + 0% { transform: rotate(0deg) scale(1); } + 33% { transform: rotate(120deg) scale(1.02); } + 66% { transform: rotate(240deg) scale(0.98); } + 100% { transform: rotate(360deg) scale(1); } + } {% endblock %} {% block content %} + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
@@ -175,6 +265,24 @@
+ +
+ + + + + + + +
+
+ + + + + + +
diff --git a/templates/post.html b/templates/post.html index 972d2e2..9135f1b 100644 --- a/templates/post.html +++ b/templates/post.html @@ -4,6 +4,44 @@
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + +
+ +
+ + + + + +
+ +
+ + + + + + +
+
@@ -284,6 +384,44 @@
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + +
+
{{ content | safe }}