fuweichin/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container{
  width: 1280px;
  margin: 0 auto;
}
.page{
  font-size: 2rem;
}

.blankscreen{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  display: none;
  transition: opacity 0.3s ease-out;
}
.blankscreen.open {
  opacity: 1;
}
#blackscreen{
  background-color: #000000;
}
#whitescreen{
  background-color: #ffffff;
}
</style>
</head>
<body>
<div class="container">
  <div class="page">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Quia voluptatum consequatur ipsam reiciendis? At iste expedita qui amet, adipisci veniam cumque eaque nesciunt facilis ex. Officiis accusamus iure sint reprehenderit.</p>
    <p>Nam voluptates vel voluptatum voluptate nobis ab sit. Optio vel distinctio dolore provident, ipsum beatae architecto dolor commodi error ducimus earum itaque?</p>
    <p>Mollitia debitis vel cumque a harum quam esse distinctio ipsum, excepturi facere aliquid deserunt obcaecati reprehenderit, sunt praesentium quos velit minima officiis?</p>
  </div>
  <small style="color: #777777">Tips: press "W" or "B" to enter blackscreen or whitescreen</small>
</div>

<div class="blankscreen" id="blackscreen"></div>
<div class="blankscreen" id="whitescreen"></div>

<script type="module">
let $ = (s, c = document) => c.querySelector(s);
let showAndFadeIn = (el) => {
  return new Promise((resolve) => {
    el.style.display = 'block';
    let handler = (e) => {
      if (e.propertyName === 'opacity') {
        el.removeEventListener('transitionend', handler);
        resolve();
      }
    };
    requestAnimationFrame(() => {
      el.addEventListener('transitionend', handler);
      el.classList.add('open');
    });
  });
};
let fadeOutAndHide = (el) => {
  return new Promise((resolve) => {
    let handler = (e) => {
      if (e.propertyName === 'opacity') {
        el.removeEventListener('transitionend', handler);
        el.style.display = 'none';
        resolve();
      }
    };
    el.addEventListener('transitionend', handler);
    el.classList.remove('open');
  });
};

function main() {
  let blackscreen = $('#blackscreen');
  let whitescreen = $('#whitescreen');
  window.addEventListener('keypress', (e) => {
    let modifierKeys = e.ctrlKey || e.shiftKey || e.metaKey || e.altKey;
    if (!modifierKeys) {
      if (e.key === 'b') {
        if (blackscreen.classList.contains('open')) {
          fadeOutAndHide(blackscreen);
        } else if (whitescreen.classList.contains('open')) {
          fadeOutAndHide(whitescreen);
        } else {
          showAndFadeIn(blackscreen);
        }
      } else if (e.key === 'w') {
        if (blackscreen.classList.contains('open')) {
          fadeOutAndHide(blackscreen);
        } else if (whitescreen.classList.contains('open')) {
          fadeOutAndHide(whitescreen);
        } else {
          showAndFadeIn(whitescreen);
        }
      }
    }
  });
}
document.addEventListener('DOMContentLoaded', main);
</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>Document</title>
	<style>
	.container{
	width: 1280px;
	margin: 0 auto;
	}
	.page{
	font-size: 2rem;
	}

	.blankscreen{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 100vw;
	height: 100vh;
	opacity: 0;
	display: none;
	transition: opacity 0.3s ease-out;
	}
	.blankscreen.open {
	opacity: 1;
	}
	#blackscreen{
	background-color: #000000;
	}
	#whitescreen{
	background-color: #ffffff;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="page">
	<h1>Lorem ipsum dolor sit amet</h1>
	<p>Quia voluptatum consequatur ipsam reiciendis? At iste expedita qui amet, adipisci veniam cumque eaque nesciunt facilis ex. Officiis accusamus iure sint reprehenderit.</p>
	<p>Nam voluptates vel voluptatum voluptate nobis ab sit. Optio vel distinctio dolore provident, ipsum beatae architecto dolor commodi error ducimus earum itaque?</p>
	<p>Mollitia debitis vel cumque a harum quam esse distinctio ipsum, excepturi facere aliquid deserunt obcaecati reprehenderit, sunt praesentium quos velit minima officiis?</p>
	</div>
	<small style="color: #777777">Tips: press "W" or "B" to enter blackscreen or whitescreen</small>
	</div>

	<div class="blankscreen" id="blackscreen"></div>
	<div class="blankscreen" id="whitescreen"></div>

	<script type="module">
	let $ = (s, c = document) => c.querySelector(s);
	let showAndFadeIn = (el) => {
	return new Promise((resolve) => {
	el.style.display = 'block';
	let handler = (e) => {
	if (e.propertyName === 'opacity') {
	el.removeEventListener('transitionend', handler);
	resolve();
	}
	};
	requestAnimationFrame(() => {
	el.addEventListener('transitionend', handler);
	el.classList.add('open');
	});
	});
	};
	let fadeOutAndHide = (el) => {
	return new Promise((resolve) => {
	let handler = (e) => {
	if (e.propertyName === 'opacity') {
	el.removeEventListener('transitionend', handler);
	el.style.display = 'none';
	resolve();
	}
	};
	el.addEventListener('transitionend', handler);
	el.classList.remove('open');
	});
	};

	function main() {
	let blackscreen = $('#blackscreen');
	let whitescreen = $('#whitescreen');
	window.addEventListener('keypress', (e) => {
	let modifierKeys = e.ctrlKey \|\| e.shiftKey \|\| e.metaKey \|\| e.altKey;
	if (!modifierKeys) {
	if (e.key === 'b') {
	if (blackscreen.classList.contains('open')) {
	fadeOutAndHide(blackscreen);
	} else if (whitescreen.classList.contains('open')) {
	fadeOutAndHide(whitescreen);
	} else {
	showAndFadeIn(blackscreen);
	}
	} else if (e.key === 'w') {
	if (blackscreen.classList.contains('open')) {
	fadeOutAndHide(blackscreen);
	} else if (whitescreen.classList.contains('open')) {
	fadeOutAndHide(whitescreen);
	} else {
	showAndFadeIn(whitescreen);
	}
	}
	}
	});
	}
	document.addEventListener('DOMContentLoaded', main);
	</script>
	</body>
	</html>