Hugging Face's logo

Spaces:
RobinsAIWorld
/
jsonic-v2
Running

App Files Community
RobinsAIWorld commited on
Commit
58d7ea5
·
verified ·
1 Parent(s): 1ff18d9

🐳 10/02 - 14:41 - - widen the useable text area uintil the margin is only a thin border on the sides, and let a whole height of a screen of text be shown at once before the  bottom instructions crowd

Browse files
Files changed (2) hide show
  1. index.html +51 -80
  2. style.css +19 -35
index.html CHANGED
@@ -22,17 +22,17 @@
22
  }
23
  </script>
24
  </head>
25
- <body class="bg-slate-900 min-h-screen p-1 md:p-2">
26
- <div class="max-w-7xl mx-auto">
27
- <header class="mb-8 text-center">
28
- <h1 class="text-3xl md:text-4xl font-bold text-slate-100 mb-2">Visual JSON Editor</h1>
29
- <p class="text-slate-300">The way JSON should <i class="italic font-semibold">ALWAYS</i> been editored!</p>
30
  </header>
31
 
32
  <!-- Menu Bar -->
33
- <div class="menu-bar flex flex-wrap">
34
  <div class="dropdown">
35
- <div class="menu-item">File</div>
36
  <div class="dropdown-content">
37
  <a href="#" id="newBtn"><i class="fas fa-plus mr-2"></i>New</a>
38
  <a href="#" id="openBtn"><i class="fas fa-folder-open mr-2"></i>Open</a>
@@ -40,7 +40,7 @@
40
  </div>
41
  </div>
42
  <div class="dropdown">
43
- <div class="menu-item">Edit</div>
44
  <div class="dropdown-content">
45
  <a href="#" id="undoBtn"><i class="fas fa-undo mr-2"></i>Undo</a>
46
  <a href="#" id="redoBtn"><i class="fas fa-redo mr-2"></i>Redo</a>
@@ -51,14 +51,14 @@
51
  </div>
52
  </div>
53
  <div class="dropdown">
54
- <div class="menu-item">Tools</div>
55
  <div class="dropdown-content">
56
  <a href="#" id="formatBtn"><i class="fas fa-indent mr-2"></i>Format</a>
57
  <a href="#" id="validateBtn"><i class="fas fa-check-circle mr-2"></i>Validate</a>
58
  </div>
59
  </div>
60
  <div class="dropdown">
61
- <div class="menu-item">Help</div>
62
  <div class="dropdown-content">
63
  <a href="#" id="instructionsBtn"><i class="fas fa-info-circle mr-2"></i>Instructions</a>
64
  <a href="#" id="sampleBtn"><i class="fas fa-code mr-2"></i>Sample JSON</a>
@@ -66,51 +66,51 @@
66
  </div>
67
  </div>
68
 
69
- <div class="bg-slate-800 rounded-xl shadow-lg overflow-hidden mb-8">
70
- <div class="p-4 bg-slate-700 border-b flex flex-wrap items-center justify-between gap-2">
71
- <div class="flex flex-wrap gap-2">
72
- <button id="newBtn2" class="btn bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg flex items-center gap-2">
73
- <i class="fas fa-plus"></i> New
74
  </button>
75
- <button id="openBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-4 py-2 rounded-lg flex items-center gap-2">
76
- <i class="fas fa-folder-open"></i> Open
77
  </button>
78
- <button id="saveBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-4 py-2 rounded-lg flex items-center gap-2">
79
- <i class="fas fa-save"></i> Save
80
  </button>
81
  </div>
82
 
83
- <div class="flex flex-wrap gap-2">
84
- <button id="undoBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-3 py-2 rounded-lg">
85
- <i class="fas fa-undo"></i>
86
  </button>
87
- <button id="redoBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-3 py-2 rounded-lg">
88
- <i class="fas fa-redo"></i>
89
  </button>
90
- <button id="formatBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-3 py-2 rounded-lg">
91
- <i class="fas fa-indent"></i>
92
  </button>
93
- <button id="validateBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-3 py-2 rounded-lg">
94
- <i class="fas fa-check-circle"></i>
95
  </button>
96
  </div>
97
  </div>
98
 
99
- <div class="p-1 flex flex-col lg:flex-row gap-2">
100
  <!-- Left Panel - Visual JSON Editor -->
101
  <div class="w-full lg:w-1/2">
102
- <div class="bg-slate-700 rounded-lg p-2 h-full">
103
- <div class="flex justify-between items-center mb-3">
104
- <h2 class="text-lg font-semibold text-slate-200">Visual Editor</h2>
105
- <span class="text-xs text-slate-400 bg-slate-800 px-2 py-1 rounded">Single-click to edit • Tab to navigate • Shift+Enter for new field</span>
106
  </div>
