Update index.html

index.html

@@ -4,17 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>UIKitV3 Elite - Next-Gen Component Automator</title>
-
     <script src="https://cdn.tailwindcss.com"></script>
-
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
-
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/purify.min.js"></script>
-
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
-
     <style>
         /* Base styles with enhanced visuals */
         * {
@@ -22,7 +17,6 @@
             padding: 0;
             box-sizing: border-box;
         }
-
         body {
             font-family: 'Inter', sans-serif;
             background: #2a2a2a;
@@ -30,7 +24,6 @@
             position: relative;
             overflow-x: hidden;
         }
-
         /* TV Static background layer */
         body::before {
             content: '';
@@ -50,13 +43,11 @@
             pointer-events: none;
             z-index: 0;
         }
-
         @keyframes staticNoise {
             0%, 100% { opacity: 1; filter: contrast(1.05); }
             33% { opacity: 0.98; filter: contrast(1); }
             66% { opacity: 0.96; filter: contrast(1.02); }
         }
-
         /* Glass overlay at 55% opacity */
         body::after {
             content: '';
@@ -75,7 +66,6 @@
             z-index: 1;
             mix-blend-mode: overlay;
         }
-
         /* Animated background particles */
         .bg-particles {
             position: fixed;
@@ -86,7 +76,6 @@
             pointer-events: none;
             z-index: 0;
         }
-
         .particle {
             position: absolute;
             background: radial-gradient(circle, rgba(200, 140, 80, 0.15) 0%, transparent 70%);
@@ -94,14 +83,12 @@
             animation: float linear infinite;
             filter: blur(2px);
         }
-
         @keyframes float {
             0% { transform: translateY(100vh) scale(0); opacity: 0; }
             10% { opacity: 0.3; }
             90% { opacity: 0.3; }
             100% { transform: translateY(-100vh) scale(1); opacity: 0; }
         }
-
         /* Glassmorphism effect */
         .glass {
             background: rgba(20, 20, 20, 0.7);
@@ -110,7 +97,6 @@
             border: 1px solid rgba(200, 140, 80, 0.1);
             box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
         }
-
         .glass-dark {
             background: rgba(18, 18, 18, 0.75);
             backdrop-filter: blur(50px) saturate(190%);
@@ -122,7 +108,6 @@
                 inset 0 0 60px rgba(0, 0, 0, 0.3),
                 0 0 1px rgba(200, 140, 80, 0.2);
         }
-
         .container {
             max-width: 100%;
             margin: 0;
@@ -132,9 +117,7 @@
             min-height: 100vh;
             width: 100%;
         }
-
         /* === SLIDING PANEL LAYOUT CSS === */
-
         /* Sliding Module Base Styles */
         .slide-module {
             position: fixed;
@@ -156,7 +139,6 @@
             display: flex;
             flex-direction: column;
         }
-
         /* Left-side modules (Components, Properties, Code Output) */
         .slide-module.left {
             left: 48px; /* <-- FIX: Changed from 0 to 48px */
@@ -164,11 +146,9 @@
             border-right: 1px solid rgba(200, 140, 80, 0.25);
             transform: translateX(-100%);
         }
-
         .slide-module.left.open {
             transform: translateX(0);
         }
-
         /* Right-side module (Live Preview) */
         .slide-module.right {
             right: 48px; /* <-- FIX: Changed from 0 to 48px */
@@ -177,23 +157,19 @@
             border-left: 1px solid rgba(200, 140, 80, 0.25);
             transform: translateX(100%);
         }
-
         .slide-module.right.open {
             transform: translateX(0);
         }
-
         /* Make open panels cover the tabs (No longer needed, but keep for safety) */
         .slide-module.open {
-            z-index: 160; 
+            z-index: 160;
         }
-
         /* Module content area */
         .module-content {
             flex: 1;
             overflow-y: auto;
             padding: 2rem;
         }
-
         /* Module header */
         .module-header {
             padding: 1.5rem 2rem;
@@ -201,7 +177,6 @@
             background: rgba(200, 140, 80, 0.05);
             flex-shrink: 0;
         }
-
         /* Module Tabs */
         .module-tab {
             position: fixed;
@@ -226,14 +201,12 @@
                 inset 0 1px 0 rgba(255, 255, 255, 0.05),
                 0 0 1px rgba(200, 140, 80, 0.2);
         }
-
         /* Left tabs (Components, Properties, Code Output) */
         .module-tab.left {
             left: 0;
             border-left: none;
             border-radius: 0 8px 8px 0;
         }
-
         .module-tab.left:hover {
             background: rgba(25, 25, 25, 0.95);
             border-color: rgba(200, 140, 80, 0.5);
@@ -242,14 +215,12 @@
                 inset 0 1px 0 rgba(255, 255, 255, 0.07),
                 0 0 16px rgba(200, 140, 80, 0.2);
         }
-
         /* Right tab (Live Preview) */
         .module-tab.right {
             right: 0;
             border-right: none;
             border-radius: 8px 0 0 8px;
         }
-
         .module-tab.right:hover {
             background: rgba(25, 25, 25, 0.95);
             border-color: rgba(200, 140, 80, 0.5);
@@ -258,11 +229,9 @@
                 inset 0 1px 0 rgba(255, 255, 255, 0.07),
                 0 0 16px rgba(200, 140, 80, 0.2);
         }
-
         .module-tab-icon {
             font-size: 24px;
         }
-
         .module-tab-text {
             writing-mode: vertical-rl;
             text-orientation: mixed;
@@ -272,14 +241,12 @@
             letter-spacing: 0.5px;
             text-transform: uppercase;
         }
-
         /* Position tabs at different heights for left modules */
         #components-tab { top: 20%; }
         #properties-tab { top: 50%; }
         #code-tab { top: 80%; }
-        
+       
         /* === END NEW LAYOUT CSS === */
-
         /* === Pinstripe Separators === */
         .pinstripe {
             position: fixed;
@@ -290,23 +257,18 @@
             z-index: 140; /* Below tabs (150), above closed panels (100) */
             box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
         }
-
         .pinstripe.left {
             left: 48px; /* Aligned with the inner edge of left tabs */
         }
-
         .pinstripe.right {
             right: 48px; /* Aligned with the inner edge of right tab */
         }
         /* === END NEW CSS === */
-
-
         /* Enhanced dropdown with smooth animations */
         .dropdown {
             position: relative;
             display: inline-block;
         }
-
         .dropdown-content {
             display: none;
             position: absolute;
@@ -321,12 +283,10 @@
             max-height: 400px;
             overflow-y: auto;
         }
-
         @keyframes dropdownSlide {
             from { opacity: 0; transform: translateY(-10px); }
             to { opacity: 1; transform: translateY(0); }
         }
