diff options
| -rw-r--r-- | File-decryption/webapp/assets/css/style.css | 56 | ||||
| -rw-r--r-- | File-decryption/webapp/assets/js/main.js | 12 | ||||
| -rw-r--r-- | File-decryption/webapp/index.html | 2 |
3 files changed, 69 insertions, 1 deletions
diff --git a/File-decryption/webapp/assets/css/style.css b/File-decryption/webapp/assets/css/style.css index ca14480..372b1c0 100644 --- a/File-decryption/webapp/assets/css/style.css +++ b/File-decryption/webapp/assets/css/style.css @@ -32,6 +32,57 @@ header { background-color: rgb(10,10,10); } +/* media query for mobile devices */ +@media screen and (max-width: 712px) { + header h1{ + font-size: 1.5rem; + } +} + +footer { + padding: 1rem; + position: absolute; + display: flex; + align-items: center; + + /* put at the bottom of the page */ + bottom: 0; + width: 100%; + background-color: rgb(18, 18, 18); + color: rgb(185, 185, 185); +} + +@media screen and (max-width: 712px) { + footer { + flex-direction: column; + } +} + +footer p { + margin-right: 1rem; + width: 100% +} + +footer button { + padding: .75rem 0.5rem; + border-radius: 20px; + border: 3px solid rgb(53, 107, 62, 0); + outline-style: none; + + background-color: rgb(63, 13, 242); + color: white; + margin: 0.5rem; + text-align: center; + min-width: 8rem; + + font-family: 'IBM Plex sans', sans-serif; +} + +footer button:hover{ + background-color: rgb(98, 13, 255); + cursor: pointer; +} + input{ padding: 0.5rem; border-radius: 20px; @@ -193,6 +244,11 @@ input:checked + .slider:before { cursor: pointer; } +.upload-disabled{ + background-color: rgb(63, 13, 242, 0.5) !important; + cursor: not-allowed !important; +} + .file-btns .file-upload { margin-bottom: 1rem; } diff --git a/File-decryption/webapp/assets/js/main.js b/File-decryption/webapp/assets/js/main.js index cd1ccc5..e208e91 100644 --- a/File-decryption/webapp/assets/js/main.js +++ b/File-decryption/webapp/assets/js/main.js @@ -6,17 +6,29 @@ let decodedProtobuf = null; document.addEventListener("DOMContentLoaded", function () { // handle file uploads let fileInput = document.getElementById('file-upload'); + let fileInputLabel = document.getElementById('file-upload-label'); let fileDownloadBtn = document.getElementById('file-download'); let decryptToggle = document.getElementById('decrypt-toggle'); let serialForm = document.getElementById('serial-form'); var jsonRenderer = document.querySelector('.target'); var liveDecoder = document.getElementById('live-decoder'); + let acknowledgement = document.querySelector('.ethics-message-ack'); // Don't display the download button until a file is selected fileDownloadBtn.style.display = 'none'; serialForm.style.display = 'none'; liveDecoder.style.display = 'none'; + fileInput.disabled = true; + + // Etics message + acknowledgement.addEventListener('click', function () { + document.querySelector('.ethics-message').style.display = 'none'; + // Enable the file input + console.log(fileInput) + fileInput.disabled = false; + fileInputLabel.classList.remove('upload-disabled'); + }); fileInput.onchange = () => { const reader = new FileReader() diff --git a/File-decryption/webapp/index.html b/File-decryption/webapp/index.html index 98d5d57..97c0322 100644 --- a/File-decryption/webapp/index.html +++ b/File-decryption/webapp/index.html @@ -49,7 +49,7 @@ <hr/> <section class="file-btns"> - <label class="btn-cta file-input-label file-upload" id="file-input-label" for="file-upload"> + <label class="btn-cta file-input-label file-upload upload-disabled" id="file-upload-label" for="file-upload"> <i class="fa-solid fa-cloud-arrow-up pr-5"></i> <p>Choose File</p> </label> |