{% load compressed %}{% load i18n %}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
<head>
<title>{{ site_name }}</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="{{ STATIC_URL }}blueprint/screen.css"
	type="text/css" media="screen,projection" />
<link rel="stylesheet" href="{{ STATIC_URL }}blueprint/print.css"
	type="text/css" media="print" />
<!--[if IE]>
    <link rel="stylesheet" href="{{ STATIC_URL }}blueprint/ie.css" type="text/css" media="screen,projection"/>
    <![endif]-->
{% compressed_css "jquery.lightbox-0.5" %}
<link rel="shortcut icon" href="{{ STATIC_URL }}desktop/images/favicon.png" />

<style type="text/css">

#footer {
    margin-top: 25px;
    padding-top: 10px;
    background: #fdfce5;
    border-top: 12px solid #ccc;
    font-size: 0.9em;
    box-shadow: 0 0px 10px black;
    -webkit-box-shadow: 0 0px 10px black;
/*    -moz-box-shadow: 0 0px 10px black;  # Results in sideways scrolling in Firefox */
}

h1 {
	margin-bottom: 0;
}

h2 {
    font-size: 1.4em;
    margin-bottom: 0.4em;
}

body {
	background-color: #fcfcf3;
	color: #444;
}

a {
    color: #1B2F69;
    text-decoration: none;
}

a:hover {
    color: #5A2C2E;
    text-decoration: underline;
}

div.content { 
	margin: 0 auto 1em auto;
	width: 960px;
	
	background: #2a3f5f;
	background: -moz-linear-gradient(center top, #012348, #cfcfcf, #678aa3);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #012348), color-stop(0.5, #cfcfcf), color-stop(1, #678aa3));
	
	box-shadow: 2px 2px 10px black;
	-webkit-box-shadow: 2px 2px 10px black;
	-moz-box-shadow: 2px 2px 10px black;
}

div.background {
	padding-bottom: 20px;
	border-bottom: 1px solid #666;
}

img.brandmark {
	margin: 22px 0;;
	float:right;
}
img.logo {
	margin: 0 0 0 22px;
}

p.strap-line {
	margin: -5px 0 0 25px;
	color: #fff;
	font-size: 1em;
	font-weight: bold;
}

div.blurb {
    padding: 20px 0; 
    border-radius: 3px;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	
	box-shadow: 0 0 3px #AAA;
	-moz-box-shadow: 0 0 3px #AAA;
	-webkit-box-shadow: 0 0 3px #AAA;
	
	background: #fff;
	background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.99), rgba(248,248,248, 0.99));
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.99)), to(rgba(248,248,248, 0.99)));
}

/* Social Networking Item list */
div.social-items>ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
div.social-items li {
	border-top: 1px solid #aaa;
	padding: 0.3em 0;
}
div.social-items li:first-child {
	border-top: 0;
}
div.social-items p {
	margin-bottom: 0;
}
div.social-items h2 {
	margin-bottom: 0.2em;
}
div.social-items h3 {
	margin-bottom: 0;
	font-size: 1.1em;
}
/* END Social Networking Item list */


