PeterWaIIace/toggle.html

## toggle.html

<!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>

	<!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>