diff options
| -rw-r--r-- | File-decryption/webapp/index.html | 11 | ||||
| -rw-r--r-- | File-decryption/webapp/main.js | 13 | ||||
| -rw-r--r-- | File-decryption/webapp/style.css | 50 |
3 files changed, 68 insertions, 6 deletions
diff --git a/File-decryption/webapp/index.html b/File-decryption/webapp/index.html index 0f05a7f..e322e0e 100644 --- a/File-decryption/webapp/index.html +++ b/File-decryption/webapp/index.html @@ -35,16 +35,19 @@ <div class="file-upload"> <h3 class="file-upload-title">Encrypted file:</h3> - <label class="file-input-label" id="file-input-label" for="file-input"> + <label class="file-input-label upload-disabled" id="file-input-label" for="file-input"> <i class="fa-solid fa-cloud-arrow-up pr-5"></i> <p>Choose File</p> </label> - <input class="file-input" id="file-input" type="file"> + <input class="file-input" id="file-input" type="file" disabled> </div> </div> - <footer> - Any misuse of this tool is at your own risk. We do no condone any illegal use of this tool as it is intended for educational purposes only. + <footer class="ethics-message"> + <p> + We do not condone any misuse or illegal use of this tool as it is intended for educational purposes only. Everything is computed locally using JS and no data is being stored or sent to any server at any time. + </p> + <button class="ethics-message-ack">I understand</button> </footer> </body> diff --git a/File-decryption/webapp/main.js b/File-decryption/webapp/main.js index 792eb3d..8169fb0 100644 --- a/File-decryption/webapp/main.js +++ b/File-decryption/webapp/main.js @@ -93,8 +93,19 @@ function processFileInput(e) { } document.addEventListener("DOMContentLoaded", function () { + let acknowledgement = document.querySelector('.ethics-message-ack'); + let fileInput = document.getElementById('file-input'); + let fileInputLabel = document.querySelector('.file-input-label'); + + // Etics message + acknowledgement.addEventListener('click', function () { + document.querySelector('.ethics-message').style.display = 'none'; + // Enable the file input + fileInput.disabled = false; + fileInputLabel.classList.remove('upload-disabled'); + }); + // handle file uploads - let fileInput = document.getElementById('file-input') fileInput.onchange = () => { const reader = new FileReader() reader.onload = processFileInput; diff --git a/File-decryption/webapp/style.css b/File-decryption/webapp/style.css index 33d3c22..7cf5e3b 100644 --- a/File-decryption/webapp/style.css +++ b/File-decryption/webapp/style.css @@ -19,6 +19,13 @@ 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; @@ -127,4 +134,45 @@ header .header-title{ .file-upload .file-input-label .fa-cloud-arrow-up{ margin-right: 0.5rem; -}
\ No newline at end of file +} + +.upload-disabled{ + background-color: rgb(63, 13, 242, 0.5) !important; + cursor: not-allowed !important; +} + +footer { + display: flex; + align-items: center; +} + +@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; + font-size: rem; + margin: 0.5rem; + text-align: center; + min-width: 6rem; +} + +footer button:hover{ + background-color: rgb(98, 13, 255); + cursor: pointer; +} + |