Kcko · September 17, 2025 11:48
diff --git a/index.html b/index.html
 <!--
 https://jsbin.com/tuticinojo/1/edit?html,css,output
 -->

 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pure CSS Interactions Demo</title>
    <style>
      body {
        font-family: sans-serif;
        padding: 2rem;
        background: #f9fafb;
        color: #111;
        line-height: 1.5;
      }

      h2 {
        margin-top: 2rem;
        border-bottom: 2px solid #eee;
        padding-bottom: 0.5rem;
      }

      /* === ACCESSIBLE FOCUS STYLE === */
      button,
      .menu-btn,
      .open-modal,
      .close,
      .accordion label {
        outline: none;
      }
      button:focus,
      .menu-btn:focus,
      .open-modal:focus,
      .close:focus,
      .accordion label:focus {
        outline: 2px solid #2563eb;
        outline-offset: 3px;
      }

      /* === TOGGLE SWITCH === */
      .switch {
        display: inline-block;
        position: relative;
        width: 50px;
        height: 25px;
      }

      .switch input {
        display: none;
      }

      .slider {
        background: #ccc;
        border-radius: 25px;
        position: absolute;
        inset: 0;
        cursor: pointer;
        transition: 0.3s;
      }

      .slider::after {
        content: "";
        width: 21px;
        height: 21px;
        background: white;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        left: 2px;
        transition: 0.3s;
      }

      .switch input:checked + .slider {
        background: #4ade80;
      }

      .switch input:checked + .slider::after {
        transform: translateX(25px);
      }

      /* === DROPDOWN MENU === */
      .menu-btn {
        display: inline-block;
        margin-top: 1rem;
        cursor: pointer;
        padding: 0.5rem 1rem;
        background: #111;
        color: white;
        border-radius: 5px;
      }

      #menu-toggle {
        display: none;
      }

      .menu {
        margin-top: 0.5rem;
        background: white;
        border: 1px solid #ddd;
        padding: 0.5rem;
        border-radius: 5px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }

      #menu-toggle:checked + .menu {
        max-height: 300px; /* enough space */
      }

      /* === MODAL === */
      .open-modal {
        display: inline-block;
        margin-top: 1rem;
        cursor: pointer;
        padding: 0.5rem 1rem;
        background: #2563eb;
        color: white;
        border-radius: 5px;
      }

      #modal-toggle {
        display: none;
      }

      .modal {
        position: fixed;
        inset: 0;
        display: none;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.6);
      }

      #modal-toggle:checked + .modal {
        display: flex;
      }

      .modal-content {
        background: white;
        padding: 2rem;
        border-radius: 10px;
        position: relative;
        max-width: 300px;
        text-align: center;
      }

      .close {
        display: inline-block;
        margin-top: 1rem;
        cursor: pointer;
        padding: 0.5rem 1rem;
        background: #ef4444;
        color: white;
        border-radius: 5px;
      }

      /* === ACCORDION === */
      .accordion label {
        display: block;
        cursor: pointer;
        padding: 0.5rem;
        background: #f3f4f6;
        margin-top: 0.5rem;
        border-radius: 5px;
      }

      .accordion input {
        display: none;
      }

      .accordion .content {
        max-height: 0;
        overflow: hidden;
        padding: 0 0.5rem;
        background: white;
        border: 1px solid #ddd;
        border-radius: 5px;
        transition: max-height 0.3s ease;
      }

      .accordion input:checked + label + .content {
        max-height: 200px;
        padding: 0.5rem;
      }
    </style>
  </head>
  <body>
    <h1>Pure CSS Interactions Demo</h1>

    <h2>1. Toggle Switch</h2>
    <label class="switch">
      <input type="checkbox" aria-label="Toggle setting" />
      <span class="slider"></span>
    </label>

    <h2>2. Dropdown Menu</h2>
    <label for="menu-toggle" class="menu-btn" role="button" aria-expanded="false" aria-controls="menu">Menu</label>
    <input type="checkbox" id="menu-toggle" />
    <ul id="menu" class="menu">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>

    <h2>3. Modal</h2>
    <label for="modal-toggle" class="open-modal" role="button">Open Modal</label>
    <input type="checkbox" id="modal-toggle" />
    <!-- modal closes when background clicked -->
    <label for="modal-toggle" class="modal">
      <div class="modal-content" role="dialog" aria-modal="true">
        <h3>Hello</h3>
        <p>This modal works without JS.</p>
        <label for="modal-toggle" class="close" role="button">Close</label>
      </div>
    </label>

    <h2>4. Accordion</h2>
    <div class="accordion">
      <input type="checkbox" id="q1" />
      <label for="q1" aria-controls="a1" aria-expanded="false">Question 1</label>
      <div class="content" id="a1">Answer to question 1.</div>

      <input type="checkbox" id="q2" />
      <label for="q2" aria-controls="a2" aria-expanded="false">Question 2</label>
      <div class="content" id="a2">Answer to question 2.</div>
    </div>
  </body>
 </html>
	<!--
	https://jsbin.com/tuticinojo/1/edit?html,css,output
	-->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Pure CSS Interactions Demo</title>
	<style>
	body {
	font-family: sans-serif;
	padding: 2rem;
	background: #f9fafb;
	color: #111;
	line-height: 1.5;
	}

	h2 {
	margin-top: 2rem;
	border-bottom: 2px solid #eee;
	padding-bottom: 0.5rem;
	}

	/* === ACCESSIBLE FOCUS STYLE === */
	button,
	.menu-btn,
	.open-modal,
	.close,
	.accordion label {
	outline: none;
	}
	button:focus,
	.menu-btn:focus,
	.open-modal:focus,
	.close:focus,
	.accordion label:focus {
	outline: 2px solid #2563eb;
	outline-offset: 3px;
	}

	/* === TOGGLE SWITCH === */
	.switch {
	display: inline-block;
	position: relative;
	width: 50px;
	height: 25px;
	}

	.switch input {
	display: none;
	}

	.slider {
	background: #ccc;
	border-radius: 25px;
	position: absolute;
	inset: 0;
	cursor: pointer;
	transition: 0.3s;
	}

	.slider::after {
	content: "";
	width: 21px;
	height: 21px;
	background: white;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: 0.3s;
	}

	.switch input:checked + .slider {
	background: #4ade80;
	}

	.switch input:checked + .slider::after {
	transform: translateX(25px);
	}

	/* === DROPDOWN MENU === */
	.menu-btn {
	display: inline-block;
	margin-top: 1rem;
	cursor: pointer;
	padding: 0.5rem 1rem;
	background: #111;
	color: white;
	border-radius: 5px;
	}

	#menu-toggle {
	display: none;
	}

	.menu {
	margin-top: 0.5rem;
	background: white;
	border: 1px solid #ddd;
	padding: 0.5rem;
	border-radius: 5px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	}

	#menu-toggle:checked + .menu {
	max-height: 300px; /* enough space */
	}

	/* === MODAL === */
	.open-modal {
	display: inline-block;
	margin-top: 1rem;
	cursor: pointer;
	padding: 0.5rem 1rem;
	background: #2563eb;
	color: white;
	border-radius: 5px;
	}

	#modal-toggle {
	display: none;
	}

	.modal {
	position: fixed;
	inset: 0;
	display: none;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.6);
	}

	#modal-toggle:checked + .modal {
	display: flex;
	}

	.modal-content {
	background: white;
	padding: 2rem;
	border-radius: 10px;
	position: relative;
	max-width: 300px;
	text-align: center;
	}

	.close {
	display: inline-block;
	margin-top: 1rem;
	cursor: pointer;
	padding: 0.5rem 1rem;
	background: #ef4444;
	color: white;
	border-radius: 5px;
	}

	/* === ACCORDION === */
	.accordion label {
	display: block;
	cursor: pointer;
	padding: 0.5rem;
	background: #f3f4f6;
	margin-top: 0.5rem;
	border-radius: 5px;
	}

	.accordion input {
	display: none;
	}

	.accordion .content {
	max-height: 0;
	overflow: hidden;
	padding: 0 0.5rem;
	background: white;
	border: 1px solid #ddd;
	border-radius: 5px;
	transition: max-height 0.3s ease;
	}

	.accordion input:checked + label + .content {
	max-height: 200px;
	padding: 0.5rem;
	}
	</style>
	</head>
	<body>
	<h1>Pure CSS Interactions Demo</h1>

	<h2>1. Toggle Switch</h2>
	<label class="switch">
	<input type="checkbox" aria-label="Toggle setting" />
	<span class="slider"></span>
	</label>

	<h2>2. Dropdown Menu</h2>
	<label for="menu-toggle" class="menu-btn" role="button" aria-expanded="false" aria-controls="menu">Menu</label>
	<input type="checkbox" id="menu-toggle" />
	<ul id="menu" class="menu">
	<li>Home</li>
	<li>About</li>
	<li>Contact</li>
	</ul>

	<h2>3. Modal</h2>
	<label for="modal-toggle" class="open-modal" role="button">Open Modal</label>
	<input type="checkbox" id="modal-toggle" />
	<!-- modal closes when background clicked -->
	<label for="modal-toggle" class="modal">
	<div class="modal-content" role="dialog" aria-modal="true">
	<h3>Hello</h3>
	<p>This modal works without JS.</p>
	<label for="modal-toggle" class="close" role="button">Close</label>
	</div>
	</label>

	<h2>4. Accordion</h2>
	<div class="accordion">
	<input type="checkbox" id="q1" />
	<label for="q1" aria-controls="a1" aria-expanded="false">Question 1</label>
	<div class="content" id="a1">Answer to question 1.</div>

	<input type="checkbox" id="q2" />
	<label for="q2" aria-controls="a2" aria-expanded="false">Question 2</label>
	<div class="content" id="a2">Answer to question 2.</div>
	</div>
	</body>
	</html>