From 877eb72670f1493561528b36c6292ce7bb1dd2a5 Mon Sep 17 00:00:00 2001
From: sinatayebati <sinatayebati@gmail.com>
Date: Sun, 19 May 2024 16:32:58 -0500
Subject: [PATCH] #12 final touches on the UI

---
 src/components/Home.vue | 210 +++++++++++++++++++++++-----------------
 1 file changed, 119 insertions(+), 91 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 690275a..caf2d12 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,102 +1,130 @@
 <template>
     <div class="home">
-        <header>
-        <h1>Vue component for Annotating PDFjs</h1>
-        </header>
-        <v-container class="outer-container" fluid>
+      <header>
+        <img src="../assets/Logo.webp" alt="Logo" class="logo" />
+        <div class="header-text">
+          <h1>Programmatic PDF Annotator</h1>
+          <h2>A component based on PDF.js & pdfAnnotate</h2>
+        </div>
+      </header>
+      <v-container class="outer-container" fluid>
         <v-row class="inner-container">
-            <v-col cols="12" md="8" class="viewer">
+          <v-col cols="12" md="8" class="viewer">
             <pdf-viewer @pdf-loaded="handlePdfLoaded"></pdf-viewer>
-            </v-col>
-            <v-col cols="12" md="4" class="tabs">
+          </v-col>
+          <v-col cols="12" md="4" class="tabs">
             <annot-pdf></annot-pdf>
-            </v-col>
+          </v-col>
         </v-row>
-        </v-container>
+      </v-container>
     </div>
-</template>
+  </template>
   
-<script>
-import pdfViewer from './pdfViewer.vue';
-import annotPdf from './annotPdf.vue';
-
-export default {
-name: "home",
-components: {
-    pdfViewer,
-    annotPdf
-},
-data() {
-    return {
-    text: "",
-    pdfLoadMessage: "",
-    };
-},
-methods: {
-    handlePdfLoaded(message) {
-    this.pdfLoadMessage = message;
+  <script>
+  import pdfViewer from './pdfViewer.vue';
+  import annotPdf from './annotPdf.vue';
+  
+  export default {
+    name: "home",
+    components: {
+      pdfViewer,
+      annotPdf
+    },
+    data() {
+      return {
+        text: "",
+        pdfLoadMessage: "",
+      };
+    },
+    methods: {
+      handlePdfLoaded(message) {
+        this.pdfLoadMessage = message;
+      }
     }
-}
-}
-</script>
-
-<style>
-@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@900&family=Montserrat:wght@100&family=Roboto&display=swap");
-
-* {
-margin: 0;
-padding: 0;
-box-sizing: border-box;
-font-family: "Roboto", sans-serif;
-}
-
-header {
-background-color: #1565C0;
-padding: 20px;
-text-align: center;
-}
-
-h1 {
-font-size: 50px;
-color: #fff;
-font-family: "Heebo", sans-serif;
-text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
-}
-
-.home {
-height: 100vh;
-}
-
-.outer-container {
-max-width: 100%;
-padding: 0 16px;
-margin: 0 20px;
-}
-
-.inner-container {
-display: flex;
-justify-content: space-between;
-max-width: 100%;
-padding: 0%;
-margin: 0;
-}
-
-.viewer
-.tabs {
+  }
+  </script>
+  
+  <style>
+  @import url("https://fonts.googleapis.com/css2?family=Heebo:wght@900&family=Montserrat:wght@100&family=Roboto&display=swap");
+  
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Roboto", sans-serif;
+  }
+  
+  header {
+    background-color: #1565C0;
+    padding: 20px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .logo {
+    width: 110px;
+    height: auto;
+    margin-right: 20px;
+  }
+  
+  .header-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  h1 {
+    font-size: 40px;
+    color: #fff;
+    font-family: "Heebo", sans-serif;
+    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+  }
+  
+  h2 {
+    font-size: 20px;
+    color: #fff;
+    font-family: "Heebo", sans-serif;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+    margin-top: 10px;
+  }
+  
+  .home {
+    height: 100vh;
+  }
+  
+  .outer-container {
+    max-width: 100%;
+    padding: 0 16px;
+    margin: 0 20px;
+  }
+  
+  .inner-container {
+    display: flex;
+    justify-content: space-between;
+    max-width: 100%;
+    padding: 0%;
+    margin: 0;
+  }
+  
+  .viewer,
+  .tabs {
     flex: 1;
     height: 120vh;
-}
-
-.tabs {
-display: flex;
-flex-direction: column;
-justify-content: start;
-}
-
-@media (max-width: 1200px) {
-.viewer,
-.tabs {
-    max-width: 100%;
-}
-}
-</style>
+  }
+  
+  .tabs {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+  }
+  
+  @media (max-width: 1200px) {
+    .viewer,
+    .tabs {
+      max-width: 100%;
+    }
+  }
+  </style>
+  
\ No newline at end of file