Create a clean, modern mobile app screen visualizing a four-step analytics lifecycle. Use soft gradients, rounded cards, simple line icons, and a minimal professional color palette (blues, greys, and soft oranges). Arrange each step vertically as elegant cards with small icons on the left and text on the right. Include subtle shadows, smooth spacing, and a dashboard-style aesthetic.
172cff4
verified
| document.addEventListener('DOMContentLoaded', () => { | |
| // Initialize tooltips | |
| const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); | |
| tooltipTriggerList.map(function (tooltipTriggerEl) { | |
| return new bootstrap.Tooltip(tooltipTriggerEl); | |
| }); | |
| // Animate elements when they come into view | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.fade-in'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementPosition < windowHeight - 100) { | |
| element.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', animateOnScroll); | |
| animateOnScroll(); // Run once on load | |
| }); | |
| // Sample data for demonstration | |
| const promptCategories = [ | |
| { name: "Creative Writing", count: 1245, icon: "edit-3" }, | |
| { name: "Code Generation", count: 982, icon: "code" }, | |
| { name: "Business Ideas", count: 756, icon: "briefcase" }, | |
| { name: "Academic Research", count: 632, icon: "book" }, | |
| { name: "Marketing Copy", count: 541, icon: "megaphone" }, | |
| { name: "Personal Growth", count: 498, icon: "user" } | |
| ]; |