-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (145 loc) · 7.23 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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Include Bootstrap stylesheet -->
<!-- Bootstrap 5.3.2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- Include Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<!-- Include FontAwesome stylesheet v6.5.1 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="./assets/css/style.css" />
<title>MovieMoment</title>
</head>
<body>
<header class="nav-bar p-3 mb-5 movie-header">
<div class="container">
<div class="row">
<h1 id="form-heading" class="col-lg-6 header-title">
<i class="fa-solid fa-film"></i> MovieMoment
</h1>
</div>
</div>
</header>
<div class="container container-bottom">
<div id="main-content" class="row">
<!-- Sidebar -->
<aside id="aside-watchlist" class="col-lg-3 pb-3 mb-4">
<h3 id="form-heading" class="mt-3 mb-3 h3 form-label">
Search for a Movie
</h3>
<form id="search-form" class="form">
<div class="form-group mb-3">
<input id="search-input" class="form-control movie-search" type="text"
placeholder="Search your movie here and select from the list" aria-labelledby="form-heading"
aria-controls="movie-name movie-info movie-trailer" />
<div class="dropdown-menu position-absolute" aria-labelledby="dropdownMenuButton"></div>
</div>
</form>
<hr />
<h5 id="watchlist-header" class="mb-3 h5 form-label">
<i class="fa-solid fa-list"></i> Watchlist
</h5>
<div id="history" class="list-group col-lg-12"></div>
<div id="div-clear-history-button">
<button id="clear-history-button" type="button"
class="btn btn-outline-danger clear-history-button mt-3">
<i class="fa-solid fa-trash" title="Delete watchlist" aria-hidden="true"></i>
<span>Clear History</span>
</button>
</div>
</aside>
<!-- Main Content -->
<div id="movie-container" class="col-lg-9 pb-3">
<!-- Movie Header -->
<section id="movie-header" class="mt-3" role="region" aria-live="polite">
<h2 id="movie-title">Movie Name (Placeholder)</h2>
<div class="movie-rating">
<p class="movieInfo-bold">IMDb RATING</p>
<i class="fa-solid fa-star fa-1x mb-3 gold"></i>
<span id="value-rating" class="movieInfo-bold gold">88.8</span><span class="gray-500">/10</span>
</div>
<button type="button" id="save-to-watchlist" class="btn btn-success save-to-watchlist">
<i class="fa-regular fa-square-plus"></i> Add to Watchlist
</button>
</section>
<!-- Movie Details -->
<section id="movie-details" class="row mt-3" role="region" aria-live="polite">
<!-- Left Column: Movie Info -->
<h6 id="details-header" class="mb-3 h6">Details</h6>
<div id="movie-info" class="col-md-8">
</div>
<!-- Right Column: Movie Poster -->
<div id="div-movie-poster" class="col-md-4 text-right">
<img id="movie-poster" src="" alt="Movie Poster" class="img-fluid">
</div>
</section>
<!-- Movie Trailer -->
<section id="movie-trailer" class="row mt-2 mb-3 col-md-12" role="region" aria-live="polite">
</section>
</div>
</div>
<!-- Modal for duplicate films on watchlist -->
<div id="duplicateFilmModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Duplicate Film</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p><i class="fa-solid fa-circle-info"></i> Film is already on the watchlist!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Understood</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Section -->
<footer class="container fixed-bottom py-4">
<div>
<ul class="border-bottom mb-3"></ul>
</div>
<div class="row">
<div class="col-lg-6 ftr-icons">
<a href="https://github.com/deponte-designer" class="github-link" target="_blank">
<i class="fa-brands fa-github fa-2x"></i>
</a>
<a href="https://github.com/jsskilton" class="github-link" target="_blank">
<i class="fa-brands fa-github fa-2x"></i>
</a>
<a href="https://github.com/Meisterstu" class="github-link" target="_blank">
<i class="fa-brands fa-github fa-2x"></i>
</a>
</div>
<div class="col-lg-6 ftr-copy text-center">
<p class="text-body-primary mb-0">
© 2024 Developed by <span class="movieInfo-bold">Moment 13.</span> All rights reserved.
</p>
</div>
</div>
</footer>
<!-- End Footer Section -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Bootstrap 5.3.2 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<!-- JavaScript -->
<script src="./assets/js/script.js"></script>
</body>
</html>