-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmovie.html
142 lines (134 loc) · 7.57 KB
/
movie.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MTQMBGT');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<title>FiveMovies</title>
<link rel='stylesheet' href='style.css' type='text/css' media='screen' />
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MTQMBGT"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="main">
<div class="content">
<a href="index.html">⭠ Back to list</a>
<img class="loaded" id="poster" alt="movie-poster" src="">
<h1 class="loaded" id="title"></h1>
<p id="description"></p>
<span class="loaded" id="toggle">Show Trailer</span>
<div id="trailer-container">
<video id="trailer" width="700" height="350" controls></video>
</div>
</div>
</div>
<script>
const movies = [
{
"title": "Marvel's Avengers: Age of Ultron",
"description":`
When Tony Stark (Robert Downey Jr.) jumpstarts a dormant peacekeeping program, things go terribly awry, forcing him,
Thor (Chris Hemsworth), the Incredible Hulk (Mark Ruffalo) and the rest of the Avengers to reassemble.
As the fate of Earth hangs in the balance, the team is put to the ultimate test as they battle Ultron (James Spader),
a technological terror hell-bent on human extinction. Along the way, they encounter two mysterious and powerful newcomers,
Pietro and Wanda Maximoff.
`,
"poster": "img/movie1.jpg",
"trailer": 'trailer/movie1.mp4'
},
{
"title": "Star Wars: The Force Awakens",
"description":`
Star Wars: The Force Awakens is directed by J.J. Abrams from a screenplay by Lawrence Kasdan & Abrams, and features a cast including actors
John Boyega, Daisy Ridley, Adam Driver, Oscar Isaac, Andy Serkis, Academy Award winner Lupita Nyong’o, Gwendoline Christie, Crystal Clarke,
Pip Andersen, Domhnall Gleeson, and Max von Sydow.
They will join the original stars of the saga, Harrison Ford, Carrie Fisher, Mark Hamill, Anthony Daniels, Peter Mayhew, and Kenny Baker.
The film is being produced by Kathleen Kennedy, J.J. Abrams, and Bryan Burk, and John Williams returns as the composer.
Star Wars: The Force Awakens is Episode VII in the Star Wars Saga.
`,
"poster": "img/movie2.jpg",
"trailer": 'trailer/movie2.mp4'
},
{
"title": "Mad Max: Fury Road",
"description":`
George Miller‘s uncompromising vision of a world gone made gears up again in Mad Max: Fury Road, the fourth film of Road Warrior/Mad Max franchise.
This post-apocalyptic action film is set in the furthest reaches of our planet, in a stark desert landscape where humanity is broken,
and most everyone is crazed fighting for the necessities of life. Within this world of fire and blood exist two rebels on the run who just might be able to restore order…
There’s Max, a man of action and a man of few words, who seeks peace of mind following the loss of his wife and child in the aftermath of the chaos.
And there's Furiosa, a woman of action and a woman who believes her path to survival may be achieved if she can make it across the desert back to her childhood homeland.
`,
"poster": "img/movie3.jpg",
"trailer": 'trailer/movie3.mp4'
},
{
"title": "Jurassic World",
"description":`
The story unfolds 22 years after the events of "Jurassic Park," in a fully functional resort on Isla Nublar that sees more than 20,000 visitors a day.
Guests arrive by boat from Costa Rica, and the new park includes a biological preserve, a safari, a zoo, and a theme park type setting.
The island also contains a luxury resort with hotels, restaurants, nightlife, and golf.
And, of course, unprecedented up-close access to real, living dinosaurs - the full execution of John Hammond's dream.
But humanity's continuing efforts to dominate nature generate unexpected, and dangerous, results.
`,
"poster": "img/movie4.jpg",
"trailer": 'trailer/movie4.mp4'
},
{
"title": "Fantastic Four",
"description":`
Fantastic Four, a contemporary re-imagining of Marvel’s original and longest-running superhero team,
centers on four young outsiders who teleport to an alternate and dangerous universe, which alters their physical form in shocking ways.
Their lives irrevocably upended, the team must learn to harness their daunting new abilities and work together to save Earth from a former friend turned enemy.
`,
"poster": "img/movie5.jpg",
"trailer": 'trailer/movie5.mp4'
}
];
const urlParams = new URLSearchParams(window.location.search);
const movieId = parseInt(urlParams.get('id'));
if (Number.isNaN(movieId) || movieId < 1 || movieId > 5) {
movieIndex = 0;
} else {
movieIndex = movieId - 1;
}
const movie = movies[movieIndex];
const poster = document.getElementById('poster');
poster.src= movie.poster;
poster.style.display = 'block';
const title = document.getElementById('title');
title.innerHTML = movie.title;
title.style.display = 'block';
const description = document.getElementById('description');
description.innerHTML = movie.description;
description.style.display = 'block';
const trailer = document.getElementById('trailer');
const source = document.createElement('source');
source.setAttribute('src', movie.trailer);
trailer.appendChild(source);
document.getElementById('toggle').style.display = 'block';
document.addEventListener('click', function (event) {
if (!event.target.matches('#toggle')) return;
event.preventDefault();
const toggle = event.target;
const trailerContainer = document.getElementById('trailer-container');
const trailer = document.getElementById('trailer');
if (trailerContainer.style.display === "block") {
trailer.pause();
trailerContainer.style.display = 'none';
toggle.innerHTML = "Show Trailer";
} else {
trailerContainer.style.display = 'block';
toggle.innerHTML = "Hide Trailer";
trailer.play();
}
}, false);
</script>
</body>
</html>