Source

article / article / templates / contact.html

Full commit
{% extends "theme_base.html" %}

{% block extra_head %}
<script type="text/javascript">
    $(document).ready(function () {
        $('.answer-text').on('show', function () {
        if ($(this).parent('li').hasClass('accordion-closed')) {
            $(this).parent('li').removeClass('accordion-closed').addClass('accordion-open');
        } 
    });
    
    $('.answer-text').on('hidden', function () {
        if ($(this).parent('li').hasClass('accordion-open')) {
            $(this).parent('li').removeClass('accordion-open').addClass('accordion-closed');
        } 
    });
    
    $('ul.faq-categories a').click( function(e){
        e.preventDefault();
        var cat_id = $(this).data('id');
        $('.faq-search .faq-cat').hide();
        $('.faq-search .faq-cat[data-id=' + cat_id + ']').show();
        $('.search-wrapper').stop().animate({left: -540}, 'slow');
    });
    
    $('.detail-panel .faq-back').click( function(e){
        e.preventDefault();
        $('.search-wrapper').stop().animate({left: 0}, 'slow', function() {
            $('.faq-search .faq-cat').hide();
        });
    });
    
});
</script>
{% endblock %}

{% block head_title %} Contact Form {% endblock %}
{% block body_class %}contactPage{% endblock %}

{% block body %}   

{% load generic_flatblocks %}
{% load verbatim %}

