Improve webapp style

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)

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 */
+    display: none;
-    margin-top: 20px;    /* Add margin-top to create space above the input */
+}
-    padding: 10px;
+
-    border: 2px solid #ddd;
+/* Style the custom file input button */
+.custom-file-upload {
+    border: 2px solid #00BFFF;
     border-radius: 5px;
-    width: 80%;
+    padding: 10px 20px;
-    display: block;
+    background-color: transparent;
-    margin: 0 auto;
+    color: #00BFFF;
-    background-color: #1a1a33;
+    font-size: 16px;
-    color: #ffffff;
+    cursor: pointer;
+    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
+    margin-right: 10px;
 }
 
-input[type="file"]::placeholder {
+.custom-file-upload:hover {
-    color: #ffffff;
+    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;
+    font-size: 16px;
-    color: #666;
+    color: #FFFFFF;
-    margin-top: 10px;
+    /* 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 */
 }

src/webapp/templates/index.html

@@ -11,25 +11,27 @@
 
 <body>
     <div class="container">
-        <h1>Satellite File Upload</h1>
+        <h1>SpaceDrive 🛰️</h1>
-        <p>Welcome to the Satellite File Upload portal. This portal allows you to securely upload files to our satellite
+        <p>Welcome to the SpaceDrive portal. This service allows you to securely upload files to our satellite
             systems orbiting Earth.</p>
-        <p>Our satellites are equipped with advanced sensors and instruments that collect various types of data,
+        <p>Using this portal, you can securely transmit files to our satellites from anywhere on Earth. 🌏</p>
-            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.</p>
-        <p>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.</p>
-        <form action="/upload" method="post" enctype="multipart/form-data">
-            <input type="file" name="file" placeholder="Choose file">
-            <input type="submit" value="Upload">
-            <p class="note">Note: Submitted files will be scanned to detect malicious patterns. Our team has developed a
-                specific tool to scan zip files.</p>
 
+
+        <p class="note">Note: Submitted files will be scanned to detect malicious patterns. Our team has developed a
+            specific tool to scan zip files.</p>
+
+        <form action="/upload" method="post" enctype="multipart/form-data">
+            <label class="custom-file-upload">
+                <input type="file" name="file">
+                Choose a file
+            </label>
+
+            <input type="submit" value="Upload">
         </form>
-        <div class="message" id="message"></div>
+
-    </div>
+        <div class="message" id="message">
+            🚀🚀🚀
+        </div>
 </body>
 
 </html>

src/webapp/templates/upload_status.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload Status</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+</head>
+<body>
+    <div class="container">
+        <div class="message {% if success %}success{% else %}error{% endif %}">
+            {{ message }}
+        </div>
+        <a href="/" class="back-link">Go back to upload page</a>
+    </div>
+</body>
+</html>