Jinja (HTML)

Flask bruker Jinja og templates til å konstruere nettsiden. Ved å velge en slik løsning kan man autogenerere HTML-kode ved hjelp av flask-serveren. Følgende HTML-kode blir satt sammen av flask-applikasjonen når nettsiden laster og setter dem sammen korrekt.

base.html

 1<!doctype html>
 2<html lang="en">
 3<head>
 4  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5  <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
 6  <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
 7  
 8  <title>{% block title %}{% endblock %} - App</title>
 9
10
11  <link rel="stylesheet" href="https://api.mazemap.com/js/v2.2.1/mazemap.min.css">
12
13  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
14</head>
15<body>
16
17  <section class="content">
18    <header id="header">
19      {% block header %}{% endblock %}
20    </header>
21    
22    {% block inputdata %}{% endblock %}
23    {% block content %}{% endblock %}
24  </section>
25  
26  <script type='text/javascript' src='https://api.mazemap.com/js/v2.2.1/mazemap.min.js'></script>
27
28  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
29  
30  <script type="module" src="{{ url_for('static', filename='js/script.js') }}"></script>
31
32</body>
33</html>

front.html

 1{% extends 'base.html' %}
 2
 3{% block header %}
 4  <h1>{% block title %}front page{% endblock %}</h1>
 5{% endblock %}
 6
 7{% block inputdata %}
 8
 9<div class="inputcontainer">
10
11  <h2 id="chosendevice">Chosen device: None</h2>
12  <div id="devicecontainer">
13    <button id="deviceselectbutton">Set</button>
14    <div id="devicewrapper">
15      <input type="text" id="deviceidinput" placeholder="Enter device id">
16      <button id="savedevicebutton">Save</button>
17    </div>
18  </div>
19
20  <h2>Input data</h2>
21  <input type="text" id="strength" placeholder="Input Strength Value">
22  <button id="applystrength" onclick="handlestrengthbutton()">Apply</button>
23
24</div>
25
26{% endblock %}
27
28
29{% block content %}
30  <h2>Received from MQTT</h2>
31  
32  <div class="datacontainer">
33    <ul id="mqtt-data"></ul>
34    <ul id="poi-data"></ul>
35  </div>
36  
37
38{% endblock %}

CSS

  1:root {
  2    --common-color: #4CAF50;
  3}
  4
  5* {
  6    margin: 0;
  7    padding: 0;
  8    box-sizing: border-box;
  9}
 10
 11body {
 12    font-family: Arial, sans-serif;
 13    color: #333;
 14    background-color: #f4f4f9;
 15    line-height: 1.6;
 16}
 17
 18header {
 19    background-color: var(--common-color);
 20    transition: background-color 0.5s ease-in-out;
 21    color: white;
 22    padding: 10px 0;
 23    text-align: center;
 24}
 25
 26h1, h2 {
 27    margin: 10px 0;
 28    text-align: center;
 29}
 30
 31.inputcontainer {
 32    display: flex;
 33    flex-direction: column;
 34    align-items: center;
 35    justify-content: center;
 36    margin-top: 5px;
 37}
 38
 39.inputcontainer input {
 40    font-size: 16px;
 41    padding: 3px 15px;
 42    text-align: center;
 43    border: 1px solid #ccc;
 44    border-radius: 2px;
 45    max-width: 50%;
 46  }
 47
 48input#strength {
 49    width: 300px;
 50}
 51
 52.inputcontainer button {
 53    cursor: pointer;
 54    background-color: var(--common-color);
 55    color: white;
 56    border: none;
 57    border-radius: 2px;
 58    padding: 3px 15px;
 59    font-size: 16px;
 60    width: auto;
 61    transition: background-color 0.3s ease;
 62    text-align: center;
 63}
 64
 65.inputcontainer button:hover {
 66    filter: brightness(85%);
 67}
 68
 69.datacontainer {
 70    margin-bottom: 10px;
 71    padding: 3px;        
 72    font-size: 16px;     
 73    text-align: center;
 74    width: 450px;
 75}
 76
 77#devicecontainer {
 78    display: flex;
 79    flex-direction: column;
 80    align-items: center;
 81    margin-top: 20px;
 82    max-width: 100%;
 83}
 84
 85
 86#devicewrapper {
 87    display: none;
 88    height: 0;
 89    margin-top: 10px;
 90    overflow: hidden;
 91    transition: visibility 0.3s, height 0.3s ease;
 92}
 93
 94#devicewrapper.visible {
 95    height: auto;
 96    display: flex;
 97    flex-direction: row;
 98    gap: 10px;
 99    align-items: center;
100    justify-content: center;
101    padding: 5px;
102    margin: 0;
103    width: 100%;
104}
105
106#applystrength {
107    margin-top: 5px;
108}
109
110.inputdata:last-child { margin-bottom: 0; }
111/*.content form { margin: 1em 0; display: flex; flex-direction: column; }*/
112.inputdata label { font-weight: bold; margin-bottom: 0.5em; }
113.inputdata input, .content textarea { margin-bottom: 1em; }
114.inputdata textarea { min-height: 12em; resize: vertical; }