<div id="content">

    <div class="container">
        <div class="row">
            <div class="span15">
                <ul class="breadc clearfix">
                    <li><a href="/">Home</a></li>
                    <li><a href="{% url contact %}">Contact</a></li>
                </ul>
                <h1 class="page-title">Contact</h1>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div id="outer-wrapper" ng-app="hhfaq">

      <div class="container">

        <div class="wrapper-box page">
          <!-- Content -->
          <div class="row">
            <div class="span7">
                {% if success %}
                    <span class="btn btn-success"><i class="icon-ok icon-white"></i> Your message has been sent!</span>
                {% else %}
                    <script src="{{ STATIC_URL }}js/angular.min.js"></script>
                    <script src="{{ STATIC_URL }}js/angular-resource.min.js"></script>
                    <script src="{{ STATIC_URL }}js/faq.js"></script>
                {% endif %}
             <h2 class="title">Have a Question?</h2>
             <h3 class="subtitle">With any luck, we already have an answer.</h3>
              <div class="faq-search">
                <div class="faq-search-input-area">
                    <form method="#">                   
                        <input ng-model="userq" type="text" id="id_faq_search" name="faqSearch" placeholder="Type a Keyword">
                    </form>
                </div><!-- / faq search input area -->
                <div class="search-wrapper">
                    <div class="faq-questions main-panel">
                        <div class="faq-questions-header">
                            <h4>See popular questions about...</h4>
                        </div><!-- / faq questions header -->
                        <ul class="faq-categories">
                            <li><a href="#" data-id="1">Nutrition</a></li>
                            <li><a href="#" data-id="2">Low-Fat Cooking</a></li>
                            <li><a href="#" data-id="3">Substitutions</a></li>
                            <li><a href="#" data-id="4">All FAQs</a></li>
                        </ul>
                    </div>
                    
                    <div class="faq-questions detail-panel">
                        {% verbatim %}
                        <div class="faq-cat" data-id="1" ng-controller="FAQCtrl">
                            <div class="faq-questions-header">
                                <a href="#" class="faq-back">Back</a>
                                <h4>About Nutrition</h4>
                            </div><!-- / faq questions header -->
                            <ul class="faq-questions-list" ng-repeat="faq in questions.objects | filter:userq">
                                <li data-toggle="collapse" data-target="#answer-text-{{ faq.id }}" class="accordion-question accordion-closed">
                                    <span class="question-text">{{ faq.post_title }}</span>
                                    <div class="collapse answer-text" id="answer-text-{{ faq.id }}" ng-bind-html-unsafe="faq.post_content"></div>
                                </li>
                                
                            </ul>
                        </div><!-- / faq-cat -->
                        {% endverbatim %}
                        
                        <div class="faq-cat" data-id="2">
                            <div class="faq-questions-header">
                                <a href="#" class="faq-back">Back</a>
                                <h4>About Low-Fat Cooking</h4>
                            </div><!-- / faq questions header -->
                            <ul class="faq-questions-list">
                                <li data-toggle="collapse" data-target="#answer-text-4" class="accordion-question accordion-closed"><span class="question-text">Example of a question might go here?</span>
                                    <div class="collapse answer-text" id="answer-text-4">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
                                    </div>
                                </li>
                                
                                <li data-toggle="collapse" data-target="#answer-text-5" class="accordion-question accordion-closed"><span class="question-text">Another example question in this category?</span>
                                    <div class="collapse answer-text" id="answer-text-5">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
                                    </div>
                                </li>
                                
                                <li data-toggle="collapse" data-target="#answer-text-6" class="accordion-question accordion-closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
                                    <div class="collapse answer-text" id="answer-text-6">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
                                    </div>
                                </li>
                            </ul>
                        </div><!-- / faq-cat -->

                        <div class="faq-cat" data-id="3">
                            <div class="faq-questions-header">
                                <a href="#" class="faq-back">Back</a>
                                <h4>About Substitutions</h4>
                            </div><!-- / faq questions header -->
                            <ul class="faq-questions-list">
                                <li data-toggle="collapse" data-target="#answer-text-7" class="accordion-question accordion-closed"><span class="question-text">Example of a question might go here?</span>
                                    <div class="collapse answer-text" id="answer-text-7">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
                                    </div>
                                </li>
                                
                                <li data-toggle="collapse" data-target="#answer-text-8" class="accordion-question accordion-closed"><span class="question-text">Another example question in this category?</span>
                                    <div class="collapse answer-text" id="answer-text-8">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
                                    </div>
                                </li>
                                
                                <li data-toggle="collapse" data-target="#answer-text-9" class="accordion-question accordion-closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
                                    <div class="collapse answer-text" id="answer-text-9">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
                                    </div>
                                </li>
                            </ul>
                        </div><!-- / faq-cat -->

                        <div class="faq-cat" data-id="4">
                            <div class="faq-questions-header">
                                <a href="#" class="faq-back">Back</a>
                                <h4>About Just Getting Started</h4>
                            </div><!-- / faq questions header -->
                            <ul class="faq-questions-list">
                                <li data-toggle="collapse" data-target="#answer-text-10" class="accordion-question accordion-closed"><span class="question-text">Example of a question might go here?</span>
                                    <div class="collapse answer-text" id="answer-text-10">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
                                    </div>
                                </li>
                                
                                <li data-toggle="collapse" data-target="#answer-text-11" class="accordion-question accordion-closed"><span class="question-text">Another example question in this category?</span>
                                    <div class="collapse answer-text" id="answer-text-11">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
                                    </div>
                                </li>
                                
                                <li data-toggle="collapse" data-target="#answer-text-12" class="accordion-question accordion-closed"><span class="question-text">Don't forget to dynamically generate CSS ids?</span>
                                    <div class="collapse answer-text" id="answer-text-12">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lectus eu orci euismod at cursus est vestibulum. Sed sit amet sapien sit amet odio dictum ullamcorper in eu ipsum. In hac habitasse platea dictumst.</p>
                                        <p>Nunc ante ipsum, interdum ac semper ut, mollis a nibh. Duis porta feugiat est, et accumsan purus sollicitudin ac. Maecenas adipiscing quam faucibus ligula fringilla a convallis magna egestas. Nullam vitae porttitor arcu. Donec sed adipiscing metus.</p>
                                        <p>Vestibulum dapibus tempus odio nec dictum. Curabitur placerat cursus leo id euismod. Ut at massa.</p>
                                    </div>
                                </li>
                            </ul>
                        </div><!-- / faq-cat -->
                        
                    </div>
                </div><!-- /search-wrapper -->
            </div><!-- / faq search -->
                <h3 class="subtitle">Still need to contact Lindsay?</h2>
                <form action="/about/contact/" method="post">
                    {% csrf_token %}
                    <hr style="clear:both;">
                    <p style="clear:both;">
                        <h4 class="contactlindsay">Still need to Contact Lindsay?</h4>
                        <textarea id="id_message" rows="10" cols="40" name="message" class="span5" placeholder="Type your message here..."></textarea>
                    </p>
                    <p>
                        <span class="add-on"><i class="icon-user"></i></span> 
                        <input type="text" name="name" id="id_name" placeholder="Name">
                    </p>
                    <p>
                        <i class="icon-envelope"></i> 
                        <input type="text" name="email" id="id_email" placeholder="Email">
                    </p>
                    <input type="submit" value="Send Email">
                </form>
            </div>

          </div>
      </div>

  </div><!-- / outer-wrapper -->

</div> <!-- / content -->

{% endblock %}