diff --git a/index.html b/index.html index 67d5576..0fc0ab8 100644 --- a/index.html +++ b/index.html @@ -52,6 +52,54 @@
+ +
+
\ No newline at end of file diff --git a/script.js b/script.js index 071cd37..b3143d8 100644 --- a/script.js +++ b/script.js @@ -6,6 +6,8 @@ const statusText = document.getElementById("status"); const newItemForm = document.getElementById("newItemForm"); const playerNew = document.getElementById("playerNew"); const initiativeNew = document.getElementById("initiativeNew"); +const modal = document.getElementById("modal"); +const overlay = document.getElementById("overlay"); let players = []; let turn = 0; @@ -46,6 +48,16 @@ $("#turnBtnMinus").click(function() { saveData(); }); +$("#modalBtnOpen").click(function(){ + overlay.classList.toggle('active'); + modal.classList.toggle('active'); +}); + +$("#modalBtnClose,#overlay").click(function(){ + overlay.classList.toggle('active'); + modal.classList.toggle('active'); +}); + //Event listener that activate when the drag element is over the list list.addEventListener('dragover', (e) => { e.preventDefault(); @@ -214,4 +226,4 @@ function saveNote() { const ind = players.findIndex(x => x.name == nameID); players[ind].note = text; saveData(); -}; +}; \ No newline at end of file diff --git a/style.css b/style.css index d9738d5..c59b4dc 100644 --- a/style.css +++ b/style.css @@ -10,6 +10,61 @@ body { align-items: center; } +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0); + transition: 200ms ease-in-out; + border: 1px solid #000; + background-color: #000; + border-radius: 10px; + z-index: 10; + min-width: 400px; + max-width: 60%; +} + +.modal.active { + transform: translate(-50%, -50%) scale(1); +} + +.modal-header { + padding: 10px 15px; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #FFFFFF; +} + +.modal-header .title { + font-size: 2rem; + font-weight: bold; +} + +.modal-header .close-button { + cursor: pointer; + border: none; + outline: none; + background: none; + font-size: 2rem; + font-weight: bold; + color: #FFFFFF; +} + +.modal-body { + padding: 10px 15px; + height: 60vh; + overflow-x: hidden; +} + +.modal-body h3 { + margin-bottom: 5px; +} +.modal-body p { + margin-top: 0; + padding-left: 15px; +} + .turn { display: flex; gap: 20px; @@ -132,4 +187,20 @@ input[type="checkbox"] { border: none; border-radius: 5px; resize: none; +} + +#overlay { + position: fixed; + opacity: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #000; + pointer-events: none; +} + +#overlay.active { + pointer-events: all; + opacity: 0.7; } \ No newline at end of file