Skip to content

Instantly share code, notes, and snippets.

@jigneshk5

jigneshk5/index.html

Created August 22, 2021 21:55
Show Gist options
  • Save jigneshk5/c086e04974601be6a530ad9b0a479fc2 to your computer and use it in GitHub Desktop.
Save jigneshk5/c086e04974601be6a530ad9b0a479fc2 to your computer and use it in GitHub Desktop.
Download ZIP
Smart Home OS Card
Raw
index.html
<div class="card card:smert">
<div class="display:flex top">
<div class="top:left display:flex">
<div class="icon:card icon:lamp">
<svg width="26" height="26">
<use xlink:href="#bulb" />
</svg>
</div>
<div class="text:card">
<h2 class="link title:card">Lamp</h2>
<p class="desc:card">Living Room</p>
</div>
</div>
<div class="top:right">
<div class="input:switch">
<input type="checkbox" class="hide" id="switch" checked>
<p class="indicator:text"></p>
<label for="switch" class="switch:indicator">
<div class="switch">
<div class="dot"></div>
</div>
</label>
</div>
</div>
</div>
<div class="after:top display:flex">
<p class="text:sector">Dimming</p>
<div class="input:switch">
<input type="checkbox" class="hide" id="dimming" checked>
<p class="indicator:text dimming"></p>
<label for="dimming" class="switch:indicator">
<div class="switch dimming">
<div class="dot"></div>
</div>
</label>
</div>
</div>
<div class="range:slide">
<div class="grid:slide">
<svg width="20" height="20" class="slider:down">
<use xlink:href="#sun" />
</svg>
<input type="range" name="" id="range" value="">
<svg width="26" height="26">
<use xlink:href="#sun" />
</svg>
</div>
</div>
<div class="color:section">
<p class="text:sector">Color selection</p>
<div class="colors:grid">
<div class="color">
<input type="radio" name="color" class="hide color:sel" id="white">
<label for="white" class="color:label white">
<svg width="18" height="18">
<use xlink:href="#check" />
</svg>
</label>
</div>
<div class="color">
<input type="radio" name="color" class="hide color:sel" id="orange" checked>
<label for="orange" class="color:label orange">
<svg width="18" height="18">
<use xlink:href="#check" />
</svg>
</label>
</div>
<div class="color">
<input type="radio" name="color" class="hide color:sel" id="black">
<label for="black" class="color:label black">
<svg width="18" height="18">
<use xlink:href="#check" />
</svg>
</label>
</div>
<div class="color">
<input type="radio" name="color" class="hide color:sel" id="blue">
<label for="blue" class="color:label blue">
<svg width="18" height="18">
<use xlink:href="#check" />
</svg>
</label>
</div>
<div class="color">
<input type="radio" name="color" class="hide color:sel" id="cyan">
<label for="cyan" class="color:label cyan">
<svg width="18" height="18">
<use xlink:href="#check" />
</svg>
</label>
</div>
<div class="color">
<input type="radio" name="color" class="hide color:sel" id="purple">
<label for="purple" class="color:label purple">
<svg width="18" height="18">
<use xlink:href="#check" />
</svg>
</label>
</div>
<div class="color">
<input type="radio" name="color" class="hide color:sel" id="red">
<label for="red" class="color:label red">
<svg width="18" height="18">
<use xlink:href="#check" />
</svg>
</label>
</div>
<div class="color">
<input type="radio" class="hide color:sel">
<label class="color:label no">
<svg width="18" height="18">
<use xlink:href="#plus" />
</svg>
</label>
</div>
</div>
</div>
<div class="scene:section">
<p class="text:sector">Scene selection</p>
<div class="labels:scene">
<div class="scene:label">
<input type="radio" name="scene" id="none" class="hide scene" checked>
<label for="none" class="lbl">
None
</label>
</div>
<div class="scene:label">
<input type="radio" name="scene" id="sleeping" class="hide scene">
<label for="sleeping" class="lbl">
Sleeping
</label>
</div>
<div class="scene:label">
<input type="radio" name="scene" id="reading" class="hide scene">
<label for="reading" class="lbl">
Reading
</label>
</div>
<div class="scene:label">
<input type="radio" name="scene" id="working" class="hide scene">
<label for="working" class="lbl">
Working
</label>
</div>
<div class="scene:label">
<input type="radio" class="hide" id="no">
<label for="no" class="add">
<svg width="18" height="18">
<use xlink:href="#plus" />
</svg>
</label>
</div>
</div>
</div>
</div>
<svg class="hide">
<symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" id="check">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</symbol>
<symbol fill="none" viewBox="0 0 24 24" stroke="currentColor" id="plus">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</symbol>
<symbol fill="currentColor" viewBox="0 0 24 24" stroke="currentColor" id="sun">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z">
</path>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="bulb"
x="0px" y="0px" viewBox="0 0 512 512" fill="currentColor" style="enable-background:new 0 0 512 512;"
xml:space="preserve">
<g>
<g>
<path
d="M388.56,192.8c-18.579-18.499-40.358-32.648-64.077-41.919V84.116H271V0h-30v84.116h-53.483v66.765 c-23.719,9.27-45.498,23.419-64.077,41.919c-31.96,31.84-51.09,73.18-54.69,117.68h374.5 C439.65,265.98,420.52,224.64,388.56,192.8z" />
</g>
</g>
<g>
<g>
<rect x="241" y="450.65" width="30" height="61.35" />
</g>
</g>
<g>
<g>
<rect x="342.883" y="412.78" transform="matrix(0.7597 -0.6503 0.6503 0.7597 -202.3702 339.2961)"
width="30.001" height="61.351" />
</g>
</g>
<g>
<g>
<rect x="123.461" y="428.485" transform="matrix(0.6503 -0.7596 0.7596 0.6503 -282.9958 272.1567)"
width="61.346" height="29.998" />
</g>
</g>
<g>
<g>
<path
d="M167.24,340.48c7.47,42.21,44.5,74.43,88.76,74.43s81.29-32.22,88.76-74.43l-177.58-0.36 C167.19,340.24,167.22,340.36,167.24,340.48z" />
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</symbol>
<symbol viewBox="0 0 24 24" stroke="currentColor" fill="var(--color-svg)" id="heart">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width=".4"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
</path>
</symbol>
<symbol viewBox="0 0 24 24" stroke="currentColor" fill="var(--color-svg)" id="icon-star">
<path stroke-linecap="square" stroke-linejoin="square" stroke-width=".4"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z">
</path>
</symbol>
<symbol fill="var(--color-svg)" viewBox="0 0 24 24" stroke="currentColor" id="icon-bookmark">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width=".4"
d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
</symbol>
<symbol fill="var(--color-svg)" viewBox="0 0 24 24" stroke="currentColor" id="moon">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width=".4"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</symbol>
</svg>
Raw
script.js
const range = document.getElementById('range');
document.documentElement.style.setProperty("--range", range.value + "%");
range.setAttribute('value', range.value);
range.addEventListener("input", () => {
range.setAttribute('value', range.value);
document.documentElement.style.setProperty("--range", range.value + "%");
});
Raw
style.scss
@import url('https://rsms.me/inter/inter.css');
html {
font-family: 'Inter', sans-serif;
}
@supports (font-variation-settings: normal) {
html {
font-family: 'Inter var', sans-serif;
}
}
:root {
--bg-page: #1a1a1a;
--text-color: #f3f3f3;
--card-bg: #202020;
--icon-bg: #45423C;
--blue: #0870f8;
--blue-rgb: 8, 112, 248;
--orange: #FF9232;
--g-purple: linear-gradient(30deg, #85f, #9966ff);
--g-yellow: linear-gradient(30deg, #fc0, #fc0);
--g-red: linear-gradient(30deg, #f36, #f24);
--g-blue: linear-gradient(30deg, #0cf, #0af);
--g-purple: linear-gradient(30deg, #85f, #9966ff);
--range: 0%;
--shadow: rgba(0, 6, 39, .1);
--light-shadow: rgba(255, 255, 255, .8);
--light-shadow-2: rgba(255, 255, 255, .1);
}
* {
box-sizing: border-box;
font-family: "Inter var", sans-serif;
font-size: 16px;
font-weight: 400;
user-select: none;
transition: all 200ms ease;
&:focus {
outline: none;
}
}
html,
body,
.full-width {
height: 100%;
}
body {
&,
html {
margin: 0;
padding: 0;
}
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background:var(--bg-page);
color:var(--text-color);
}
.hide {
display: none;
visibility: hidden;
height: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
a,
label {
margin: 0;
&.link {
cursor: pointer;
}
@media (hover: hover) {
&.link:hover {
filter: brightness(120%) saturate(120%);
}
}
}
.display\:flex {
display: flex;
}
.center {
@extend .display\:flex;
align-items: center;
justify-content: center;
}
.card {
max-width: 480px;
width: 100%;
margin: 0 auto;
background: var(--card-bg);
padding: 20px;
border-radius: 20px;
}
.top {
align-items: center;
}
.top\:left {
align-items: center;
.text\:card {
margin-left: 16px;
.title\:card {
font-size: 18px;
font-variation-settings: 'wght'700;
font-weight: 700;
}
.desc\:card {
margin-top: 6px;
color: rgba(255, 255, 255, .6);
font-size: 12px;
font-variation-settings: 'wght'300;
font-weight: 300;
}
}
}
.top\:right {
margin-left: auto;
}
.icon\:card {
--size: 48px;
border-radius: 50%;
width: var(--size);
height: var(--size);
@extend .center;
color: var(--orange);
background: var(--icon-bg);
}
.switch {
--offset: 0;
--gradient: 0;
--height: 22px;
--width: 40px;
--dot: 24px;
--bg-switch: #FF9232;
position: relative;
display: inline-block;
z-index: 1;
vertical-align: middle;
height: var(--height);
width: var(--width);
border-radius: 11px;
background: rgba(255, 255, 255, .1);
&.dimming {
--height: 18px;
--dot: 21px;
--bg-switch: linear-gradient(30deg, #85f, #9966ff);
--width: 34px;
}
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: inherit;
background: var(--bg-switch);
opacity: var(--gradient, 0);
transition: opacity .4s;
}
.dot {
background: #D1D6EE;
position: absolute;
width: var(--dot);
height: var(--dot);
border-radius: 50%;
left: -1px;
top: -1px;
cursor: pointer;
transform: translateX(var(--offset, 0));
transition: transform .4s, box-shadow .4s;
box-shadow: -4px -4px 8px var(--light-shadow-2, transparent), 4px 4px 8px var(--shadow, transparent);
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: inherit;
background: linear-gradient(160deg, #F1F4FF, #F9FAFF);
opacity: var(--gradient, 0);
transition: opacity .4s;
}
}
}
#switch {
&:checked~.switch\:indicator {
.switch {
--offset: 18px;
--gradient: 1;
}
}
&:checked~.indicator\:text {
&:after {
--content: 'On';
}
}
}
#dimming {
&:checked~.switch\:indicator {
.switch {
--offset: 14px;
--gradient: 1;
}
}
&:checked~.indicator\:text {
--content: 'Auto';
}
}
.indicator\:text {
margin-right: 15px;
font-size: 12px;
color: rgba(255, 255, 255, .6);
text-transform: uppercase;
position: relative;
text-align: right;
vertical-align: middle;
display: inline-block;
line-height: 100%;
margin-top: 2px;
--content: 'Off';
&.dimming {
font-size: 11px;
margin-top: 3px;
text-transform: capitalize;
}
&:after {
content: var(--content);
transition: all 200ms ease;
}
}
.after\:top {
margin-top: 25px;
align-items: center;
justify-content: space-between;
}
.text\:sector {
color: rgba(255, 255, 255, .6);
font-size: 12px;
line-height: 150%;
}
.input\:switch {
@extend .display\:flex;
align-items: center;
}
.range\:slide {
margin-top: 40px;
.grid\:slide {
display: grid;
grid-template-columns: auto 1fr auto;
grid-gap: 10px;
align-items: center;
}
.slider\:down {
color: rgba(255, 255, 255, .4);
}
input[type="range"] {
-webkit-appearance: none;
height: 6px;
border-radius: 4px;
position: relative;
&[value="100"] {
&:before {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}
&:before {
content: '';
position: absolute;
height: 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
width: var(--range);
background: var(--orange);
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
background: #fff;
box-shadow: -4px -4px 8px var(--light-shadow-2, transparent), 4px 4px 8px var(--shadow, transparent);
outline: none;
border: none;
cursor: pointer;
}
&:active:after {
opacity: 1;
}
&:after {
opacity: 0;
font-size: 12px;
content: attr(value);
position: absolute;
top: -40px;
border-radius: 20px;
background: #3B3B3B;
color: var(--text-color);
padding: 6px 15px;
left: calc(var(--range));
transform: translateX(calc(var(--range) * -1));
}
}
}
.color\:section,
.scene\:section {
margin-top: 20px;
}
.colors\:grid {
display: grid;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.color\:label {
width: 32px;
height: 32px;
border-radius: 50%;
@extend .center;
cursor: pointer;
border: 2px solid transparent;
svg {
display: none;
}
@media (hover: hover) {
&:hover {
filter: brightness(150%) saturate(150%);
}
}
&.no {
border: 1px solid rgba(255, 255, 255, .5);
svg {
display: block;
;
}
color: rgba(255, 255, 255, .5);
}
&.white {
background: #fff;
color: var(--bg-page);
}
&.orange {
background: var(--orange);
color: var(--bg-page);
}
&.black {
background: #353535;
}
&.blue {
background: #3A68FF;
}
&.cyan {
background: #36E0FF;
color: var(--bg-page);
}
&.purple {
background: #9120FF;
}
&.red {
background: #FF5252;
}
}
input[type="radio"].color\:sel {
&:checked {
&~label {
border: 2px solid #fff;
&.white {
border-color: #454545;
}
svg {
display: block;
;
}
}
}
}
.labels\:scene {
@extend .display\:flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.lbl {
font-variation-settings: 'wght'400;
color: rgba(255, 255, 255, .6);
letter-spacing: .1px;
padding: 8px 20px;
border-radius: 30px;
font-size: 11px;
background: #454545;
cursor: pointer;
}
.scene {
&:not(:checked) {
& ~ .lbl {
@media (hover: hover) {
&:hover {
filter: brightness(150%) saturate(150%);
}
}
}
}
}
.add {
margin-top: 2px;
width: 30px;
height: 30px;
border-radius: 50%;
color: rgba(255, 255, 255, .5);
@extend .center;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}
.scene {
&:checked {
& ~ .lbl {
background: #fff;
color: var(--bg-page);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment