<html>
<head>
<meta charset="utf-8">
<title>神经变形跷板</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0
}
:root {
--hue: 223;
--bg: hsl(var(--hue), 10%, 90%);
--fg: hsl(var(--hue), 10%, 10%);
--trans-dur: 0.3s;
--trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
font-size: calc(60px + (120 - 60) * (100vw - 280px) / (3840 - 280))
}
body, button {
font: 1em/1.5 "DM Sans", sans-serif
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
height: 100vh;
transition: background-color var(--trans-dur), color var(--trans-dur)
}
.switch {
display: flex;
margin: auto
}
.switch__button, .switch__label {
-webkit-tap-highlight-color: transparent
}
.switch__button {
background-color: transparent;
border-radius: 0.75em;
box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 50%, 0);
cursor: pointer;
outline: transparent;
width: 100%;
height: 100%;
-webkit-appearance: none;
appearance: none;
z-index: 1;
transition: box-shadow calc(var(--trans-dur) / 2)
}
.switch__button:focus-visible {
box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 50%, 1)
}
.switch__button, .switch__button-wrap {
display: block;
position: relative
}
.switch__button-wrap {
box-shadow: 0 0.0625em 0.0625em hsl(var(--hue), 10%, 65%) inset, 0 -0.0625em 0.0625em hsl(var(--hue), 10%, 87.5%) inset, 0 0.25em 0.25em hsl(var(--hue), 10%, 70%) inset;
border-radius: 0.75em;
width: 3.1875em;
height: 1.5em;
transition: box-shadow var(--trans-dur)
}
.switch__label {
overflow: hidden;
margin-inline-end: 0.75em;
position: absolute;
width: 1px;
height: 1px
}
.switch__inner, .switch__options, .switch__options:before, .switch__options:after, .switch__shadow {
position: absolute
}
.switch__inner, .switch__options {
background-color: hsl(var(--hue), 10%, 90%)
}
.switch__inner {
box-shadow: 0 -0.125em 0.25em hsl(var(--hue), 10%, 80%) inset;
border-radius: 0.5em;
display: block;
perspective: 20em;
inset: 0.25em;
transition: background-color var(--trans-dur), box-shadow var(--trans-dur)
}
.switch__options {
border-radius: inherit;
box-shadow: 0 0 1px white inset;
display: flex;
justify-content: space-around;
font-size: 0.5em;
line-height: 2;
width: 100%;
height: 100%;
transform: translateX(-0.125rem) rotateY(-15deg);
transition: background-color var(--trans-dur), box-shadow var(--trans-dur), transform var(--trans-dur) var(--trans-timing)
}
.switch__options:before, .switch__options:after {
content: "";
display: block;
top: 0;
width: 45%;
height: 100%;
transition: opacity var(--trans-dur) var(--trans-timing)
}
.switch__options:before {
border-radius: 0.5rem 0 0 0.5rem;
box-shadow: 0 1px 0.0625rem hsla(var(--hue), 10%, 10%, 0.7) inset, 0.125rem 0.25rem 0.25rem hsla(var(--hue), 10%, 10%, 0.3) inset;
mask-image: linear-gradient(-90deg, hsla(var(--hue), 10%, 90%, 0), hsl(var(--hue), 10%, 90%));
left: 0
}
.switch__options:after {
border-radius: 0 0.5rem 0.5rem 0;
box-shadow: 0 1px 0.0625rem hsla(var(--hue), 10%, 10%, 0.7) inset, -0.125rem 0.25rem 0.25rem hsla(var(--hue), 10%, 10%, 0.3) inset;
mask-image: linear-gradient(90deg, hsla(var(--hue), 10%, 90%, 0), hsl(var(--hue), 10%, 90%));
right: 0;
opacity: 0
}
.switch__option-label {
color: var(--fg);
font-weight: 500;
text-align: center;
width: 100%;
text-shadow: 0 -1px 0 hsl(var(--hue), 10%, 40%), 0 1px 0 white;
transition: color var(--trans-dur), text-shadow var(--trans-dur)
}
.switch__option-label:last-child {
color: hsl(var(--hue), 10%, 60%)
}
.switch__option-sep {
background-color: hsl(var(--hue), 10%, 75%);
box-shadow: 1px 0 0 white;
width: 1px;
min-width: 1px;
margin: auto 0;
height: 0.75rem;
transition: background-color var(--trans-dur), box-shadow var(--trans-dur)
}
.switch__shadow {
border-radius: 0.375em 0.875em 0.375em 0.375em/0.375em 0.625em 0.125em 0.375em;
box-shadow: 0 0 0 0.125em hsla(var(--hue), 10%, 10%, 0.7);
display: block;
top: 0.375em;
left: 0.375em;
width: 1.25em;
height: 0.75em;
transform: rotate(0);
transform-origin: 1em 0.375em;
transition: box-shadow var(--trans-dur) var(--trans-timing), transform var(--trans-dur) var(--trans-timing);
z-index: -1
}
.switch__shadow + .switch__shadow {
border-radius: 0.875em 0.375em 0.375em 0.375em/0.625em 0.375em 0.375em 0.125em;
box-shadow: 0 0 0.25em 0.125em hsla(var(--hue), 10%, 10%, 0.7);
right: 0.375em;
left: auto;
transform: rotate(7.5deg);
transform-origin: 0.5em 0.375em
}
.switch__button[aria-labelledby=f] .switch__options {
transform: translateX(0.125rem) rotateY(15deg)
}
.switch__button[aria-labelledby=f] .switch__options:before {
opacity: 0
}
.switch__button[aria-labelledby=f] .switch__options:after {
opacity: 1
}
.switch__button[aria-labelledby=f] .switch__option-label {
color: hsl(var(--hue), 10%, 60%)
}
.switch__button[aria-labelledby=f] .switch__option-label:last-child {
color: var(--fg)
}
.switch__button[aria-labelledby=f] .switch__shadow {
box-shadow: 0 0 0.25em 0.125em hsla(var(--hue), 10%, 10%, 0.7);
transform: rotate(-7.5deg)
}
.switch__button[aria-labelledby=f] .switch__shadow + .switch__shadow {
box-shadow: 0 0 0 0.125em hsla(var(--hue), 10%, 10%, 0.7);
transform: rotate(0)
}
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue), 10%, 30%);
--fg: hsl(var(--hue), 10%, 90%)
}
.switch__button {
box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 70%, 0)
}
.switch__button:focus-visible {
box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 70%, 1)
}
.switch__button-wrap {
box-shadow: 0 0.0625em 0.0625em hsl(var(--hue), 10%, 5%) inset, 0 -0.0625em 0.0625em hsl(var(--hue), 10%, 27.5%) inset, 0 0.25em 0.25em hsl(var(--hue), 10%, 20%) inset
}
.switch__inner, .switch__options {
background-color: hsl(var(--hue), 10%, 30%)
}
.switch__inner {
box-shadow: 0 -0.125em 0.25em hsl(var(--hue), 10%, 20%) inset
}
.switch__options {
box-shadow: 0 0 1px hsl(var(--hue), 10%, 50%) inset
}
.switch__option-label {
text-shadow: 0 -1px 0 hsl(var(--hue), 10%, 10%), 0 1px 0 hsl(var(--hue), 10%, 50%)
}
.switch__option-label:last-child {
color: hsl(var(--hue), 10%, 20%)
}
.switch__option-sep {
background-color: hsl(var(--hue), 10%, 20%);
box-shadow: 1px 0 0 hsl(var(--hue), 10%, 50%)
}
.switch__button[aria-labelledby=f] .switch__option-label {
color: hsl(var(--hue), 10%, 20%)
}
.switch__shadow .switch__button[aria-labelledby=f] .switch__shadow + .switch__shadow {
box-shadow: 0 0 0 0.125em hsla(var(--hue), 10%, 10%, 0.9)
}
.switch__shadow + .switch__shadow, .switch__button[aria-labelledby=f] .switch__shadow {
box-shadow: 0 0 0.25em 0.125em hsla(var(--hue), 10%, 10%, 0.9)
}
}
</style>
</head>
<body>
<div class="switch">
<label class="switch__label" for="temperature-scale">Temperature</label>
<button class="switch__button" type="button" id="temperature-scale" title="Temperature Scale"
aria-labelledby="f">
<span class="switch__button-wrap">
<span class="switch__shadow"></span>
<span class="switch__shadow"></span>
<span class="switch__inner">
<span class="switch__options">
<span id="c" class="switch__option-label" aria-hidden="true">°C</span>
<span class="switch__option-sep"></span>
<span id="f" class="switch__option-label" aria-hidden="true">°F</span>
</span>
</span>
</span>
</button>
</div>
</body>
<script>
"use strict";
window.addEventListener("DOMContentLoaded", () => {
const rockerSwitch = new RockerSwitch("#temperature-scale")
});
class RockerSwitch {
constructor(buttonEl) {
var _a;
this._temperatureScale = "f";
this.button = document.querySelector(buttonEl);
(_a = this.button) === null || _a === void 0 ? void 0 : _a.addEventListener("click", this.temperatureScaleToggle.bind(this))
}
get temperatureScale() {
return this._temperatureScale
}
set temperatureScale(value) {
var _a;
this._temperatureScale = value;
(_a = this.button) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-labelledby", this._temperatureScale)
}
temperatureScaleToggle() {
this.temperatureScale = this.temperatureScale === "c" ? "f" : "c"
}
}
</script>
</html>
