MovieMatch/index.html at master · JTLR/MovieMatch · GitHub

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
<!DOCTYPE html>
<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
<head>
	<title>MovieMatch</title>
	<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

	<link rel="stylesheet" href="css/stylesheet.css">

	<script src="javascript/libraries/jquery-1.10.2.min.js" type="text/javascript"></script>
	<script src="javascript/libraries/handlebars-1.0.0.js" type="text/javascript"></script>
	<script src="javascript/libraries/ember.js" type="text/javascript"></script>
	<script src="javascript/libraries/ember-data.js" type="text/javascript"></script>
	<script src="javascript/libraries/localstorage_adapter.js" type="text/javascript"></script>


	<script src="javascript/javascript.js" type="text/javascript"></script>
	<!--<script src="javascript/fixtures.js" type="text/javascript"></script>-->
	<script src="javascript/helpers.js" type="text/javascript"></script>

</head>
<body>
	<script type="text/x-handlebars" data-template-name="moviematch">
		<header class="site-header">
			<div class="grid">
				<div class="row">
					<div class="col base-16 large-6">
						<h1 class="like-movie"><a href="#" name="top">MOVIEMATCH</a></h1>
					</div>
					<div class="col base-8 large-18">
						<nav class="site-navigation">
							<button class="button site-navigation-toggle large-hide js-toggle-site-navigation">
								<i class="fa fa-bars"></i>
							</button>
							<ul class="inline large-show">
								<li>
									<a href="#">Profile</a>
								</li>
								<li>
									<a href="#">Watch list</a>
								</li>
								<!--<li>
									<button class="button grey">
										<i class="fa fa-cogs"></i>
									</button>
									<form class="inline left">
										<input type="search" placeholder="Search">
										<input class="button fa-x green" type="submit" value="&#xf002;">
									</form>
								</li>-->
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</header>
		<main class="site-main">
			<div class="grid">

				<div class="row">


						<h2>Add your favourite movies</h2>


						<form class="inline movie-search">
						<div class="col large-3 large-push-4">
							<button class="button grey-light">
								<i class="fa fa-cogs"></i>
							</button>
						</div>

						<div class="col large-11">
							<input type="search" placeholder="Enter movie title">
						</div>

						<div class="col large-3">
							<input class="button fa-x blue" type="submit" value="&#xf002;">
						</div>


						</form>

				</div>

				<div class="row">
					<div class="col">
						<div class="col large-18">
						<h3>Or maybe you&rsquo;ve seen one of these?</h3>
						</div>
					</div>
				</div>


				<div class="row">


						{{#each movie in controller}}
						<div class="col large-6 {{#ifCond 4}} last {{/ifCond}}">


							<article class="movie">

								<div class="movie-container">
								<img class="movie-thumbnail" {{bind-attr src=movie.img alt=movie.title title=movie.title}}>
								<div class="movie-information"><h4 class="icon-hover"></h4></div>
								<div class="movie-name">{{movie.title}}</div>
								</div>
								<button class="button base-third green like-movie">
									<i class="fa fa-thumbs-o-up"></i>
								</button>
								<button class="button base-third red dislike-movie">
									<i class="fa fa-thumbs-o-down"></i>
								</button>
								<button class="button base-third blue watch-list">
									<i class="fa fa-eye"></i>
								</button>

							</article>

						</div>
						{{/each}}


				</div>
			</div>
		</main>
		<footer class="site-footer">
			<div class="grid">
				<div class="row">
					<div class="col">
						<p>&copy; MovieMatch 2014</p>
					</div>
				</div>
			</div>
		</footer>
	</script>
</body>