Skip to content
This repository has been archived by the owner on Jun 28, 2022. It is now read-only.

add content. #14

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add content. #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bca9491
add content.
May 3, 2017
c71534f
add image for readme.
May 3, 2017
f3c1e9c
add readme and other files.
May 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.idea
*.pyc
37 changes: 36 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
46 changes: 46 additions & 0 deletions css/screen.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
57 changes: 57 additions & 0 deletions entertainment_content.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
61 changes: 61 additions & 0 deletions fresh_tomatoes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fresh Tomatoes!</title>

<!-- Bootstrap 3 -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="./css/screen.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./js/index.js"></script>
</head>
<body>
<!-- Trailer Video Modal -->
<div class="modal" id="trailer">
<div class="modal-dialog">
<div class="modal-content">
<a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
<img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp_VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
</a>
<div class="scale-media" id="trailer-video-container">
</div>
</div>
</div>
</div>

<!-- Main Page Content -->
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Fresh Tomatoes Movie Trailers</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="vwyZH85NQC4" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/1/13/Toy_Story.jpg" width="220" height="342">
<h2>Toy Story</h2>
</div><div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="-9ceBgWV8io" data-toggle="modal" data-target="#trailer">
<img src="http://upload.wikimedia.org/wikipedia/id/b/b0/Avatar-Teaser-Poster.jpg" width="220" height="342">
<h2>Avatar</h2>
</div><div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="3PsUJFEBC74" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/1/11/School_of_Rock_Poster.jpg" width="220" height="342">
<h2>School of Rock</h2>
</div><div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="c3sBBRxDAqk" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/5/50/RatatouillePoster.jpg" width="220" height="342">
<h2>Ratatouille</h2>
</div><div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="atLg2wQQxvU" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Midnight_in_Paris_Poster.jpg" width="220" height="342">
<h2>Midnight in Paris</h2>
</div><div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="PbA63a7H0bo" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/4/42/HungerGamesPoster.jpg" width="220" height="342">
<h2>Hunger Games</h2>
</div>
</div>
</body>
</html>
128 changes: 10 additions & 118 deletions fresh_tomatoes.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,130 +3,22 @@
import re


# Styles and scripting for the page
main_page_head = '''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fresh Tomatoes!</title>
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()

<!-- Bootstrap 3 -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<style type="text/css" media="screen">
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;
}
</style>
<script type="text/javascript" charset="utf-8">
// 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();
});
// Start playing the video whenever the trailer modal is opened
$(document).on('click', '.movie-tile', function (event) {
var trailerYouTubeId = $(this).attr('data-trailer-youtube-id')
var sourceUrl = 'http://www.youtube.com/embed/' + trailerYouTubeId + '?autoplay=1&html5=1';
$("#trailer-video-container").empty().append($("<iframe></iframe>", {
'id': 'trailer-video',
'type': 'text-html',
'src': sourceUrl,
'frameborder': 0
}));
});
// Animate in the movies when the page loads
$(document).ready(function () {
$('.movie-tile').hide().first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});
</script>
</head>
'''
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 = '''
<body>
<!-- Trailer Video Modal -->
<div class="modal" id="trailer">
<div class="modal-dialog">
<div class="modal-content">
<a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
<img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp_VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
</a>
<div class="scale-media" id="trailer-video-container">
</div>
</div>
</div>
</div>

<!-- Main Page Content -->
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Fresh Tomatoes Movie Trailers</a>
</div>
</div>
</div>
</div>
<div class="container">
{movie_tiles}
</div>
</body>
</html>
'''

main_page_content = get_html_file('/html/body.html')

# A single movie entry html template
movie_tile_content = '''
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="{trailer_youtube_id}" data-toggle="modal" data-target="#trailer">
<img src="{poster_image_url}" width="220" height="342">
<h2>{movie_title}</h2>
</div>
'''
movie_tile_content = get_html_file('/html/content.html')


def create_movie_tiles_content(movies):
Expand Down
Binary file added fresh_tomatoes.pyc
View file
Open in desktop
Binary file not shown.
29 changes: 29 additions & 0 deletions html/body.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<body>
<!-- Trailer Video Modal -->
<div class="modal" id="trailer">
<div class="modal-dialog">
<div class="modal-content">
<a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
<img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp_VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
</a>
<div class="scale-media" id="trailer-video-container">
</div>
</div>
</div>
</div>

<!-- Main Page Content -->
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Fresh Tomatoes Movie Trailers</a>
</div>
</div>
</div>
</div>
<div class="container">
{movie_tiles}
</div>
</body>
</html>
4 changes: 4 additions & 0 deletions html/content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="{trailer_youtube_id}" data-toggle="modal" data-target="#trailer">
<img src="{poster_image_url}" width="220" height="342">
<h2>{movie_title}</h2>
</div>
Loading