This commit is contained in:
2019-10-27 09:10:37 +01:00
parent 72d9888633
commit 4697018a6e
7 changed files with 96 additions and 11 deletions
+18
View File
@@ -107,3 +107,21 @@ body,html{
right: 50px; right: 50px;
top: 24px; top: 24px;
} }
.hidden {
display: none;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
+2 -2
View File
@@ -22,7 +22,7 @@
<div id='heading'> <div id='heading'>
<div class='inner'> <div class='inner'>
<img src='{% static 'favicon.ico' %}' /> <img src='{% static 'favicon.ico' %}' />
<h1 id='title'>Bloom up your city</h1> <h1 id='title'>Bloom up your region</h1>
</div> </div>
</div> </div>
@@ -36,7 +36,7 @@
<!-- FOOTER --> <!-- FOOTER -->
<div id='footer'> <div id='footer'>
<p class='left'>Bloom Hunting - a Ökostadt Heidelberg initiative</p> <p class='left'>Bloom Hunting</p>
<p>A Climathon Heidelberg project</p> <p>A Climathon Heidelberg project</p>
</div> </div>
</body> </body>
+7 -4
View File
@@ -2,18 +2,21 @@
{% block content %} {% block content %}
<body> <body>
<h1>Bloomhunt</h1> <h1>Bloom Hunt</h1>
<p>Hunt blooming trees in your area.</p> <p>Be the <b>first</b> that scans a blooming tree in your neighborhood.</p>
<a class="btn btn-default" id="btn_scan" href="{% url 'mobile:scan' %}">Scan a blooming tree</a> <a class="btn btn-default" id="btn_scan" href="{% url 'mobile:scan' %}">Scan a blooming tree</a>
<p></p> <p></p><br>
<h3>Shortly blooming species</h3>
<p>Especially look for the following trees, they are likely to bloom <p>Especially look for the following trees, they are likely to bloom
soon:</p> soon:</p>
<ul>
{% for tree in prediction %} {% for tree in prediction %}
{{ tree }}<br> <li>{{ tree }}</li>
{% endfor %} {% endfor %}
</ul>
{% endblock %} {% endblock %}
+42 -3
View File
@@ -1,14 +1,53 @@
{% extends "mobile/base.html" %} {% extends "mobile/base.html" %}
{% block content %} {% block content %}
<script>
function identify() {
var loader = document.getElementById("loader");
var question_p = document.getElementById("question_p");
var options_p = document.getElementById("options_p");
var image_in = document.getElementById("image_in");
var btn_identify = document.getElementById("btn_identify");
var p_result = document.getElementById("identification_result");
var p_upload = document.getElementById("p_upload");
var p_help = document.getElementById("p_help");
btn_identify.classList.toggle("hidden");
image_in.classList.toggle("hidden");
loader.classList.toggle("hidden");
p_upload.classList.toggle("hidden");
setTimeout(function () {
question_p.classList.toggle("hidden");
options_p.classList.toggle("hidden");
loader.classList.toggle("hidden");
p_result.classList.toggle("hidden");
p_help.classList.toggle("hidden");
}, 2000);
}
</script>
<h1>Scan a blooming tree!</h1> <h1>Scan a blooming tree!</h1>
<p>We will help you identifying the tree you are hunting.</p> <p id="p_help">We will help you identifying the tree you are hunting.</p>
<p>{{ question.text }}</p> <p id="p_upload">Just upload a picture of your tree<p>
<table> <input id="image_in" type="file" accept="image/*" capture="camera" />
<button id="btn_identify" class="btn btn-default" onclick="identify()">Identify the tree</button>
<div id="loader" class="loader hidden"></div>
<p id="identification_result" class="hidden">We were able to identify your tree as a <b>Apple
Tree</b>. We need only some further questions to identify the exact species</p>
<p id="question_p" class="hidden">{{ question.text }}</p>
<table id="options_p" class="hidden">
<tr> <tr>
{% for option in question.options %} {% for option in question.options %}
<td width=30%> <td width=30%>
<form action="" method="post"> <form action="" method="post">
+24
View File
@@ -0,0 +1,24 @@
{% extends "mobile/base.html" %}
{% block content %}
<h1>Scan a blooming tree!</h1>
<p id="question_p" class="">{{ question.text }}</p>
<table id="options_p" class="">
<tr>
{% for option in question.options %}
<td width=30%>
<form action="" method="post">
{% csrf_token %}
<input name="question" type="hidden" value="{{ question.key }}">
<input name="chosen_option" class="btn btn-default" type="submit" value="{{ option.text }}">
</form>
</td>
{% endfor %}
</tr>
</table>
{% endblock %}
+1 -1
View File
@@ -3,7 +3,7 @@
{% block content %} {% block content %}
<p>Congratulions, you are the first to report that this <b>{{ tree.name }}</b> <p>Congratulions, you are the first to report that this <b>{{ tree.name }}</b>
tree is blooming.<p> is blooming.<p>
<p>You may give it a name now</p> <p>You may give it a name now</p>
+2 -1
View File
@@ -33,7 +33,8 @@ def scan(request):
continue continue
if opt.question: if opt.question:
question = opt.question question = opt.question
break context = {'question': question}
return render(request, 'mobile/scan2.html', context)
else: else:
return scanned(request, opt.result) return scanned(request, opt.result)
# first question # first question