Skip to content
Snippets Groups Projects
Commit 65e000a3 authored by Nour's avatar Nour
Browse files

Forntend added

parent fad2ab19
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 314 additions and 0 deletions
Frontend/main.py 0 → 100644
+ 69
− 0
View file @ 65e000a3
from flask import Flask, render_template, url_for, request, redirect, flash
from datetime import datetime
from werkzeug.utils import secure_filename
import time, os
#define the app
app = Flask(__name__)
#the secret key :)
SECRET_KEY = '12345'
#specifies where the upload directory is and the file type available for uploads
UPLOAD_FOLDER = '/upload'
ALLOWED_EXTENSIONS = {'.csv','.xes'}
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
#home page route
@app.route('/')
def index():
return render_template('index.html')
#the upload functionality. It then redirects to the case labeling page
@app.route('/', methods=['POST'])
def upload_file():
uploaded_file = request.files['file']
if uploaded_file.filename != '':
uploaded_file.save(uploaded_file.filename)
elif uploaded_file.filename == '':
flash('no files selected')
return redirect(url_for('index'))
return redirect(url_for('case'))
#login page route
@app.route('/login.html')
def login():
return render_template('login.html')
#signup page route
@app.route('/signup.html')
def signup():
return render_template('signup.html')
#case selection page route
@app.route('/case.html')
def case():
return render_template('case.html')
#eventually to input the case ID selection, for now it does nothing
@app.route('/case.html', methods=['GET'])
def input_caseid():
return render_template('case.html')
#result page route
@app.route('/result.html')
def result():
return render_template('result.html')
#loading page route
@app.route('/loading.html')
def loading():
return render_template('loading.html')
if __name__ == "__main__":
port = int(os.environ.get('PORT', 5000))
app.run(debug=True, host='0.0.0.0', port=port)
Frontend/static/dino.ico 0 → 100644
+ 0
− 0
View file @ 65e000a3
Frontend/static/dino.ico

66.1 KiB

Frontend/static/favicon.ico 0 → 100644
+ 0
− 0
View file @ 65e000a3
Frontend/static/favicon.ico

3.78 KiB

Frontend/static/moyai.jpg 0 → 100644
+ 0
− 0
View file @ 65e000a3
Frontend/static/moyai.jpg

10.7 KiB

Frontend/static/smolconcern.png 0 → 100644
+ 0
− 0
View file @ 65e000a3
Frontend/static/smolconcern.png

22.6 KiB

Frontend/static/styles.css 0 → 100644
+ 101
− 0
View file @ 65e000a3
* {
box-sizing: border-box;
}
/*the body*/
body {
margin: 0;
background-color:rgb(233, 240, 254);
}
/* description*/
.desc {
font-family: "Times New Roman";
font-size: 15px;
}
/*.container {
margin: 1rem;
text-align: center;
}
.site-title {
font-size: 2rem;
}*
/* aleks' navbar
.nav {
background-color: #333;
color: white;
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 2rem;
padding: 0 1rem;
}
/* aleks' div
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}*/
/* Add a black background color to the top navigation */
.topnav {
background-color:lightslategrey;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: cyan;
color: white;
}
/* A define for right alignment */
.align-right {
text-align: right;
border: 0;
}
/* Simple Button Style*/
.button {
background-color:rgb(9, 18, 146); /* Green */
border: none;
color: whitesmoke;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
/* styling for text*/
input[type=text] {
width: 20%;
padding: 12px 20px;
margin: 15px 12px;
box-sizing: border-box;
}
/* styling for label*/
label {
margin: 15px 12px;
}
Frontend/templates/base.html 0 → 100644
+ 36
− 0
View file @ 65e000a3
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="icon" href="{{url_for('static',filename='dino.ico')}}">
<link rel="stylesheet" href="{{url_for('static',filename='styles.css')}}">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="The web app for OPTIS"
/>
<link rel="manifest" href="../manifest.json" />
{% block head %}
{% endblock %}
</head>
<body>
{% block main %}
<noscript>Please enable javascript to use the app.</noscript>
<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 %}
{% block body %}
{% endblock %}
</body>
</html>
\ No newline at end of file
Frontend/templates/case.html 0 → 100644
+ 16
− 0
View file @ 65e000a3
{% extends 'base.html' %}
{%block head%}
<title>Case selection</title>
{%endblock%}
{%block body%}
<div style="text-align: center;">
<h1>Choose the case you want to optimize</h1>
<form>
<label for="caseId">Please enter the case ID:</label><br>
<input type="text" id="caseId" name="caseId"><br>
</form>
<button onclick="window.location.href='result.html'" class="button"> Optimize now!</button>
</div>
{%endblock%}
\ No newline at end of file
Frontend/templates/index.html 0 → 100644
+ 28
− 0
View file @ 65e000a3
{% extends 'base.html' %}
{% block head %}
<title>OPTIS Home</title>
{% endblock %}
{% block body %}
<header style="text-align: center;">
<h1>Welcome to OPTIS!</h1>
<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>
<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>
</div>
<div style="text-align: center;">
<h1>Upload your files and get started now!</h1>
<form action="" method="POST" enctype="multipart/form-data">
<p><input type="file" name="file" accept=".xes,.csv"></p>
<p><input type="submit" value="submit" class="button"></p>
</form>
<h2 style="font-size: 14px">please input only .xes and .csv files. please!</h2>
</div>
{% endblock %}
\ No newline at end of file
Frontend/templates/loading.html 0 → 100644
+ 11
− 0
View file @ 65e000a3
{% extends 'base.html' %}
{%block head%}
<title>now loading...</title>
{%endblock%}
{%block body%}
<div style="text-align: center; padding-top: 20%; padding-bottom: 20%;">
<h1>LOADING...</h1>
</div>
{%endblock%}
\ No newline at end of file
Frontend/templates/login.html 0 → 100644
+ 18
− 0
View file @ 65e000a3
{% extends 'base.html' %}
{%block head%}
<title>Login Page</title>
{%endblock%}
{%block body%}
<div style="text-align: center;">
<h1>Please enter your username and password</h1>
<form>
<label for="username">Username:</label><br>
<input type="text"><br>
<label for="password">Password:</label><br>
<input type="text"><br>
<input type="submit" value="submit" class="button"><br>
</form>
</div>
{%endblock%}
\ No newline at end of file
Frontend/templates/result.html 0 → 100644
+ 15
− 0
View file @ 65e000a3
{% extends 'base.html' %}
{%block head%}
<title>Your results</title>
{%endblock%}
{%block body%}
<div style="text-align: center;">
<h1>Here are the results of the optimization!</h1>
<h2>We recommend you to do the following activity for this specific case:</h2>
<h3>Placeholder</h3>
<img src="{{url_for('static',filename='moyai.jpg')}}" alt="Placeholder"> <br>
<button onclick="window.location.href='/'" class="button"> Optimize your next case NOW!</button>
</div>
{%endblock%}
\ No newline at end of file
Frontend/templates/signup.html 0 → 100644
+ 20
− 0
View file @ 65e000a3
{% extends 'base.html' %}
{%block head%}
<title>Sign Up Now!</title>
{%endblock%}
{%block body%}
<div style="text-align: center;">
<h1>Please fill the form</h1>
<form>
<label for="email">Email:</label><br>
<input type="text"><br>
<label for="username">Username:</label><br>
<input type="text"><br>
<label for="password">Password:</label><br>
<input type="text"><br>
<input type="submit" value="submit" class="button"><br>
</form>
</div>
{%endblock%}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment