Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FormCraft Pro - JSON Data Wizard</title> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,aspect-ratio,line-clamp"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#6366F1', | |
| }, | |
| secondary: { | |
| 500: '#EC4899', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 sm:py-12"> | |
| <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl"> | |
| <div class="bg-gradient-to-r from-primary-500 to-secondary-500 p-6"> | |
| <div class="flex items-center"> | |
| <i data-feather="edit-3" class="text-white mr-3 w-6 h-6"></i> | |
| <h1 class="text-2xl sm:text-3xl font-bold text-white">FormCraft Pro</h1> | |
| </div> | |
| <p class="text-primary-100 mt-2 opacity-90">Fill in the details below to generate JSON output</p> | |
| </div> | |
| <form id="dataForm" class="p-6 sm:p-8 space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="space-y-1"> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name <span class="text-red-500">*</span></label> | |
| <input type="text" id="name" name="name" required | |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition placeholder-gray-400"> | |
| </div> | |
| <div class="md:col-span-2 space-y-1"> | |
| <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label> | |
| <textarea id="address" name="address" rows="3" | |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition placeholder-gray-400"></textarea> | |
| </div> | |
| <div class="space-y-1"> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label> | |
| <input type="tel" id="phone" name="phone" | |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition placeholder-gray-400"> | |
| </div> | |
| <div class="space-y-1"> | |
| <label for="logoUrl" class="block text-sm font-medium text-gray-700 mb-1">Logo URL</label> | |
| <div class="flex"> | |
| <input type="url" id="logoUrl" name="logoUrl" | |
| class="flex-1 px-4 py-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition placeholder-gray-400"> | |
| <button type="button" class="bg-gray-100 px-4 border-t border-r border-b border-gray-300 rounded-r-lg hover:bg-gray-200 transition flex items-center justify-center"> | |
| <i data-feather="upload" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-4 pt-4"> | |
| <button type="reset" class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition font-medium"> | |
| Reset Form | |
| </button> | |
| <button type="submit" class="px-6 py-3 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition flex items-center justify-center font-medium shadow-md hover:shadow-lg"> | |
| <i data-feather="save" class="mr-2 w-5 h-5"></i> | |
| Generate JSON | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="jsonOutput" class="max-w-2xl mx-auto mt-8 bg-gray-800 rounded-xl shadow-lg overflow-hidden hidden"> | |
| <div class="bg-gray-700 p-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="code" class="text-gray-300 mr-2 w-5 h-5"></i> | |
| <h2 class="text-lg font-medium text-white">JSON Output</h2> | |
| </div> | |
| <button id="copyJson" class="text-gray-300 hover:text-white transition p-2 rounded-full hover:bg-gray-600"> | |
| <i data-feather="copy" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <pre class="p-4 text-gray-100 overflow-auto max-h-96"><code id="jsonContent" class="language-json"></code></pre> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |