Browse Source

Examples: Improved overlay.

Mr.doob 4 years ago
parent
commit
7d5453fb24
2 changed files with 20 additions and 17 deletions
  1. 7 3
      examples/main.css
  2. 13 14
      examples/webgl_postprocessing_glitch.html

+ 7 - 3
examples/main.css

@@ -51,6 +51,7 @@ a, button, input, select {
 
 #overlay {
 	position: absolute;
+	font-size: 16px;
 	z-index: 2;
 	top: 0;
 	left: 0;
@@ -59,14 +60,17 @@ a, button, input, select {
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	flex-direction: column;
 	background: rgba(0,0,0,0.7);
 }
 
 	#overlay button {
-		background: #ffffff;
+		background: transparent;
 		border: 0;
-		color: #000000;
-		padding: 16px 20px;
+		border: 1px solid rgb(255, 255, 255);
+		border-radius: 4px;
+		color: #ffffff;
+		padding: 12px 18px;
 		text-transform: uppercase;
 		cursor: pointer;
 	}

+ 13 - 14
examples/webgl_postprocessing_glitch.html

@@ -6,20 +6,16 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
-	<style>
-		#overlay {
-			flex-direction: column;
-		}
-	</style>
 	<body>
 
 		<div id="overlay">
-			<h3>Photosensitive Epilepsy Warning</h3>
-			<p class="warning">
-				This demo contains strong and frequent flashes which may trigger a potential <strong>Photosensitive Epilepsy.</strong>
+			<h2>WARNING</h2>
+			<p style="text-align: center; max-width:450px; margin-bottom:40px;">
+				This example may potentially trigger seizures for people with <strong>photosensitive epilepsy</strong>.
 			</p>
-			<button id="startButton">Play</button>
+			<button id="startButton">Okay</button>
 		</div>
+
 		<div id="info">
 			<label for="dotScreen">Glitch me wild:</label><input id="wildGlitch" type="checkbox"/><br />
 		</div>
@@ -37,11 +33,16 @@
 
 			let glitchPass;
 
-			const btn = document.querySelector('#startButton');
-			btn.addEventListener('click', function() {
+			const button = document.querySelector( '#startButton' );
+			button.addEventListener( 'click', function () {
+
+				const overlay = document.getElementById( 'overlay' );
+				overlay.remove();
+
 				init();
 				animate();
-			});
+
+			} );
 
 			function updateOptions() {
 
@@ -51,8 +52,6 @@
 			}
 
 			function init() {
-				const overlay = document.getElementById( 'overlay' );
-				overlay.remove();
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );