s462068/inzynieria_frontend
3
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

components

Browse Source
This commit is contained in:
Maciej 2021-12-18 17:55:30 +01:00
parent 911e5fa941
commit 1c000d3407
4 changed files with 123 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
assets/scss/_layout.scss
View File

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

2
components/Loader.vue
View File

@ -1,5 +1,5 @@
<template> <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ś --> <!-- @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... loading...
</div> </div>

22
components/Result.vue Normal file
View File

@ -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>

8
pages/check.vue
View File

@ -7,9 +7,11 @@
<template v-else> <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 --> <!-- @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 --> <!-- @temp -->
{{ result }} <Result :result="result" />
<Button text="TRY AGAIN" :icon="['fas', 'redo']" @click.native="getResult" /> <div id="buttons">
<Button text="PICK ANOTHER" :icon="['fas', 'arrow-right']" @click.native="clear" /> <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> </template>
</div> </div>
</main> </main>