create-template-html-css 1.7.0 → 1.8.0

package/demo/css/card-component.css

@@ -1,381 +0,0 @@
-/* CARD Component Styles */
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 100vh;
-    padding: 60px 20px;
-}
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-h1 {
-    text-align: center;
-    color: white;
-    margin-bottom: 10px;
-    font-size: 2.5rem;
-    font-weight: 700;
-}
-
-.subtitle {
-    text-align: center;
-    color: rgba(255, 255, 255, 0.8);
-    margin-bottom: 50px;
-    font-size: 1.1rem;
-}
-
-.cards-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 30px;
-}
-
-/* Card Base */
-.card {
-    background: white;
-    border-radius: 16px;
-    overflow: hidden;
-    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-}
-
-.card:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
-}
-
-.card-header {
-    position: relative;
-    overflow: hidden;
-    height: 200px;
-}
-
-.card-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.4s ease;
-}
-
-.card:hover .card-img {
-    transform: scale(1.08);
-}
-
-/* Badges */
-.card-badge {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-    background: #667eea;
-    color: white;
-    padding: 6px 14px;
-    border-radius: 20px;
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    z-index: 10;
-    animation: slideIn 0.4s ease;
-}
-
-.card-badge.premium {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-}
-
-.card-badge.secondary {
-    background: #43e97b;
-}
-
-.card-badge.interactive {
-    background: #fa709a;
-    animation: pulse 2s infinite;
-}
-
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateX(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.7; }
-}
-
-.card-body {
-    padding: 25px;
-}
-
-.card-category {
-    display: inline-block;
-    color: #667eea;
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 10px;
-}
-
-.card-title {
-    color: #333;
-    font-size: 1.6rem;
-    margin-bottom: 12px;
-    font-weight: 600;
-    line-height: 1.3;
-}
-
-.card-subtitle {
-    color: #666;
-    font-size: 0.95rem;
-    margin-bottom: 15px;
-    font-weight: 500;
-}
-
-.card-text {
-    color: #666;
-    line-height: 1.7;
-    margin-bottom: 20px;
-    font-size: 0.95rem;
-}
-
-.card-price {
-    font-size: 2rem;
-    font-weight: 700;
-    color: #667eea;
-    margin-bottom: 15px;
-}
-
-/* Features List */
-.card-features {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 20px;
-}
-
-.feature {
-    color: #555;
-    font-size: 0.9rem;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-/* Tags */
-.card-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-bottom: 15px;
-}
-
-.tag {
-    display: inline-block;
-    background: #f0f0f0;
-    color: #667eea;
-    padding: 5px 12px;
-    border-radius: 16px;
-    font-size: 0.85rem;
-    font-weight: 500;
-}
-
-/* Meta Information */
-.card-meta {
-    display: flex;
-    gap: 15px;
-    margin-bottom: 20px;
-    font-size: 0.9rem;
-    color: #999;
-}
-
-.meta-item {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-
-/* Button */
-.card-btn {
-    width: 100%;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    border: none;
-    padding: 12px 25px;
-    border-radius: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    position: relative;
-    overflow: hidden;
-}
-
-.card-btn::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.3);
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.card-btn:hover::before {
-    width: 300px;
-    height: 300px;
-}
-
-.card-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
-}
-
-.card-btn:active {
-    transform: translateY(0);
-}
-
-.btn-premium {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-}
-
-.btn-premium:hover {
-    box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
-}
-
-/* Card Variations */
-.card-premium {
-    border-top: 3px solid #f5576c;
-}
-
-.card-minimal .card-body {
-    padding: 20px;
-}
-
-.card-minimal .card-title {
-    font-size: 1.4rem;
-}
-
-.card-minimal .card-text {
-    margin-bottom: 15px;
-}
-
-/* User Card */
-.card-user .card-body {
-    text-align: center;
-    padding: 30px 25px;
-}
-
-.card-avatar {
-    font-size: 3rem;
-    margin-bottom: 15px;
-}
-
-.card-user .card-title {
-    margin-bottom: 5px;
-}
-
-.card-user .card-subtitle {
-    margin-bottom: 15px;
-}
-
-.card-social {
-    display: flex;
-    gap: 10px;
-    margin-top: 20px;
-    justify-content: center;
-}
-
-.social-btn {
-    display: inline-block;
-    padding: 8px 16px;
-    background: #f0f0f0;
-    color: #667eea;
-    text-decoration: none;
-    border-radius: 6px;
-    font-size: 0.85rem;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    cursor: pointer;
-}
-
-.social-btn:hover {
-    background: #667eea;
-    color: white;
-    transform: translateY(-2px);
-}
-
-/* Interactive Card */
-.card-actions {
-    display: flex;
-    gap: 10px;
-    margin-top: 20px;
-}
-
-.action-btn {
-    flex: 1;
-    padding: 10px 12px;
-    background: #f5f5f5;
-    border: 2px solid #e0e0e0;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 0.9rem;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-}
-
-.action-btn:hover {
-    border-color: #667eea;
-    background: #f9f9f9;
-    color: #667eea;
-    transform: translateY(-2px);
-}
-
-.action-btn:active {
-    transform: translateY(0);
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .cards-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    h1 {
-        font-size: 2rem;
-    }
-
-    .card-title {
-        font-size: 1.4rem;
-    }
-
-    .subtitle {
-        font-size: 1rem;
-    }
-}
-        font-size: 2rem;
-    }
-}

