SmartHome dashboard controller UI
Created
October 5, 2022 16:05
-
-
Save wujku/27a5fb4488950931daaee0c8702e187c to your computer and use it in GitHub Desktop.
Smart home dashboard controller UI
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="dashboard"> | |
<header> | |
<div class="f fe"> | |
<div class="icon icon-w"></div> | |
<div class="heading"> | |
<h5 class="date">1 Feb 2019</h5> | |
<h2 class="title">Cloudy</h2> | |
</div> | |
</div> | |
<div class="weather f"> | |
<div> | |
<strong>26°<sup>C</sup></strong> | |
<p>Indoor Temp.</p> | |
</div> | |
<div> | |
<strong>48.2%</strong> | |
<p>Outdoor Humidity</p> | |
</div> | |
<div> | |
<strong>52.99</strong> | |
<p>Indoor Temp.</p> | |
</div> | |
</div> | |
</header> | |
<section> | |
<!-- Category --> | |
<div class="category"> | |
<ul> | |
<li><a href="#!" class="active">Living Room</a></li> | |
<li><a href="#!">Kitchen</a></li> | |
<li><a href="#!">Dinning</a></li> | |
<li><a href="#!">Weather</a></li> | |
</ul> | |
</div> | |
<!-- Appliances --> | |
<div class="appliances"> | |
<div class="appliance"> | |
<input type="checkbox" name="a" id="a"> | |
<label for="a"> | |
<i class="l"></i> | |
<strong>Lamp</strong> | |
<span data-o="opened" data-c="closed"></span> | |
<small></small> | |
</label> | |
</div> | |
<div class="appliance"> | |
<input type="checkbox" name="a" id="b"> | |
<label for="b"> | |
<i class="r"></i> | |
<strong>Router</strong> | |
<span data-o="opened" data-c="closed"></span> | |
<small></small> | |
</label> | |
</div> | |
<div class="appliance"> | |
<input type="checkbox" name="a" id="c"> | |
<label for="c"> | |
<i class="a"></i> | |
<strong>Air</strong> | |
<span data-o="opened" data-c="closed"></span> | |
<small></small> | |
</label> | |
</div> | |
<div class="appliance"> | |
<input type="checkbox" name="a" id="d"> | |
<label for="d"> | |
<i class="f"></i> | |
<strong>Fridge</strong> | |
<span data-o="opened" data-c="closed"></span> | |
<small></small> | |
</label> | |
</div> | |
<div class="m-player"> | |
<h2>Shared Devices</h2> | |
<div class="player"> | |
<div class="disc"></div> | |
<div class="artist"> | |
<p>Rosetta Stoned</p> | |
<small>Tool</small> | |
</div> | |
<div class="controls"> | |
<input type="checkbox" name="a" id="p"> | |
<label for="p"> | |
<div class="control"></div> | |
</label> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
</div> | |
<a href="https://www.youtube.com/watch?v=URUPsrmtYfs" target="_blank" title="Watch me speed code this" style="position: fixed; bottom: 10px; right: 10px"><img src="https://www.jerecho.com/codepen/youtube.png" alt=""></a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*{ | |
font-family: 'Lato', sans-serif; | |
} | |
body{ | |
height: 90vh; | |
display: flex; | |
background: aliceblue; | |
} | |
a{ | |
text-decoration: none; | |
color: inherit; | |
} | |
ul{ | |
list-style: none; | |
} | |
// variables | |
$yellow: #feb103; | |
$gray: #f6f8fa; | |
$black: #444; | |
$text-gray: #9e9e9e; | |
$text-gray2: #858d9f; | |
$blue1: #3976f6; | |
$blue2: #59a2fb; | |
$switchOff: #ff574e; | |
// helper class | |
.f{ | |
display: flex; | |
} | |
.fe{ | |
align-items: flex-end; | |
} | |
// start | |
body{ | |
background-color: rgba(89, 162, 251, 0.61); | |
} | |
.dashboard{ | |
background-color: $gray; | |
width: 420px; | |
border-radius: 0 0 20px -15px black; | |
margin: auto; | |
} | |
header{ | |
background-color: white; | |
overflow: hidden; | |
border-radius: 0 0 50px 50px; | |
padding: 40px 40px 20px; | |
box-shadow: 0 -5px 27px 0 rgba(128,128,128,0.15); | |
} | |
.weather{ | |
margin-top: 40px; | |
width: 100%; | |
position: relative; | |
overflow: hidden; | |
sup{ | |
font-size: 11px; | |
position: relative; | |
top: -11px; | |
} | |
&::before{ | |
content: ''; | |
position: absolute; | |
width: 130px; | |
height: 60px; | |
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%, rgba(255,255,255,1) 100%); | |
right: 0; | |
bottom: 14px; | |
} | |
>div{ | |
white-space: nowrap; | |
} | |
>div+div{ | |
margin-left: 30px; | |
} | |
>div>strong{ | |
font-size: 20px; | |
} | |
>div>p{ | |
color: $text-gray; | |
margin-top: 10px; | |
} | |
} | |
.category{ | |
overflow: hidden; | |
margin-top: 30px; | |
ul{ | |
display: flex; | |
} | |
li+li{ | |
margin-left: 40px; | |
} | |
a{ | |
font-size: 17px; | |
font-weight: 600; | |
color: $text-gray2; | |
white-space: nowrap; | |
&:hover, | |
&.active{ | |
color: $black; | |
} | |
&.active{ | |
position: relative; | |
&::before{ | |
content: ''; | |
width: 6px; | |
height: 6px; | |
border-radius: 6px; | |
background-color: $black; | |
position: absolute; | |
left: 0; | |
right: 0; | |
margin: auto; | |
bottom: -15px; | |
} | |
} | |
} | |
} | |
.appliances{ | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: space-between; | |
width: 340px; | |
margin: 30px auto; | |
} | |
.appliance{ | |
position: relative; | |
height: 170px; | |
width: 45%; | |
margin: 10px 0; | |
span{ | |
position: relative; | |
&::before, | |
&::after{ | |
text-transform: uppercase; | |
font-size: 12px; | |
position: absolute; | |
left: 0; | |
} | |
&::before{ | |
content: attr(data-o); | |
opacity: 0; | |
} | |
&::after{ | |
content: attr(data-c); | |
} | |
} | |
strong{ | |
margin: 70px 0 10px; | |
display: block; | |
font-size: 18px; | |
} | |
label{ | |
position: absolute; | |
width: 74%; | |
height: 71%; | |
cursor: pointer; | |
padding: 20px; | |
box-shadow: 1px 0 10px 10px rgba(black, 0.03); | |
border-radius: 30px; | |
&::before{ | |
border-radius: 30px; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
z-index: 0; | |
background-color: white; | |
content: ''; | |
} | |
*{ | |
position: relative; | |
transition: 200ms; | |
} | |
small{ | |
position: absolute; | |
width: 10px; | |
height: 10px; | |
background-color: $switchOff; | |
border-radius: 10px; | |
top: 30px; | |
right: 20px; | |
transition: 200ms; | |
&::after, | |
&::before{ | |
content: ''; | |
} | |
} | |
.f{ | |
width: 16px; | |
height: 22px; | |
background-color: $blue1; | |
display: block; | |
position: absolute; | |
border-radius: 2px; | |
top: 30px; | |
background-image: linear-gradient(0deg, white 2px, transparent 2px), linear-gradient(0deg, white 12px, transparent 0); | |
background-size: 17px 9px, 2px 15px; | |
background-position: 0 0, 3px 0; | |
background-repeat: no-repeat; | |
} | |
.a{ | |
width: 23px; | |
height: 10px; | |
background-color: $blue1; | |
display: block; | |
position: absolute; | |
border-radius: 2px; | |
top: 30px; | |
background-image: linear-gradient(0deg, white 2px, transparent 2px); | |
background-size: 17px 9px; | |
background-position: 3px -2px; | |
background-repeat: no-repeat; | |
&::after, | |
&::before{ | |
content: ''; | |
position: absolute; | |
width: 8px; | |
height: 8px; | |
border-width: 3px; | |
border-style: solid; | |
border-color: transparent transparent $blue1; | |
top: 10px; | |
border-radius: 50%; | |
transform: rotate(72deg); | |
display: block; | |
} | |
&::after{ | |
left: 14px; | |
} | |
&::before{ | |
left: 6px; | |
} | |
} | |
.r{ | |
width: 23px; | |
height: 9px; | |
background-color: $blue1; | |
display: block; | |
position: absolute; | |
border-radius: 3px; | |
top: 30px; | |
&::after, | |
&::before{ | |
content: ''; | |
border-width: 2px; | |
border-style: solid; | |
border-color: rgba($blue1, .61) transparent transparent; | |
border-radius: 50%; | |
position: absolute; | |
display: block; | |
} | |
&::after{ | |
width: 22px; | |
height: 20px; | |
top: -11px; | |
left: -2px; | |
} | |
&::before{ | |
width: 16px; | |
height: 20px; | |
top: -6px; | |
left: 1px; | |
} | |
} | |
.l{ | |
width: 22px; | |
height: 13px; | |
background-color: $blue1; | |
display: block; | |
position: absolute; | |
border-radius: 22px 22px 0 0; | |
top: 30px; | |
&::before{ | |
content: ''; | |
width: 3px; | |
height: 8px; | |
background-color: rgba($blue1, 0.61); | |
display: block; | |
top: -8px; | |
position: absolute; | |
border-radius: 3px; | |
left: 9px; | |
} | |
&::after{ | |
content: ''; | |
position: absolute; | |
width: 10px; | |
height: 4px; | |
background: rgba($blue1, .61); | |
border-radius: 0 0 9px 9px; | |
top: 14px; | |
left: 6px; | |
} | |
} | |
} | |
input{ | |
display: none; | |
&:checked + label{ | |
&::before{ | |
content: ''; | |
background: linear-gradient(to bottom, $blue2 0%, $blue1 100%); | |
} | |
*{ | |
color: white; | |
} | |
i{ | |
background-color: rgba(white, 1); | |
&::before, | |
&::after{ | |
background-color: rgba(white, .61); | |
} | |
&.f{ | |
background-image: linear-gradient(0deg, rgba($blue2,.61) 2px, transparent 2px), linear-gradient(0deg, rgba($blue2,.61) 12px, transparent 0); | |
} | |
&.a{ | |
background-image: linear-gradient(0deg, rgba($blue2, .61) 2px, transparent 2px); | |
&::before, | |
&::after{ | |
background-color: rgba(white, 0); | |
border-color: transparent transparent rgba(white,.61); | |
} | |
} | |
&.r{ | |
background-color: rgba(white,1); | |
&::before, | |
&::after{ | |
background-color: rgba(white, 0); | |
border-color: rgba(white, .61) transparent transparent; | |
} | |
} | |
} | |
small{ | |
width: 30px; | |
height: 15px; | |
background-color: $blue1; | |
&::before{ | |
width: 13px; | |
height: 13px; | |
background-color: white; | |
display: block; | |
border-radius: 13px; | |
top: 1px; | |
position: absolute; | |
} | |
} | |
span::before{ | |
opacity: 1; | |
} | |
span::after{ | |
opacity: 0; | |
} | |
} | |
} | |
} | |
.heading .title{ | |
margin: 0; | |
font-size: 36px; | |
} | |
.heading .date{ | |
margin: 10px 0; | |
font-size: 16px; | |
} | |
.icon-w{ | |
position: relative; | |
height: 20px; | |
width: 20px; | |
border-radius: 50%; | |
background-color: $yellow; | |
margin-right: 30px; | |
top: -7px; | |
&::after, | |
&::before{ | |
content: ''; | |
position: absolute; | |
} | |
&::after{ | |
width: 28px; | |
height: 13px; | |
border-radius: 20px; | |
background-color: $yellow; | |
bottom: 0; | |
left: 3px; | |
} | |
&::before{ | |
width: 20px; | |
height: 20px; | |
box-shadow: | |
10px -3px 0 -2px rgba($yellow, 0.59), | |
3px -15px 1px -7px rgba($yellow, 0.4), | |
11px -17px 1px -7px rgba($yellow, 0.4), | |
19px -13px 1px -7px rgba($yellow, 0.4), | |
22px -4px 1px -7px rgba($yellow, 0.4); | |
border-radius: 50%; | |
} | |
} | |
.m-player{ | |
position: relative; | |
width: 100%; | |
>h2{ | |
margin-bottom: 5px; | |
margin-top: 10px; | |
} | |
.player{ | |
border-radius: 10px; | |
padding: 15px; | |
background-image: linear-gradient(to right, $blue2 0%, $blue1 100%); | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
color: white; | |
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.24); | |
} | |
.artist{ | |
margin-right: auto; | |
margin-left: 15px; | |
p{ | |
margin: 0; | |
font-weight: 600; | |
} | |
} | |
.disc{ | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background-image: linear-gradient(50deg, rgba(255,255,255,0) 45%, rgba(255,255,255,0.15) 31%, rgba(255,255,255,0) 72%), linear-gradient(-50deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.15) 50%,rgba(255,255,255,0) 60%),repeating-radial-gradient(circle, #444 0, #444 2px, gray 2px, #545454 3px); | |
position: relative; | |
&::before, | |
&::after{ | |
content: ''; | |
position: absolute; | |
margin: auto; | |
top: 0; | |
bottom: 0; | |
right: 0; | |
left: 0; | |
border-radius: 50%; | |
} | |
&::before{ | |
width: 20px; | |
height: 20px; | |
background: black; | |
border: 2px solid #5d5d5d; | |
} | |
&::after{ | |
width: 8px; | |
height: 8px; | |
background: white; | |
} | |
} | |
.control{ | |
width: 52px; | |
height: 10px; | |
background-image: linear-gradient(to right, rgba(white, .61) 2px, transparent 2px), linear-gradient(to right, rgba(white, .61) 2px, transparent 2px),linear-gradient(to right, white 4px, transparent 0),linear-gradient(to right, white 4px, transparent 0); | |
background-position: 0 0, 47px 0, 20px 0, 26px 0; | |
background-size: 2px 12px, 2px 12px, 4px 12px, 4px 12px; | |
background-repeat: no-repeat; | |
position: relative; | |
cursor: pointer; | |
transition: 200ms; | |
&::after, | |
&::before{ | |
content: ''; | |
position: absolute; | |
border-width: 6px; | |
border-style: solid; | |
top: -1px; | |
} | |
&::before{ | |
left: -2px; | |
border-color: transparent rgba(white, .61) transparent transparent; | |
} | |
&::after{ | |
right: 1px; | |
border-color: transparent transparent transparent rgba(white, .61); | |
} | |
} | |
.controls{ | |
input{ | |
display: none; | |
&:checked + label{ | |
.control{ | |
background-size: 2px 12px, 2px 12px, 0 0, 0 0; | |
background-position: 6px 0, 40px 0, 20px 0, 26px 0; | |
&::after{ | |
right: 18px; | |
} | |
&::before{ | |
left: -2px; | |
border-width: 0; | |
} | |
} | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment