diff options
| author | Thomas Van Iseghem <[email protected]> | 2023-04-23 13:29:09 +0200 |
|---|---|---|
| committer | Thomas Van Iseghem <[email protected]> | 2023-04-23 13:29:09 +0200 |
| commit | 7a1086da67c85e51e0591cc64d0bdc21fc0e0404 (patch) | |
| tree | a60ef1a6d6a4689d876999990a7db1be4ff786c4 | |
| parent | a44b97376054c576b41b353ce4f59c280124cd9e (diff) | |
| download | OpenCortex-7a1086da67c85e51e0591cc64d0bdc21fc0e0404.tar.gz OpenCortex-7a1086da67c85e51e0591cc64d0bdc21fc0e0404.zip | |
Added styling for the decryptor upload button
| -rw-r--r-- | File-decryption/webapp/index.html | 32 | ||||
| -rw-r--r-- | File-decryption/webapp/style.css | 53 |
2 files changed, 72 insertions, 13 deletions
diff --git a/File-decryption/webapp/index.html b/File-decryption/webapp/index.html index 2d20c57..99590b2 100644 --- a/File-decryption/webapp/index.html +++ b/File-decryption/webapp/index.html @@ -12,7 +12,12 @@ <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> + <link rel="stylesheet" href="./style.css"/> + <script src="/sha1.js"></script> + <script src="/main.js"></script> + </head> <body> @@ -22,19 +27,20 @@ </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 class="serial-input"> + <h3>Enter your Quad Cortex serial number</h3> + <p>(leave blank for global encrypted file)</p> + <input type="text" id="serial-input" /> + </div> + <div class="file-upload"> + <h3 class="file-upload-title">Encrypted file:</h3> + + <label class="file-input-label" 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"> + </div> </div> </body> diff --git a/File-decryption/webapp/style.css b/File-decryption/webapp/style.css index 1b742e4..64fa213 100644 --- a/File-decryption/webapp/style.css +++ b/File-decryption/webapp/style.css @@ -62,4 +62,57 @@ header .header-title{ 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; }
\ No newline at end of file |