Add device-dashboard

tutorials/device-dashboard/led-control/web_root/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Mongoose device dashboard -->
+  <script src="https://cdn.jsdelivr.net/gh/cesanta/mongoose@master/resources/dashboard.js"></script>
+  <script>
+    Dashboard.init({
+      debug: true,
+      data: {
+        led1: true,
+        volume: 42,
+        firmware_version: '1.0.0',
+      },
+    });
+  </script>
+
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div style="margin: 2rem auto; width: 480px; padding: 1rem 2rem; background: #0001; border-radius:.3rem;">
+    <h1 style="font-size: 1.25rem;">
+      My Device, version <span data-set-html="Dashboard.data.firmware_version"></span>
+    </h1>
+    <div style="margin: 1rem 0;">
+      <span>LED status:</span>
+      <input type="checkbox" class="toggle" data-bind="led1" data-autosave="1" />
+    </div>
+  </div>
+</body>
+</html>

tutorials/device-dashboard/led-control/web_root/style.css

@@ -0,0 +1,48 @@
+:root {
+}
+
+*, *::before, *::after {
+  box-sizing: border-box; margin: 0; padding: 0;
+  font-family: Arial, sans-serif;
+}
+
+.toggle {
+  position: relative;
+  width: 2.75rem;
+  height: 1.6rem;
+  margin: 0;
+  vertical-align: top;
+  border: 1px solid transparent;
+  background: #d1d5db;
+  border-radius: 0.75rem;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.toggle::after {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  width: 1.35rem;
+  height: 1.35rem;
+  background: #fff;
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+.toggle:checked {
+  background: #d1d5db;
+}
+.toggle:checked::after {
+  transform: translateX(calc(100% - 3px));
+}
+.toggle:disabled,
+.toggle.disabled {
+  background: #d1d5db;
+  cursor: not-allowed;
+}
+.toggle.edited {
+  border-color: #ee0;
+}