stuff

2019-10-27 09:10:37 +01:00
parent 72d9888633
commit 4697018a6e
7 changed files with 96 additions and 11 deletions
@@ -22,7 +22,7 @@
        <div id='heading'>
            <div class='inner'>
                <img src='{% static 'favicon.ico' %}' />
-                <h1 id='title'>Bloom up your city</h1>
+                <h1 id='title'>Bloom up your region</h1>

            </div>
        </div>
@@ -36,7 +36,7 @@

    <!-- 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>
    </div>
 </body>
@@ -2,18 +2,21 @@

 {% block content %}
 <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>

-<p></p>
+<p></p><br>

+<h3>Shortly blooming species</h3>
 <p>Especially look for the following trees, they are likely to bloom
 soon:</p>
+<ul>
 {% for tree in prediction %}
-{{ tree }}<br>
+<li>{{ tree }}</li>
 {% endfor %}
+</ul>

 {% endblock %}
@@ -1,14 +1,53 @@
 {% extends "mobile/base.html" %}

 {% 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>

-<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>
+
 {% for option in question.options %}
 <td width=30%>
 <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 %}

 <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>