Merge branch 'main' into 'develop'

Added a fullscreen option via double-click anywhere on the page. Now the feather info icon is fading out after 3s, and it appears every time the user hovers it with the mouse.

See merge request pyxeldev/blackscreen!2

fullscreen.js

@@ -0,0 +1,30 @@
+function toggleFullScreen() {
+  const doc = window.document;
+  const docEl = doc.documentElement;
+
+  var requestFullScreen =
+    docEl.requestFullscreen ||
+    docEl.mozRequestFullScreen ||
+    docEl.webkitRequestFullScreen ||
+    docEl.msRequestFullscreen;
+  var cancelFullScreen =
+    doc.exitFullscreen ||
+    doc.mozCancelFullScreen ||
+    doc.webkitExitFullscreen ||
+    doc.msExitFullscreen;
+
+  if (
+    !doc.fullscreenElement &&
+    !doc.mozFullScreenElement &&
+    !doc.webkitFullscreenElement &&
+    !doc.msFullscreenElement
+  ) {
+    requestFullScreen.call(docEl);
+  } else {
+    cancelFullScreen.call(doc);
+  }
+}
+
+document.addEventListener("dblclick", () => {
+  toggleFullScreen();
+});

index.html

@@ -41,6 +41,7 @@
       <h2>Just a black web page</h2>
       <p>Created by <a href="https://kevinpy.com" target="_blank">Kevin Py</a> for <a href="https://pyxel.dev" target="_blank">Pyxel</a>.</p>
       <p>Find the repository on <a href="https://gitlab.com/pyxeldev/blackscreen" target="_blank">Gitlab</a>.</p>
+      <p>You can double-click anywhere on the page to cover your entire screen with black!</p>
       <p><a href="https://youtu.be/8H7mnObTScg" target="_blank">A 10 hours black screen video</a></p>
       <button class="modal-close modal-exit" autofocus>
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
@@ -48,8 +49,9 @@
     </div>
   </div>
   <div class="info" data-modal="modal-info">
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info feather-info-hover"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
   </div>
   <script src="./modal.js" async defer></script>
+  <script src="./fullscreen.js" async defer></script>
 </body>
 </html>

modal.js

@@ -1,15 +1,20 @@
-var modal = document.querySelector('[data-modal]');
+const modal = document.querySelector("[data-modal]");
 
-modal.addEventListener('click', function (event) {
+modal.addEventListener("click", function (event) {
   event.preventDefault();
-  var modalId = document.getElementById(modal.dataset.modal);
+  const modalId = document.getElementById(modal.dataset.modal);
-  modalId.classList.add('open');
+  modalId.classList.add("open");
 
-  var exits = modalId.querySelectorAll('.modal-exit');
+  var exits = modalId.querySelectorAll(".modal-exit");
   exits.forEach(function (exit) {
-    exit.addEventListener('click', function (event) {
+    exit.addEventListener("click", function (event) {
       event.preventDefault();
-      modalId.classList.remove('open');
+      modalId.classList.remove("open");
     });
   });
 });
+
+setTimeout(() => {
+  const featherInfo = document.getElementsByClassName("feather-info")[0];
+  featherInfo.classList.toggle("feather-info-hover");
+}, 3000);

style.css

@@ -73,3 +73,15 @@ html {
 .modal-container a {
   color: #fff;
 }
+
+.feather-info {
+  opacity: 0;
+  transition: opacity .5s ease-out;
+  -moz-transition: opacity .5s ease-out;
+  -webkit-transition: opacity .5s ease-out;
+  -o-transition: opacity .5s ease-out;
+}
+
+.feather-info-hover, .feather-info:hover {
+  opacity: 1;
+}