107
- <div class="relative json-editor border rounded-lg min-h-[650px] max-h-[700px] overflow-auto">
108
  <!-- Left line numbers -->
109
- <div id="lineNumbersLeft" class="absolute left-0 top-0 bottom-0 w-10 bg-slate-800 text-slate-500 text-xs font-mono text-right pr-2 select-none overflow-hidden z-10 pt-2"></div>
110
  <!-- Right line numbers -->
111
- <div id="lineNumbersRight" class="absolute right-0 top-0 bottom-0 w-10 bg-slate-800 text-slate-500 text-xs font-mono text-left pl-2 select-none overflow-hidden z-10 pt-2"></div>
112
  <!-- JSON content -->
113
- <div id="jsonEditor" class="pl-10 pr-10 py-2 font-mono">
114
  <!-- JSON content will be rendered here -->
115
  </div>
116
  </div>
@@ -119,29 +119,29 @@
119
 
120
  <!-- Right Panel - JSON Code Editor -->
121
  <div class="w-full lg:w-1/2">
122
- <div class="bg-gray-50 rounded-lg p-2 h-full">
123
- <div class="flex justify-between items-center mb-3">
124
- <h2 class="text-lg font-semibold text-gray-700">Code Editor</h2>
125
- <div class="flex gap-2 items-center">
126
  <span id="autoSaveStatus" class="text-xs text-green-600 hidden"><i class="fas fa-check-circle mr-1"></i>Auto-saved</span>
127
- <button id="applyCodeBtn" class="btn bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-lg text-sm">
128
  <i class="fas fa-check mr-1"></i> Apply
129
  </button>
130
  </div>
131
  </div>
132
- <textarea id="jsonOutput" class="w-full h-[650px] max-h-[700px] font-mono text-sm p-1 border rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
133
- <div class="mt-3 flex flex-wrap gap-2 justify-between">
134
- <div class="flex gap-2">
135
- <button id="copyBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg text-sm">
136
  <i class="fas fa-copy mr-1"></i> Copy
137
  </button>
138
- <button id="downloadBtn" class="btn bg-primary hover:bg-secondary text-white px-3 py-2 rounded-lg text-sm">
139
  <i class="fas fa-download mr-1"></i> Download
140
  </button>
141
  </div>
142
- <div id="validationStatus" class="flex items-center gap-2 text-sm">
143
  <i class="fas fa-check-circle text-green-500"></i>
144
- <span class="text-green-600">Valid JSON</span>
145
  </div>
146
  </div>
147
  </div>
@@ -149,33 +149,6 @@
149
  </div>
150
  </div>
151
 
152
- <div class="bg-white rounded-xl shadow-lg p-6">
153
- <h2 class="text-xl font-bold text-gray-800 mb-4">How It Works</h2>
154
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
155
- <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
156
- <div class="text-blue-500 text-2xl mb-2">
157
- <i class="fas fa-magic"></i>
158
- </div>
159
- <h3 class="font-bold text-lg mb-2">Visual Editing</h3>
160
- <p class="text-gray-700">Easily edit JSON without worrying about brackets or indentation. Each element is visually represented for intuitive editing.</p>
161
- </div>
162
- <div class="bg-green-50 p-4 rounded-lg border border-green-200">
163
- <div class="text-green-500 text-2xl mb-2">
164
- <i class="fas fa-keyboard"></i>
165
- </div>
166
- <h3 class="font-bold text-lg mb-2">Keyboard Navigation</h3>
167
- <p class="text-gray-700">Use Tab/Shift+Tab to navigate fields, Enter to move forward, Shift+Enter to insert new fields. Everything auto-saves!</p>
168
- </div>
169
- <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
170
- <div class="text-purple-500 text-2xl mb-2">
171
- <i class="fas fa-undo"></i>
172
- </div>
173
- <h3 class="font-bold text-lg mb-2">50-Step Undo History</h3>
174
- <p class="text-gray-700">Made a mistake? No problem. With 50 levels of undo history, you can always go back. Auto-save protects your work.</p>
175
- </div>
176
- </div>
177
- </div>
178
-
179
  <div id="notification" class="notification fixed bottom-4 right-4 bg-white shadow-lg rounded-lg p-4 border-l-4 border-green-500 max-w-md">
180
  <div class="flex items-start">
181
  <i class="fas fa-check-circle text-green-500 text-xl mt-0.5 mr-3"></i>
