init component

user-interface/src/App.vue

@@ -1,11 +1,34 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import AppTopbar from '@/components/AppTopbar.vue'
+</script>
 
 <template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
+  <header>
+    <AppTopbar />
+  </header>
+  <main>
+    <RouterView />
+  </main>
+  <!-- <footer>
+    <AppFooter />
+  </footer> -->
 </template>
 
-<style scoped></style>
+<style>
+/* #app {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  height: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  #app {
+    height: 100vh;
+  }
+} */
+</style>

user-interface/src/components/AppFooter.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+...
+</template>
+
+<style scoped>
+
+</style>

user-interface/src/components/AppTopbar.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="topbar-container">
+        <div class="logo-container">
+            <img class="logo" src="../assets/svg/manolia-logo.svg" alt="Manolia logo" />
+            <span>MANOLIA</span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.topbar-container {
+  height: 4rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+.logo-container {
+  width: 20rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  img {
+    width: 2rem;
+  }
+}
+
+</style>

user-interface/src/components/CollectKnowledge.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="container">
+    <h2>Collect Knowledge</h2>
+</div>
+</template>
+
+<style scoped>
+.container{
+    background-color: #ffffff;
+    border-radius: 16px;
+    padding: 34px;
+}
+
+</style>

user-interface/src/components/EvaluateQuestion.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div>
+    Evaluate
+</div>
+</template>
+
+<style scoped>
+
+</style>

user-interface/src/components/ReadKnowledges.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div class="container">
+    <h2>Knowledge</h2>
+</div>
+</template>
+
+<style scoped>
+.container{
+    background-color: #ffffff;
+    border-radius: 16px;
+    padding: 34px;
+}
+</style>

user-interface/src/main.ts

@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import './styles/global.css';
 
 const app = createApp(App)
 

user-interface/src/router/index.ts

@@ -2,7 +2,14 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [],
+  routes: [
+    {
+      path: '/',
+      alias: '/app',
+      name: 'app',
+      component: () => import('@/views/ExperimentView.vue'),
+    },
+  ],
 })
 
 export default router

user-interface/src/styles/global.css

@@ -0,0 +1,4 @@
+body {
+  background-color: #FFF4EA;
+  margin-inline: 5%;
+}

user-interface/src/views/ExperimentView.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import ReadKnowledges from '@/components/ReadKnowledges.vue';
+import CollectKnowledge from '@/components/CollectKnowledge.vue';
+//import EvaluateQuestion from '@/components/EvaluateQuestion.vue';
+</script>
+
+<template>
+    <div class="experiment-container">
+        <section id="section-left">
+            <ReadKnowledges/>
+        </section>
+        <section id="section-central">
+            <CollectKnowledge/>
+        </section>
+        <!-- <section>
+            <EvaluateQuestion/>
+        </section> -->
+    </div>
+</template>
+
+<style scoped>
+    .experiment-container{
+        display: grid;
+        grid-template-columns: 1fr 3fr;
+        gap: 24px;
+    }
+</style>