npm - create-template-html-css - Versions diffs - 1.4.1 → 1.4.3 - Mend

create-template-html-css 1.4.1 → 1.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md +18 -0
package/README.md +18 -12
package/package.json +1 -1
package/templates/card/index.html +106 -16
package/templates/card/script.js +120 -7
package/templates/card/style.css +293 -17

package/CHANGELOG.md CHANGED Viewed

@@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## [1.4.3] - 2025-01-29
+### Documentation
+- Enhanced README with detailed card template variations
+- Added comprehensive card features and interactions documentation
+- Improved visual presentation of template capabilities
+## [1.4.2] - 2025-01-29
+### Enhanced
+- **Card Template Improvements**:
+  - 6 professional card variations: Modern (featured), Premium (pricing), Blog (tags), Minimal (clean), User Profile (avatar), Interactive (action buttons)
+  - Rich interactions: like/save buttons, social links, tag filtering, toast notifications
+  - Professional gradient styling and animations
+  - Enhanced badges, metadata displays (ratings, dates, comments, authors)
+  - Improved hover effects and button animations with ripple effect
+  - Better mobile responsiveness
 ## [1.4.1] - 2025-01-29
 ### Improved

package/README.md CHANGED Viewed

@@ -161,21 +161,27 @@ A collection of styled button components with multiple variations:
 - Beautiful gradients
 - Click animations
-### 2. Card
+### 2. Card ✨
-Responsive card component for displaying content:
+Responsive card component with 6 professional variations:
-**Includes:**
-- Image container
-- Title and description
-- Action button
-- Metadata section
+**Variations:**
+- **Modern Card** - Featured item with badge, category, rating, and date metadata
+- **Premium Card** - Pricing card with feature list and gradient styling
+- **Blog Card** - Content card with tags, author info, and comment counts
+- **Minimal Card** - Clean, simplified design for minimal content
+- **User Profile Card** - Avatar-based card with social media links
+- **Interactive Card** - Action buttons for like, share, and save functionality
 **Features:**
+- Rich metadata displays (ratings, dates, comments, authors)
+- Animated action buttons with state management
+- Tag-based filtering system
+- Toast notifications
+- Professional gradients and animations
 - Hover image zoom effect
 - Advanced shadow effects
-- Responsive grid layout
-- Flexible content
+- Fully responsive grid layout
 ### 3. Form
@@ -609,9 +615,9 @@ The only requirement is to include a copy of the license and copyright notice.
 ## 👨‍💻 Author
