zuzannamj/slide-in-panel.html

## slide-in-panel.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide-In Panel Example</title>
<style>
  body { font-family: Arial, sans-serif; justify-content: center; align-items: center; height: 100vh; margin: 0; }
  .slide-in-panel { position: fixed; left: -300px; top: 50%; transform: translateY(-50%); width: 300px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: left 0.3s ease; padding: 20px; border-radius: 8px; border: 1px solid #888; }
  .slide-in-panel.open { left: 0; }
  .slide-in-panel p { margin: 0 0 20px; font-size: 16px; }
  .button, .trigger { background-color: #0070d2; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; }
  .button:hover, .trigger:hover { background-color: #005fb2; }
</style>
</head>
<body>

<button class="trigger">Open Panel</button>

<div class="slide-in-panel" id="slideInPanel">
  <p>Do you want to proceed?</p>
  <button class="button" onclick="handleResponse('yes')">Yes</button>
  <button class="button" onclick="handleResponse('no')">No</button>
</div>

<script>
  document.querySelector('.trigger').addEventListener('click', function() {
    document.getElementById('slideInPanel').classList.toggle('open');
  });

  function handleResponse(response) {
    alert('You selected: ' + response);
    document.getElementById('slideInPanel').classList.remove('open');
  }
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Slide-In Panel Example</title>
	<style>
	body { font-family: Arial, sans-serif; justify-content: center; align-items: center; height: 100vh; margin: 0; }
	.slide-in-panel { position: fixed; left: -300px; top: 50%; transform: translateY(-50%); width: 300px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: left 0.3s ease; padding: 20px; border-radius: 8px; border: 1px solid #888; }
	.slide-in-panel.open { left: 0; }
	.slide-in-panel p { margin: 0 0 20px; font-size: 16px; }
	.button, .trigger { background-color: #0070d2; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; }
	.button:hover, .trigger:hover { background-color: #005fb2; }
	</style>
	</head>
	<body>

	<button class="trigger">Open Panel</button>

	<div class="slide-in-panel" id="slideInPanel">
	<p>Do you want to proceed?</p>
	<button class="button" onclick="handleResponse('yes')">Yes</button>
	<button class="button" onclick="handleResponse('no')">No</button>
	</div>

	<script>
	document.querySelector('.trigger').addEventListener('click', function() {
	document.getElementById('slideInPanel').classList.toggle('open');
	});

	function handleResponse(response) {
	alert('You selected: ' + response);
	document.getElementById('slideInPanel').classList.remove('open');
	}
	</script>

	</body>
	</html>