diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..c10666e22 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +*.pyc diff --git a/README.md b/README.md index 36ae53b62..9a40f6b73 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,37 @@ # ud036_StarterCode -Source code for a Movie Trailer website. + +## Prerequisite + +Before you run the demo, please check your device has installed the python 2.x. + +You can run the code as follow to check if you has installed or not: + +```bash +python -V +``` + +![python](https://raw.githubusercontent.com/eryue0220/ud036_StarterCode/master/image/terminal.jpeg) + +If you can see the output like the above picture, then go to the next step. + +## Usage + +Now you should check your current work directory path is in the +`ud036_StarterCode` or not. If not you can use the `cd` command enter this +directory. And then, run the code: + +```bash +python entertainment.py +``` + +After that, your browser will be called and open a page as follow: + +![page](https://raw.githubusercontent.com/eryue0220/ud036_StarterCode/master/image/page.jpeg) + +All is Done! + +## Licence + +> You can check out the full license [here](https://github.com/IgorAntun/node-chat/blob/master/LICENSE) + +This project is licensed under the terms of the MIT license. \ No newline at end of file diff --git a/css/screen.css b/css/screen.css new file mode 100644 index 000000000..3eef780fb --- /dev/null +++ b/css/screen.css @@ -0,0 +1,46 @@ +body { + padding-top: 80px; +} + +#trailer .modal-dialog { + margin-top: 200px; + width: 640px; + height: 480px; +} + +.hanging-close { + position: absolute; + top: -12px; + right: -12px; + z-index: 9001; +} + +#trailer-video { + width: 100%; + height: 100%; +} + +.movie-tile { + margin-bottom: 20px; + padding-top: 20px; +} + +.movie-tile:hover { + background-color: #EEE; + cursor: pointer; +} + +.scale-media { + padding-bottom: 56.25%; + position: relative; +} + +.scale-media iframe { + border: none; + height: 100%; + position: absolute; + width: 100%; + left: 0; + top: 0; + background-color: white; +} \ No newline at end of file diff --git a/entertainment_content.py b/entertainment_content.py new file mode 100644 index 000000000..09302d7c2 --- /dev/null +++ b/entertainment_content.py @@ -0,0 +1,57 @@ +#!/usr/bin/env python +# -*- coding: utf-8 -*- + +import media +import fresh_tomatoes + +toy_story = media.Movie( + 'Toy Story', + 'A story of a boy and his toys that come to life', + 'https://upload.wikimedia.org/wikipedia/en/1/13/Toy_Story.jpg', + 'https://www.youtube.com/watch?v=vwyZH85NQC4' +) + +avatar = media.Movie( + 'Avatar', + 'A marine on an alien planet', + 'http://upload.wikimedia.org/wikipedia/id/b/b0/Avatar-Teaser-Poster.jpg', + 'https://www.youtube.com/watch?v=-9ceBgWV8io' +) + +school_of_rock = media.Movie( + 'School of Rock', + 'Storyline', + 'https://upload.wikimedia.org/wikipedia/en/1/11/School_of_Rock_Poster.jpg', + 'https://www.youtube.com/watch?v=3PsUJFEBC74' +) + +ratatouille = media.Movie( + 'Ratatouille', + 'Storyline', + 'https://upload.wikimedia.org/wikipedia/en/5/50/RatatouillePoster.jpg', + 'https://www.youtube.com/watch?v=c3sBBRxDAqk' +) + +midnight_in_paris = media.Movie( + 'Midnight in Paris', + 'Storyline', + 'https://upload.wikimedia.org/wikipedia/en/9/9f/Midnight_in_Paris_Poster' + + '.jpg', + 'https://www.youtube.com/watch?v=atLg2wQQxvU' +) + +hunger_games = media.Movie( + 'Hunger Games', + 'Storyline', + 'https://upload.wikimedia.org/wikipedia/en/4/42/HungerGamesPoster.jpg', + 'https://www.youtube.com/watch?v=PbA63a7H0bo' +) + + +movies = [ + toy_story, avatar, school_of_rock, + ratatouille, midnight_in_paris, hunger_games +] + +if __name__ == '__main__': + fresh_tomatoes.open_movies_page(movies) diff --git a/fresh_tomatoes.html b/fresh_tomatoes.html new file mode 100644 index 000000000..893031b2f --- /dev/null +++ b/fresh_tomatoes.html @@ -0,0 +1,61 @@ + + + + + Fresh Tomatoes! + + + + + + + + + + + + + + +
+ +
+
+
+ +

