From 3d5062bbf02dd8b27ac374648acf6759453646ea Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 29 Jul 2020 23:07:07 +0200
Subject: [PATCH] Update deCONZ ingress choose html styling (#1517)

---
 deconz/CHANGELOG.md                      |   4 +
 deconz/config.json                       |   2 +-
 deconz/rootfs/usr/share/www/ingress.html | 309 ++++++++++++++++++++++-
 3 files changed, 305 insertions(+), 10 deletions(-)
diff --git a/deconz/CHANGELOG.md b/deconz/CHANGELOG.md
index 083d5c2..81a9373 100644
--- a/deconz/CHANGELOG.md
+++ b/deconz/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 6.2.2
+
+- Add styling to the ingress entry page
+
 ## 6.2.1
 
 - Fix old fashon VNC access
diff --git a/deconz/config.json b/deconz/config.json
index ed70bcf..7eaecb0 100644
--- a/deconz/config.json
+++ b/deconz/config.json
@@ -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"],
diff --git a/deconz/rootfs/usr/share/www/ingress.html b/deconz/rootfs/usr/share/www/ingress.html
index da9f40a..38d76ad 100644
--- a/deconz/rootfs/usr/share/www/ingress.html
+++ b/deconz/rootfs/usr/share/www/ingress.html
@@ -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>
\ No newline at end of file
+      .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>
