Untitled

{% extends 'just_choose/base.html' %}
{% load static %}


    {% block body_block %}
    <!-- call-to-action  -->
    <br>
    <br>
    <br>
    <br>
    <div class="container" id="postcode-info">

<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
<!--^^^^^^^^^^^^^^^^^^^^DISPLAY CRITERIAS TO BE SPESIFIED ^^^^^^^^^^^^^^^^^^^^-->
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
        <div class="row" id="displayCriterias" style="display: none">

            <div class="input-field col s3 m3 l3 xl3">
                <select>
                    <option value="" disabled selected>Choose type of Cuisine</option>
                    <option value="1">Local</option>
                    <option value="2">Spanish</option>
                    <option value="3">Italian</option>
                  </select>
                  <label>Cuisine</label>
            </div>
            <div class="input-field col s3 m3 l3 xl3">
                <select>
                    <option value="" disabled selected>Choose your Budget</option>
                    <option value="1">£</option>
                    <option value="2">££</option>
                    <option value="3">£££</option>
                  </select>
                  <label>Budget</label>
            </div>
            <div class="input-field col s3 m3 l3 xl3" id="chooseDistance">
                <select>
                    <option value="" disabled selected>Choose How far</option>
                    <option value="1">up to 1 mile</option>
                    <option value="2">1-3 miles</option>
                    <option value="3">3+ miles</option>
                  </select>
                  <label>Distance</label>
            </div>
            <div class="input-field col s3 m3 l3 xl3" id="chooseDeliveryCost">
                <select>
                    <option value="" disabled selected>Choose Max Delivery Cost</option>
                    <option value="1">free delivery</option>
                    <option value="2">0-5£</option>
                    <option value="3">doesn't matter</option>
                  </select>
                  <label>Delivery Cost</label>
            </div>
            <div class="input-field col s3 m3 l3 xl3 btn-large orange darken-2 center  waves-effect waves-light" id="btnNextAfterDOutCriteria">
                <a href="#" class="flow-text white-text ">
                  next
                </a>
              </div>


        </div>


      <div class="row orange darken-2" id="inputPO">


        <div class="col s6 l9 white"> <nav>
            <div class="nav-wrapper white" id="searchnav">
              <form action="POST">
                <div class="input-field white" id="postcode_input">
                  <input id="search" type="search" required>
                  <label class="label-icon white-text" for="search"><i class="material-icons">search</i></label>
                  <label class="label orange-text" for="search">&emsp;&emsp;type your postcode here...</label>
                  <i class="material-icons">close</i>
                </div>
              </form>
            </div>
          </nav>
        </div>

        <div href="#terms" class="col s6 l3 btn-large orange darken-2 center  waves-effect waves-light modal-trigger" id="postcodebutton">
          <a href="#" class="flow-text white-text ">
            Let's go!
          </a>
        </div>

        <div class="modal" id="terms">
          <div class="modal-content">
              <h4>
                  Would you prefer to go out or stay at home today?
              </h4>
              <p>Please choose one of the following options:</p>
          </div>
          <div class="modal-footer">
              <div class="row">

                  <div class="col z-depth-3 s6 m6 l6 xl6 btn-large orange darken-2 center  waves-effect waves-light" id="clickTakeAway"><a href="#" ></a>Take Away</a></div>
                  <div class="col z-depth-3 s6 m6 l6 xl6 btn-large orange darken-2 center  waves-effect waves-light" id="clickDineOut"><a href="#" ></a></a>Dine Out</div>

              </div>

          </div>
      </div>


      </div>
    </div>
  </header>

  <div class="row center flow-text red-text" id="motto">
   <h5><strong> Hungry? Hard to choose? Let us make it easier for you. Just enter your location...just choose</strong></h5>
  </div>
  <!-- cards -->
  <div class="container">
      <h2 class="center">Promoted restaurants</h2>
      <div class="row">
        <!--first card-->
        <div class="col s12 l3">
          <div class="card">
            <div class="card-image">
              <img src="{% static "images/american.jpg" %}" alt="">
              <a href="" class="halfway-fab btn-floating pink pulse">
                <i class="material-icons">favorite</i>
              </a>
            </div>
            <div class="card-content">
              <span class="card-title">Rainbow Pasta Sala</span>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis aliquam orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
            <div class="card-action">
              <a href="">View Restaurant</a>
            </div>
          </div>
        </div>
        <!--second card-->
        <div class="col s12 l3">
          <div class="card">
            <div class="card-image">
              <img src="{% static "images/mexican.jpg" %}" alt="">
              <a href="" class="halfway-fab btn-floating pink pulse">
                <i class="material-icons">favorite</i>
              </a>
            </div>
            <div class="card-content">
              <span class="card-title">Rainbow Pasta Salad</span>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis aliquam orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
            <div class="card-action">
              <a href="">View Restaurant</a>
            </div>
          </div>
        </div>
        <!--third card-->
        <div class="col s12 l3">
          <div class="card">
            <div class="card-image">
              <img src="{% static "images/indian.jpg" %}" alt="">
              <a href="" class="halfway-fab btn-floating pink pulse">
                <i class="material-icons">favorite</i>
              </a>
            </div>
            <div class="card-content">
              <span class="card-title">Rainbow Pasta Salad</span>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis aliquam orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
            <div class="card-action">
                <a href="">View Restaurant</a>
            </div>
          </div>
        </div>
        <!--4th card-->
        <div class="col s12 l3">
            <div class="card">
              <div class="card-image">
                <img src="{% static "images/american.jpg" %}" alt="">
                <a href="" class="halfway-fab btn-floating pink pulse">
                  <i class="material-icons">favorite</i>
                </a>
              </div>
              <div class="card-content">
                <span class="card-title">Rainbow Pasta Salad</span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis aliquam orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
              </div>
              <div class="card-action">
                  <a href="">View Restaurant</a>
              </div>
            </div>
        </div>

      </div>
    </div>

  <!-- parallax -->

  <div class="parallax-container ">
    <div class="parallax">
      <img src="{% static "images/home.jpeg" %}" alt="" class="responsive-img" id="para1">
    </div>
  </div>

  <!-- services / tabs -->

  <section class="container section scrollspy " id="about">
    <div class="row">
      <div class="col s12 l4">
        <h2 class="red-text text-darken-4">What we're all about</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque voluptates officiis quae fuga ullam amet
          exercitationem ipsum eligendi quasi nemo, enim qui ratione dignissimos, quam fugit numquam ex harum? Ad?</p>
      </div>

      <div class="col s12 l6 offset-l2">
        <ul class="tabs">
          <li class="tab col s6">
            <a href="#dineout" class="red-text text-darken-4">Dine out</a>
          </li>

          <li class="tab col s6">
            <a href="#takeaway" class="red-text text-darken-4">Take away</a>
          </li>
        </ul>
        <div class="col s12 " id="dineout">
          <p class="flow-text red-text text-darken-4">DINE OUT</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, nostrum! Porro accusantium
            perferendis numquam, harum, totam libero earum molestias saepe nisi sequi ab natus blanditiis optio
            officiis provident nemo! Totam.</p>
        </div>
        <div class="col s12 " id="takeaway">
          <p class="flow-text red-text text-darken-4">TAKE AWAY</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, nostrum! Porro accusantium
            perferendis numquam, harum, totam libero earum molestias saepe nisi sequi ab natus blanditiis optio
            officiis provident nemo! Totam.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- parallax -->

  <div class="parallax-container">
    <div class="parallax">
      <img src="{% static "images/bulbs.jpg" %}" alt="" class="responsive-img" id="para2">
    </div>
  </div>

  <!-- contact form -->
  <section class="section container scrollspy" id="contact">
    <div class="row">
      <div class="col s12 l5">
        <h2 class="red-text text-darken-4">
          Get in touch
        </h2>
        <p>We are always looking for feedback and recommandation to make this app better for it's users. Let us know what we can do for you!</p>
        <h5 class="red-text text-darken-4">Are you a restaurant owner or manager?</h5>
        <p>See these fancy restaurant photos at the top of the page? They are our featured restaurants - your own restaurant could be amongst them - contact us to find out more. </p>
      </div>
      <div class="col s12 l5 offset-l2">
        <form action="POST">
          <div class="input-field">
            <i class="material-icons prefix orange-text text-darken-2">person</i>
            <input type="text" id="name">
            <label for="name">Your name </label>
          </div>
          <div class="input-field">
              <i class="material-icons prefix orange-text text-darken-2">email</i>
              <input type="email" id="email">
              <label for="email">Your email</label>
            </div>
          <div class="input-field">
            <i class="material-icons prefix orange-text text-darken-2">message</i>
            <textarea id="message" class="materialize-textarea red-text" cols="30" rows="10"></textarea>
            <label for="message">Your message</label>
          </div>
          <div class="input-field">
            <p>You're writing about...</p>
            <p>
              <label>
                <input type="checkbox">
                <span>Business inquiry</span>
              </label>
            </p>
            <p>
              <label>
                <input type="checkbox">
                <span>Suggestions, feedback and reclamations</span>
              </label>
            </p>
          </div>
          <div class="input-field center">
            <button class="btn red lighten-1 waves-effect waves-light">Submit</button>
          </div>
        </form>
      </div>
    </div>

  </section>
  {% endblock %}