stuff

6 年之前 · 4697018a6e
--- a/mobile/static/mobile/base.css
+++ b/mobile/static/mobile/base.css
@@ -107,3 +107,21 @@ body,html{
    right: 50px;
    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); }
 }
--- a/mobile/templates/mobile/base.html
+++ b/mobile/templates/mobile/base.html
@@ -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>
--- a/mobile/templates/mobile/index.html
+++ b/mobile/templates/mobile/index.html
@@ -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 %}
--- a/mobile/templates/mobile/scan.html
+++ b/mobile/templates/mobile/scan.html
@@ -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">
--- a/mobile/templates/mobile/scan2.html
+++ b/mobile/templates/mobile/scan2.html
@@ -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 %}
--- a/mobile/templates/mobile/scanned.html
+++ b/mobile/templates/mobile/scanned.html
@@ -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>

--- a/mobile/views.py
+++ b/mobile/views.py
@@ -33,7 +33,8 @@ def scan(request):
                        continue
                    if opt.question:
                        question = opt.question
                        break
                        context = {'question': question}
                        return render(request, 'mobile/scan2.html', context)
                    else:
                        return scanned(request, opt.result)
    # first question