litra-testbed/index.html at main · cajus/litra-testbed · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" href="data:image/png;base64,iVBORw0KGgo=">

  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@materialstyle/materialstyle@3.1.1/dist/css/materialstyle.min.css">

  <script src="./main.js" defer></script>

  <title>Litra Testbed</title>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-danger">
  <div class="container-fluid">
    <div class="d-flex align-items-center">
      <a class="navbar-brand d-flex align-items-center text-uppercase" href="javascript:">
        <i class="bi bi-star-fill me-2"></i>Litra Testbed
      </a>
    </div>
    <button type="button" class="btn btn-light m-1" id="requestDeviceButton">
        Select device
    </button>
  </div>
</nav>

<div class="container gap-4" id="litraSpace" style="display:flex;flex-wrap:wrap;justify-content:center;">

<template id="litraDeviceTemplate">
  <div class="card bg-secondary bg-opacity-10 mt-4 shadow-4dp" style="max-width:400px">
    <div class="card-body">
      <h4 class="card-title text-danger" id="cardTitle">Title</h4>
      <p class="card-text text-secondary">
        Streaming Light
      </p>

      <div class="row row-cols-1">
        <div class="col p-2">
          <div class="form-check form-switch form-switch-material">
            <input class="form-check-input" type="checkbox" id="switchButton">
            <label class="form-check-label text-secondary" for="switch9" id="switchValue"></label>
          </div>
        </div>
        <div class="col p-2">
          <label for="customRange1" class="form-label">Brightness <span class="text-secondary"
              id="brightnessValue"></span></label>
          <input type="range" class="form-range" min="20" max="205" id="brightnessSlider">
        </div>
        <div class="col p-2">
          <label for="customRange2" class="form-label">Color temperature <span class="text-secondary"
              id="ctValue"></span></label>
          <input type="range" class="form-range" min="2700" max="6600" step="100" id="ctSlider">
        </div>
      </div>

      <div id="rgbControls" style="display:none">
      <p class="card-text text-secondary">
        RGB Light
      </p>

      <div class="row row-cols-1">
        <div class="col p-2">
          <div class="d-flex form-check form-switch form-switch-material">
            <input class="form-check-input" type="checkbox" id="bcSwitchButton">
            <label class="form-check-label text-secondary ms-2" for="bcSwitchButton" id="bcSwitchValue"></label>
            <input class="ms-auto" type="color" id="colorPicker"/>
          </div>
        </div>
        <div class="col p-2">
          <label for="customRange1" class="form-label">Brightness <span class="text-secondary"
              id="bcBrightnessValue"></span></label>
          <input type="range" class="form-range" min="20" max="205" id="bcBrightnessSlider">
        </div>
      </div>
    </div>

    </div>

    <div class="d-flex justify-content-between align-items-center flex-wrap p-2">
      <button id="closeButton" type="button" class="btn btn-outline-danger border-0">
        Close
      </button>
    </div>
  </div>
</template>

</div>

<footer class="text-dark mt-2 p-3 d-flex flex-row-reverse">
  <a href="https://github.com/cajus/litra-testbed"><img src="github-mark.svg" alt="Github" style="width:32px; height:32px;"></a>
</footer>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/@material/ripple@14.0.0/dist/mdc.ripple.min.js"
        integrity="sha384-9QANVmWxL3S8VRs8x1Q+bF1Zzogpy7P/Qw1+y5qHLdC1ig0EuoHg9VbB1SXyecdZ"
        crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/@materialstyle/materialstyle@3.1.1/dist/js/materialstyle.min.js"></script>

</body>
</html>