git: init+修改node版本

This commit is contained in:
2025-12-22 13:10:24 +08:00
parent 502359be4a
commit a7dbf76500
314 changed files with 88508 additions and 11 deletions

0
static/.gitkeep Normal file
View File

9
static/config.js Normal file
View File

@@ -0,0 +1,9 @@
window.config={
// 测试环境服务器地址
socketServer:'ws://127.0.0.1:8326/',
ajaxServer: 'http://127.0.0.1',
// 生产环境服务器地址
//socketServer:'ws://103.71.178.73:8326/',
//ajaxServer: 'http://103.71.178.73/v2/s'
}

11
static/css/animate.min.css vendored Normal file

File diff suppressed because one or more lines are too long

304
static/css/bootstrap-vue.css vendored Normal file
View File

@@ -0,0 +1,304 @@
/* workaround for https://github.com/bootstrap-vue/bootstrap-vue/issues/1560 */
/* source: _input-group.scss */
.input-group > .input-group-prepend > .b-dropdown > .btn,
.input-group > .input-group-append:not(:last-child) > .b-dropdown > .btn,
.input-group > .input-group-append:last-child > .b-dropdown:not(:last-child):not(.dropdown-toggle) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > .input-group-append > .b-dropdown > .btn,
.input-group > .input-group-prepend:not(:first-child) > .b-dropdown > .btn,
.input-group > .input-group-prepend:first-child > .b-dropdown:not(:first-child) > .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Special styling for type=range and type=color input */
input.form-control[type="range"],
input.form-control[type="color"] {
height: 2.25rem;
}
input.form-control.form-control-sm[type="range"],
input.form-control.form-control-sm[type="color"] {
height: 1.9375rem;
}
input.form-control.form-control-lg[type="range"],
input.form-control.form-control-lg[type="color"] {
height: 3rem;
}
/* Less padding on type=color */
input.form-control[type="color"] {
padding: 0.25rem 0.25rem;
}
input.form-control.form-control-sm[type="color"] {
padding: 0.125rem 0.125rem;
}
/* Add support for fixed layout table */
table.b-table.b-table-fixed {
table-layout: fixed;
}
/* Busy table styling */
table.b-table[aria-busy='false'] {
opacity: 1;
}
table.b-table[aria-busy='true'] {
opacity: 0.6;
}
/* Sort styling */
table.b-table > thead > tr > th,
table.b-table > tfoot > tr > th {
position: relative;
}
table.b-table > thead > tr > th.sorting,
table.b-table > tfoot > tr > th.sorting {
padding-right: 1.5em;
cursor: pointer;
}
table.b-table > thead > tr > th.sorting::before,
table.b-table > thead > tr > th.sorting::after,
table.b-table > tfoot > tr > th.sorting::before,
table.b-table > tfoot > tr > th.sorting::after {
position: absolute;
bottom: 0;
display: block;
opacity: 0.4;
padding-bottom: inherit;
font-size: inherit;
line-height: 180%;
}
table.b-table > thead > tr > th.sorting::before,
table.b-table > tfoot > tr > th.sorting::before {
right: 0.75em;
content: '\2191';
}
table.b-table > thead > tr > th.sorting::after,
table.b-table > tfoot > tr > th.sorting::after {
right: 0.25em;
content: '\2193';
}
table.b-table > thead > tr > th.sorting_asc::after,
table.b-table > thead > tr > th.sorting_desc::before,
table.b-table > tfoot > tr > th.sorting_asc::after,
table.b-table > tfoot > tr > th.sorting_desc::before {
opacity: 1;
}
/* Stacked table layout */
/* Derived from http://blog.adrianroselli.com/2017/11/a-responsive-accessible-table.html */
/* Always stacked */
table.b-table.b-table-stacked {
width: 100%;
}
table.b-table.b-table-stacked,
table.b-table.b-table-stacked > tbody,
table.b-table.b-table-stacked > tbody > tr,
table.b-table.b-table-stacked > tbody > tr > td,
table.b-table.b-table-stacked > tbody > tr > th,
table.b-table.b-table-stacked > caption {
display: block;
}
/* Hide stuff we can't deal with, or shouldn't show */
table.b-table.b-table-stacked > thead,
table.b-table.b-table-stacked > tfoot,
table.b-table.b-table-stacked > tbody > tr.b-table-top-row,
table.b-table.b-table-stacked > tbody > tr.b-table-bottom-row {
display: none;
}
/* inter-row top border */
table.b-table.b-table-stacked > tbody > tr > :first-child {
border-top-width: 0.4rem;
}
/* convert TD/TH contents to "cells". Caveat: child elements become cells! */
table.b-table.b-table-stacked > tbody > tr > [data-label] {
display: grid;
grid-template-columns: 40% auto;
grid-gap: 0.25rem 1rem;
}
/* generate row cell "heading" */
table.b-table.b-table-stacked > tbody > tr > [data-label]::before {
content: attr(data-label);
display: inline;
text-align: right;
overflow-wrap: break-word;
font-weight: bold;
font-style: normal;
}
@media all and (max-width: 575.99px) {
/* Under SM */
table.b-table.b-table-stacked-sm {
width: 100%;
}
table.b-table.b-table-stacked-sm,
table.b-table.b-table-stacked-sm > tbody,
table.b-table.b-table-stacked-sm > tbody > tr,
table.b-table.b-table-stacked-sm > tbody > tr > td,
table.b-table.b-table-stacked-sm > tbody > tr > th,
table.b-table.b-table-stacked-sm > caption {
display: block;
}
/* hide stuff we can't deal with, or shouldn't show */
table.b-table.b-table-stacked-sm > thead,
table.b-table.b-table-stacked-sm > tfoot,
table.b-table.b-table-stacked-sm > tbody > tr.b-table-top-row,
table.b-table.b-table-stacked-sm > tbody > tr.b-table-bottom-row {
display: none;
}
/* inter-row top border */
table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
border-top-width: 0.4rem;
}
/* convert TD/TH contents to "cells". Caveat: child elements become cells! */
table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
display: grid;
grid-template-columns: 40% auto;
grid-gap: 0.25rem 1rem;
}
/* generate row cell "heading" */
table.b-table.b-table-stacked-sm > tbody > tr > [data-label]::before {
content: attr(data-label);
display: inline;
text-align: right;
overflow-wrap: break-word;
font-weight: bold;
font-style: normal;
}
}
@media all and (max-width: 767.99px) {
/* under MD */
table.b-table.b-table-stacked-md {
width: 100%;
}
table.b-table.b-table-stacked-md,
table.b-table.b-table-stacked-md > tbody,
table.b-table.b-table-stacked-md > tbody > tr,
table.b-table.b-table-stacked-md > tbody > tr > td,
table.b-table.b-table-stacked-md > tbody > tr > th,
table.b-table.b-table-stacked-md > caption {
display: block;
}
/* hide stuff we can't deal with, or shouldn't show */
table.b-table.b-table-stacked-md > thead,
table.b-table.b-table-stacked-md > tfoot,
table.b-table.b-table-stacked-md > tbody > tr.b-table-top-row,
table.b-table.b-table-stacked-md > tbody > tr.b-table-bottom-row {
display: none;
}
/* inter-row top border */
table.b-table.b-table-stacked-md > tbody > tr > :first-child {
border-top-width: 0.4rem;
}
/* convert TD/TH contents to "cells". Caveat: child elements become cells! */
table.b-table.b-table-stacked-md > tbody > tr > [data-label] {
display: grid;
grid-template-columns: 40% auto;
grid-gap: 0.25rem 1rem;
}
/* generate row cell "heading" */
table.b-table.b-table-stacked-md > tbody > tr > [data-label]::before {
content: attr(data-label);
display: inline;
text-align: right;
overflow-wrap: break-word;
font-weight: bold;
font-style: normal;
}
}
@media all and (max-width: 991.99px) {
/* under LG */
table.b-table.b-table-stacked-lg {
width: 100%;
}
table.b-table.b-table-stacked-lg,
table.b-table.b-table-stacked-lg > tbody,
table.b-table.b-table-stacked-lg > tbody > tr,
table.b-table.b-table-stacked-lg > tbody > tr > td,
table.b-table.b-table-stacked-lg > tbody > tr > th,
table.b-table.b-table-stacked-lg > caption {
display: block;
}
/* hide stuff we can't deal with, or shouldn't show */
table.b-table.b-table-stacked-lg > thead,
table.b-table.b-table-stacked-lg > tfoot,
table.b-table.b-table-stacked-lg > tbody > tr.b-table-top-row,
table.b-table.b-table-stacked-lg > tbody > tr.b-table-bottom-row {
display: none;
}
/* inter-row top border */
table.b-table.b-table-stacked-lg > tbody > tr > :first-child {
border-top-width: 0.4rem;
}
/* convert TD/TH contents to "cells". Caveat: child elements become cells! */
table.b-table.b-table-stacked-lg > tbody > tr > [data-label] {
display: grid;
grid-template-columns: 40% auto;
grid-gap: 0.25rem 1rem;
}
/* generate row cell "heading" */
table.b-table.b-table-stacked-lg > tbody > tr > [data-label]::before {
content: attr(data-label);
display: inline;
text-align: right;
overflow-wrap: break-word;
font-weight: bold;
font-style: normal;
}
}
@media all and (max-width: 1199.99px) {
/* under XL */
table.b-table.b-table-stacked-xl {
width: 100%;
}
table.b-table.b-table-stacked-xl,
table.b-table.b-table-stacked-xl > tbody,
table.b-table.b-table-stacked-xl > tbody > tr,
table.b-table.b-table-stacked-xl > tbody > tr > td,
table.b-table.b-table-stacked-xl > tbody > tr > th,
table.b-table.b-table-stacked-xl > caption {
display: block;
}
/* hide stuff we can't deal with, or shouldn't show */
table.b-table.b-table-stacked-xl > thead,
table.b-table.b-table-stacked-xl > tfoot,
table.b-table.b-table-stacked-xl > tbody > tr.b-table-top-row,
table.b-table.b-table-stacked-xl > tbody > tr.b-table-bottom-row {
display: none;
}
/* inter-row top border */
table.b-table.b-table-stacked-xl > tbody > tr > :first-child {
border-top-width: 0.4rem;
}
/* convert TD/TH contents to "cells". Caveat: child elements become cells! */
table.b-table.b-table-stacked-xl > tbody > tr > [data-label] {
display: grid;
grid-template-columns: 40% auto;
grid-gap: 0.25rem 1rem;
}
/* generate row cell "heading" */
table.b-table.b-table-stacked-xl > tbody > tr > [data-label]::before {
content: attr(data-label);
display: inline;
text-align: right;
overflow-wrap: break-word;
font-weight: bold;
font-style: normal;
}
}
/* Details row styling */
table.b-table > tbody > tr.b-table-details > td {
border-top: none;
}

