Created
December 16, 2023 14:38
-
-
Save PeterWaIIace/024f388c55fb9acf3ebecb546181f87e to your computer and use it in GitHub Desktop.
simple informational toggle
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Toggle Switch with Calibrators</title> | |
| <style> | |
| body { | |
| display: grid; | |
| place-content: center; | |
| height: 100vh; | |
| background-color: #fefefe; | |
| } | |
| label { | |
| pointer-events: none; | |
| display: grid; | |
| place-content: center; | |
| text-align: center; | |
| position: relative; | |
| z-index: 1; | |
| cursor: pointer; | |
| pointer-events: all; | |
| } | |
| .toggle-wrapper { | |
| position: relative; | |
| width: 120px; | |
| height: 60px; | |
| background-color: #eaeaea; | |
| border-radius: 999px; | |
| margin: auto; | |
| cursor: pointer; | |
| pointer-events: all; | |
| box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.12); | |
| transition: box-shadow 0.3s ease; | |
| } | |
| .selector { | |
| width: 40px; | |
| height: 40px; | |
| position: absolute; | |
| top: 50%; | |
| left: 10px; | |
| transform: translate(0,-50%); | |
| background-color: #ee5f39; | |
| transition: all 0.25s ease, background-color 0.3s ease; /* Added transition for background color */ | |
| border-radius: 50%; | |
| } | |
| .input{ | |
| opacity: 0; | |
| } | |
| .input:checked + .toggle-wrapper > .selector { | |
| background-color: #3957ee; /* Change color to blue when checked */ | |
| transform: translate(150%,-50%); | |
| } | |
| .notification { | |
| font-size: 20px; | |
| width: 100%; | |
| opacity: 1; | |
| transition: opacity 0.5s; | |
| } | |
| .calibrator-container { | |
| position: absolute; | |
| display: flex; | |
| justify-content: space-between; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 1; | |
| pointer-events: auto; | |
| transition: opacity 0.5s; | |
| } | |
| .calibrators-off { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .calibrator { | |
| position: absolute; | |
| width: 110px; | |
| height: 50px; | |
| background-color: yellow; | |
| border-radius: 25px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: #333; | |
| font-weight: bold; | |
| font-size: 10px; | |
| transition: background-color 0.3s; | |
| pointer-events: auto; | |
| } | |
| .message-top { | |
| top: 1vh; | |
| left: 50%; | |
| transform: translate(-50%, 0); | |
| } | |
| .message-bottom { | |
| top: 93vh; | |
| left: 50%; | |
| transform: translate(-50%, 0); | |
| } | |
| .message-left { | |
| top: 50vh; | |
| right: 0vh; | |
| transform: translate(0, -50%) rotate(-90deg); | |
| } | |
| .message-right { | |
| top: 50vh; | |
| left: 0vh; | |
| transform: translate(0, -50%) rotate(90deg); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <label for="toggle"> | |
| <input class="input" type="checkbox" id="toggle" onclick="toggleCalibrators()"> | |
| <div class="toggle-wrapper"> | |
| <span class="selector"></span> | |
| </div> | |
| </label> | |
| <div class="calibrator-container"> | |
| <div class="calibrator message-top">Move cursor here</div> | |
| <div class="calibrator message-bottom">Move cursor here</div> | |
| <div class="calibrator message-left">Move cursor here</div> | |
| <div class="calibrator message-right">Move cursor here</div> | |
| </div> | |
| </body> | |
| <script> | |
| function toggleCalibrators() { | |
| console.log("toggling") | |
| var calibrators = document.querySelector('.calibrator-container'); | |
| calibrators.classList.toggle('calibrators-off'); | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment