components

assets/scss/_layout.scss

@@ -33,7 +33,7 @@ Button#button{
   margin: 1% 40.5%;
  
 }
-label.cos{
+div.image-container{
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     font-size: 50px;
     color: #f2e527;
@@ -70,10 +70,57 @@ h4{
 label.file-input-label{
   font-size: 35px;
   color: #f2e527;
-  margin-left: 450px;
-  margin-bottom: -150px;
+  position: absolute;
+  left: 450px;
+  top: 121px;
 }
 div#con{
   padding-left: 800px;
- 
+}
+div#false{
+  color:red;
+  font-size: 70px;
+  text-align: center;
+  position: relative;
+  top:-50px;
+  left: -600px;
+}
+div#true{
+  color: green;
+  font-size: larger;
+  text-align: center;
+  font-size: 70px;
+  position: relative;
+  top:-50px;
+  left: -600px;
+}
+div#buttons{
+  margin-top:50px;
+}
+button#again{
+ position: relative;
+ left: -400px;
+ top:-50px;
+}
+button#con{
+  position: relative;
+  left: 100px;
+  top:-50px;
+}
+div#loading{
+  z-index: 10;
+  height: 100%;
+  width: 100%;
+  animation-name: loading;
+  animation-duration: 2s;
+  margin: auto;
+  font-size: 100px;
+  text-align: center;
+}
+@keyframes loading{
+  0%{color: red;font-weight: bolder;}
+  25%{color: #f2e527;font-weight: lighter;}
+  50%{color:red ; font-weight: bolder;}
+  75%{color:#f2e527;font-weight:lighter;}
+  100%{color:red ; font-weight: bolder;}
 }

components/Loader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="loading">
     <!-- @MACIEJ fajnie by bylo jakbys zrobil, ze ten loader ma duzy z-index, zajmuje 100% height i width i juz wgl by bylo super jakby sie kręciło coś -->
     loading...
   </div>

components/Result.vue

@@ -0,0 +1,22 @@
+<template>
+  <div v-if="result" id="true">
+    <fa :icon="['fas', 'check-circle']" />
+    CORRECTS, THAT'S A CAT
+    <fa :icon="['fas', 'check-circle']" />
+  </div>
+  <div v-else id="false">
+    <fa :icon="['fas', 'times-circle']" />
+    WRONG, THATS NOT A CAT
+    <fa :icon="['fas', 'times-circle']" />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    result: {
+      type: Boolean,
+      default: null
+    }
+  }
+}
+</script>

pages/check.vue

@@ -7,9 +7,11 @@
       <template v-else>
         <!-- @MACIEJ tutaj wstaw nowy komponent, do ktorego np. przeslesz rozny tekst i typ (success, fail) zaleznie od zmiennej result. Ma wyswietlac czy jest kotek czy nie -->
         <!-- @temp -->
-        {{ result }}
-        <Button text="TRY AGAIN" :icon="['fas', 'redo']" @click.native="getResult" />
-        <Button text="PICK ANOTHER" :icon="['fas', 'arrow-right']" @click.native="clear" />
+        <Result :result="result" />
+        <div id="buttons">
+          <Button id="again" text="TRY AGAIN" :icon="['fas', 'redo']" @click.native="getResult" />
+          <Button id="con" text="PICK ANOTHER" :icon="['fas', 'arrow-right']" @click.native="clear" />
+        </div>
       </template>
     </div>
   </main>