" + message + ""; - - // Show the toast - toast.classList.add("show"); - - // Hide the toast after specified time - setTimeout(() => { - toast.classList.remove("show"); - }, duration); -} - -window.addEventListener("load", (event) => { - document.getElementById('cards-input').addEventListener('change', function(event) { - const file = event.target.files[0]; - if (!file) return; - - const reader = new FileReader(); - reader.onload = function(e) { - try { - const content = e.target.result; - loadCards(JSON.parse(content)); - } catch (e) { - reportException(e); - } - }; - - reader.onerror = function(error) { - document.getElementById('result').textContent = "Error reading file: " + error; - reportException(error); - }; - - reader.readAsText(file); // Read the file as text - }); - - document.getElementById('flashcard').addEventListener('click', function(event) { - flipCard(); - }); -}); - -window.addEventListener('keydown', (event) => { - if (event.code === 'Space') { - flipCard(); - } else if (event.code === 'Digit1' || event.code === "Numpad1") { - rateCard('forgot'); - } else if (event.code === 'Digit2' || event.code === "Numpad2") { - rateCard('easy'); - } else if (event.code === 'Digit3' || event.code === "Numpad3") { - rateCard('good'); - } else if (event.code === 'Digit4' || event.code === "Numpad4") { - rateCard('hard'); - } else if (event.code === 'KeyQ') { - endReview(); - } -}); diff --git a/srs-anywhere.html b/srs-anywhere.html new file mode 100644 index 0000000..220d54f --- /dev/null +++ b/srs-anywhere.html @@ -0,0 +1,76 @@ + + + + + +
" + message + ""; + + // Show the toast + toast.classList.add("show"); + + // Hide the toast after specified time + setTimeout(() => { + toast.classList.remove("show"); + }, duration); +} + +window.addEventListener("load", (event) => { + document.getElementById('cards-input').addEventListener('change', function(event) { + const file = event.target.files[0]; + if (!file) return; + + const reader = new FileReader(); + reader.onload = function(e) { + try { + const content = e.target.result; + loadCards(JSON.parse(content)); + } catch (e) { + reportException(e); + } + }; + + reader.onerror = function(error) { + document.getElementById('result').textContent = "Error reading file: " + error; + reportException(error); + }; + + reader.readAsText(file); // Read the file as text + }); + + document.getElementById('flashcard').addEventListener('click', function(event) { + flipCard(); + }); + + const modal = document.getElementById('modal'); + const openBtn = document.getElementById('open-modal'); + const closeBtn = document.getElementById('close-modal'); + + // Show the modal when "Open Modal" is clicked + openBtn.addEventListener('click', () => { + modal.style.display = 'block'; + }); + + // Hide the modal when "OK" is clicked + closeBtn.addEventListener('click', () => { + modal.style.display = 'none'; + }); +}); + +window.addEventListener('keydown', (event) => { + if (event.code === 'Space') { + flipCard(); + } else if (event.code === 'Digit1' || event.code === "Numpad1") { + rateCard('forgot'); + } else if (event.code === 'Digit2' || event.code === "Numpad2") { + rateCard('easy'); + } else if (event.code === 'Digit3' || event.code === "Numpad3") { + rateCard('good'); + } else if (event.code === 'Digit4' || event.code === "Numpad4") { + rateCard('hard'); + } else if (event.code === 'KeyQ') { + endReview(); + } +}); diff --git a/style.css b/style.css index 6c77a0c..54f548b 100644 --- a/style.css +++ b/style.css @@ -79,3 +79,59 @@ body { filter: drop-shadow(2px 2px 5px gray); box-shadow: 2px 2px 5px gray; } + +/* Modal Background (Overlay) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1000; /* Sit on top */ + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ +} + +/* Modal Content Box */ +.modal-content { + background-color: #fff; + margin: 2rem auto; + padding: 20px; + border: 1px solid #888; + width: 50%; + text-align: center; + border-radius: 8px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); +} + +/* OK Button Style */ +.ok-button { + margin-top: 10px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border: none; + border-radius: 5px; + background-color: #007bff; + color: white; + transition: background-color 0.3s ease; +} + +.ok-button:hover { + background-color: #0056b3; +} + +table { + width: 100%; + border-collapse: collapse; + font-family: Arial, sans-serif; +} +th, td { + border: 1px solid #ccc; + padding: 10px; + text-align: left; +} +th { + background-color: #f4f4f4; +} -- cgit v1.3