Homepage Enhancements

MovieVerse-Frontend/css/index.scss

@@ -0,0 +1,87 @@
+$font-family-poppins: "Poppins", sans-serif;
+$background-color-primary: #7378c5;
+$hover-color: #ff8623;
+$link-color: white;
+$link-hover-color: #f509d9;
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: url("../../images/universe-1.png") no-repeat center center fixed;
+  background-size: cover;
+  font-family: $font-family-poppins;
+  margin: 0;
+  align-content: center;
+  overflow-x: hidden;
+  min-height: 100vh;
+  overflow-y: auto;
+}
+
+%button-style {
+  background-color: $background-color-primary;
+  color: black;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  &:hover {
+    background-color: $hover-color;
+    transition: 0.3s ease-in;
+  }
+}
+
+#movie-match-btn {
+  @extend %button-style;
+  position: fixed;
+  bottom: 220px;
+  right: 20px;
+}
+
+#submit-comment {
+  @extend %button-style;
+  padding: 10px 15px;
+}
+
+%link-style {
+  color: $link-color;
+  text-decoration: underline;
+  &:hover {
+    color: $link-hover-color;
+  }
+}
+
+#cast-info, #similar-tv, #director-link {
+  @extend %link-style;
+}
+
+@mixin modal-style {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin-top: 5px;
+}
+
+.modal-header {
+  @include modal-style;
+}
+
+.comments-controls {
+  display: flex;
+  align-items: center;
+  button:disabled {
+    cursor: not-allowed;
+  }
+  &.justify-start {
+    justify-content: start;
+  }
+  &.justify-center {
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+  }
+}

MovieVerse-Frontend/css/navbar.scss

@@ -0,0 +1,97 @@
+$breakpoint-mobile: 480px;
+$breakpoint-tablet: 768px;
+$breakpoint-desktop: 1024px;
+
+$navbar-background-color: #333;
+$navbar-text-color: #fff;
+$navbar-hover-color: #555;
+$mobile-menu-background-color: #222;
+
+@mixin responsive-visibility {
+  @media (max-width: $breakpoint-mobile) {
+    display: none;
+  }
+}
+
+.navbar {
+  background-color: $navbar-background-color;
+  color: $navbar-text-color;
+  padding: 1em;
+
+  .logo {
+    float: left;
+    font-size: 1.5em;
+    margin-right: 15px;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    float: right;
+
+    li {
+      display: inline;
+      margin-left: 15px;
+
+      a {
+        text-decoration: none;
+        color: $navbar-text-color;
+
+        &:hover {
+          color: $navbar-hover-color;
+        }
+      }
+    }
+  }
+
+  @media (max-width: $breakpoint-tablet) {
+    ul {
+      float: none;
+      text-align: center;
+
+      li {
+        display: block;
+        margin-top: 0.5em;
+      }
+    }
+  }
+}
+
+.mobile-menu-btn {
+  @include responsive-visibility;
+
+  display: inline-block;
+  background-color: $mobile-menu-background-color;
+  color: $navbar-text-color;
+  padding: 10px;
+  border: none;
+  cursor: pointer;
+}
+
+.mobile-menu {
+  display: none;
+
+  &.active {
+    display: block;
+    padding: 10px;
+    background-color: $mobile-menu-background-color;
+
+    ul {
+      text-align: center;
+
+      li {
+        margin-top: 10px;
+
+        a {
+          display: block;
+          color: $navbar-text-color;
+
+          &:hover {
+            background-color: $navbar-hover-color;
+          }
+        }
+      }
+    }
+  }
+}

MovieVerse-Frontend/css/profile.scss

@@ -0,0 +1,83 @@
+$primary-color: #4A90E2;
+$secondary-color: #50E3C2;
+$text-color: #4A4A4A;
+$background-color: #F5F7FA;
+$padding-standard: 15px;
+$border-radius-standard: 5px;
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin card-style {
+  background-color: white;
+  border-radius: $border-radius-standard;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  padding: $padding-standard;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  color: $text-color;
+  background-color: $background-color;
+}
+
+a {
+  color: $primary-color;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.profile-container {
+  @include flex-center;
+  flex-direction: column;
+}
+
+.profile-header {
+  @include flex-center;
+  flex-direction: column;
+  margin-bottom: 20px;
+
+  .profile-image {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    margin-bottom: $padding-standard;
+  }
+
+  .profile-name {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .profile-bio {
+    text-align: center;
+    margin-top: $padding-standard;
+  }
+}
+
+.profile-content {
+  @include card-style;
+  margin: 20px auto;
+  width: 90%;
+  max-width: 600px;
+
+  .section {
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+
+    h2 {
+      border-bottom: 2px solid $primary-color;
+      padding-bottom: $padding-standard / 2;
+    }
+
+    p, ul {
+      margin-top: $padding-standard / 2;
+    }
+  }
+}

MovieVerse-Frontend/html/article.hbs

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{article.title}}</title>
+</head>
+<body>
+  <header>
+    <h1>{{article.title}}</h1>
+    <p>Written by: {{article.author}}</p>
+  </header>
+  <article>
+    <p>{{article.content}}</p>
+  </article>
+</body>
+</html>

MovieVerse-Frontend/html/movies-list.hbs

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Movies List</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    .movie {
+      margin-bottom: 20px;
+    }
+    .movie-title {
+      font-weight: bold;
+    }
+    .movie-year {
+      font-style: italic;
+    }
+    .movie-description {
+      margin-top: 5px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Movies List</h1>
+  {{#each movies}}
+    <div class="movie">
+      <div class="movie-title">{{this.title}}</div>
+      <div class="movie-year">Released in: {{this.year}}</div>
+      <div class="movie-description">{{this.description}}</div>
+    </div>
+  {{/each}}
+</body>
+</html>