-
         .dropdown-content a {
             color: white;
             padding: 12px 20px;
@@ -335,24 +295,20 @@
             transition: all 0.3s ease;
             border-left: 3px solid transparent;
         }
-
         .dropdown-content a:hover {
             background: linear-gradient(90deg, rgba(200, 140, 80, 0.15), transparent);
             border-left-color: rgba(200, 140, 80, 0.6);
             padding-left: 25px;
         }
-
         .dropdown.show .dropdown-content {
             display: block;
         }
-
         /* Enhanced button with hover effects */
         .btn-primary {
             position: relative;
             overflow: hidden;
             transition: all 0.3s ease;
         }
-
         .btn-primary::before {
             content: '';
             position: absolute;
@@ -365,17 +321,14 @@
             transform: translate(-50%, -50%);
             transition: width 0.6s, height 0.6s;
         }
-
         .btn-primary:hover::before {
             width: 300px;
             height: 300px;
         }
-
         .btn-primary span {
             position: relative;
             z-index: 1;
         }
-
         /* Loading spinner styles */
         .loader {
             border: 3px solid rgba(200, 140, 80, 0.1);
@@ -386,52 +339,43 @@
             animation: spin 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
             margin: 20px auto;
         }
-
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-
         /* Custom scrollbar */
         ::-webkit-scrollbar {
             width: 8px;
             height: 8px;
         }
-
         ::-webkit-scrollbar-track {
             background: rgba(30, 30, 30, 0.5);
             border-radius: 10px;
         }
-
         ::-webkit-scrollbar-thumb {
             background: linear-gradient(135deg, rgba(180, 120, 60, 0.4) 0%, rgba(200, 140, 80, 0.6) 100%);
             border-radius: 10px;
             transition: all 0.3s ease;
         }
-
         ::-webkit-scrollbar-thumb:hover {
             background: linear-gradient(135deg, rgba(200, 140, 80, 0.6) 0%, rgba(220, 160, 100, 0.7) 100%);
         }
-
         /* Input field enhancements */
         .input-field {
             transition: all 0.3s ease;
             position: relative;
         }
-
         .input-field:focus {
             transform: translateY(-2px);
             box-shadow: 0 10px 30px rgba(200, 140, 80, 0.2);
             border-color: rgba(200, 140, 80, 0.4);
         }
-
         /* Header text animations with SVG path tracing */
         .header-title {
             display: inline-block;
             position: relative;
             overflow: visible;
         }
-
         .header-svg-container {
             position: absolute;
             top: 0;
@@ -441,7 +385,6 @@
             pointer-events: none;
             z-index: 10;
         }
-
         .header-path {
             fill: none;
             stroke: rgba(200, 140, 80, 0.6);
@@ -453,36 +396,30 @@
             animation: tracePath 3s ease forwards;
             filter: drop-shadow(0 0 8px rgba(200, 140, 80, 0.4));
         }
-
         @keyframes tracePath {
             to {
                 stroke-dashoffset: 0;
             }
         }
-
         .header-title .char {
             display: inline-block;
             opacity: 0;
             position: relative;
             animation: charScribe 0.5s ease forwards;
         }
-
         @keyframes charScribe {
             0% { opacity: 0; filter: blur(4px); transform: scale(0.8); }
             50% { opacity: 0.6; filter: blur(2px); }
             100% { opacity: 1; filter: blur(0); transform: scale(1); text-shadow: 0 0 10px rgba(200, 140, 80, 0.3); }
         }
-
         .subtitle-text {
             opacity: 0;
             transform: translateY(10px);
             animation: subtitleFade 1s ease forwards 2.5s;
         }
-
         @keyframes subtitleFade {
             to { opacity: 1; transform: translateY(0); }
         }
-
         /* Icon button styles */
         .icon-btn {
             width: 36px;
@@ -497,24 +434,20 @@
             cursor: pointer;
             transition: all 0.3s ease;
         }
-
         .icon-btn:hover {
             background: rgba(200, 140, 80, 0.2);
             border-color: rgba(200, 140, 80, 0.4);
             transform: scale(1.05);
             box-shadow: 0 4px 12px rgba(200, 140, 80, 0.2);
         }
-
         .icon-btn:active {
             transform: scale(0.95);
         }
-
         /* Platform export dropdown */
         .platform-dropdown {
             position: relative;
             display: inline-block;
         }
-
         .platform-options {
             display: none;
             position: absolute;
@@ -532,11 +465,9 @@
             max-height: 500px;
             overflow-y: auto;
         }
-
         .platform-options.show {
             display: block;
         }
-
         .platform-option {
             padding: 12px 16px;
             color: white;
@@ -547,12 +478,10 @@
             gap: 10px;
             border-left: 3px solid transparent;
         }
-
         .platform-option:hover {
             background: linear-gradient(90deg, rgba(200, 140, 80, 0.15), transparent);
             border-left-color: rgba(200, 140, 80, 0.6);
         }
-
         .platform-icon {
             width: 24px;
             height: 24px;
@@ -563,7 +492,6 @@
             border-radius: 6px;
             font-size: 12px;
         }
-
         /* Animation presets */
         .animate-fadeIn { animation: fadeIn 0.5s ease; }
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@@ -583,14 +511,11 @@
         @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
         .animate-scale { animation: scale 0.6s ease; }
         @keyframes scale { from { transform: scale(0.5); } to { transform: scale(1); } }
-
-
         /* Tooltip */
         .tooltip {
             position: relative;
             display: inline-block;
         }
-
         .tooltip .tooltiptext {
             visibility: hidden;
             background-color: rgba(0, 0, 0, 0.9);
@@ -608,12 +533,10 @@
             white-space: nowrap;
             font-size: 12px;
         }
-
         .tooltip:hover .tooltiptext {
             visibility: visible;
             opacity: 1;
         }
-
         /* Code block enhancements */
         pre {
             border-radius: 12px;
@@ -621,7 +544,7 @@
             max-height: calc(100vh - 250px); /* Adjust max-height for panel view */
             overflow: auto;
         }
-        
+       
         /* Notification toast */
         .toast {
             position: fixed;
@@ -636,15 +559,12 @@
             display: none;
             animation: toastSlide 0.3s ease;
         }
-
         .toast.show { display: block; }
         .toast.error { background: rgba(239, 68, 68, 0.95); }
-
         @keyframes toastSlide {
             from { transform: translateX(400px); opacity: 0; }
             to { transform: translateX(0); opacity: 1; }
         }
-
         /* Animation selection (from 'broken' file) */
         .animation-grid {
             display: grid;
@@ -652,7 +572,6 @@
             gap: 10px;
             margin-top: 10px;
         }
-
         .animation-option {
             padding: 10px;
             background: rgba(200, 140, 80, 0.05);
@@ -664,33 +583,28 @@
             font-size: 12px;
             color: rgba(200, 140, 80, 0.9);
         }
