-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
147 lines (133 loc) · 7.6 KB
/
Copy pathindex.html
File metadata and controls
147 lines (133 loc) · 7.6 KB
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
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Convert CSV files to JSON locally in your browser, with multilingual UI and encoding support.">
<title>2json - CSV to JSON Converter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="app-shell">
<header class="app-header">
<div class="brand-block">
<h1 data-i18n="appTitle">2json</h1>
<p data-i18n="appSubtitle">Convert CSV files to clean JSON in your browser.</p>
</div>
<div class="language-control">
<label for="languageSelect" data-i18n="languageLabel">Language</label>
<select id="languageSelect"></select>
</div>
</header>
<div class="workspace">
<section class="panel input-panel" aria-labelledby="inputHeading">
<div class="panel-heading">
<h2 id="inputHeading" data-i18n="inputTitle">Input CSV</h2>
<p data-i18n="inputHelp">Upload a file or paste CSV text.</p>
</div>
<div class="field-group">
<label for="csvFile" data-i18n="uploadLabel">CSV file</label>
<input id="csvFile" type="file" accept=".csv,text/csv,text/plain">
</div>
<div class="field-group">
<label for="csvText" data-i18n="pasteLabel">CSV text</label>
<textarea id="csvText" spellcheck="false" data-i18n-placeholder="pastePlaceholder" placeholder="Paste CSV content here..."></textarea>
</div>
<section class="options-panel" aria-labelledby="optionsHeading">
<h3 id="optionsHeading" data-i18n="optionsTitle">Options</h3>
<div class="options-grid">
<label class="control-field" for="delimiterSelect">
<span data-i18n="delimiterLabel">Delimiter</span>
<select id="delimiterSelect">
<option value="auto" data-i18n="delimiterAuto">Auto detect</option>
<option value="," data-i18n="delimiterComma">Comma</option>
<option value=";" data-i18n="delimiterSemicolon">Semicolon</option>
<option value="tab" data-i18n="delimiterTab">Tab</option>
<option value="|" data-i18n="delimiterPipe">Pipe</option>
</select>
</label>
<label class="control-field" for="encodingSelect">
<span data-i18n="encodingLabel">File encoding</span>
<select id="encodingSelect">
<option value="utf-8">UTF-8</option>
<option value="utf-16le">UTF-16 LE</option>
<option value="utf-16be">UTF-16 BE</option>
<option value="gb18030">GB18030</option>
<option value="big5">Big5</option>
<option value="shift_jis">Shift_JIS</option>
<option value="euc-kr">EUC-KR</option>
<option value="windows-1252">Windows-1252</option>
<option value="iso-8859-1">ISO-8859-1</option>
</select>
</label>
<label class="control-field" for="shapeSelect">
<span data-i18n="shapeLabel">JSON shape</span>
<select id="shapeSelect">
<option value="objects" data-i18n="shapeObjects">Objects from header row</option>
<option value="arrays" data-i18n="shapeArrays">Arrays of rows</option>
</select>
</label>
<label class="control-field" for="formatSelect">
<span data-i18n="formatLabel">Formatting</span>
<select id="formatSelect">
<option value="pretty" data-i18n="pretty">Pretty</option>
<option value="compact" data-i18n="compact">Compact</option>
</select>
</label>
</div>
<div class="check-grid">
<label class="check-row">
<input id="trimFields" type="checkbox" checked>
<span data-i18n="trimLabel">Trim leading and trailing spaces</span>
</label>
<label class="check-row">
<input id="emptyAsNull" type="checkbox">
<span data-i18n="emptyAsNullLabel">Convert empty cells to null</span>
</label>
<label class="check-row">
<input id="skipEmptyRows" type="checkbox" checked>
<span data-i18n="skipEmptyRowsLabel">Skip empty rows</span>
</label>
</div>
</section>
<div class="actions">
<button id="convertBtn" class="button primary" type="button">
<span class="button-icon" aria-hidden="true">↻</span>
<span data-i18n="convert">Convert</span>
</button>
<button id="sampleBtn" class="button" type="button">
<span class="button-icon" aria-hidden="true">[]</span>
<span data-i18n="sample">Sample</span>
</button>
<button id="clearBtn" class="button ghost" type="button">
<span class="button-icon" aria-hidden="true">×</span>
<span data-i18n="clear">Clear</span>
</button>
</div>
</section>
<section class="panel output-panel" aria-labelledby="outputHeading">
<div class="panel-heading">
<h2 id="outputHeading" data-i18n="outputTitle">JSON output</h2>
<div class="metric-row" aria-live="polite">
<span><strong id="rowCount">0</strong> <span data-i18n="rowsMetric">rows</span></span>
<span><strong id="columnCount">0</strong> <span data-i18n="columnsMetric">columns</span></span>
</div>
</div>
<pre id="jsonResult" class="result" tabindex="0">Converted JSON will appear here.</pre>
<div class="actions output-actions">
<button id="copyBtn" class="button" type="button">
<span class="button-icon" aria-hidden="true">⧉</span>
<span data-i18n="copy">Copy</span>
</button>
<button id="downloadBtn" class="button" type="button">
<span class="button-icon" aria-hidden="true">↓</span>
<span data-i18n="download">Download</span>
</button>
</div>
<div id="statusMessage" class="status" role="status" aria-live="polite"></div>
</section>
</div>
</main>
<script src="script.js"></script>
</body>
</html>