-
Notifications
You must be signed in to change notification settings - Fork 37
/
index.html
107 lines (98 loc) · 5.37 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
The Matrix Movies Website
</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="apple-touch-icon" sizes="180x180" href="./img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicons/favicon-16x16.png">
<link rel="manifest" href="./img/favicons/site.webmanifest">
<link
href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Ubuntu:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./css/default.css">
<link rel="stylesheet" href="./css/pages/home.css">
</head>
<body>
<div class="screen">
<header id="header" onclick="window.location.href='index.html';">
<!-- js/header.js -->
</header>
<navbar id="navbar"><!-- js/navbar.js -->
</navbar>
<section class="home-section">
<!-- This image is a placeholder prototype for what will be in this section-->
<div id="movie-info" class="fade-in">
<div id="poster-and-rating-container">
<div class="row">
<div id="poster-container">
<img id="movie-poster" src="./img/home/movie-poster/poster6.jpg" alt="Movie Poster" style="width: 350px; height: 500px;">
</div>
<div id="rating-container">
<p id="imdb-rating" align="left" style="padding-top:85px;padding-right: 30px;">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#f1c00e}</style><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM21.3 229.2H21c.1-.1.2-.3.3-.4zM97 319.8H64V192h33zm113.2 0h-28.7v-86.4l-11.6 86.4h-20.6l-12.2-84.5v84.5h-29V192h42.8c3.3 19.8 6 39.9 8.7 59.9l7.6-59.9h43zm11.4 0V192h24.6c17.6 0 44.7-1.6 49 20.9 1.7 7.6 1.4 16.3 1.4 24.4 0 88.5 11.1 82.6-75 82.5zm160.9-29.2c0 15.7-2.4 30.9-22.2 30.9-9 0-15.2-3-20.9-9.8l-1.9 8.1h-29.8V192h31.7v41.7c6-6.5 12-9.2 20.9-9.2 21.4 0 22.2 12.8 22.2 30.1zM265 229.9c0-9.7 1.6-16-10.3-16v83.7c12.2.3 10.3-8.7 10.3-18.4zm85.5 26.1c0-5.4 1.1-12.7-6.2-12.7-6 0-4.9 8.9-4.9 12.7 0 .6-1.1 39.6 1.1 44.7.8 1.6 2.2 2.4 3.8 2.4 7.8 0 6.2-9 6.2-14.4z" /></svg>
IMDb Rating: 8.7</p>
<div class="credits" align="left">
<p><strong>Movie-Description:</strong> When a beautiful stranger leads computer hacker Neo to a forbidding underworld, he discovers the shocking truth--the life he knows is the elaborate deception of an evil cyber-intelligence.</p>
<p><strong>Directors:</strong> Lana Wachowski, Lilly Wachowski</p>
<p><strong>Writers:</strong> Lilly Wachowski, Lana Wachowski</p>
<button id="button" onclick="openVideoModal()">Trailer</button>
</div>
</div>
</div>
</div>
</div>
<div id="videoModal fade-in" class="modal">
<div class="modal-content">
<span class="close" onclick="closeVideoModal()">×</span>
<iframe style="border-radius: 5%;" width="700" height="450" src="https://www.youtube.com/embed/vKQi3bBA1y8?si=A8PWjCJS4Y6rKuYe" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<script>
// JavaScript for rotating posters
const posters = [
"./img/home/movie-poster/poster1.jpg",
"./img/home/movie-poster/poster2.jpg",
"./img/home/movie-poster/poster3.jpg",
"./img/home/movie-poster/poster4.jpg",
"./img/home/movie-poster/poster5.jpg",
"./img/home/movie-poster/poster6.jpg"
]; // Add the paths to your posters
let currentPosterIndex = 0;
function rotatePosters() {
document.getElementById("movie-poster").src = posters[currentPosterIndex];
currentPosterIndex = (currentPosterIndex + 1) % posters.length;
}
// Change poster every 5 seconds
setInterval(rotatePosters, 5000);
</script>
<script>
function openVideoModal() {
var modal = document.getElementById("videoModal");
modal.style.display = "block";
}
function closeVideoModal() {
var modal = document.getElementById("videoModal");
modal.style.display = "none";
}
</script>
<script>
window.addEventListener('load', function () {
const movieInfo = document.getElementById('movie-info');
movieInfo.classList.add('fade-in');
});
</script>
</section>
<!--home-section-->
<footer id="footer"><!-- js/footer.js --></footer>
</div>
<script src="js/header.js"></script>
<script src="js/navbar.js"></script>
<script src="js/footer.js"></script>
</body>
</html>