add modal

2 years ago · 071986ff46
parent fc47b49cb3
commit 071986ff46
4 changed files with 107 additions and 1 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/index.html
+++ b/index.html
@ -32,7 +32,25 @@
  <meta name='twitter:image' content='https://blackscreen.app/images/icon-192x192.png'>
  <meta name='twitter:creator' content='@pyxeldev'>
  <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>
 <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>
 </html>
--- a/modal.js
+++ b/modal.js
@ -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');
+    });
+  });
+});
--- a/style.css
+++ b/style.css
@ -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 {
  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;
+}