Amélioration de l'interface web.

Ajout de pages.

app.py

@@ -7,27 +7,34 @@
     l'Université de Strasbourg.
 """
 
+
+### Interface Web (Flask) ###
+
+
+# Modules :
+import datetime as dti
+import time
+
 from flask import Flask
 from flask import render_template
 from flask import url_for
 from flask import request
 
-import rooms_get as ro
-import datetime as dti
-
-app = Flask(__name__)
-
-# Modules :
-import datetime
-import time
-
 # Fichiers locaux :
 import date_tools
 import rooms_get as ro
 # import definitions as lib # TODO : À quoi ça sert ?
 
 
+app = Flask(__name__)
+
+
 @app.route("/")
+def home() :
+    return render_template("index.html")
+
+
+@app.route("/app")
 def select_dept() :
     """
     Permet de sélectionner un ou plusieurs départements dans lesquels
@@ -52,7 +59,7 @@ def select_dept() :
     return render_template("dept-select.html", **content)
 
 
-@app.route("/free-rooms", methods=["POST", "GET"])
+@app.route("/app/free-rooms", methods=["POST", "GET"])
 def free_rooms() :
     """
     Affiche les salles libres dans les départements sélectionnés
@@ -92,13 +99,11 @@ def free_rooms() :
 
     ignore_list = ["salle non définie", "salle en Distanciel"]
 
-    #dept = dept_list[0] #TODO : proposer d'autres départements
-
-    date = dti.datetime(2022, 5, 5, 10, 30)
+    date = dti.datetime(2022, 5, 5, 10, 30) #TODO : à changer
 
     available_rooms = ro.getrooms(date, depts, ignore_list)
 
     context = {"available_rooms":available_rooms, "hdelay":hdelay}
 
     url_for("static", filename="style.css")
-    return render_template("free-rooms.html", **context)
+    return render_template("free-rooms.html", **context)

templates/base.html

@@ -0,0 +1,131 @@
+<header>Unisquat</header>
+<style>
+    :root {
+        --bg: #191919;
+        --bg-dark: #252525;
+        --bg-light: #4b4b4b;
+        --fg: #ffffff;
+        --hl: #8080ff;
+    }
+
+    * {
+        background: var(--bg);
+        padding-left: 5px;
+        padding-right: 5px;
+        font-family: "ubuntu", "sans";
+        color: var(--fg);
+    }
+
+    header {
+        background: var(--hl);
+        font-size: 250%;
+        font-weight: lighter;
+        text-align: center;
+        margin: 10px;
+        margin-left: calc(-50vw + 50%);
+        margin-right: calc(-50vw + 50%);
+        margin-top: calc(-50vw + 50%);
+        padding-top: 20px;
+        padding-bottom: 5px;
+    }
+
+    main {
+        /*display: flex;
+        flex-direction: row;*/
+        line-height: 1.7;
+    }
+
+    nav {
+        vertical-align: top;
+        margin: 10px;
+        width: 50%;
+    }
+
+    #body {
+        margin: 10px;
+    }
+
+    p {
+        text-align: justify;
+        text-indent: 50px;
+    }
+
+    .flex-container {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    h1, h2, h3, h4 {
+        font-weight: lighter;
+        border-left: solid;
+        border-width: 5px;
+        border-color: var(--hl);
+    }
+
+    a {
+        color: var(--hl);
+    }
+
+    img {
+        margin: 10px;
+        align-self: flex-start;
+        max-width: 200px;
+        border-radius: 10px;
+    }
+
+    iframe {
+        max-width: 200px;
+        max-height: 500px;
+    }
+
+    ul {
+        margin-bottom: 5px;
+    }
+
+    dt {
+        font-weight: bold;
+        font-size: 90%;
+        border-bottom-style: solid;
+        border-bottom-width: 2px;
+        border-bottom-color: var(--bg-light);
+        padding: 10px;
+    }
+
+    dt .details {
+        font-weight: normal;
+        font-size: 80%;
+    }
+
+    button, input {
+        background: var(--bg-light);
+        border-style: solid;
+        border-width: 1px;
+        border-color: var(--bg);
+        padding: 10px;
+        border-radius: 10px;
+    }
+
+    input checkbox {
+        margin-bottom: 5px;
+    }
+
+    .done {
+        background: var(--bg-dark);
+        text-decoration: line-through;
+    }
+
+    input {
+        background: var(--bg-dark);
+    }
+
+    #greet {
+        font-size: 200%;
+        text-align: center;
+        font-weight: lighter;
+    }
+
+
+    @media screen and (max-width: 769px) {
+    }
+</style>

templates/dept-select.html

@@ -2,14 +2,15 @@
 <html lang="">
   <head>
     <meta charset="utf-8">
-    <title>UniSquat</title>
+    <title>Unisquat</title>
     <link rel="stylesheet" type="text/css" href="../static/style.css">
+    <meta name="viewport" content="width=300, initial-scale=1" />
   </head>
   <body>
-    <header>UniSquat</header>
+    {% include "base.html" %}
     <main>
       Sélectionnez des départements dans la liste :
-      <form action="/free-rooms" method="get">
+      <form action="/app/free-rooms" method="get">
         <input type="submit" value="Valider">
         <br>
         {% for d in dept_list : %}

templates/free-rooms.html

@@ -2,11 +2,12 @@
 <html lang="">
   <head>
     <meta charset="utf-8">
-    <title>UniSquat</title>
+    <title>Unisquat</title>
     <link rel="stylesheet" type="text/css" href="../static/style.css">
+    <meta name="viewport" content="width=300, initial-scale=1" />
   </head>
   <body>
-    <header>UniSquat</header>
+    {% include "base.html" %}
     <main>
     Les salles suivantes sont disponibles actuellement :
     <div class="flex-container">

templates/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <title>Unisquat</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta name="viewport" content="width=300, initial-scale=1" />
+  </head>
+  <body>
+    {% include "base.html" %}
+    <main>
+    <p id="greet">Bienvenue sur Unisquat !</p>
+    <a style="text-align: center;" href="/app">Accès à l'application</a>
+    </main>
+    <footer></footer>
+  </body>
+</html>