@@ -187,8 +160,8 @@
187
  </div>
188
 
189
  <!-- Coordinates display - fixed position -->
190
- <div id="coordinates" class="fixed top-20 right-4 bg-slate-800 text-slate-300 px-3 py-2 rounded-lg text-xs font-mono shadow-lg z-50 opacity-80 hover:opacity-100 transition-opacity">
191
- <span id="coordLine">Line: 0</span> | <span id="coordChar">Char: 0</span> | <span id="coordDepth">Depth: 0</span>
192
  </div>
193
 
194
  <!-- Context menu -->
@@ -210,7 +183,5 @@
210
  <i class="fas fa-trash"></i> Delete
211
  </div>
212
  </div>
213
- </div>
214
-
215
  <script src="script.js"></script>
216
  </body>
 
22
  }
23
  </script>
24
  </head>
25
+ <body class="bg-slate-900 min-h-screen p-1">
26
+ <div class="w-full">
27
+ <header class="mb-2 text-center py-1">
28
+ <h1 class="text-2xl font-bold text-slate-100">Visual JSON Editor</h1>
29
+ <p class="text-slate-400 text-sm">The way JSON should <i class="italic font-semibold">ALWAYS</i> been editored!</p>
30
  </header>
31
 
32
  <!-- Menu Bar -->
33
+ <div class="menu-bar flex flex-wrap py-1 px-2">
34
  <div class="dropdown">
35
+ <div class="menu-item px-2 py-1">File</div>
36
  <div class="dropdown-content">
37
  <a href="#" id="newBtn"><i class="fas fa-plus mr-2"></i>New</a>
38
  <a href="#" id="openBtn"><i class="fas fa-folder-open mr-2"></i>Open</a>
 
40
  </div>
41
  </div>
42
  <div class="dropdown">
43
+ <div class="menu-item px-2 py-1">Edit</div>
44
  <div class="dropdown-content">
45
  <a href="#" id="undoBtn"><i class="fas fa-undo mr-2"></i>Undo</a>
46
  <a href="#" id="redoBtn"><i class="fas fa-redo mr-2"></i>Redo</a>
 
51
  </div>
52
  </div>
53
  <div class="dropdown">
54
+ <div class="menu-item px-2 py-1">Tools</div>
55
  <div class="dropdown-content">
56
  <a href="#" id="formatBtn"><i class="fas fa-indent mr-2"></i>Format</a>
57
  <a href="#" id="validateBtn"><i class="fas fa-check-circle mr-2"></i>Validate</a>
58
  </div>
59
  </div>
60
  <div class="dropdown">
61
+ <div class="menu-item px-2 py-1">Help</div>
62
  <div class="dropdown-content">
63
  <a href="#" id="instructionsBtn"><i class="fas fa-info-circle mr-2"></i>Instructions</a>
64
  <a href="#" id="sampleBtn"><i class="fas fa-code mr-2"></i>Sample JSON</a>
 
66
  </div>
67
  </div>
68
 
69
+ <div class="bg-slate-800 rounded-lg overflow-hidden mb-2 border border-slate-700">
70
+ <div class="p-2 bg-slate-700 border-b border-slate-600 flex flex-wrap items-center justify-between gap-2">
71
+ <div class="flex flex-wrap gap-1">
72
+ <button id="newBtn2" class="btn bg-primary hover:bg-secondary text-white px-3 py-1.5 rounded flex items-center gap-1 text-sm">
73
+ <i class="fas fa-plus text-xs"></i> New
74
  </button>
75
+ <button id="openBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-3 py-1.5 rounded flex items-center gap-1 text-sm">
76
+ <i class="fas fa-folder-open text-xs"></i> Open
77
  </button>
78
+ <button id="saveBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-3 py-1.5 rounded flex items-center gap-1 text-sm">
79
+ <i class="fas fa-save text-xs"></i> Save
80
  </button>
81
  </div>
82
 
83
+ <div class="flex flex-wrap gap-1">
84
+ <button id="undoBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-2 py-1.5 rounded text-sm">
85
+ <i class="fas fa-undo text-xs"></i>
86
  </button>
87
+ <button id="redoBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-2 py-1.5 rounded text-sm">
88
+ <i class="fas fa-redo text-xs"></i>
89
  </button>
90
+ <button id="formatBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-2 py-1.5 rounded text-sm">
91
+ <i class="fas fa-indent text-xs"></i>
92
  </button>
93
+ <button id="validateBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-2 py-1.5 rounded text-sm">
94
+ <i class="fas fa-check-circle text-xs"></i>
95
  </button>
