1 files changed, 178 insertions, 0 deletions
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;
+}	
+