update tabcontrol style
This commit is contained in:
parent
e40f3d0511
commit
d1fbb8ffb7
|
|
@ -44,9 +44,19 @@ def nospecHandle():
|
|||
return redirect(url_for('indexHandle'))
|
||||
|
||||
@app.route('/help', methods=['GET'])
|
||||
def helpHandle():
|
||||
def helpMainHandle():
|
||||
return render_template("help.html")
|
||||
|
||||
@app.route('/help/<path:scriptPath>', methods=['GET'])
|
||||
def helpHandle(scriptPath):
|
||||
if scriptPath == 'converter':
|
||||
return render_template("help/converter.html",
|
||||
tabcontrol_css = url_for('static', filename='tabcontrol.css'),
|
||||
tabcontrol_js = url_for('static', filename='tabcontrol.js'),
|
||||
converter_js = url_for('static', filename='converter.js'))
|
||||
else:
|
||||
abort(404)
|
||||
|
||||
@app.route('/about', methods=['GET'])
|
||||
def aboutHandle():
|
||||
return render_template("about.html", static_icon = url_for('static', filename='icon.png'))
|
||||
|
|
@ -104,8 +114,10 @@ def viewerHandle(scriptPath):
|
|||
gWidth = width,
|
||||
gHeight = height,
|
||||
hamburgerHistory = hamburger,
|
||||
static_css = url_for('static', filename='viewer.css'),
|
||||
static_js = url_for('static', filename='viewer.js'),
|
||||
viewer_css = url_for('static', filename='viewer.css'),
|
||||
tabcontrol_css = url_for('static', filename='tabcontrol.css'),
|
||||
viewer_js = url_for('static', filename='viewer.js'),
|
||||
tabcontrol_js = url_for('static', filename='tabcontrol.js'),
|
||||
hamburgerCurrent = currentHamburger,
|
||||
blocks = dbBlocks,
|
||||
cells = dbCells,
|
||||
|
|
|
|||
0
SuperScriptViewer/static/converter.js
Normal file
0
SuperScriptViewer/static/converter.js
Normal file
14
SuperScriptViewer/static/tabcontrol.css
Normal file
14
SuperScriptViewer/static/tabcontrol.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/*side panel style*/
|
||||
div.tabitem-activated {
|
||||
background: #0000ff;
|
||||
}
|
||||
div.tabitem-activated b {
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.tabitem-deactivated {
|
||||
background: #ffffff00;
|
||||
}
|
||||
div.tabitem-deactivated b {
|
||||
color: black;
|
||||
}
|
||||
13
SuperScriptViewer/static/tabcontrol.js
Normal file
13
SuperScriptViewer/static/tabcontrol.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
function tabControlSwitcher(tabcontrolIndex, neededIndex) {
|
||||
//disable all
|
||||
$(".tabnavigation_" + tabcontrolIndex).each(function () {
|
||||
$(this).removeClass("tabitem-activated").addClass("tabitem-deactivated");
|
||||
});
|
||||
$(".tabpanel_" + tabcontrolIndex).each(function () {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
// set current
|
||||
$("#tabnavigation_" + tabcontrolIndex + "_" + neededIndex).removeClass("tabitem-deactivated").addClass("tabitem-activated");
|
||||
$("#tabpanel_" + tabcontrolIndex + "_" + neededIndex).show();
|
||||
}
|
||||
|
|
@ -85,21 +85,6 @@ text.link-delay {
|
|||
color: black;
|
||||
}
|
||||
|
||||
/*side panel style*/
|
||||
div.tabitem-activated {
|
||||
background: #0000ff;
|
||||
}
|
||||
b.tabitem-activated {
|
||||
color: white;
|
||||
}
|
||||
|
||||
div.tabitem-deactivated {
|
||||
background: #ffffff00;
|
||||
}
|
||||
b.tabitem-deactivated {
|
||||
color: black;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid black;
|
||||
border-radius: 2px;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Help - Converter</title>
|
||||
<link rel="stylesheet" href="{{tabcontrol_css}}">
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
|
||||
<script src="{{tabcontrol_js}}"></script>
|
||||
<script src="{{converter_js}}"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -11,39 +15,118 @@
|
|||
<p>This page provide some useful converter for your decoding work. All converter is interactive..</p>
|
||||
<br />
|
||||
|
||||
<h2>Reverse C style byte array</h2>
|
||||
<p>This converter will reverse your inputed C style byte array. Actually, it take responsibility for the convert between big-endian and little-endian.<br />
|
||||
Typical and legal input just like this: <code>0x00, 0xBb, 0xff, 0xFF</code><br />
|
||||
Support multi-input. Use line break to split each input.</p>
|
||||
<p>Input:</p>
|
||||
<textarea style="width: 350px; height: 100px; resize: none;"></textarea>
|
||||
<p>Output:</p>
|
||||
<textarea style="width: 350px; height: 100px; resize: none;" readonly="true"></textarea>
|
||||
<div style="display: flex; flex-flow: row; height: 30px; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid black;">
|
||||
<div id="tabnavigation_1_1" class="tabnavigation_1 tabitem-activated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 1);"><b>Reverse C style byte array</b></div>
|
||||
<div id="tabnavigation_1_2" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 2);"><b>C style byte array to HEX</b></div>
|
||||
<div id="tabnavigation_1_3" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 3);"><b>C style byte array to DEC</b></div>
|
||||
<div id="tabnavigation_1_4" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; padding-left: 20px; padding-right: 20px;" onclick="tabControlSwitcher(1, 4);"><b>Lowcase upcase converter</b></div>
|
||||
</div>
|
||||
|
||||
<h2>C style byte array to HEX</h2>
|
||||
<p>This converter will converte provided C style byte array into HEX number. It is double interactive.<br />
|
||||
Acceptable byte array should follow little-endian format.<br />
|
||||
Support multi-input. Use line break to split each input.</p>
|
||||
<p>Byte array:</p>
|
||||
<textarea style="width: 350px; height: 100px; resize: none;"></textarea>
|
||||
<p>HEX number:</p>
|
||||
<textarea style="width: 350px; height: 100px; resize: none;"></textarea>
|
||||
<div id="tabpanel_1_1" class="tabpanel_1">
|
||||
<p>This converter will reverse your inputed C style byte array. Actually, it take responsibility for the convert between big-endian and little-endian.<br />
|
||||
Typical and legal input just like this: <code>0x00, 0xBb, 0xff, 0xFF</code><br />
|
||||
Support multi-input. Use line break to split each input.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Input</td>
|
||||
<th colspan="2"> </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
|
||||
<td style="width: 150px;"> </td>
|
||||
<td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"> </th>
|
||||
<td align="right">Output</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;" readonly="true"></textarea></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>C style byte array to DEC</h2>
|
||||
<p>This converter will converte provided C style byte array into DEC number. It is double interactive.<br />
|
||||
Acceptable byte array should follow little-endian format.<br />
|
||||
Support multi-input. Use line break to split each input.</p>
|
||||
<p>Byte array:</p>
|
||||
<textarea style="width: 350px; height: 100px; resize: none;"></textarea>
|
||||
<p>DEC number:</p>
|
||||
<textarea style="width: 350px; height: 100px; resize: none;"></textarea>
|
||||
<div id="tabpanel_1_2" class="tabpanel_1" style="display: none;">
|
||||
<p>This converter will converte provided C style byte array into HEX number. It is double interactive.<br />
|
||||
Acceptable byte array should follow little-endian format.<br />
|
||||
Support multi-input. Use line break to split each input.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Byte array</td>
|
||||
<th colspan="2"> </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
|
||||
<td style="width: 150px;"> </td>
|
||||
<td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"> </th>
|
||||
<td align="right">HEX number</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Lowcase upcase converter</h2>
|
||||
<p>This converter will provide the convert between lowcase and upcase string. It is double interactive.</p>
|
||||
<p>Lowcase:</p>
|
||||
<textarea style="width: 350px; height: 100px; resize: none;"></textarea>
|
||||
<p>Upcase:</p>
|
||||
<textarea style="width: 350px; height: 100px; resize: none;"></textarea>
|
||||
<div id="tabpanel_1_3" class="tabpanel_1" style="display: none;">
|
||||
<p>This converter will converte provided C style byte array into DEC number. It is double interactive.<br />
|
||||
Acceptable byte array should follow little-endian format.<br />
|
||||
Support multi-input. Use line break to split each input.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Byte array</td>
|
||||
<th colspan="2"> </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
|
||||
<td style="width: 150px;"> </td>
|
||||
<td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"> </th>
|
||||
<td align="right">DEC number</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="tabpanel_1_4" class="tabpanel_1" style="display: none;">
|
||||
<p>This converter will provide the convert between lowcase and upcase string. It is double interactive.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">Lowcase</td>
|
||||
<th colspan="2"> </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
|
||||
<td style="width: 150px;"> </td>
|
||||
<td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="2"> </th>
|
||||
<td align="right">Upcase</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Script Viewer</title>
|
||||
<link rel="stylesheet" href="{{static_css}}">
|
||||
<link rel="stylesheet" href="{{viewer_css}}">
|
||||
<link rel="stylesheet" href="{{tabcontrol_css}}">
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
|
||||
<script src="{{static_js}}"></script>
|
||||
<script src="{{viewer_js}}"></script>
|
||||
<script src="{{tabcontrol_js}}"></script>
|
||||
</head>
|
||||
|
||||
<body style="display: flex; flex-flow: row; height: 100%; width: 100%; margin: 0; padding: 0;" onkeydown="keyboardNavigation(true);" onkeyup="keyboardNavigation(false);">
|
||||
|
|
@ -81,18 +83,18 @@
|
|||
|
||||
<div id="sidepanelContainer" style="display: flex; flex-flow: column; background: #cfcfcf; height: 100%; width: 20%; margin: 0; padding: 0; border-left: 1px solid black;">
|
||||
<div style="display: flex; flex-flow: row; height: 30px; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid black;">
|
||||
<div class="tabitem tabitem1 tabitem-activated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(0);"><b style="margin: 0;" class="tabitem tabitem1 tabitem-activated">Properties</b></div>
|
||||
<div class="tabitem tabitem2 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(1);"><b style="margin: 0;" class="tabitem tabitem2 tabitem-deactivated">Display</b></div>
|
||||
<div class="tabitem tabitem3 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="sidePanelSwitcher(2);"><b style="margin: 0;" class="tabitem tabitem3 tabitem-deactivated">Tools</b></div>
|
||||
<div id="tabnavigation_1_1" class="tabnavigation_1 tabitem-activated" style="height: 100%; width: 33.33%; text-align: center;" onclick="tabControlSwitcher(1, 1);"><b style="margin: 0;">Properties</b></div>
|
||||
<div id="tabnavigation_1_2" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="tabControlSwitcher(1, 2);"><b style="margin: 0;">Display</b></div>
|
||||
<div id="tabnavigation_1_3" class="tabnavigation_1 tabitem-deactivated" style="height: 100%; width: 33.33%; text-align: center;" onclick="tabControlSwitcher(1, 3);"><b style="margin: 0;">Tools</b></div>
|
||||
</div>
|
||||
|
||||
<div id="sidepanel-properties" style="display: flex; flex-flow: column;width: 100%; height: 100%; display: flex; flex-flow: column;">
|
||||
<div id="tabpanel_1_1" class="tabpanel_1" style="display: flex; flex-flow: column;width: 100%; height: 100%; display: flex; flex-flow: column;">
|
||||
<p style="margin: 5px;">Properties of <b id="sidepanel-properties-id">---</b></p>
|
||||
<div id="sidepanel-properties-container" style="width: 100%; height: 100%; overflow: scroll;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidepanel-display" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;">
|
||||
<div id="tabpanel_1_2" class="tabpanel_1" id="sidepanel-display" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;">
|
||||
<p style="margin: 5px;">Render:<br />
|
||||
<input type="checkbox" id="sidepanel-display-plink" value="1" onclick="settingChange("plink");">Show pLink and eLink</input>
|
||||
</p>
|
||||
|
|
@ -103,7 +105,7 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div id="sidepanel-tools" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;">
|
||||
<div id="tabpanel_1_3" class="tabpanel_1" style="width: 100%; height: 100%; display: flex; flex-flow: column; overflow: scroll; display: none;">
|
||||
<p style="margin: 5px;">Object finder:<br />
|
||||
<input type="text" id="sidepanel-tools-objfinder"></input><br />
|
||||
<button style="height: 30px; margin: 10px 0 10px 0;">Find</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user