Add more features

components/feature-card.js

@@ -0,0 +1,51 @@
+class FeatureCard extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .feature-card {
+          background: white;
+          border-radius: 0.5rem;
+          padding: 1.5rem;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+          transition: all 0.3s ease;
+          height: 100%;
+        }
+        .feature-card:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        }
+        .icon-container {
+          display: inline-flex;
+          padding: 0.75rem;
+          border-radius: 50%;
+          margin-bottom: 1rem;
+        }
+        h3 {
+          font-size: 1.25rem;
+          font-weight: 600;
+          margin-bottom: 0.75rem;
+          color: #1f2937;
+        }
+        p {
+          color: #6b7280;
+          margin-bottom: 1rem;
+        }
+        .feature-content {
+          margin-top: 1rem;
+        }
+      </style>
+      <div class="feature-card">
+        <div class="icon-container" style="background: ${this.getAttribute('icon-bg') || '#eef2ff'}; color: ${this.getAttribute('icon-color') || '#6366f1'}">
+          <i data-feather="${this.getAttribute('icon') || 'star'}"></i>
+        </div>
+        <h3>${this.getAttribute('title') || 'Feature'}</h3>
+        <p>${this.getAttribute('description') || 'Feature description'}</p>
+        <div class="feature-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define('feature-card', FeatureCard);

features.html

@@ -15,128 +15,146 @@
         <div class="max-w-6xl mx-auto">
             <h1 class="text-4xl font-bold text-gray-800 mb-4 text-center">Advanced Features</h1>
             <p class="text-xl text-gray-600 mb-12 text-center max-w-3xl mx-auto">Explore all the powerful tools to customize your handwriting experience</p>
-            
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Feature 1 -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <div class="p-6">
-                        <div class="flex items-center gap-3 mb-4">
-                            <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
-                                <i data-feather="type"></i>
-                            </div>
-                            <h3 class="text-xl font-semibold text-gray-800">Multiple Fonts</h3>
-                        </div>
-                        <p class="text-gray-600">Choose from 10+ realistic handwriting styles to match your personal writing</p>
-                        <div class="mt-4">
-                            <select class="w-full border border-gray-300 rounded-lg px-4 py-2">
-                                <option>Standard Handwriting</option>
-                                <option>Neat Print</option>
-                                <option>Casual Script</option>
-                                <option>Formal Cursive</option>
-                            </select>
-                        </div>
+                <feature-card 
+                    icon="type" 
+                    title="Multiple Fonts" 
+                    description="Choose from 10+ realistic handwriting styles" 
+                    icon-color="#6366f1" 
+                    icon-bg="#e0e7ff">
+                    <select class="w-full border border-gray-300 rounded-lg px-4 py-2 mt-2">
+                        <option>Standard Handwriting</option>
+                        <option>Neat Print</option>
+                        <option>Casual Script</option>
+                        <option>Formal Cursive</option>
+                    </select>
+                </feature-card>
+
+                <feature-card 
+                    icon="droplet" 
+                    title="Ink Colors" 
+                    description="Customize with various ink colors and textures" 
+                    icon-color="#ec4899" 
+                    icon-bg="#fce7f3">
+                    <div class="mt-2 flex gap-2 flex-wrap">
+                        <div class="w-8 h-8 rounded-full bg-black cursor-pointer border-2 border-gray-200"></div>
+                        <div class="w-8 h-8 rounded-full bg-blue-600 cursor-pointer"></div>
+                        <div class="w-8 h-8 rounded-full bg-red-600 cursor-pointer"></div>
+                        <div class="w-8 h-8 rounded-full bg-green-600 cursor-pointer"></div>
+                        <div class="w-8 h-8 rounded-full bg-yellow-500 cursor-pointer"></div>
                     </div>
-                </div>
+                </feature-card>
 
-                <!-- Feature 2 -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <div class="p-6">
-                        <div class="flex items-center gap-3 mb-4">
-                            <div class="p-3 rounded-full bg-pink-100 text-pink-600">
-                                <i data-feather="droplet"></i>
-                            </div>
-                            <h3 class="text-xl font-semibold text-gray-800">Ink Colors</h3>
-                        </div>
-                        <p class="text-gray-600">Customize with various ink colors and textures</p>
-                        <div class="mt-4 flex gap-2 flex-wrap">
-                            <div class="w-8 h-8 rounded-full bg-black cursor-pointer border-2 border-gray-200"></div>
-                            <div class="w-8 h-8 rounded-full bg-blue-600 cursor-pointer"></div>
-                            <div class="w-8 h-8 rounded-full bg-red-600 cursor-pointer"></div>
-                            <div class="w-8 h-8 rounded-full bg-green-600 cursor-pointer"></div>
-                            <div class="w-8 h-8 rounded-full bg-yellow-500 cursor-pointer"></div>
-                        </div>
+                <feature-card 
+                    icon="paperclip" 
+                    title="Paper Styles" 
+                    description="Select different paper backgrounds and textures" 
+                    icon-color="#8b5cf6" 
+                    icon-bg="#ede9fe">
+                    <div class="mt-2 grid grid-cols-3 gap-2">
+                        <div class="h-12 bg-white border cursor-pointer"></div>
+                        <div class="h-12 bg-gray-50 border cursor-pointer"></div>
+                        <div class="h-12 bg-amber-50 border cursor-pointer"></div>
                     </div>