div#features {
    padding-top: 10px;
    padding-bottom: 10px;
	background: #FCFCFC;
	background: -moz-linear-gradient(center top, #FFF, #EFEFEF, #EFEFEF);
	background: -webkit-gradient(linear, right top, right bottom, from(#FFF), to(#EFEFEF), to(#EFEFEF));
	border-top: 1px solid #dfdfdf;
}

div#features div#feature-margin h2 {
	font-size: 3em;
}

div.accessing {
	text-align: center;
	font-size: 1em;
	color: #555; 
	border: 2px solid #eee;
	padding: 8px 15px;
	
	background: #fcfcf3;
	background: -moz-linear-gradient(center top, #fffff7, #fdfce5,#fdfce5);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fffff7), color-stop(0.5, #fdfce5));
	
	border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

div.accessing p {
	margin-bottom: 0;
}

div#discover {
	font-size:1.2em; 
	margin-bottom: 4px; 
	margin-top: 4px;"
}

span.domain-link {
	font-size: 1.7em;
}

ul.feature-link-list {
    list-style:none;
}

ul.feature-link-list li {
    font-size: 1.2em;
    padding-bottom: 3px;
}

#eduroam {
    padding: 8px;
    width: 280px;
    float: right;
    
    border: 2px solid #eee;
    
    background: #fcfcf3;
    background: -moz-linear-gradient(center top, #fffff7, #fdfce5,#fdfce5);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fffff7), color-stop(0.5, #fdfce5));
    
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

a#wireless-setup {
    background-image: url('{{ STATIC_URL }}desktop/images/eduroam.png');
    background-position: center left;
    background-repeat: no-repeat;
    padding: 8px 5px 8px 95px; 
    display: block;
}

a.go-to-top {
    float: right;
}

div.align-center {
    text-align: center;
}

div.align-right {
    text-align: right;
}

img.shadow {
    box-shadow:0 0 10px black;
    -moz-box-shadow: 3px 3px 10px black;
    -webkit-box-shadow: 2px 2px 4px #444;
}

</style>

{% compressed_js "jquery-1.4.2" %}
{% compressed_js "jquery.lightbox-0.5.min" %}
{% compressed_js "desktop_about" %}


</head>

<body>
<div class="content">
<div class="container">
<div class="span-44 background">
	<div class="span-36 prepend-top">
		<h1><img class="logo" src="{{ STATIC_URL }}desktop/images/logo.png"	alt="{{ site_name }}" /></h1>
		<p class="strap-line">{% trans "Your university and city on the move" %}</p>
	</div>
	<div class="span-7 append-1 last">
		<img class="brandmark" src="{{ STATIC_URL }}desktop/images/brandmark.gif" width="115" height="115" alt="University of Oxford" />
	</div>
	<div class="prepend-1 span-42 append-1 last">
	    <div class="blurb">
		<div class="introduction">
		    <div class="prepend-1 span-15">

			<h2>{% trans "A wealth of information from across the University and City." %}</h2>
    
			<p>
			    {% blocktrans %}Whoever you are, {{ site_name }} is your central guide to help you do your day-to-day tasks. Whether it's <a href="#library">finding a library book</a>, <a href="#bus">checking the next bus</a> or even finding <a href="#places">what time the nearest post box is collected</a> {{ site_name }} is for you.{% endblocktrans %}
			</p>

			<div id="discover" class="accessing">
				<p><a href="#features">
				{% blocktrans %}Discover {{ site_name }}'s features{% endblocktrans %}</a></p>
			</div>

			<h2>{% trans "You do not need a fancy phone" %}</h2>
			<p>{% blocktrans %}A device with a web browser is all you need to be able to use most of the features below. Of course if you're lucky enough to own a smartphone you can use more advanced features like your GPS.{% endblocktrans %}</p>

			<div class="accessing">
			    <p>
				{% blocktrans with request.HTTP_HOST as hostname %}Use it now by visiting <br /><span class="domain-link"><a class="preview-link" href="/?preview=true">{{ hostname }}</a></span><br />using your mobile device's web browser, <a class="preview-link" href="/?preview=true">preview on your computer</a>or click on and scan a 2D barcode below {% endblocktrans %}<br/>
				{# URLS to 2D barcodes #}
				<a class="lightbox" href="{{ STATIC_URL }}desktop/images/barcodes/qrcode.png" title="QR Code">
				    <img src="{{ STATIC_URL }}desktop/images/barcodes/qrcode-small.png" alt="QR Code" /></a>
				<a class="lightbox" href="{{ STATIC_URL }}desktop/images/barcodes/datamatrix.png" title="DataMatrix Code">
				    <img src="{{ STATIC_URL }}desktop/images/barcodes/datamatrix-small.png" alt="DataMatrix Code" /></a>
				<a class="lightbox" href="{{ STATIC_URL }}desktop/images/barcodes/mstag.png" title="Microsoft Tag">
				    <img src="{{ STATIC_URL }}desktop/images/barcodes/mstag-small.png" alt="Microsoft Tag" /></a>
			    </p>
			</div>
		    </div>
		</div>

		<div class="span-24 append-1 last align-center"><img
		    src="{{ STATIC_URL }}desktop/images/phones.png" height="500" width="450"
		    alt="{% blocktrans %}Various phones showing {{ site_name }}{% endblocktrans %}" />
		</div>

		<div class="prepend-1 span-40 append-1 last prepend-top">
		    <hr />
		</div>

		<div class="prepend-1 span-23 colborder">
			<div class="social-items">
			<h2><a href="{{ blog_url }}"/>{% trans "Blog" %}</a></h2>
			<ul>
				{% for entry in blog_feed.entries|slice:":3" %}
				<li>
				<h3><a href="{{ entry.link }}">{{ entry.title }}</a></h3>
				<p>{{ entry.description|striptags|truncatewords:27|safe }}</p>
				</li>
				{% endfor %}
			</ul>
			<a href="{{ blog_url }}">{% trans "More entries&hellip;" %}</a>
		</div>

		{% if facebook_url %}
			<hr />
			<h2><a href="{{ facebook_url }}">Facebook</a></h2>
			<iframe src="http://www.facebook.com/plugins/likebox.php?href={{ facebook_url|urlencode }}&amp;width=290&amp;connections=0&amp;stream=false&amp;header=false&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:62px;" allowTransparency="true"></iframe>	
		{% endif %}
		</div>

		<div class="span-15 append-1 last">
			<div class="social-items">
			<h2><a href="{{ twitter_url }}">Twitter</a></h2>
			<ul>
				{% for entry in twitter_feed|slice:":6" %}
				<li>
				<p>{{ entry.formatted_text|safe }}</p>
				</li>
				{% endfor %}
			</ul>
			<a href="{{ twitter_url }}">{% trans "More tweets&hellip;" %}</a></div>
			</div>
		<hr class="space"/>
		</div>
		
	</div>
</div>


<div id="features" class="span-44">
<div id="feature-margin" class="prepend-1 span-42 append-1 last" >
	<h2>{% trans "Features" %}</h2>

	<div id="feature-intro" class="span-42 last">
		<div class="span-24" >
			<h3>{% trans "Jump to a feature:" %}</h3>

			<div class="span-8">
			<ul class="feature-link-list">
			    <li><a href="#contact">{% trans "Contact Search" %}</a></li>
			    <li><a href="#library">{% trans "Library Search" %}</a></li>
			    <li><a href="#news">{% trans "News" %}</a></li>
			    <li><a href="#places">{% trans "Places" %}</a></li>
			    <li><a href="#podcasts">{% trans "Podcasts" %}</a></li>
			</ul>
			</div>

			<div class="span-8">
			<ul class="feature-link-list">
			    <li><a href="#results">{% trans "Results Releases" %}</a></li>
			    <li><a href="#river-flag">{% trans "River Flag Status" %}</a></li>
			    <li><a href="#search">{% trans "Search" %}</a></li>
			    <li><a href="#service-status">{% trans "Service Status" %}</a></li>
    
			</ul>
			</div>

			<div class="span-8 last">
			<ul class="feature-link-list">
			    <li><a href="#term-date">{% trans "Term Date" %}</a></li>    
			    <li><a href="#weather">{% trans "Weather" %}</a></li>
			    <li><a href="#webcams">{% trans "Webcams" %}</a></li>
			    <li><a href="#weblearn">{% trans "WebLearn" %}</a></li>
			</ul>
			</div>
		</div>


		<div class="span-17 last">
			<div id="eduroam">
			<h2>Example highlighted box</h2>
			<p>Did you know that you can do x with {{ site_name }}?</p>
			</div>
		</div>
	</div>

	<div id="instant-info" class="span-42 append-bottom last">
		<a class="go-to-top" href="#features" title="scroll to top">{% trans "Back to feature list" %}</a>
		<hr>
		<h3>Example Info</h3>
		<p>On the front page you'll find a little box which gives you quick access to some useful information.</p>
		<div class="span-12 prepend-1 align-right">
		<h4>Term Date</h4>
		<p>Shows you the current date.</p>

		<h4>River Status</h4>
		<p>Check if it's safe to row on the rivers.</p>
	</div>

	<div class="span-16 align-center">
		<img class="shadow" src="{{ STATIC_URL }}desktop/images/features/instant-info.png" alt="Instant Info Screenshot">
		<p>The Instant Info section on the front page</p>
	</div>

	<div class="span-12 append-1 last">
		<h4>Current Weather</h4>
		<p>See what the current temperature and cloud cover is like.</p>
	</div>
</div>
</div>

</div>
</div>
</div>

<div id="footer">
<div class="container">
	<div class="span-32">
	<p>Your copyright notice.</p>
	</div>
	<div class="span-12 last">
	<p>Logos go here</p>
	</div>

	<div class="span-14 append-1">
	<h2>Example footer header</h2>
	<dl>
	    <dt><a href="http://">Example A</a></dt>
	    <dd>A description about Example A</dd>
		<dt><a href="http://">Example B</a></dt>
	    <dd>A description about Example B</dd>
		<dt><a href="http://">Example C</a></dt>
	    <dd>A description about Example C</dd>
		<dt><a href="http://">Example D</a></dt>
	    <dd>A description about Example D</dd>
	</dl>    
	</div>
	<div class="span-14 colborder prepend-top">
	<dl>
	    <dt><a href="http://">Example A</a></dt>
	    <dd>A description about Example A</dd>
		<dt><a href="http://">Example B</a></dt>
	    <dd>A description about Example B</dd>
		<dt><a href="http://">Example C</a></dt>
	    <dd>A description about Example C</dd>
		<dt><a href="http://">Example D</a></dt>
	    <dd>A description about Example D</dd>
	</dl>
	</div>
	<div class="span-14 last">
	<h2>{% trans "Contact or help out" %}</h2>
	<p>
	{% blocktrans %}There are many ways you can get involved with {{ site_name }}.{% endblocktrans %}
	</p>
	<dl>
	    <dt>{% trans "Email feedback:" %}</dt>
	    <dd>
		<a href="mailto:example@your-domain-name.com">example@your-domain-name.com</a>
		</dd>
	    <dt>{% trans "Suggest new features:" %}</dt>
	    <dd><a href="http://{{ request.HOST_NAME }}/feature-suggestions/">Our mobile feature suggestion page (optimised for mobile devices)</a></dd>
	    <dt>{% trans "Join the OpenStreetMap community" %}</dt>
	    <dd><a href="http://wiki.openstreetmap.org/wiki/Main_Page">{% trans "and help improve the points of interest and maps that we use: http://openstreetmap.org" %}</a></dd>
	    <dt>{% trans "Help develop our software (the Molly Project)" %}</dt>
	    <dd><a href="http://mollyproject.org/">http://mollyproject.org/</a></dd>  
	</dl>
	</div>
</div>
</div>

{% if google_analytics %}
 <script type="text/javascript">
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', '{{ google_analytics|safe }}']);
 _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>
{% endif %}
</body>
</html>
