Merge branch 'master' of https://git.wmi.amu.edu.pl/s462068/inzynieria_frontend

assets/scss/_layout.scss

@@ -1,3 +1,126 @@
-.test {
-  color: red;
+
+button{
+    background-color:#f2e527 ;
+    height: 70px;
+    width: 350px;
+    border-radius: 8px;
+    color:#253340;
+    font-size: 30px;
+    font-weight: bolder;
+  
+}
+div#catornot{
+    background-image:linear-gradient(rgba(0, 0, 0, 0.726),rgba(0, 0, 0, 0.767)),url(../../static/img/catsornot.jpg);
+    background-repeat: no-repeat;
+    color:#f2e527;
+    width:1400px;
+    height: 788px;
+    margin: 0 auto;
+
+}
+body{
+  background-color: #283643;
+}
+div#text{
+    width: 100%;
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 90px;
+    padding-left:10px;
+    padding-top: 110px;
+    text-align: center;
+}
+Button#button{
+  margin: 1% 40.5%;
+ 
+}
+div.image-container{
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size: 50px;
+    color: #f2e527;
+    width: 1050px;
+    height: 550px;
+    border: 5px dashed #f2e527;
+    display: inline-block;
+    text-align: center;
+    background-image:linear-gradient(rgba(0, 0, 0, 0.76),rgba(0, 0, 0, 0.80),rgba(0,0,0,0.90)),url(../../static/img/catsornot.jpg);
+    background-repeat: no-repeat; 
+    margin:150px 350px 100px 450px ;
+}
+div#cloud{
+    font-size: 100px; 
+    padding-top: 40px;
+}
+div#browse{
+    background-color: #5d653f;
+    height: 60px;
+    width: 330px;
+    text-align: center;
+    border-style: none solid solid none;
+    border-color: #f2e527;
+    border-radius: 5px;
+    font-size: 50px;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    color: #f2e527;
+    margin-left: 350px;
+
+}
+h4{
+  font-size: 35px;
+}
+label.file-input-label{
+  font-size: 35px;
+  color: #f2e527;
+  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/InputFile.vue

@@ -20,8 +20,18 @@
         alt="obrazek"
       >
       <!-- z tego labela zrob ten element w figmie ktory jest pustym prostokątem i na niego masz upuscic obrazek -->
-      <label v-else :for="id">
-        kliknij /  upuść tutaj
+      <label v-else :for="id" class="cos">
+        <div id="cloud">
+          <fa :icon="['fas', 'cloud-download-alt']" />
+        </div>
+        Drop your image here
+        <br>
+        <h4>
+          OR
+        </h4>
+        <div id="browse">
+          Browse files
+        </div>
       </label>
       <div style="opacity: 0; position: absolute; pointer-events: none;">
         <input

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>

package.json

@@ -18,7 +18,7 @@
     "@nuxtjs/fontawesome": "^1.1.2",
     "axios": "^0.24.0",
     "core-js": "^3.15.1",
-    "nuxt": "^2.15.7"
+    "nuxt": "^2.13.3"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.14.7",
@@ -27,7 +27,6 @@
     "eslint": "^7.29.0",
     "eslint-plugin-nuxt": "^2.0.0",
     "eslint-plugin-vue": "^7.12.1",
-    "fibers": "^5.0.0",
     "sass": "^1.44.0",
     "sass-loader": "^10.2.0"
   }

pages/check.vue

@@ -1,16 +1,19 @@
 <template>
   <main>
-    <h1>Cat or Not</h1>
     <Loader v-if="loading" />
     <InputFile label="YOUR PICTURE" :edit="image && image.file" @set="(value) => handlePhotoChange(value)" />
+    <div id="con">
       <Button v-if="result === null" text="CONTINUE" :disabled="image === null" :icon="['fas', 'arrow-right']" @click.native="() => getResult()" />
       <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>
 </template>
 

pages/index.vue

@@ -1,8 +1,12 @@
 <template>
   <main>
+    <div id="catornot">
+      <div id="text">
         <h1>Cat or Not</h1>
+      </div>
+    </div>
     <nuxt-link to="/check">
-      <Button text="GET STARTED" />
+      <Button id="button" text="GET STARTED" />
     </nuxt-link>
   </main>
 </template>