9426
static/css/bootstrap.css vendored Normal file

File diff suppressed because it is too large Load Diff

6
static/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

8891
static/css/bootstrap.scss vendored Normal file

File diff suppressed because it is too large Load Diff

1260
static/css/kline.css Normal file

File diff suppressed because it is too large Load Diff

BIN
static/img/coincalf.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 503 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
static/img/kine-loading.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
static/img/load-pix.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

527
static/new_kline/forex.html Normal file
View File

@@ -0,0 +1,527 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pcn</title>
<link href="../css/kline.css" rel="stylesheet" type="text/css">
<script src="/static/config.js"></script>
<script src="lib/jquery.js"></script>
<script src="lib/jquery.mousewheel.js"></script>
<script src="lib/SocketHandler.js"></script>
</head>
<body>
<div class="bk-animationload">
<div class="bk-preloader"></div>
</div>
<!-- <div id="trade_container" class="ZB_kline">
<div class="m_cent">
<div class="m_guadan">
<div id="market">ZB/QC 交易</div>
<div id="orderbook">
<div id="asks">
<div class="table">
</div>
</div>
<div id="gasks">
<div class="table">
</div>
</div>
<div id="price" class="red"></div>
<div id="bids">
<div class="table">
</div>
</div>
<div id="gbids">
<div class="table">
</div>
</div>
</div>
<div id="trades" class="trades">
<div class="trades_list">
</div>
</div>
</div>
</div>
</div> -->
<!-- Chart Container -->
<div id="chart_container" class="dark">
<!-- Dom Element Cache -->
<div id="chart_dom_elem_cache"></div>
<!-- ToolBar -->
<div id="chart_toolbar">
<div class="chart_toolbar_minisep"> </div>
<!-- Periods -->
<div class="chart_dropdown" id="chart_toolbar_periods_vert" style="display: none">
<div class="chart_dropdown_t"><a class="chart_str_period">TIME</a></div>
<div class="chart_dropdown_data" style="margin-left: -58px;">
<table>
<tbody>
<tr>
<td>
<ul>
<li id="chart_period_1w_v" name="1w"> <a class="chart_str_period_1w">1w</a></li>
<li id="chart_period_3d_v" name="3d"> <a class="chart_str_period_3d">3d</a></li>
<li id="chart_period_1d_v" name="1d"> <a class="chart_str_period_1d">1d</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="chart_period_12h_v" name="12h"> <a class="chart_str_period_12h">12h</a></li>
<li id="chart_period_6h_v" name="6h"> <a class="chart_str_period_6h">6h</a></li>
<li id="chart_period_4h_v" name="4h"> <a class="chart_str_period_4h">4h</a></li>
<li id="chart_period_2h_v" name="2h"> <a class="chart_str_period_2h">2h</a></li>
<li id="chart_period_1h_v" name="1h"> <a class="chart_str_period_1h">1h</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="chart_period_30m_v" name="30m"> <a class="chart_str_period_30m">30m</a></li>
<li id="chart_period_15m_v" name="15m"> <a class="chart_str_period_15m">15m</a></li>
<li id="chart_period_5m_v" name="5m"> <a class="chart_str_period_5m">5m</a></li>
<li id="chart_period_3m_v" name="3m"> <a class="chart_str_period_3m">3m</a></li>
<li id="chart_period_1m_v" name="1m"> <a class="chart_str_period_1m">1m</a></li>
<li id="chart_period_line_v" name="line"><a class="chart_str_period_line">Line</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="chart_toolbar_periods_horz">
<ul class="chart_toolbar_tabgroup" style="padding-left:5px; padding-right:11px;">
<li id="chart_period_1w_h" name="1w" style="display: inline-block;"> <a class="chart_str_period_1w">1w</a></li>
<li id="chart_period_3d_h" name="3d" style="display: inline-block;"> <a class="chart_str_period_3d">3d</a></li>
<li id="chart_period_1d_h" name="1d" style="display: inline-block;"> <a class="chart_str_period_1d">1d</a></li>
<li id="chart_period_12h_h" name="12h" style="display: none;"> <a class="chart_str_period_12h">12h</a></li>
<li id="chart_period_6h_h" name="6h" style="display: none;"> <a class="chart_str_period_6h">6h</a></li>
<li id="chart_period_4h_h" name="4h" style="display: none;"> <a class="chart_str_period_4h">4h</a></li>
<li id="chart_period_2h_h" name="2h" style="display: none;"> <a class="chart_str_period_2h">2h</a></li>
<li id="chart_period_1h_h" name="1h" style="display: inline-block;"> <a class="chart_str_period_1h selected">1h</a></li>
<li id="chart_period_30m_h" name="30m" style="display: inline-block;"> <a class="chart_str_period_30m">30m</a></li>
<li id="chart_period_15m_h" name="15m" style="display: inline-block;"> <a class="chart_str_period_15m">15m</a></li>
<li id="chart_period_5m_h" name="5m" style="display: inline-block;"> <a class="chart_str_period_5m">5m</a></li>
<li id="chart_period_3m_h" name="3m" style="display: none;"> <a class="chart_str_period_3m">3m</a></li>
<li id="chart_period_1m_h" name="1m" style="display: inline-block;"> <a class="chart_str_period_1m">1m</a></li>
<li id="chart_period_line_h" name="line" style="display: inline-block;"><a class="chart_str_period_line">Line</a></li>
</ul>
</div>
<!-- Periods -->
<!-- Open TabBar -->
<!-- Open ToolPanel -->
<!-- Theme -->
<!-- Settings -->
<div id="chart_show_indicator" class="chart_toolbar_button chart_str_indicator_cap selected">INDICATOR</div>
<div id="chart_show_tools" class="chart_toolbar_button chart_str_tools_cap selected">TOOLS</div>
<div id="chart_toolbar_theme">
<div class="chart_toolbar_label chart_str_theme_cap">THEME</div>
<a name="dark" class="chart_icon chart_icon_theme_dark selected" title="红涨绿跌"></a>
<a name="light" class="chart_icon chart_icon_theme_light" title="绿涨红跌"></a>
</div>
<div class="chart_dropdown" id="chart_dropdown_settings">
<div class="chart_dropdown_t"><a class="chart_str_settings">MORE</a></div>
<div class="chart_dropdown_data">
<table>
<tbody>
<tr id="chart_select_main_indicator">
<td class="chart_str_main_indicator">Main Indicator</td>
<td>
<ul>
<li><a name="MA" class="">MA</a></li>
<li><a name="EMA" class="">EMA</a></li>
<li><a name="BOLL" class="">BOLL</a></li>
<li><a name="SAR" class="">SAR</a></li>
<li><a name="NONE" class="">None</a></li>
</ul>
</td>
</tr>
<tr id="chart_select_chart_style">
<td class="chart_str_chart_style">Chart Style</td>
<td>
<ul>
<li><a class="">CandleStick</a></li>
<li><a>CandleStickHLC</a></li>
<li><a class="">OHLC</a></li>
</ul>
</td>
</tr><tr id="chart_select_theme" style="display: none;">
<td class="chart_str_theme">Theme</td>
<td>
<ul>
<li><a name="dark" class="chart_icon chart_icon_theme_dark selected" title="红涨绿跌"></a></li>
<li><a name="light" class="chart_icon chart_icon_theme_light" title="绿涨红跌"></a></li>
</ul>
</td>
</tr><tr id="chart_enable_tools" style="display: none;">
<td class="chart_str_tools">Tools</td>
<td>
<ul>
<li><a name="on" class="chart_str_on selected">On</a></li>
<li><a name="off" class="chart_str_off">Off</a></li>
</ul>
</td>
</tr><tr id="chart_enable_indicator">
<td class="chart_str_indicator">Indicator</td>
<td>
<ul>
<li><a name="on" class="chart_str_on selected">On</a></li>
<li><a name="off" class="chart_str_off">Off</a></li>
</ul>
</td>
</tr><tr>
<td></td>
<td>
<ul><li><a id="chart_btn_parameter_settings" class="chart_str_indicator_parameters">Indicator Parameters</a></li></ul>
</td>
</tr></tbody></table>
</div>
</div>
<!-- <div class="chart_dropdown" id="chart_language_setting_div" style="padding-left: 5px;">
<div class="chart_dropdown_t">
<a class="chart_language_setting">LANGUAGE</a>
</div>
<div class="chart_dropdown_data" style="padding-top: 15px;">
<ul>
<li style="height: 25px;"><a name="zh-cn">简体中文(zh-CN)</a></li>
<li style="height: 25px;"><a name="en-us">English(en-US)</a></li>
<li style="height: 25px;"><a name="zh-hk">繁體中文(zh-HK)</a></li>
</ul>
</div>
</div>-->
<div id="chart_updated_time">
<span class="chart_str_updated">Updated</span>
<span id="chart_updated_time_text">0s</span>
<span class="chart_str_ago">ago</span>
</div>
</div>
<!-- ToolPanel -->
<div id="chart_toolpanel" style="display: inline; left: 0px; top: 30px; width: 32px; height: 949px;">
<div class="chart_toolpanel_separator"></div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_Cursor" name="Cursor"></div>
<div class="chart_toolpanel_tip chart_str_cursor">Cursor</div>
</div>
<div class="chart_toolpanel_button selected">
<div class="chart_toolpanel_icon" id="chart_CrossCursor" name="CrossCursor"></div>
<div class="chart_toolpanel_tip chart_str_cross_cursor">Cross Cursor</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_SegLine" name="SegLine"></div>
<div class="chart_toolpanel_tip chart_str_seg_line">Trend Line</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_StraightLine" name="StraightLine"></div>
<div class="chart_toolpanel_tip chart_str_straight_line">Extended</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_RayLine" name="RayLine"></div>
<div class="chart_toolpanel_tip chart_str_ray_line">Ray</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_ArrowLine" name="ArrowLine"></div>
<div class="chart_toolpanel_tip chart_str_arrow_line">Arrow</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_HoriSegLine" name="HoriSegLine"></div>
<div class="chart_toolpanel_tip chart_str_horz_seg_line">Horizontal Line</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_HoriStraightLine" name="HoriStraightLine"></div>
<div class="chart_toolpanel_tip chart_str_horz_straight_line">Horizontal Extended</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_HoriRayLine" name="HoriRayLine"></div>
<div class="chart_toolpanel_tip chart_str_horz_ray_line">Horizontal Ray</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_VertiStraightLine" name="VertiStraightLine"></div>
<div class="chart_toolpanel_tip chart_str_vert_straight_line">Vertical Extended</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_PriceLine" name="PriceLine"></div>
<div class="chart_toolpanel_tip chart_str_price_line">Price Line</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_TriParallelLine" name="TriParallelLine"></div>
<div class="chart_toolpanel_tip chart_str_tri_parallel_line">Parallel Channel</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_BiParallelLine" name="BiParallelLine"></div>
<div class="chart_toolpanel_tip chart_str_bi_parallel_line">Parallel Lines</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_BiParallelRayLine" name="BiParallelRayLine"></div>
<div class="chart_toolpanel_tip chart_str_bi_parallel_ray">Parallel Rays</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_DrawFibRetrace" name="DrawFibRetrace"></div>
<div class="chart_toolpanel_tip chart_str_fib_retrace">Fibonacci Retracements</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_DrawFibFans" name="DrawFibFans"></div>
<div class="chart_toolpanel_tip chart_str_fib_fans">Fibonacci Fans</div>
</div>
<div style="padding-left: 3px;padding-top: 10px;">
<button style="color: red;" id="clearCanvas" title="Clear All" >X</button>
</div>
</div>
<!-- Canvas Group -->
<div id="chart_canvasGroup" style="left: 33px; top: 30px; width: 2500px; height: 926px;">
<canvas class="chart_canvas" id="chart_mainCanvas" width="2527" height="926" style="cursor: none;"></canvas>
<canvas class="chart_canvas" id="chart_overlayCanvas" width="2527" height="926" style="cursor: none;"></canvas>
</div>
<!-- TabBar -->
<div id="chart_tabbar" style="display: block; position:relative; left: 33px; top: 956px; width: 2527px; height: 22px;">
<ul>
<li><a name="MACD" class="">MACD</a></li>
<li><a name="KDJ" class="">KDJ</a></li>
<li><a name="StochRSI" class="">StochRSI</a></li>
<li><a name="RSI" class="">RSI</a></li>
<li><a name="DMI" class="">DMI</a></li>
<li><a name="OBV" class="">OBV</a></li>
<li><a name="BOLL" class="">BOLL</a></li>
<li><a name="SAR" class="">SAR</a></li>
<li><a name="DMA" class="">DMA</a></li>
<li><a name="TRIX" class="">TRIX</a></li>
<li><a name="BRAR" class="">BRAR</a></li>
<li><a name="VR" class="">VR</a></li>
<li><a name="EMV" class="">EMV</a></li>
<li><a name="WR" class="">WR</a></li>
<li><a name="ROC" class="">ROC</a></li>
<li><a name="MTM" class="">MTM</a></li>
<li><a name="PSY">PSY</a></li>
</ul>
</div>
<!-- Parameter Settings -->
<div id="chart_parameter_settings" style="left: 960px; top: 281px;">
<h2 class="chart_str_indicator_parameters">Indicator Parameters</h2>
<table>
<tbody><tr>
<th>MA</th>
<td><input name="MA"><input name="MA"><input name="MA"><input name="MA"></td>
<td><button class="chart_str_default">default</button></td>
<th>DMA</th>
<td><input name="DMA"><input name="DMA"><input name="DMA"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>EMA</th>
<td><input name="EMA"><input name="EMA"><input name="EMA"><input name="EMA"></td>
<td><button class="chart_str_default">default</button></td>
<th>TRIX</th>
<td><input name="TRIX"><input name="TRIX"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>VOLUME</th>
<td><input name="VOLUME"><input name="VOLUME"></td>
<td><button class="chart_str_default">default</button></td>
<th>BRAR</th>
<td><input name="BRAR"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>MACD</th>
<td><input name="MACD"><input name="MACD"><input name="MACD"></td>
<td><button class="chart_str_default">default</button></td>
<th>VR</th>
<td><input name="VR"><input name="VR"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>KDJ</th>
<td><input name="KDJ"><input name="KDJ"><input name="KDJ"></td>
<td><button class="chart_str_default">default</button></td>
<th>EMV</th>
<td><input name="EMV"><input name="EMV"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>StochRSI</th>
<td><input name="StochRSI"><input name="StochRSI"><input name="StochRSI"><input name="StochRSI"></td>
<td><button class="chart_str_default">default</button></td>
<th>WR</th>
<td><input name="WR"><input name="WR"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>RSI</th>
<td><input name="RSI"><input name="RSI"><input name="RSI"></td>
<td><button class="chart_str_default">default</button></td>
<th>ROC</th>
<td><input name="ROC"><input name="ROC"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>DMI</th>
<td><input name="DMI"><input name="DMI"></td>
<td><button class="chart_str_default">default</button></td>
<th>MTM</th>
<td><input name="MTM"><input name="MTM"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<!-- <th>OBV</th>
<td><input name="OBV"></td>
<td><button class="chart_str_default">default</button></td> -->
<th>BOLL</th>
<td><input name="BOLL"></td>
<td><button class="chart_str_default">default</button></td>
<th>PSY</th>
<td><input name="PSY"><input name="PSY"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<!-- <tr>
<th>BOLL</th>
<td><input name="BOLL"></td>
<td><button class="chart_str_default">default</button></td>
</tr> -->
</tbody></table>
<div id="close_settings"><a class="chart_str_close">CLOSE</a></div>
</div>
<!-- Loading -->
<div id="chart_loading" class="chart_str_loading" style="left: 1180px; top: 232px;">Loading...</div>
</div> <!-- End Of ChartContainer -->
<div style="display: none">
<form style="display: inline" id="chart_input_interface">
<input style="display: inline" type="text" id="chart_input_interface_text">
<input style="display: inline" type="submit" id="chart_input_interface_submit">
</form>
<form style="display: inline" id="chart_output_interface">
<input style="display: inline" type="text" id="chart_output_interface_text">
<input style="display: inline" type="submit" id="chart_output_interface_submit">
</form>
</div>
<div style="display: none" id="chart_language_switch_tmp">
<span name="chart_str_period" zh_hk="週期" zh_cn="周期" en_us="TIME"></span>
<span name="chart_str_period_line" zh_hk="分時" zh_cn="分时" en_us="Line"></span>
<span name="chart_str_period_1m" zh_hk="1分钟" zh_cn="1分钟" en_us="1m"></span>
<span name="chart_str_period_3m" zh_hk="3分钟" zh_cn="3分钟" en_us="3m"></span>
<span name="chart_str_period_5m" zh_hk="5分钟" zh_cn="5分钟" en_us="5m"></span>
<span name="chart_str_period_15m" zh_hk="15分钟" zh_cn="15分钟" en_us="15m"></span>
<span name="chart_str_period_30m" zh_hk="30分钟" zh_cn="30分钟" en_us="30m"></span>
<span name="chart_str_period_1h" zh_hk="1小時" zh_cn="1小时" en_us="1h"></span>
<span name="chart_str_period_2h" zh_hk="2小時" zh_cn="2小时" en_us="2h"></span>
<span name="chart_str_period_4h" zh_hk="4小時" zh_cn="4小时" en_us="4h"></span>
<span name="chart_str_period_6h" zh_hk="6小時" zh_cn="6小时" en_us="6h"></span>
<span name="chart_str_period_12h" zh_hk="12小時" zh_cn="12小时" en_us="12h"></span>
<span name="chart_str_period_1d" zh_hk="日線" zh_cn="日线" en_us="1d"></span>
<span name="chart_str_period_3d" zh_hk="3日" zh_cn="3日" en_us="3d"></span>
<span name="chart_str_period_1w" zh_hk="周線" zh_cn="周线" en_us="1w"></span>
<span name="chart_str_settings" zh_hk="更多" zh_cn="更多" en_us="MORE"></span>
<span name="chart_setting_main_indicator" zh_hk="均線設置" zh_cn="均线设置" en_us="Main Indicator"></span>
<span name="chart_setting_main_indicator_none" zh_hk="關閉均線" zh_cn="关闭均线" en_us="None"></span>
<span name="chart_setting_indicator_parameters" zh_hk="指標參數設置" zh_cn="指标参数设置" en_us="Indicator Parameters"></span>
<span name="chart_str_chart_style" zh_hk="主圖樣式" zh_cn="主图样式" en_us="Chart Style"></span>
<span name="chart_str_main_indicator" zh_hk="主指標" zh_cn="主指标" en_us="Main Indicator"></span>
<span name="chart_str_indicator" zh_hk="技術指標" zh_cn="技术指标" en_us="Indicator"></span>
<span name="chart_str_indicator_cap" zh_hk="技術指標" zh_cn="技术指标" en_us="INDICATOR"></span>
<span name="chart_str_tools" zh_hk="畫線工具" zh_cn="画线工具" en_us="Tools"></span>
<span name="chart_str_tools_cap" zh_hk="畫線工具" zh_cn="画线工具" en_us="TOOLS"></span>
<span name="chart_str_theme" zh_hk="主題選擇" zh_cn="主题选择" en_us="Theme"></span>
<span name="chart_str_theme_cap" zh_hk="主題選擇" zh_cn="主题选择" en_us="THEME"></span>
<span name="chart_language_setting" zh_hk="語言(LANG)" zh_cn="语言(LANG)" en_us="LANGUAGE"></span>
<span name="chart_exchanges_setting" zh_hk="更多市場" zh_cn="更多市场" en_us="MORE MARKETS"></span>
<span name="chart_othercoin_setting" zh_hk="其它市場" zh_cn="其它市场" en_us="OTHER MARKETS"></span>
<span name="chart_str_none" zh_hk="關閉" zh_cn="关闭" en_us="None"></span>
<span name="chart_str_theme_dark" zh_hk="深色主題" zh_cn="深色主题" en_us="Dark"></span>
<span name="chart_str_theme_light" zh_hk="淺色主題" zh_cn="浅色主题" en_us="Light"></span>
<span name="chart_str_on" zh_hk="開啟" zh_cn="开启" en_us="On"></span>
<span name="chart_str_off" zh_hk="關閉" zh_cn="关闭" en_us="Off"></span>
<span name="chart_str_close" zh_hk="關閉" zh_cn="关闭" en_us="CLOSE"></span>
<span name="chart_str_default" zh_hk="默認值" zh_cn="默认值" en_us="default"></span>
<span name="chart_str_loading" zh_hk="正在讀取數據..." zh_cn="正在读取数据..." en_us="Loading..."></span>
<span name="chart_str_indicator_parameters" zh_hk="指標參數設置" zh_cn="指标参数设置" en_us="Indicator Parameters"></span>
<span name="chart_str_cursor" zh_hk="光標" zh_cn="光标" en_us="Cursor"></span>
<span name="chart_str_cross_cursor" zh_hk="十字光標" zh_cn="十字光标" en_us="Cross Cursor"></span>
<span name="chart_str_seg_line" zh_hk="線段" zh_cn="线段" en_us="Trend Line"></span>
<span name="chart_str_straight_line" zh_hk="直線" zh_cn="直线" en_us="Extended"></span>
<span name="chart_str_ray_line" zh_hk="射線" zh_cn="射线" en_us="Ray"></span>
<span name="chart_str_arrow_line" zh_hk="箭頭" zh_cn="箭头" en_us="Arrow"></span>
<span name="chart_str_horz_seg_line" zh_hk="水平線段" zh_cn="水平线段" en_us="Horizontal Line"></span>
<span name="chart_str_horz_straight_line" zh_hk="水平直線" zh_cn="水平直线" en_us="Horizontal Extended"></span>
<span name="chart_str_horz_ray_line" zh_hk="水平射線" zh_cn="水平射线" en_us="Horizontal Ray"></span>
<span name="chart_str_vert_straight_line" zh_hk="垂直直線" zh_cn="垂直直线" en_us="Vertical Extended"></span>
<span name="chart_str_price_line" zh_hk="價格線" zh_cn="价格线" en_us="Price Line"></span>
<span name="chart_str_tri_parallel_line" zh_hk="價格通道線" zh_cn="价格通道线" en_us="Parallel Channel"></span>
<span name="chart_str_bi_parallel_line" zh_hk="平行直線" zh_cn="平行直线" en_us="Parallel Lines"></span>
<span name="chart_str_bi_parallel_ray" zh_hk="平行射線" zh_cn="平行射线" en_us="Parallel Rays"></span>
<span name="chart_str_fib_retrace" zh_hk="斐波納契回調" zh_cn="斐波纳契回调" en_us="Fibonacci Retracements"></span>
<span name="chart_str_fib_fans" zh_hk="斐波納契扇形" zh_cn="斐波纳契扇形" en_us="Fibonacci Fans"></span>
<span name="chart_str_updated" zh_hk="更新於" zh_cn="更新于" en_us="Updated"></span>
<span name="chart_str_ago" zh_hk="前" zh_cn="前" en_us="ago"></span>
</div>
<script src="lib/kline.draw.js"></script>
<script type="text/javascript">
var option = {
market_from: queryString('symbol'),
market_from_name: queryString('marketName'),
url: window.config.socketServer,
subscribePath: "market.tc.~symbol~.kline.~period~",
displayVolume: false,
ajaxURL:window.config.ajaxServer+"/forex/market/kline/~symbol~/~period~"
};
new KLine(option).draw()
</script>
</body>
</html>