-
         .animation-option:hover {
             background: rgba(200, 140, 80, 0.15);
             border-color: rgba(200, 140, 80, 0.4);
             transform: scale(1.05);
         }
-
         .animation-option.selected {
             background: rgba(200, 140, 80, 0.2);
             border-color: rgba(200, 140, 80, 0.6);
             box-shadow: 0 0 10px rgba(200, 140, 80, 0.2);
         }
-
         /* Color Palette Controls */
         .color-palette-section {
             margin-top: 20px;
             padding-top: 20px;
             border-top: 1px solid rgba(200, 140, 80, 0.15);
         }
-
         .color-palette-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
             gap: 12px;
             margin-top: 12px;
         }
-
         .color-swatch {
             position: relative;
             height: 60px;
@@ -700,18 +614,15 @@
             border: 2px solid rgba(200, 140, 80, 0.2);
             overflow: hidden;
         }
-
         .color-swatch:hover {
             transform: scale(1.05);
             border-color: rgba(200, 140, 80, 0.5);
             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
         }
-
         .color-swatch.selected {
             border-color: rgba(200, 140, 80, 0.8);
             box-shadow: 0 0 16px rgba(200, 140, 80, 0.4);
         }
-
         .color-swatch-label {
             position: absolute;
             bottom: 0;
@@ -726,14 +637,12 @@
             text-transform: uppercase;
             letter-spacing: 0.5px;
         }
-
         .custom-color-input {
             display: flex;
             gap: 8px;
             align-items: center;
             margin-top: 12px;
         }
-
         .custom-color-input input[type="color"] {
             width: 50px;
             height: 40px;
@@ -742,7 +651,6 @@
             cursor: pointer;
             background: transparent;
         }
-
         .custom-color-input input[type="text"] {
             flex: 1;
             padding: 8px 12px;
@@ -753,7 +661,6 @@
             font-size: 12px;
             font-family: monospace;
         }
-
         /* Responsive adjustments */
         @media (max-width: 1024px) {
             .slide-module.left {
@@ -763,7 +670,6 @@
                 width: 75vw;
             }
         }
-
         @media (max-width: 768px) {
             .slide-module.left {
                 width: 90vw;
@@ -784,17 +690,12 @@
 <body>
     <div class="pinstripe left"></div>
     <div class="pinstripe right"></div>
-
     <div class="bg-particles" id="particles"></div>
-
     <div class="toast" id="toast">
         <span id="toast-message">Action completed!</span>
     </div>
-
     <div id="app"></div>
-
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-
     <script>
         // === GLOBAL STATE ===
         let previewEnabled = false; // Start with preview disabled as panel is closed
@@ -805,9 +706,7 @@
         let selectedColorPalette = 'indigo';
         let customColor = '#6366f1';
         let selectedAnimation = 'none';
-
         // === UTILITY FUNCTIONS ===
-
         // XSS Protection using DOMPurify
         function sanitizeHTML(html) {
             if (window.DOMPurify) {
@@ -818,7 +717,6 @@
             }
             return html;
         }
-
         // Show toast notification
         function showToast(message, isError = false) {
             const toast = document.getElementById('toast');
@@ -831,13 +729,11 @@
                 toast.classList.remove('show');
             }, 3000);
         }
-
         // Create animated particles
         function createParticles() {
             const particlesContainer = document.getElementById('particles');
             if (!particlesContainer) return;
             const particleCount = 8;
-
             for (let i = 0; i < particleCount; i++) {
                 const particle = document.createElement('div');
                 particle.className = 'particle';
@@ -849,7 +745,6 @@
                 particlesContainer.appendChild(particle);
             }
         }
