-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (139 loc) · 9.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link href="{{ url_for('static', filename='css/black.css') }}" rel="stylesheet" id="theme"/>
<title>Tabulas</title>
<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='img/favicons/apple-icon-57x57.png') }}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ url_for('static', filename='img/favicons/apple-icon-60x60.png') }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ url_for('static', filename='img/favicons/apple-icon-72x72.png') }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ url_for('static', filename='img/favicons/apple-icon-76x76.png') }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='img/favicons/apple-icon-114x114.png') }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ url_for('static', filename='img/favicons/apple-icon-120x120.png') }}">
<link rel="apple-touch-icon" sizes="144x144" href="{{ url_for('static', filename='img/favicons/apple-icon-144x144.png') }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', filename='img/favicons/apple-icon-152x152.png') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='img/favicons/apple-icon-180x180.png') }}">
<link rel="icon" type="image/png" sizes="192x192" href="{{ url_for('static', filename='img/favicons/android-icon-192x192.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='img/favicons/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="96x96" href="{{ url_for('static', filename='img/favicons/favicon-96x96.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='img/favicons/favicon-16x16.png') }}">
<link rel="manifest" href="{{ url_for('static', filename='/manifest.json') }}">
<meta name="msapplication-TileColor" content="#161616">
<meta name="msapplication-TileImage" content="{{ url_for('static', filename='img/favicons/ms-icon-144x144.png') }}">
<meta name="theme-color" content="#161616">
</head>
<body>
<div class="mission-planning">
<div class="color_switcher">
<a onclick="changeStylesheet('/static/css/app.css')">☀️</a>
<a onclick="changeStylesheet('/static/css/black.css')">🌃</a>
</div>
<div class="mission-planning__logo">
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 104 105" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-672 -312)">
<g transform="translate(672.5 312.81)">
<path d="m64.176 0c21.65-1.1082e-14 39.2 17.55 39.2 39.2v24.976c0 21.65-17.55 39.2-39.2 39.2h-24.976c-21.65 0-39.2-17.55-39.2-39.2v-24.976c-9.7567e-15 -21.65 17.55-39.2 39.2-39.2h24.976zm11.322 41.131-10.405 4.1619h-15.778l-0.72884 5.8307 11.473 22.946h19.556l-4.1173-32.938zm-32.181 13.754h-17.158l-2.398 19.184h29.149l-9.5921-19.184zm1.5515-25.579h-15.513l-2.398 19.184h15.513l2.398-19.184zm29.151 0h-22.707l-1.199 9.5921h13.748l10.816-4.3265-0.6582-5.2656z"/>
</g>
</g>
</svg>
<h1>Tabulas</h1>
</div>
<p>Missions planning's Path finding algorithms comparison 🧭 <br> Algorithms used: A*, Dijkstra</p>
<div class="mission-planning__form">
<form action="{{ url_for('compare') }}" class="compare__form" method="POST">
<div class="mission-planning__form_inputs">
<div class="mission-planning__form__algorithm-inputs">
<div class="input-group">
<label for="startingPoint">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="none" fill-rule="evenodd" d="M0 0h24v24H0Z" />
<path
d="M5 10.5C5 6 8 3 12.5 3 17 3 20 6.75 20 10.5c0 2.33-2.18 5.53-6.53 9.6 -.56.51-1.42.54-2 .05 -4.32-3.66-6.48-6.88-6.48-9.66Zm7.5 1.5c1.38 0 2.5-1.12 2.5-2.5C15 8.11 13.88 7 12.5 7 11.11 7 10 8.11 10 9.5c0 1.38 1.11 2.5 2.5 2.5Z" />
</svg>
Point A
</label>
<input type="text" value="{% if request.form['startingPoint'] %}{%print request.form['startingPoint']%}{% else %}Weinmeisterstrasse{% endif %}" class="input" name="startingPoint" placeholder="e.g. Berlin, Germany" required>
</div>
<div class="input-group">
<label for="endingPoint">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="none" fill-rule="evenodd" d="M0 0h24v24H0Z" />
<path
d="M5 10.5C5 6 8 3 12.5 3 17 3 20 6.75 20 10.5c0 2.33-2.18 5.53-6.53 9.6 -.56.51-1.42.54-2 .05 -4.32-3.66-6.48-6.88-6.48-9.66Zm7.5 1.5c1.38 0 2.5-1.12 2.5-2.5C15 8.11 13.88 7 12.5 7 11.11 7 10 8.11 10 9.5c0 1.38 1.11 2.5 2.5 2.5Z" />
</svg>
Point B
</label>
<input type="text" value="{% if request.form['startingPoint'] %}{% print request.form['endingPoint'] %}{% else %}Alexanderplatz{% endif %}" class="input" name="endingPoint" placeholder="e.g. Hamburg, Germany" required>
</div>
</div>
<div class="mission-planning__form__algorithm-inputs algorithms-config">
<h3>Dijkstra's Configuration</h3>
<div class="mission-planning__form__algorithm-inputs--elements ">
<div class="input-group">
<label for="dijkstraRouteColor">
Dijkstra Route Color
</label>
<input type="color" class="input-color" name="dijkstraRouteColor" value="{% if request.form['dijkstraRouteColor'] %}{% print request.form['dijkstraRouteColor'] %}{% else %}#FFFFFF{% endif %}" required>
</div>
<div class="input-group">
<label for="a_star">
Dijkstra Background Color
</label>
<input type="color" class="input-color" name="dijkstraBgColor" value="{% if request.form['dijkstraBgColor'] %}{% print request.form['dijkstraBgColor'] %}{% else %}#A5A1FF{% endif %}" required>
</div>
</div>
</div>
<div class="mission-planning__form__algorithm-inputs algorithms-config">
<h3>A* Configuration</h3>
<div class="mission-planning__form__algorithm-inputs--elements ">
<div class="input-group">
<label for="astarRouteColor">
A* Route color
</label>
<input type="color" class="input-color" id="astarRouteColor" name="astarRouteColor"
value="{% if request.form['astarRouteColor'] %} {% print request.form['astarRouteColor'] %}{% else %}#000000{% endif %}" required>
</div>
<div class="input-group">
<label for="astarBgColor">
A* Background Color
</label>
<input type="color" class="input-color" name="astarBgColor" value="{% if request.form['astarBgColor'] %}{% print request.form['astarBgColor'] %}{% else %}#FFEBA5{% endif %}" required>
</div>
</div>
</div>
</div>
<button class="compare__button"> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M480 32L32 224l256 0 0 256Z" />
</svg>
Compare
</button>
</form>
<div class="result"></div>
</div>
</div>
<div class="algorithms_results">
<div class="algorithms_results__result">
<a href="{{ url_for('static', filename='img/dijkstra.jpg') }}" download><img src="{{ url_for('static', filename='img/dijkstra.jpg') }}" alt="Dijkstra" draggable="false"></a>
<p>{{ dijkstraResult}}</p>
</div>
<div class="algorithms_results__result">
<a href="{{ url_for('static', filename='img/astar.jpg') }}" download><img src="{{ url_for('static', filename='img/astar.jpg') }}" alt="Astar" draggable="false"></a>
<p>{{ astarResult}}</p>
</div>
<div class="algorithms_results__result">
{{ verticesDifference }}
</div>
</div>
<script>
function changeStylesheet(newstylesheet) {
document.getElementById('theme').setAttribute('href', newstylesheet);
}
</script>
</body>
</html>