View File

@@ -0,0 +1,131 @@
function SocketHandler(url) {
// 基于H5原生api
this.ws = new WebSocket(url);
// 定义一个信号发射塔,用于发送事件
this.tower = document.createElement('div');
}
SocketHandler.prototype = {
// 订阅频道
channels : {},
// 反应堆用于收集和分发socket的响应
reactions : {},
// 缓存监听事件
events : [],
// 获取当前时间
nowTime : function() {
return new Date().getTime();
},
// 打开socket连接
open : function(heartbeatTimeout) {
this.ws.onopen = function(){
var heartbeatSendInterval = heartbeatTimeout / 2;
this.lastSubscribeTime = this.nowTime();
this.pingIntervalId = setInterval(function(){
var iv = this.nowTime() - this.lastSubscribeTime;
// 超过一定时间自动与后台ping、pong 单位:秒
if ((heartbeatSendInterval + iv) >= heartbeatTimeout) {
this.send('ping');
}
}.bind(this), heartbeatSendInterval);
}.bind(this);
},
// 创建自定义事件
createEvent : function(event, detail){
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, false, false, detail);
return evt;
},
// 打开socket连接
connect: function(heartbeatTimeout) {
this.open(heartbeatTimeout);
this.message();
this.close();
},
// 订阅消息 ch 为订阅的频道 id 为订阅唯一标识
subscribe : function(ch, id, token) {
if(this.ws.readyState == 1) {
var obj = {};
if(ch) {
obj.sub = ch;
obj.id = id;
if(token) obj.authorization = token;
if(this.channels.hasOwnProperty(id)) {
this.unsubscribe.apply(this, Object.values(this.channels[id]));
}
this.channels[id] = obj;
this.reactions[ch] = this.createEvent(id);
this.send(obj);
}
}
},
// 监听订阅结果
on : function(id, callback) {
var handler = function(e) {
if(callback) callback(e.data, e);
};
this.tower.addEventListener(id, handler);
var key = id + '_' + this.nowTime();
this.events.push({key : key, handler: handler});
},
// 取消订阅
unsubscribe : function(ch, id, token) {
if(this.ws.readyState == 1) {
var obj = {};
if(ch) {
obj.cancel = ch;
obj.id = id;
if(token) obj.authorization = token;
if(this.channels.hasOwnProperty(id)) {
delete this.channels[id];
delete this.reactions[ch];
}
this.events = this.events.filter(function(v){
if(v.key.indexOf(id) !== -1) {
// 失效ID解除监听
this.tower.removeEventListener(id, v.handler);
}else{
return v;
}
}.bind(this));
this.send(obj);
}
}
},
send : function(data){
if(typeof data === 'object') {
data = JSON.stringify(data);
}
this.ws.send(data);
},
message : function() {
this.ws.onmessage = function(evt){
var data = evt.data;
this.lastSubscribeTime = this.nowTime();
if(data) {
if(data !== 'pong') data = JSON.parse(data);
if(typeof data === 'object' && data.hasOwnProperty('ch')) {
var e = this.reactions[data.ch];
if(e) {
e.data = data;
this.tower.dispatchEvent(e);
}
}
}
}.bind(this);
},
close : function(callback) {
this.ws.onclose = function(evt){
clearInterval(this.pingIntervalId);
if(callback) callback(evt, this.ws);
}.bind(this);
}
};

10253
static/new_kline/lib/jquery.js vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,221 @@
/*!
* jQuery Mousewheel 3.1.13
*
* Copyright jQuery Foundation and other contributors
* Released under the MIT license
* http://jquery.org/license
*/
(function (factory) {
if ( typeof define === 'function' && define.amd ) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS style for Browserify
module.exports = factory;
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
slice = Array.prototype.slice,
nullLowestDeltaTimeout, lowestDelta;
if ( $.event.fixHooks ) {
for ( var i = toFix.length; i; ) {
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}
var special = $.event.special.mousewheel = {
version: '3.1.12',
setup: function() {
if ( this.addEventListener ) {
for ( var i = toBind.length; i; ) {
this.addEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
// Store the line height and page height for this particular element
$.data(this, 'mousewheel-line-height', special.getLineHeight(this));
$.data(this, 'mousewheel-page-height', special.getPageHeight(this));
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i = toBind.length; i; ) {
this.removeEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
// Clean up the data we added to the element
$.removeData(this, 'mousewheel-line-height');
$.removeData(this, 'mousewheel-page-height');
},
getLineHeight: function(elem) {
var $elem = $(elem),
$parent = $elem['offsetParent' in $.fn ? 'offsetParent' : 'parent']();
if (!$parent.length) {
$parent = $('body');
}
return parseInt($parent.css('fontSize'), 10) || parseInt($elem.css('fontSize'), 10) || 16;
},
getPageHeight: function(elem) {
return $(elem).height();
},
settings: {
adjustOldDeltas: true, // see shouldAdjustOldDeltas() below
normalizeOffset: true // calls getBoundingClientRect for each event
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel');
},
unmousewheel: function(fn) {
return this.unbind('mousewheel', fn);
}
});
function handler(event) {
var orgEvent = event || window.event,
args = slice.call(arguments, 1),
delta = 0,
deltaX = 0,
deltaY = 0,
absDelta = 0,
offsetX = 0,
offsetY = 0;
event = $.event.fix(orgEvent);
event.type = 'mousewheel';
// Old school scrollwheel delta
if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; }
if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; }
if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; }
if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; }
// Firefox < 17 horizontal scrolling related to DOMMouseScroll event
if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaX = deltaY * -1;
deltaY = 0;
}
// Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
delta = deltaY === 0 ? deltaX : deltaY;
// New school wheel delta (wheel event)
if ( 'deltaY' in orgEvent ) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if ( 'deltaX' in orgEvent ) {
deltaX = orgEvent.deltaX;
if ( deltaY === 0 ) { delta = deltaX * -1; }
}
// No change actually happened, no reason to go any further
if ( deltaY === 0 && deltaX === 0 ) { return; }
// Need to convert lines and pages to pixels if we aren't already in pixels
// There are three delta modes:
// * deltaMode 0 is by pixels, nothing to do
// * deltaMode 1 is by lines
// * deltaMode 2 is by pages
if ( orgEvent.deltaMode === 1 ) {
var lineHeight = $.data(this, 'mousewheel-line-height');
delta *= lineHeight;
deltaY *= lineHeight;
deltaX *= lineHeight;
} else if ( orgEvent.deltaMode === 2 ) {
var pageHeight = $.data(this, 'mousewheel-page-height');
delta *= pageHeight;
deltaY *= pageHeight;
deltaX *= pageHeight;
}
// Store lowest absolute delta to normalize the delta values
absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
if ( !lowestDelta || absDelta < lowestDelta ) {
lowestDelta = absDelta;
// Adjust older deltas if necessary
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
lowestDelta /= 40;
}
}
// Adjust older deltas if necessary
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
// Divide all the things by 40!
delta /= 40;
deltaX /= 40;
deltaY /= 40;
}
// Get a whole, normalized value for the deltas
delta = Math[ delta >= 1 ? 'floor' : 'ceil' ](delta / lowestDelta);
deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta);
deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta);
// Normalise offsetX and offsetY properties
if ( special.settings.normalizeOffset && this.getBoundingClientRect ) {
var boundingRect = this.getBoundingClientRect();
offsetX = event.clientX - boundingRect.left;
offsetY = event.clientY - boundingRect.top;
}
// Add information to the event object
event.deltaX = deltaX;
event.deltaY = deltaY;
event.deltaFactor = lowestDelta;
event.offsetX = offsetX;
event.offsetY = offsetY;
// Go ahead and set deltaMode to 0 since we converted to pixels
// Although this is a little odd since we overwrite the deltaX/Y
// properties with normalized deltas.
event.deltaMode = 0;
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
// Clearout lowestDelta after sometime to better
// handle multiple device types that give different
// a different lowestDelta
// Ex: trackpad = 3 and mouse wheel = 120
if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); }
nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
function nullLowestDelta() {
lowestDelta = null;
}
function shouldAdjustOldDeltas(orgEvent, absDelta) {
// If this is an older event and the delta is divisable by 120,
// then we are assuming that the browser is treating this as an
// older mouse wheel event and that we should divide the deltas
// by 40 to try and get a more usable deltaFactor.
// Side note, this actually impacts the reported scroll distance
// in older browsers and can cause scrolling to be slower than native.
// Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
}
}));

