aljaz/addons
1
0
Fork 0
mirror of https://github.com/aljazceru/addons.git synced 2026-02-15 18:04:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update deCONZ ingress choose html styling (#1517)

Browse Source
This commit is contained in:
Bram Kragten
2020-07-29 23:07:07 +02:00
committed by GitHub
parent b8d2781746
commit 3d5062bbf0
3 changed files with 305 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
deconz/CHANGELOG.md
View File

@@ -1,5 +1,9 @@
# Changelog
## 6.2.2
- Add styling to the ingress entry page
## 6.2.1
- Fix old fashon VNC access

2
deconz/config.json
View File

@@ -1,6 +1,6 @@
{
"name": "deCONZ",
"version": "6.2.1",
"version": "6.2.2",
"slug": "deconz",
"description": "Control a Zigbee network with ConBee or RaspBee by Dresden Elektronik",
"arch": ["amd64", "armhf", "aarch64"],

309
deconz/rootfs/usr/share/www/ingress.html
View File

@@ -1,14 +1,305 @@
<!DOCTYPE html>
<html>
<body>
<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;
}
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;
}
<h2>Zigbee network by Dresden Elektronik</h2>
<p>You can use the webui Phoscon or the VNC based deCONZ</p>
.mdc-button::-moz-focus-inner {
padding: 0;
border: 0;
}
<div>
<a href="pwa/index.html">Phoscon</a></br>
<a href="novnc/vnc_lite.html">deCONZ</a>
</div>
.mdc-button:active {
outline: none;
}
</body>
</html>
.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">
<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>