@@ -1,173 +1,66 @@
/*
* Globals
*/

/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
display: flex;
align-items: center;
}


/*
* Base structure
*/

html,
body {
height: 100%;
/* background-color: #333; */
background-image: url("Ferry.jpg");
background-position: 75% 30%;
background-repeat: no-repeat;
}
body {
color: #fff;
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}

/* Padding for spacing */
.inner {
padding: 30px;
.pull-xs-right {
float: right!important;
}

.scroll-overflow{
overflow-y: auto;
height: 100px;
max-height: 100px;
}

/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
.scroll-overflow-large{
overflow-y: scroll;
max-height: 700px;
}

.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
.margin-top{
margin-top: 40px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: rgba(255,255,255,.75);
border-bottom: 2px solid transparent;
.margin-bot{
margin-bottom: 40px;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
.margin-top-bot-5{
margin-top: 5px;
margin-bottom: 5px;
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
.right {
text-align: right;
}

@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
.left {
text-align: left;
}


/*
* Cover
*/

.cover {
padding: 0 20px;
.center {
text-align: center;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}


/*
* Footer
*/

.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
.navbar-static-top {
margin-bottom: 1px;
}


/*
* Affix and center
*/

@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}

@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
.navbar-default {
background-color: #000000;
border-color: #0;
color: white;
}

/* Ryan's scripts */

.paraWidth {
max-width: 280px;
text-align: center;
}
.hidden {
display: none;
}
@@ -1,48 +1,5 @@

$(document).ready(function() {
var fname = "aleksiy ";
var lname = "kudelsky";

// block repeats of the same call
var disable = true;

//expand logo
$('#logo').mouseenter( function(){
$('#logo').removeClass("bold")
if(disable){
disable = false;
var i = 0;
function loop(){
$('#logo').text( fname.substring(0, i) + lname.substring(0,i) );
if(++i == fname.length + 1){
disable = true;
return;
}
window.setTimeout(loop, 50);
}
loop();
}

});



$('#logo').mouseleave( function(){
if(disable){
disable = false;
var i = fname.length;
function delayedLoop(){
$('#logo').text( fname.substring(0, i) + lname.substring(0,i) );
if(--i == 0){
$('#logo').addClass("bold")
disable = true;
return;
}
window.setTimeout(delayedLoop, 50);
}
delayedLoop();
}
});



@@ -1,76 +1,53 @@
<!DOCTYPE html>
{% load staticfiles %}

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>Cover Template for Bootstrap</title>
<title>Starter Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="{% static 'bootstrap-3.3.6-dist/css/bootstrap.min.css' %}" rel="stylesheet">

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{% static 'bootstrap-3.3.6-dist/js/ie10-viewport-bug-workaround.js' %}"></script>
<link href="{% static 'bootstrap-3.3.6-dist/css/bootstrap.min.css' %}" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="{% static 'css/custom.css' %}" rel="stylesheet">
</head>


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<div class="site-wrapper">

<div class="site-wrapper-inner">

<div class="cover-container">

<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand"><font color="white">FerryPool</font></h3>
<nav>
<ul class="nav masthead-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="/main/login/">Login</a></li>
</ul>
</nav>
</div>
<nav class="navbar navbar-default navbar-static-top navbar-color ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/main/">Name Logo</a>
</div>
{% block headers %}
{% block navbar %}
{% endblock %}
</div>
</nav>

{% block main %}
{% endblock %}

<div class="mastfoot">

</div>

</div>
<div>
{% block headers %}
{% endblock %}
</div>

<div>
{% block main %}
{% endblock %}
</div>

</div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="{% static 'bootstrap-3.3.6-dist/js/bootstrap.min.js' %}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{% static 'bootstrap-3.3.6-dist/js/ie10-viewport-bug-workaround.js'}"></script>

</body>
</html>
@@ -0,0 +1,116 @@
{% extends 'base.html' %}


{% block navbar %}
<div class="pull-xs-right">
<a class="navbar-brand" href="login/">Login</a>
</div>
{% endblock %}



{% block main %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
{{ form.media }}
<div class="container marketing margin-top">

<form class="col-md-8 col-md-offset-4" id="login_form" method="post" action="/main/addtrip/">
{% csrf_token %}


<!-- username input-->
<div class="form-group left">
<div class="col-md-4">
<input id="id_name" name="name" type="text" placeholder="name" class="form-control">
</div>
</div>


<!-- Origin -->

<div class="form-group left">
<label class="col-md-4 control-label" for="id_origin">Select Origin</label>
<div class="col-md-4">
<select id="id_origin" name="origin" class="form-control">
{% for location in locations %}
<option value="{{location}}">{{location}}</option>
{% endfor %}
</select>
</div>
</div>

<br>

<!-- Destination -->
<div class="form-group left">
<label class="col-md-4 control-label" for="id_origin">Select Destination</label>
<div class="col-md-4">
<select id="id_destination" name="destination" class="form-control">
{% for location in locations%}
<option value="{{location}}">{{location}}</option>
{% endfor %}
</select>
</div>
</div>
<br>

<div class="col-md-8">
{{ form.date }}
</div>
<br>


<!-- Select Type -->
<div class="form-group left">
<label class="col-md-8 control-label" for="id_looktype"></label>
<div class="col-md-8">
<select id="id_looktype" name="looktype" class="form-control">
<option value="Driver">Driver</option>
<option value="Passenger">Passenger</option>
</select>
</div>
</div>
<br>

<!-- Select pass -->
<div class="form-group left">
<label class="col-md-4 control-label" for="id_passengers">Passengers</label>
<div class="col-md-4">
<select id="id_passengers" name="passengers" class="form-control">
<option value=0>0</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
</select>
</div>
</div>
<br>

<!-- MSG -->
<div class="form-group left">
<label class="col-md-4 control-label" for="id_msg">Message</label>
<div class="col-md-8">
<textarea id="id_msg" class="form-control" name="msg">default text</textarea>
</div>
</div>
<br>

<br>
<div class="margin-top">
<input class=" btn btn-lg btn-default" type="submit" name="submit" value="Confirm"/>
</div>





</form>
</div>




{% endblock %}
@@ -1,17 +1,15 @@
{% extends 'base.html' %}

{% block main %}
<form id="profile_form" method="post" action="/main/editprofile/"
enctype="multipart/form-data">

{% csrf_token %}

<!-- Display each form. The as_p method wraps each element in a paragraph
(<p>) element. This ensures each element appears on a new line,
making everything look neater. -->
{{ form.as_p }}
{% block navbar %}
<div class="pull-xs-right">
<a class="navbar-brand" href="login/">Login</a>
</div>
{% endblock %}

<!-- Provide a button to click to submit the form. -->
<input class="btn btn-lg btn-default" type="submit" name="submit" value="Save" />
{% block main %}
<div class="container marketing centered">
{{form}}
</div>

{% endblock %}
{% endblock %}
@@ -2,13 +2,27 @@


{% block main %}
<h1>Login</h1>
<form id="login_form" method="post" action="/main/login/">
<div class="container marketing margin-top">

<form class="col-md-5 col-md-offset-4" id="login_form" method="post" action="/main/login/">
{% csrf_token %}
Username: <input type="text" name="username" value="" size="50" />
<br />
Password: <input type="password" name="password" value="" size="50" />
<br />
<input type="submit" value="submit" />
<!-- username input-->
<div class="form-group margin-bot">
<div class="col-md-8">
<input id="id_username" name="username" type="text" placeholder="Username" class="form-control input-md">
</div>
</div>

<!-- Password input-->
<div class="form-group ">
<div class="col-md-8">
<input id="id_password" maxlength="128" name="password" type="password" placeholder="Password" class="form-control input-md">
</div>
</div>

<div class=" margin-top">
<input class=" btn btn-lg btn-default" type="submit" name="submit" value="Login"/>
</div>
</form>
</div>
{% endblock %}
@@ -1,56 +1,79 @@
{% extends 'base.html' %}

{% load staticfiles %}

{% block navbar %}
<div class="pull-xs-right">
<a class="navbar-brand" href="login/">Login</a>
</div>
{% endblock %}

{% block headers %}
<body background="../../static/pics/Ferry.jpg"> </body>
<div class="container marketing margin-top margin-bot ">

<!-- Three columns of text below the carousel -->
<div class="row text-center">
<div class="col-md-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Save money!</h2>
<p>Taking a car on the ferry is expensive. A driver can potentially save over $30 per trip.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Save the environment!</h2>
<p>100 people carpooling can prevent 1,320 pounds of carbon monoxide from being released into the atmosphere in a single year.</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Faster than the bus!</h2>
<p>Riding the bus sucks. Get a faster, more comfortable ride for as little as $5-$10.</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->



<div>
<!-- Example row of columns -->
<div class="row">
<div class="left">
<h2><font color="black">Save money!</font></h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div class="center">
<h2>Reduce your carbon footprint!</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div class="right">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</font></p>
</div>
</div>
</div>

{% endblock %}


<!--REGISTRATION -->
{% block main %}

<body>
<div style="position:relative;left:center;bottom:-150px;opacity:0.4;background-color:navy;">
<h1>Register</h1>
<div class="container marketing centered">
<form class = "form-horizontal col-md-5 col-md-offset-4" id="user_form" method="post" action="/main/"
enctype="multipart/form-data">
{% csrf_token %}

{% if registered %}
Rango says: <strong>thank you for registering!</strong>
<a href="/main/">Return to the homepage.</a><br />
{% else %}
Rango says: <strong>register here!</strong><br />

<form id="user_form" method="post" action="/main/"
enctype="multipart/form-data">
<!-- username input-->
<div class="form-group">
<div class="col-md-8">
<input id="id_username" name="username" type="text" placeholder="Username" class="form-control input-md">
</div>
</div>

{% csrf_token %}
<!-- email input-->
<div class="form-group">
<div class="col-md-8">
<input id="id_email" name="email" type="text" placeholder="Email" class="form-control input-md">
</div>
</div>

<!-- Display each form. The as_p method wraps each element in a paragraph
(<p>) element. This ensures each element appears on a new line,
making everything look neater. -->
{{ user_form.as_p }}
<!-- Password input-->
<div class="form-group">
<div class="col-md-8">
<input id="id_password" maxlength="128" name="password" type="password" placeholder="Password" class="form-control input-md">
</div>
</div>

<!-- Provide a button to click to submit the form. -->
<input type="submit" name="submit" value="Register" />
<a href="#" class="btn btn-lg btn-default">submit</a>
</form>
{% endif %}
</div>
</body>

{% endblock %}

<div class="col-md-offset-2 ">
<input class=" btn btn-lg btn-default" type="submit" name="submit" value="Register"/>
</div>
</form>

</div>

{% endblock %}
@@ -1,12 +1,59 @@
{% extends 'base.html' %}


{% block navbar %}
<div class="pull-xs-right">
<a class="navbar-brand" href="logout/">Logout</a>
</div>
{% endblock %}
{% block main %}
<a href="/main/addtrip/" class="btn btn-lg btn-default">Add Trip</a>
<a href="/main/editprofile/" class="btn btn-lg btn-default">Edit Profile</a>

<div class="container-fluid">
<!-- search left side block -->
<div class="col-md-offset-2 col-md-2 sidebar">
<ul class="nav nav-sidebar list-group-item">
<span class="sr-only">(current)</span></a></li>
{% for trip in trips %}
<li ><a href="/main/userpage/?trip={{trip.key}}"> {{trip.name}}</a></li>
{% endfor %}
<li><a href="/main/addtrip/"> + Add New Trip</a></li>
</ul>


</div>

<!-- center block -->

<div class="col-md-5">
<div class="row text-center margin-bot-19">

{% if results %}

<ul class="list-group">
{% for result in results %}
<li class="list-group-item left ">
<h4>{{result.user.username}}, {{result.looktype}}</h4>
<span>{{result.origin}}->{{result.destination}}, {{result.date}} </span>
<div>
<spam>{{result.msg}}</spam>
</div>
<div class="right">
<button type="button" class="btn btn-default">Message</button>
</div>



</li>
{% endfor %}
</ul>


{% endif %}




</div>


{% endblock %}