Merge pull request #3 from dmose/seizure-warning

Seizure warning
cjcliffe · Nov 23, 2011 · 5c38b03 · 5c38b03
2 parents c12636c + cc7126e
commit 5c38b03
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 1 deletion.
diff --git a/css/no-comply-styles.css b/css/no-comply-styles.css
@@ -122,6 +122,26 @@ body{
   background:#000;
 }
 
+#seizure-warning {
+  font-size: 120%;
+  position: absolute;
+  text-align: center;
+  margin: auto;
+  width: 100%;
+  visibility: hidden;
+}
+
+.seizure-warning-continue {
+  font-size: 150%;
+  font-weight: bold;
+  visibility: hidden;
+}
+
+.seizure-warning-continue:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 audio{
   position:absolute;
   left:339px;

diff --git a/demo.html b/demo.html
@@ -52,8 +52,9 @@
   <script src="models/burst.data.timelines.json.lol.js"></script>
 
 	<script>
-  (function(window) {
+  var seizureWarningEnabled = true;
 
+  (function(window) {
     this.gfxData = { frameCounter: 0 };
     this.timerData = {
       timerMilliseconds: 0,
@@ -274,6 +275,9 @@
       intro.resize();
       postMessage('loaded');
       initialized = true;
+      if (seizureWarningEnabled) {
+        canvas.style.visibility = 'hidden';
+      }
 		}
 
     window.addEventListener('DOMContentLoaded', function() { init(); }, false);
@@ -532,6 +536,35 @@
       window.addEventListener('resize', center_div, false);
     </script>
 
+    <div id="seizure-warning">
+      <b>Warning:</b> The following demo contains flashing lights and patterns.<br />
+      Please consider this before viewing if you are sensitive to these visual effects.<br /><br />
+      <a class="seizure-warning-continue" id="seizure-warning-continue">CONTINUE</a>
+    </div>
+    <script type="text/javascript">
+    if (seizureWarningEnabled) {
+      function positionWarning(e) {
+        var warning = document.getElementById('seizure-warning');
+        var t = (window.innerHeight/2 - warning.offsetHeight/2) + "px";
+        warning.style.top = t;
+      }; //positionWarning
+      window.addEventListener('resize', positionWarning, false);
+
+      positionWarning();
+      document.getElementById('seizure-warning').style.visibility = 'visible';
+      setTimeout(function() {
+        document.getElementById('seizure-warning-continue').style.visibility = 'visible';
+      }, 2000);
+      function onWarningClick(e) {
+        var canvas = document.getElementById('cubicvr-canvas');
+        document.getElementById('seizure-warning').style.display = 'none';
+        document.getElementById('seizure-warning-continue').removeEventListener('click', onWarningClick,  false);
+        canvas.style.visibility = 'visible';
+        window.removeEventListener('resize', positionWarning, false);
+      } //onWarningClick
+      document.getElementById('seizure-warning-continue').addEventListener('click', onWarningClick, false);
+    }
+    </script>
 
   </body>
 </html>