Change control bar to a smaller left-side toolbar
This commit is contained in:
Pierre Ossman
parent
6244e383e4
commit
fb7c3b3be2
|
|
@ -22,10 +22,6 @@ html {
|
|||
height:100%;
|
||||
}
|
||||
|
||||
#noVNC_buttons {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
* Input Elements
|
||||
* ----------------------------------------
|
||||
|
|
@ -122,59 +118,70 @@ input[type=button]:active, select:active {
|
|||
.noVNC_center > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.noVNC_vcenter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
.noVNC_vcenter > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* ----------------------------------------
|
||||
* Control Bar
|
||||
* ----------------------------------------
|
||||
*/
|
||||
|
||||
#noVNC_control_bar {
|
||||
#noVNC_control_bar_anchor {
|
||||
/* The anchor is needed to get z-stacking to work */
|
||||
position: fixed;
|
||||
display: block;
|
||||
height: 36px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 200;
|
||||
z-index: 2;
|
||||
|
||||
background: #b2bdcd; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
|
||||
background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
|
||||
/* Edge misrenders animations wihthout this */
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#noVNC_control_bar {
|
||||
position: relative;
|
||||
left: -30px;
|
||||
|
||||
background-color: rgb(110, 132, 163);
|
||||
border-radius: 0 10px 10px 0;
|
||||
|
||||
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* The extra border is to get a proper shadow */
|
||||
border-color: rgb(110, 132, 163);
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 30px;
|
||||
}
|
||||
|
||||
#noVNC_control_bar .noVNC_scroll {
|
||||
max-height: 100vh; /* Chrome is buggy with 100% */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0 10px 0 5px;
|
||||
}
|
||||
|
||||
/* General button style */
|
||||
.noVNC_button {
|
||||
display: block;
|
||||
padding: 4px 4px;
|
||||
margin: 10px 0;
|
||||
vertical-align: middle;
|
||||
border:1px solid #869dbc;
|
||||
border:1px solid rgba(255, 255, 255, 0.2);
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
background: #b2bdcd; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
|
||||
background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
|
||||
/*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
|
||||
font-size: 12px;
|
||||
}
|
||||
.noVNC_button.noVNC_selected {
|
||||
border-color: #4366a9;
|
||||
background: #779ced; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
|
||||
background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
|
||||
border-color: rgba(0, 0, 0, 0.8);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.noVNC_button:disabled {
|
||||
opacity: 0.4;
|
||||
|
|
@ -192,13 +199,14 @@ input[type=button]:active, select:active {
|
|||
|
||||
/* Panels */
|
||||
.noVNC_panel {
|
||||
position: fixed;
|
||||
top: 46px;
|
||||
right: 15px;
|
||||
transform: translate(0, -50px);
|
||||
transform: translateX(25px);
|
||||
|
||||
transition: 0.5s ease-in-out;
|
||||
|
||||
max-height: 100vh; /* Chrome is buggy with 100% */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
|
|
@ -215,7 +223,7 @@ input[type=button]:active, select:active {
|
|||
.noVNC_panel.noVNC_open {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
transform: translateX(75px);
|
||||
}
|
||||
|
||||
.noVNC_submit {
|
||||
|
|
@ -227,9 +235,6 @@ input[type=button]:active, select:active {
|
|||
}
|
||||
|
||||
/* noVNC Touch Device only buttons */
|
||||
#noVNC_mobile_buttons {
|
||||
display: inline;
|
||||
}
|
||||
:root:not(.noVNC_connected) #noVNC_mobile_buttons {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -249,49 +254,22 @@ input[type=button]:active, select:active {
|
|||
ime-mode: disabled;
|
||||
}
|
||||
|
||||
/* Extra manual keys */
|
||||
:root:not(.noVNC_connected) #noVNC_extra_keys {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#noVNC_extra_keys {
|
||||
display: inline;
|
||||
list-style-type: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
position: relative;
|
||||
}
|
||||
#noVNC_extra_keys.noVNC_hidden {
|
||||
display: none;
|
||||
}
|
||||
#noVNC_toggle_ctrl_button {
|
||||
display: inline;
|
||||
}
|
||||
#noVNC_toggle_alt_button {
|
||||
display: inline;
|
||||
}
|
||||
#noVNC_send_tab_button {
|
||||
display: inline;
|
||||
}
|
||||
#noVNC_send_esc_button {
|
||||
display: inline;
|
||||
}
|
||||
#noVNC_modifiers {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.noVNC_buttons {
|
||||
float: right;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* Send Ctrl+Alt+Delete */
|
||||
:root:not(.noVNC_connected) #noVNC_send_ctrl_alt_del_button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#noVNC_modifiers {
|
||||
background-color: rgb(92, 92, 92);
|
||||
border: none;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* XVP Shutdown/Reboot */
|
||||
:root:not(.noVNC_connected) #noVNC_xvp_button {
|
||||
display: none;
|
||||
|
|
@ -307,9 +285,12 @@ input[type=button]:active, select:active {
|
|||
display: none;
|
||||
}
|
||||
#noVNC_clipboard {
|
||||
/* Full screen, minus padding and left and right margins */
|
||||
max-width: calc(100vw - 2*15px - 75px - 25px);
|
||||
}
|
||||
#noVNC_clipboard_text {
|
||||
width: 500px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Settings */
|
||||
|
|
@ -456,7 +437,7 @@ input[type=button]:active, select:active {
|
|||
margin: 0px;
|
||||
padding: 0px;
|
||||
bottom: 0px;
|
||||
top: 36px; /* the height of the control bar */
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
width: auto;
|
||||
|
|
@ -488,8 +469,8 @@ input[type=button]:active, select:active {
|
|||
}
|
||||
|
||||
#noVNC_logo {
|
||||
margin-top: 170px;
|
||||
margin-left: 10px;
|
||||
margin-top: 60px;
|
||||
margin-left: 60px;
|
||||
color:yellow;
|
||||
text-align:left;
|
||||
font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
|
||||
|
|
@ -516,69 +497,18 @@ input[type=button]:active, select:active {
|
|||
*/
|
||||
|
||||
@media screen and (max-width: 640px){
|
||||
#noVNC_clipboard_text {
|
||||
width: 410px;
|
||||
}
|
||||
#noVNC_logo {
|
||||
font-size: 150px;
|
||||
}
|
||||
.noVNC_button {
|
||||
font-size: 10px;
|
||||
}
|
||||
.noVNC_buttons_left {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.noVNC_buttons_right {
|
||||
padding-right: 0px;
|
||||
}
|
||||
/* collapse the extra keys on lower resolutions */
|
||||
#noVNC_toggle_extra_keys_button {
|
||||
display: inline;
|
||||
}
|
||||
#noVNC_modifiers {
|
||||
display: none;
|
||||
}
|
||||
#noVNC_modifiers.noVNC_open {
|
||||
display: inline;
|
||||
}
|
||||
#noVNC_toggle_ctrl_button {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 0px;
|
||||
}
|
||||
#noVNC_toggle_alt_button {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
left: 0px;
|
||||
}
|
||||
#noVNC_send_tab_button {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0px;
|
||||
}
|
||||
#noVNC_send_esc_button {
|
||||
position: absolute;
|
||||
top: 135px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 321px) and (max-width: 480px) {
|
||||
#noVNC_clipboard_text {
|
||||
width: 250px;
|
||||
}
|
||||
#noVNC_logo {
|
||||
font-size: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.noVNC_button {
|
||||
font-size: 9px;
|
||||
}
|
||||
#noVNC_clipboard_text {
|
||||
width: 220px;
|
||||
}
|
||||
#noVNC_logo {
|
||||
font-size: 90px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,28 +12,10 @@
|
|||
color:#fff;
|
||||
}
|
||||
|
||||
.noVNC_button {
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
border:1px solid #4c4c4c;
|
||||
|
||||
background: #4c4c4c; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
|
||||
background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
|
||||
#noVNC_control_bar {
|
||||
background: #4c4c4c;
|
||||
}
|
||||
|
||||
.noVNC_button_selected {
|
||||
background: #9dd53a; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
|
||||
background: linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
|
||||
.noVNC_button.noVNC_selected {
|
||||
background: #9dd53a;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,3 +11,7 @@
|
|||
background:#04073d;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
#noVNC_control_bar {
|
||||
background: #080F80;
|
||||
}
|
||||
|
|
|
|||
16
app/ui.js
16
app/ui.js
|
|
@ -93,7 +93,6 @@ var UI;
|
|||
}
|
||||
|
||||
UI.updateViewClip();
|
||||
UI.setBarPosition();
|
||||
|
||||
UI.updateVisualState();
|
||||
|
||||
|
|
@ -168,7 +167,6 @@ var UI;
|
|||
UI.applyResizeMode();
|
||||
UI.updateViewClip();
|
||||
UI.updateViewDrag();
|
||||
UI.setBarPosition();
|
||||
} );
|
||||
|
||||
document.getElementById("noVNC_status")
|
||||
|
|
@ -570,6 +568,7 @@ var UI;
|
|||
UI.closeXvpPanel();
|
||||
UI.closeClipboardPanel();
|
||||
UI.closeConnectPanel();
|
||||
UI.closeExtraKeys();
|
||||
},
|
||||
|
||||
/* ------^-------
|
||||
|
|
@ -783,9 +782,6 @@ var UI;
|
|||
UI.rfb.set_repeaterID(UI.getSetting('repeaterID'));
|
||||
|
||||
UI.rfb.connect(host, port, password, path);
|
||||
|
||||
//Close dialog.
|
||||
setTimeout(UI.setBarPosition, 100);
|
||||
},
|
||||
|
||||
disconnect: function() {
|
||||
|
|
@ -1220,6 +1216,8 @@ var UI;
|
|||
},
|
||||
|
||||
openExtraKeys: function() {
|
||||
UI.closeAllPanels();
|
||||
|
||||
document.getElementById('noVNC_modifiers')
|
||||
.classList.add("noVNC_open");
|
||||
document.getElementById('noVNC_toggle_extra_keys_button')
|
||||
|
|
@ -1330,14 +1328,6 @@ var UI;
|
|||
selectbox.options.add(optn);
|
||||
},
|
||||
|
||||
setBarPosition: function() {
|
||||
document.getElementById('noVNC_control_bar').style.top = (window.pageYOffset) + 'px';
|
||||
document.getElementById('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px';
|
||||
|
||||
var vncwidth = document.getElementById('noVNC_container').style.offsetWidth;
|
||||
document.getElementById('noVNC_control_bar').style.width = vncwidth + 'px';
|
||||
}
|
||||
|
||||
/* ------^-------
|
||||
* /MISC
|
||||
* ==============
|
||||
|
|
|
|||
19
vnc.html
19
vnc.html
|
|
@ -50,10 +50,9 @@
|
|||
|
||||
<body>
|
||||
<!-- noVNC Control Bar -->
|
||||
<div id="noVNC_control_bar" class="noVNC_status_normal">
|
||||
|
||||
<div class="noVNC_buttons">
|
||||
<div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
|
||||
|
||||
<div id="noVNC_control_bar"><div class="noVNC_scroll">
|
||||
<!-- Drag/Pan the viewport -->
|
||||
<input type="image" alt="viewport drag" src="app/images/drag.svg"
|
||||
id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden"
|
||||
|
|
@ -78,7 +77,8 @@
|
|||
<div id="noVNC_extra_keys">
|
||||
<input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
|
||||
id="noVNC_toggle_extra_keys_button" class="noVNC_button" />
|
||||
<div id="noVNC_modifiers">
|
||||
<div class="noVNC_vcenter">
|
||||
<div id="noVNC_modifiers" class="noVNC_panel">
|
||||
<input type="image" alt="Ctrl" src="app/images/ctrl.svg"
|
||||
id="noVNC_toggle_ctrl_button" class="noVNC_button" />
|
||||
<input type="image" alt="Alt" src="app/images/alt.svg"
|
||||
|
|
@ -88,6 +88,7 @@
|
|||
<input type="image" alt="Esc" src="app/images/esc.svg"
|
||||
id="noVNC_send_esc_button" class="noVNC_button" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Send Ctrl+Alt+Delete -->
|
||||
|
|
@ -99,16 +100,19 @@
|
|||
<input type="image" alt="Shutdown/Reboot" src="app/images/power.svg"
|
||||
id="noVNC_xvp_button" class="noVNC_button"
|
||||
title="Shutdown/Reboot..." />
|
||||
<div class="noVNC_vcenter">
|
||||
<div id="noVNC_xvp" class="noVNC_panel">
|
||||
<input type="button" id="noVNC_xvp_shutdown_button" value="Shutdown" />
|
||||
<input type="button" id="noVNC_xvp_reboot_button" value="Reboot" />
|
||||
<input type="button" id="noVNC_xvp_reset_button" value="Reset" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clipboard -->
|
||||
<input type="image" alt="Clipboard" src="app/images/clipboard.svg"
|
||||
id="noVNC_clipboard_button" class="noVNC_button"
|
||||
title="Clipboard" />
|
||||
<div class="noVNC_vcenter">
|
||||
<div id="noVNC_clipboard" class="noVNC_panel">
|
||||
<textarea id="noVNC_clipboard_text" rows=5>
|
||||
</textarea>
|
||||
|
|
@ -116,6 +120,7 @@
|
|||
<input id="noVNC_clipboard_clear_button" type="button"
|
||||
value="Clear" class="noVNC_submit" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggle fullscreen -->
|
||||
<input type="image" alt="Fullscreen" src="app/images/fullscreen.svg"
|
||||
|
|
@ -126,6 +131,7 @@
|
|||
<input type="image" alt="Settings" src="app/images/settings.svg"
|
||||
id="noVNC_settings_button" class="noVNC_button"
|
||||
title="Settings" />
|
||||
<div class="noVNC_vcenter">
|
||||
<div id="noVNC_settings" class="noVNC_panel">
|
||||
<ul>
|
||||
<li><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</li>
|
||||
|
|
@ -161,6 +167,7 @@
|
|||
<li><input type="button" id="noVNC_settings_apply" value="Apply" class="noVNC_submit" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connection Controls -->
|
||||
<input type="image" alt="Connect" src="app/images/connect.svg"
|
||||
|
|
@ -169,6 +176,7 @@
|
|||
<input type="image" alt="Disconnect" src="app/images/disconnect.svg"
|
||||
id="noVNC_disconnect_button" class="noVNC_button"
|
||||
title="Disconnect" />
|
||||
<div class="noVNC_vcenter">
|
||||
<div id="noVNC_connect_controls" class="noVNC_panel">
|
||||
<ul>
|
||||
<li><label><strong>Host: </strong><input id="noVNC_setting_host" /></label></li>
|
||||
|
|
@ -178,7 +186,8 @@
|
|||
<li><input id="noVNC_connect_button" type="button" value="Connect" class="noVNC_submit" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
</div> <!-- End of noVNC_control_bar -->
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue