create-template-html-css 1.2.2 → 1.3.0

package/templates/masonry-grid/script.js

@@ -0,0 +1,122 @@
+// Masonry Grid Component JavaScript
+console.log('Masonry Grid Component initialized');
+
+document.addEventListener('DOMContentLoaded', () => {
+    const filterButtons = document.querySelectorAll('.filter-btn');
+    const masonryItems = document.querySelectorAll('.masonry-item');
+
+    // Filter functionality
+    filterButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            // Remove active class from all buttons
+            filterButtons.forEach(btn => btn.classList.remove('active'));
+            
+            // Add active class to clicked button
+            this.classList.add('active');
+
+            const filterValue = this.getAttribute('data-filter');
+
+            // Filter items with animation
+            masonryItems.forEach((item, index) => {
+                const category = item.getAttribute('data-category');
+                
+                if (filterValue === 'all' || category === filterValue) {
+                    // Show item with staggered animation
+                    setTimeout(() => {
+                        item.classList.remove('hidden');
+                        item.style.animation = 'fadeInUp 0.6s ease forwards';
+                    }, index * 50);
+                } else {
+                    // Hide item
+                    item.style.animation = 'fadeOut 0.3s ease forwards';
+                    setTimeout(() => {
+                        item.classList.add('hidden');
+                    }, 300);
+                }
+            });
+
+            console.log('Filter applied:', filterValue);
+        });
+    });
+
+    // Add click handlers to masonry items
+    masonryItems.forEach(item => {
+        item.addEventListener('click', function() {
+            const title = this.querySelector('h3').textContent;
+            console.log('Item clicked:', title);
+            
+            // Add pulse effect
+            this.style.animation = 'pulse 0.5s ease';
+            setTimeout(() => {
+                this.style.animation = '';
+            }, 500);
+
+            // You can add modal or detailed view here
+        });
+    });
+
+    // Like button functionality (if you want to add interactive hearts)
+    const metaItems = document.querySelectorAll('.item-meta span:last-child');
+    metaItems.forEach(meta => {
+        meta.style.cursor = 'pointer';
+        meta.addEventListener('click', function(e) {
+            e.stopPropagation();
+            const currentLikes = parseInt(this.textContent.match(/\d+/)[0]);
+            const newLikes = currentLikes + 1;
+            this.textContent = `❤️ ${newLikes}`;
+            
+            // Add animation
+            this.style.transform = 'scale(1.3)';
+            setTimeout(() => {
+                this.style.transform = 'scale(1)';
+            }, 300);
+        });
+    });
+
+    // Intersection Observer for lazy animation
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+            }
+        });
+    }, observerOptions);
+
+    masonryItems.forEach(item => {
+        observer.observe(item);
+    });
+
+    console.log('Total items:', masonryItems.length);
+});
+
+// Add fadeOut animation style
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        to {
+            opacity: 0;
+            transform: translateY(-20px);
+        }
+    }
+    
+    @keyframes pulse {
+        0%, 100% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(0.98);
+        }
+    }
+`;
+document.head.appendChild(style);

package/templates/masonry-grid/style.css

@@ -0,0 +1,259 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+    min-height: 100vh;
+    padding: 40px 20px;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+/* Header */
+.header {
+    text-align: center;
+    padding: 60px 20px;
+    margin-bottom: 60px;
+    animation: fadeInDown 0.8s ease;
+}
+
+.header h1 {
+    font-size: 4rem;
+    color: white;
+    margin-bottom: 15px;
+    font-weight: 700;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.header p {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 40px;
+}
+
+/* Filter Buttons */
+.filter-buttons {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.filter-btn {
+    padding: 12px 30px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    border-radius: 30px;
+    color: white;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.filter-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-3px);
+}
+
+.filter-btn.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-color: transparent;
+    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+}
+
+/* Masonry Grid */
+.masonry-grid {
+    column-count: 4;
+    column-gap: 25px;
+    padding: 20px;
+}
+
+.masonry-item {
+    break-inside: avoid;
+    margin-bottom: 25px;
+    opacity: 0;
+    animation: fadeInUp 0.6s ease forwards;
+    transition: all 0.3s ease;
+}
+
+.masonry-item.hidden {
+    display: none;
+}
+
+/* Stagger animation delays */
+.masonry-item:nth-child(1) { animation-delay: 0.1s; }
+.masonry-item:nth-child(2) { animation-delay: 0.2s; }
+.masonry-item:nth-child(3) { animation-delay: 0.3s; }
+.masonry-item:nth-child(4) { animation-delay: 0.4s; }
+.masonry-item:nth-child(5) { animation-delay: 0.5s; }
+.masonry-item:nth-child(6) { animation-delay: 0.6s; }
+.masonry-item:nth-child(7) { animation-delay: 0.7s; }
+.masonry-item:nth-child(8) { animation-delay: 0.8s; }
+.masonry-item:nth-child(9) { animation-delay: 0.9s; }
+.masonry-item:nth-child(10) { animation-delay: 1s; }
+.masonry-item:nth-child(11) { animation-delay: 1.1s; }
+.masonry-item:nth-child(12) { animation-delay: 1.2s; }
+
+/* Item Content */
+.item-content {
+    position: relative;
+    border-radius: 20px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 30px;
+    min-height: 250px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+.masonry-item.tall .item-content {
+    min-height: 400px;
+}
+
+.item-content::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.3);
+    transition: background 0.3s ease;
+}
+
+.item-content:hover::before {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.item-content:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+}
+
+/* Category Tag */
+.category-tag {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    padding: 8px 20px;
+    border-radius: 20px;
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 600;
+    z-index: 2;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* Item Info */
+.item-info {
+    position: relative;
+    z-index: 2;
+    color: white;
+}
+
+.item-info h3 {
+    font-size: 1.8rem;
+    margin-bottom: 10px;
+    font-weight: 700;
+}
+
+.item-info p {
+    font-size: 1.1rem;
+    margin-bottom: 20px;
+    opacity: 0.95;
+}
+
+.item-meta {
+    display: flex;
+    gap: 20px;
+    font-size: 1rem;
+    opacity: 0.9;
+}
+
+/* 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%); }
+.gradient-11 { background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%); }
+.gradient-12 { background: linear-gradient(135deg, #f77062 0%, #fe5196 100%); }
+
+/* Animations */
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .masonry-grid {
+        column-count: 3;
+    }
+}
+
+@media (max-width: 900px) {
+    .masonry-grid {
+        column-count: 2;
+    }
+
+    .header h1 {
+        font-size: 3rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .masonry-grid {
+        column-count: 1;
+    }
+
+    .header h1 {
+        font-size: 2.5rem;
+    }
+
+    .header p {
+        font-size: 1.2rem;
+    }
+
+    .item-info h3 {
+        font-size: 1.5rem;
+    }
+
+    .masonry-item.tall .item-content {
+        min-height: 300px;
+    }
+}

package/templates/spinner/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Loading Spinner Component</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Loading Spinners</h1>
+        
+        <!-- Circle Spinner -->
+        <div class="spinner-group">
+            <h3>Circle Spinner</h3>
+            <div class="spinner spinner-circle"></div>
+        </div>
+        
+        <!-- Dots Spinner -->
+        <div class="spinner-group">
+            <h3>Bouncing Dots</h3>
+            <div class="spinner spinner-dots">
+                <div class="dot"></div>
+                <div class="dot"></div>
+                <div class="dot"></div>
+            </div>
+        </div>
+        
+        <!-- Pulse Spinner -->
+        <div class="spinner-group">
+            <h3>Pulse Loader</h3>
+            <div class="spinner spinner-pulse"></div>
+        </div>
+        
+        <!-- Bar Spinner -->
+        <div class="spinner-group">
+            <h3>Bar Loader</h3>
+            <div class="spinner spinner-bars">
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+            </div>
+        </div>
+        
+        <!-- Gradient Spinner -->
+        <div class="spinner-group">
+            <h3>Gradient Ring</h3>
+            <div class="spinner spinner-gradient"></div>
+        </div>
+    </div>
+    
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/spinner/script.js

@@ -0,0 +1,22 @@
+// Loading Spinner Component JavaScript
+console.log('Loading Spinner Component initialized');
+
+// Optional: Simulate loading state
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('All spinners are animated and ready');
+});
+
+// Example function to show/hide spinner
+function showSpinner(spinnerId) {
+    const spinner = document.getElementById(spinnerId);
+    if (spinner) {
+        spinner.style.display = 'block';
+    }
+}
+
+function hideSpinner(spinnerId) {
+    const spinner = document.getElementById(spinnerId);
+    if (spinner) {
+        spinner.style.display = 'none';
+    }
+}

package/templates/spinner/style.css

@@ -0,0 +1,207 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 40px 20px;
+}
+
+.container {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 50px 40px;
+    border-radius: 20px;
+    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.3);
+    max-width: 900px;
+    width: 100%;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 50px;
+    color: #1e3c72;
+    font-size: 2.5rem;
+    font-weight: 700;
+}
+
+.spinner-group {
+    margin: 40px 0;
+    text-align: center;
+    padding: 30px;
+    background: #f8f9fa;
+    border-radius: 15px;
+}
+
+.spinner-group h3 {
+    margin-bottom: 25px;
+    color: #333;
+    font-size: 1.3rem;
+}
+
+/* Circle Spinner */
+.spinner-circle {
+    width: 60px;
+    height: 60px;
+    border: 6px solid #e0e0e0;
+    border-top-color: #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Dots Spinner */
+.spinner-dots {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    align-items: center;
+}
+
+.spinner-dots .dot {
+    width: 18px;
+    height: 18px;
+    background: #667eea;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.spinner-dots .dot:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.spinner-dots .dot:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+@keyframes bounce {
+    0%, 80%, 100% {
+        transform: scale(0);
+        opacity: 0.5;
+    }
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+/* Pulse Spinner */
+.spinner-pulse {
+    width: 60px;
+    height: 60px;
+    background: #667eea;
+    border-radius: 50%;
+    animation: pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    margin: 0 auto;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(0.8);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.2);
+        opacity: 0.5;
+    }
+}
+
+/* Bar Spinner */
+.spinner-bars {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    align-items: center;
+    height: 60px;
+}
+
+.spinner-bars .bar {
+    width: 8px;
+    background: #667eea;
+    border-radius: 4px;
+    animation: stretch 1.2s ease-in-out infinite;
+}
+
+.spinner-bars .bar:nth-child(1) {
+    animation-delay: -0.4s;
+}
+
+.spinner-bars .bar:nth-child(2) {
+    animation-delay: -0.3s;
+}
+
+.spinner-bars .bar:nth-child(3) {
+    animation-delay: -0.2s;
+}
+
+.spinner-bars .bar:nth-child(4) {
+    animation-delay: -0.1s;
+}
+
+@keyframes stretch {
+    0%, 100% {
+        height: 20px;
+    }
+    50% {
+        height: 60px;
+    }
+}
+
+/* Gradient Spinner */
+.spinner-gradient {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: conic-gradient(
+        from 0deg,
+        transparent 0deg,
+        #667eea 90deg,
+        #764ba2 180deg,
+        transparent 270deg
+    );
+    animation: rotate 1.5s linear infinite;
+    margin: 0 auto;
+    position: relative;
+}
+
+.spinner-gradient::before {
+    content: '';
+    position: absolute;
+    inset: 6px;
+    background: #f8f9fa;
+    border-radius: 50%;
+}
+
+@keyframes rotate {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 30px 20px;
+    }
+    
+    h1 {
+        font-size: 2rem;
+    }
+    
+    .spinner-group {
+        padding: 20px;
+        margin: 25px 0;
+    }
+}