create-template-html-css 1.2.2 → 1.4.0

package/templates/fade-gallery/script.js

@@ -0,0 +1,123 @@
+// Animated Gallery Component JavaScript
+
+// Intersection Observer for scroll animations
+const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1
+};
+
+// Callback function for intersection observer
+function handleIntersection(entries, observer) {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            const delay = entry.target.dataset.delay || 0;
+            setTimeout(() => {
+                entry.target.classList.add('visible');
+            }, delay);
+            observer.unobserve(entry.target);
+        }
+    });
+}
+
+// Create observer
+const observer = new IntersectionObserver(handleIntersection, observerOptions);
+
+// Function to observe elements
+function observeElements() {
+    const fadeInUpElements = document.querySelectorAll('.fade-in-up');
+    const slideInLeftElements = document.querySelectorAll('.slide-in-left');
+    
+    fadeInUpElements.forEach(element => {
+        observer.observe(element);
+    });
+    
+    slideInLeftElements.forEach(element => {
+        observer.observe(element);
+    });
+}
+
+// Replay animations
+function replayAnimations() {
+    const animatedElements = document.querySelectorAll('.gallery-item, .scroll-item');
+    
+    animatedElements.forEach(element => {
+        element.classList.remove('visible');
+        // Force reflow
+        void element.offsetWidth;
+    });
+    
+    // Re-observe elements
+    setTimeout(() => {
+        observeElements();
+    }, 100);
+}
+
+// Initialize on DOM load
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('Animated Gallery Component initialized');
+    
+    // Observe elements
+    observeElements();
+    
+    // Replay button
+    const animateBtn = document.getElementById('animateBtn');
+    if (animateBtn) {
+        animateBtn.addEventListener('click', () => {
+            replayAnimations();
+        });
+    }
+    
+    // Add click handlers to gallery items
+    const galleryItems = document.querySelectorAll('.gallery-item');
+    galleryItems.forEach((item, index) => {
+        item.addEventListener('click', () => {
+            console.log(`Gallery item ${index + 1} clicked`);
+            // You can add modal or lightbox functionality here
+        });
+    });
+    
+    // Smooth scroll for horizontal gallery
+    const horizontalScroll = document.querySelector('.horizontal-scroll');
+    if (horizontalScroll) {
+        let isScrolling = false;
+        let scrollLeft = 0;
+        let startX = 0;
+        
+        horizontalScroll.addEventListener('mousedown', (e) => {
+            isScrolling = true;
+            startX = e.pageX - horizontalScroll.offsetLeft;
+            scrollLeft = horizontalScroll.scrollLeft;
+        });
+        
+        horizontalScroll.addEventListener('mouseleave', () => {
+            isScrolling = false;
+        });
+        
+        horizontalScroll.addEventListener('mouseup', () => {
+            isScrolling = false;
+        });
+        
+        horizontalScroll.addEventListener('mousemove', (e) => {
+            if (!isScrolling) return;
+            e.preventDefault();
+            const x = e.pageX - horizontalScroll.offsetLeft;
+            const walk = (x - startX) * 2;
+            horizontalScroll.scrollLeft = scrollLeft - walk;
+        });
+    }
+});
+
+// Parallax effect on scroll
+window.addEventListener('scroll', () => {
+    const scrolled = window.pageYOffset;
+    const parallaxElements = document.querySelectorAll('.placeholder-image');
+    
+    parallaxElements.forEach((element, index) => {
+        const speed = 0.5;
+        const yPos = -(scrolled * speed);
+        element.style.transform = `translateY(${yPos}px)`;
+    });
+});
+
+console.log('Gallery animations ready');

package/templates/fade-gallery/style.css

