Merge branch 'develop' into 'main'

1.1.0

See merge request pyxeldev/blackscreen!3

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);
-  modalId.classList.add('open');
+  const modalId = document.getElementById(modal.dataset.modal);
+  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);

package.json

@@ -1,8 +1,12 @@
 {
   "name": "@pyxeldev/blackscreen",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Just a black web page",
   "author": "Kevin Py",
   "license": "MIT",
-  "keywords": ["black", "screen", "app"]
+  "keywords": [
+    "black",
+    "screen",
+    "app"
+  ]
 }

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;
+}