stuff
This commit is contained in:
@@ -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); }
|
||||||
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 %}
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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 %}
|
||||||
@@ -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
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user