New graphics and error handling

.gitignore

@@ -1,5 +1,6 @@
 #db
 db.csv
+*.db
 
 # VSCODE
 .vscode

client/CalcForm.py

@@ -4,4 +4,4 @@
 
 class CalcForm(FlaskForm):
     expression = StringField("Enter the expression to calculate", validators=[DataRequired()])
-    submit = SubmitField("Calculate")
+    submit = SubmitField("=")

client/app.py

@@ -13,18 +13,28 @@
     app.config["SERVER_HOSTNAME"] + ":" + str(app.config["SERVER_PORT"])
 
 
+class ServerException(Exception):
+    def __init__(self, message: str):
+        self.message = message
+
+
 @app.route("/", methods=('GET', 'POST'))
 def index():
     form = CalcForm()
-    answer = get_answer(form)
-    history = get_history()['calculations']
+    answer = error = None
+    try:
+        answer = get_answer(form)
+    except ServerException as e:
+        error = e.message
+    history = get_history()
 
     return render_template(
-        "mainPage.html",
+        "index.html",
         form=form,
         expressions=[
             f"{entry['question']} = {entry['answer']}" for entry in reversed(history)],
-        answer=answer
+        answer=answer,
+        error=error
     )
 
 
@@ -36,20 +46,21 @@ def get_answer(form: CalcForm):
                 SERVER_ADDRESS + "/calculate", json=json, timeout=3)
         except TimeoutError:
             return None
-        if response.status_code == HTTPStatus.CREATED:
+        if response.status_code == HTTPStatus.OK:
             return response.json()["answer"]
-    return None  # TODO: show errors in UI
+        raise ServerException(response.text)
+    return None
 
 
 def get_history():
     try:
         responce = requests.get(SERVER_ADDRESS + "/history", timeout=3)
     except TimeoutError:
-        return None
+        return []
     if responce.status_code != HTTPStatus.OK:
-        return None
+        return []
 
-    return responce.json()
+    return responce.json()['calculations']
 
 
 if __name__ == "__main__":

client/static/css/calculator.css

@@ -0,0 +1,148 @@
+/* Стили для основного контейнера */
+.main-container{
+    background-color: #282a36;
+    font-family: 'IBM Plex Mono', monospace;
+    width: 100%;
+    height: 100vh;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.label {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    overflow: auto;
+    font-family: 'IBM Plex Mono', monospace;
+    color: #abb2bf;
+    margin-bottom: 30px;
+}
+
+.label-text {
+    font-size: 60px;
+
+}
+
+.calculator-input-button{
+    margin-left: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 0%;
+    padding-bottom: 0%  ;
+    font-size: 20px;
+    font-family: 'IBM Plex Mono', monospace;
+    border-radius: 3px;
+}
+
+/* CSS */
+.button-30 {
+  margin-left: 10px;
+  align-items: center;
+  appearance: none;
+  background-color: #6272a4;
+  border-radius: 4px;
+  border-width: 0;
+  box-sizing: border-box;
+  color: #36395A;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: 'IBM Plex Mono', monospace;
+  height: 48px;
+  justify-content: center;
+  line-height: 1;
+  padding-left: 14px;
+  padding-right: 14px;
+  position: relative;
+  text-align: left;
+  text-decoration: none;
+  transition: box-shadow .15s,transform .15s;
+  user-select: none;
+  touch-action: manipulation;
+  white-space: nowrap;
+  will-change: box-shadow,transform;
+  font-size: 30px;
+}
+
+.button-30:focus {
+  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, 
+}
+
+.button-30:hover {
+  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #4b587e 0 -3px 0 inset;
+  transform: translateY(-2px);
+}
+
+.button-30:active {
+  box-shadow: #475379 0 3px 7px inset;
+  transform: translateY(2px);
+}
+
+.calculator-input-button:hover{
+    transition: background-color 0.5s, color 0.5s;
+    background-color: #3498db; /* Измените цвет фона на тот, который вам нравится */
+    color: #f8f8f2; /* Измените цвет текста на тот, который вам нравится */
+}
+
+.calculator-input-button:not(:hover) {
+    background-color: #6272a4;
+    transition: background-color 0.5s, color 0.5s;
+    color: #f8f8f2;/* Исходный цвет текста */
+  }
+
+.calculator-input-button:focus{
+    outline: 0px;
+}  
+
+.calculator-input{
+    border-radius: 5px;
+    height: 47px;
+    font-size: 20px;
+    padding-left: 5px;
+    font-family: 'IBM Plex Mono', monospace;
+    color: #ffb86c;
+    outline: 0;
+    border: none;
+    outline-offset: 0;
+    background-color: #44475a;
+}
+
+
+
+
+.calculator {
+    justify-content: center;
+    display: flex;
+}
+
+.calculator-input-container {
+    justify-content: center;
+}
+
+.calculator-input {
+    width: 40vh;
+    box-shadow: none;
+}
+
+.top-content {
+    height: 20vh;
+}
+
+.bottom{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    overflow: auto;
+    font-family: 'IBM Plex Mono', monospace;
+    color: #abb2bf;
+}
+
+.answer{
+    color: #abb2bf;
+    font-size: 30px;
+}
+
+.histiry{
+    font-size: 20px;
+}

client/templates/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Online calculator</title>
+    <!-- Подключение стилей Bootstrap -->
+    <link rel="stylesheet" href="../static/css/calculator.css">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <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+Mono&display=swap" rel="stylesheet">
+</head>
+<body>
+
+    <div class="main-container">
+        <div class="top-content"></div>
+        <div class="label"> 
+            <h1 class="label-text">Calculator v1.0</h1>
+        </div>
+        <div class="container calculator">
+            <form method="post">
+            <div class="calculator-input-container row">
+                {{ form.expression(class="calculator-input", id="expression") }}
+                <!-- <input type="text" placeholder="type your expression here" class="calculator-input"> -->
+                {{ form.submit(class="button-30", id="submit") }}
+            </div>
+    </div>
+        </form">
+
+    <div class="bottom" >
+    <p>
+        {% if answer != None %}
+        <div class="answer">Answer: {{answer}}</div>
+    {% endif %}
+    </p>
+    <p>
+        {% if error != None %}
+        <div style="color:red">{{error}}</div>
+        {% endif %}
+    </p>
+    <p>
+        <div class="history">History:</div>
+    </p>
+    {% for expr in expressions %}
+        <div>{{expr}}</div>
+    {% endfor %}
+    <br>
+
+    </div>
+    <!-- Подключение скриптов Bootstrap (необходимо для работы некоторых функций) -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    </div>
+</body>
+</html>

server/app.py

@@ -49,7 +49,7 @@ def create_task():
     except TimeoutError:
         db_code = HTTPStatus.REQUEST_TIMEOUT
 
-    return {"answer": answer, "saved": db_code == HTTPStatus.CREATED}, db_code
+    return {"answer": answer, "saved": db_code == HTTPStatus.CREATED}, HTTPStatus.OK
 
 
 @app.route('/history')