From 1aa057348250c8b7c292679373a9d411f7d47eab Mon Sep 17 00:00:00 2001 From: atxr Date: Fri, 1 Mar 2024 12:47:17 +0100 Subject: [PATCH] Improve webapp style --- src/webapp/app.py | 12 ++- src/webapp/static/styles.css | 97 ++++++++++++++++++++----- src/webapp/templates/index.html | 34 +++++---- src/webapp/templates/upload_status.html | 17 +++++ 4 files changed, 123 insertions(+), 37 deletions(-) create mode 100644 src/webapp/templates/upload_status.html diff --git a/src/webapp/app.py b/src/webapp/app.py index 829ba31..056b788 100644 --- a/src/webapp/app.py +++ b/src/webapp/app.py @@ -17,10 +17,11 @@ def index(): @app.route('/upload', methods=['POST']) def upload(): if 'file' not in request.files: - return 'No file part' + return render_template('upload_status.html', message='No file part', success=False) + file = request.files['file'] if file.filename == '': - return 'No selected file' + return render_template('upload_status.html', message='No selected file', success=False) buf = file.read() hash = hashlib.sha256(buf).digest() @@ -44,16 +45,19 @@ def upload(): elif (status == 1): message = "Error: Potential virus found, cannot upload." + success = False else: message = 'File successfully uploaded' files.append({'filename': file.filename, 'content':buf}) + success = True except: message = 'Error: Failed to scan file' + success = False s.close() - return message + return render_template('upload_status.html', message=message, success=success) if __name__ == '__main__': - app.run(debug=False) + app.run(debug=True) diff --git a/src/webapp/static/styles.css b/src/webapp/static/styles.css index dc38ef5..bfad1c0 100644 --- a/src/webapp/static/styles.css +++ b/src/webapp/static/styles.css @@ -26,33 +26,54 @@ form { text-align: center; } + + + + + + +/* Hide the default file input button */ input[type="file"] { - margin-bottom: 20px; /* Adjust margin-bottom to create space below the input */ - margin-top: 20px; /* Add margin-top to create space above the input */ - padding: 10px; - border: 2px solid #ddd; + display: none; +} + +/* Style the custom file input button */ +.custom-file-upload { + border: 2px solid #00BFFF; border-radius: 5px; - width: 80%; - display: block; - margin: 0 auto; - background-color: #1a1a33; - color: #ffffff; + padding: 10px 20px; + background-color: transparent; + color: #00BFFF; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s, border-color 0.3s, color 0.3s; + margin-right: 10px; } -input[type="file"]::placeholder { - color: #ffffff; +.custom-file-upload:hover { + background-color: #00BFFF; + /* Light blue background on hover */ + color: #FFFFFF; + /* White text color on hover */ } +.custom-file-upload:focus { + outline: none; + /* Remove default focus outline */ + border-color: #1E90FF; + /* Darker blue border color on focus */ +} input[type="submit"] { + border: 2px solid #00BFFF; + border-radius: 5px; + padding: 10px 20px; background-color: #00ccff; color: #ffffff; - padding: 10px 20px; - border: none; - border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; + margin-left: 10px; } input[type="submit"]:hover { @@ -70,9 +91,51 @@ input[type="submit"]:hover { } .note { - font-size: 14px; - color: #666; - margin-top: 10px; + font-size: 16px; + color: #FFFFFF; + /* White color for visibility */ + margin-top: 20px; text-align: center; font-style: italic; + border: 2px solid #FFFFFF; + /* White border */ + padding: 10px; + border-radius: 5px; + background-color: rgba(0, 0, 0, 0.5); + /* Semi-transparent black background */ + box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.2); + /* Add shadow for depth */ +} + +.success { + background-color: #c9e6c9; + color: #008000; + border: 1px solid #4caf50; +} + +.error { + background-color: #f8d7da; + color: #721c24; + border: 1px solid #f5c6cb; +} + +/* CSS for "go back to home page" link */ +.back-link { + display: inline-block; + margin-top: 20px; + text-decoration: none; + padding: 10px 20px; + background-color: #007bff; + /* Blue background color */ + color: #fff; + /* White text color */ + border-radius: 5px; + transition: background-color 0.3s, color 0.3s; +} + +.back-link:hover { + background-color: #0056b3; + /* Darker blue background color on hover */ + color: #fff; + /* White text color on hover */ } \ No newline at end of file diff --git a/src/webapp/templates/index.html b/src/webapp/templates/index.html index 290eef4..4ff4374 100644 --- a/src/webapp/templates/index.html +++ b/src/webapp/templates/index.html @@ -11,25 +11,27 @@
-

Satellite File Upload

-

Welcome to the Satellite File Upload portal. This portal allows you to securely upload files to our satellite +

SpaceDrive 🛰️

+

Welcome to the SpaceDrive portal. This service allows you to securely upload files to our satellite systems orbiting Earth.

-

Our satellites are equipped with advanced sensors and instruments that collect various types of data, - including weather patterns, environmental changes, and astronomical observations. To ensure the smooth - operation of these satellites, it's essential to regularly upload firmware updates, configuration files, and - scientific data.

-

Using this portal, you can securely transmit files to our satellites from anywhere on Earth. Once uploaded, - our satellite communication systems will process and integrate the data seamlessly into our satellite - networks.

-
- - -

Note: Submitted files will be scanned to detect malicious patterns. Our team has developed a - specific tool to scan zip files.

+

Using this portal, you can securely transmit files to our satellites from anywhere on Earth. 🌏

+ +

Note: Submitted files will be scanned to detect malicious patterns. Our team has developed a + specific tool to scan zip files.

+ + + + +
-
-
+ +
+ 🚀🚀🚀 +
\ No newline at end of file diff --git a/src/webapp/templates/upload_status.html b/src/webapp/templates/upload_status.html new file mode 100644 index 0000000..c9792df --- /dev/null +++ b/src/webapp/templates/upload_status.html @@ -0,0 +1,17 @@ + + + + + + Upload Status + + + +
+
+ {{ message }} +
+ Go back to upload page +
+ +