Files
addons/deconz/rootfs/usr/share/www/ingress.html
wovka88 20aded368f Enable autoscale for DeCONZ noVNC (#1621)
* Bump deCONZ to 2.05.80

* Bump deCONZ to 2.05.81

* Update CHANGELOG.md
* Update config.json
* Update build.json

* Revert "Bump deCONZ to 2.05.81"

This reverts commit bb4ada3b1505a566ebb96c73bf6273ac364df7e0.

* Bump deCONZ to 2.05.84

* Update CHANGELOG.md
* Update config.json
* Update build.json

* Update CHANGELOG.md

* Version number adapted to 6.4.0

* NoVNC Autoscale

Enable Autoscale for Ingress NoVNC View

* Update Version to 6.4.1

* Update Changelog
* Update config.json

* DeCONZ novncn autoscale

Enable autoscale for DeCONZ ingress noVNC page
2020-10-21 16:16:09 +02:00

307 lines
8.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 1rem;
line-height: 1.375rem;
font-weight: 500;
letter-spacing: 0.0071428571em;
text-decoration: inherit;
text-transform: inherit;
color: #212121;
font-weight: 400;
line-height: 2;
background: #fafafa;
}
a {
text-decoration: none;
color: #03a9f4;
}
.toolbar {
display: flex;
align-items: center;
font-size: 20px;
height: 65px;
background-color: #03a9f4;
font-weight: 400;
color: #fff;
box-sizing: border-box;
padding: 0px 16px;
}
.flex {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center;
justify-content: center;
padding: 16px;
}
h1 {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 20px;
font-weight: 400;
letter-spacing: 0;
margin: 0 0 0 72px;
}
.mdc-button {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 0.875rem;
line-height: 2.25rem;
font-weight: 500;
letter-spacing: 0.0892857143em;
text-decoration: none;
padding: 0 8px 0 8px;
display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 64px;
border: none;
outline: none;
line-height: inherit;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
overflow: visible;
vertical-align: middle;
border-radius: 4px;
}
.mdc-button::-moz-focus-inner {
padding: 0;
border: 0;
}
.mdc-button:active {
outline: none;
}
.mdc-button:hover {
cursor: pointer;
}
.mdc-button .mdc-button__ripple {
border-radius: 4px;
}
.mdc-button--raised .mdc-button__icon,
.mdc-button--unelevated .mdc-button__icon,
.mdc-button--outlined .mdc-button__icon {
margin-left: -4px;
margin-right: 8px;
}
[dir="rtl"] .mdc-button--raised .mdc-button__icon,
.mdc-button--raised .mdc-button__icon[dir="rtl"],
[dir="rtl"] .mdc-button--unelevated .mdc-button__icon,
.mdc-button--unelevated .mdc-button__icon[dir="rtl"],
[dir="rtl"] .mdc-button--outlined .mdc-button__icon,
.mdc-button--outlined .mdc-button__icon[dir="rtl"] {
margin-left: 8px;
margin-right: -4px;
}
.mdc-button--raised .mdc-button__label + .mdc-button__icon,
.mdc-button--unelevated .mdc-button__label + .mdc-button__icon,
.mdc-button--outlined .mdc-button__label + .mdc-button__icon {
margin-left: 8px;
margin-right: -4px;
}
[dir="rtl"] .mdc-button--raised .mdc-button__label + .mdc-button__icon,
.mdc-button--raised .mdc-button__label + .mdc-button__icon[dir="rtl"],
[dir="rtl"]
.mdc-button--unelevated
.mdc-button__label
+ .mdc-button__icon,
.mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir="rtl"],
[dir="rtl"] .mdc-button--outlined .mdc-button__label + .mdc-button__icon,
.mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir="rtl"] {
margin-left: -4px;
margin-right: 8px;
}
.mdc-button--raised,
.mdc-button--unelevated {
padding: 0 16px 0 16px;
}
.mdc-button--raised {
background-color: #03a9f4;
color: #fff;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mdc-button--raised:hover,
.mdc-button--raised:focus {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
.mdc-button--raised:active {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
0px 8px 10px 1px rgba(0, 0, 0, 0.14),
0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.mdc-button {
--mdc-ripple-fg-size: 0;
--mdc-ripple-left: 0;
--mdc-ripple-top: 0;
--mdc-ripple-fg-scale: 1;
--mdc-ripple-fg-translate-end: 0;
--mdc-ripple-fg-translate-start: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
will-change: transform, opacity;
}
.mdc-button .mdc-button__ripple::before,
.mdc-button .mdc-button__ripple::after {
position: absolute;
border-radius: 50%;
opacity: 0;
pointer-events: none;
content: "";
}
.mdc-button .mdc-button__ripple::before {
transition: opacity 15ms linear, background-color 15ms linear;
z-index: 1;
}
.mdc-button .mdc-button__ripple::before,
.mdc-button .mdc-button__ripple::after {
top: calc(50% - 100%);
left: calc(50% - 100%);
width: 200%;
height: 200%;
}
.mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after {
width: var(--mdc-ripple-fg-size, 100%);
height: var(--mdc-ripple-fg-size, 100%);
}
.mdc-button .mdc-button__ripple::before,
.mdc-button .mdc-button__ripple::after {
background-color: #03a9f4;
}
.mdc-button .mdc-button__ripple::before,
.mdc-button .mdc-button__ripple::after {
background-color: var(--mdc-theme-primary, #03a9f4);
}
.mdc-button:hover .mdc-button__ripple::before {
opacity: 0.04;
}
.mdc-button .mdc-button__ripple {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.mdc-button .mdc-button__ripple {
top: 0;
left: 0;
}
.mdc-button--raised .mdc-button__ripple::before {
background-color: #fff;
}
.mdc-button--raised .mdc-button__ripple::before {
background-color: var(--mdc-theme-on-primary, #fff);
}
.mdc-button--raised:hover .mdc-button__ripple::before {
opacity: 0.08;
}
.mdc-button--raised .mdc-button__ripple::after {
transition: opacity 150ms linear;
}
.mdc-button--raised:active .mdc-button__ripple::after {
transition-duration: 75ms;
opacity: 0.24;
}
.mdc-button {
height: 36px;
}
.mdc-button__ripple {
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="flex">
<div class="toolbar"><h1>Zigbee network by Dresden Elektronik</h1></div>
<div class="content">
<p>
You can use the
<a
href="https://phoscon.de/en/conbee/software#phoscon-app"
target="_blank"
rel="noreferrer"
>Phoscon Web App</a
>
or the
<a
href="https://phoscon.de/en/conbee/software#deconz"
target="_blank"
rel="noreferrer"
>deCONZ application</a
>
through VNC
</p>
<div>
<a href="pwa/index.html">
<button class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Phoscon</span>
</button>
</a>
<a href="novnc/vnc_lite.html?scale=yes">
<button class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">deCONZ</span>
</button>
</a>
</div>
</div>
</div>
</body>
</html>