Auto commit: 2025-10-24T16:00:18.264Z
This commit is contained in:
parent
d62b2f6ebe
commit
26aa0c03d4
41
index.php
41
index.php
@ -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>© <?= 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>
|
||||
Loading…
x
Reference in New Issue
Block a user