-
         // === RENDER MAIN APP ===
         function renderApp() {
             // This HTML structure is from 'uikit-tim-hf-backup-broken.html'
@@ -861,27 +756,22 @@
                             <p class="subtitle-text text-gray-500 text-md tracking-wide" style="animation-delay: 2.7s; margin-top: 1rem;">Click the tabs on the edges</p>
                         </div>
                     </div>
-
                     <div class="module-tab left" id="components-tab" data-module="components">
                         <span class="module-tab-icon">🎨</span>
                         <span class="module-tab-text">Components</span>
                     </div>
-
                     <div class="module-tab left" id="properties-tab" data-module="properties">
                         <span class="module-tab-icon">⚙️</span>
                         <span class="module-tab-text">Properties</span>
                     </div>
-
                     <div class="module-tab left" id="code-tab" data-module="code">
                         <span class="module-tab-icon">💻</span>
                         <span class="module-tab-text">Code Output</span>
                     </div>
-
                     <div class="module-tab right" id="preview-tab" data-module="preview">
                         <span class="module-tab-icon">👁️</span>
                         <span class="module-tab-text">Live Preview</span>
                     </div>
-
                     <div class="slide-module left" id="components-module">
                         <div class="module-header">
                             <h2 class="text-xl font-semibold text-gray-200 flex items-center gap-3">
@@ -919,7 +809,6 @@
                             </div>
                         </div>
                     </div>
-
                     <div class="slide-module left" id="properties-module">
                         <div class="module-header">
                             <h2 class="text-xl font-semibold text-gray-200 flex items-center gap-3">
@@ -933,7 +822,6 @@
                             <button id="add-input-button" class="mt-6 bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 text-gray-200 font-semibold py-2 px-5 rounded-lg transition duration-300 border border-gray-700 hover:border-amber-900/30 w-full">
                                 + Add Property
                             </button>
-
                             <div class="animation-section mt-8 pt-6 border-t border-gray-700/50">
                                 <h3 class="text-md font-semibold text-gray-300 mb-3">Entry Animation</h3>
                                 <div class="animation-grid" id="animation-grid">
@@ -949,7 +837,6 @@
                                     <div class="animation-option" data-animation="scale">Scale</div>
                                 </div>
                             </div>
-
                             <div class="color-palette-section mt-8">
                                 <h3 class="text-md font-semibold text-gray-300 mb-2">Color Palette</h3>
                                 <p class="text-xs text-gray-400 mb-3">Select or customize colors for your components</p>
@@ -989,7 +876,6 @@
                             </div>
                         </div>
                     </div>
-
                     <div class="slide-module left" id="code-module">
                         <div class="module-header">
                             <div class="flex justify-between items-center w-full">
@@ -1057,7 +943,6 @@
                             </div>
                         </div>
                     </div>
-
                     <div class="slide-module right" id="preview-module">
                         <div class="module-header">
                             <div class="flex justify-between items-center w-full">
@@ -1090,15 +975,12 @@
                     </div>
                 </div>`;
         }
-
         // Animate header text with SVG path tracing
         function animateHeaderText() {
             const title = document.getElementById('main-title');
             if (!title) return;
-
             const text = 'UIKitV3 Elite';
             const chars = text.split('');
-
             // Create SVG path for tracing effect
             const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
             svg.setAttribute('class', 'header-svg-container');
@@ -1108,18 +990,15 @@
             svg.style.left = '0';
             svg.style.width = '100%';
             svg.style.height = '100%';
-
             // Create a decorative path that traces under the text
             const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
             const pathData = 'M 50 80 Q 150 60, 250 70 T 450 65 Q 550 68, 650 75 T 750 70';
             path.setAttribute('d', pathData);
             path.setAttribute('class', 'header-path');
             svg.appendChild(path);
-
             // Clear and create character spans
             title.innerHTML = '';
             title.appendChild(svg);
-
             chars.forEach((char, index) => {
                 const span = document.createElement('span');
                 span.className = 'char';
@@ -1128,13 +1007,10 @@
                 title.appendChild(span);
             });
         }
-
         // === EVENT HANDLERS ===
-
         function toggleDropdown() {
             document.getElementById('component-dropdown').classList.toggle('show');
         }
-
         function selectOption(event) {
             event.preventDefault();
             if (event.target.dataset.value) {
@@ -1144,7 +1020,6 @@
                 document.getElementById('inputs-container').innerHTML = '';
                 currentComponent = value;
                 addDefaultInputs(value);
-
                 if (previewEnabled) {
                     updateLivePreview();
                 }
@@ -1152,12 +1027,10 @@
                 toggleModule('properties');
             }
         }
-
         function addDefaultInputs(component) {
             const container = document.getElementById('inputs-container');
             if (!container) return;
             let defaultProps = [];
-
             switch(component) {
                 case 'Button':
                     defaultProps = [
@@ -1234,18 +1107,15 @@
                     ];
                     break;
             }
-
             defaultProps.forEach(prop => {
                 addInput(prop.key, prop.value);
             });
         }
-
         function addInput(key = '', value = '') {
             const container = document.getElementById('inputs-container');
             if (!container) return;
             const inputGroup = document.createElement('div');
             inputGroup.className = 'flex items-center gap-3';
-
             inputGroup.innerHTML = `
                 <input type="text" class="property-key input-field bg-black/50 text-gray-200 p-3 rounded-lg flex-1 border border-gray-700 focus:outline-none focus:ring-1 focus:ring-amber-900/40 focus:border-amber-900/40" placeholder="Property" value="${key}">
                 <input type="text" class="property-value input-field bg-black/50 text-gray-200 p-3 rounded-lg flex-[2] border border-gray-700 focus:outline-none focus:ring-1 focus:ring-amber-900/40 focus:border-amber-900/40" placeholder="Value" value="${value}">
@@ -1253,37 +1123,30 @@
                     ✕
                 </button>
             `;
-
             container.appendChild(inputGroup);
-
             // Add event listener to remove button
             inputGroup.querySelector('.remove-input-button').addEventListener('click', removeInput);
-
             // === FIX: Attach listeners regardless of whether preview is open ===
             // This ensures live refresh works even if panel was closed when prop was added.
             inputGroup.querySelector('.property-key').addEventListener('input', debouncedLivePreview);
             inputGroup.querySelector('.property-value').addEventListener('input', debouncedLivePreview);
         }
-
         function removeInput(event) {
             event.target.closest('.flex').remove();
             if (previewEnabled) {
                 updateLivePreview();
             }
         }
-
         function debouncedLivePreview() {
             clearTimeout(livePreviewDebounce);
             livePreviewDebounce = setTimeout(() => {
                 updateLivePreview();
             }, 500);
         }
-
         function getSelectedAnimation() {
             const selected = document.querySelector('.animation-option.selected');
             return selected ? selected.dataset.animation : 'none';
         }
-
         function collectProperties() {
             const container = document.getElementById('inputs-container');
             if (!container) return {};
@@ -1302,33 +1165,26 @@
             }
             return properties;
         }
-
         function generateCode() {
             const component = document.getElementById('selected-option').textContent;
             if (component === 'Select Component') {
                 showToast('Please select a component first.', true);
                 return;
             }
-
             const properties = collectProperties();
             const animation = getSelectedAnimation();
             const codeOutput = document.getElementById('generated-code');
             const loadingSpinner = document.getElementById('loading-spinner');
             const copyButton = document.getElementById('copy-button');
-
             if (!codeOutput || !loadingSpinner || !copyButton) return;
-
             codeOutput.textContent = '';
             copyButton.textContent = 'Copy';
             loadingSpinner.style.display = 'block';
-
             setTimeout(() => {
                 let generatedHtml = '';
-
                 try {
                     generatedHtml = generateComponentCode(component, properties, animation);
                     codeOutput.textContent = generatedHtml;
-
                     if (window.hljs) {
                         try {
                             hljs.highlightElement(codeOutput);
@@ -1336,28 +1192,22 @@
                             console.error("highlight.js failed:", e);
                         }
                     }
-
                     showToast('Code generated successfully!');
                     // Automatically open the code panel
                     toggleModule('code');
-
                 } catch (error) {
                     generatedHtml = `<div class="text-red-400">Error generating code: ${error.message}</div>`;
                     codeOutput.textContent = generatedHtml;
                     showToast('Error generating code', true);
                 }
-
                 loadingSpinner.style.display = 'none';
-
                 if (previewEnabled) {
                     updateLivePreview();
                 }
             }, 800);
         }
-
         function generateComponentCode(component, props, animation) {
             let html = '';
-
             switch(component) {
                 case 'Button':
                     html = generateButtonCode(props);
@@ -1398,15 +1248,12 @@
                 default:
                     html = `<div class="text-red-400">Error: Component generator not found.</div>`;
             }
-
             // Add animation if selected
             if (animation && animation !== 'none') {
                 html = addAnimationToHTML(html, animation);
             }
-
             return html;
         }
-
         function addAnimationToHTML(html, animation) {
             // Add animation class to the root element
             const animationStyles = getAnimationStyles(animation);
@@ -1419,7 +1266,6 @@
                 return html.replace(/<([a-z0-9]+)/i, `<$1 class="animate-${animation}" style="${animationStyles}"`);
             }
         }
-
         function getAnimationStyles(animation) {
             const animations = {
                 fadeIn: 'animation: fadeIn 0.6s ease;',
@@ -1434,26 +1280,22 @@
             };
             return animations[animation] || '';
         }
-
         // === COMPONENT GENERATORS ===
-
         function generateButtonCode(props) {
+            const colors = getColorValues();
             const text = props.text || 'Button';
             const size = props.size || 'medium';
-            const colors = getColorValues();
-            const colorClasses = `bg-gradient-to-r hover:opacity-90`;
-            const inlineStyle = `style="background: linear-gradient(to right, ${colors.from}, ${colors.to});"`;
             let sizeClasses = 'py-3 px-6 text-base';
             switch(size) {
                 case 'small': sizeClasses = 'py-2 px-4 text-sm'; break;
                 case 'large': sizeClasses = 'py-4 px-8 text-lg'; break;
             }
-            return `<button class="${colorClasses} ${sizeClasses} text-white font-bold rounded-xl shadow-lg transition duration-300 transform hover:scale-105" ${inlineStyle}>
+            return `<button class="bg-gradient-to-r from-[${colors.from}] to-[${colors.to}] hover:opacity-90 ${sizeClasses} text-white font-bold rounded-xl shadow-lg transition duration-300 transform hover:scale-105">
     ${text}
 </button>`;
         }
