|
|
|
@@ -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 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> |
|
|
|
|
|
|
|
{% for option in question.options %} |
|
|
|
<td width=30%> |
|
|
|
<form action="" method="post"> |
|
|
|
|