File diff suppressed because it is too large Load Diff

529
static/new_kline/trade.html Normal file
View File

@@ -0,0 +1,529 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pcn</title>
<link href="../css/kline.css" rel="stylesheet" type="text/css">
<script src="/static/config.js"></script>
<script src="lib/jquery.js"></script>
<script src="lib/jquery.mousewheel.js"></script>
<script src="lib/SocketHandler.js"></script>
</head>
<body>
<div class="bk-animationload">
<div class="bk-preloader"></div>
</div>
<!-- <div id="trade_container" class="ZB_kline">
<div class="m_cent">
<div class="m_guadan">
<div id="market">ZB/QC 交易</div>
<div id="orderbook">
<div id="asks">
<div class="table">
</div>
</div>
<div id="gasks">
<div class="table">
</div>
</div>
<div id="price" class="red"></div>
<div id="bids">
<div class="table">
</div>
</div>
<div id="gbids">
<div class="table">
</div>
</div>
</div>
<div id="trades" class="trades">
<div class="trades_list">
</div>
</div>
</div>
</div>
</div> -->
<!-- Chart Container -->
<div id="chart_container" class="dark">
<!-- Dom Element Cache -->
<div id="chart_dom_elem_cache"></div>
<!-- ToolBar -->
<div id="chart_toolbar" style="padding-left:100px!important">
<div class="chart_toolbar_minisep"> </div>
<!-- Periods -->
<div class="chart_dropdown" id="chart_toolbar_periods_vert" style="display: none">
<div class="chart_dropdown_t"><a class="chart_str_period">TIME</a></div>
<div class="chart_dropdown_data" style="margin-left: -58px;">
<table>
<tbody>
<tr>
<td>
<ul>
<li id="chart_period_1w_v" name="1w"> <a class="chart_str_period_1w">1w</a></li>
<li id="chart_period_3d_v" name="3d"> <a class="chart_str_period_3d">3d</a></li>
<li id="chart_period_1d_v" name="1d"> <a class="chart_str_period_1d">1d</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="chart_period_12h_v" name="12h"> <a class="chart_str_period_12h">12h</a></li>
<li id="chart_period_6h_v" name="6h"> <a class="chart_str_period_6h">6h</a></li>
<li id="chart_period_4h_v" name="4h"> <a class="chart_str_period_4h">4h</a></li>
<li id="chart_period_2h_v" name="2h"> <a class="chart_str_period_2h">2h</a></li>
<li id="chart_period_1h_v" name="1h"> <a class="chart_str_period_1h">1h</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="chart_period_30m_v" name="30m"> <a class="chart_str_period_30m">30m</a></li>
<li id="chart_period_15m_v" name="15m"> <a class="chart_str_period_15m">15m</a></li>
<li id="chart_period_5m_v" name="5m"> <a class="chart_str_period_5m">5m</a></li>
<li id="chart_period_3m_v" name="3m"> <a class="chart_str_period_3m">3m</a></li>
<li id="chart_period_1m_v" name="1m"> <a class="chart_str_period_1m">1m</a></li>
<li id="chart_period_line_v" name="line"><a class="chart_str_period_line">Line</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="chart_toolbar_periods_horz">
<ul class="chart_toolbar_tabgroup" style="padding-left:5px; padding-right:11px;">
<li id="chart_period_1w_h" name="1w" style="display: inline-block;"> <a class="chart_str_period_1w">1w</a></li>
<li id="chart_period_3d_h" name="3d" style="display: inline-block;"> <a class="chart_str_period_3d">3d</a></li>
<li id="chart_period_1d_h" name="1d" style="display: inline-block;"> <a class="chart_str_period_1d">1d</a></li>
<li id="chart_period_12h_h" name="12h" style="display: none;"> <a class="chart_str_period_12h">12h</a></li>
<li id="chart_period_6h_h" name="6h" style="display: none;"> <a class="chart_str_period_6h">6h</a></li>
<li id="chart_period_4h_h" name="4h" style="display: none;"> <a class="chart_str_period_4h">4h</a></li>
<li id="chart_period_2h_h" name="2h" style="display: none;"> <a class="chart_str_period_2h">2h</a></li>
<li id="chart_period_1h_h" name="1h" style="display: inline-block;"> <a class="chart_str_period_1h selected">1h</a></li>
<li id="chart_period_30m_h" name="30m" style="display: inline-block;"> <a class="chart_str_period_30m">30m</a></li>
<li id="chart_period_15m_h" name="15m" style="display: inline-block;"> <a class="chart_str_period_15m">15m</a></li>
<li id="chart_period_5m_h" name="5m" style="display: inline-block;"> <a class="chart_str_period_5m">5m</a></li>
<li id="chart_period_3m_h" name="3m" style="display: none;"> <a class="chart_str_period_3m">3m</a></li>
<li id="chart_period_1m_h" name="1m" style="display: inline-block;"> <a class="chart_str_period_1m">1m</a></li>
<li id="chart_period_line_h" name="line" style="display: inline-block;"><a class="chart_str_period_line">Line</a></li>
</ul>
</div>
<!-- Periods -->
<!-- Open TabBar -->
<!-- Open ToolPanel -->
<!-- Theme -->
<!-- Settings -->
<div id="chart_show_indicator" class="chart_toolbar_button chart_str_indicator_cap selected">INDICATOR</div>
<div id="chart_show_tools" class="chart_toolbar_button chart_str_tools_cap selected">TOOLS</div>
<div id="chart_toolbar_theme">
<div class="chart_toolbar_label chart_str_theme_cap">THEME</div>
<a name="dark" class="chart_icon chart_icon_theme_dark selected" title="红涨绿跌"></a>
<a name="light" class="chart_icon chart_icon_theme_light" title="绿涨红跌"></a>
</div>
<div class="chart_dropdown" id="chart_dropdown_settings">
<div class="chart_dropdown_t"><a class="chart_str_settings">MORE</a></div>
<div class="chart_dropdown_data">
<table>
<tbody>
<tr id="chart_select_main_indicator">
<td class="chart_str_main_indicator">Main Indicator</td>
<td>
<ul>
<li><a name="MA" class="">MA</a></li>
<li><a name="EMA" class="">EMA</a></li>
<li><a name="BOLL" class="">BOLL</a></li>
<li><a name="SAR" class="">SAR</a></li>
<li><a name="NONE" class="">None</a></li>
</ul>
</td>
</tr>
<tr id="chart_select_chart_style">
<td class="chart_str_chart_style">Chart Style</td>
<td>
<ul>
<li><a class="">CandleStick</a></li>
<li><a>CandleStickHLC</a></li>
<li><a class="">OHLC</a></li>
</ul>
</td>
</tr><tr id="chart_select_theme" style="display: none;">
<td class="chart_str_theme">Theme</td>
<td>
<ul>
<li><a name="dark" class="chart_icon chart_icon_theme_dark selected" title="红涨绿跌"></a></li>
<li><a name="light" class="chart_icon chart_icon_theme_light" title="绿涨红跌"></a></li>
</ul>
</td>
</tr><tr id="chart_enable_tools" style="display: none;">
<td class="chart_str_tools">Tools</td>
<td>
<ul>
<li><a name="on" class="chart_str_on selected">On</a></li>
<li><a name="off" class="chart_str_off">Off</a></li>
</ul>
</td>
</tr><tr id="chart_enable_indicator">
<td class="chart_str_indicator">Indicator</td>
<td>
<ul>
<li><a name="on" class="chart_str_on selected">On</a></li>
<li><a name="off" class="chart_str_off">Off</a></li>
</ul>
</td>
</tr><tr>
<td></td>
<td>
<ul><li><a id="chart_btn_parameter_settings" class="chart_str_indicator_parameters">Indicator Parameters</a></li></ul>
</td>
</tr></tbody></table>
</div>
</div>
<!--<div class="chart_dropdown" id="chart_language_setting_div" style="padding-left: 5px;">-->
<!--<div class="chart_dropdown_t">-->
<!--<a class="chart_language_setting">LANGUAGE</a>-->
<!--</div>-->
<!--<div class="chart_dropdown_data" style="padding-top: 15px;">-->
<!--<ul>-->
<!--<li style="height: 25px;"><a name="zh-cn">简体中文(zh-CN)</a></li>-->
<!--<li style="height: 25px;"><a name="en-us">English(en-US)</a></li>-->
<!--<li style="height: 25px;"><a name="zh-tw">繁體中文(zh-HK)</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<div id="chart_updated_time">
<span class="chart_str_updated">Updated</span>
<span id="chart_updated_time_text">0s</span>
<span class="chart_str_ago">ago</span>
</div>
</div>
<!-- ToolPanel -->
<div id="chart_toolpanel" style="display: inline; left: 0px; top: 30px; width: 32px; height: 949px;">
<div class="chart_toolpanel_separator"></div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_Cursor" name="Cursor"></div>
<div class="chart_toolpanel_tip chart_str_cursor">Cursor</div>
</div>
<div class="chart_toolpanel_button selected">
<div class="chart_toolpanel_icon" id="chart_CrossCursor" name="CrossCursor"></div>
<div class="chart_toolpanel_tip chart_str_cross_cursor">Cross Cursor</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_SegLine" name="SegLine"></div>
<div class="chart_toolpanel_tip chart_str_seg_line">Trend Line</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_StraightLine" name="StraightLine"></div>
<div class="chart_toolpanel_tip chart_str_straight_line">Extended</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_RayLine" name="RayLine"></div>
<div class="chart_toolpanel_tip chart_str_ray_line">Ray</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_ArrowLine" name="ArrowLine"></div>
<div class="chart_toolpanel_tip chart_str_arrow_line">Arrow</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_HoriSegLine" name="HoriSegLine"></div>
<div class="chart_toolpanel_tip chart_str_horz_seg_line">Horizontal Line</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_HoriStraightLine" name="HoriStraightLine"></div>
<div class="chart_toolpanel_tip chart_str_horz_straight_line">Horizontal Extended</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_HoriRayLine" name="HoriRayLine"></div>
<div class="chart_toolpanel_tip chart_str_horz_ray_line">Horizontal Ray</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_VertiStraightLine" name="VertiStraightLine"></div>
<div class="chart_toolpanel_tip chart_str_vert_straight_line">Vertical Extended</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_PriceLine" name="PriceLine"></div>
<div class="chart_toolpanel_tip chart_str_price_line">Price Line</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_TriParallelLine" name="TriParallelLine"></div>
<div class="chart_toolpanel_tip chart_str_tri_parallel_line">Parallel Channel</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_BiParallelLine" name="BiParallelLine"></div>
<div class="chart_toolpanel_tip chart_str_bi_parallel_line">Parallel Lines</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_BiParallelRayLine" name="BiParallelRayLine"></div>
<div class="chart_toolpanel_tip chart_str_bi_parallel_ray">Parallel Rays</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_DrawFibRetrace" name="DrawFibRetrace"></div>
<div class="chart_toolpanel_tip chart_str_fib_retrace">Fibonacci Retracements</div>
</div>
<div class="chart_toolpanel_button">
<div class="chart_toolpanel_icon" id="chart_DrawFibFans" name="DrawFibFans"></div>
<div class="chart_toolpanel_tip chart_str_fib_fans">Fibonacci Fans</div>
</div>
<div style="padding-left: 3px;padding-top: 10px;">
<button style="color: red;" id="clearCanvas" title="Clear All" >X</button>
</div>
</div>
<!-- Canvas Group -->
<div id="chart_canvasGroup" style="left: 33px; top: 30px; width: 2500px; height: 926px;">
<canvas class="chart_canvas" id="chart_mainCanvas" width="2527" height="926" style="cursor: none;"></canvas>
<canvas class="chart_canvas" id="chart_overlayCanvas" width="2527" height="926" style="cursor: none;"></canvas>
</div>
<!-- TabBar -->
<div id="chart_tabbar" style="display: block; position:relative; left: 33px; top: 956px; width: 2527px; height: 22px;">
<ul>
<li><a name="MACD" class="">MACD</a></li>
<li><a name="KDJ" class="">KDJ</a></li>
<li><a name="StochRSI" class="">StochRSI</a></li>
<li><a name="RSI" class="">RSI</a></li>
<li><a name="DMI" class="">DMI</a></li>
<li><a name="OBV" class="">OBV</a></li>
<li><a name="BOLL" class="">BOLL</a></li>
<li><a name="SAR" class="">SAR</a></li>
<li><a name="DMA" class="">DMA</a></li>
<li><a name="TRIX" class="">TRIX</a></li>
<li><a name="BRAR" class="">BRAR</a></li>
<li><a name="VR" class="">VR</a></li>
<li><a name="EMV" class="">EMV</a></li>
<li><a name="WR" class="">WR</a></li>
<li><a name="ROC" class="">ROC</a></li>
<li><a name="MTM" class="">MTM</a></li>
<li><a name="PSY">PSY</a></li>
</ul>
</div>
<!-- Parameter Settings -->
<div id="chart_parameter_settings" style="left: 960px; top: 281px;">
<h2 class="chart_str_indicator_parameters">Indicator Parameters</h2>
<table>
<tbody><tr>
<th>MA</th>
<td><input name="MA"><input name="MA"><input name="MA"><input name="MA"></td>
<td><button class="chart_str_default">default</button></td>
<th>DMA</th>
<td><input name="DMA"><input name="DMA"><input name="DMA"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>EMA</th>
<td><input name="EMA"><input name="EMA"><input name="EMA"><input name="EMA"></td>
<td><button class="chart_str_default">default</button></td>
<th>TRIX</th>
<td><input name="TRIX"><input name="TRIX"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>VOLUME</th>
<td><input name="VOLUME"><input name="VOLUME"></td>
<td><button class="chart_str_default">default</button></td>
<th>BRAR</th>
<td><input name="BRAR"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>MACD</th>
<td><input name="MACD"><input name="MACD"><input name="MACD"></td>
<td><button class="chart_str_default">default</button></td>
<th>VR</th>
<td><input name="VR"><input name="VR"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>KDJ</th>
<td><input name="KDJ"><input name="KDJ"><input name="KDJ"></td>
<td><button class="chart_str_default">default</button></td>
<th>EMV</th>
<td><input name="EMV"><input name="EMV"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>StochRSI</th>
<td><input name="StochRSI"><input name="StochRSI"><input name="StochRSI"><input name="StochRSI"></td>
<td><button class="chart_str_default">default</button></td>
<th>WR</th>
<td><input name="WR"><input name="WR"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>RSI</th>
<td><input name="RSI"><input name="RSI"><input name="RSI"></td>
<td><button class="chart_str_default">default</button></td>
<th>ROC</th>
<td><input name="ROC"><input name="ROC"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<th>DMI</th>
<td><input name="DMI"><input name="DMI"></td>
<td><button class="chart_str_default">default</button></td>
<th>MTM</th>
<td><input name="MTM"><input name="MTM"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<tr>
<!-- <th>OBV</th>
<td><input name="OBV"></td>
<td><button class="chart_str_default">default</button></td> -->
<th>BOLL</th>
<td><input name="BOLL"></td>
<td><button class="chart_str_default">default</button></td>
<th>PSY</th>
<td><input name="PSY"><input name="PSY"></td>
<td><button class="chart_str_default">default</button></td>
</tr>
<!-- <tr>
<th>BOLL</th>
<td><input name="BOLL"></td>
<td><button class="chart_str_default">default</button></td>
</tr> -->
</tbody></table>
<div id="close_settings"><a class="chart_str_close">CLOSE</a></div>
</div>
<!-- Loading -->
<div id="chart_loading" class="chart_str_loading" style="left: 1180px; top: 232px;">Loading...</div>
</div> <!-- End Of ChartContainer -->
<div style="display: none">
<form style="display: inline" id="chart_input_interface">
<input style="display: inline" type="text" id="chart_input_interface_text">
<input style="display: inline" type="submit" id="chart_input_interface_submit">
</form>
<form style="display: inline" id="chart_output_interface">
<input style="display: inline" type="text" id="chart_output_interface_text">
<input style="display: inline" type="submit" id="chart_output_interface_submit">
</form>
</div>
<div style="display: none" id="chart_language_switch_tmp">
<span name="chart_str_period" zh_hk="週期" zh_cn="周期" en_us="TIME"></span>
<span name="chart_str_period_line" zh_hk="分時" zh_cn="分时" en_us="Line"></span>
<span name="chart_str_period_1m" zh_hk="1分钟" zh_cn="1分钟" en_us="1m"></span>
<span name="chart_str_period_3m" zh_hk="3分钟" zh_cn="3分钟" en_us="3m"></span>
<span name="chart_str_period_5m" zh_hk="5分钟" zh_cn="5分钟" en_us="5m"></span>
<span name="chart_str_period_15m" zh_hk="15分钟" zh_cn="15分钟" en_us="15m"></span>
<span name="chart_str_period_30m" zh_hk="30分钟" zh_cn="30分钟" en_us="30m"></span>
<span name="chart_str_period_1h" zh_hk="1小時" zh_cn="1小时" en_us="1h"></span>
<span name="chart_str_period_2h" zh_hk="2小時" zh_cn="2小时" en_us="2h"></span>
<span name="chart_str_period_4h" zh_hk="4小時" zh_cn="4小时" en_us="4h"></span>
<span name="chart_str_period_6h" zh_hk="6小時" zh_cn="6小时" en_us="6h"></span>
<span name="chart_str_period_12h" zh_hk="12小時" zh_cn="12小时" en_us="12h"></span>
<span name="chart_str_period_1d" zh_hk="日線" zh_cn="日线" en_us="1d"></span>
<span name="chart_str_period_3d" zh_hk="3日" zh_cn="3日" en_us="3d"></span>
<span name="chart_str_period_1w" zh_hk="周線" zh_cn="周线" en_us="1w"></span>
<span name="chart_str_settings" zh_hk="更多" zh_cn="更多" en_us="MORE"></span>
<span name="chart_setting_main_indicator" zh_hk="均線設置" zh_cn="均线设置" en_us="Main Indicator"></span>
<span name="chart_setting_main_indicator_none" zh_hk="關閉均線" zh_cn="关闭均线" en_us="None"></span>
<span name="chart_setting_indicator_parameters" zh_hk="指標參數設置" zh_cn="指标参数设置" en_us="Indicator Parameters"></span>
<span name="chart_str_chart_style" zh_hk="主圖樣式" zh_cn="主图样式" en_us="Chart Style"></span>
<span name="chart_str_main_indicator" zh_hk="主指標" zh_cn="主指标" en_us="Main Indicator"></span>
<span name="chart_str_indicator" zh_hk="技術指標" zh_cn="技术指标" en_us="Indicator"></span>
<span name="chart_str_indicator_cap" zh_hk="技術指標" zh_cn="技术指标" en_us="INDICATOR"></span>
<span name="chart_str_tools" zh_hk="畫線工具" zh_cn="画线工具" en_us="Tools"></span>
<span name="chart_str_tools_cap" zh_hk="畫線工具" zh_cn="画线工具" en_us="TOOLS"></span>
<span name="chart_str_theme" zh_hk="主題選擇" zh_cn="主题选择" en_us="Theme"></span>
<span name="chart_str_theme_cap" zh_hk="主題選擇" zh_cn="主题选择" en_us="THEME"></span>
<span name="chart_language_setting" zh_hk="語言(LANG)" zh_cn="语言(LANG)" en_us="LANGUAGE"></span>
<span name="chart_exchanges_setting" zh_hk="更多市場" zh_cn="更多市场" en_us="MORE MARKETS"></span>
<span name="chart_othercoin_setting" zh_hk="其它市場" zh_cn="其它市场" en_us="OTHER MARKETS"></span>
<span name="chart_str_none" zh_hk="關閉" zh_cn="关闭" en_us="None"></span>
<span name="chart_str_theme_dark" zh_hk="深色主題" zh_cn="深色主题" en_us="Dark"></span>
<span name="chart_str_theme_light" zh_hk="淺色主題" zh_cn="浅色主题" en_us="Light"></span>
<span name="chart_str_on" zh_hk="開啟" zh_cn="开启" en_us="On"></span>
<span name="chart_str_off" zh_hk="關閉" zh_cn="关闭" en_us="Off"></span>
<span name="chart_str_close" zh_hk="關閉" zh_cn="关闭" en_us="CLOSE"></span>
<span name="chart_str_default" zh_hk="默認值" zh_cn="默认值" en_us="default"></span>
<span name="chart_str_loading" zh_hk="正在讀取數據..." zh_cn="正在读取数据..." en_us="Loading..."></span>
<span name="chart_str_indicator_parameters" zh_hk="指標參數設置" zh_cn="指标参数设置" en_us="Indicator Parameters"></span>
<span name="chart_str_cursor" zh_hk="光標" zh_cn="光标" en_us="Cursor"></span>
<span name="chart_str_cross_cursor" zh_hk="十字光標" zh_cn="十字光标" en_us="Cross Cursor"></span>
<span name="chart_str_seg_line" zh_hk="線段" zh_cn="线段" en_us="Trend Line"></span>
<span name="chart_str_straight_line" zh_hk="直線" zh_cn="直线" en_us="Extended"></span>
<span name="chart_str_ray_line" zh_hk="射線" zh_cn="射线" en_us="Ray"></span>
<span name="chart_str_arrow_line" zh_hk="箭頭" zh_cn="箭头" en_us="Arrow"></span>
<span name="chart_str_horz_seg_line" zh_hk="水平線段" zh_cn="水平线段" en_us="Horizontal Line"></span>
<span name="chart_str_horz_straight_line" zh_hk="水平直線" zh_cn="水平直线" en_us="Horizontal Extended"></span>
<span name="chart_str_horz_ray_line" zh_hk="水平射線" zh_cn="水平射线" en_us="Horizontal Ray"></span>
<span name="chart_str_vert_straight_line" zh_hk="垂直直線" zh_cn="垂直直线" en_us="Vertical Extended"></span>
<span name="chart_str_price_line" zh_hk="價格線" zh_cn="价格线" en_us="Price Line"></span>
<span name="chart_str_tri_parallel_line" zh_hk="價格通道線" zh_cn="价格通道线" en_us="Parallel Channel"></span>
<span name="chart_str_bi_parallel_line" zh_hk="平行直線" zh_cn="平行直线" en_us="Parallel Lines"></span>
<span name="chart_str_bi_parallel_ray" zh_hk="平行射線" zh_cn="平行射线" en_us="Parallel Rays"></span>
<span name="chart_str_fib_retrace" zh_hk="斐波納契回調" zh_cn="斐波纳契回调" en_us="Fibonacci Retracements"></span>
<span name="chart_str_fib_fans" zh_hk="斐波納契扇形" zh_cn="斐波纳契扇形" en_us="Fibonacci Fans"></span>
<span name="chart_str_updated" zh_hk="更新於" zh_cn="更新于" en_us="Updated"></span>
<span name="chart_str_ago" zh_hk="前" zh_cn="前" en_us="ago"></span>
</div>
<script src="lib/kline.draw.js"></script>
<script type="text/javascript">
var option = {
market_from: queryString('symbol'),
// market_from_name: queryString('marketName'),
url: window.config.socketServer,
subscribePath: "market.~symbol~.kline.~period~",
///trade/market/kline/{symbol}/{lintType}
ajaxURL:window.config.ajaxServer+"/exchange/markets/kline/~symbol~/~period~"
};
new KLine(option).draw()
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB