-
Notifications
You must be signed in to change notification settings - Fork 1
/
home.html
153 lines (107 loc) · 5.49 KB
/
home.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fourcrawl</title>
<meta name="description" content="Fourcrawl - the foursquare pub crawl manager">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6238402-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link href="{{STATIC_URL}}css/bootstrap.min.css" rel="stylesheet">
<link href="{{STATIC_URL}}css/fourcrawl.css" rel="stylesheet">
<script type="text/javascript" src="{{STATIC_URL}}js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}js/jquery.ba-bbq.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body {
padding-top: 60px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="images/close.png" class="btn_close" title="Close Window" alt="Close" /></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="#" style="color:#008dcb">four<span style="color:#f89406" class="italics">crawl</span></a>
<ul class="nav">
<li><a href="#?w=500" rel="about" class="poplight">About</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit" style="margin-bottom:0;padding:20px 0 1px 20px;">
<h1><img src="{{STATIC_URL}}images/fourcrawl.png" alt="fourcrawl"/></h1>
<p style="padding-left: 20px">Fourcrawl is probably the best pub crawl mapping and planning system in the world. We say probably, as we've not actually
looked for another, but you should believe us as we're pro's.</p>
</div>
<div class="hero-unit" style="margin:0;padding:0;">
<img src="{{STATIC_URL}}images/intro_map.png" width="939" height="292"/>
</div>
<div class="hero-unit" style="margin-top:0;padding-top:0px;">
<p style="text-align:center;margin-bottom:20px;">Want to begin / have a play? Simply login with your foursquare account below.</p>
<div style="padding-left:20px;text-align:center">
<p><a href="/createcrawl/" class="btn primary large">Sign in with foursquare</a>
<a style="padding-left:20px;" href="https://foursquare.com/signup/">Don't have a foursquare account?</a></p>
</div>
</div>
<footer>
<p>© some guys from a foursquare hack event in Cardiff... yeah</p>
</footer>
</div> <!-- /container -->
<!-- about popup -->
<div id="about" class="popup_block">
<h2>About</h2>
<p>Fourcrawl was developed over one weekend by a collection of individuals taking part in the global foursquare hack-a-thon.</p>
<p></p>
</div>
</body>
</html>