Hugging Face's logo

Spaces:
steved3269
/
dataform-delight
Running

App Files Community
steved3269 commited on
Commit
492a0fe
·
verified ·
1 Parent(s): 6543bfb

remove the id field

Browse files
Files changed (4) hide show
  1. README.md +8 -5
  2. index.html +112 -19
  3. script.js +48 -0
  4. style.css +26 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Dataform Delight
3
- emoji: 📉
4
- colorFrom: pink
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: DataForm Delight 🚀
3
+ colorFrom: blue
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,112 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FormCraft Pro - JSON Data Wizard</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ 500: '#6366F1',
18
+ },
19
+ secondary: {
20
+ 500: '#EC4899',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ </head>
28
+ <body class="bg-gray-50 min-h-screen">
29
+ <div class="container mx-auto px-4 py-12">
30
+ <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
31
+ <div class="bg-primary-500 p-6">
32
+ <div class="flex items-center">
33
+ <i data-feather="edit-3" class="text-white mr-3"></i>
34
+ <h1 class="text-2xl font-bold text-white">FormCraft Pro</h1>
35
+ </div>
36
+ <p class="text-primary-100 mt-1">Fill in the details below</p>
37
+ </div>
38
+
39
+ <form id="dataForm" class="p-6 space-y-6">
40
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
41
+ <div>
42
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
43
+ <input type="text" id="name" name="name"
44
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition">
45
+ </div>
46
+
47
+ <div class="md:col-span-2">
48
+ <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
49
+ <textarea id="address" name="address" rows="3"
50
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition"></textarea>
51
+ </div>
52
+
53
+ <div>
54
+ <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
55
+ <input type="tel" id="phone" name="phone"
56
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition">
57
+ </div>
58
+
59
+ <div>
60
+ <label for="logoUrl" class="block text-sm font-medium text-gray-700 mb-1">Logo URL</label>
61
+ <div class="flex">
62
+ <input type="url" id="logoUrl" name="logoUrl"
63
+ class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition">
64
+ <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">
65
+ <i data-feather="upload" class="w-4 h-4"></i>
66
+ </button>
67
+ </div>
68
+ </div>
69
+
70
+ <div>
71
+ <label for="createdAt" class="block text-sm font-medium text-gray-700 mb-1">Created At</label>
72
+ <input type="datetime-local" id="createdAt" name="createdAt"
73
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition">
74
+ </div>
75
+
76
+ <div>
77
+ <label for="updatedAt" class="block text-sm font-medium text-gray-700 mb-1">Updated At</label>
78
+ <input type="datetime-local" id="updatedAt" name="updatedAt"
79
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition">
80
+ </div>
81
+ </div>
82
+
83
+ <div class="flex justify-end space-x-4 pt-4">
84
+ <button type="reset" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
85
+ Reset
86
+ </button>
87
+ <button type="submit" class="px-6 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition flex items-center">
88
+ <i data-feather="save" class="mr-2 w-4 h-4"></i>
89
+ Submit
90
+ </button>
91
+ </div>
92
+ </form>
93
+ </div>
94
+
95
+ <div id="jsonOutput" class="max-w-2xl mx-auto mt-8 bg-gray-800 rounded-xl shadow-md overflow-hidden hidden">
96
+ <div class="bg-gray-700 p-4 flex justify-between items-center">
97
+ <h2 class="text-lg font-medium text-white">JSON Output</h2>
98
+ <button id="copyJson" class="text-gray-300 hover:text-white">
99
+ <i data-feather="copy" class="w-4 h-4"></i>
100
+ </button>
101
+ </div>
102
+ <pre class="p-4 text-gray-100 overflow-auto max-h-96"><code id="jsonContent"></code></pre>
103
+ </div>
104
+ </div>
105
+
106
+ <script src="script.js"></script>
107
+ <script>
108
+ feather.replace();
109
+ </script>
110
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
111
+ </body>
112
+ </html>
script.js ADDED
@@ -0,0 +1,48 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ const form = document.getElementById('dataForm');
3
+ const jsonOutput = document.getElementById('jsonOutput');
4
+ const jsonContent = document.getElementById('jsonContent');
5
+ const copyButton = document.getElementById('copyJson');
6
+
7
+ // Set default dates to current time
8
+ const now = new Date();
9
+ const formattedNow = now.toISOString().slice(0, 16);
10
+ document.getElementById('createdAt').value = formattedNow;
11
+ document.getElementById('updatedAt').value = formattedNow;
12
+
13
+ form.addEventListener('submit', function(e) {
14
+ e.preventDefault();
15
+
16
+ const formData = new FormData(form);
17
+ const data = {
18
+ name: formData.get('name'),
19
+ address: formData.get('address'),
20
+ phone: formData.get('phone'),
21
+ logoUrl: formData.get('logoUrl'),
22
+ createdAt: new Date(formData.get('createdAt')).toISOString(),
23
+ updatedAt: new Date(formData.get('updatedAt')).toISOString()
24
+ };
25
+
26
+ // Display formatted JSON
27
+ jsonContent.textContent = JSON.stringify(data, null, 2);
28
+ jsonOutput.classList.remove('hidden');
29
+
30
+ // Scroll to output
31
+ jsonOutput.scrollIntoView({ behavior: 'smooth' });
32
+ });
33
+
34
+ copyButton.addEventListener('click', function() {
35
+ const textToCopy = jsonContent.textContent;
36
+ navigator.clipboard.writeText(textToCopy).then(() => {
37
+ // Show copied feedback
38
+ const originalIcon = copyButton.innerHTML;
39
+ copyButton.innerHTML = '<i data-feather="check" class="w-4 h-4"></i>';
40
+ feather.replace();
41
+
42
+ setTimeout(() => {
43
+ copyButton.innerHTML = originalIcon;
44
+ feather.replace();
45
+ }, 2000);
46
+ });
47
+ });
48
+ });
style.css CHANGED
@@ -1,28 +1,35 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom styles that can't be achieved with Tailwind */
2
+ #jsonOutput pre {
3
+ background-color: #1f2937;
4
+ border-radius: 0 0 0.75rem 0.75rem;
5
  }
6
 
7
+ #jsonOutput code {
8
+ font-family: 'Courier New', Courier, monospace;
9
+ font-size: 0.875rem;
10
+ line-height: 1.5;
11
  }
12
 
13
+ /* Smooth transitions for form elements */
14
+ input, textarea, select {
15
+ transition: all 0.2s ease;
 
 
16
  }
17
 
18
+ /* Custom scrollbar for JSON output */
19
+ #jsonOutput pre::-webkit-scrollbar {
20
+ height: 8px;
21
+ width: 8px;
 
 
22
  }
23
 
24
+ #jsonOutput pre::-webkit-scrollbar-track {
25
+ background: #374151;
26
  }
27
+
28
+ #jsonOutput pre::-webkit-scrollbar-thumb {
29
+ background: #6B7280;
30
+ border-radius: 4px;
31
+ }
32
+
33
+ #jsonOutput pre::-webkit-scrollbar-thumb:hover {
34
+ background: #9CA3AF;
35
+ }