-                </div>
+                </feature-card>
 
-                <!-- Feature 3 -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <div class="p-6">
-                        <div class="flex items-center gap-3 mb-4">
-                            <div class="p-3 rounded-full bg-purple-100 text-purple-600">
-                                <i data-feather="paperclip"></i>
-                            </div>
-                            <h3 class="text-xl font-semibold text-gray-800">Paper Styles</h3>
-                        </div>
-                        <p class="text-gray-600">Select different paper backgrounds and textures</p>
-                        <div class="mt-4 grid grid-cols-3 gap-2">
-                            <div class="h-12 bg-white border cursor-pointer"></div>
-                            <div class="h-12 bg-gray-50 border cursor-pointer"></div>
-                            <div class="h-12 bg-amber-50 border cursor-pointer"></div>
-                        </div>
+                <feature-card 
+                    icon="download-cloud" 
+                    title="Export Options" 
+                    description="Save your work in multiple formats" 
+                    icon-color="#3b82f6" 
+                    icon-bg="#dbeafe">
+                    <div class="mt-2 flex gap-3">
+                        <button class="px-4 py-2 bg-blue-100 text-blue-600 rounded-lg text-sm font-medium">PNG</button>
+                        <button class="px-4 py-2 bg-blue-100 text-blue-600 rounded-lg text-sm font-medium">PDF</button>
+                        <button class="px-4 py-2 bg-blue-100 text-blue-600 rounded-lg text-sm font-medium">SVG</button>
                     </div>
-                </div>
+                </feature-card>
 
-                <!-- Feature 4 -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <div class="p-6">
-                        <div class="flex items-center gap-3 mb-4">
-                            <div class="p-3 rounded-full bg-blue-100 text-blue-600">
-                                <i data-feather="download-cloud"></i>
-                            </div>
-                            <h3 class="text-xl font-semibold text-gray-800">Export Options</h3>
-                        </div>
-                        <p class="text-gray-600">Save your work in multiple formats</p>
-                        <div class="mt-4 flex gap-3">
-                            <button class="px-4 py-2 bg-blue-100 text-blue-600 rounded-lg text-sm font-medium">PNG</button>
-                            <button class="px-4 py-2 bg-blue-100 text-blue-600 rounded-lg text-sm font-medium">PDF</button>
-                            <button class="px-4 py-2 bg-blue-100 text-blue-600 rounded-lg text-sm font-medium">SVG</button>
-                        </div>
+                <feature-card 
+                    icon="share-2" 
+                    title="Sharing" 
+                    description="Share directly to social media or generate a link" 
+                    icon-color="#10b981" 
+                    icon-bg="#d1fae5">
+                    <div class="mt-2 flex gap-3">
+                        <button class="px-4 py-2 bg-green-100 text-green-600 rounded-lg text-sm font-medium flex items-center gap-1">
+                            <i data-feather="twitter" class="w-4 h-4"></i> Tweet
+                        </button>
+                        <button class="px-4 py-2 bg-green-100 text-green-600 rounded-lg text-sm font-medium">Copy Link</button>
                     </div>
-                </div>
+                </feature-card>
 
-                <!-- Feature 5 -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <div class="p-6">
-                        <div class="flex items-center gap-3 mb-4">
-                            <div class="p-3 rounded-full bg-green-100 text-green-600">
-                                <i data-feather="share-2"></i>
-                            </div>
-                            <h3 class="text-xl font-semibold text-gray-800">Sharing</h3>
+                <feature-card 
+                    icon="settings" 
+                    title="Advanced Settings" 
+                    description="Fine-tune your handwriting appearance" 
+                    icon-color="#f59e0b" 
+                    icon-bg="#fef3c7">
+                    <div class="mt-2 space-y-3">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-600">Letter Spacing</span>
+                            <input type="range" class="w-24">
                         </div>
-                        <p class="text-gray-600">Share directly to social media or generate a link</p>
-                        <div class="mt-4 flex gap-3">
-                            <button class="px-4 py-2 bg-green-100 text-green-600 rounded-lg text-sm font-medium flex items-center gap-1">
-                                <i data-feather="twitter" class="w-4 h-4"></i> Tweet
-                            </button>
-                            <button class="px-4 py-2 bg-green-100 text-green-600 rounded-lg text-sm font-medium">Copy Link</button>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-600">Line Height</span>
+                            <input type="range" class="w-24">
                         </div>
                     </div>
-                </div>
+                </feature-card>
 
-                <!-- Feature 6 -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <div class="p-6">
-                        <div class="flex items-center gap-3 mb-4">
-                            <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
-                                <i data-feather="settings"></i>
-                            </div>
-                            <h3 class="text-xl font-semibold text-gray-800">Advanced Settings</h3>
+                <feature-card 
+                    icon="bold" 
+                    title="Pen Pressure" 
+                    description="Simulate natural pen pressure variations" 
+                    icon-color="#ef4444" 
+                    icon-bg="#fee2e2">
+                    <div class="mt-2 space-y-3">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-600">Pressure Variance</span>
+                            <input type="range" class="w-24">
                         </div>
