Spaces:

acecalisto3
/

UIKitV3-Automator

Sleeping

App Files Files Community

acecalisto3 commited on Nov 13, 2025

Commit

4d67e4e

verified ·

1 Parent(s): e46fd23

Update index.html

Browse files

Files changed (1) hide show

index.html +783 -1

index.html CHANGED Viewed

	@@ -1 +1,783 @@
1	- ~~<html><head><link~~ href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>UIKitV3 Automator</title></head><body><main class="prose"><div x-data="{ open: false }"><button @click="open =! open">Transform</button><div x-show="open"><textarea id="input" placeholder="Paste or type your code here" rows="10" cols="50"></textarea><button id="transform">Transform</button><div id="output" placeholder="Your transformed code will appear here"></div></div></div></main></body></html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UIKitV3 Automator</title>
+    <!-- Load Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Load highlight.js for syntax highlighting -->
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
+    <!-- Load Google Font -->
+    <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@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Custom Styles (from style.css) -->
+    <style>
+        /* Base styles */
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #111827; /* bg-gray-900 */
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        /* Dropdown styles */
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #1F2937; /* bg-gray-800 */
+            min-width: 160px;
+            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+            z-index: 1;
+            border-radius: 0.375rem; /* rounded-md */
+        }
+        .dropdown-content a {
+            color: white;
+            padding: 12px 16px;
+            text-decoration: none;
+            display: block;
+        }
+        .dropdown-content a:hover {
+            background-color: #374151; /* bg-gray-700 */
+        }
+        .dropdown:hover .dropdown-content {
+            display: block;
+        }
+        /* Loading spinner styles */
+        .loader {
+            border: 4px solid #f3f3f3; /* Light grey */
+            border-top: 4px solid #3498db; /* Blue */
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* Custom scrollbar for generated code */
+        pre {
+            max-height: 400px;
+            overflow-y: auto;
+            background-color: #1F2937; /* bg-gray-800 */
+            padding: 1rem;
+            border-radius: 0.375rem; /* rounded-md */
+        }
+        /* Simple scrollbar styling */
+        pre::-webkit-scrollbar {
+            width: 8px;
+        }
+        pre::-webkit-scrollbar-track {
+            background: #1F2937; /* bg-gray-800 */
+            border-radius: 4px;
+        }
+        pre::-webkit-scrollbar-thumb {
+            background: #4B5563; /* bg-gray-600 */
+            border-radius: 4px;
+        }
+        pre::-webkit-scrollbar-thumb:hover {
+            background: #6B7280; /* bg-gray-500 */
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white">
+    <!-- App container -->
+    <div id="app">
+        <!-- The JavaScript will render the app content here -->
+    </div>
+    <!-- Load highlight.js script -->
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    <!-- App Logic (from main.js) -->
+    <script>
+        // --- Start of main.js content ---
+        // Function to render the main application UI
+        function renderApp() {
+            // Injects the entire UI into the 'app' div
+            document.getElementById('app').innerHTML = `
+                <div class="container p-8">
+                    <h1 class="text-3xl font-bold text-center mb-8 text-blue-400">UIKitV3 Automator</h1>
+                    <!-- Component Selection -->
+                    <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h2 class="text-xl font-semibold mb-4">1. Select Component</h2>
+                        <div class="dropdown">
+                            <button id="uitkit-v3-automator-dropdown-button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded inline-flex items-center">
+                                <span id="selected-option">Select Component</span>
+                                <svg class="fill-current h-4 w-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
+                            </button>
+                            <div id="uitkit-v3-automator-dropdown-content" class="dropdown-content">
+                                <a href="#" data-value="Button">Button</a>
+                                <a href="#" data-value="Input">Input</a>
+                                <a href="#" data-value="Card">Card</a>
+                                <a href="#" data-value="Navbar">Navbar</a>
+                                <a href="#" data-value="Modal">Modal</a>
+                                <a href="#" data-value="Alert">Alert</a>
+                                <a href="#" data-value="Badge">Badge</a>
+                                <a href="#" data-value="Breadcrumb">Breadcrumb</a>
+                                <a href="#" data-value="Tabs">Tabs</a>
+                                <a href="#" data-value="Pagination">Pagination</a>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Property Inputs -->
+                    <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
+                        <h2 class="text-xl font-semibold mb-4">2. Component Properties</h2>
+                        <div id="inputs-container">
+                            <!-- Dynamic inputs will be added here -->
+                        </div>
+                        <button id="add-input-button" class="mt-4 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
+                            + Add Property
+                        </button>
+                    </div>
+                    <!-- Generate Button -->
+                    <div class="text-center mb-6">
+                        <button id="generate-code-button" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg text-lg transition duration-200 shadow-md">
+                            Generate Code
+                        </button>
+                    </div>
+                    <!-- Code Output -->
+                    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                        <h2 class="text-xl font-semibold mb-4">3. Generated Code</h2>
+                        <div id="loading-spinner" class="loader" style="display: none;"></div>
+                        <div class="relative">
+                            <pre><code id="generated-code" class="language-html rounded-md"><!-- Generated code will appear here --></code></pre>
+                            <button id="copy-button" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white font-bold py-1 px-3 rounded text-sm transition duration-200">
+                                Copy
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+        // Function to toggle dropdown visibility (for mobile or non-hover)
+        function toggleDropdown() {
+            const dropdownContent = document.getElementById('uitkit-v3-automator-dropdown-content');
+            dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
+        }
+        // Function to handle option selection from the dropdown
+        function selectOption(event) {
+            event.preventDefault(); // Prevent default link behavior
+            const value = event.target.dataset.value;
+            if (value) {
+                document.getElementById('selected-option').textContent = value;
+                // Automatically close dropdown after selection
+                document.getElementById('uitkit-v3-automator-dropdown-content').style.display = 'none';
+                // Clear existing inputs
+                document.getElementById('inputs-container').innerHTML = '';
+                // Add default properties for the selected component
+                addDefaultInputs(value);
+            }
+        }
+        // Function to add default inputs based on the selected component
+        function addDefaultInputs(component) {
+             const container = document.getElementById('inputs-container');
+            let defaultProps = [];
+            switch(component) {
+                case 'Button':
+                    defaultProps = [{key: 'text', value: 'Click Me'}, {key: 'color', value: 'blue'}, {key: 'size', value: 'medium'}];
+                    break;
+                case 'Input':
+                    defaultProps = [{key: 'placeholder', value: 'Enter text...'}, {key: 'type', value: 'text'}, {key: 'label', value: 'Username'}];
+                    break;
+                case 'Card':
+                    defaultProps = [{key: 'title', value: 'Card Title'}, {key: 'content', value: 'Some quick example text.'}, {key: 'imageUrl', value: 'https://placehold.co/600x400'}];
+                    break;
+                case 'Navbar':
+                    defaultProps = [{key: 'brand', value: 'MyApp'}, {key: 'links', value: 'Home,About,Contact'}];
+                    break;
+                case 'Modal':
+                    defaultProps = [{key: 'title', value: 'Modal Title'}, {key: 'body', value: 'This is the modal body.'}, {key: 'footer', value: 'Close,Save Changes'}];
+                    break;
+                case 'Alert':
+                    defaultProps = [{key: 'text', value: 'This is an alert.'}, {key: 'type', value: 'info'}];
+                    break;
+                case 'Badge':
+                    defaultProps = [{key: 'text', value: 'New'}, {key: 'color', value: 'blue'}];
+                    break;
+                case 'Breadcrumb':
+                    defaultProps = [{key: 'links', value: 'Home,Library,Data'}];
+                    break;
+                case 'Tabs':
+                    defaultProps = [{key: 'tabs', value: 'Profile,Settings,Danger Zone'}, {key: 'active', value: 'Profile'}];
+                    break;
+                case 'Pagination':
+                    defaultProps = [{key: 'items', value: 'Prev,1,2,3,Next'}];
+                    break;
+            }
+            // Add an input field for each default property
+            defaultProps.forEach(prop => {
+                addInput(prop.key, prop.value);
+            });
+        }
+        // Function to add a new key-value input pair
+        function addInput(key = '', value = '') {
+            const container = document.getElementById('inputs-container');
+            const inputGroup = document.createElement('div');
+            inputGroup.className = 'flex items-center space-x-2 mb-2';
+            inputGroup.innerHTML = `
+                <input type="text" class="property-key bg-gray-700 text-white p-2 rounded w-1/3 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Property" value="${key}">
+                <input type="text" class="property-value bg-gray-700 text-white p-2 rounded w-2/3 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Value" value="${value}">
+                <button class="remove-input-button bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-3 rounded transition duration-200">
+                    -
+                </button>
+            `;
+            container.appendChild(inputGroup);
+            // Add event listener to the new remove button
+            inputGroup.querySelector('.remove-input-button').addEventListener('click', removeInput);
+        }
+        // Function to remove a key-value input pair
+        function removeInput(event) {
+            // Removes the parent 'div' of the clicked remove button
+            event.target.parentElement.remove();
+        }
+        // Function to generate code
+        function generateCode() {
+            const component = document.getElementById('selected-option').textContent;
+            if (component === 'Select Component') {
+                console.warn('Please select a component first.');
+                return;
+            }
+            // Collect all properties from the input fields
+            const inputs = document.getElementById('inputs-container').children;
+            let properties = {};
+            for (let input of inputs) {
+                const key = input.querySelector('.property-key').value;
+                const value = input.querySelector('.property-value').value;
+                if (key) {
+                    properties[key] = value;
+                }
+            }
+            // --- DEBUGGING ---
+            console.log('Collected properties:', properties);
+            // --- END DEBUGGING ---
+            const codeOutput = document.getElementById('generated-code');
+            const loadingSpinner = document.getElementById('loading-spinner');
+            const copyButton = document.getElementById('copy-button');
+            codeOutput.textContent = ''; // Clear previous code
+            copyButton.textContent = 'Copy'; // Reset copy button text
+            copyButton.classList.remove('bg-green-500', 'bg-red-500'); // Reset copy button color
+            loadingSpinner.style.display = 'block'; // Show spinner
+            // Simulate API call delay
+            setTimeout(() => {
+                let generatedHtml = '';
+                try {
+                    // Route to the correct generator function based on component
+                    switch(component) {
+                        case 'Button':
+                            generatedHtml = generateButtonCode(properties);
+                            break;
+                        case 'Input':
+                            generatedHtml = generateInputCode(properties);
+                            break;
+                        case 'Card':
+                            generatedHtml = generateCardCode(properties);
+                            break;
+                        case 'Navbar':
+                            generatedHtml = generateNavbarCode(properties);
+                            break;
+                        case 'Modal':
+                            generatedHtml = generateModalCode(properties);
+                            break;
+                        case 'Alert':
+                            generatedHtml = generateAlertCode(properties);
+                            break;
+                        case 'Badge':
+                            generatedHtml = generateBadgeCode(properties);
+                            break;
+                        case 'Breadcrumb':
+                            generatedHtml = generateBreadcrumbCode(properties);
+                            break;
+                        case 'Tabs':
+                            generatedHtml = generateTabsCode(properties);
+                            break;
+                        case 'Pagination':
+                            generatedHtml = generatePaginationCode(properties);
+                            break;
+                        default:
+                            generatedHtml = `<div class="text-red-400">Error: Component generator not found.</div>`;
+                    }
+                } catch (error) {
+                    generatedHtml = `<div class="text-red-400">Error generating code: ${error.message}</div>`;
+                }
+                // Set text content for syntax highlighting
+                codeOutput.textContent = generatedHtml;
+                // Highlight the generated code using highlight.js
+                if (window.hljs) {
+                    // Check if hljs is loaded
+                    try {
+                         hljs.highlightElement(codeOutput);
+                    } catch (e) {
+                        console.error("highlight.js failed:", e);
+                        codeOutput.innerHTML = generatedHtml.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+                    }
+                } else {
+                     codeOutput.innerHTML = generatedHtml.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+                }
+                loadingSpinner.style.display = 'none'; // Hide spinner
+            }, 1000); // Simulate network delay
+        }
+        // --- Component Code Generators ---
+        function generateButtonCode(props) {
+            const text = props.text || 'Button';
+            const color = props.color || 'blue';
+            const size = props.size || 'medium';
+            let colorClasses = 'bg-blue-600 hover:bg-blue-700';
+            switch(color) {
+                case 'red': colorClasses = 'bg-red-600 hover:bg-red-700'; break;
+                case 'green': colorClasses = 'bg-green-600 hover:bg-green-700'; break;
+                case 'gray': colorClasses = 'bg-gray-600 hover:bg-gray-700'; break;
+            }
+            let sizeClasses = 'py-2 px-4 text-base';
+            switch(size) {
+                case 'small': sizeClasses = 'py-1 px-3 text-sm'; break;
+                case 'large': sizeClasses = 'py-3 px-6 text-lg'; break;
+            }
+            return `
+<button class="${colorClasses} ${sizeClasses} text-white font-bold rounded-lg shadow-md transition duration-200 ease-in-out">
+    ${text}
+</button>
+            `.trim();
+        }
+        function generateInputCode(props) {
+            const placeholder = props.placeholder || '';
+            const type = props.type || 'text';
+            const label = props.label || '';
+            let labelHtml = '';
+            if (label) {
+                labelHtml = `
+<label for="generated-input" class="block text-sm font-medium text-gray-300 mb-1">
+    ${label}
+</label>
+                `.trim();
+            }
+            return `
+<div>
+    ${labelHtml}
+    <input
+        type="${type}"
+        id="generated-input"
+        class="bg-gray-700 text-white p-2 rounded-md w-full border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        placeholder="${placeholder}"
+    >
+</div>
+            `.trim();
+        }
+        function generateCardCode(props) {
+            const title = props.title || 'Card Title';
+            const content = props.content || 'Card content goes here.';
+            const imageUrl = props.imageUrl || '';
+            let imageHtml = '';
+            if (imageUrl) {
+                imageHtml = `
+<img
+    class="w-full h-48 object-cover rounded-t-lg"
+    src="${imageUrl}"
+    alt="${title}"
+    onerror="this.src='https://placehold.co/600x400/374151/FFFFFF?text=Image+Not+Found'"
+>
+                `.trim();
+            }
+            return `
+<div class="max-w-sm bg-gray-800 rounded-lg shadow-lg overflow-hidden">
+    ${imageHtml}
+    <div class="p-6">
+        <h3 class="text-xl font-semibold text-white mb-2">${title}</h3>
+        <p class="text-gray-400">${content}</p>
+    </div>
+</div>
+            `.trim();
+        }
+        function generateNavbarCode(props) {
+            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-3 py-2 rounded-md text-sm font-medium">${link}</a>
+            `).join('');
+            return `
+<nav class="bg-gray-800 shadow-lg">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-16">
+            <div class="flex-shrink-0">
+                <span class="text-white font-bold text-xl">${brand}</span>
+            </div>
+            <div class="hidden md:block">
+                <div class="ml-10 flex items-baseline space-x-4">
+                    ${linksHtml}
+                </div>
+            </div>
+            <!-- Mobile menu button -->
+            <div class="-mr-2 flex md:hidden">
+                <button type"button" class="bg-gray-700 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+                    <span class="sr-only">Open main menu</span>
+                    <!-- Icon for menu (e.g., hamburger icon) -->
+                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</nav>
+            `.trim();
+        }
+        function generateModalCode(props) {
+            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-blue-600 hover:bg-blue-700'
+                    : 'bg-gray-600 hover:bg-gray-700';
+                return `
+    <button class="${colorClasses} text-white font-bold py-2 px-4 rounded transition duration-200">${btnText}</button>
+                `;
+            }).join('');
+            return `
+<!-- Modal Backdrop (background overlay) -->
+<div class="fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center p-4">
+    <!-- Modal Dialog -->
+    <div class="bg-gray-800 rounded-lg shadow-xl max-w-lg w-full z-50 overflow-hidden">
+        <!-- Modal Header -->
+        <div class="flex justify-between items-center p-4 border-b border-gray-700">
+            <h3 class="text-xl font-semibold text-white">${title}</h3>
+            <button class="text-gray-400 hover:text-white transition duration-200">
+                <!-- Close Icon -->
+                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+        <!-- Modal Body -->
+        <div class="p-6">
+            <p class="text-gray-300">${body}</p>
+        </div>
+        <!-- Modal Footer -->
+        <div class="flex justify-end items-center p-4 space-x-2 border-t border-gray-700 bg-gray-700">
+            ${buttonsHtml}
+        </div>
+    </div>
+</div>
+            `.trim();
+        }
+        // --- NEW COMPONENT GENERATORS ---
+        function generateAlertCode(props) {
+            const text = props.text || 'Alert text.';
+            const type = props.type || 'info';
+            let bgClass = 'bg-blue-900 border-blue-700';
+            let textClass = 'text-blue-300';
+            let iconSvg = `
+<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <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 'success':
+                    bgClass = 'bg-green-900 border-green-700';
+                    textClass = 'text-green-300';
+                    iconSvg = `
+<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <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 = 'bg-yellow-900 border-yellow-700';
+                    textClass = 'text-yellow-300';
+                    iconSvg = `
+<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <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 = 'bg-red-900 border-red-700';
+                    textClass = 'text-red-300';
+                    iconSvg = `
+<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <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;
+            }
+            return `
+<div class="flex p-4 rounded-lg ${bgClass} ${textClass} border" role="alert">
+    <span class="flex-shrink-0">
+        ${iconSvg}
+    </span>
+    <span class="sr-only">${type}</span>
+    <div class="ml-3 text-sm font-medium">
+        ${text}
+    </div>
+    <button type="button" class="ml-auto -mx-1.5 -my-1.5 ${bgClass} ${textClass} rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-700 inline-flex h-8 w-8" aria-label="Dismiss">
+        <span class="sr-only">Dismiss</span>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
+            `.trim();
+        }
+        function generateBadgeCode(props) {
+            const text = props.text || 'Badge';
+            const color = props.color || 'blue';
+            let colorClasses = 'bg-blue-800 text-blue-300';
+            switch(color) {
+                case 'red': colorClasses = 'bg-red-800 text-red-300'; break;
+                case 'green': colorClasses = 'bg-green-800 text-green-300'; break;
+                case 'yellow': colorClasses = 'bg-yellow-800 text-yellow-300'; break;
+                case 'gray': colorClasses = 'bg-gray-700 text-gray-300'; break;
+            }
+            return `
+<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${colorClasses}">
+    ${text}
+</span>
+            `.trim();
+        }
+        function generateBreadcrumbCode(props) {
+            const links = (props.links || 'Home,Page').split(',').map(link => link.trim());
+            const separatorSvg = `
+<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <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">
+            ${index > 0 ? separatorSvg : ''}
+            <span class="ml-1 text-sm font-medium text-gray-400 md:ml-2">${link}</span>
+        </div>
+    </li>
+                    `.trim();
+                } else {
+                    return `
+    <li>
+        <div class="flex items-center">
+            ${index > 0 ? separatorSvg : ''}
+            <a href="#" class="ml-1 text-sm font-medium text-gray-300 hover:text-white md:ml-2">${link}</a>
+        </div>
+    </li>
+                    `.trim();
+                }
+            }).join('\n');
+            return `
+<nav class="flex" aria-label="Breadcrumb">
+    <ol class="inline-flex items-center space-x-1 md:space-x-3">
+        ${linksHtml}
+    </ol>
+</nav>
+            `.trim();
+        }
+        function generateTabsCode(props) {
+            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-blue-500 border-blue-500';
+                const inactiveClasses = 'text-gray-400 border-transparent hover:text-gray-300 hover:border-gray-500';
+                return `
+    <li class="mr-2">
+        <a href="#" class="inline-block p-4 border-b-2 rounded-t-lg ${isActive ? activeClasses : inactiveClasses}">
+            ${tab}
+        </a>
+    </li>
+                `.trim();
+            }).join('\n');
+            return `
+<div class="text-sm font-medium text-center text-gray-400 border-b border-gray-700">
+    <ul class="flex flex-wrap -mb-px">
+        ${tabsHtml}
+    </ul>
+</div>
+            `.trim();
+        }
+        function generatePaginationCode(props) {
+            const items = (props.items || '1,2,3').split(',').map(item => item.trim());
+            let itemsHtml = items.map(item => {
+                // Simple check if it's 'Prev' or 'Next' for different styling
+                const isText = isNaN(parseInt(item));
+                const textClasses = 'px-4 py-2';
+                const numClasses = 'w-10 h-10 flex items-center justify-center';
+                return `
+    <li>
+        <a href="#" class="flex items-center justify-center ${isText ? textClasses : numClasses} leading-tight text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white">
+            ${item}
+        </a>
+    </li>
+                `.trim();
+            }).join('\n');
+            return `
+<nav aria-label="Page navigation">
+    <ul class="inline-flex items-center -space-x-px space-x-2">
+        ${itemsHtml}
+    </ul>
+</nav>
+            `.trim();
+        }
+        // Function to copy code to clipboard
+        function copyToClipboard() {
+            const code = document.getElementById('generated-code').textContent;
+            const copyButton = document.getElementById('copy-button');
+            try {
+                const textArea = document.createElement('textarea');
+                textArea.value = code;
+                textArea.style.top = "0";
+                textArea.style.left = "0";
+                textArea.style.position = "fixed";
+                document.body.appendChild(textArea);
+                textArea.focus();
+                textArea.select();
+                const successful = document.execCommand('copy');
+                if (successful) {
+                     copyButton.textContent = 'Copied!';
+                     copyButton.classList.add('bg-green-500'); // Give visual feedback
+                } else {
+                    throw new Error('Copy command failed');
+                }
+            } catch (err) {
+                console.error('Fallback: Oops, unable to copy', err);
+                copyButton.textContent = 'Failed!';
+                copyButton.classList.add('bg-red-500');
+            } finally {
+                const textArea = document.body.querySelector('textarea');
+                if (textArea) {
+                    document.body.removeChild(textArea);
+                }
+            }
+        }
+        // Function to attach all event listeners
+        function attachEventListeners() {
+            // Dropdown button
+            document.getElementById('uitkit-v3-automator-dropdown-button').addEventListener('click', toggleDropdown);
+            // Dropdown options (using event delegation on the container)
+            document.getElementById('uitkit-v3-automator-dropdown-content').addEventListener('click', selectOption);
+            // Add property button
+            document.getElementById('add-input-button').addEventListener('click', () => addInput());
+            // Generate code button
+            document.getElementById('generate-code-button').addEventListener('click', generateCode);
+            // Copy button
+            document.getElementById('copy-button').addEventListener('click', copyToClipboard);
+            // Event listeners for remove buttons are added dynamically in the addInput() function
+        }
+        // --- Main Execution ---
+        // Render the app on load
+        renderApp();
+        // Attach event listeners after rendering
+        attachEventListeners();
+        // --- End of main.js content ---
+    </script>
+</body>
+</html>