mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-08 23:44:28 -04:00
Contact page
This commit is contained in:
Razi KAntorp
parent
64f9951941
commit
cc360e3d57
@ -1,6 +1,7 @@
|
||||
@extends('master')
|
||||
|
||||
@section('head')
|
||||
@section('head')
|
||||
<link href="{{ asset('vendor/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
|
||||
<link href="{{ asset('css/bootstrap.splash.css') }}" rel="stylesheet" type="text/css"/>
|
||||
<link href="{{ asset('css/splash.css') }}" rel="stylesheet" type="text/css"/>
|
||||
<link href="{{ asset('images/apple-touch-icon-114x114-precomposed.png') }}" rel="apple-touch-icon-precomposed" sizes="114x114">
|
||||
@ -9,7 +10,81 @@
|
||||
@stop
|
||||
|
||||
@section('body')
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
var $window = $(window);
|
||||
$('section[data-type="background"]').each(function () {
|
||||
var $bgobj = $(this);
|
||||
$(window).scroll(function () {
|
||||
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
|
||||
var coords = '50% ' + yPos + 'px';
|
||||
$bgobj.css({ backgroundPosition: coords });
|
||||
});
|
||||
});
|
||||
$("#feedbackSubmit").click(function() {
|
||||
//clear any errors
|
||||
contactForm.clearErrors();
|
||||
|
||||
//do a little client-side validation -- check that each field has a value and e-mail field is in proper format
|
||||
var hasErrors = false;
|
||||
$('#feedbackForm input,textarea').each(function() {
|
||||
if (!$(this).val()) {
|
||||
hasErrors = true;
|
||||
contactForm.addError($(this));
|
||||
}
|
||||
});
|
||||
var $email = $('#email');
|
||||
if (!contactForm.isValidEmail($email.val())) {
|
||||
hasErrors = true;
|
||||
contactForm.addError($email);
|
||||
}
|
||||
|
||||
//if there are any errors return without sending e-mail
|
||||
if (hasErrors) {
|
||||
return false;
|
||||
}
|
||||
|
||||
//send the feedback e-mail
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "library/sendmail.php",
|
||||
data: $("#feedbackForm").serialize(),
|
||||
success: function(data)
|
||||
{
|
||||
contactForm.addAjaxMessage(data.message, false);
|
||||
//get new Captcha on success
|
||||
$('#captcha').attr('src', '/vendor/securimage/securimage_show.php?' + Math.random());
|
||||
},
|
||||
error: function(response)
|
||||
{
|
||||
contactForm.addAjaxMessage(response.responseJSON.message, true);
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
//namespace as not to pollute global namespace
|
||||
var contactForm = {
|
||||
isValidEmail: function (email) {
|
||||
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
|
||||
return regex.test(email);
|
||||
},
|
||||
clearErrors: function () {
|
||||
$('#emailAlert').remove();
|
||||
$('#feedbackForm .help-block').hide();
|
||||
$('#feedbackForm .form-group').removeClass('has-error');
|
||||
},
|
||||
addError: function ($input) {
|
||||
$input.siblings('.help-block').show();
|
||||
$input.parent('.form-group').addClass('has-error');
|
||||
},
|
||||
addAjaxMessage: function(msg, isError) {
|
||||
$("#feedbackSubmit").after('<div id="emailAlert" class="alert alert-' + (isError ? 'danger' : 'success') + '" style="margin-top: 5px;">' + $('<div/>').text(msg).html() + '</div>');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<div class="navbar" style="margin-bottom:0px">
|
||||
<div class="container">
|
||||
<div class="navbar-inner">
|
||||
@ -23,5 +98,111 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="hero4" data-speed="2" data-type="background">
|
||||
<div class="container">
|
||||
<div class="caption">
|
||||
<h1>Contact us
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about contact">
|
||||
<div class="container">
|
||||
<div id="contact_form" class="row">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<h2>Have a question or just want to say hi?</h2>
|
||||
<p>Fill in the form below and we'll get back to you as soon as possible (within 24 hours). Hope to hear from you.</p>
|
||||
|
||||
<form role="form" id="feedbackForm">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
|
||||
<span class="help-block" style="display: none;">Please enter your name.</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
|
||||
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea rows="10" cols="100" class="form-control" id="message" name="message" placeholder="Message"></textarea>
|
||||
<span class="help-block" style="display: none;">Please enter a message.</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<button type="submit" id="feedbackSubmit" class="btn btn-primary btn-lg">Send Message <span class="glyphicon glyphicon-send"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-1 address">
|
||||
<h2>Other ways to reach us</h2>
|
||||
<p><span class="glyphicon glyphicon-send"></span><a href="mailto:hello@invoiceninja.com">hello@invoiceninja.com</a></p>
|
||||
<p><span class="glyphicon glyphicon-earphone"></span>+524 975 502</p>
|
||||
<address>
|
||||
<span class="glyphicon glyphicon-pencil"></span><strong>InvoiceNinja</strong><br>
|
||||
<span class="push">795 Folsom Ave, Suite 600<br></span>
|
||||
<span class="push">San Francisco, CA 94107<br></span>
|
||||
<span class="push">Isarel</span>
|
||||
</address>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="upper-footer white-bg">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3 center-block">
|
||||
<a href="#">
|
||||
<div class="cta">
|
||||
<h2 onclick="getStarted()">Invoice Now <span>+</span></h2>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="navbar" style="margin-bottom:0px">
|
||||
<div class="container">
|
||||
<div class="social">
|
||||
<!--
|
||||
<a href="http://twitter.com/eas_id"><span class=
|
||||
"socicon">c</span></a>
|
||||
-->
|
||||
<a href=
|
||||
"http://facebook.com/invoiceninja" target="_blank"><span class=
|
||||
"socicon">b</span></a> <a href=
|
||||
"http://twitter.com/invoiceninja" target="_blank"><span class=
|
||||
"socicon">a</span></a>
|
||||
<p>Copyright © 2014 InvoiceNinja. All rights reserved.</p>
|
||||
</div>
|
||||
|
||||
<div class="navbar-inner">
|
||||
<ul class="navbar-list">
|
||||
<li>{{ link_to('login', Auth::check() ? 'Continue' : 'Login' ) }}</li>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
<ul class="navbar-list">
|
||||
<li><a href="#">For developers</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
<li><a href="#">Terms & Conditions</a></li>
|
||||
<li><a href="#">Our Blog</a></li>
|
||||
</ul>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer><script src="{{ asset('/js/retina-1.1.0.min.js') }}" type="text/javascript"></script>
|
||||
|
||||
@stop
|
||||
@ -5,7 +5,7 @@ body {
|
||||
|
||||
.center-block { margin: 0 auto!; float: none; }
|
||||
|
||||
h1, h2 {
|
||||
h1, h2, .btn {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
@ -18,7 +18,7 @@ font-size: 45px;
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
a, a .cta h2, .socicon {
|
||||
a, a .cta h2, .socicon, .btn {
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
@ -34,6 +34,8 @@ text-decoration: none;
|
||||
.navbar {
|
||||
background: #2e2b2b;
|
||||
padding: 30px 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
ul.navbar-list {
|
||||
float: right;
|
||||
@ -138,7 +140,15 @@ a .cta:hover span {
|
||||
background-position: bottom center;
|
||||
background-size: cover;
|
||||
}
|
||||
.hero2 h1, .hero3 h1 {
|
||||
.hero4 {
|
||||
text-align: center;
|
||||
background-image: url(/images/hero-bg-4.jpg);
|
||||
padding: 150px 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom center;
|
||||
background-size: cover;
|
||||
}
|
||||
.hero2 h1, .hero3 h1, .hero4 h1 {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
@ -152,7 +162,10 @@ a .cta:hover span {
|
||||
section.features, section.upper-footer {
|
||||
margin: 60px 0;
|
||||
}
|
||||
|
||||
section.upper-footer.white-bg {
|
||||
margin: 0;
|
||||
padding: 60px 0;
|
||||
}
|
||||
section.features .col-md-3 .box{
|
||||
padding: 20px;
|
||||
background: #ebbe09;
|
||||
@ -201,6 +214,108 @@ section.about { padding: 70px 0; }
|
||||
section.about h2 { margin: 0 0 25px 0; font-size: 25px; text-transform:none;}
|
||||
section.about .screendump { background-color:#ccc; height:220px;}
|
||||
|
||||
|
||||
section.contact .address .glyphicon {
|
||||
background: #edd71e;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-radius: 50px;
|
||||
color: #1a1818;
|
||||
margin-right: 15px;
|
||||
}
|
||||
section.contact .address p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
section.contact .address span.push {
|
||||
margin-left: 55px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
section.contact .form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #555;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
|
||||
}
|
||||
|
||||
section.contact textarea.form-control {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #2299c0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
height: 63px;
|
||||
line-height: 63px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.btn-primary:hover {background-color: #2299c0;}
|
||||
section.contact button span.glyphicon {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
float: right;
|
||||
}
|
||||
section.contact .btn span.glyphicon {
|
||||
background-color: #1e84a5;
|
||||
height: 63px;
|
||||
line-height: 63px;
|
||||
width: 63px;
|
||||
margin-top: -1px;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
-moz-transition: all 0.1s ease-in-out;
|
||||
-o-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
section.contact .btn:hover span.glyphicon {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
||||
section.contact textarea:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="color"]:focus,
|
||||
.uneditable-input:focus {
|
||||
border-color: rgba(0, 0, 0, 0.8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9;
|
||||
/* IE6-9 */
|
||||
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0), 0 0 8px rgba(0,0,0,.2) !important;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0), 0 0 8px rgba(0,0,0,.2) !important;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,0), 0 0 8px rgba(0,0,0,.2) !important;
|
||||
}
|
||||
section.contact address { display: inline-block;}
|
||||
|
||||
footer .navbar-inner {
|
||||
float: right;
|
||||
}
|
||||
@ -284,7 +399,7 @@ margin-bottom: 10px;
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
@ -311,7 +426,7 @@ margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.hero2, .hero3 {
|
||||
.hero2, .hero3, .hero4 {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
@ -326,6 +441,9 @@ margin-bottom: 10px;
|
||||
section.features, section.upper-footer {
|
||||
margin: 30px 0;
|
||||
}
|
||||
section.upper-footer.white-bg {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
section.features .col-md-3 .box{
|
||||
margin-bottom: 10px;
|
||||
@ -346,6 +464,20 @@ section.about {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
section.about.contact {
|
||||
padding: 30px 0 0 0;
|
||||
}
|
||||
section.contact .address {margin: 0;}
|
||||
section.contact .address p {text-align:center;}
|
||||
section.contact .address .glyphicon {
|
||||
display:block;
|
||||
margin: 0 auto 7px auto;
|
||||
float: none;
|
||||
}
|
||||
section.contact .address span.push {
|
||||
margin-left: 0;
|
||||
}
|
||||
section.contact .btn { margin-bottom: 5px; }
|
||||
section.about p {
|
||||
margin-bottom: 0;
|
||||
margin-top: 10px;
|
||||
@ -361,6 +493,12 @@ section.about.white-bg .screendump {
|
||||
section.about h2 {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
#contact_form {
|
||||
margin: 0;
|
||||
}
|
||||
#feedbackForm {
|
||||
margin-top: 15px;
|
||||
}
|
||||
footer .navbar-inner {
|
||||
float: none;
|
||||
}
|
||||
@ -374,6 +512,7 @@ footer .social {
|
||||
footer .social .socicon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
BIN
public/images/hero-bg-4.jpg
Normal file
BIN
public/images/hero-bg-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Loading…
x
Reference in New Issue
Block a user