3 files changed, 90 insertions, 14 deletions
diff --git a/File-decryption/webapp/images/OpenCortex-logo.png b/File-decryption/webapp/images/OpenCortex-logo.png
new file mode 100644
index 0000000..ffb4d0a
--- /dev/null
+++ b/File-decryption/webapp/images/OpenCortex-logo.png
diff --git a/File-decryption/webapp/index.html b/File-decryption/webapp/index.html
index 65a75f1..2d20c57 100644
--- a/File-decryption/webapp/index.html
+++ b/File-decryption/webapp/index.html
@@ -7,24 +7,35 @@
 
     <title>OpenCortex</title>
     <meta name="description" content="OpenCortex decrypt and decode.">
-    <meta name="author" content="Simone Margaritelli">
+    <meta name="authors" content="Simone Margaritelli / Thomas Van Iseghem">
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css"/>
 </head>
 
 <body>
-    QuadCortex serial, found in /etc/qc_sn. Leave it blank for global decryption.
-    <br />
-    <br />
-    <input type="text" id="serial-input" />
-    <br />
-    <br />
-    Encrypted file:
-    <br />
-    <br />
-    <input type="file" id="file-input" />
-
-    <script src="/sha1.js"></script>
-    <script src="/main.js"></script>
+    <header>
+        <img src="./images/OpenCortex-logo.png" alt="OpenCortex-logo" class="header-logo">
+        <h1 class="header-title">OpenCortex file decryptor</h1>
+    </header>
+    
+    <div class="content">
+        Enter your Quad Cortex serial number (leave blank for global encrypted file):
+        <br />
+        <br />
+        <input type="text" id="serial-input" />
+        <br />
+        <br />
+        Encrypted file:
+        <br />
+        <br />
+        <input type="file" id="file-input" />
+    
+        <script src="/sha1.js"></script>
+        <script src="/main.js"></script>
+    </div>
 </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..1b742e4
--- /dev/null
+++ b/File-decryption/webapp/style.css
@@ -0,0 +1,65 @@
+* {
+    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);
+}
+
+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%);
+}
+\ No newline at end of file