-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathformatter.html
166 lines (155 loc) · 9.19 KB
/
formatter.html
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Free online JSON Formatter, Validator, and Beautifier. Easily format, pretty-print, validate, and minify your JSON data. Secure, fast, and client-side processing.">
<meta name="theme-color" content="#ffffff">
<!-- OpenGraph -->
<meta property="og:title" content="Online JSON Formatter & Validator - Beautify & Minify JSON">
<meta property="og:description" content="Free online JSON Formatter, Validator, and Beautifier. Easily format, pretty-print, validate, and minify your JSON data. Secure, fast, and client-side processing.">
<meta property="og:type" content="website">
<meta property="og:url" content="YOUR_DEPLOYMENT_URL_HERE/formatter.html"> <!-- Replace with actual URL later -->
<!-- <meta property="og:image" content="YOUR_OG_IMAGE_URL_HERE"> --> <!-- Add OG image later -->
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Online JSON Formatter & Validator - Beautify & Minify JSON">
<meta name="twitter:description" content="Free online JSON Formatter, Validator, and Beautifier. Easily format, pretty-print, validate, and minify your JSON data. Secure, fast, and client-side processing.">
<!-- <meta name="twitter:image" content="YOUR_TWITTER_IMAGE_URL_HERE"> --> <!-- Add Twitter image later -->
<title>Online JSON Formatter & Validator - Beautify & Minify JSON</title>
<link rel="stylesheet" href="style.css">
<!-- Add favicon link later -->
<!-- <link rel="icon" href="favicon.ico" type="image/x-icon"> -->
<!-- Schema Markup -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Online JSON Formatter & Validator",
"description": "Free online JSON Formatter, Validator, and Beautifier. Easily format, pretty-print, validate, and minify your JSON data. Secure, fast, and client-side processing.",
"url": "YOUR_DEPLOYMENT_URL_HERE/formatter.html", // Replace with actual URL later
"mainEntity": {
"@type": "SoftwareApplication",
"name": "JSON Formatter, Validator & Beautifier Tool",
"applicationCategory": "DeveloperTool",
"operatingSystem": "All",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "How to format JSON online?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Simply paste your raw JSON data into the input area. The tool will automatically validate and format it into a readable structure. You can then copy the formatted JSON or download it as a file."
}
},
{
"@type": "Question",
"name": "Is my JSON data secure?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, absolutely. All JSON processing is done entirely within your browser using JavaScript. Your data is never sent to our servers, ensuring complete privacy and security."
}
},
{
"@type": "Question",
"name": "Can I download the formatted JSON?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, after formatting your JSON, you can click the 'Download JSON' button to save the formatted data as a .json file directly to your computer."
}
}
]
}
</script>
</head>
<body> <!-- Removed Tailwind classes -->
<nav> <!-- Removed Tailwind classes -->
<div>JSON Tools</div> <!-- Removed Tailwind classes -->
<div>
<a href="/json-diff">JSON Diff</a> <!-- Removed Tailwind classes -->
<a href="/json-diff/formatter.html">JSON Formatter</a> <!-- Removed Tailwind classes -->
<button id="darkModeToggle">🌙/☀️</button> <!-- Removed Tailwind classes -->
</div>
</nav>
<main class="container"> <!-- Removed Tailwind classes, kept container -->
<section id="intro"> <!-- Removed Tailwind classes -->
<h1>Online JSON Formatter & Validator</h1> <!-- Removed Tailwind classes -->
<p>Easily format, beautify (pretty-print), validate, and minify your JSON data online. Paste your JSON to instantly format it. Copy, download, and ensure your JSON is valid. 100% free, secure, and client-side.</p> <!-- Removed Tailwind classes -->
<div> <!-- Removed Tailwind classes -->
<a href="/json-diff" class="button button-primary"> <!-- Removed Tailwind, added custom classes -->
Need to Compare JSON? Go to JSON Diff Tool
</a>
</div>
</section>
<section id="formatter-tool">
<div> <!-- Removed Tailwind classes -->
<label for="jsonInput">Paste your JSON here:</label> <!-- Removed Tailwind classes -->
<textarea id="jsonInput" rows="15" placeholder="Paste or type your JSON data here..."></textarea> <!-- Removed Tailwind classes -->
<div id="validationError" class="error-message hidden">Invalid JSON</div> <!-- Removed Tailwind, added custom class -->
</div>
<div class="formatter-controls"> <!-- Removed Tailwind, added custom class -->
<button id="formatBtn" class="button button-success"> <!-- Removed Tailwind, added custom classes -->
Format JSON
</button>
<button id="minifyBtn" class="button button-warning"> <!-- Removed Tailwind, added custom classes -->
Minify JSON
</button>
<button id="copyBtn" class="button button-secondary"> <!-- Removed Tailwind, added custom classes -->
Copy to Clipboard
</button>
<button id="downloadBtn" class="button button-primary"> <!-- Removed Tailwind, added custom classes -->
Download JSON
</button>
<label class="checkbox-label"> <!-- Removed Tailwind, added custom class -->
<input type="checkbox" id="autoFormat"> <!-- Removed Tailwind classes -->
<span>Auto-format on paste</span> <!-- Removed Tailwind classes -->
</label>
</div>
<div>
<h2>Formatted Output:</h2> <!-- Removed Tailwind classes -->
<pre id="jsonOutput"><code class="language-json"></code></pre> <!-- Removed Tailwind classes -->
<p id="outputPlaceholder" class="placeholder">Formatted JSON will appear here.</p> <!-- Removed Tailwind, added custom class -->
</div>
</section>
<section id="faq"> <!-- Removed Tailwind classes -->
<h2>Frequently Asked Questions (FAQ)</h2> <!-- Removed Tailwind classes -->
<div class="faq-container"> <!-- Removed Tailwind classes, added custom class -->
<details> <!-- Removed Tailwind classes -->
<summary>How to format JSON online?</summary> <!-- Removed Tailwind classes -->
<p>Simply paste your raw JSON data into the input area. The tool will automatically validate and format it into a readable structure. You can then copy the formatted JSON or download it as a file.</p> <!-- Removed Tailwind classes -->
</details>
<details> <!-- Removed Tailwind classes -->
<summary>Is my JSON data secure?</summary> <!-- Removed Tailwind classes -->
<p>Yes, absolutely. All JSON processing is done entirely within your browser using JavaScript. Your data is never sent to our servers, ensuring complete privacy and security.</p> <!-- Removed Tailwind classes -->
</details>
<details> <!-- Removed Tailwind classes -->
<summary>Can I download the formatted JSON?</summary> <!-- Removed Tailwind classes -->
<p>Yes, after formatting your JSON, you can click the 'Download JSON' button to save the formatted data as a .json file directly to your computer.</p> <!-- Removed Tailwind classes -->
</details>
</div>
</section>
<section id="monetization-placeholder" class="promo-box"> <!-- Removed Tailwind, added custom class -->
<h3>Unlock More Features!</h3> <!-- Removed Tailwind classes -->
<p>Upgrade to the Pro Version for features like history saving, cloud synchronization, and more!</p>
<button class="button button-warning">Learn More (Coming Soon)</button> <!-- Removed Tailwind, added custom classes -->
</section>
</main>
<footer> <!-- Removed Tailwind classes -->
© <span id="year"></span> JSON Tools. All rights reserved.
</footer>
<script src="script.js"></script> <!-- Common script for dark mode, year, etc. -->
<script src="formatter.js"></script> <!-- Formatter specific script -->
</body>
</html>