-
         function generateInputCode(props) {
+            const colors = getColorValues();
             const placeholder = props.placeholder || '';
             const type = props.type || 'text';
             const label = props.label || '';
@@ -1468,13 +1310,13 @@
     ${labelHtml}<input
         type="${type}"
         id="generated-input"
-        class="bg-gray-800 text-white p-3 rounded-xl w-full border border-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300"
+        class="bg-gray-800 text-white p-3 rounded-xl w-full border border-gray-700 focus:outline-none focus:ring-2 focus:ring-[${colors.from}] transition duration-300"
         placeholder="${placeholder}"
     >
 </div>`;
         }
-
         function generateCardCode(props) {
+            const colors = getColorValues();
             const title = props.title || 'Card Title';
             const content = props.content || 'Card content goes here.';
             const imageUrl = props.imageUrl || '';
@@ -1488,23 +1330,23 @@
 >
 `;
             }
-            return `<div class="max-w-sm bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl shadow-2xl overflow-hidden border border-gray-700 transition duration-300 transform hover:scale-105">
+            return `<div class="max-w-sm bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl shadow-2xl overflow-hidden border border-[${colors.from}/50] transition duration-300 transform hover:scale-105">
     ${imageHtml}<div class="p-6">
-        <h3 class="text-2xl font-bold text-white mb-3">${title}</h3>
+        <h3 class="text-2xl font-bold bg-gradient-to-r from-[${colors.from}] to-[${colors.to}] bg-clip-text text-transparent mb-3">${title}</h3>
         <p class="text-gray-300 leading-relaxed">${content}</p>
     </div>
 </div>`;
         }
-
         function generateNavbarCode(props) {
+            const colors = getColorValues();
             const brand = props.brand || 'Brand';
             const links = (props.links || 'Home,About').split(',').map(link => link.trim());
-            let linksHtml = links.map(link => `<a href="#" class="text-gray-300 hover:text-white px-4 py-2 rounded-lg transition duration-300 hover:bg-gray-700">${link}</a>`).join('\n            ');
+            let linksHtml = links.map(link => `<a href="#" class="text-gray-300 hover:text-white px-4 py-2 rounded-lg transition duration-300 hover:bg-gray-700">${link}</a>`).join('\n ');
             return `<nav class="bg-gradient-to-r from-gray-900 to-gray-800 shadow-2xl border-b border-gray-700">
     <div class="max-w-7xl mx-auto px-6 py-4">
         <div class="flex items-center justify-between">
             <div class="flex-shrink-0">
-                <span class="text-white font-black text-2xl bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">${brand}</span>
+                <span class="text-white font-black text-2xl bg-gradient-to-r from-[${colors.from}] to-[${colors.to}] bg-clip-text text-transparent">${brand}</span>
             </div>
             <div class="hidden md:flex items-center space-x-2">
                 ${linksHtml}
@@ -1520,21 +1362,21 @@
     </div>
 </nav>`;
         }
-
         function generateModalCode(props) {
+            const colors = getColorValues();
             const title = props.title || 'Modal Title';
             const body = props.body || 'Modal body text goes here.';
             const footerButtons = (props.footer || 'Close').split(',').map(btn => btn.trim());
             let buttonsHtml = footerButtons.map((btnText, index) => {
                 const isPrimary = (index === footerButtons.length - 1) && footerButtons.length > 1;
                 const colorClasses = isPrimary
-                    ? 'bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700'
+                    ? `bg-gradient-to-r from-[${colors.to}] to-[${colors.from}] hover:from-[${colors.hover}] hover:to-[${colors.to}]`
                     : 'bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800';
                 return `<button class="${colorClasses} text-white font-bold py-2 px-6 rounded-lg transition duration-300 transform hover:scale-105">${btnText}</button>`;
-            }).join('\n            ');
+            }).join('\n ');
             return `<div class="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm z-50 flex items-center justify-center p-4">
     <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl shadow-2xl max-w-lg w-full border border-gray-700 overflow-hidden">
-        <div class="flex justify-between items-center p-6 border-b border-gray-700 bg-gradient-to-r from-indigo-900/30 to-purple-900/30">
+        <div class="flex justify-between items-center p-6 border-b border-gray-700 bg-gradient-to-r from-[${colors.from}/30] to-[${colors.to}/30]">
             <h3 class="text-2xl font-bold text-white">${title}</h3>
             <button class="text-gray-400 hover:text-white transition duration-300 transform hover:rotate-90">
                 <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -1551,114 +1393,139 @@
     </div>
 </div>`;
         }
-
         function generateAlertCode(props) {
+            const colors = getColorValues();
             const text = props.text || 'Alert text.';
             const type = props.type || 'info';
-            let bgClass = 'from-blue-900/80 to-blue-800/80 border-blue-500';
+            let bgFrom = '#1e40af/80';
+            let bgTo = '#1d4ed8/80';
+            let borderColor = '#3b82f6';
             let textClass = 'text-blue-200';
+            let iconClass = 'text-blue-400';
             let iconSvg = `<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>`;
             switch(type) {
+                case 'primary':
+                    bgFrom = `${colors.from}/80`;
+                    bgTo = `${colors.to}/80`;
+                    borderColor = colors.from;
+                    textClass = 'text-white';
+                    iconClass = `text-[${colors.from}]`;
+                    break;
+                case 'info':
+                    bgFrom = '#1e40af/80';
+                    bgTo = '#1d4ed8/80';
+                    borderColor = '#3b82f6';
+                    textClass = 'text-blue-200';
+                    iconClass = 'text-blue-400';
+                    break;
                 case 'success':
-                    bgClass = 'from-green-900/80 to-green-800/80 border-green-500';
+                    bgFrom = '#065f46/80';
+                    bgTo = '#047857/80';
+                    borderColor = '#10b981';
                     textClass = 'text-green-200';
+                    iconClass = 'text-green-400';
                     iconSvg = `<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>`;
                     break;
                 case 'warning':
-                    bgClass = 'from-yellow-900/80 to-yellow-800/80 border-yellow-500';
+                    bgFrom = '#92400e/80';
+                    bgTo = '#854d0e/80';
+                    borderColor = '#f59e0b';
                     textClass = 'text-yellow-200';
+                    iconClass = 'text-yellow-400';
                     iconSvg = `<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>`;
                     break;
                 case 'danger':
-                    bgClass = 'from-red-900/80 to-red-800/80 border-red-500';
+                    bgFrom = '#991b1b/80';
+                    bgTo = '#b91c1c/80';
+                    borderColor = '#ef4444';
                     textClass = 'text-red-200';
+                    iconClass = 'text-red-400';
                     iconSvg = `<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>`;
                     break;
             }
+            const bgClass = `from-[${bgFrom}] to-[${bgTo}] border-[${borderColor}]`;
             return `<div class="flex p-5 rounded-xl bg-gradient-to-r ${bgClass} ${textClass} border-l-4 shadow-lg backdrop-blur-sm" role="alert">
