<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>wifi 蓝牙已连接</title>
<style>
.switch {
--switch-width: 80px;
--switch-height: calc(var(--switch-width) / 2);
--switch-border-radius: 999vw;
--switch-clr-border: rgba(255 255 255 / 0.25);
--switch-clr-bg: rgb(41 37 36);
--switch-clr-bg-on: green;
--switch-inset: 2px;
--switch-duration: 300ms;
--toggle-size: calc(var(--switch-height) - var(--switch-inset) * 3);
--toggle-gap: calc(var(--toggle-size) * 1.5);
--toggle-bg: #404040;
--toggle-bg-on: #f3f4f6;
--led-size: 8px;
--led-color-off: rgba(255 255 255 / 0.15);
--led-color-on: rgb(56, 189, 248);
--led-color-loading: rgb(234 179 8);
--led-duration: 3s;
--led-delay: 500ms;
--led-blur: 12px;
--led-blur-distance: -0.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
width: fit-content;
}
.switch label {
position: relative;
cursor: pointer;
overflow: hidden;
width: var(--switch-width);
height: var(--switch-height);
border-radius: var(--switch-border-radius);
border: 1px solid var(--switch-clr-border);
outline: 1px dashed transparent;
outline-offset: 4px;
color: var(--switch-clr-txt);
background-color: var(--switch-clr-bg);
isolation: isolate;
transition-property: background-color;
transition-duration: var(--switch-duration);
transition-timing-function: ease-in-out;
transition-delay: var(--switch-delay, 0ms);
}
.switch > .icon {
display: grid;
grid-template-areas: 'stack';
}
.switch > .icon > svg {
grid-area: stack;
scale: var(--icon-on, 0);
transition: scale 150ms ease-in-out var(--icon-delay, 0ms);
}
.switch > .icon > svg:last-of-type {
scale: var(--icon-off, 1);
}
.switch input[type='checkbox'] {
position: absolute;
pointer-events: none;
appearance: none;
border: none;
outline: none;
border-radius: inherit;
background-color: var(--toggle-bg);
top: var(--switch-inset);
left: var(--toggle-x, var(--switch-inset));
width: var(--toggle-size);
height: var(--toggle-size);
display: flex;
align-items: center;
justify-content: center;
gap: var(--toggle-gap);
transition-property: left, background-color;
transition-duration: var(--switch-duration);
transition-timing-function: ease-in-out;
}
.switch input[type='checkbox']::before,
.switch input[type='checkbox']::after {
position: relative;
color: white;
transition: scale var(--switch-duration);
}
.switch input[type='checkbox']::before {
content: attr(data-on);
scale: var(--label-scale-on, 0.75);
}
.switch input[type='checkbox']::after {
content: attr(data-off);
scale: var(--label-scale-off, 1);
}
.switch > .led {
position: relative;
width: var(--led-size);
height: var(--led-size);
display: block;
border: 1px solid rgba(255 255 255 / 0.25);
border-radius: 50%;
background-color: var(--led-color-off);
transition: background-color 50ms;
animation: var(--led-animation, '');
}
.switch > .led:before {
content: '';
position: absolute;
inset: var(--led-blur-distance);
z-index: -1;
border-radius: inherit;
filter: blur(var(--led-blur));
opacity: 0.75;
animation: var(--led-animation, '');
}
.switch:has(input[type='checkbox']:focus-visible) label {
outline-color: white;
}
.switch:has(input[type='checkbox']:checked) {
--switch-clr-bg: var(--switch-clr-bg-on);
--switch-delay: 250ms;
--toggle-x: calc(50% + var(--switch-inset));
--toggle-clr-bg: green;
--toggle-bg: var(--toggle-bg-on);
--led-animation: toggle var(--led-duration) linear forwards
var(--led-delay);
--icon-on: 1;
--icon-off: 0;
--icon-delay: 250ms;
--label-scale-off: 0.75;
--label-scale-on: 1;
}
@keyframes toggle {
0%,
10%,
20%,
30%,
40%,
50%,
60%,
70%,
80% {
background-color: var(--led-color-off);
}
5%,
15%,
25%,
35%,
45%,
55%,
65%,
75%,
85% {
background-color: var(--led-color-loading);
}
100% {
background-color: var(--led-color-on);
}
}
*,
::before,
::after {
box-sizing: border-box;
}
:root {
--clr-bg: #222;
--clr-primary: #f5f5f5;
--clr-secondary: #075985;
}
input {
margin: 0;
padding: 0;
}
html {
background-color: var(--clr-bg);
font-family: system-ui;
}
body {
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
color: var(--clr-primary);
padding: 1rem;
background-image: radial-gradient(
circle,
rgba(175, 208, 84, 0.25) 1px,
rgba(0, 0, 0, 0) 1px
);
background-size: 40px 40px;
}
h1 {
font-size: clamp(1rem, 2.5vw + 0.25rem, 1.2rem);
font-weight: 500;
line-height: 1.6;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
</head>
<body>
<div class="switch">
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 8l10 8l-5 4l0 -16l5 4l-10 8" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 3l18 18" />
<path
d="M16.438 16.45l-4.438 3.55v-8m0 -4v-4l5 4l-2.776 2.22m-2.222 1.779l-5 4"
/>
</svg>
</div>
<label for="toggle" aria-label="Toggle Filter">
<input type="checkbox" id="toggle" data-on="ON" data-off="OFF" />
</label>
<span class="led"></span>
</div>
<div class="switch">
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 18l.01 0" />
<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
<path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
<path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 18l.01 0" />
<path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
<path
d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2"
/>
<path
d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374"
/>
<path d="M3 3l18 18" />
</svg>
</div>
<label for="toggle-2" aria-label="Toggle Filter">
<input
type="checkbox"
id="toggle-2"
checked
data-on="YES"
data-off="NO"
/>
</label>
<span class="led"></span>
</div>
</body>
</html>