| @@ -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 id="p_upload">Just upload a picture of your tree<p> | |||||
| <p>{{ question.text }}</p> | |||||
| <input id="image_in" type="file" accept="image/*" capture="camera" /> | |||||
| <table> | |||||
| <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> | ||||
| @@ -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 | ||||