-    <span class="flex-shrink-0">${iconSvg}</span>
+    <span class="flex-shrink-0 ${iconClass}">${iconSvg}</span>
     <div class="ml-4 text-sm font-semibold">${text}</div>
     <button class="ml-auto text-white hover:opacity-75 transition duration-300">
         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </button>
 </div>`;
         }
-
         function generateBadgeCode(props) {
-            const text = props.text || 'Badge';
             const colors = getColorValues();
-            const inlineStyle = `style="background: linear-gradient(to right, ${colors.from}, ${colors.to});"`;
-            return `<span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs font-bold text-white shadow-lg transition duration-300 transform hover:scale-110" ${inlineStyle}>
+            const text = props.text || 'Badge';
+            return `<span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs font-bold text-white shadow-lg transition duration-300 transform hover:scale-110 bg-gradient-to-r from-[${colors.from}] to-[${colors.to}]">
     ${text}
 </span>`;
         }
-
         function generateBreadcrumbCode(props) {
+            const colors = getColorValues();
             const links = (props.links || 'Home,Page').split(',').map(link => link.trim());
             const separatorSvg = `<svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>`;
             let linksHtml = links.map((link, index) => {
                 const isLast = index === links.length - 1;
                 if (isLast) {
-                    return `<li aria-current="page"><div class="flex items-center gap-2">${index > 0 ? separatorSvg : ''}<span class="text-sm font-semibold text-indigo-400">${link}</span></div></li>`;
+                    return `<li aria-current="page"><div class="flex items-center gap-2">${index > 0 ? separatorSvg : ''}<span class="text-sm font-semibold text-[${colors.from}]">${link}</span></div></li>`;
                 } else {
                     return `<li><div class="flex items-center gap-2">${index > 0 ? separatorSvg : ''}<a href="#" class="text-sm font-medium text-gray-300 hover:text-white transition duration-300">${link}</a></div></li>`;
                 }
-            }).join('\n    ');
+            }).join('\n ');
             return `<nav class="flex bg-gray-800/50 backdrop-blur-sm px-5 py-3 rounded-xl border border-gray-700" aria-label="Breadcrumb">
     <ol class="inline-flex items-center space-x-1">${linksHtml}</ol>
 </nav>`;
         }
-
         function generateTabsCode(props) {
+            const colors = getColorValues();
             const tabs = (props.tabs || 'Tab 1,Tab 2').split(',').map(tab => tab.trim());
             const activeTab = props.active || tabs[0];
             let tabsHtml = tabs.map(tab => {
                 const isActive = tab === activeTab;
-                const activeClasses = 'text-indigo-400 border-indigo-400 bg-indigo-900/20';
+                const activeClasses = `text-[${colors.from}] border-[${colors.from}] bg-[${colors.from}/20]`;
                 const inactiveClasses = 'text-gray-400 border-transparent hover:text-gray-300 hover:border-gray-500';
                 return `<li><a href="#" class="inline-block px-6 py-3 border-b-2 rounded-t-lg transition duration-300 ${isActive ? activeClasses : inactiveClasses}">${tab}</a></li>`;
-            }).join('\n    ');
+            }).join('\n ');
             return `<div class="bg-gray-800/50 backdrop-blur-sm rounded-xl border border-gray-700 overflow-hidden">
     <ul class="flex flex-wrap text-sm font-medium text-center border-b border-gray-700">${tabsHtml}</ul>
 </div>`;
         }
-
         function generatePaginationCode(props) {
+            const colors = getColorValues();
             const items = (props.items || '1,2,3').split(',').map(item => item.trim());
             let itemsHtml = items.map(item => {
                 const isText = isNaN(parseInt(item));
                 const classes = isText ? 'px-4' : 'w-10';
-                return `<li><a href="#" class="flex items-center justify-center ${classes} h-10 leading-tight text-gray-300 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white transition duration-300 transform hover:scale-110">${item}</a></li>`;
-            }).join('\n    ');
+                return `<li><a href="#" class="flex items-center justify-center ${classes} h-10 leading-tight text-gray-300 bg-gray-800 border border-gray-700 rounded-lg hover:bg-[${colors.from}/20] hover:text-[${colors.from}] transition duration-300 transform hover:scale-110">${item}</a></li>`;
+            }).join('\n ');
             return `<nav aria-label="Page navigation"><ul class="inline-flex items-center gap-2">${itemsHtml}</ul></nav>`;
         }
