diff --git a/app/styles/base.css b/app/styles/base.css
index 51ba9396..8ceda02c 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -480,6 +480,10 @@ input[type=button]:active, select:active {
/* Control bar content */
+#noVNC_control_bar .noVNC_logo {
+ font-size: 13px;
+}
+
:root:not(.noVNC_connected) #noVNC_view_drag_button {
display: none;
}
@@ -558,9 +562,6 @@ input[type=button]:active, select:active {
}
/* Connection Controls */
-:root.noVNC_connected #noVNC_connect_button {
- display: none;
-}
:root:not(.noVNC_connected) #noVNC_disconnect_button {
display: none;
}
@@ -629,6 +630,79 @@ input[type=button]:active, select:active {
content: url("../images/warning.svg") " ";
}
+/* ----------------------------------------
+ * Connect Dialog
+ * ----------------------------------------
+ */
+
+#noVNC_connect_dlg {
+ transition: 0.5s ease-in-out;
+
+ transform: scale(0, 0);
+ visibility: hidden;
+ opacity: 0;
+}
+#noVNC_connect_dlg.noVNC_open {
+ transform: scale(1, 1);
+ visibility: visible;
+ opacity: 1;
+}
+#noVNC_connect_dlg .noVNC_logo {
+ transition: 0.5s ease-in-out;
+ padding: 10px;
+ margin-bottom: 10px;
+
+ font-size: 80px;
+ text-align: center;
+
+ border-radius: 5px;
+}
+@media (max-width: 440px) {
+ #noVNC_connect_dlg {
+ max-width: calc(100vw - 100px);
+ }
+ #noVNC_connect_dlg .noVNC_logo {
+ font-size: calc(25vw - 30px);
+ }
+}
+#noVNC_connect_button {
+ cursor: pointer;
+
+ padding: 10px;
+
+ color: white;
+ background-color: rgb(110, 132, 163);
+ border-radius: 12px;
+
+ text-align: center;
+ font-size: 20px;
+
+ box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+}
+#noVNC_connect_button div {
+ margin: 2px;
+ padding: 5px 30px;
+ border: 1px solid rgb(83, 99, 122);
+ border-bottom-width: 2px;
+ border-radius: 5px;
+ background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
+
+ /* This avoids it jumping around when :active */
+ vertical-align: middle;
+}
+#noVNC_connect_button div:active {
+ border-bottom-width: 1px;
+ margin-top: 3px;
+}
+:root:not(.noVNC_touch) #noVNC_connect_button div:hover {
+ background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
+}
+
+#noVNC_connect_button img {
+ vertical-align: bottom;
+ height: 1.3em;
+}
+
/* ----------------------------------------
* Password Dialog
* ----------------------------------------
@@ -732,31 +806,14 @@ input[type=button]:active, select:active {
.noVNC_logo {
color:yellow;
- text-align:left;
font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
- font-size: 13px;
line-height:90%;
- text-shadow: 1px 1px 0 #000;
+ text-shadow: 0.1em 0.1em 0 black;
}
.noVNC_logo span{
color:green;
}
-#noVNC_logo {
- margin-top: 60px;
- margin-left: 60px;
- font-size: 180px;
- text-shadow:
- 5px 5px 0 #000,
- -1px -1px 0 #000,
- 1px -1px 0 #000,
- -1px 1px 0 #000,
- 1px 1px 0 #000;
-}
-:root.noVNC_connected #noVNC_logo {
- display: none;
-}
-
#noVNC_bell {
display: none;
}
diff --git a/app/ui.js b/app/ui.js
index a8b6ec17..0e789c04 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -144,6 +144,11 @@ var UI;
UI.openControlbar();
+ // Show the connect panel on first load unless autoconnecting
+ if (!autoconnect) {
+ UI.openConnectPanel();
+ }
+
UI.updateViewClip();
UI.updateVisualState();
@@ -1013,6 +1018,25 @@ var UI;
* CONNECTION
* ------v------*/
+ openConnectPanel: function() {
+ document.getElementById('noVNC_connect_dlg')
+ .classList.add("noVNC_open");
+ },
+
+ closeConnectPanel: function() {
+ document.getElementById('noVNC_connect_dlg')
+ .classList.remove("noVNC_open");
+ },
+
+ toggleConnectPanel: function() {
+ if (document.getElementById('noVNC_connect_dlg')
+ .classList.contains("noVNC_open")) {
+ UI.closeConnectPanel();
+ } else {
+ UI.openConnectPanel();
+ }
+ },
+
connect: function() {
var host = document.getElementById('noVNC_setting_host').value;
var port = document.getElementById('noVNC_setting_port').value;
@@ -1033,6 +1057,7 @@ var UI;
if (!UI.initRFB()) return;
UI.closeAllPanels();
+ UI.closeConnectPanel();
UI.rfb.set_encrypt(UI.getSetting('encrypt'));
UI.rfb.set_true_color(UI.getSetting('true_color'));
@@ -1059,6 +1084,7 @@ var UI;
UI.showStatus(reason, 'error');
}
UI.openControlbar();
+ UI.openConnectPanel();
},
/* ------^-------
diff --git a/vnc.html b/vnc.html
index e56065ed..78599b7e 100644
--- a/vnc.html
+++ b/vnc.html
@@ -249,9 +249,6 @@
-
@@ -264,6 +261,16 @@
+
+
+
Connect
+