shruub
/
blackscreen-no-tracking
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add modal

Browse Source
merge-requests/1/head
Kevin 2 years ago committed by Kevin Py
parent fc47b49cb3
commit 071986ff46
4 changed files with 107 additions and 1 deletions
Show Stats Download Patch File Download Diff File

BIN
.DS_Store vendored
View File

Binary file not shown.

18
index.html
Unescape Escape View File

@ -32,7 +32,25 @@
<meta name='twitter:image' content='https://blackscreen.app/images/icon-192x192.png'> <meta name='twitter:image' content='https://blackscreen.app/images/icon-192x192.png'>
<meta name='twitter:creator' content='@pyxeldev'> <meta name='twitter:creator' content='@pyxeldev'>
<script id="myownstats" data-mos-id="blackscreen" src="https://myownstats.com/tag.js" async defer></script> <script id="myownstats" data-mos-id="blackscreen" src="https://myownstats.com/tag.js" async defer></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8241284654733649"
crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<div class="modal" id="modal-info">
<div class="modal-bg modal-exit"></div>
<div class="modal-container">
<h1>Black Screen</h1>
<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>
<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>
</button>
</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>
</div>
<script src="./modal.js" async defer></script>
</body> </body>
</html> </html>

16
modal.js
Unescape Escape View File

@ -0,0 +1,16 @@
var modal = document.querySelector('[data-modal]');
modal.addEventListener('click', function (event) {
event.preventDefault();
var modalId = document.getElementById(modal.dataset.modal);
modalId.classList.add('open');
var exits = modalId.querySelectorAll('.modal-exit');
console.log(exits)
exits.forEach(function (exit) {
exit.addEventListener('click', function (event) {
event.preventDefault();
modalId.classList.remove('open');
});
});
});

72
style.css
Unescape Escape View File

@ -1,3 +1,75 @@
/*! reset.css v1.1.0 | MIT License | github.com/pyxel-dev/reset-css */html,body,blockquote,button,dd,dl,dt,figure,fieldset,h1,h2,h3,h4,h5,h6,hr,iframe,input,legend,li,ol,p,pre,select,textarea,ul{margin:0;padding:0}*,*::before,*::after{box-sizing:border-box}body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", "Helvetica Neue", sans-serif}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:normal}img{border-style:none}img,video{height:auto;max-width:100%}iframe{border:0}label{display:inline-block}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}ul{list-style:none}
html { html {
background-color: #000000; background-color: #000000;
} }
.info {
position: absolute;
bottom: 1rem;
right: 1rem;
cursor: pointer;
padding: .5rem;
}
.modal {
position: fixed;
width: 100vw;
height: 100vh;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.modal.open {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
.modal-bg {
position: absolute;
background: none;
width: 100%;
height: 100%;
}
.modal-container {
border-radius: .5rem;
background: #888;
position: relative;
padding: 2rem;
}
.modal-close {
position: absolute;
right: .5rem;
top: .5rem;
outline: none;
appearance: none;
background: none;
border: none;
cursor: pointer;
}
.modal-container h1 {
font-size: 2rem;
font-weight: bold;
margin-bottom: .5rem;
}
.modal-container h2 {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 2rem;
}
.modal-container a {
color: #fff;
}

Write Preview
Loading…
Cancel
Save