-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (136 loc) · 5.34 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
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
<!DOCTYPE html>
<html lang="cs" style="overflow: hidden" class="has-background-light">
<head>
<title>SQL2PHP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script type="text/javascript" src="fa-all.js"></script>
<script type="text/javascript" src="JSZip.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="SQL2PHP.js"></script>
<script type="text/javascript" src="handler.js"></script>
<style>
html,
body,
#main,
#input {
height: 100%;
}
#main {
margin: 2em;
}
textarea {
width: 100%;
}
#messageHolder {
position: absolute;
width: 100%;
bottom: 0;
opacity: 0;
transition: 1s;
}
#messageInnerHolder {
width: 50%;
margin: 0 auto;
background-color: #f14668;
border-radius: 50% 50% 0 0;
}
</style>
</head>
<body>
<div id="main" class="columns is-vcentered is-centered" ondragover="event.preventDefault()" ondrop="drop(event)">
<div class="column is-3 box">
<nav class="panel is-success">
<p class="panel-heading">SQL2PHP</p>
<a class="panel-block is-active" onclick="showInput()">
<span class="panel-icon"><i class="fas fa-file-alt" aria-hidden="true"></i></span>
Input
</a>
<div id="files"></div>
<div class="panel-block">
<button id="generate" class="button is-link is-outlined is-fullwidth">
Generate
</button>
</div>
<!-- We need to use HTTPS to use Clipboard API and ... well, maybe someday... -->
<!-- <div class="panel-block">
<button id="copy" class="button is-link is-outlined is-fullwidth">
Copy current file
</button>
</div> -->
<div class="panel-block">
<button id="download" class="button is-link is-outlined is-fullwidth">
Download current file
</button>
</div>
<div class="panel-block">
<button id="downloadAll" class="button is-link is-outlined is-fullwidth">
Download all
</button>
</div>
<div class="panel-block">
<button id="options" class="button is-link is-outlined is-fullwidth">
Options
</button>
</div>
</nav>
</div>
<div class="column" style="height: 100%">
<textarea id="input" class="textarea has-fixed-size" placeholder="Enter SQL here..."></textarea>
</div>
</div>
<div id="messageHolder">
<div id="messageInnerHolder">
<article class="message is-danger">
<div class="message-header">
<p id="messageText"></p>
<button class="delete" aria-label="delete" onclick="el_messageHolder.style.opacity = 0;"></button>
</div>
</article>
</div>
</div>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Options</p>
<button id="modalClose" class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="field">
<label class="label">Default DB name</label>
<div class="control">
<input id="modal_defaultDB" class="input" type="text" placeholder="Default: UNDEFINED_DATABASE">
</div>
</div>
<div class="field">
<label class="label">Indent</label>
<div class="control">
<input id="modal_indent" class="input" type="text" placeholder="Default: 4x whitespace">
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input id="modal_PHP8" type="checkbox" checked="true">
Use PHP 8 syntax
</label>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input id="modal_generate_database" type="checkbox" checked="true">
Generate "Database.php"
</label>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button id="modalCloseButton" class="button is-success">Close</button>
</footer>
</div>
</div>
</body>
</html>