From 1b7e22470add6073af6b3121fb8423515d883297 Mon Sep 17 00:00:00 2001
From: RaffaelW <rfflwlf@gmail.com>
Date: Thu, 24 Oct 2024 23:16:36 +0200
Subject: [PATCH] added switch between input and output

---
 data/index.html | 21 ++++++++++++++++++++
 data/style.css  | 53 +++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/data/index.html b/data/index.html
index beb02ae..14d1d50 100644
--- a/data/index.html
+++ b/data/index.html
@@ -74,6 +74,16 @@
 
             <fieldset>
                 <legend>Input/Output 1</legend>
+                <label class="switch">
+                    <span>Output</span>
+                    <input
+                        type="checkbox"
+                        name="input-or-output-1"
+                        id="input-input-or-output-1"
+                    />
+                    <span class="slider"></span>
+                    <span>Input</span>
+                </label>
 
                 <input
                     type="number"
@@ -88,6 +98,17 @@
             <fieldset>
                 <legend>Input/Output 2</legend>
 
+                <label class="switch">
+                    <span>Output</span>
+                    <input
+                        type="checkbox"
+                        name="input-or-output-2"
+                        id="input-input-or-output-2"
+                    />
+                    <span class="slider"></span>
+                    <span>Input</span>
+                </label>
+
                 <input
                     type="number"
                     name="universe-2"
diff --git a/data/style.css b/data/style.css
index 52f8086..e5bbec7 100644
--- a/data/style.css
+++ b/data/style.css
@@ -44,11 +44,60 @@ button {
     padding: 8px 16px;
 }
 
-:is(div:has(:is(input, select)), input, select)
-    + :is(div:has(:is(input, select)), input, select) {
+:is(div:has(:is(input, select)), input, select, label)
+    + :is(div:has(:is(input, select)), input, select, label) {
     margin-top: 8px;
 }
 
 .hidden {
     display: none;
 }
+
+label.switch {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+label.switch input {
+    display: none;
+}
+
+label.switch .slider {
+    display: inline-block;
+    position: relative;
+    height: 1em;
+    width: 2em;
+    background-color: #444;
+    border-radius: 1em;
+    border: 4px solid #444;
+}
+
+label.switch .slider::before {
+    content: "";
+    position: absolute;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+    top: 50%;
+    background-color: white;
+    transition: all 0.1s linear;
+}
+
+label.switch:active .slider::before {
+    transform: scale(1.3);
+    transform-origin: 50% 50%;
+}
+
+label.switch input:not(:checked) + .slider::before {
+    left: 0%;
+    translate: 0 -50%;
+}
+
+label.switch input:checked + .slider::before {
+    left: 100%;
+    translate: -100% -50%;
+}