diff --git a/public/assets/favorite.svg b/public/assets/favorite.svg
new file mode 100644
index 0000000000000000000000000000000000000000..08a5bc98d15a93a39a5dcce8caa9bfafc1205ad2
--- /dev/null
+++ b/public/assets/favorite.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="favorite_FILL1_wght400_GRAD0_opsz24 1">
+<path id="Vector" d="M24 42L21.1 39.4001C17.7333 36.3667 14.95 33.75 12.75 31.55C10.55 29.35 8.8 27.375 7.5 25.625C6.2 23.875 5.29167 22.2667 4.775 20.8C4.25833 19.3334 4 17.8334 4 16.3C4 13.1667 5.05 10.55 7.15 8.45005C9.25 6.35005 11.8667 5.30005 15 5.30005C16.7333 5.30005 18.3833 5.66672 19.95 6.40005C21.5167 7.13338 22.8667 8.16672 24 9.50005C25.1333 8.16672 26.4833 7.13338 28.05 6.40005C29.6167 5.66672 31.2667 5.30005 33 5.30005C36.1333 5.30005 38.75 6.35005 40.85 8.45005C42.95 10.55 44 13.1667 44 16.3C44 17.8334 43.7417 19.3334 43.225 20.8C42.7083 22.2667 41.8 23.875 40.5 25.625C39.2 27.375 37.45 29.35 35.25 31.55C33.05 33.75 30.2667 36.3667 26.9 39.4001L24 42Z" fill="#FB4646"/>
+</g>
+</svg>
diff --git a/public/assets/no-favorite.svg b/public/assets/no-favorite.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dfbdefec630f6bf5d1dcf8957570c55effecf945
--- /dev/null
+++ b/public/assets/no-favorite.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="favorite_FILL0_wght400_GRAD0_opsz24 1">
+<path id="Vector" d="M24 42L21.1 39.4001C17.7333 36.3667 14.95 33.75 12.75 31.55C10.55 29.35 8.8 27.375 7.5 25.625C6.2 23.875 5.29167 22.2667 4.775 20.8C4.25833 19.3334 4 17.8334 4 16.3C4 13.1667 5.05 10.55 7.15 8.45005C9.25 6.35005 11.8667 5.30005 15 5.30005C16.7333 5.30005 18.3833 5.66672 19.95 6.40005C21.5167 7.13338 22.8667 8.16672 24 9.50005C25.1333 8.16672 26.4833 7.13338 28.05 6.40005C29.6167 5.66672 31.2667 5.30005 33 5.30005C36.1333 5.30005 38.75 6.35005 40.85 8.45005C42.95 10.55 44 13.1667 44 16.3C44 17.8334 43.7417 19.3334 43.225 20.8C42.7083 22.2667 41.8 23.875 40.5 25.625C39.2 27.375 37.45 29.35 35.25 31.55C33.05 33.75 30.2667 36.3667 26.9 39.4001L24 42ZM24 36.6C27.2 33.7334 29.8333 31.275 31.9 29.225C33.9667 27.175 35.6 25.3917 36.8 23.875C38 22.3584 38.8333 21.0084 39.3 19.825C39.7667 18.6417 40 17.4667 40 16.3C40 14.3 39.3333 12.6334 38 11.3C36.6667 9.96672 35 9.30005 33 9.30005C31.4333 9.30005 29.9833 9.74172 28.65 10.625C27.3167 11.5084 26.4 12.6334 25.9 14H22.1C21.6 12.6334 20.6833 11.5084 19.35 10.625C18.0167 9.74172 16.5667 9.30005 15 9.30005C13 9.30005 11.3333 9.96672 10 11.3C8.66667 12.6334 8 14.3 8 16.3C8 17.4667 8.23333 18.6417 8.7 19.825C9.16667 21.0084 10 22.3584 11.2 23.875C12.4 25.3917 14.0333 27.175 16.1 29.225C18.1667 31.275 20.8 33.7334 24 36.6Z" fill="#FB4646"/>
+</g>
+</svg>
diff --git a/public/css/filmDetails.css b/public/css/filmDetails.css
deleted file mode 100644
index 23948da8165748bb2c2823e3bd0dd03ec2f14c7c..0000000000000000000000000000000000000000
--- a/public/css/filmDetails.css
+++ /dev/null
@@ -1,28 +0,0 @@
-#goBack:hover{
- cursor:pointer;
-}
-
-#filmDetails {
- text-align: left;
- padding-left: 100px;
-}
-
-h1#title{
- text-decoration: underline;
-}
-
-#poster {
- width: 250px;
- max-width: 50%;
- height: auto;
-}
-
-#reviews{
- font-size: medium;
-}
-
-
-#reviewer #reviewScore{
- width:25%;
-}
-
diff --git a/public/css/styles.css b/public/css/styles.css
index 74246b28b348fb146f1ea547296dbd7765dc5a06..966edbe5f5f46a36c6e6c086cc81232b90b5d194 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -379,6 +379,99 @@ textarea {
font-weight: bold;
}
+.back-button {
+ text-decoration: none;
+ color: white;
+ font-size: large;
+ font-weight: bold;
+ padding: 20px;
+}
+
+
+.details {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: row;
+}
+
+.media {
+ display: flex;
+ flex-direction: row;
+ gap: 1.5rem;
+ margin-top: 30px;
+}
+
+.card {
+ display: flex;
+ flex-direction: column;
+ border-radius: 12px;
+ background-color: var(--neutral-grey-dark, #21252C);
+ padding: 20px;
+ gap: 20px;
+}
+
+.title-header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.title-header button {
+ border: none;
+ background-color: var(--neutral-grey-dark, #21252C);
+ cursor: pointer;
+}
+
+#fav {
+ width: 2rem;
+}
+
+#goBack:hover{
+ cursor:pointer;
+}
+
+#filmDetails {
+ display: flex;
+ flex-direction: column;
+ text-align: left;
+ padding-left: 100px;
+ width: 80%;
+ gap: 30px;
+}
+
+#poster {
+ width: 250px;
+ max-width: 50%;
+ height: auto;
+ border-radius: 8px;
+}
+
+#trailer {
+ width: 700px;
+ background-color: #393c43;
+ border-radius: 10px;
+}
+
+#cast {
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+}
+
+#castTitle {
+ font-weight: bold;
+}
+
+#link {
+ cursor: pointer;
+ padding-left: 15px;
+ margin-bottom: 20px;
+ color: white;
+
+
+}
+
@media only screen and (max-width: 800px) {
.form-container {
width: 100%;
diff --git a/src/controllers/CreateFilmController.php b/src/controllers/CreateFilmController.php
index e4dd8cff4899ecc86dc7174c4e9f7ccbae440cfb..3581c324c7b00ce617c0a30d1343bb3d7a68f294 100644
--- a/src/controllers/CreateFilmController.php
+++ b/src/controllers/CreateFilmController.php
@@ -66,8 +66,8 @@ class CreateFilmController extends BaseController
if ($_FILES['image-path']['error'] == UPLOAD_ERR_OK) {
$image_tmp = $_FILES['image-path']['tmp_name'];
$image_name = $_FILES['image-path']['name'];
- move_uploaded_file($image_tmp, __DIR__ . "/../../public/files/images/" . $image_name);
- $image_path = "/public/files/images/" . $image_name;
+ move_uploaded_file($image_tmp, __DIR__ . "/../../public/files/img/" . $image_name);
+ $image_path = "/public/files/img/" . $image_name;
if (!$this->is_image($image_name)) {
throw new BadRequestException("Image file format is not valid");
diff --git a/src/controllers/UpdateFilmController.php b/src/controllers/UpdateFilmController.php
index e7be0a03dad554af4662389cb4f606431b6ef53f..3717b0a08776aeec5c087cfd29b39a7548d5d110 100644
--- a/src/controllers/UpdateFilmController.php
+++ b/src/controllers/UpdateFilmController.php
@@ -132,8 +132,8 @@ class UpdateFilmController extends BaseController
// Use uploaded file
$image_tmp = $_FILES['image-path']['tmp_name'];
$image_name = $_FILES['image-path']['name'];
- move_uploaded_file($image_tmp, __DIR__ . "/../../public/files/images/" . $image_name);
- $image_path = "/public/files/images/" . $image_name;
+ move_uploaded_file($image_tmp, __DIR__ . "/../../public/files/img/" . $image_name);
+ $image_path = "/public/files/img/" . $image_name;
$data['image_path'] = $image_path;
if (!$this->is_image($image_name)) {
diff --git a/views/film-details.php b/views/film-details.php
index 8365b9682018bcf3bda8dcb2deeef25ce521575c..91af76edd64e45330f618734d9f1f994d2919de0 100644
--- a/views/film-details.php
+++ b/views/film-details.php
@@ -1,23 +1,32 @@
-<h2 id="goBack"><a href="/films"><?php echo "Go back to films" ?></a></h2>
-<div id="filmDetails">
- <img id="poster" src="<?php echo "public/" . $film->image_path?>" alt="<?php echo $film->title?> Poster">
- <video controls>
- <source src="<?php echo "public/" . $film->trailer_path?>" type="video/mp4">
- Your browser does not support the video tag.
- </video>
- <h1 id="title"><?php echo $film->title?></h1>
- <h2><?php echo "$film->released_year | Directed by $film->director | $film->genre"?></h2>
- <h3>Cast: <?php echo $film->cast?></h3>
- <p><?php echo $film->description?></p>
+<div class='details'>
+ <h2 id="goBack"><a class='back-button' href="/films"><?php echo "< Films" ?></a></h2>
+ <div id="filmDetails">
+ <div class='media'>
+ <img id="poster" src="<?php echo "public/" . $film->image_path ?>" alt="<?php echo $film->title ?> Poster">
+ <video id="trailer" controls>
+ <source src="<?php echo "public/" . $film->trailer_path ?>" type="video/mp4">
+ Your browser does not support the video tag.
+ </video>
+ </div>
- <h1 id="peopleComment">What people say</h1>
- <div id="reviews">
- <?php $i = 0; foreach ($reviews as $review) { ?>
- <div class="review">
- <div id="reviewer"><?php echo $commenting_user[$i]->username?></div> <div id="reviewScore"><?php echo $review->rating?>/5</div>
- <p><?php echo $review->notes?></p>
- <p><?php echo $review->published_time?></p>
+ <div class='card'>
+ <div class='title-header'>
+ <h1 id="title"><?php echo $film->title ?></h1>
+ <button>
+ <image id='fav' src="/public/assets/favorite.svg"></image>
+ </button>
</div>
- <?php $i++;} ?>
+
+ <h2><?php echo "$film->released_year | Directed by $film->director | $film->genre" ?></h2>
+ <div id="cast">
+ <h3 id="castTitle">Cast: </h3>
+ <p><?php echo $film->cast ?></p>
+ </div>
+ <p><?php echo $film->description ?></p>
+ </div>
+
+ <a id='link' href=<?= '/review?film_id=' . $film->film_id ?>>
+ <h1>Reviews ></h1>
+ </a>
</div>
</div>
\ No newline at end of file