Тумблер рядом с ползунком рядом с цветовым индикатором - PullRequest
Новая
       10

Тумблер рядом с ползунком рядом с цветовым индикатором

0 голосов
/ 02 августа 2020

В качестве нового ie в js / HTML / CSS я пытаюсь создать интерфейс для своих ламп Hue. Цель состоит в том, чтобы создать flexbox с интерфейсом для моих ламп оттенка, каждый свет должен управляться тумблером включения / выключения, настройкой яркости и настройкой цвета. Flexbox важен, потому что я пытаюсь создать приборную панель и хочу добавить к ней больше функций.

Расположение источников света должно выглядеть следующим образом:

lightName: [Switch] [ ползунок диапазона яркости] [выбор круга цвета]

Результат, который у меня есть до сих пор: Изображение 

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 500px;
  margin: 10px;
  line-height: 400px;
  font-size: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flex-LightBox {
  display = flex;
  flex-direction: column;

}




.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin: 8px;
}

.about-section {
  padding: 50px;
  text-align: center;
  background-color: #474e5d;
  color: white;
}

.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}

@media screen and (max-width: 650px) {
   ul.topnav li.right,
   ul.topnav li {float: none;}
   .seged{position: relative;}
   #lab{border-right: 0px;}
  .column {
    width: 100%;
    display: block;
  }
}


 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #00FF00;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.range-slider__range {
  -webkit-appearance: none;
  border-radius: 5px;
}

footer {
    position = absolute;
    background-color: #f2f2f2;
    bottom = 0;
    padding: 25px;
}
<!DOCTYPE html>
<!-- {% load static %} -->
<html>
<head>
  <title>Dashboard</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="{% static 'Homepage/css/style.css'%}">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 <script src="{% static 'Homepage/js/Myscript.js'%}"></script>
</head>

<body>
<div class="about-section">

</div>

 <div class="flex-container">
  <div style= "flex-grow:1">
    <h2>Hue Lights</h2>
    <h4 style="text-align:right; margin-top=0em">Taffellamp:
        <label class="switch"><input type="checkbox" id="one" ><span class="slider round"></span></label>
        <label class="range-slider"><input class="range-slider__range" type="range" value="50" min="0" max="100"></label>
    </h4>
    <h4>Taffellamp: <label class="switch"><input type="checkbox" id ="two"><span class="slider round"></span></label></h4>
    <h4>Banklamp: <label class="switch"><input type="checkbox" id ="three"><span class="slider round"></span></label></h4>
    <h4>TV lamp: <label class="switch"><input type="checkbox" id ="four"><span class="slider round"></span></label></h4>
</div>
 <div style="flex-grow: 1"></div>
 <div style="flex-grow: 5">2</div>

 </div>



</body>
</html>

Если кто-то может помочь мне в дальнейшем, набрав правильный код: D.

...