96
  </div>
97
  </div>
98
 
99
+ <div class="flex flex-col lg:flex-row gap-0.5">
100
  <!-- Left Panel - Visual JSON Editor -->
101
  <div class="w-full lg:w-1/2">
102
+ <div class="bg-slate-700 h-full flex flex-col">
103
+ <div class="flex justify-between items-center px-2 py-1 border-b border-slate-600">
104
+ <h2 class="text-sm font-semibold text-slate-200">Visual Editor</h2>
105
+ <span class="text-xs text-slate-400">Click to edit • Tab/Shift+Tab nav • Shift+Enter new</span>
106
  </div>
107
+ <div class="relative json-editor border-none overflow-auto flex-1" style="height: calc(100vh - 180px);">
108
  <!-- Left line numbers -->
109
+ <div id="lineNumbersLeft" class="absolute left-0 top-0 bottom-0 w-8 bg-slate-800 text-slate-500 text-xs font-mono text-right pr-2 select-none overflow-hidden z-10 pt-1 border-r border-slate-700"></div>
110
  <!-- Right line numbers -->
111
+ <div id="lineNumbersRight" class="absolute right-0 top-0 bottom-0 w-8 bg-slate-800 text-slate-500 text-xs font-mono text-left pl-2 select-none overflow-hidden z-10 pt-1 border-l border-slate-700"></div>
112
  <!-- JSON content -->
113
+ <div id="jsonEditor" class="pl-9 pr-9 py-1 font-mono text-sm">
114
  <!-- JSON content will be rendered here -->
115
  </div>
116
  </div>
 
119
 
120
  <!-- Right Panel - JSON Code Editor -->
121
  <div class="w-full lg:w-1/2">
122
+ <div class="bg-gray-50 h-full flex flex-col">
123
+ <div class="flex justify-between items-center px-2 py-1 border-b border-gray-300 bg-gray-100">
124
+ <h2 class="text-sm font-semibold text-gray-700">Code Editor</h2>
125
+ <div class="flex gap-1 items-center">
126
  <span id="autoSaveStatus" class="text-xs text-green-600 hidden"><i class="fas fa-check-circle mr-1"></i>Auto-saved</span>
127
+ <button id="applyCodeBtn" class="btn bg-green-500 hover:bg-green-600 text-white px-2 py-1 rounded text-xs">
128
  <i class="fas fa-check mr-1"></i> Apply
129
  </button>
130
  </div>
131
  </div>
132
+ <textarea id="jsonOutput" class="w-full flex-1 font-mono text-sm p-1 border-none bg-white focus:outline-none resize-none" style="height: calc(100vh - 180px);"></textarea>
133
+ <div class="px-2 py-1 border-t border-gray-300 flex flex-wrap gap-1 justify-between items-center bg-gray-100">
134
+ <div class="flex gap-1">
135
+ <button id="copyBtn" class="btn bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded text-xs">
136
  <i class="fas fa-copy mr-1"></i> Copy
137
  </button>
138
+ <button id="downloadBtn" class="btn bg-primary hover:bg-secondary text-white px-2 py-1 rounded text-xs">
139
  <i class="fas fa-download mr-1"></i> Download
140
  </button>
141
  </div>
142
+ <div id="validationStatus" class="flex items-center gap-1 text-xs">
143
  <i class="fas fa-check-circle text-green-500"></i>
144
+ <span class="text-green-600">Valid</span>
145
  </div>
146
  </div>
147
  </div>
 
149
  </div>
150
  </div>
151
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
152
  <div id="notification" class="notification fixed bottom-4 right-4 bg-white shadow-lg rounded-lg p-4 border-l-4 border-green-500 max-w-md">
153
  <div class="flex items-start">
154
  <i class="fas fa-check-circle text-green-500 text-xl mt-0.5 mr-3"></i>
 
160
  </div>
161
 
162
  <!-- Coordinates display - fixed position -->
163
+ <div id="coordinates" class="fixed top-16 right-2 bg-slate-800 text-slate-300 px-2 py-1 rounded text-xs font-mono shadow-lg z-50 opacity-80 hover:opacity-100 transition-opacity border border-slate-600">
164
+ <span id="coordLine">L:0</span> <span id="coordChar">C:0</span> <span id="coordDepth">D:0</span>
165
  </div>
166
 
167
  <!-- Context menu -->
 
183
  <i class="fas fa-trash"></i> Delete
184
  </div>
185
  </div>
 
 
186
  <script src="script.js"></script>
187
  </body>