package/demo/index.html

@@ -1,169 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Component Demo</title>
-    <!-- Component Styles -->
-    <link rel="stylesheet" href="css/button-component.css">
-    <link rel="stylesheet" href="css/card-component.css">
-    <link rel="stylesheet" href="css/accordion-component.css">
-</head>
-<body>
-    <!-- Header -->
-    <header class="page-header">
-        <h1>Component Library Demo</h1>
-        <p class="subtitle">Showcase of reusable UI components</p>
-    </header>
-
-    <main class="main-content">
-        <!-- Button Component Section -->
-        <section class="component-section">
-            <h2>Button Component</h2>
-            <div class="container">
-                <button class="btn btn-primary">Primary Button</button>
-                <button class="btn btn-secondary">Secondary Button</button>
-                <button class="btn btn-success">Success Button</button>
-                <button class="btn btn-danger">Danger Button</button>
-                <button class="btn btn-outlined">Outlined Button</button>
-                <button class="btn btn-primary" disabled>Disabled Button</button>
-            </div>
-        </section>
-
-        <!-- Card Component Section -->
-        <section class="component-section">
-            <h2>Card Component</h2>
-            <div class="container">
-                <div class="cards-grid">
-                    <!-- Card 1 - Basic -->
-                    <div class="card">
-                        <div class="card-header">
-                            <img src="https://via.placeholder.com/300x200/667eea" alt="Card" class="card-img">
-                            <span class="card-badge">Featured</span>
-                        </div>
-                        <div class="card-body">
-                            <div class="card-category">Technology</div>
-                            <h3 class="card-title">Modern Design</h3>
-                            <p class="card-text">Beautiful and responsive card component.</p>
-                            <div class="card-meta">
-                                <span>⭐ 4.5</span>
-                                <span>📅 Jan 29, 2026</span>
-                            </div>
-                            <button class="card-btn">Learn More</button>
-                        </div>
-                    </div>
-
-                    <!-- Card 2 - Premium -->
-                    <div class="card card-premium">
-                        <div class="card-header">
-                            <img src="https://via.placeholder.com/300x200/764ba2" alt="Premium" class="card-img">
-                            <span class="card-badge premium">Popular</span>
-                        </div>
-                        <div class="card-body">
-                            <div class="card-category">Services</div>
-                            <h3 class="card-title">Premium Package</h3>
-                            <div class="card-price">$29.99/mo</div>
-                            <p class="card-text">Exclusive features and priority support.</p>
-                            <div class="card-features">
-                                <span>✓ Advanced Tools</span>
-                                <span>✓ Priority Support</span>
-                                <span>✓ Analytics</span>
-                            </div>
-                            <button class="card-btn btn-premium">Subscribe Now</button>
-                        </div>
-                    </div>
-
-                    <!-- Card 3 - Blog -->
-                    <div class="card">
-                        <div class="card-header">
-                            <img src="https://via.placeholder.com/300x200/43e97b" alt="Blog" class="card-img">
-                            <span class="card-badge secondary">New</span>
-                        </div>
-                        <div class="card-body">
-                            <div class="card-category">Blog</div>
-                            <h3 class="card-title">Latest Updates</h3>
-                            <p class="card-text">Discover the newest features and improvements.</p>
-                            <div class="card-tags">
-                                <span class="tag">CSS</span>
-                                <span class="tag">Design</span>
-                                <span class="tag">UI</span>
-                            </div>
-                            <button class="card-btn">Read Article</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Accordion Component Section -->
-        <section class="component-section">
-            <h2>Accordion Component</h2>
-            <div class="container">
-                <div class="accordion-wrapper">
-                    <h3>Frequently Asked Questions</h3>
-
-                    <div class="accordion">
-                        <div class="accordion-item">
-                            <button class="accordion-header">
-                                <span>What is this accordion component?</span>
-                                <span class="icon">+</span>
-                            </button>
-                            <div class="accordion-content">
-                                <div class="accordion-body">
-                                    This is a fully functional accordion component that uses DOM manipulation to toggle content visibility. Click on any header to expand or collapse the content.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <button class="accordion-header">
-                                <span>How does it work?</span>
-                                <span class="icon">+</span>
-                            </button>
-                            <div class="accordion-content">
-                                <div class="accordion-body">
-                                    The accordion uses JavaScript to toggle classes on DOM elements. When you click a header, it adds or removes the 'active' class to expand or collapse the content section.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <button class="accordion-header">
-                                <span>Can I customize the content?</span>
-                                <span class="icon">+</span>
-                            </button>
-                            <div class="accordion-content">
-                                <div class="accordion-body">
-                                    Absolutely! You can easily modify the HTML to add your own questions and answers. The styling and functionality will work with any content you add.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="accordion-item">
-                            <button class="accordion-header">
-                                <span>Is it mobile responsive?</span>
-                                <span class="icon">+</span>
-                            </button>
-                            <div class="accordion-content">
-                                <div class="accordion-body">
-                                    Yes! This accordion is fully responsive and works great on all screen sizes - desktop, tablet, and mobile devices.
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    </main>
-
-    <!-- Footer -->
-    <footer class="page-footer">
-        <p>&copy; 2026 Component Library. All rights reserved.</p>
-    </footer>
-
-    <!-- Component Scripts -->
-    <script src="js/button-component.js"></script>
-    <script src="js/card-component.js"></script>
-    <script src="js/accordion-component.js"></script>
-</body>
-</html>

