Small aesthetic changes in the frontend

Frontend/main.py

@@ -7,10 +7,10 @@ import time, os
 app = Flask(__name__)
 
 #the secret key :)
-SECRET_KEY = '12345'
+app.secret_key = '54321'
 
 #specifies where the upload directory is and the file type available for uploads
-UPLOAD_FOLDER = '/upload'
+UPLOAD_FOLDER = 'upload'
 ALLOWED_EXTENSIONS = {'.csv','.xes'}
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
 
@@ -24,12 +24,14 @@ def index():
 def upload_file():
     uploaded_file = request.files['file']
     if uploaded_file.filename != '':
-        uploaded_file.save(uploaded_file.filename)
+        uploaded_file.save(os.path.join(app.config['UPLOAD_FOLDER'],uploaded_file.filename))
     elif uploaded_file.filename == '':
-        flash('no files selected')
+        flash('No files selected! Please select a file!')
         return redirect(url_for('index'))
     return redirect(url_for('case'))     
 
+@app.route('/', methods=['GET'])
+
 #login page route
 @app.route('/login.html')
 def login():

Frontend/static/styles.css

@@ -5,13 +5,18 @@
 /*the body*/
 body {
   margin: 0;
-  background-color:rgb(233, 240, 254);
+  background-color:rgb(230,241,250);
 }
 
 /* description*/
 .desc {
   font-family: "Times New Roman";
   font-size: 15px;
+  margin: 0;
+}
+
+.introductions h1{
+  margin:0px;
 }
 
 /*.container {
@@ -43,7 +48,7 @@ body {
 
 /* Add a black background color to the top navigation */
 .topnav {
-  background-color:lightslategrey;
+  background-color:rgb(0,114,188);
   overflow: hidden;
 }
 
@@ -75,9 +80,13 @@ body {
   border: 0;
 }
 
+.h1 {
+  margin:0
+}
+
 /* Simple Button Style*/
 .button {
-  background-color:rgb(9, 18, 146); /* Green */
+  background-color:rgb(0,114,188)   ; /* Green */
   border: none;
   color: whitesmoke;
   padding: 15px 32px;
@@ -85,6 +94,8 @@ body {
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
+  margin:25px;
+  border-radius:8px;
 }
 
 /* styling for text*/
@@ -99,3 +110,9 @@ input[type=text] {
 label {
   margin: 15px 12px;
 }
+
+.warning {
+  text-align: right;
+  color: red;
+  font-size: large;
+}
\ No newline at end of file

Frontend/templates/base.html

@@ -23,10 +23,25 @@
     <div class="topnav">
       <a href="/">Home</a>
       <a href="#about">About Us</a>
+      <!--
         <a href="login.html" class="right" style="float:right"> Login </a>
         <a href="signup.html" class="right" style="float:right"> Sign Up </a>
+      -->
     </div> 
   {% endblock %}
+
+  {% with messages = get_flashed_messages() %}
+  {% if messages %}
+    <ul class=flashes>
+    {% for message in messages %}
+      <div style="text-align:center">
+        <a class="warning">{{ message }}</a>
+      </div>
+    {% endfor %}
+    </ul>
+  {% endif %}
+  {% endwith %}
+  
   {% block body %}
   
   {% endblock %}

Frontend/templates/index.html

@@ -10,8 +10,8 @@
     <h2 >OPTIS is an app that aims to give you the best possible recommendations for your business processes!</h2>
   </header>
 
-  <div style="text-align: center; padding-top: 150px;">
-  <h1>Introduction</h1>
+  <div style="text-align: center; padding-top: 50 px;">
+  <h1 class="introductions">Introduction</h1>
   <h2 class="desc">OPTIS is a standalone Python based web application which aims to minimize time and cost requirements of busines processes. <br> It seeks to achieve this by using an intelligent agent that is trained using reinforcement learning techniques.</h2>
   <h3>Here is a short introduction video on our app that explains how the app works!</h3>
   <iframe width="560" height="315" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>