style.css CHANGED
@@ -1,5 +1,6 @@
1
  body {
2
- padding: 2rem;
 
3
  font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
@@ -59,8 +60,9 @@ p {
59
 
60
  /* Notification styles */
61
  .notification {
62
- transform: translateX(100%);
63
  transition: transform 0.3s ease;
 
64
  }
65
 
66
  .notification.show {
@@ -76,19 +78,17 @@ p {
76
  /* Menu bar styles */
77
  .menu-bar {
78
  background-color: #334155;
79
- padding: 8px 16px;
80
- border-radius: 8px;
81
- margin-bottom: 16px;
82
- box-shadow: 0 2px 4px rgba(0,0,0,0.2);
83
  }
84
 
85
  .menu-item {
86
  color: #cbd5e1;
87
- padding: 8px 12px;
88
- border-radius: 4px;
89
  cursor: pointer;
90
  transition: all 0.2s;
91
- margin-right: 4px;
92
  }
93
 
94
  .menu-item:hover {
@@ -110,18 +110,20 @@ p {
110
  display: none;
111
  position: absolute;
112
  background-color: #334155;
113
- min-width: 160px;
114
- box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
115
  z-index: 1;
116
- border-radius: 4px;
117
  overflow: hidden;
 
118
  }
119
 
120
  .dropdown-content a {
121
  color: #cbd5e1;
122
- padding: 12px 16px;
123
  text-decoration: none;
124
  display: block;
 
125
  }
126
 
127
  .dropdown-content a:hover {
@@ -226,7 +228,7 @@ p {
226
  /* JSON Editor styles */
227
  .json-editor {
228
  background-color: #1e293b;
229
- border: 1px solid #334155;
230
  }
231
 
232
  .json-item {
@@ -410,32 +412,14 @@ p {
410
  /* Line numbers */
411
  #lineNumbersLeft,
412
  #lineNumbersRight {
413
- border-top: 4px solid #334155;
414
- border-bottom: 4px solid #334155;
415
- }
416
-
417
- #lineNumbersLeft {
418
- border-right: 1px solid #475569;
419
- }
420
-
421
- #lineNumbersRight {
422
- border-left: 1px solid #475569;
423
  }
424
 
425
  /* Coordinates display */
426
- #coordinates {
427
- border: 1px solid #475569;
428
- min-width: 150px;
429
- text-align: center;
430
- }
431
-
432
  #coordinates span {
433
- color: #94a3b8;
434
- }
435
-
436
- #coordinates span::before {
437
  color: #60a5fa;
438
- margin-right: 2px;
439
  }
440
 
441
  /* Context menu */
 
1
  body {
2
+ padding: 0;
3
+ margin: 0;
4
  font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
5
  }
6
 
 
60
 
61
  /* Notification styles */
62
  .notification {
63
+ transform: translateX(120%);
64
  transition: transform 0.3s ease;
65
+ max-width: 300px;
66
  }
67
 
68
  .notification.show {
 
78
  /* Menu bar styles */
79
  .menu-bar {
80
  background-color: #334155;
81
+ border-radius: 4px;
82
+ margin-bottom: 4px;
83
+ box-shadow: 0 1px 2px rgba(0,0,0,0.2);
 
84
  }
85
 
86
  .menu-item {
87
  color: #cbd5e1;
88
+ border-radius: 2px;
 
89
  cursor: pointer;
90
  transition: all 0.2s;
91
+ margin-right: 2px;
92
  }
93
 
94
  .menu-item:hover {
 
110
  display: none;
111
  position: absolute;
112
  background-color: #334155;
113
+ min-width: 140px;
114
+ box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
115
  z-index: 1;
116
+ border-radius: 2px;
117
  overflow: hidden;
118
+ border: 1px solid #475569;
119
  }
120
 
121
  .dropdown-content a {
122
  color: #cbd5e1;
123
+ padding: 8px 12px;
124
  text-decoration: none;
125
  display: block;
126
+ font-size: 13px;
127
  }
128
 
129
  .dropdown-content a:hover {
 
228
  /* JSON Editor styles */
229
  .json-editor {
230
  background-color: #1e293b;
231
+ border: none;
232
  }
233
 
234
  .json-item {
 
412
  /* Line numbers */
413
  #lineNumbersLeft,
414
  #lineNumbersRight {
415
+ border-top: none;
416
+ border-bottom: none;
 
 
 
 
 
 
 
 
417
  }
418
 
419
  /* Coordinates display */
 
 
 
 
 
 
420
  #coordinates span {
 
 
 
 
421
  color: #60a5fa;
422
+ margin: 0 2px;
423
  }
424
 
425
  /* Context menu */