scss

assets/scss/_layout.scss

@@ -1,3 +1,79 @@
-.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%;
+ 
+}
+label.cos{
+  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;
+  margin-left: 450px;
+  margin-bottom: -150px;
+}
+div#con{
+ padding-left: 800px;
+ 
 }

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">
+      <label v-else :for="id" class="cos">
-        kliknij /  upuść tutaj
+        <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

package.json

@@ -17,7 +17,7 @@
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/fontawesome": "^1.1.2",
     "core-js": "^3.15.1",
-    "nuxt": "^2.15.7"
+    "nuxt": "^2.13.3"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.14.7",
@@ -26,7 +26,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,8 +1,8 @@
 <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 -->
@@ -11,6 +11,7 @@
         <Button text="TRY AGAIN" :icon="['fas', 'redo']" @click.native="getResult" />
         <Button text="PICK ANOTHER" :icon="['fas', 'arrow-right']" @click.native="clear" />
       </template>
+    </div>
   </main>
 </template>