dearwolf/aider
1
0
Fork 0
mirror of https://github.com/Aider-AI/aider.git synced 2025-06-02 18:54:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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