JSON-CRUD/index.html at main · rniedson/JSON-CRUD · GitHub

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
<!DOCTYPE html>

<!-- /**
Brazil, JUL 25

* For more information and to contribute to the improvement of this code,
 * please visit our GitHub repository: [GitHub Repository URL]
 * Feel free to fork the repository, create issues, and submit pull requests.
 */


/**
 * For more information and to contribute to the improvement of this code,
 * please visit our GitHub repository: https://github.com/rniedson/jsoncrud
 * Feel free to fork the repository, create issues, and submit pull requests.
 */
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON CRUD - Prototype Wizard</title>
    <!-- Linking Tailwind CSS for styling -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-green-100">
    <!-- Main container for the application -->
    <div class="max-w-7xl mx-auto p-6 bg-white mt-10 rounded shadow">
        <h1 class="text-2xl font-bold mb-4">
            <!-- Title and link to GitHub repository -->
            <a href="https://github.com/rniedson/jsoncrud">JSON CRUD</a> - Prototype Wizard
        </h1>
        <div class="flex">
            <!-- Left section for file input and form -->
            <div class="w-2/3 p-4">
                <!-- Input for JSON file upload -->
                <input type="file" class="json-file-input mb-4" />
                <!-- Form container for dynamic fields -->
                <form class="json-form">
                    <!-- Container where form fields will be dynamically added -->
                    <div class="form-container space-y-4"></div>
                    <!-- Action buttons (Add Item and Save) -->
                    <div class="action-buttons mt-4 hidden">
                        <button type="button" class="add-item bg-blue-500 text-white p-2 rounded text-xs">Add Item</button>
                        <button type="button" class="save-json bg-green-500 text-white p-2 rounded text-xs">Save</button>
                    </div>
                </form>
                <!-- Placeholder image shown when no form is present -->
                <img class="placeholder-image w-full mt-4" src="https://i.imgur.com/2JCf2cq.png" alt="Placeholder" />
            </div>
            <!-- Right section for JSON output -->
            <div class="w-1/3 p-4 bg-gray-200 rounded">
                <div class="flex justify-between items-center mb-2">
                    <h2 class="text-sm font-bold">JSON Output</h2>
                    <!-- Save button for JSON output -->
                    <button type="button" class="save-json bg-green-500 text-white p-2 rounded text-xs">Save</button>
                </div>
                <!-- Preformatted text area for displaying JSON output -->
                <pre class="json-output text-xs p-2 bg-white border border-gray-300 rounded"></pre>
            </div>
        </div>
    </div>
    <!-- Linking the JavaScript file for the application logic -->
    <script src="app.js"></script>
</body>
</html>