Spaces:
Running
Running
File size: 5,930 Bytes
492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe ff7205b 492a0fe | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <!DOCTYPE html>
<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> |