-
         function generateHeroCode(props) {
+            const colors = getColorValues();
             const title = props.title || 'Welcome to the Future';
             const subtitle = props.subtitle || 'Build amazing things with modern components';
             const buttonText = props.buttonText || 'Get Started';
-            return `<div class="relative overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 py-24 px-6">
+            return `<div class="relative overflow-hidden bg-gradient-to-br from-[${colors.from}] via-[${colors.to}] to-[${colors.hover}] py-24 px-6">
     <div class="absolute inset-0 bg-black/30"></div>
     <div class="relative max-w-4xl mx-auto text-center">
         <h1 class="text-6xl font-black text-white mb-6 leading-tight">${title}</h1>
         <p class="text-xl text-gray-200 mb-10 max-w-2xl mx-auto">${subtitle}</p>
-        <button class="bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-700 hover:to-purple-700 text-white font-bold py-4 px-10 rounded-xl text-lg shadow-2xl transition duration-300 transform hover:scale-105">
+        <button class="bg-gradient-to-r from-[${colors.from}] to-[${colors.to}] hover:from-[${colors.hover}] hover:to-[${colors.from}] text-white font-bold py-4 px-10 rounded-xl text-lg shadow-2xl transition duration-300 transform hover:scale-105">
             ${buttonText}
         </button>
     </div>
 </div>`;
         }
-
         function generateFooterCode(props) {
+            const colors = getColorValues();
             const company = props.company || 'MyCompany';
             const links = (props.links || 'About,Blog,Careers,Contact').split(',').map(link => link.trim());
             const copyright = props.copyright || '2024 MyCompany. All rights reserved.';
-            let linksHtml = links.map(link => `<a href="#" class="text-gray-400 hover:text-white transition duration-300">${link}</a>`).join('\n            ');
+            let linksHtml = links.map(link => `<a href="#" class="text-gray-400 hover:text-white transition duration-300">${link}</a>`).join('\n ');
             return `<footer class="bg-gradient-to-br from-gray-900 to-gray-800 border-t border-gray-700">
     <div class="max-w-7xl mx-auto px-6 py-12">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
             <div>
-                <h3 class="text-2xl font-black text-white mb-4 bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">${company}</h3>
+                <h3 class="text-2xl font-black text-white mb-4 bg-gradient-to-r from-[${colors.from}] to-[${colors.to}] bg-clip-text text-transparent">${company}</h3>
                 <p class="text-gray-400">Building the future, one component at a time.</p>
             </div>
             <div>
@@ -1678,9 +1545,7 @@
     </div>
 </footer>`;
         }
-
         // === PLATFORM EXPORT ===
-
         function exportToPlatform(platform, html) {
             let exported = '';
             switch(platform) {
@@ -1697,7 +1562,6 @@
             }
             return exported;
         }
-
         function convertToReact(html) {
             let react = html
                 .replace(/class=/g, 'className=')
@@ -1707,38 +1571,29 @@
                 .replace(/stroke-linejoin=/g, 'strokeLinejoin=')
                 .replace(/fill-rule=/g, 'fillRule=')
                 .replace(/clip-rule=/g, 'clipRule=');
-            return `import React from 'react';\n\nexport default function Component() {\n  return (\n    ${react}\n  );\n}\n\n// For Next.js, this component is ready to use!\n// Import Tailwind CSS in your _app.js or layout.js`;
+            return `import React from 'react';\n\nexport default function Component() {\n return (\n ${react}\n );\n}\n\n// For Next.js, this component is ready to use!\n// Import Tailwind CSS in your _app.js or layout.js`;
         }
-
         function convertToVue(html) {
-            return `<template>\n  ${html}\n</template>\n\n<` + `script setup>\n// Vue 3 Composition API\n// For Nuxt.js, this component is ready to use!\n</` + `script>\n\n<style scoped>\n/* Add any component-specific styles here */\n</style>`;
+            return `<template>\n ${html}\n</template>\n\n<` + `script setup>\n// Vue 3 Composition API\n// For Nuxt.js, this component is ready to use!\n</` + `script>\n\n<style scoped>\n/* Add any component-specific styles here */\n</style>`;
         }
-
         function convertToWordPress(html) {
-            return `<?php\n/**\n * Custom Component Block\n */\n?>\n\n<div class="wp-block-custom-component">\n  ${html}\n</div>\n\n<?php\n// Add this to your theme's functions.php:\n// Make sure to enqueue Tailwind CSS\n?>`;
+            return `<?php\n/**\n * Custom Component Block\n */\n?>\n\n<div class="wp-block-custom-component">\n ${html}\n</div>\n\n<?php\n// Add this to your theme's functions.php:\n// Make sure to enqueue Tailwind CSS\n?>`;
         }
-
         function convertToJoomla(html) {
-            return `<?php\n/**\n * @package     Joomla.Site\n * @subpackage  mod_custom_component\n */\n\ndefined('_JEXEC') or die;\n?>\n\n<div class="mod-custom-component">\n  ${html}\n</div>\n\n\n`;
+            return `<?php\n/**\n * @package Joomla.Site\n * @subpackage mod_custom_component\n */\n\ndefined('_JEXEC') or die;\n?>\n\n<div class="mod-custom-component">\n ${html}\n</div>\n\n\n`;
         }
-
         function convertToShopify(html) {
-            return `{% comment %}\n  Shopify Liquid Template\n  Section: custom-component\n{% endcomment %}\n\n<div class="custom-component-section">\n  ${html}\n</div>\n\n{% schema %}\n{\n  "name": "Custom Component",\n  "settings": [],\n  "presets": [{\n    "name": "Custom Component"\n  }]\n}\n{% endschema %}\n\n`;
+            return `{% comment %}\n Shopify Liquid Template\n Section: custom-component\n{% endcomment %}\n\n<div class="custom-component-section">\n ${html}\n</div>\n\n{% schema %}\n{\n "name": "Custom Component",\n "settings": [],\n "presets": [{\n "name": "Custom Component"\n }]\n}\n{% endschema %}\n\n`;
         }
-
         function convertToAngular(html) {
-            return `import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-custom-component',\n  template: \\\`\n    ${html}\n  \\\`,\n  styles: [\\\`\n    /* Component-specific styles */\n  \\\`]\n})\nexport class CustomComponent {\n  constructor() {}\n}\n\n// Make sure to add Tailwind CSS to your Angular project\n// via angular.json or styles.css`;
+            return `import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-custom-component',\n template: \\\`\n ${html}\n \\\`,\n styles: [\\\`\n /* Component-specific styles */\n \\\`]\n})\nexport class CustomComponent {\n constructor() {}\n}\n\n// Make sure to add Tailwind CSS to your Angular project\n// via angular.json or styles.css`;
         }
-
         function convertToSvelte(html) {
-            return `<` + `script>\n  // Svelte component\n  // For SvelteKit, this component is ready to use!\n</` + `script>\n\n${html}\n\n<style>\n  /* Add any component-specific styles here */\n</style>`;
+            return `<` + `script>\n // Svelte component\n // For SvelteKit, this component is ready to use!\n</` + `script>\n\n${html}\n\n<style>\n /* Add any component-specific styles here */\n</style>`;
         }
-
         // === LIVE PREVIEW ===
-
         function updateLivePreview() {
             if (!previewEnabled) return;
-
             const component = document.getElementById('selected-option').textContent;
             const viewerContent = document.getElementById('viewer-content');
             if (component === 'Select Component') {
@@ -1749,15 +1604,13 @@
                 `;
                 return;
             }
-
             const properties = collectProperties();
             const animation = getSelectedAnimation();
             const html = generateComponentCode(component, properties, animation);
             const sanitized = sanitizeHTML(html);
-            
+           
             viewerContent.innerHTML = sanitized;
         }
-
         function toggleEditable() {
             isEditable = !isEditable;
             const viewerContent = document.getElementById('viewer-content');
@@ -1766,25 +1619,21 @@
             // Add a visual indicator for editable mode
             viewerContent.style.outline = isEditable ? '2px dashed rgba(200, 140, 80, 0.5)' : 'none';
             viewerContent.style.boxShadow = isEditable ? 'inset 0 0 20px rgba(0,0,0,0.3)' : 'none';
-
             if (isEditable) {
                 showToast('Edit mode enabled');
             } else {
                 showToast('Edit mode disabled');
             }
         }
-
         function copyToClipboard() {
             const codeEl = document.getElementById('generated-code');
             if (!codeEl) return;
             const code = codeEl.textContent;
             const copyButton = document.getElementById('copy-button');
-
             if (!code || code.includes('Generated code will appear here')) {
                 showToast('No code to copy', true);
                 return;
             }
-
             navigator.clipboard.writeText(code).then(() => {
                 if (copyButton) copyButton.textContent = 'Copied!';
                 showToast('Code copied to clipboard!');
@@ -1796,9 +1645,9 @@
                 showToast('Failed to copy code', true);
             });
         }
-        
+       
         // === NEW MODULE TOGGLE FUNCTIONALITY ===
-        
+       
         /**
          * Toggles a slide-out module.
          * If a module on the left is opened, all other left modules are closed.
@@ -1810,15 +1659,12 @@
                 console.error('Module not found:', `${moduleName}-module`);
                 return;
             }
-
             const isLeft = module.classList.contains('left');
             const side = isLeft ? 'left' : 'right';
             const wasOpen = module.classList.contains('open');
             const statusEl = document.getElementById('preview-status');
-
             // 1. Get all modules on the same side
             const sideModules = document.querySelectorAll(`.slide-module.${side}`);
-
             // 2. If it was already open, just close it.
             if (wasOpen) {
                 module.classList.remove('open');
@@ -1833,7 +1679,6 @@
                 });
                 // ...and then open this one.
                 module.classList.add('open');
-
                 if (moduleName === 'preview') {
                     previewEnabled = true;
                     if (statusEl) statusEl.style.display = 'inline';
@@ -1841,7 +1686,6 @@
                 }
             }
         }
-
         function attachModuleListeners() {
             // Module tab click handlers
             const tabs = document.querySelectorAll('.module-tab');
@@ -1853,36 +1697,28 @@
                 });
             });
         }
-
         // === ATTACH EVENT LISTENERS (DOM-CONTENT-LOADED SAFE) ===
         function attachGlobalEventListeners() {
             const dropdownButton = document.getElementById('dropdown-button');
             const dropdownContent = document.getElementById('dropdown-content');
             if (dropdownButton) dropdownButton.addEventListener('click', toggleDropdown);
             if (dropdownContent) dropdownContent.addEventListener('click', selectOption);
-
             document.addEventListener('click', (e) => {
                 const dropdown = document.getElementById('component-dropdown');
                 if (dropdown && !dropdown.contains(e.target)) {
                     dropdown.classList.remove('show');
                 }
             });
-
             const addInputBtn = document.getElementById('add-input-button');
             if (addInputBtn) addInputBtn.addEventListener('click', () => addInput());
-
             const genCodeBtn = document.getElementById('generate-code-button');
             if (genCodeBtn) genCodeBtn.addEventListener('click', generateCode);
-
             const copyBtn = document.getElementById('copy-button');
             if (copyBtn) copyBtn.addEventListener('click', copyToClipboard);
-
             const toggleEditBtn = document.getElementById('toggle-editable');
             if (toggleEditBtn) toggleEditBtn.addEventListener('click', toggleEditable);
-
             const refreshBtn = document.getElementById('refresh-preview');
             if (refreshBtn) refreshBtn.addEventListener('click', updateLivePreview);
-
             // Animation selection
             document.querySelectorAll('.animation-option').forEach(option => {
                 option.addEventListener('click', function() {
@@ -1896,39 +1732,32 @@
                     }
                 });
             });
-
             // Platform export dropdown
             const platformButton = document.getElementById('platform-button');
             const platformOptions = document.getElementById('platform-options');
-
             if(platformButton) {
                 platformButton.addEventListener('click', (e) => {
                     e.stopPropagation();
                     if(platformOptions) platformOptions.classList.toggle('show');
                 });
             }
-
             document.addEventListener('click', (e) => {
                 if (platformButton && !platformButton.contains(e.target) && platformOptions && !platformOptions.contains(e.target)) {
                     platformOptions.classList.remove('show');
                 }
             });
-
             document.querySelectorAll('.platform-option').forEach(option => {
                 option.addEventListener('click', function() {
                     const platform = this.dataset.platform;
                     const codeEl = document.getElementById('generated-code');
                     if (!codeEl) return;
                     const currentCode = codeEl.textContent;
-
                     if (!currentCode || currentCode.includes('Generated code will appear here')) {
                         showToast('Generate code first before exporting', true);
                         return;
                     }
-
                     const exported = exportToPlatform(platform, currentCode);
                     codeEl.textContent = exported;
-
                     if (window.hljs) {
                         try {
                             hljs.highlightElement(codeEl);
@@ -1936,13 +1765,11 @@
                             console.error("highlight.js failed:", e);
                         }
                     }
-
                     if (platformOptions) platformOptions.classList.remove('show');
                     showToast(`Exported to ${this.textContent.trim()}`);
                 });
             });
         }
-
         // === COLOR PALETTE FUNCTIONALITY ===
         function initColorPalette() {
             // Color swatch selection
@@ -1954,24 +1781,20 @@
                     if (previewEnabled) updateLivePreview();
                 });
             });
-
             // Custom color picker
             const colorPicker = document.getElementById('custom-color-picker');
             const colorHex = document.getElementById('custom-color-hex');
             const applyBtn = document.getElementById('apply-custom-color');
-
             if (colorPicker && colorHex) {
                 colorPicker.addEventListener('input', (e) => {
                     colorHex.value = e.target.value;
                 });
-
                 colorHex.addEventListener('input', (e) => {
                     const hex = e.target.value;
                     if (/^#[0-9A-F]{6}$/i.test(hex)) {
                         colorPicker.value = hex;
                     }
                 });
-
                 applyBtn.addEventListener('click', () => {
                     customColor = colorPicker.value;
                     selectedColorPalette = 'custom';
@@ -1981,7 +1804,6 @@
                 });
             }
         }
-
         // Get color values based on selected palette
         function getColorValues() {
             const palettes = {
@@ -1997,9 +1819,7 @@
             };
             return palettes[selectedColorPalette] || palettes.indigo;
         }
-
         // === INITIALIZATION ===
-
         document.addEventListener('DOMContentLoaded', () => {
             try {
                 renderApp();
@@ -2008,18 +1828,15 @@
                 attachModuleListeners(); // Attach the module tab listeners
                 initColorPalette();
                 createParticles();
-
                 // Open the components panel by default to guide the user
                 setTimeout(() => {
                     toggleModule('components');
                 }, 500);
-
             } catch (e) {
                 console.error('❌ App initialization failed:', e);
                 document.getElementById('app').innerHTML = '<div style="color: white; padding: 50px;">Error: ' + e.message + '</div>';
             }
         });
-
     </script>
 </body>
 </html>