Feature: Terminal Public Startpage

src/resources/vue/components/Box.vue

@@ -1,27 +1,31 @@
 <template>
-    <div class="box" :style="{ backgroundColor: color }">
-        <slot></slot>
-    </div>
+	<div class="box" :style="{ backgroundColor: color, flexDirection: direction }">
+		<slot></slot>
+	</div>
 </template>
+
 <script>
-    export default {
-        name: 'Box',
-        props: {
-            color: {
-                type: String,
-                default: '#f2f2f2',
-            },
-        },
-    };
+	export default {
+		name: 'Box',
+		props: {
+			color: {
+				type: String,
+				default: '#f2f2f2',
+			},
+			direction: {
+				type: String,
+				default: 'column',
+			},
+		},
+	};
 </script>
 <style lang="scss">
-    .box {
-        padding: 30px;
-        border-radius: 5px;
-        width: fit-content;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-    }
+	.box {
+		padding: 30px;
+		border-radius: 5px;
+		width: fit-content;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
 </style>

src/resources/vue/components/ItemCard.vue

@@ -3,8 +3,8 @@
     <div class="left">
       <Icon icon="book" size="90" color="white" />
       <div class="info">
-          <p>{{ title }}</p>
-          <p>{{ description }}</p>
+        <p>{{ title }}</p>
+        <p>{{ description }}</p>
       </div>
     </div>
     <div v-if="warning" class="right">
@@ -14,56 +14,55 @@
 </template>
 
 <script>
-import Icon from "./icon.vue";
+  import Icon from "./icon.vue";
 
-export default {
-  name: "ItemCard",
-  props: {
-    title: String,
-    description: String,
-    warning: Boolean,
-  },
-  components: {
-    Icon,
-  },
-};
+  export default {
+    name: "ItemCard",
+    props: {
+      title: String,
+      description: String,
+      warning: Boolean,
+    },
+    components: {
+      Icon,
+    },
+  };
 </script>
-
 <style lang="scss">
-.item-card {
-  width: 667px;
-  height: 116px;
-  background: #1d243a;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 13px;
-
-  .left {
+  .item-card {
+    width: 667px;
+    height: 116px;
+    background: #1d243a;
+    border-radius: 8px;
     display: flex;
     align-items: center;
-    width: 100%;
-    height: 100%;
+    justify-content: space-between;
+    padding: 13px;
 
-    .info {
-      margin-left: 20px;
+    .left {
       display: flex;
-      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      height: 100%;
 
-      p {
+      .info {
+        margin-left: 20px;
+        display: flex;
+        flex-direction: column;
+
+        p {
           color: #fff;
           font-size: 32px;
           font-family: "Outfit";
           font-weight: 700;
+        }
       }
     }
-  }
 
-  .right {
-    display: flex;
-    align-items: flex-start;
-    height: 100%;
+    .right {
+      display: flex;
+      align-items: flex-start;
+      height: 100%;
+    }
   }
-}
-</style>
+</style>

src/resources/vue/components/icon.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-html="iconSVG"></div>
+    <div class="icon" v-html="iconSVG"></div>
 </template>
 
 <script>
@@ -22,6 +22,8 @@ export default {
           return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.4337 7C20.7734 7 20.2074 7.09434 19.6413 7.28301C15.9622 8.03771 13.0377 10.9622 12.283 14.6413C12 15.2074 12 15.7734 12 16.4337V68.3194C12 76.1494 18.3206 82.47 26.1506 82.47H78.0362V73.0362H26.1506C23.5092 73.0362 21.4337 70.9608 21.4337 68.3194C21.4337 65.6779 23.5092 63.6025 26.1506 63.6025H78.0362V11.7169C78.0362 9.07542 75.9608 7 73.3194 7H68.6025V35.3012L59.1687 25.8675L49.735 35.3012V7H21.4337Z" fill="${this.color || 'black'}"/></svg>`;
         case 'warning':
           return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_21_835)"><path d="M17.5 2.1875C18.4707 2.1875 19.3663 2.7002 19.8584 3.54102L34.6241 28.6973C35.1231 29.5449 35.1231 30.5908 34.6377 31.4385C34.1524 32.2861 33.2432 32.8125 32.2657 32.8125H2.73442C1.75688 32.8125 0.847697 32.2861 0.362345 31.4385C-0.123007 30.5908 -0.116171 29.5381 0.376017 28.6973L15.1416 3.54102C15.6338 2.7002 16.5293 2.1875 17.5 2.1875ZM17.5 10.9375C16.5909 10.9375 15.8594 11.6689 15.8594 12.5781V20.2344C15.8594 21.1436 16.5909 21.875 17.5 21.875C18.4092 21.875 19.1407 21.1436 19.1407 20.2344V12.5781C19.1407 11.6689 18.4092 10.9375 17.5 10.9375ZM19.6875 26.25C19.6875 25.6698 19.4571 25.1134 19.0468 24.7032C18.6366 24.293 18.0802 24.0625 17.5 24.0625C16.9199 24.0625 16.3635 24.293 15.9532 24.7032C15.543 25.1134 15.3125 25.6698 15.3125 26.25C15.3125 26.8302 15.543 27.3866 15.9532 27.7968C16.3635 28.207 16.9199 28.4375 17.5 28.4375C18.0802 28.4375 18.6366 28.207 19.0468 27.7968C19.4571 27.3866 19.6875 26.8302 19.6875 26.25Z" fill="#E57E1F"/></g><defs><clipPath id="clip0_21_835"><rect width="35" height="35" fill="${this.color || 'black'}"/></clipPath></defs></svg>`;
+        case 'scan-icon':
+          return `<svg width="${this.size || 24}" height="${this.size || 24}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z" fill="${this.color || 'black'}"></path></svg>`;
         default:
           return '';
       }
@@ -30,4 +32,9 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="scss">
+  .icon {
+    display: flex;
+    align-items: center;
+  }
+</style>

src/resources/vue/components/terminal-scan.vue

@@ -1,33 +1,59 @@
 <template>
 	<div>
-		<Box>
+		<Box :direction="direction">
 			<div class="content">
-				<svg class="scan-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-					<path d="M15 3H21V8H19V5H15V3ZM9 3V5H5V8H3V3H9ZM15 21V19H19V16H21V21H15ZM9 21H3V16H5V19H9V21ZM3 11H21V13H3V11Z"></path>
-				</svg>
-				<span class="text">Scan een artikel om te lenen</span>
+				<Icon v-if="text" icon="scan-icon" size="52px" />
+				<span v-if="text" class="text">{{ text }}</span>
+			</div>
+			<div class="form">
+				<div class="form-input">
+					<Icon v-if="!text" :icon="icon" size="52px" />
+					<Input type="text" :placeholder="placeholder" class="text-medium" />
+				</div>
+				<Button :content="buttonText" :buttonAction="searchInput" />
 			</div>
-			<Input type="text" placeholder="Voer wat in" class="text-medium" />
-			<Button content="Zoek" :buttonAction="searchInput" />
 		</Box>
 	</div>
 </template>
 <script>
 	import Box from '../components/Box.vue';
 	import Button from '../components/Button.vue';
 	import Input from '../components/Input.vue';
+	import Icon from '../components/icon.vue';
 
 	export default {
 		name: 'index',
 		components: {
 			Box,
 			Button,
-			Input
+			Input,
+			Icon
 		},
 		methods: {
 			searchInput() {
-				// TODO: Implement search input
-				console.log('Search input');
+				// TODO: Search for library pass or item
+			},
+		},
+		props: {
+			direction: {
+				type: String,
+				default: 'column',
+			},
+			text: {
+				type: String,
+				default: 'Lorem Ipsum Text',
+			},
+			placeholder: {
+				type: String,
+				default: 'Placeholder',
+			},
+			icon: {
+				type: String,
+				default: 'default',
+			},
+			buttonText: {
+				type: String,
+				default: 'Button',
 			},
 		},
 	};
@@ -41,6 +67,10 @@
 		gap: 40px;
 		margin-bottom: 17px;
 
+		&.column {
+			flex-direction: column !important;
+		}
+
 		.text {
 			color: #000;
 			max-width: 245px;
@@ -55,6 +85,21 @@
 		}
 	}
 
+	.form {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 7px;
+
+		.form-input {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			gap: 10px;
+		}
+	}
+
 	.button {
 		margin-top: 15px;
 	}

src/resources/vue/pages/index.vue

@@ -1,8 +1,35 @@
 <template>
-	<h1>Hello World!</h1>
+  <div class="terminal-content">
+    <span class="terminal-title">Scan uw pas om te lenen, <br> of een artikel om terug te brengen</span>
+    <TerminalScan text="" buttonText="Zoeken" icon="scan-icon" direction="row" placeholder="101010101" />
+  </div>
 </template>
 <script>
-export default {
-  name: "Index",
-};
-</script>
+  import TerminalScan from "../components/terminal-scan.vue";
+
+  export default {
+    name: "Index",
+    components: {
+      TerminalScan,
+    },
+  };
+</script>
+<style lang="scss">
+  .terminal-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 50px;
+    margin-top: 20px;
+    width: 98vw;
+    height: 96vh;
+
+    .terminal-title {
+      font-size: 52px;
+      font-weight: 700;
+      text-align: center;
+      color: #F7F4F3;
+    }
+  }
+</style>