From 018c87cf62ac447add9510fe2cafd21ef1e75040 Mon Sep 17 00:00:00 2001
From: Roman Bazalevskiy <rvb@rvb.name>
Date: Thu, 17 Nov 2022 17:50:30 +0300
Subject: [PATCH 1/1] =?utf8?q?=D0=9D=D0=B5=D0=B7=D0=BD=D0=B0=D1=87=D0=B8?=
 =?utf8?q?=D1=82=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20=D0=B4=D0=BE=D1=80?=
 =?utf8?q?=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B8=20=D1=81=D1=82=D0=B8=D0=BB?=
 =?utf8?q?=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 data/web/script.js |  18 +++++---
 data/web/style.css | 109 ++++++++++++++++++++++++++++++++-------------
 ui.yml             |   9 +++-
 3 files changed, 97 insertions(+), 39 deletions(-)

diff --git a/data/web/script.js b/data/web/script.js
index d881926..c40f7e1 100644
--- a/data/web/script.js
+++ b/data/web/script.js
@@ -236,7 +236,7 @@ function ElementHTML(element) {
       return '<div class="pure-u-1 pure-u-md-1-3"><label for="_ui_element_' + element.id + '">' + encode(element.label) + '</label>'
         + '<input data-ui_class="password" type="password" id="_ui_element_' + element.id + '" value="' + encode(value) 
         + '" class="pure-u-1" style="display:inline-block" maxlength="99" oninput="sendUpdate(\'' + element.id + '\')" />'
-        + '<div class="hint" onclick="ShowPwd(\'' + element.id + '\')">&#x1F441;</div></div>'
+        + '<div class="hint" onclick="ShowPwd(\'' + element.id + '\')">&#61550;</div></div>'
     case 'input':
       var pattern = ""
       if (element.pattern) {
@@ -253,7 +253,7 @@ function ElementHTML(element) {
       return '<div class="pure-u-1 pure-u-md-1-3"><label for="_ui_element_' + element.id + '">' + encode(element.label) + '</label>'
         + '<input data-ui_class="input" type="text" id="_ui_element_' + element.id + '" value="' + encode(value) +'"'+ pattern
         + ' class="pure-u-1" style="display:inline-block" maxlength="99" oninput="sendUpdate(\'' + element.id + '\')" />' 
-        + '<div class="hint" onclick="OpenSelect(\'' + element.id+ '\'); getWiFi(\'' + element.id + '\')">&#128246;</div>'
+        + '<div class="hint" onclick="OpenSelect(\'' + element.id+ '\'); getWiFi(\'' + element.id + '\')">&#61931;</div>'
         + '<div class="modal" id="_ui_elemmodal_' + element.id + '" hidden>' 
         + '<div class="modal-content">'
         + '<div id="_ui_elemselect_' + element.id + '"></div>'
@@ -336,6 +336,7 @@ function DrawNavigator(project, pages) {
   for (const page of pages) {
     list = list + '<li id="_ui_pglink_' + page.id 
       + '" class="pure-menu-item"><a class="pure-menu-link" onclick="DrawPage(\''+ page.id +'\')" href="#' + page.id + '">'
+      + (page.icon?'<span class="icon">'+page.icon+'</span>':'')
       + page.title+'</a></li>'
   }
   menu.innerHTML = list
@@ -344,20 +345,23 @@ function DrawNavigator(project, pages) {
 function DrawContacts(contacts) {
   if (!contacts) return;
   var contact_list = '<hr><h4 class="pure-u1">Контакты</h4>'
-  for (const contact of contacts) {
+  for (contact of contacts) {
     const url = new URL(contact)
     var ref
-    console.log(url)
     switch (url.protocol) {
       case 'http':
       case 'https:':
-        ref = '&#8962; '+url.hostname
+        ref = '<span class="icon">&#61461;</span>'+url.hostname
         break
       case 'mailto:':
-        ref = '&#9993; '+url.pathname
+        ref = '<span class="icon">&#61664;</span>'+url.pathname
+        break
+      case 'tg:':
+        ref = '<span class="icon">&#62150;</span>'+url.pathname
+        contact = 'tg://resolve?domain='+url.pathname
         break
       default:
-        ref = '&#128389; '+url.pathname
+        ref = '<span class="icon">&#62074;</span>'+url.pathname
     }
     contact_list += '<a href="'+contact+'">'+ref+'</a>'
   }
diff --git a/data/web/style.css b/data/web/style.css
index 1f818db..3bb931c 100644
--- a/data/web/style.css
+++ b/data/web/style.css
@@ -1,3 +1,5 @@
+/* pure-min  */
+
 .pure-button:focus,
 a:active,
 a:hover {
@@ -460,7 +462,7 @@ legend {
 .pure-button-selected,
 a.pure-button-primary,
 a.pure-button-selected {
- background-color:#0078e7;
+ background-color :#0078e7;
  color:#fff
 }
 .pure-button-group .pure-button {
@@ -974,14 +976,19 @@ a.pure-button-selected {
 :root {
  --slide:250px
 }
+
+/* custom styles */
+
 body {
  color:#aaa;
- background:#292929
+ background:#242424;
 }
+
 .pure-img-responsive {
  max-width:100%;
  height:auto
 }
+
 #layout,
 #menu,
 .menu-link {
@@ -1016,11 +1023,11 @@ body {
  text-align:center
 }
 .header h1 {
- color:#2497e3;
+ color:dodgerblue;
  margin:.4em 0;
- font-size:2em;
- font-weight:300;
- font-family:fantasy
+ font-size:2.4em;
+ font-weight: bold;
+ font-variant-caps: small-caps
 }
 .header h2 {
  font-weight:300;
@@ -1041,7 +1048,7 @@ body {
  left:0;
  bottom:0;
  z-index:1000;
- background:#191818;
+ background:#181818;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch
 }
@@ -1066,7 +1073,7 @@ body {
 }
 #menu .pure-menu-selected,
 #menu .pure-menu-heading {
- background:#1f8dd6
+ background:dodgerblue
 }
 #menu .pure-menu-selected a {
  color:#fff
@@ -1103,7 +1110,7 @@ body {
 .menu-link span,
 .menu-link span:before,
 .menu-link span:after {
- background-color:#2497e3;
+ background-color:dodgerblue;
  width:100%;
  height:.2em
 }
@@ -1159,7 +1166,7 @@ input[type=range]::-webkit-slider-runnable-track {
  cursor:pointer;
  animate:0.2s;
  box-shadow:0 0 0px #000000;
- background:#2497E3;
+ background:dodgerblue;
  border-radius:3px;
  border:0 solid #000000
 }
@@ -1175,7 +1182,7 @@ input[type=range]::-webkit-slider-thumb {
  margin-top:-8.5px
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
- background:#2497E3
+ background:dodgerblue
 }
 input[type=range]::-moz-range-track {
  width:100%;
@@ -1183,17 +1190,17 @@ input[type=range]::-moz-range-track {
  cursor:pointer;
  animate:0.2s;
  box-shadow:0 0 0px #000000;
- background:#2497E3;
+ background:dodgerblue;
  border-radius:3px;
  border:0 solid #000000
 }
 input[type=range]::-moz-range-thumb {
  box-shadow:0 0 0px #000000;
- border:1px solid #2497E3;
+ border:1px solid dodgerblue;
  height:20px;
  width:20px;
  border-radius:30px;
- background:#A1D0FF;
+ background:lightskyblue;
  cursor:pointer
 }
 input[type=range]::-ms-track {
@@ -1206,13 +1213,13 @@ input[type=range]::-ms-track {
  color:transparent
 }
 input[type=range]::-ms-fill-lower {
- background:#2497E3;
+ background:dodgerblue;
  border:0 solid #000000;
  border-radius:6px;
  box-shadow:0 0 0px #000000
 }
 input[type=range]::-ms-fill-upper {
- background:#2497E3;
+ background:dodgerblue;
  border:0 solid #000000;
  border-radius:6px;
  box-shadow:0 0 0px #000000
@@ -1220,22 +1227,25 @@ input[type=range]::-ms-fill-upper {
 input[type=range]::-ms-thumb {
  margin-top:1px;
  box-shadow:0 0 0px #000000;
- border:1px solid #2497E3;
+ border:1px solid dodgerblue;
  height:20px;
  width:20px;
  border-radius:40px;
- background:#A1D0FF;
+ background:lightskyblue;
  cursor:pointer
 }
 input[type=range]:focus::-ms-fill-lower {
- background:#2497E3
+ background:dodgerblue
 }
 input[type=range]:focus::-ms-fill-upper {
- background:#2497E3
+ background:dodgerblue
 }
 .hide {
  display:none
 }
+
+/* footer */
+
 footer {
  text-align:center;
  position: absolute;
@@ -1246,9 +1256,15 @@ footer a {
  display: inline-block;
  text-decoration: none
 }
+
+/* notification button/message */
+
 .notification {
   float: right;
  }
+
+/* modal dialog */ 
+ 
 .modal {
   position: fixed; /* Stay in place */
   z-index: 2000; /* Sit on top */
@@ -1266,9 +1282,9 @@ footer a {
   text-transform:uppercase;
   color:#aaa;
   font-size:90%;
-  border:2px solid #2497e3;
+  border:2px solid dodgerblue;
   border-radius:6px;
-  box-shadow:inset 0 1px 11px 0 #1f8dd6
+  box-shadow:inset 0 1px 11px 0 steelblue
   padding: 1rem;
   width: max-content;
   min-width: 30%;
@@ -1282,6 +1298,9 @@ footer a {
   text-align: center;
   border-bottom: lightgray solid 1px;
 }
+
+/* overlapping hint button */
+
 .hint {
   cursor: pointer;
   width: 1rem;
@@ -1291,10 +1310,13 @@ footer a {
   border: none;
   box-shadow: none;
   display: inline-block;
-  vertical-align: super;
+  vertical-align: text-bottom;
   margin-left: -2rem;
   z-index:1;
 }
+
+/* checkbox as a switch */
+
 input[type=checkbox].switch {
     display: none;
 }
@@ -1314,14 +1336,14 @@ label.switch.socket span.switch.slider:before {
     border-radius: 5em;
     position: absolute;
     left: 0;
-    border:2px solid #2497e3;
-    box-shadow:inset 0 1px 11px 0 #1f8dd6
+    border:2px solid dodgerblue;
+    box-shadow:inset 0 1px 11px 0 steelblue
 }
 label.switch span.switch.slider:after {
     content: "";
     width: 1.5rem;
     height: 1.5rem;
-    background: #2497e3;
+    background: dodgerblue;
     border-radius: 5.5ex;
     position: absolute;
     left: 0.4rem;
@@ -1330,7 +1352,7 @@ label.switch span.switch.slider:after {
 }
 label.switch.socket input[type=checkbox]:checked + span.slider:before {
     color: White;
-    background: #0a3660;
+    background: darkslategray;
     content: "";
     background: D;
 }
@@ -1338,23 +1360,48 @@ label.switch.socket input[type=checkbox]:checked + span.slider:after {
     background: white;
     left: 2.4em;
 }
+
+/* weekdays */
+
 .week {
     width: 100%;
 }
 .weekday, .weekday-selected {
-    font-size: min(4vw, 1.5rem);
+    font-size: min(4vw, 100%rem);
     text-align: center;
     margin: 0.5vw;
     padding: 0.4em;
     border-radius: 5em;
-    border:2px solid #2497e3;
-    box-shadow:inset 0 1px 11px 0 #1f8dd6;
+    border:2px solid dodgerblue;
+    box-shadow:inset 0 1px 11px 0 steelblue;
     color: gray
 }
 .weekday-selected {
-    background: #0a3660;
+    background: darkslategray;
     color: white
 }
+
+input[type=number] {
+  appearance: textfield;
+}
+
+/* fill all screen */
+
 #layout { 
   min-height: 100vh; 
 }
+
+/* fonts */
+
+@font-face {
+  font-family: "icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/icons.woff2") format("woff2");
+}
+.hint, .icon {
+  font-family: icons;
+}
+.icon {
+  margin-right: 0.5em;
+}
diff --git a/ui.yml b/ui.yml
index a07d6fc..fecd2bc 100644
--- a/ui.yml
+++ b/ui.yml
@@ -8,7 +8,8 @@ project:
     - xmpp:rvb@rvb.name
 pages:
   - id: main
-    title: Главная
+    title: "Главная"
+    icon: "&#61461;"
     elements:
       - type: table
         label: Имя устройства
@@ -45,6 +46,7 @@ pages:
         label: Свободная память
   - id: clock
     title: Часы
+    icon: "&#61463;"
     elements:
       - type: text
         value: Внешний вид
@@ -108,6 +110,7 @@ pages:
         step: 1
   - id: alarm
     title: Будильник
+    icon: "&#61683;"
     elements:
       - type: text
         value: Будильник
@@ -182,6 +185,7 @@ pages:
         max: 2000
   - id: hw
     title: Оборудование
+    icon: "&#63449;"
     elements:
       - type: text
         value: Часы реального времени
@@ -406,6 +410,7 @@ pages:
         max: 8
   - id: weather
     title: Погода
+    icon: "&#61673;"
     elements:
       - id: weather_url
         label: URL погодного сервиса
@@ -419,6 +424,7 @@ pages:
         min: 5
   - id: wifi
     title: WiFi
+    icon: "&#61931;"
     elements:
       - type: text
         value: Клиент сети
@@ -447,6 +453,7 @@ pages:
         label: Применить настройки WiFi
   - id: system
     title: Система
+    icon: "&#61573;"
     elements:
       - type: text
         value: Авторизация
-- 
2.34.1