-**Ben Shabbat**
+**DavidChen Benshabbat**
 - GitHub: [@benshabbat](https://github.com/benshabbat)
-- Email: benshabbat@example.com
+- Email: benshabbat27@gmail.com
 ## 🔗 Links
@@ -635,6 +641,6 @@ If you find this project helpful, please consider:
 ---
-Made with ❤️ by Ben Shabbat
+Made with ❤️ by  DavidChen Benshabbat
 **Happy coding! 🚀**

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-template-html-css",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "CLI tool to generate HTML and CSS templates for common UI elements",
   "main": "src/index.js",
   "bin": {

package/templates/card/index.html CHANGED Viewed

@@ -9,44 +9,134 @@
 <body>
     <div class="container">
         <h1>Card Components</h1>
+        <p class="subtitle">Explore different card variations and designs</p>
         <div class="cards-grid">
-            <!-- Card 1 -->
+            <!-- Card 1 - Basic -->
             <div class="card">
-                <img src="https://via.placeholder.com/300x200" alt="Card Image" class="card-img">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/667eea" alt="Card Image" class="card-img">
+                    <span class="card-badge">Featured</span>
+                </div>
                 <div class="card-body">
-                    <h2 class="card-title">Card Title</h2>
+                    <div class="card-category">Technology</div>
+                    <h2 class="card-title">Modern Card Design</h2>
                     <p class="card-text">
-                        This is a card description. Here you can add more information about the content.
+                        This is a beautifully designed card with rich information and interactive elements.
                     </p>
-                    <button class="card-btn">Read More</button>
+                    <div class="card-meta">
+                        <span class="meta-item">⭐ 4.5</span>
+                        <span class="meta-item">📅 Jan 29, 2026</span>
+                    </div>
+                    <button class="card-btn">Learn More</button>
                 </div>
             </div>
-            <!-- Card 2 -->
-            <div class="card">
-                <img src="https://via.placeholder.com/300x200/667eea" alt="Card Image" class="card-img">
+            <!-- Card 2 - With Price -->
+            <div class="card card-premium">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/764ba2" alt="Premium Card" class="card-img">
+                    <span class="card-badge premium">Popular</span>
+                </div>
                 <div class="card-body">
-                    <h2 class="card-title">Styled Card</h2>
+                    <div class="card-category">Services</div>
+                    <h2 class="card-title">Premium Package</h2>
+                    <div class="card-price">$29.99/mo</div>
                     <p class="card-text">
-                        Clean and modern design with shadows and animations.
+                        Get exclusive access to premium features and priority support.
                     </p>
-                    <button class="card-btn">Learn More</button>
+                    <div class="card-features">
+                        <span class="feature">✓ Advanced Tools</span>
+                        <span class="feature">✓ Priority Support</span>
+                        <span class="feature">✓ Analytics</span>
+                    </div>
+                    <button class="card-btn btn-premium">Subscribe Now</button>
                 </div>
             </div>
-            <!-- Card 3 -->
+            <!-- Card 3 - With Tags -->
             <div class="card">
-                <img src="https://via.placeholder.com/300x200/764ba2" alt="Card Image" class="card-img">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/43e97b" alt="Blog Card" class="card-img">
+                    <span class="card-badge secondary">New</span>
+                </div>
+                <div class="card-body">
+                    <div class="card-category">Blog</div>
+                    <h2 class="card-title">Latest Updates</h2>
+                    <p class="card-text">
+                        Discover the newest features and improvements in our latest release.
+                    </p>
+                    <div class="card-tags">
+                        <span class="tag">CSS</span>
+                        <span class="tag">Design</span>
+                        <span class="tag">UI</span>
+                    </div>
+                    <div class="card-meta">
+                        <span class="meta-item">👤 By Admin</span>
+                        <span class="meta-item">💬 12 Comments</span>
+                    </div>
+                    <button class="card-btn">Read Article</button>
+                </div>
+            </div>
+            <!-- Card 4 - Minimal -->
+            <div class="card card-minimal">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/fa709a" alt="Minimal Card" class="card-img">
+                </div>
+                <div class="card-body">
+                    <h2 class="card-title">Clean & Simple</h2>
+                    <p class="card-text">
+                        A minimalist approach to card design focusing on essential information.
+                    </p>
+                    <button class="card-btn">Explore</button>
+                </div>
+            </div>
+            <!-- Card 5 - With Avatar -->
+            <div class="card card-user">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/feca57" alt="User Card" class="card-img">
+                </div>
                 <div class="card-body">
-                    <h2 class="card-title">Third Card</h2>
+                    <div class="card-avatar">👨‍💼</div>
+                    <h2 class="card-title">John Developer</h2>
+                    <p class="card-subtitle">Full Stack Developer</p>
                     <p class="card-text">
-                        More interesting content displayed in an attractive and pleasant way.
+                        Passionate about creating beautiful and functional web experiences.
                     </p>
-                    <button class="card-btn">Get Started</button>
+                    <div class="card-social">
+                        <a href="#" class="social-btn">GitHub</a>
+                        <a href="#" class="social-btn">Twitter</a>
+                        <a href="#" class="social-btn">LinkedIn</a>
+                    </div>
+                </div>
+            </div>
+            <!-- Card 6 - Interactive -->
+            <div class="card card-interactive">
+                <div class="card-header">
+                    <img src="https://via.placeholder.com/300x200/48dbfb" alt="Interactive Card" class="card-img">
+                    <span class="card-badge interactive">Hot</span>
+                </div>
+                <div class="card-body">
+                    <div class="card-category">Trending</div>
+                    <h2 class="card-title">Interactive Components</h2>
+                    <p class="card-text">
+                        Engage your users with interactive and dynamic card elements.
+                    </p>
+                    <div class="card-actions">
+                        <button class="action-btn" data-action="like">❤️ Like</button>
+                        <button class="action-btn" data-action="share">🔗 Share</button>
+                        <button class="action-btn" data-action="save">⭐ Save</button>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
+    <script src="script.js"></script>
+</body>
+</html>
 </body>
 </html>

package/templates/card/script.js CHANGED Viewed

@@ -1,9 +1,122 @@
-// Card interactions
-document.querySelectorAll('.card-btn').forEach(button => {
-    button.addEventListener('click', function() {
-        const card = this.closest('.card');
-        const title = card.querySelector('.card-title').textContent;
-        console.log(`Card clicked: ${title}`);
-        alert(`Clicked on: ${title}`);
+document.addEventListener('DOMContentLoaded', function() {
+    // Action buttons functionality
+    const actionBtns = document.querySelectorAll('.action-btn');
+    actionBtns.forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            const action = this.getAttribute('data-action');
+            const card = this.closest('.card');
+            if (action === 'like') {
+                this.classList.toggle('liked');
+                this.textContent = this.classList.contains('liked') ? '❤️ Liked' : '🤍 Like';
+            } else if (action === 'share') {
+                showNotification('Shared!');
+            } else if (action === 'save') {
+                this.classList.toggle('saved');
+                this.textContent = this.classList.contains('saved') ? '✓ Saved' : '🔖 Save';
+            }
+        });
     });
+    // Social buttons functionality
+    const socialBtns = document.querySelectorAll('.social-btn');
+    socialBtns.forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            const platform = this.getAttribute('data-platform');
+            showNotification(`Opening ${platform}...`);
+        });
+    });
+    // Tags click functionality
+    const tags = document.querySelectorAll('.tag');
+    tags.forEach(tag => {
+        tag.style.cursor = 'pointer';
+        tag.addEventListener('click', function() {
+            showNotification(`Filtered by: ${this.textContent}`);
+        });
+    });
+    // Card click animations
+    const cards = document.querySelectorAll('.card');
+    cards.forEach(card => {
+        card.addEventListener('mousedown', function() {
+            this.style.transition = 'all 0.1s ease';
+        });
+        card.addEventListener('mouseup', function() {
+            this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+        });
+    });
+    // Categories click
+    const categories = document.querySelectorAll('.card-category');
+    categories.forEach(cat => {
+        cat.style.cursor = 'pointer';
+        cat.addEventListener('click', function(e) {
+            e.stopPropagation();
+            showNotification(`Category: ${this.textContent}`);
+        });
+    });
+    // Notification system
+    function showNotification(message) {
+        const notification = document.createElement('div');
+        notification.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 25px;
+            border-radius: 8px;
+            font-weight: 600;
+            z-index: 9999;
+            animation: slideInRight 0.3s ease;
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+        `;
+        notification.textContent = message;
+        document.body.appendChild(notification);
+        setTimeout(() => {
+            notification.style.animation = 'slideOutRight 0.3s ease';
+            setTimeout(() => notification.remove(), 300);
+        }, 2000);
+    }
+    // Add animation styles
+    if (!document.getElementById('card-animations')) {
+        const style = document.createElement('style');
+        style.id = 'card-animations';
+        style.textContent = `
+            @keyframes slideInRight {
+                from {
+                    opacity: 0;
+                    transform: translateX(100px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateX(0);
+                }
+            }
+            @keyframes slideOutRight {
+                from {
+                    opacity: 1;
+                    transform: translateX(0);
+                }
+                to {
+                    opacity: 0;
+                    transform: translateX(100px);
+                }
+            }
+            .action-btn.liked, .action-btn.saved {
+                border-color: #667eea;
+                background: rgba(102, 126, 234, 0.1);
+                color: #667eea;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    console.log('✨ Card interactions loaded successfully!');
 });

package/templates/card/style.css CHANGED Viewed

@@ -6,9 +6,9 @@
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 100vh;
-    padding: 40px 20px;
+    padding: 60px 20px;
 }
 .container {
@@ -18,58 +18,198 @@ body {
 h1 {
     text-align: center;
-    color: #333;
-    margin-bottom: 40px;
+    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(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
 }
+/* Card Base */
 .card {
     background: white;
-    border-radius: 15px;
+    border-radius: 16px;
     overflow: hidden;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
+    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(-10px);
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+    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: 200px;
+    height: 100%;
     object-fit: cover;
-    transition: transform 0.3s ease;
+    transition: transform 0.4s ease;
 }
 .card:hover .card-img {
-    transform: scale(1.1);
+    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.5rem;
+    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.6;
+    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;
@@ -80,18 +220,143 @@ h1 {
     cursor: pointer;
     transition: all 0.3s ease;
     text-transform: uppercase;
-    letter-spacing: 1px;
+    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 5px 15px rgba(102, 126, 234, 0.4);
+    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;
@@ -100,4 +365,15 @@ h1 {
     h1 {
         font-size: 2rem;
     }
+    .card-title {
+        font-size: 1.4rem;
+    }
+    .subtitle {
+        font-size: 1rem;
+    }
+}
+        font-size: 2rem;
+    }
 }