-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (150 loc) · 7.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Alexes’ Wedding</title>
<meta name="description" content="The Wedding of Alex Jones and Alex Conlin-Oakley on 28th June 2014 at Queens' College, Cambridge">
<meta name="keywords" content="Alex, Jones, Conlin-Oakley, wedding, marriage, cambridge, June, 2014, 28, 28th, Queens, Queens', Queens College">
<meta name="author" content="Alex Conlin-Oakley and Alex Jones">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48408082-1', 'thealexeswedding.co.uk');
ga('send', 'pageview');
</script>
<!-- /Google Analytics -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.validate.js"></script>
<!-- Email sign-up modal display -->
<script type="text/javascript">
$(window).load(function() {
if($.cookie('emailsubmitted') != null && $.cookie('emailsubmitted') != "")
{
$("div#myModal.modal").hide();
}
else
{
$('#myModal').modal('show');
$.cookie('emailsubmitted', 'yes');
}
});
</script>
<!-- /Email sign-up modal display -->
<!-- weddingemail google apps script validation -->
<script type="text/javascript">
function submitForm(){
document.getElementById('theForm').submit();
$.cookie('emailsubmitted', 'yes', { expires: 365, path: '/' });
document.getElementById('successful-submission').innerHTML="Submitted";
};
</script>
<!-- /weddingemail google apps script validation -->
</head>
<body id="front-page-body">
<div class="container" id="front-page-heading">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="navbar-brand" href="#"><img src="images/alex_alex_horiz_132x40.gif" alt="Alex and Alex"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <!-- TODO: Change link to ../ in production -->
<li><a href="savethedate.html">Save the date</a></li>
<li><a href="invitation.html">Invitation</a></li>
<li><a href="programme.html">Programme</a></li>
<li><a href="weddinglist.html">Wedding List</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="mailto:thealexeswedding@gmail.com">Contact<span id="contact-envelope" class="glyphicon glyphicon-envelope"></span></a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- /.navbar -->
<img src="images/homepage_date_new.png" class="homepage-date" alt="28 June 2014">
</div> <!-- /container -->
<!-- Script links -->
<script src="js/bootstrap.js"></script>
<!-- /Script links -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Please sign up for email updates!</h4>
</div><!-- /modal-header -->
<div class="modal-body">
Hello and thanks for visiting our website! We hope you're looking forward to our wedding as much as we are! Please enter your name and email address below so that we can update you by email when we finalise the plans for stuff like parking closer to the date. <p><p>
We are also finalising the wedding list and will email you all about that too! :)<p>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe>
<form method="post" action="https://script.google.com/macros/s/AKfycbzMXogHqQlTbCA0o0dA7h1OTT9SUAtzHfSkQC1bm7XIfzThvYzr/exec" name="theForm" id="theForm" target="hidden_iframe">
<div class="input-group">
<label class="input-group-addon" for="name">Name</label>
<div class="controls">
<input type="text" name="name" id="name" class="form-control" placeholder="e.g. Alex Guest">
</div>
<span class="help-block"></span>
</div>
<div class="input-group">
<label class="input-group-addon" for="email">Email address</label>
<div class="controls">
<input type="email" name="email" id="email" class="form-control" placeholder="e.g. guest@example.com">
</div>
<span class="help-block"></span>
</div>
<div class="button-group">
<button type="button" value="Submit" class="btn btn-primary" onclick="submitForm();">Submit</button>
<div id="successful-submission"></div>
</div>
</form>
<!-- Form validation -->
<script>
$("#theForm").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
},
highlight: function(element) {
$(element).closest('.input-group').removeClass('has-success').addClass('has-error');
},
success: function(element) {
$(element).closest('.input-group').removeClass('has-error').addClass('has-success');
},
errorElement: 'input-group',
errorClass: 'help-block',
errorPlacement: function(error, element) {
error.insertAfter(element.parent().parent());
}
});
</script>
<!-- /Form validation -->
</div><!-- /modal-body -->
</div><!-- /modal-content -->
</div><!-- /modal-dialog -->
</div><!-- /modal fade -->
</body>
</html>