package/demo/js/accordion-component.js

@@ -1,31 +0,0 @@
-// ACCORDION Component Script
-
-// Accordion Component
-
-const accordionHeaders = document.querySelectorAll('.accordion-header');
-
-// Toggle accordion
-function toggleAccordion(e) {
-    const header = e.currentTarget;
-    const item = header.parentElement;
-    
-    // Close all other items
-    document.querySelectorAll('.accordion-item').forEach(accordionItem => {
-        if (accordionItem !== item) {
-            accordionItem.classList.remove('active');
-        }
-    });
-    
-    // Toggle current item
-    item.classList.toggle('active');
-}
-
-// Add event listeners
-accordionHeaders.forEach(header => {
-    header.addEventListener('click', toggleAccordion);
-});
-
-// Optional: Open first item by default
-if (accordionHeaders.length > 0) {
-    accordionHeaders[0].parentElement.classList.add('active');
-}

package/demo/js/button-component.js

@@ -1,17 +0,0 @@
-// BUTTON Component Script
-
-// Button click animations
-document.querySelectorAll('.btn').forEach(button => {
-    button.addEventListener('click', function(e) {
-        if (!this.disabled) {
-            console.log('Button clicked:', this.textContent);
-            
-            // Ripple effect
-            const ripple = document.createElement('span');
-            ripple.classList.add('ripple');
-            this.appendChild(ripple);
-            
-            setTimeout(() => ripple.remove(), 600);
-        }
-    });
-});