Auto commit: 2025-10-24T16:00:18.264Z

This commit is contained in:
Flatlogic Bot 2025-10-24 16:00:18 +00:00
parent d62b2f6ebe
commit 26aa0c03d4

View File

@ -69,6 +69,7 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
overflow: hidden;
filter: blur(50px);
opacity: 0.5;
transition: transform 0.5s ease-out;
}
.aurora-background .aurora {
@ -261,7 +262,11 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
text-align: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
transition: transform 0.4s ease-out, box-shadow 0.4s, border-color 0.4s, opacity 0.6s ease-out;
}
.feature-card.hidden {
opacity: 0;
transform: translateY(30px);
}
.feature-card:hover {
transform: translateY(-10px);
@ -351,21 +356,21 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<section class="features-section container">
<div class="features-grid">
<div class="feature-card">
<div class="feature-card hidden">
<div class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
</div>
<h3>AI-Powered Scripting</h3>
<p>Generate compelling narratives and dialogue from a simple prompt.</p>
</div>
<div class="feature-card">
<div class="feature-card hidden">
<div class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><path d="M10 8v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"/></svg>
</div>
<h3>Visual Generation</h3>
<p>Transform your script into stunning visual scenes and character designs.</p>
</div>
<div class="feature-card">
<div class="feature-card hidden">
<div class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12a8 8 0 0 1 8-8 8 8 0 0 1 8 8"/><path d="M12 22c4.42 0 8-3.58 8-8"/><path d="M4 12a8 8 0 0 0 8 8"/></svg>
</div>
@ -379,5 +384,33 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
<p>&copy; <?= date('Y') ?> AuraStudio. All Rights Reserved.</p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const auroraBg = document.querySelector('.aurora-background');
const featureCards = document.querySelectorAll('.feature-card.hidden');
const handleScroll = () => {
// Parallax effect for aurora background
const scrollY = window.scrollY;
auroraBg.style.transform = `translateY(${scrollY * 0.3}px)`;
// Fade-in for feature cards
featureCards.forEach(card => {
const cardTop = card.getBoundingClientRect().top;
const triggerPoint = window.innerHeight * 0.9;
if (cardTop < triggerPoint) {
card.classList.remove('hidden');
}
});
};
window.addEventListener('scroll', handleScroll, { passive: true });
// Trigger once on load in case features are already in view
handleScroll();
});
</script>
</body>
</html>