198 lines
8.4 KiB
HTML
198 lines
8.4 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block head %}
|
|
<script>
|
|
$(function() {
|
|
// Show modal for live youtube conference
|
|
{% if popup_header.value %}
|
|
$('#liveModal').modal('show');
|
|
{% endif %}
|
|
|
|
$('#top').click(function() {
|
|
$("html, body").animate({ scrollTop: 0 }, "slow");
|
|
});
|
|
|
|
$('#contact-submit').click(function() {
|
|
var name = $('#contact-name');
|
|
var email = $('#contact-email');
|
|
var subject = $('#contact-subject');
|
|
var body = $('#contact-body');
|
|
|
|
function validateEmail($email) {
|
|
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
|
|
return emailReg.test( $email );
|
|
}
|
|
|
|
if(!name.val()) name.effect('shake');
|
|
if(!email.val() || !validateEmail(email.val())) email.effect('shake');
|
|
if(!subject.val()) subject.effect('shake');
|
|
if(!body.val()) body.effect('shake');
|
|
|
|
if(name.val() && email.val() && validateEmail(email.val()) && subject.val() && body.val()) {
|
|
$.post({% url 'contact' %}, {
|
|
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
|
|
name: name.val(),
|
|
email: email.val(),
|
|
subject: subject.val(),
|
|
body: body.val()
|
|
}).done(function(resp) {
|
|
if(resp['success']) {
|
|
name.val('');
|
|
email.val('');
|
|
subject.val('');
|
|
body.val('');
|
|
$('#contact-success').collapse('show');
|
|
setTimeout(function() {$('#contact-success').collapse('hide');}, 5000);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<!-- Home -->
|
|
<div class="container-fluid baby">
|
|
<div class="row h-100">
|
|
<div class="col-sm-6 col-md-5 py-5" style="background-color: rgba(0, 48, 91, 0.65)">
|
|
<h1 class="float-right d-inline-block mr-5 pl-4 text-white"><strong>
|
|
Ontario<br>Association Of<br>Child<br>Protection<br>Lawyers
|
|
</strong></h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Information -->
|
|
<div class="container-fluid bg-light-blue py-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-4">
|
|
<h2 class="text-dark-primary">INFORMATION FOR THE PUBLIC</h2>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4" style="font-size: 22px">
|
|
<ul class="mb-0">
|
|
<li class="text-dark-primary">FIND A CHILD PROTECTION LAWYER</li>
|
|
<li class="text-dark-primary">FIND AN EXPERT</li>
|
|
<li class="text-dark-primary">RESEARCH</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4" style="font-size: 22px">
|
|
<ul class="mb-0">
|
|
<li class="text-dark-primary">BECOME A MEMBER</li>
|
|
<li class="text-dark-primary">HOT TOPICS IN CHILD PROTECTION</li>
|
|
<li class="text-dark-primary">SEMINARS AND CLE</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Our Objectives -->
|
|
<div class="container-fluid bg-dark-primary text-white py-5">
|
|
<div class="container">
|
|
<div class="row text-center">
|
|
<h2 class="mx-auto mb-5">OUR OBJECTIVES</h2>
|
|
<div style="font-size: 22px">
|
|
{{ objectives.value | safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page Brake -->
|
|
<div class="cotainer-fluid hands"></div>
|
|
|
|
{% if attorneys %}
|
|
<!-- Attorneys -->
|
|
<div class="cotainer-fluid bg-light-blue py-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<h2 class="mx-auto text-dark-primary">CHARTER MEMBERS</h2>
|
|
</div>
|
|
<div class="row">
|
|
{% for attorney in attorneys %}
|
|
<a class="col-4 text-center pt-5" href="{% url 'attorney' attorney.id %}">
|
|
<div>
|
|
<img class="pb-3" src="/media/{{ attorney.image }}" style="width: auto; max-width: 100%; height: 200px"/>
|
|
<h5 class="text-dark-primary">{{ attorney.first_name }} {{ attorney.last_name }}</h5>
|
|
<span class="text-light-primary">{{ attorney.position }}</span>
|
|
<hr>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="col-12 mt-3 text-center">
|
|
<a class="text-dark-primary" href="{% url 'members' %}">View All</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Contact -->
|
|
<div class="container-fluid architecture text-white">
|
|
<div class="row h-100">
|
|
<div class="col-lg-5 py-5 d-none d-sm-block" style="background-color: rgba(0, 63, 120, 0.95)">
|
|
<h1 class="float-lg-right pl-4 d-inline-block mr-5 text-white"><strong>
|
|
Ontario <br class="d-none d-lg-inline">Association Of <br class="d-none d-lg-inline"> Child<br class="d-none d-lg-inline"> Protection<br class="d-none d-lg-inline"> Lawyers
|
|
</strong></h1>
|
|
</div>
|
|
<div class="col-lg-7 py-5" style="background-color: rgba(0, 63, 120, 0.8)">
|
|
<div class="col-lg-8 pl-4">
|
|
{{ contact.value|safe }}
|
|
<div class="form-row">
|
|
<div id="contact-success" class="col-12 collapse" aria-expanded="false">
|
|
<div class=" alert alert-success">Successfully sent email!</div>
|
|
</div>
|
|
<div class="form-group col-12 col-md-6">
|
|
<input id="contact-name" class="form-control" placeholder="Name">
|
|
</div>
|
|
<div class="form-group col-12 col-md-6">
|
|
<input id="contact-email" class="form-control" placeholder="Email">
|
|
</div>
|
|
<div class="form-group col-12">
|
|
<input id="contact-subject" class="form-control" placeholder="Subject">
|
|
</div>
|
|
<div class="col-12">
|
|
<textarea id="contact-body" class="form-control h-100" placeholder="Message" rows="4"></textarea>
|
|
</div>
|
|
<div class="col-12 mt-2">
|
|
<button id="contact-submit" class="btn btn-primary float-right">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back to top -->
|
|
<div class="container-fluid bg-dark-primary text-center py-4">
|
|
<a id="top" class="text-white curs-pointer">
|
|
<img class="mx-auto" src="{% static 'main/img/arrow.png' %}" style="transform: rotate(180deg)">
|
|
<br>
|
|
BACK TO TOP
|
|
</a>
|
|
</div>
|
|
|
|
{% if popup_header.value %}
|
|
<div id="liveModal" class="modal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog modal-lg modal-fade" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">{{ popup_header.value | safe }}</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{{ popup_body.value | safe }}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %} |