From d69df9d280f149292f6229846a654d97228d1d10 Mon Sep 17 00:00:00 2001
From: Esa Kataja <ekataja@gmail.com>
Date: Thu, 13 Nov 2025 23:30:59 +0200
Subject: [PATCH] Add: basic info screen

---
 app/pages/info.vue | 98 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 app/pages/info.vue

diff --git a/app/pages/info.vue b/app/pages/info.vue
new file mode 100644
index 0000000..526bb1a
--- /dev/null
+++ b/app/pages/info.vue
@@ -0,0 +1,98 @@
+
+<script setup>
+    const movie_data = ref({
+        "Title": "A Maple Valley Christmas",
+        "Year": "2022",
+        "Rated": "TV-G",
+        "Released": "05 Nov 2022",
+        "Runtime": "85 min",
+        "Genre": "Comedy, Drama, Romance",
+        "Director": "Paul Ziller",
+        "Writer": "Joie Botkin, Jerry Todt",
+        "Actors": "Peyton List, Andrew W. Walker, Frances Flanagan",
+        "Plot": "Erica is a rancher who has spent her whole life working the family farm with her mother and sister. When Aaron arrives and disrupts her plans, she starts to question what it is she actually wants.",
+        "Language": "English, Italian",
+        "Country": "Canada, United States",
+        "Awards": "1 nomination total",
+        "Poster": "https://m.media-amazon.com/images/M/MV5BZjliMTRlMGItOGQzZC00NTI2LWJkODctZWZmMDIzOGRmYTQ3XkEyXkFqcGc@._V1_SX300.jpg",
+        "Ratings": [
+            {
+                "Source": "Internet Movie Database",
+                "Value": "6.3/10"
+            }
+        ],
+        "Metascore": "N/A",
+        "imdbRating": "6.3",
+        "imdbVotes": "1,577",
+        "imdbID": "tt21841642",
+        "Type": "movie",
+        "DVD": "N/A",
+        "BoxOffice": "N/A",
+        "Production": "N/A",
+        "Website": "N/A",
+        "Response": "True"
+})
+</script>
+<template>
+    <div class="info-container">
+        <h1>{{ movie_data.Title }}</h1>
+        <div class="poster-content">
+            <img class="poster" :src="movie_data.Poster" alt="">
+            <p>{{ movie_data.Plot }}</p>
+            <NuxtLink class="btn btn-primary" to="/">Aloita</NuxtLink>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+* {
+    font-family: DynaPuff, sans-serif;
+}
+
+.info-container {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    width: 100%;
+    min-height: 100vh;
+    padding: 1rem;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+    place-items: center;
+
+    > * {
+        text-align: center;
+    }
+
+    h1 {
+        text-align: center;
+        text-shadow: 3px 3px 0.5rem hsl(0, 74%, 20%);
+        margin-bottom: 1rem;
+    }
+    .poster-content {
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        padding: 2rem;
+        border: 1px solid hsl(0 74% 10% / 50%);
+        border-bottom-color: hsl(0 74% 80% / 10%);
+        border-radius: 2rem;
+        background-image: linear-gradient(to bottom, hsl(0 74% 80%), hsl(0 74% 70%));
+        box-shadow: inset 3px 3px 0.5rem hsl(0 74% 20%);
+        height: 100%;
+        
+        img {
+            max-width: 80%;
+            border-radius: 1rem;
+            box-shadow: 3px 3px 0.5rem hsl(0 74% 20%);
+            margin: auto auto 1rem auto;
+        }
+        p {
+            line-height: 1.5;
+            font-size: 0.9rem;
+            padding: 1rem;
+            color: hsl(0, 74%, 20%);
+        }    
+    }
+}
+</style>