Toy Story

+
+ +

Avatar

+
+ +

School of Rock

+
+ +

Ratatouille

+
+ +

Midnight in Paris

+
+ +

Hunger Games

+
+
+ + \ No newline at end of file diff --git a/fresh_tomatoes.py b/fresh_tomatoes.py index 5cd75599c..2120cb054 100644 --- a/fresh_tomatoes.py +++ b/fresh_tomatoes.py @@ -3,130 +3,22 @@ import re -# Styles and scripting for the page -main_page_head = ''' - - - - - Fresh Tomatoes! +def get_html_file(file, mode='r'): + cwd = os.getcwd() + html_file = open(cwd + file, mode) + html_file_content = html_file.read() + html_file.close() - - - - - - - - -''' + return html_file_content +# Styles and scripting for the page +main_page_head = get_html_file('/html/head.html') # The main page layout and title bar -main_page_content = ''' - - - - - -
- -
-
- {movie_tiles} -
- - -''' - +main_page_content = get_html_file('/html/body.html') # A single movie entry html template -movie_tile_content = ''' -
- -

{movie_title}

-
-''' +movie_tile_content = get_html_file('/html/content.html') def create_movie_tiles_content(movies): diff --git a/fresh_tomatoes.pyc b/fresh_tomatoes.pyc new file mode 100644 index 000000000..2c07f8aa8 Binary files /dev/null and b/fresh_tomatoes.pyc differ diff --git a/html/body.html b/html/body.html new file mode 100644 index 000000000..a0d9d8c22 --- /dev/null +++ b/html/body.html @@ -0,0 +1,29 @@ + + + + + +
+ +
+
+ {movie_tiles} +
+ + \ No newline at end of file diff --git a/html/content.html b/html/content.html new file mode 100644 index 000000000..17fb664af --- /dev/null +++ b/html/content.html @@ -0,0 +1,4 @@ +
+ +

{movie_title}

+
\ No newline at end of file diff --git a/html/head.html b/html/head.html new file mode 100644 index 000000000..9fe5c8a8c --- /dev/null +++ b/html/head.html @@ -0,0 +1,14 @@ + + + + + Fresh Tomatoes! + + + + + + + + + diff --git a/image/page.jpeg b/image/page.jpeg new file mode 100644 index 000000000..8d22911e9 Binary files /dev/null and b/image/page.jpeg differ diff --git a/image/terminal.jpeg b/image/terminal.jpeg new file mode 100644 index 000000000..fd42fc077 Binary files /dev/null and b/image/terminal.jpeg differ diff --git a/js/index.js b/js/index.js new file mode 100644 index 000000000..9a8678398 --- /dev/null +++ b/js/index.js @@ -0,0 +1,30 @@ +'use strict'; + +// Pause the video when the modal is closed +$(document) + .on('click', '.hanging-close, .modal-backdrop, .modal', function(event) { + // Remove the src so the player itself gets removed, as this is the only + // reliable way to ensure the video stops playing in IE + $('#trailer-video-container').empty(); + }) + .on('click', '.movie-tile', function(event) { + // Start playing the video whenever the trailer modal is opened + var trailerYouTubeId = $(this).attr('data-trailer-youtube-id'), + sourceUrl = 'http://www.youtube.com/embed/' + trailerYouTubeId + + '?autoplay=1&html5=1'; + + $('#trailer-video-container').empty().append( + $('', { + id: 'trailer-video', + type: 'text-html', + src: sourceUrl, + frameborder: 0 + }) + ); + }) + .ready(function() { + // Animate in the movies when the page loads + $('.movie-tile').hide().first().show('fast', function showNext() { + $(this).next('div').show('fast', showNext); + }); + }); \ No newline at end of file diff --git a/media.py b/media.py new file mode 100644 index 000000000..99e3fd782 --- /dev/null +++ b/media.py @@ -0,0 +1,24 @@ +#!/usr/bin/env python +# -*- coding: utf-8 -*- + +import webbrowser + + +class Movie: + """ + It provides a way to store the movie relation information. + """ + + def __init__(self, + movie_title, + movie_storyline, + poster_image_url, + trailer_youtube): + self.title = movie_title + self.storyline = movie_storyline + self.poster_image_url = poster_image_url + self.trailer_youtube_url = trailer_youtube + + @staticmethod + def show_trailer(self): + webbrowser.open(self.trailer_youtube_url) diff --git a/media.pyc b/media.pyc new file mode 100644 index 000000000..cf3c35d8b Binary files /dev/null and b/media.pyc differ