/
index.html
100 lines (96 loc) 路 4.36 KB
/
index.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
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/all.min.css"> -->
<title>JSV Converter</title>
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
<link rel="manifest" href="assets/img/site.webmanifest">
<link rel="mask-icon" href="assets/img/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="./assets/css/alerts-css.css">
<link href="./assets/css/style.css" type="text/css" rel="stylesheet" />
<link href="./assets/css/tooltips.css" type="text/css" rel="stylesheet"/>
<script src="https://kit.fontawesome.com/89bbd3450e.js" crossorigin="anonymous"></script>
<script data-ad-client="ca-pub-2239314107524032" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<body>
<div id="container" class="d-flex j-content-center">
<!-- INPUT SIDE -->
<div id="content">
<div class="d-flex j-content-center tile text-tile">
<textarea name="input-text" id="inputText" class="input-text" placeholder="Type or paste CSV ou JSON..."></textarea>
</div>
<div onclick="handleUploadButton()" class="d-flex tile input-file-tile">
<input type="file" name="file-input" id="fileInput" class="d-none">
<i class="fas fa-upload"></i>
<p id="inputFileLabel">OR UPLOAD FILE</p>
<!-- <div id="uploadButton" class=""> -->
<!-- </div> -->
</div>
</div>
<!-- CONVERT SIDE -->
<div id="convertContainer" class="d-flex j-content-center">
<span class="tooltip right" data-tip="JSON to CSV" tabindex="1">
<button onclick="handleConvert('csv')" id="convertOption1" class="d-flex mini-tile convert-option">
<i class="fas fa-chevron-circle-right"></i> CSV
</button>
</span>
<span class="tooltip right" data-tip="CSV to JSON" tabindex="1">
<button onclick="handleConvert('json')" id="convertOption2" class="d-flex mini-tile convert-option">
<i class="fas fa-chevron-circle-right"></i> JSON
</button>
</span>
</div>
<!-- OUTPUT SIDE -->
<div id="content">
<div class="d-flex j-content-center tile output-tile text-tile">
<!-- output text -->
<textarea class="input-text d-none" name="input-text" id="outputText" readonly></textarea>
<span id="emptyOutputIcon"><i class="fas fa-align-left"></i></span>
</div>
<div class="d-flex option-tile">
<span class="tooltip top" data-tip="Save" tabindex="1">
<button onclick="handleSaveFile()" class="mini-tile output-option">
<i class="fas fa-download"></i>
</button>
</span>
<span class="tooltip top" data-tip="Clear all" tabindex="1">
<button onclick="clearFields({ clearInputText: true })" class="mini-tile output-option">
<i class="fas fa-trash"></i>
</button>
</span>
<span class="tooltip top" data-tip="Copy" tabindex="1">
<button onclick="handleCopyToClipboard()" class="mini-tile output-option">
<i class="fas fa-copy"></i>
</button>
</span>
</div>
</div>
</div>
<!-- alert -->
<div class="fixed-alerts fixed-alerts_top fixed-alerts_left">
<div id="alertElement" class="alert alert_none" style="animation-delay: .1s">
<div class="alert--icon">
<i id="alertIcon" class="fas fa-exclamation-circle"></i>
</div>
<div id="alertContent" class="alert--content">
</div>
<div class="alert--close">
<i class="far fa-times-circle"></i>
</div>
</div>
</div>
<footer class="d-flex j-content-center">
<a href="https://github.com/gpaiva00/json-csv">
<i class="fab fa-github"></i>
</a>
<p>Made with <img src="./assets/img/coracao.svg" width="15"/> by Gabriel Paiva</p>
</footer>
<!-- <script src="./assets/js/FileSaver.min.js"></script> -->
<script src="./assets/js/validators.js"></script>
<script src="./assets/js/converters.js"></script>
<script src="./assets/js/index.js"></script>
<script src="./assets/js/alerts.js"></script>
</body>
</html>