)) |'ve 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. )) I've changed a little bit formatting of the code
This commit is contained in:
parent
4d0cb5f63c
commit
3bceb5a859
|
@ -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();
|
||||
});
|
|
@ -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>
|
||||
|
|
19
modal.js
19
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);
|
||||
|
|
12
style.css
12
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;
|
||||
}
|
Loading…
Reference in New Issue