dearwolf/aider
1
0
Fork 0
mirror of https://github.com/Aider-AI/aider.git synced 2025-05-31 01:35:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

feat: Add 3D card flip animation to testimonials

Browse source
This commit is contained in:
Paul Gauthier (aider) 2025-03-19 10:14:11 -07:00
parent 41c3b59755
commit d973be8fea
1 changed files with 14 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

22
aider/website/home.html
View file

@ -225,7 +225,10 @@
border-radius: 8px;
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
transition: opacity 0.3s ease;
transition: transform 0.6s;
transform-style: preserve-3d;
perspective: 1000px;
backface-visibility: hidden;
}
.testimonial-text {
@ -683,15 +686,18 @@ aider --model gpt-4o --api-key openai=your-key-goes-here</pre>
// Update the displayed testimonial
const testimonialElement = document.getElementById(`testimonial-${index}`);
if (testimonialElement) {
testimonialElement.innerHTML = `
<p class="testimonial-text">"${newTestimonial.text}"</p>
<p class="testimonial-author">— <a href="${newTestimonial.link}" target="_blank">${newTestimonial.author}</a></p>
`;
// Start the flip animation
testimonialElement.style.transform = "rotateY(90deg)";
// Add a brief animation effect
testimonialElement.style.opacity = 0;
// Update content when card is perpendicular to view (hidden)
setTimeout(() => {
testimonialElement.style.opacity = 1;
testimonialElement.innerHTML = `
<p class="testimonial-text">"${newTestimonial.text}"</p>
<p class="testimonial-author">— <a href="${newTestimonial.link}" target="_blank">${newTestimonial.author}</a></p>
`;
// Complete the flip
testimonialElement.style.transform = "rotateY(0deg)";
}, 300);
}
}