Ada-C7 · ashtn · Jun 13, 2017 · Jun 13, 2017 · Jun 14, 2017 · Jun 14, 2017
diff --git a/build/css/foundation.css b/build/css/foundation.css
@@ -1613,7 +1613,7 @@ kbd {
       background-color: #5e5e5e;
       color: #fefefe; }
   .button.success {
-    background-color: #3adb76;
+    background-color: #b6f8d0;
     color: #0a0a0a; }
     .button.success:hover, .button.success:focus {
       background-color: #22bb5b;
@@ -1625,7 +1625,7 @@ kbd {
       background-color: #cc8b00;
       color: #0a0a0a; }
   .button.alert {
-    background-color: #cc4b37;
+    background-color: #ff66bc;
     color: #fefefe; }
     .button.alert:hover, .button.alert:focus {
       background-color: #a53b2a;

diff --git a/build/css/styles.css b/build/css/styles.css
@@ -1,44 +1,111 @@
 @include foundation-everything;
+@import url('https://fonts.googleapis.com/css?family=Fascinate|Rajdhani');
 
-main {
-    background: lightblue;
+
+/************************ GENERAL ***********************/
+
+@font-face {
+  font-family: "Clip";
+  src: url("http://ff.static.1001fonts.net/c/l/clip.regular.ttf");
 }
 
-header {
-  background-color: lightgreen;
+main, header, body {
+    background: #000;
+    color: lightpink;
+}
+
+
+header.row {
   padding: 0.5rem;
+  /*position: fixed;*/
+}
+
+h1 {
+  font-family: 'Fascinate', cursive;
+  font-size: 5rem
+}
+
+
+h3 {
+  font-family: 'Rajdhani', sans-serif;
+  padding: .5rem;
 }
 
-#completed-checkbox {
-  display: inline;
+h1 {
+  font-family: "Clip", cursive;
+  font-size: 5rem;
+
+  color: #fff;
+  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
+  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
+  animation: neon1 1.5s ease-in-out infinite alternate;
 }
 
-label {
-  display: inline;
+h1:hover {
+  color: #ff66bc;
+  -webkit-animation: none;
+  -moz-animation: none;
+  animation: none;
 }
 
-button.success {
-  margin-right: 1.2rem;
-  display: inline;
+@-webkit-keyframes neon1 {
+  from {
+    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
+  }
+  to {
+    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
+  }
 }
 
-aside.create-tasklist {
-  background-color: navy;
-  color: #FFFFFF;
+li {
+  list-style: none;
+  height: 450px;
+  margin-bottom: 50px;
 }
-aside label {
-  color: #FFFFFF;
+/************************ SEARCH BAR ***********************/
+
+
+input[type=text] {
+  border: 1px solid #27909F;
+  border-radius: 2em;
+  padding: 1.5em 2em;
+  float: left;
+  -webkit-appearance: none;
+}
+
+button[type=submit] {
+  color: #fff;
+  text-align: center;
+  border: none;
+  border-radius: 2em;
+  padding: 1em 4em;
+  background-color: #27909F;
+  float: right;
+  -webkit-appearance: none;
+
 }
 
-.completed {
-  text-decoration: line-through;
+button[type="submit"]:hover, input[type="submit"]:active {
+  background-color: #71C2CD;
 }
 
-div {
-  display: inline;
+button success {
+  background-color: #b6f8d0;
 }
-/*
-* {
-  border-style: solid;
+
+
+
+/************************ MODAL ***********************/
+#movie-details {
+  /*z-index: 10;*/
+  color: black;
+  position: fixed;
+  width: 50%;
+  top: 30%;
+  background-color: white;
+  text-align: center;
+  padding: 25px;
+  /*border: 1em solid black;*/
+  margin-left: 22.5%;
+
 }
-*/
diff --git a/build/index.html b/build/index.html
@@ -1,15 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="css/_settings.css">
-    <link rel="stylesheet" type="text/css" href="css/foundation.css">
-    <link rel="stylesheet" type="text/css" href="css/styles.css">
-    <title>Backbone Baseline</title>
-  </head>
-  <body>
-
-    <script src="/app.bundle.js"></script>
-
-  </body>
-  </html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="css/_settings.css">
+  <link rel="stylesheet" type="text/css" href="css/foundation.css">
+  <link rel="stylesheet" type="text/css" href="css/styles.css">
+  <title> My Video Store!!!! </title>
+</head>
+<body>
+
+  <header class='row'>
+    <h1> Retro Rental </h1>
+    <section id="search-bar">
+      <form>
+        <input type="text" name="query" placeholder="Search Movies">
+        <button id="search" class="button success" type='submit'>Search</button>
+      </form>
+    </section>
+  </header>
+  <main>
+    <section id="movie-list" class="row"><ul>
+
+    </ul> </section>
+    <section id="movie-details" class="hide"></section>
+    <div id='test'></div>
+  </main>
+
+  <!-- Templates -->
+
+  <script id="movie-template" type='text/template'>
+    <li class="large-3 medium-6 small-12 columns">
+      <img id="poster" src=<%- image_url %>>
+      <h3 id="title"><%- title %></h3>
+
+      <% if (external_id) { %>
+        <input type='number' min="1" max="10" value="1"/>
+        <button id="add" class="button success">Add</button>
+      <%  } else { %>
+        <button id="delete" class="button alert">Delete</button>
+      <%  } %>
+
+    </li>
+  </script>
+
+  <script id="tmpl-movie-details" type="text/template">
+    <h3><%- title %></h3>
+    <p>Released: <%- release_date %></p>
+    <p>Overview: <%- overview %></p>
+    <% if (!external_id) { %>
+      <p> Inventory: <%- available_inventory %> out of <%- inventory %> </p>
+      <p> Customer: </p>
+      <select id='customer-list'></select>
+      <button id="check_out" class="button alert">Check Out</button>
+      <button id="check_in" class="button success">Check In</button>
+    <%  } %>
+  </script>
+
+  <script id='tmpl-customer' type="text/template">
+    <%- name %>
+  </script>
+
+
+  <script src="/app.bundle.js"></script>
+
+</body>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -3,10 +3,18 @@
 // Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
+import MovieList from './collections/movie_list.js';
+import MovieListView from './views/movie_list_view.js';
 
-// ready to go
-$(document).ready(function() {
+var rentalList = new MovieList();
+
+var rentalListView = new MovieListView({
+  model: rentalList,
+  template: _.template($('#movie-template').html()),
+  el: 'body'
+});
 
-  $('section.main-content').append('<p>Hello World!</p>');
+
+$(document).ready(function() {
 
 });
diff --git a/src/collections/customer_list.js b/src/collections/customer_list.js
@@ -0,0 +1,15 @@
+import Backbone from 'backbone';
+import Customer from '../models/customer.js';
+
+
+var CustomerList = Backbone.Collection.extend({
+  model: Customer,
+  url: "http://localhost:3000/customers",
+  parse: function(data) {
+    return data;
+  },
+
+
+});
+
+export default CustomerList;
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie.js';
+
+var MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: "http://localhost:3000/movies/",
+  parse: function(data) {
+    return data;
+  }
+});
+
+export default MovieList;
diff --git a/src/collections/rental_list.js b/src/collections/rental_list.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+import Rental from '../models/rental.js';
+
+var RentalList = Backbone.Collection.extend({
+  model: Rental,
+  url: "http://localhost:3000/rentals/",
+  parse: function(data) {
+    return data;
+  }
+});
+
+export default RentalList;