CS490WDProject1/index.html at master · binhvinhmai/CS490WDProject1 · 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
<!DOCTYPE html>
<!--
Project 1: Movie Search System
Team Members: Binh Mai, Lucy Kull, and Alex Carlisle
Due: October 17, 2016
CS490WD:Web Developlment, Professor Kuhail
-->
<html>
    <head>
        <title>Movie Search System</title>
        <link rel="stylesheet" type="text/css" href="style/style.css">
        <meta charset="utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="data/movies.js"></script>
        <script src="script/htmlMaker.js"></script>
        <script src="script/iteration.js"></script>
        <!-- Movie Template for movie div/sections -->
        <script id="movie-template" type="text/html">
            <div class='movie'>
                <img src='{{photo}}' class="photo">
                <div movie_info>
                    <div class="title">{{title}}</div>
                    <div class='year'>({{year}})</div>
                </div>
                <div id="HD"><img src="images/HD.png" class='{{HD}}'></div>
                <div class="starring"><p id="starring_label">&#160;Starring:</p><p id="movie_stars">&#160;{{starring}}</p></div>
                <div class="rating_text">Rating: </div>
                <div class="rating_num" id="rating_num">{{rating}}</div>
                <div class="rating" id="rating">{{rating}}</div>
                <div class='description'>{{description}}</div>
            </div>
        </script>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <div id = "fixed_header">
            <div id="header">
                <img src="images/movie.png">
                <h4>RENT A MOVIE</h4>
                <div id="search_feature">
                    <input type="text" id="search_bar" placeholder="Search for movies">
                    <input type="button" id="search_button" value="Search">
                    <div id="suggestions_box" class="suggestions">

                    </div>
                </div>
            </div>
            <div id="icons_bar">
                <p>Sort By:</p>
                <select id="sort_dropdown">
                    <option value="year">&#160;Year</option>
                    <option value="rating">&#160;Rating</option>
                </select>
                <img src="images/grid_pressed.jpg" id="grid_image">
                <img src="images/list.jpg" id="list_image">
            </div>
        </div>
        <div id="movie_list" class="grid">
        </div>
    </body>
</html>