@@ -0,0 +1,309 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #141e30 0%, #243b55 100%);
+    min-height: 100vh;
+    color: white;
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 60px 20px;
+}
+
+/* Header */
+.header {
+    text-align: center;
+    margin-bottom: 80px;
+}
+
+.header h1 {
+    font-size: 4rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.subtitle {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* Section Title */
+.section-title {
+    font-size: 2.5rem;
+    text-align: center;
+    margin-bottom: 50px;
+    color: white;
+}
+
+/* Gallery Grid */
+.gallery-section {
+    margin-bottom: 100px;
+}
+
+.gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 30px;
+    padding: 20px;
+}
+
+.gallery-item {
+    opacity: 0;
+    transform: translateY(50px);
+}
+
+.gallery-item.visible {
+    animation: fadeInUp 0.8s ease forwards;
+}
+
+@keyframes fadeInUp {
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.image-wrapper {
+    position: relative;
+    overflow: hidden;
+    border-radius: 20px;
+    cursor: pointer;
+    height: 400px;
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
+    transition: transform 0.4s ease, box-shadow 0.4s ease;
+}
+
+.image-wrapper:hover {
+    transform: translateY(-10px) scale(1.02);
+    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
+}
+
+.placeholder-image {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.4s ease;
+}
+
+.image-wrapper:hover .placeholder-image {
+    transform: scale(1.1);
+}
+
+.image-icon {
+    font-size: 6rem;
+    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
+}
+
+/* Gradient Backgrounds */
+.gradient-1 {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.gradient-2 {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.gradient-3 {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.gradient-4 {
+    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+.gradient-5 {
+    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+}
+
+.gradient-6 {
+    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
+}
+
+.gradient-7 {
+    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+}
+
+.gradient-8 {
+    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+}
+
+.gradient-9 {
+    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+}
+
+.gradient-10 {
+    background: linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%);
+}
+
+/* Overlay */
+.overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
+    padding: 30px;
+    transform: translateY(100%);
+    transition: transform 0.4s ease;
+}
+
+.image-wrapper:hover .overlay {
+    transform: translateY(0);
+}
+
+.overlay h3 {
+    font-size: 1.8rem;
+    margin-bottom: 10px;
+    color: white;
+}
+
+.overlay p {
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+/* Horizontal Scroll Section */
+.horizontal-section {
+    margin-bottom: 80px;
+}
+
+.horizontal-scroll {
+    display: flex;
+    gap: 30px;
+    overflow-x: auto;
+    padding: 20px;
+    scroll-behavior: smooth;
+}
+
+.horizontal-scroll::-webkit-scrollbar {
+    height: 10px;
+}
+
+.horizontal-scroll::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+}
+
+.horizontal-scroll::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 10px;
+}
+
+.scroll-item {
+    min-width: 300px;
+    opacity: 0;
+    transform: translateX(-50px);
+}
+
+.scroll-item.visible {
+    animation: slideInLeft 0.8s ease forwards;
+}
+
+@keyframes slideInLeft {
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.scroll-item .placeholder-image {
+    height: 300px;
+    border-radius: 15px;
+    margin-bottom: 15px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+    transition: transform 0.3s ease;
+}
+
+.scroll-item:hover .placeholder-image {
+    transform: scale(1.05);
+}
+
+.scroll-item p {
+    text-align: center;
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+/* Fade In Animation */
+.fade-in {
+    opacity: 0;
+    animation: fadeIn 1s ease forwards;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+/* Controls */
+.controls {
+    text-align: center;
+    padding: 40px;
+}
+
+.btn {
+    padding: 18px 50px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 50px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+}
+
+.btn:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
+}
+
+.btn:active {
+    transform: translateY(-2px);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .header h1 {
+        font-size: 2.5rem;
+    }
+    
+    .subtitle {
+        font-size: 1.2rem;
+    }
+    
+    .gallery-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .image-wrapper {
+        height: 350px;
+    }
+    
+    .scroll-item {
+        min-width: 250px;
+    }
+    
+    .scroll-item .placeholder-image {
+        height: 250px;
+    }
+}

package/templates/flex-cards/index.html

@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Flex Cards Component</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <header class="hero">
+            <h1>Flex Cards Gallery</h1>
+            <p>Equal height cards with Flexbox magic</p>
+        </header>
+
+        <!-- Equal Height Cards -->
+        <section class="section">
+            <h2 class="section-title">Equal Height Cards</h2>
+            <div class="card-container">
+                <div class="card">
+                    <div class="card-icon">🚀</div>
+                    <h3>Launch Fast</h3>
+                    <p>Get your project up and running in minutes with our streamlined setup process.</p>
+                    <button class="card-btn">Get Started</button>
+                </div>
+
+                <div class="card">
+                    <div class="card-icon">⚡</div>
+                    <h3>Lightning Speed</h3>
+                    <p>Optimized for performance with modern techniques.</p>
+                    <button class="card-btn">Learn More</button>
+                </div>
+
+                <div class="card">
+                    <div class="card-icon">🎨</div>
+                    <h3>Beautiful Design</h3>
+                    <p>Stunning interfaces that work perfectly on all devices. Responsive and accessible design patterns that your users will love. Premium quality guaranteed.</p>
+                    <button class="card-btn">View Demo</button>
+                </div>
+
+                <div class="card">
+                    <div class="card-icon">🔒</div>
+                    <h3>Secure</h3>
+                    <p>Enterprise-level security built-in from day one.</p>
+                    <button class="card-btn">Security Info</button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Pricing Cards -->
+        <section class="section">
+            <h2 class="section-title">Pricing Plans</h2>
+            <div class="pricing-container">
+                <div class="pricing-card">
+                    <div class="pricing-badge">Basic</div>
+                    <div class="pricing-icon">📦</div>
+                    <div class="pricing-amount">
+                        <span class="currency">$</span>
+                        <span class="price">9</span>
+                        <span class="period">/month</span>
+                    </div>
+                    <ul class="pricing-features">
+                        <li>✓ 10 Projects</li>
+                        <li>✓ 5GB Storage</li>
+                        <li>✓ Email Support</li>
+                        <li>✓ Basic Analytics</li>
+                    </ul>
+                    <button class="pricing-btn">Choose Plan</button>
+                </div>
+
+                <div class="pricing-card featured">
+                    <div class="pricing-badge popular">Popular</div>
+                    <div class="pricing-icon">⭐</div>
+                    <div class="pricing-amount">
+                        <span class="currency">$</span>
+                        <span class="price">29</span>
+                        <span class="period">/month</span>
+                    </div>
+                    <ul class="pricing-features">
+                        <li>✓ Unlimited Projects</li>
+                        <li>✓ 50GB Storage</li>
+                        <li>✓ Priority Support</li>
+                        <li>✓ Advanced Analytics</li>
+                        <li>✓ Custom Domain</li>
+                        <li>✓ Team Collaboration</li>
+                    </ul>
+                    <button class="pricing-btn featured-btn">Choose Plan</button>
+                </div>
+
+                <div class="pricing-card">
+                    <div class="pricing-badge">Enterprise</div>
+                    <div class="pricing-icon">🏢</div>
+                    <div class="pricing-amount">
+                        <span class="currency">$</span>
+                        <span class="price">99</span>
+                        <span class="period">/month</span>
+                    </div>
+                    <ul class="pricing-features">
+                        <li>✓ Unlimited Everything</li>
+                        <li>✓ 500GB Storage</li>
+                        <li>✓ 24/7 Phone Support</li>
+                        <li>✓ White Label</li>
+                        <li>✓ API Access</li>
+                    </ul>
+                    <button class="pricing-btn">Contact Sales</button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Product Cards -->
+        <section class="section dark-section">
+            <h2 class="section-title">Featured Products</h2>
+            <div class="product-container">
+                <div class="product-card">
+                    <div class="product-image gradient-1">
+                        <span class="product-badge">New</span>
+                    </div>
+                    <div class="product-info">
+                        <h3>Premium Headphones</h3>
+                        <div class="product-rating">
+                            ⭐⭐⭐⭐⭐ <span>(128)</span>
+                        </div>
+                        <p>High-quality wireless headphones with noise cancellation</p>
+                        <div class="product-footer">
+                            <span class="product-price">$299</span>
+                            <button class="product-btn">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="product-card">
+                    <div class="product-image gradient-2">
+                        <span class="product-badge sale">Sale</span>
+                    </div>
+                    <div class="product-info">
+                        <h3>Smart Watch Pro</h3>
+                        <div class="product-rating">
+                            ⭐⭐⭐⭐☆ <span>(94)</span>
+                        </div>
+                        <p>Advanced fitness tracking and health monitoring</p>
+                        <div class="product-footer">
+                            <span class="product-price">
+                                <del>$399</del> $299
+                            </span>
+                            <button class="product-btn">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="product-card">
+                    <div class="product-image gradient-3">
+                        <span class="product-badge">Hot</span>
+                    </div>
+                    <div class="product-info">
+                        <h3>Wireless Earbuds</h3>
+                        <div class="product-rating">
+                            ⭐⭐⭐⭐⭐ <span>(256)</span>
+                        </div>
+                        <p>Crystal clear sound in a compact design</p>
+                        <div class="product-footer">
+                            <span class="product-price">$149</span>
+                            <button class="product-btn">Add to Cart</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Team Cards -->
+        <section class="section">
+            <h2 class="section-title">Meet Our Team</h2>
+            <div class="team-container">
+                <div class="team-card">
+                    <div class="team-avatar gradient-4">
+                        <span class="avatar-text">JD</span>
+                    </div>
+                    <h3>John Doe</h3>
+                    <p class="team-role">CEO & Founder</p>
+                    <p class="team-bio">Visionary leader with 15 years of experience in tech innovation</p>
+                    <div class="team-social">
+                        <a href="#" class="social-link">💼</a>
+                        <a href="#" class="social-link">🐦</a>
+                        <a href="#" class="social-link">📧</a>
+                    </div>
+                </div>
+
+                <div class="team-card">
+                    <div class="team-avatar gradient-5">
+                        <span class="avatar-text">JS</span>
+                    </div>
+                    <h3>Jane Smith</h3>
+                    <p class="team-role">CTO</p>
+                    <p class="team-bio">Tech expert specializing in scalable architectures</p>
+                    <div class="team-social">
+                        <a href="#" class="social-link">💼</a>
+                        <a href="#" class="social-link">🐦</a>
+                        <a href="#" class="social-link">📧</a>
+                    </div>
+                </div>
+
+                <div class="team-card">
+                    <div class="team-avatar gradient-6">
+                        <span class="avatar-text">MB</span>
+                    </div>
+                    <h3>Mike Brown</h3>
+                    <p class="team-role">Lead Designer</p>
+                    <p class="team-bio">Award-winning designer with a passion for user experience</p>
+                    <div class="team-social">
+                        <a href="#" class="social-link">💼</a>
+                        <a href="#" class="social-link">🐦</a>
+                        <a href="#" class="social-link">📧</a>
+                    </div>
+                </div>
+
+                <div class="team-card">
+                    <div class="team-avatar gradient-7">
+                        <span class="avatar-text">SE</span>
+                    </div>
+                    <h3>Sarah Evans</h3>
+                    <p class="team-role">Marketing Director</p>
+                    <p class="team-bio">Strategic thinker driving growth and brand awareness</p>
+                    <div class="team-social">
+                        <a href="#" class="social-link">💼</a>
+                        <a href="#" class="social-link">🐦</a>
+                        <a href="#" class="social-link">📧</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Testimonial Cards -->
+        <section class="section">
+            <h2 class="section-title">What Our Clients Say</h2>
+            <div class="testimonial-container">
+                <div class="testimonial-card">
+                    <div class="quote-icon">"</div>
+                    <p class="testimonial-text">This product completely transformed how we work. The team is incredibly responsive and the features are exactly what we needed.</p>
+                    <div class="testimonial-author">
+                        <div class="author-avatar gradient-8">AC</div>
+                        <div class="author-info">
+                            <h4>Alice Cooper</h4>
+                            <p>CEO, TechCorp</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="testimonial-card">
+                    <div class="quote-icon">"</div>
+                    <p class="testimonial-text">Outstanding quality and support. We've seen a 300% increase in productivity since implementation.</p>
+                    <div class="testimonial-author">
+                        <div class="author-avatar gradient-9">BD</div>
+                        <div class="author-info">
+                            <h4>Bob Davis</h4>
+                            <p>CTO, StartupXYZ</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="testimonial-card">
+                    <div class="quote-icon">"</div>
+                    <p class="testimonial-text">Simply the best solution on the market. Easy to use, powerful features, and excellent value for money.</p>
+                    <div class="testimonial-author">
+                        <div class="author-avatar gradient-10">CE</div>
+                        <div class="author-info">
+                            <h4>Carol Edwards</h4>
+                            <p>Director, MegaCorp</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>