mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-09 03:14:30 -04:00
Contact page
This commit is contained in:
Razi KAntorp
parent
64f9951941
commit
cc360e3d57
@ -1,6 +1,7 @@
|
|||||||
@extends('master')
|
@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/bootstrap.splash.css') }}" rel="stylesheet" type="text/css"/>
|
||||||
<link href="{{ asset('css/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">
|
<link href="{{ asset('images/apple-touch-icon-114x114-precomposed.png') }}" rel="apple-touch-icon-precomposed" sizes="114x114">
|
||||||
@ -9,7 +10,81 @@
|
|||||||
@stop
|
@stop
|
||||||
|
|
||||||
@section('body')
|
@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="navbar" style="margin-bottom:0px">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
@ -23,5 +98,111 @@
|
|||||||
</div>
|
</div>
|
||||||
</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
|
@stop
|
||||||
@ -5,7 +5,7 @@ body {
|
|||||||
|
|
||||||
.center-block { margin: 0 auto!; float: none; }
|
.center-block { margin: 0 auto!; float: none; }
|
||||||
|
|
||||||
h1, h2 {
|
h1, h2, .btn {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
@ -18,7 +18,7 @@ font-size: 45px;
|
|||||||
h2 {
|
h2 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
a, a .cta h2, .socicon {
|
a, a .cta h2, .socicon, .btn {
|
||||||
-webkit-transition: all 0.3s ease-in-out;
|
-webkit-transition: all 0.3s ease-in-out;
|
||||||
-moz-transition: all 0.3s ease-in-out;
|
-moz-transition: all 0.3s ease-in-out;
|
||||||
-o-transition: all 0.3s ease-in-out;
|
-o-transition: all 0.3s ease-in-out;
|
||||||
@ -34,6 +34,8 @@ text-decoration: none;
|
|||||||
.navbar {
|
.navbar {
|
||||||
background: #2e2b2b;
|
background: #2e2b2b;
|
||||||
padding: 30px 0;
|
padding: 30px 0;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
ul.navbar-list {
|
ul.navbar-list {
|
||||||
float: right;
|
float: right;
|
||||||
@ -138,7 +140,15 @@ a .cta:hover span {
|
|||||||
background-position: bottom center;
|
background-position: bottom center;
|
||||||
background-size: cover;
|
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;
|
color: #fff;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@ -152,7 +162,10 @@ a .cta:hover span {
|
|||||||
section.features, section.upper-footer {
|
section.features, section.upper-footer {
|
||||||
margin: 60px 0;
|
margin: 60px 0;
|
||||||
}
|
}
|
||||||
|
section.upper-footer.white-bg {
|
||||||
|
margin: 0;
|
||||||
|
padding: 60px 0;
|
||||||
|
}
|
||||||
section.features .col-md-3 .box{
|
section.features .col-md-3 .box{
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #ebbe09;
|
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 h2 { margin: 0 0 25px 0; font-size: 25px; text-transform:none;}
|
||||||
section.about .screendump { background-color:#ccc; height:220px;}
|
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 {
|
footer .navbar-inner {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
@ -284,7 +399,7 @@ margin-bottom: 10px;
|
|||||||
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
@ -311,7 +426,7 @@ margin-bottom: 10px;
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.hero2, .hero3 {
|
.hero2, .hero3, .hero4 {
|
||||||
padding: 50px 0;
|
padding: 50px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -326,6 +441,9 @@ margin-bottom: 10px;
|
|||||||
section.features, section.upper-footer {
|
section.features, section.upper-footer {
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
}
|
}
|
||||||
|
section.upper-footer.white-bg {
|
||||||
|
padding: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
section.features .col-md-3 .box{
|
section.features .col-md-3 .box{
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
@ -346,6 +464,20 @@ section.about {
|
|||||||
padding: 30px 0;
|
padding: 30px 0;
|
||||||
text-align: center;
|
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 {
|
section.about p {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
@ -361,6 +493,12 @@ section.about.white-bg .screendump {
|
|||||||
section.about h2 {
|
section.about h2 {
|
||||||
margin: 0 0 15px 0;
|
margin: 0 0 15px 0;
|
||||||
}
|
}
|
||||||
|
#contact_form {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#feedbackForm {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
footer .navbar-inner {
|
footer .navbar-inner {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
@ -374,6 +512,7 @@ footer .social {
|
|||||||
footer .social .socicon {
|
footer .social .socicon {
|
||||||
margin-right: 8px;
|
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