-                        <p class="text-gray-600">Fine-tune your handwriting appearance</p>
-                        <div class="mt-4 space-y-3">
-                            <div class="flex items-center justify-between">
-                                <span class="text-sm text-gray-600">Letter Spacing</span>
-                                <input type="range" class="w-24">
-                            </div>
-                            <div class="flex items-center justify-between">
-                                <span class="text-sm text-gray-600">Line Height</span>
-                                <input type="range" class="w-24">
-                            </div>
+                        <div class="flex items-center gap-2">
+                            <input type="checkbox" id="randomPressure" class="rounded text-red-500">
+                            <label for="randomPressure" class="text-sm text-gray-600">Random variation</label>
                         </div>
                     </div>
-                </div>
+                </feature-card>
+
+                <feature-card 
+                    icon="layers" 
+                    title="Multilingual Support" 
+                    description="Supports multiple languages and scripts" 
+                    icon-color="#14b8a6" 
+                    icon-bg="#ccfbf1">
+                    <div class="mt-2">
+                        <select class="w-full border border-gray-300 rounded-lg px-4 py-2">
+                            <option>English</option>
+                            <option>Spanish</option>
+                            <option>French</option>
+                            <option>German</option>
+                            <option>Japanese</option>
+                        </select>
+                    </div>
+                </feature-card>
+
+                <feature-card 
+                    icon="bookmark" 
+                    title="Templates" 
+                    description="Save and reuse your favorite settings" 
+                    icon-color="#8b5cf6" 
+                    icon-bg="#ede9fe">
+                    <div class="mt-2 space-y-2">
+                        <button class="w-full px-4 py-2 bg-purple-100 text-purple-600 rounded-lg text-sm font-medium">
+                            Save Current Settings
+                        </button>
+                        <button class="w-full px-4 py-2 bg-white border border-purple-200 text-purple-600 rounded-lg text-sm font-medium">
+                            Load Template
+                        </button>
+                    </div>
+                </feature-card>
             </div>
-        </div>
+</div>
     </main>
 
     <custom-footer></custom-footer>

index.html

@@ -63,6 +63,7 @@
 
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
+    <script src="components/feature-card.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();

script.js

@@ -1,12 +1,32 @@
+
 document.addEventListener('DOMContentLoaded', function() {
+    // Initialize all feature cards
+    document.querySelectorAll('feature-card').forEach(card => {
+        feather.replace({ 'data-feather': card.shadowRoot.querySelector('[data-feather]') });
+    });
+
     const inputText = document.getElementById('inputText');
     const generateBtn = document.getElementById('generateBtn');
     const downloadBtn = document.getElementById('downloadBtn');
     const outputCanvas = document.getElementById('outputCanvas');
     const showLines = document.getElementById('showLines');
+    const fontSizeInput = document.getElementById('fontSize');
+    const lineHeightInput = document.getElementById('lineHeight');
+    const letterSpacingInput = document.getElementById('letterSpacing');
     
+    // Initialize range inputs
+    if (fontSizeInput) {
+        fontSizeInput.addEventListener('input', updatePreview);
+    }
+    if (lineHeightInput) {
+        lineHeightInput.addEventListener('input', updatePreview);
+    }
+    if (letterSpacingInput) {
+        letterSpacingInput.addEventListener('input', updatePreview);
+    }
+
     generateBtn.addEventListener('click', function() {
-        const text = inputText.value.trim();
+const text = inputText.value.trim();
         if (!text) {
             outputCanvas.innerHTML = '<p class="text-gray-400">Please enter some text first</p>';
             return;

style.css

@@ -10,10 +10,38 @@ body {
     font-family: 'Handwriting';
     src: url('https://fonts.gstatic.com/s/indieflower/v12/m8JVjfNVeKWVnh3QMuKkFcZVaUuH99GUDg.woff2') format('woff2');
 }
-
 .handwriting {
     font-family: 'Handwriting', cursive;
+    transition: all 0.3s ease;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+    .handwriting {
+        font-size: 1.2rem !important;
+    }
 }
+
+/* Animation for new features */
+@keyframes featureReveal {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+feature-card {
+    animation: featureReveal 0.5s ease-out forwards;
+    opacity: 0;
+}
+
+feature-card:nth-child(1) { animation-delay: 0.1s; }
+feature-card:nth-child(2) { animation-delay: 0.2s; }
+feature-card:nth-child(3) { animation-delay: 0.3s; }
+feature-card:nth-child(4) { animation-delay: 0.4s; }
+feature-card:nth-child(5) { animation-delay: 0.5s; }
+feature-card:nth-child(6) { animation-delay: 0.6s; }
+feature-card:nth-child(7) { animation-delay: 0.7s; }
+feature-card:nth-child(8) { animation-delay: 0.8s; }
+feature-card:nth-child(9) { animation-delay: 0.9s; }
 /* Feature cards animation */
 @keyframes fadeInUp {
     from { opacity: 0; transform: translateY(20px); }