Improve the layout of the home page

static/card.css

@@ -5,8 +5,8 @@
   border-radius: 10px;
   background: var(--color-primary);
   aspect-ratio: 2 / 3;
-  width: 280px;
-  max-height: 380px;
+  flex-basis: 280px;
+  max-width: 300px;
   padding: 10px;
 }
 

static/home.css

@@ -0,0 +1,39 @@
+.home-page-header {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  gap: 10px;
+}
+
+.home-page-header p {
+  text-align: center;
+  margin: 0;
+}
+
+.search-bar {
+  display: flex;
+  background: white;
+  padding: 10px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  gap: 10px;
+  align-items: center;
+  cursor: pointer;
+}
+
+.search-bar input {
+  flex-grow: 1;
+  flex-basis: 600px;
+  background: inherit;
+  outline: none;
+  border: none;
+  font-size: 16px;
+  font-family: var(--body-font-family)
+}
+
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
+  gap: 10px;
+}

static/review.css

@@ -1,5 +1,6 @@
 .review {
-  max-width: 800px;
+  max-width: calc(70ch + 60px);
+  margin: auto;
   display: flex;
   flex-direction: column;
   align-items: center;

static/search.js

@@ -0,0 +1,13 @@
+const searchInput = document.getElementById('movie-search');
+const datalist = document.getElementById('movies');
+const dataitems = new Map();
+Array.from(datalist.children).forEach(function (ch) {
+  dataitems.set(ch.value, ch.getAttribute('data-value'));
+});
+
+searchInput.addEventListener('change', function(e) {
+  const targetLocation = dataitems.get(e.target.value);
+  if (targetLocation) {
+    window.location.href = targetLocation;
+  }
+});

static/style.css

@@ -75,6 +75,10 @@ p {
   text-align: justify;
 }
 
+.text-align\:center {
+  text-align: center !important;
+}
+
 html, body {
   background: var(--color-light-background);
   color: var(--color-secondary);
@@ -86,7 +90,7 @@ main {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-width: calc(70ch + 60px);
+  max-width: 900px;
 }
 
 .title, h1 {
@@ -208,12 +212,20 @@ a:hover {
 .cluster {
   display: flex;
 }
+.stack {
+  display: flex;
+  flex-direction: column;
+}
+
 .spacing\:between {
   justify-content: space-between;
 }
 .align\:center {
   align-items: center;
 }
+.justify\:center {
+  justify-content: center;
+}
 
 .icon {
   width: 24px;
@@ -225,6 +237,12 @@ a:hover {
 .s1 {
   gap: 10px;
 }
+.s2 {
+  gap: 20px;
+}
+.s3 {
+  gap: 30px;
+}
 
 .p1 {
   padding: 10px;
@@ -264,5 +282,5 @@ a:hover {
 }
 
 .http-header {
-  margin-top: 10vh;
+  class="home-page-header" margin-top: 10vh;
 }