3 files changed, 186 insertions, 1 deletions
diff --git a/File-decryption/webapp/assets/js/file-processing.js b/File-decryption/webapp/assets/js/file-processing.js
index d642a92..78e8b1e 100644
--- a/File-decryption/webapp/assets/js/file-processing.js
+++ b/File-decryption/webapp/assets/js/file-processing.js
@@ -101,4 +101,4 @@ function processFileDecode(clearText) {
             }
         })
     }
-}
-\ No newline at end of file
+}
diff --git a/File-decryption/webapp/index.html b/File-decryption/webapp/index.html
index 8f63e74..98d5d57 100644
--- a/File-decryption/webapp/index.html
+++ b/File-decryption/webapp/index.html
@@ -76,6 +76,13 @@
             </section>
         </div>
     </div>
+
+    <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>
 
 </html>
 \ No newline at end of file
diff --git a/File-decryption/webapp/style.css b/File-decryption/webapp/style.css
new file mode 100644
index 0000000..425f25d
--- /dev/null
+++ b/File-decryption/webapp/style.css
@@ -0,0 +1,178 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  
+body {
+    background: #232323;
+    color: #fff;
+    font-family: 'IBM Plex sans', sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+header {
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    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;
+
+    /* put at the bottom of the page */
+    bottom: 0;
+    width: 100%;
+    background-color: rgb(18, 18, 18);
+    color: rgb(185, 185, 185);
+
+}
+
+input{
+    padding: 0.5rem;
+    border-radius: 20px;
+    border: 3px solid rgb(53, 107, 62, 0);
+    outline-style: none;
+    
+    background-color: rgb(18, 18, 18);
+    color: rgb(185, 185, 185);
+    font-size: 1rem;
+    margin: 0.5rem;
+    text-align: center;
+}
+
+input:focus-visible{
+    border: 3px solid rgb(53, 107, 62);
+}
+
+header .header-logo{
+    width: 4rem;
+    margin-right: 1rem;
+}
+
+header .header-title{
+    font-weight: 200;
+}
+
+.content {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+
+    /* Vertical align in page */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    /* Center in page */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.serial-input{
+    margin-bottom: 3rem;
+}
+
+.serial-input p{
+    color: rgb(185, 185, 185);
+}
+
+.serial-input p {
+    margin-bottom: 1rem;
+}
+
+.file-upload {
+    width: 100%;
+}
+
+.file-upload .file-input-title {
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(18, 18, 18);
+    height: 3rem;
+    width: 100%;
+}
+
+.file-upload .file-input {
+    display: none;
+}
+
+.file-upload .file-upload-title{
+    margin-bottom: 1rem;
+}
+
+.file-upload .file-input-label {
+    display: flex;
+    border-radius: 1rem;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(63, 13, 242);
+    height: 3rem;
+    width: 100%;
+}
+
+.file-upload .file-input-label:hover{
+    background-color: rgb(98, 13, 255);
+    cursor: pointer;
+}
+
+.file-upload .file-input-label .fa-cloud-arrow-up{
+    margin-right: 0.5rem;
+}
+
+.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;
+    margin: 0.5rem;
+    text-align: center;
+    min-width: 7rem;
+    font-family: 'IBM Plex sans', sans-serif;
+}
+
+footer button:hover{
+    background-color: rgb(98, 13, 255);
+    cursor: pointer;
+}	
+